cty-mui-core 1.0.38 → 1.0.40

package/components/audio-recorder.js

@@ -75,6 +75,33 @@ class CTYAudioRecorder {
             }
         });
     }
+    hasPermission() {
+        return new Promise((resolve, reject) => {
+            if (!this.isAudioRecorderAvailable) {
+                reject('Audio recorder plugin is not available');
+                return;
+            }
+            this._audioRecorderPlugin.hasPermission((result) => resolve(result), (error) => reject(error));
+        });
+    }
+    requestPermission() {
+        return new Promise((resolve, reject) => {
+            if (!this.isAudioRecorderAvailable) {
+                reject('Audio recorder plugin is not available');
+                return;
+            }
+            this._audioRecorderPlugin.requestPermission(() => resolve(), (error) => reject(error));
+        });
+    }
+    openAppSettings() {
+        return new Promise((resolve, reject) => {
+            if (!this.isAudioRecorderAvailable) {
+                reject('Audio recorder plugin is not available');
+                return;
+            }
+            this._audioRecorderPlugin.openAppSettings(() => resolve(), (error) => reject(error));
+        });
+    }
     uploadWxRecording(localId, tip = UploadProgressTip.SHOW) {
         return new Promise((resolve, reject) => {
             try {

package/components/camera.js

@@ -2,17 +2,20 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { c as cameraPreview, i as imagePicker } from './image-picker.js';
 import { d as deviceInfo } from './device-info.js';
 import { d as closeOutline, e as backspaceOutline } from './index2.js';
-import { d as defineCustomElement$c } from './backdrop.js';
-import { d as defineCustomElement$b } from './icon.js';
-import { d as defineCustomElement$a } from './image-viewer.js';
-import { d as defineCustomElement$9 } from './nav-bar.js';
-import { d as defineCustomElement$8 } from './swiper.js';
-import { d as defineCustomElement$7 } from './button.js';
-import { d as defineCustomElement$6 } from './buttons.js';
-import { d as defineCustomElement$5 } from './header.js';
-import { d as defineCustomElement$4 } from './icon2.js';
-import { d as defineCustomElement$3 } from './ripple-effect.js';
-import { d as defineCustomElement$2 } from './title.js';
+import { d as defineCustomElement$f } from './alert.js';
+import { d as defineCustomElement$e } from './backdrop.js';
+import { d as defineCustomElement$d } from './icon.js';
+import { d as defineCustomElement$c } from './image-viewer.js';
+import { d as defineCustomElement$b } from './nav-bar.js';
+import { d as defineCustomElement$a } from './permission-alert.js';
+import { d as defineCustomElement$9 } from './swiper.js';
+import { d as defineCustomElement$8 } from './button.js';
+import { d as defineCustomElement$7 } from './buttons.js';
+import { d as defineCustomElement$6 } from './header.js';
+import { d as defineCustomElement$5 } from './icon2.js';
+import { d as defineCustomElement$4 } from './ripple-effect.js';
+import { d as defineCustomElement$3 } from './title.js';
+import { d as defineCustomElement$2 } from './toast.js';
 import { d as defineCustomElement$1 } from './toolbar.js';
 
 const cameraCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}p,h1,h2,h3,h4,h5,h6{margin:0;padding:0}.flex{display:-ms-flexbox;display:flex}.flex-wrap{display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap}.flex-align-start{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.flex-align-center{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.flex-align-end{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end}.flex-justify-start{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start}.flex-justify-center{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.flex-justify-end{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.flex-align-end-start{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}.flex-align-end-center{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}.flex-align-end-end{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}.flex-center{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.flex-center-justify-end{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.flex-between{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.flex-center-between{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.flex-column{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column}.flex-column-align-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center}.flex-column-justify-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:center;justify-content:center}.flex-column-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.flex-column-between{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:justify;justify-content:space-between}.flex-column-center-between{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.cty-button-native{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin:0;padding:0;background:transparent;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;line-height:1;border:0;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;cursor:pointer}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:fixed;left:0;top:0;z-index:20099;width:100vw !important;height:100vh !important;visibility:visible !important}.cty-camera__close[class]{margin:0;min-height:var(--cty-camera-close-min-hieght, 3.1em);--background:transparent;--background-activated:transparent;--background-focused:transparent;--background-hover:transparent;--box-shadow:none;--padding-top:var(--cty-camera-close-padding-top, 3px);--padding-bottom:var(--cty-camera-close-padding-bottom, 3px);--padding-start:var(--cty-camera-close-padding-start, 6px);--padding-end:var(--cty-camera-close-padding-end, 6px);--color:var(--cty-camera-close-color, var(--cty-text-color-white))}.cty-camera__close-icon{font-size:var(--cty-camera-close-font-size, 28px)}.cty-camera-main{-ms-flex:1;flex:1;position:relative}.cty-camera-widgets{position:absolute;top:0;right:15px}.cty-camera-widget{-ms-flex-direction:column;flex-direction:column;margin-bottom:var(--cty-camera-camera-widget-offset-y, 30px);color:var(--cty-camera-camera-widget-color, #fff)}.cty-camera-widget__icon{font-size:var(--cty-camera-camera-widget-icon-size, 20px)}.cty-camera-widget__text{margin-top:var(--cty-camera-camera-widget-text-offset-y, 5px);font-size:var(--cty-camera-camera-widget-text-size, var(--cty-font-size-extra-small))}.cty-camera-widget__ratio{width:24px;height:16px;border-radius:2px;border:1px solid var(--cty-camera-camera-widget-color, #fff);font-size:10px}.cty-camera-controls{margin-top:auto}.cty-camera-controls__mode{width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:var(--cty-camera-camera-controls-mode-padding, 2px);margin:var(--cty-camera-camera-controls-mode-offset, 0 auto 15px);background:var(--cty-camera-camera-controls-mode-bg, rgba(0, 0, 0, 0.5));border-radius:var(--cty-camera-camera-controls-mode-radius, 3px);color:var(--cty-camera-camera-controls-mode-color, #fff)}.cty-camera-controls__mode-button{padding:var(--cty-camera-camera-controls-mode-button-padding, 3px 5px);border-radius:var(--cty-camera-camera-controls-mode-button-radius, 3px);font-size:var(--cty-camera-camera-controls-mode-button-font-szie, var(--cty-font-size-extra-small))}.cty-camera-controls__mode-button__active{background:var(--cty-camera-camera-controls-mode-button-active-bg, #fff);color:var(--cty-camera-camera-controls-mode-button-active-color, #000)}.cty-camera-controls__zooms{margin:var(--cty-camera-camera-controls-zooms-offset, 0 0 15px)}.cty-camera-controls__zoom-item{width:var(--cty-camera-camera-controls-zoom-active-size, 28px);height:var(--cty-camera-camera-controls-zoom-active-size, 28px);border-radius:50%}.cty-camera-controls__zoom-item:not(:last-child){margin-right:var(--cty-camera-camera-controls-zoom-offset, 10px)}.cty-camera-controls__zoom-item__active{border:var(--cty-camera-camera-controls-zoom-active-border, 1px solid #fff)}.cty-camera-controls__zoom-item__active .cty-camera-controls__zoom-text{background:var(--cty-camera-camera-controls-zoom-active-bg, transparent)}.cty-camera-controls__zoom-text{width:var(--cty-camera-camera-controls-zoom-size, 24px);height:var(--cty-camera-camera-controls-zoom-size, 24px);background:var(--cty-camera-camera-controls-zoom-bg, rgba(0, 0, 0, 0.3));border-radius:50%;color:var(--cty-camera-camera-controls-color, #fff);font-size:var(--cty-camera-camera-controls-zoom-font-size, 10px);font-weight:var(--cty-camera-camera-controls-zoom-font-weight, 600)}.cty-camera-controls__main{margin:var(--cty-camera-camera-controls-take-photo-offset, 0 0 15px)}.cty-camera-controls__take-photo{width:var(--cty-camera-camera-controls-take-photo-size, 60px);height:var(--cty-camera-camera-controls-take-photo-size, 60px);border-radius:50%;border:var(--cty-camera-camera-controls-take-photo-border, 2px solid #fff)}.cty-camera-controls__take-photo-button{width:var(--cty-camera-camera-controls-take-photo-button-size, 48px);height:var(--cty-camera-camera-controls-take-photo-button-size, 48px);border-radius:50%;background:var(--cty-camera-camera-controls-color, #fff)}.cty-camera-controls__take-photo-button:active{-webkit-transform:scale(0.9);transform:scale(0.9);-webkit-transition:-webkit-transform 0.05s cubic-bezier(0.2, 0.9, 0.4, 1.1);transition:-webkit-transform 0.05s cubic-bezier(0.2, 0.9, 0.4, 1.1);transition:transform 0.05s cubic-bezier(0.2, 0.9, 0.4, 1.1);transition:transform 0.05s cubic-bezier(0.2, 0.9, 0.4, 1.1), -webkit-transform 0.05s cubic-bezier(0.2, 0.9, 0.4, 1.1);-webkit-box-shadow:0 3px 8px rgba(0, 0, 0, 0.2);box-shadow:0 3px 8px rgba(0, 0, 0, 0.2);-webkit-filter:brightness(0.96);filter:brightness(0.96)}.cty-camera-controls__main-left,.cty-camera-controls__main-confirm{-ms-flex:1;flex:1}.cty-camera-controls__main-confirm-icon{font-size:var(--cty-camera-camera-controls-confirm-icon-size, 24px);color:var(--cty-camera-camera-controls-confirm-icon-color, var(--cty-color-danger))}.cty-camera-controls__main-confirm-text{margin-top:var(--cty-camera-camera-controls-confirm-text-offset, 5px);font-size:var(--cty-camera-camera-controls-confirm-text-size, 12px);color:var(--cty-camera-camera-controls-confirm-text-color, #fff)}.cty-camera-controls__main-delete{margin-right:var(--cty-camera-camera-controls-delete-offser, 30px)}.cty-camera-controls__main-delete-icon{font-size:var(--cty-camera-camera-controls-delete-icon-size, 20px);color:var(--cty-camera-camera-controls-delete-icon-color, #fff)}.cty-camera-controls__images{overflow-x:auto;width:100%;min-height:var(--cty-camera-camera-controls-images-min-height, 84px);padding:var(--cty-camera-camera-controls-images-padding, 0 15px);margin:var(--cty-camera-camera-controls-images-offset, 15px 0)}.cty-camera-controls__image{-ms-flex:none;flex:none;position:relative;width:var(--cty-camera-camera-controls-image-size, 54px);height:var(--cty-camera-camera-controls-image-size, 54px)}.cty-camera-controls__image:not(:last-child){margin-right:var(--cty-camera-camera-controls-image-offset, 10px)}.cty-camera-controls__image-img{display:block;width:100%;height:100%;border-radius:var(--cty-camera-camera-controls-image-border-radius, 8px);-o-object-fit:var(--cty-camera-camera-controls-image-object-fit, cover);object-fit:var(--cty-camera-camera-controls-image-object-fit, cover)}.cty-camera-controls__image-delete{position:absolute;top:0;right:0;width:var(--cty-camera-camera-controls-image-delete-size, 20px);height:var(--cty-camera-camera-controls-image-delete-size, 20px);background:var(--cty-camera-camera-controls-image-delete-bg, rgba(0, 0, 0, 0.5));border-radius:var(--cty-camera-camera-controls-image-delete-border-radius, 0 8px);color:var(--cty-camera-camera-controls-image-delete-color, #fff);font-size:var(--cty-camera-camera-controls-image-delete-font-size, 18px)}.cty-camera-viewer__single{min-height:var(--cty-camera-viewer-single-min-height, 44px);padding:var(--cty-camera-viewer-single-padding, 0 15px)}.cty-camera-viewer__single-close,.cty-camera-viewer__single-confirm{font-size:var(--cty-image-viewer-single-close-size, 20px);color:var(--cty-image-viewer-single-close-color, #fff)}";
@@ -50,6 +53,8 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
         this.zoomSteps = 20; //仅android有效，通过这个算出每一份的的比例: (getMaxZoom() + 1) / allowMaxZoom
         this.touchZoom = true;
         this.touchZoomProp = 0.01;
+        this.permissionAlertTitle = '需要申请开启相机权限';
+        this.permissionAlertContent = '需要开启相机权限，用于拍照。我们承诺仅在功能使用时调用摄像头。';
         this.ratioIndex = 0;
         this.flash = false;
         this.zoomIndex = 0;
@@ -58,6 +63,10 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
         this.imageViewerIndex = 0;
         this.currentPhotoMode = 'multiple';
         this.currentZoom = 1;
+        this.hasPermission = false;
+        this.permissionAlertVisible = false;
+        this.isToastOpen = false;
+        this.toastContent = '';
         this.startZoom = 1;
         this.SCREEN_WIDTH = window.screen.width;
         this.SCREEN_HEIGHT = window.screen.height;
@@ -82,9 +91,46 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
         bodyEl.style.visibility = 'visible';
         bodyEl.style.background = this.originalBodyBackground;
     }
-    initCamera() {
+    async requestPermission() {
+        try {
+            this.hasPermission = await cameraPreview.hasPermission();
+        }
+        catch (error) {
+            this.hasPermission = false;
+        }
+        if (!this.hasPermission) {
+            try {
+                await cameraPreview.requestPermission();
+                this.hasPermission = true;
+            }
+            catch (error) {
+                const { code, message } = error;
+                if (code == 'PERMISSION_DENIED_NEED_SETTINGS') {
+                    this.permissionAlertVisible = true;
+                }
+                else {
+                    if (code != 'PERMISSION_DENIED_FIRST_TIME' && message) {
+                        this.isToastOpen = true;
+                        this.toastContent = message;
+                    }
+                    this.ctyDismiss.emit();
+                }
+            }
+        }
+    }
+    async initCamera() {
+        await this.requestPermission();
+        if (!this.hasPermission) {
+            !this.permissionAlertVisible && this.ctyDismiss.emit();
+            return;
+        }
         const height = this.getCameraHeight();
-        cameraPreview.startCamera(Object.assign(Object.assign({ y: this.safeArea, camera: 'back', backgroundColor: '#000000' }, this.options), { x: 0, height, toBack: true, tapPhoto: false, tapFocus: true, enableAutoSettings: false, storeToFile: this.file }));
+        cameraPreview.startCamera(Object.assign(Object.assign({ y: this.safeArea, camera: 'back', backgroundColor: '#000000' }, this.options), { x: 0, height, toBack: true, tapPhoto: false, tapFocus: true, enableAutoSettings: false, storeToFile: this.file })).catch((error) => {
+            const { code } = error;
+            if (code == 'PERMISSION_DENIED_NEED_SETTINGS') {
+                this.permissionAlertVisible = true;
+            }
+        });
     }
     close() {
         this.ctyDismiss.emit();
@@ -236,9 +282,27 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
         }
         cameraPreview.setZoom(Math.min(startCameraZoom + diff, maxZoom));
     }
+    async toOpenAppSetting(event) {
+        const { item } = event.detail;
+        if (item.action == 'permission') {
+            try {
+                await cameraPreview.openAppSettings();
+                this.permissionAlertVisible = false;
+                this.initCamera();
+            }
+            catch (error) {
+                this.closePermissionAlert(event);
+            }
+        }
+    }
+    closePermissionAlert(e) {
+        e.stopPropagation();
+        this.permissionAlertVisible = false;
+        this.ctyDismiss.emit();
+    }
     render() {
         const { title, closeIcon, flash, flipText, flashText, ratioText, ratios, ratioIndex, zoomIndex, zooms, mode, singleText, multipleText, currentPhotoMode, confirmIcon, confirmText, deleteIcon, pictures, showImageViewer, imageViewerIndex, touchZoom, currentZoom } = this;
-        return (h(Host, { key: 'f2dbbeee10fef4293fa66a78076f751893d93608', class: "cty-camera", onClick: (e) => e.stopPropagation() }, h("cty-nav-bar", { key: '054634ffc50db9a53cf9120e1546f0ab1519a179', title: title, type: "clear" }, h("slot", { key: '1440253fbb8a78ef418ffba4971eb2548832e7db', name: "header-start", slot: "start" }, !!closeIcon && h("ion-button", { key: '49f8467e23a693abcd3213c403fe308f46600293', class: "cty-camera__close", onClick: () => this.close() }, h("cty-icon", { key: 'dcdf35990d7609c0fd4fe720d2166d864bd62946', class: "cty-camera__close-icon", name: closeIcon })))), h("div", { key: 'a07a80a5039e04174bffd5223883f2c97ab21314', class: "cty-camera-main", onTouchStart: (e) => this.touchstart(e), onTouchMove: (e) => this.touchmove(e), onTouchEnd: (e) => this.touchend(e) }, h("div", { key: '1105f0e3ba35b3076057f3d61f8a94e7c449079c', class: "cty-camera-widgets", part: "widgets" }, !!flipText && h("button", { key: 'c9206213c57615b8d0228d16d9e2ab50c93ce2f7', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.flipCamera() }, h("cty-icon", { key: 'd0490581bf68da9fcbe8d661771a016e096aa4e6', class: "cty-camera-widget__icon", name: "cty-flip" }), !!flipText && h("span", { key: '57d763faca03d9f713f6eb73c24daf2a6b6b4057', class: "cty-camera-widget__text" }, flipText)), !!flashText && h("button", { key: '8c2e80d3f1dc0136b2b1bd8a27df12c950f81e2f', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.toggleFlash() }, h("cty-icon", { key: 'ff771e3b1c75d0e4a4c797d6ce0d7e7aec93f097', class: "cty-camera-widget__icon", name: flash ? 'cty-flash-on' : 'cty-flash-off' }), !!flashText && h("span", { key: 'c15e58dc18a185c5b99303f821447e31cde5c02d', class: "cty-camera-widget__text" }, flashText)), !!ratioText && h("button", { key: '67f70b3a009c2761fe3b0c1c4d8ab844972420f5', class: "cty-button-native cty-camera-widget", part: "ratio", onClick: () => this.ratioChange() }, h("span", { key: '0c5be61834b53c2281eba2912d47d083d5f16403', class: "cty-camera-widget__ratio flex-center" }, ratios[ratioIndex]), !!ratioText && h("span", { key: 'd75675b27ac00ad662cf687dbec16d1d607932a6', class: "cty-camera-widget__text" }, ratioText)))), h("div", { key: 'ea3852cbb926abb151942500a140a78d8b3ee712', class: "cty-camera-controls safe-area-bottom-padding" }, mode == 'both' && pictures.length <= 0 && h("div", { key: '15d0990b2dbacab7d81b73f0aac8766106d93226', class: "cty-camera-controls__mode flex-center", part: "mode" }, h("button", { key: 'ae5a5de840f895568d2ed72ca12d14d6e028bebe', class: { 'cty-button-native cty-camera-controls__mode-button': true, 'cty-camera-controls__mode-button__active': currentPhotoMode === 'single' }, onClick: () => this.currentPhotoMode = 'single' }, singleText), h("button", { key: '33109a8369c68dfd902e9b0ad7a36a6e571fddb5', class: { 'cty-button-native cty-camera-controls__mode-button': true, 'cty-camera-controls__mode-button__active': currentPhotoMode === 'multiple' }, onClick: () => this.currentPhotoMode = 'multiple' }, multipleText)), h("slot", { key: 'cecb11c3b01fdc6c2b207bf846674c9816535004', name: "zooms" }, !touchZoom && zooms.length > 0 && h("div", { key: '32d91389660d8ab71c91777a85c6093d700eae73', class: "cty-camera-controls__zooms flex-center", part: "zooms" }, zooms.map((item, idx) => (h("div", { class: { 'cty-camera-controls__zoom-item flex-center': true, 'cty-camera-controls__zoom-item__active': zoomIndex === idx }, onClick: () => this.setZoom(idx) }, h("span", { class: "cty-camera-controls__zoom-text flex-center" }, item, "X"))))), touchZoom && h("div", { key: '2979d870a22334d7329b122eb5eb32737fd48b58', class: "cty-camera-controls__zooms flex-center", part: "zooms" }, h("div", { key: 'fcb6e01d6e9913c810e02b08f172e1eaecaf42a6', class: { 'cty-camera-controls__zoom-item flex-center cty-camera-controls__zoom-item__active': true }, onClick: () => this.resetZoom() }, h("span", { key: '5b413b10485d7b5cf0c41e2ca47a4834c812da09', class: "cty-camera-controls__zoom-text flex-center" }, currentZoom, "X")))), h("div", { key: '4907c6ed45def804b5d4b8072e33dd77d8ddf750', class: "cty-camera-controls__main flex-center" }, h("div", { key: 'ea116cc9eb7bc8b49775f0cc76c0047cbe50f5ff', class: "cty-camera-controls__main-left flex-center" }), h("div", { key: 'ff332ec62a18093c632cfb9bfb693999cdfe0b26', class: "cty-camera-controls__take-photo flex-center" }, h("button", { key: '2e1dd2ac2fb3d916d80a18920005fe13eb5447ac', class: "cty-button-native cty-camera-controls__take-photo-button", part: "take-photo", onClick: () => this.takePhoto() })), h("div", { key: '3414c6ed97b0a361804161c6bb3ccee75b719565', class: "cty-camera-controls__main-confirm flex-center" }, currentPhotoMode !== 'single' && pictures.length > 0 && !!deleteIcon && h("button", { key: '1ca16002c7d041af5e289936140379c81a60ff1a', class: "cty-camera-controls__main-delete cty-button-native flex-column-center", onClick: () => this.deleteLastPicture() }, h("cty-icon", { key: '52809317515b8b9c967a7d19b97230bf38f902ee', class: "cty-camera-controls__main-delete-icon", name: deleteIcon })), currentPhotoMode !== 'single' && pictures.length > 0 && h("button", { key: 'dca02780b3f7af11b5b538af4f039f9e0308449d', class: "cty-button-native flex-column-center", onClick: () => this.confirm() }, h("cty-icon", { key: '40c8d5ac9859f76e01ef23c80b71d6d22ab0bd1f', class: "cty-camera-controls__main-confirm-icon", name: confirmIcon }), confirmText && h("span", { key: '92186800f1c93464c5c38e190bcfec43444f80a7', class: "cty-camera-controls__main-confirm-text" }, confirmText)))), h("slot", { key: '17a6034ad5c152cdb575f79d1f74ba435eb503e0', name: "images" }, h("div", { key: 'eb7429358baf366ee7a34d0f6b84d9bc9daf150a', class: "cty-camera-controls__images flex-align-center" }, currentPhotoMode !== 'single' && pictures.map((item, idx) => (h("div", { class: "cty-camera-controls__image", onClick: () => this.toImageViewer(idx) }, h("img", { class: 'cty-camera-controls__image-img', src: item.thumbnail || item.url }), h("button", { class: "cty-button-native", onClick: (e) => this.deletePicture(e, idx) }, h("cty-icon", { class: "cty-camera-controls__image-delete", name: closeOutline })))))))), showImageViewer && h("cty-image-viewer", { key: 'bae500ca714d13cbca2bf1ff03209cec29612e06', images: pictures.map(item => item.url), initialSlide: imageViewerIndex, overlayIndex: 100, backdropDismiss: false, closeable: false, onCtyDismiss: (e) => this.closeImageViewer(e) }, currentPhotoMode !== 'multiple' && h("div", { key: '10b99a568c83aaa375c061f5a060018cdbcc0e99', class: "cty-camera-viewer__single flex-center-between", slot: "pager" }, h("button", { key: '3b3b52f74c5115aa8be3460621f4a02db00ce9c9', class: "cty-camera-viewer__single-close cty-button-native", onClick: (event) => this.closeSingleImageViewer(event) }, h("cty-icon", { key: '006d14a44c03870f4b17dc4e5cb0f0eb16bc9504', name: "cty-close2" })), h("button", { key: 'db9707996bf8bba7211792c5f4e66282080f9008', class: "cty-camera-viewer__single-confirm cty-button-native", onClick: () => this.confirm() }, h("cty-icon", { key: 'a8db29743f5d6c043fbda19265432ac0e89eb168', name: "cty-tick" }))), currentPhotoMode !== 'multiple' && h("i", { key: '091022dccdf8a1796b175be4a001de06bbdadc6e', slot: "close" }))));
+        return (h(Host, { key: '87e30447a2f8f3d4bac90a5997486e525b0d86e1', class: "cty-camera", onClick: (e) => e.stopPropagation() }, h("cty-nav-bar", { key: 'f887682109a7b57792b40a0c3c0e5c43c3afbb02', title: title, type: "clear" }, h("slot", { key: 'd24bb63c23f0d38cc5c3537a846f398a325c33a3', name: "header-start", slot: "start" }, !!closeIcon && h("ion-button", { key: '012ee12b016e8986a2177b8c0547d4e244c679ee', class: "cty-camera__close", onClick: () => this.close() }, h("cty-icon", { key: '384c34680e0d51bf8348c5547342d262e047d1df', class: "cty-camera__close-icon", name: closeIcon })))), h("div", { key: '98125d2cb9e431fa398a5d137d996d549af63174', class: "cty-camera-main", onTouchStart: (e) => this.touchstart(e), onTouchMove: (e) => this.touchmove(e), onTouchEnd: (e) => this.touchend(e) }, h("div", { key: 'b8793b12764a555aa271534721832149654678b3', class: "cty-camera-widgets", part: "widgets" }, !!flipText && h("button", { key: 'eb561af5de2dfe02360b5b0c081ac16d42372c4d', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.flipCamera() }, h("cty-icon", { key: '3a1497d2620db2bae124c03ec11e2ccd720cbf56', class: "cty-camera-widget__icon", name: "cty-flip" }), !!flipText && h("span", { key: 'bec3462b8f19889c2b905783fded221830f31f83', class: "cty-camera-widget__text" }, flipText)), !!flashText && h("button", { key: 'd6cf0bedde3a1c909c24d5b89c7f526bbe433490', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.toggleFlash() }, h("cty-icon", { key: '2756a11d15f5d00390632e76afb787edc9544a83', class: "cty-camera-widget__icon", name: flash ? 'cty-flash-on' : 'cty-flash-off' }), !!flashText && h("span", { key: '9db63417dbd15b3ba719ff930f78cc44ac8c9ab0', class: "cty-camera-widget__text" }, flashText)), !!ratioText && h("button", { key: '128f64704c198af7c5087361f820af40c92d5136', class: "cty-button-native cty-camera-widget", part: "ratio", onClick: () => this.ratioChange() }, h("span", { key: 'e9ee33ffe7a3b560538945b6d7d493e46d278353', class: "cty-camera-widget__ratio flex-center" }, ratios[ratioIndex]), !!ratioText && h("span", { key: 'b9f7018443944c94dc679bdcbd0247138f377680', class: "cty-camera-widget__text" }, ratioText)))), h("div", { key: 'c19ee27e399fc263add8ef85a3d59b5492d25e4e', class: "cty-camera-controls safe-area-bottom-padding" }, mode == 'both' && pictures.length <= 0 && h("div", { key: 'a89f4f51757cf84994596a30344f883e873f621b', class: "cty-camera-controls__mode flex-center", part: "mode" }, h("button", { key: '58f7beb5e4e36e0d16be5ee6a72bc7cfe843a3f3', class: { 'cty-button-native cty-camera-controls__mode-button': true, 'cty-camera-controls__mode-button__active': currentPhotoMode === 'single' }, onClick: () => this.currentPhotoMode = 'single' }, singleText), h("button", { key: '09797fed9e2d0e4214312cd71504e8c42ce5aada', class: { 'cty-button-native cty-camera-controls__mode-button': true, 'cty-camera-controls__mode-button__active': currentPhotoMode === 'multiple' }, onClick: () => this.currentPhotoMode = 'multiple' }, multipleText)), h("slot", { key: 'a93b960673912c178b703d01028b927701390f4b', name: "zooms" }, !touchZoom && zooms.length > 0 && h("div", { key: '92311e8a921f3d898fe9dde4f0354018154e62a6', class: "cty-camera-controls__zooms flex-center", part: "zooms" }, zooms.map((item, idx) => (h("div", { class: { 'cty-camera-controls__zoom-item flex-center': true, 'cty-camera-controls__zoom-item__active': zoomIndex === idx }, onClick: () => this.setZoom(idx) }, h("span", { class: "cty-camera-controls__zoom-text flex-center" }, item, "X"))))), touchZoom && h("div", { key: '71840ea2f3c1efd39e0a483cc4176e2084c436b2', class: "cty-camera-controls__zooms flex-center", part: "zooms" }, h("div", { key: '8f21de0ab8c632262136fa2deae33541ff33205c', class: { 'cty-camera-controls__zoom-item flex-center cty-camera-controls__zoom-item__active': true }, onClick: () => this.resetZoom() }, h("span", { key: 'dd5c8774153e8d4afee69cfd619aeb58b7aaeafb', class: "cty-camera-controls__zoom-text flex-center" }, currentZoom, "X")))), h("div", { key: 'e77fe2fe8d383a0b0db0eabc953a06e14927372d', class: "cty-camera-controls__main flex-center" }, h("div", { key: '0b2b0ed9a73e1d97b65f33db00b645eecd02c855', class: "cty-camera-controls__main-left flex-center" }), h("div", { key: 'c82c3e5738c34465e0c881c652d03e207f1c4378', class: "cty-camera-controls__take-photo flex-center" }, h("button", { key: '6eb38e93d6435a566d215d1e020caf9651d017b9', class: "cty-button-native cty-camera-controls__take-photo-button", part: "take-photo", onClick: () => this.takePhoto() })), h("div", { key: 'f7162a2065e1bafe8e5ee3fb5b7f9956d2f47bca', class: "cty-camera-controls__main-confirm flex-center" }, currentPhotoMode !== 'single' && pictures.length > 0 && !!deleteIcon && h("button", { key: '406107a0fe9d3b64bf25b9decfd04442731b6e94', class: "cty-camera-controls__main-delete cty-button-native flex-column-center", onClick: () => this.deleteLastPicture() }, h("cty-icon", { key: '4fe35fa4aa7d56cc313ae1529e48c7fe9cdddb67', class: "cty-camera-controls__main-delete-icon", name: deleteIcon })), currentPhotoMode !== 'single' && pictures.length > 0 && h("button", { key: '21db9978e8e95983ecdbb1ca644bfa5bbd5250b3', class: "cty-button-native flex-column-center", onClick: () => this.confirm() }, h("cty-icon", { key: '1299292a88b81bad67007ee04a0688c3d753cc1a', class: "cty-camera-controls__main-confirm-icon", name: confirmIcon }), confirmText && h("span", { key: 'a472a97e3a5511a43812fb7a44508151e514e4b3', class: "cty-camera-controls__main-confirm-text" }, confirmText)))), h("slot", { key: '2f928fef43a074b195de928f60ea4425f6030c3f', name: "images" }, h("div", { key: 'ec3dea052f155c830b328b69759447172a2f85a1', class: "cty-camera-controls__images flex-align-center" }, currentPhotoMode !== 'single' && pictures.map((item, idx) => (h("div", { class: "cty-camera-controls__image", onClick: () => this.toImageViewer(idx) }, h("img", { class: 'cty-camera-controls__image-img', src: item.thumbnail || item.url }), h("button", { class: "cty-button-native", onClick: (e) => this.deletePicture(e, idx) }, h("cty-icon", { class: "cty-camera-controls__image-delete", name: closeOutline })))))))), showImageViewer && h("cty-image-viewer", { key: '41f862a4f8686499086de808c2b7d1bf3df45af3', images: pictures.map(item => item.url), initialSlide: imageViewerIndex, overlayIndex: 100, backdropDismiss: false, closeable: false, onCtyDismiss: (e) => this.closeImageViewer(e) }, currentPhotoMode !== 'multiple' && h("div", { key: '1d0432f45263db6276d5d921f928414377b513e8', class: "cty-camera-viewer__single flex-center-between", slot: "pager" }, h("button", { key: 'ac4919e6a40e2db191ab96b57c0ae95aa6dfcb68', class: "cty-camera-viewer__single-close cty-button-native", onClick: (event) => this.closeSingleImageViewer(event) }, h("cty-icon", { key: '30aef1dc5108f2f617c590b99fb835d059dc1900', name: "cty-close2" })), h("button", { key: 'c83ea114924d5d4e32a23a94c2a483784bdecab8', class: "cty-camera-viewer__single-confirm cty-button-native", onClick: () => this.confirm() }, h("cty-icon", { key: '866d451495aef92120d8876742cb02b2c32f4122', name: "cty-tick" }))), currentPhotoMode !== 'multiple' && h("i", { key: '9070e8f341360e0d6801d56664f679d7dd18184d', slot: "close" })), this.permissionAlertVisible && h("cty-permission-alert", { key: '30055b9ae7772684312ca90a7076545edfb476db', title: this.permissionAlertTitle, content: this.permissionAlertContent, buttons: this.permissionAlertbuttons, onCtyDismiss: (e) => this.closePermissionAlert(e), onCtyTap: (e) => this.toOpenAppSetting(e) }), h("ion-toast", { key: '3121cd6124ab8f92835655e6636d87d8d8200b2d', "is-open": this.isToastOpen, message: this.toastContent, duration: 2000, position: 'middle' })));
     }
     get el() { return this; }
     static get style() { return cameraCss; }
@@ -268,6 +332,9 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
         "zoomSteps": [2, "zoom-steps"],
         "touchZoom": [4, "touch-zoom"],
         "touchZoomProp": [2, "touch-zoom-prop"],
+        "permissionAlertTitle": [1, "permission-alert-title"],
+        "permissionAlertContent": [1, "permission-alert-content"],
+        "permissionAlertbuttons": [16, "permission-alertbuttons"],
         "ratioIndex": [32],
         "flash": [32],
         "zoomIndex": [32],
@@ -276,6 +343,9 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
         "imageViewerIndex": [32],
         "currentPhotoMode": [32],
         "currentZoom": [32],
+        "permissionAlertVisible": [32],
+        "isToastOpen": [32],
+        "toastContent": [32],
         "flipCamera": [64],
         "toggleFlash": [64],
         "flashOff": [64],
@@ -288,64 +358,79 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["cty-camera", "cty-backdrop", "cty-icon", "cty-image-viewer", "cty-nav-bar", "cty-swiper", "ion-button", "ion-buttons", "ion-header", "ion-icon", "ion-ripple-effect", "ion-title", "ion-toolbar"];
+    const components = ["cty-camera", "cty-alert", "cty-backdrop", "cty-icon", "cty-image-viewer", "cty-nav-bar", "cty-permission-alert", "cty-swiper", "ion-button", "ion-buttons", "ion-header", "ion-icon", "ion-ripple-effect", "ion-title", "ion-toast", "ion-toolbar"];
     components.forEach(tagName => { switch (tagName) {
         case "cty-camera":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, Camera);
             }
             break;
+        case "cty-alert":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
         case "cty-backdrop":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$e();
             }
             break;
         case "cty-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$d();
             }
             break;
         case "cty-image-viewer":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$c();
             }
             break;
         case "cty-nav-bar":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$b();
+            }
+            break;
+        case "cty-permission-alert":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
             }
             break;
         case "cty-swiper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "ion-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "ion-buttons":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "ion-header":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "ion-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "ion-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ion-toast":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/components/circle.js

@@ -62,14 +62,14 @@ const Circle = /*@__PURE__*/ proxyCustomElement(class Circle extends HTMLElement
         return `M ${viewBoxSize / 2} ${viewBoxSize / 2} m 0, ${-rad} a ${rad}, ${rad} 0 1, ${sweepFlag} 0, ${rad * 2} a ${rad}, ${rad} 0 1, ${sweepFlag} 0, ${-rad * 2}`;
     }
     render() {
-        return (h(Host, { key: 'b552b6f0190327fbd9fcf458994feee63b761d38', class: "cty-circle" }, h("svg", { key: '64b07a4798544cc9f9878dc4be3a046c881a6706', ref: el => (this.svgEl = el) }, this.needDefs && h("defs", { key: '5762f3641189b8d8dd8da4beddaeb82c28b68287' }, h("linearGradient", { key: '03205dd0dc64e90bf6ca30fb613ceeffe688585e', id: this.gradientId, x1: "100%", y1: "0%", x2: "0%", y2: "0%", gradientTransform: "rotate(90)" }, this.colors.map(() => (h("stop", null))))), h("path", { key: '8075a1ece096aa40e2e57bba80760bfb87c38b01', ref: el => (this.layerEl = el), class: "cty-circle__layer", style: {
+        return (h(Host, { key: '2f368270af4614789d5598e5bc90b3e2ef057989', class: "cty-circle" }, h("svg", { key: '1df0553171d9fec249e84cf41f710826f49b3026', ref: el => (this.svgEl = el) }, this.needDefs && h("defs", { key: 'd57f574b35bbf69c57fc40803f3f7fb9acbcf9a9' }, h("linearGradient", { key: 'cf43aa12f3d51cf6a243f9638de9dedf2257280a', id: this.gradientId, x1: "100%", y1: "0%", x2: "0%", y2: "0%", gradientTransform: "rotate(90)" }, this.colors.map(() => (h("stop", null))))), h("path", { key: 'b5f534ab0dae045ee9d90f7dc9ca7781858e75f7', ref: el => (this.layerEl = el), class: "cty-circle__layer", style: {
                 'stroke-width': this.width + 'px',
                 'strokeDasharray': (this.ratio * this.perimeter) + 'px ' + this.perimeter + 'px'
-            } }), h("path", { key: 'fefec8d3cb6927b35b37ca04498d3abc572e8b63', ref: el => (this.hoverEl = el), class: "cty-circle__hover", style: {
+            } }), h("path", { key: 'c0e0e7bde4ee4218d369f0a68c45bdcc41b9bf6f', ref: el => (this.hoverEl = el), class: "cty-circle__hover", style: {
                 'stroke': this.rate <= 0 && this.zeroTransparent ? 'transparent' : this.needDefs ? 'url(#' + this.gradientId + ')' : this.color,
                 'stroke-width': +this.width + this.widthDif + 'px',
                 'strokeDasharray': (this.ratio * this.rate / 100 * this.perimeter) + 'px ' + this.perimeter + 'px'
-            } })), this.text !== '' && h("div", { key: 'f683c2dc61d281e6c506ff9a15b3a2a2f4ef56da', class: "cty-circle__text" }, this.text), h("slot", { key: '64eba94a1e793fe3dec863d0733f8a7ceb9e659b' })));
+            } })), this.text !== '' && h("div", { key: '87e72df56f972317345f50b3b7e82ff002df5048', class: "cty-circle__text" }, this.text), h("slot", { key: '269615587b996b6dc54c2a3390a0ef47ff08fb4c' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/crop-image.js

@@ -208,7 +208,7 @@ const CropImage = /*@__PURE__*/ proxyCustomElement(class CropImage extends HTMLE
         return (h("div", { class: "cty-crop-image__buttons flex-center-between safe-area-bottom-border-color" }, this.cancelText && cancelCmp, this.confirmText && confirmCmp));
     }
     render() {
-        return (h(Host, { key: 'f03ef034659039ca694e92e094e6f771b65ed41d', class: "cty-crop-image", onMouseDown: (e) => this.doTouchStart(e), onTouchStart: (e) => this.doTouchStart(e), onTouchMove: (e) => this.doTouchMove(e), onTouchEnd: () => this.doTouchEnd() }, h("slot", { key: '4d1f7dcd27ebf1824937e8e056fec2e64b871610', name: "header" }), h("div", { key: '53adedd36ec4b3d2a622d9c308f35b593df3c7dd', class: "cty-crop-image__wrapper", ref: el => (this.imageEl = el) }, h("img", { key: '70dc841fd80c5e80923e3365597653837ee2d01d', src: this.url, class: "cty-crop-image__image" })), h("div", { key: '7c19c8da9253e17615aa2699391fcc545cb1f9ac', class: "cty-crop-image__clip", ref: el => (this.clipEl = el) }), h("slot", { key: '8394107199cf8626534e3d0c1a258225306c6eaf', name: "clip" }), this.renderButtons(), h("slot", { key: 'e723cd0166a0a1d752d6f69af3873ac97b96298c', name: "footer" })));
+        return (h(Host, { key: '3805ba12b7e6f2809399b8a9f213e4a4131b081c', class: "cty-crop-image", onMouseDown: (e) => this.doTouchStart(e), onTouchStart: (e) => this.doTouchStart(e), onTouchMove: (e) => this.doTouchMove(e), onTouchEnd: () => this.doTouchEnd() }, h("slot", { key: '441105402304f96770ff61b883993c952f7ea4a9', name: "header" }), h("div", { key: 'affa68ce2eacf57bff5dcbc140c1da82d59dc8a3', class: "cty-crop-image__wrapper", ref: el => (this.imageEl = el) }, h("img", { key: '9c5dd8cafb8e14f7f0e5d6ee2cc999a139580342', src: this.url, class: "cty-crop-image__image" })), h("div", { key: 'eafd9083b6728615b767dae842c8b102ad40916d', class: "cty-crop-image__clip", ref: el => (this.clipEl = el) }), h("slot", { key: '25cb5fb31191e0a991064164b4c5752f39b7499b', name: "clip" }), this.renderButtons(), h("slot", { key: 'e60a010fea26d6fa38a380c4cb9f6c4c28c25558', name: "footer" })));
     }
     get el() { return this; }
     static get style() { return cropImageCss; }