cty-mui-core 1.0.42 → 1.0.43

package/components/camera.js

@@ -2,20 +2,17 @@ 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$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$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$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)}";
@@ -28,6 +25,7 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
         this.ctyDismiss = createEvent(this, "ctyDismiss", 7);
         this.ctyTakePhoto = createEvent(this, "ctyTakePhoto", 7);
         this.ctyConfirm = createEvent(this, "ctyConfirm", 7);
+        this.ctyPermissionNotify = createEvent(this, "ctyPermissionNotify", 7);
         this.safeArea = 44;
         this.title = '';
         this.options = {};
@@ -54,8 +52,6 @@ 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;
@@ -65,9 +61,6 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
         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;
@@ -106,31 +99,20 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
             }
             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();
-                }
+                this.ctyPermissionNotify.emit({ code, message, openAppSettings: () => cameraPreview.openAppSettings() });
             }
         }
     }
     async initCamera() {
         await this.requestPermission();
         if (!this.hasPermission) {
-            !this.permissionAlertVisible && this.ctyDismiss.emit();
+            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 })).catch((error) => {
-            const { code } = error;
-            if (code == 'PERMISSION_DENIED_NEED_SETTINGS') {
-                this.permissionAlertVisible = true;
-            }
+            const { code, message } = error;
+            this.ctyPermissionNotify.emit({ code, message, openAppSettings: () => cameraPreview.openAppSettings() });
         });
     }
     close() {
@@ -283,24 +265,9 @@ 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();
-            }
-            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: 'bb83ee1726feef5c84057c7723892d43f93c898c', class: "cty-camera", onClick: (e) => e.stopPropagation() }, h("cty-nav-bar", { key: '7f13f48d4ed2de835c0cd6a045268080d5c1b43e', title: title, type: "clear" }, h("slot", { key: 'fbc7dceb192a03a24396ca3be62c6c9f53825292', name: "header-start", slot: "start" }, !!closeIcon && h("ion-button", { key: 'fbf1536e049bec42259893653081110a2a1958f5', class: "cty-camera__close", onClick: () => this.close() }, h("cty-icon", { key: 'f34a507791bab61880f1f053a0e7ff5176c295dd', class: "cty-camera__close-icon", name: closeIcon })))), h("div", { key: '8277b267a0671f64c217e25d7b2669e8f9eeb1d8', class: "cty-camera-main", onTouchStart: (e) => this.touchstart(e), onTouchMove: (e) => this.touchmove(e), onTouchEnd: (e) => this.touchend(e) }, h("div", { key: '9b64b1fca0ad1bf01fe6cd383ff469e5fe9a1243', class: "cty-camera-widgets", part: "widgets" }, !!flipText && h("button", { key: 'cada5f233a4b755c00360641c0971309f310ef02', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.flipCamera() }, h("cty-icon", { key: 'af24b7d537825729e046aba6564c4f9e988983d4', class: "cty-camera-widget__icon", name: "cty-flip" }), !!flipText && h("span", { key: 'faa5b6ffb51768edc8e7d0bccddf33eb3531e466', class: "cty-camera-widget__text" }, flipText)), !!flashText && h("button", { key: '9addc710c3ff9fa7fe5e2dca9d7080a5b48821f4', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.toggleFlash() }, h("cty-icon", { key: 'b352d50ee12ffe92498e0c0a3c950a3cfc835b17', class: "cty-camera-widget__icon", name: flash ? 'cty-flash-on' : 'cty-flash-off' }), !!flashText && h("span", { key: '15daf94ee7856595ebfd0427275c30136a21085c', class: "cty-camera-widget__text" }, flashText)), !!ratioText && h("button", { key: '5d9ac7d3112165332b415636ca1f66cea5b4b576', class: "cty-button-native cty-camera-widget", part: "ratio", onClick: () => this.ratioChange() }, h("span", { key: 'adc545b141ae4cafe0ad0ee4b3f961617185bf50', class: "cty-camera-widget__ratio flex-center" }, ratios[ratioIndex]), !!ratioText && h("span", { key: 'ec406cf9e24e5a22fe81ad446b6217d27811cd82', class: "cty-camera-widget__text" }, ratioText)))), h("div", { key: '24080708dbaa7b58eff5fac1477b8bf2556aabf5', class: "cty-camera-controls safe-area-bottom-padding" }, mode == 'both' && pictures.length <= 0 && h("div", { key: '2856de71e0a012616e0fd5b634d32d6f51d817c1', class: "cty-camera-controls__mode flex-center", part: "mode" }, h("button", { key: '689ba86505b49126c6794858e00903926744f4c5', 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: '78b37ce3691d31241f25226165ed539f93f45fb8', 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: '321e3e6c93cb0c0474fd18811dc58c8e9553e99a', name: "zooms" }, !touchZoom && zooms.length > 0 && h("div", { key: '5633dfbc4a605ab9650d225b6ac81fb8a6549759', 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: 'ceeaa663f2c0af94ee6a9e7396ac6fca0969fa8b', class: "cty-camera-controls__zooms flex-center", part: "zooms" }, h("div", { key: 'eb7f380ce6b4fa09ece885f4b644258346417fa9', class: { 'cty-camera-controls__zoom-item flex-center cty-camera-controls__zoom-item__active': true }, onClick: () => this.resetZoom() }, h("span", { key: '54935930412f8a827d56735da55e02caeb272c65', class: "cty-camera-controls__zoom-text flex-center" }, currentZoom, "X")))), h("div", { key: '429b787c541081536061362da6eb4055a402d90c', class: "cty-camera-controls__main flex-center" }, h("div", { key: 'da4502d5cba1ef557847ceda031ef12757637134', class: "cty-camera-controls__main-left flex-center" }), h("div", { key: '32faefbc45c3a6101f12048e7e498c47dd7aec26', class: "cty-camera-controls__take-photo flex-center" }, h("button", { key: '62b7db4847e099acdfdebbad0b6fd8e933b089cf', class: "cty-button-native cty-camera-controls__take-photo-button", part: "take-photo", onClick: () => this.takePhoto() })), h("div", { key: '368c5af68ee1c0da60afe16eb0faca9ec8e56561', class: "cty-camera-controls__main-confirm flex-center" }, currentPhotoMode !== 'single' && pictures.length > 0 && !!deleteIcon && h("button", { key: 'a7867e322531dd4bd2597915e14fbb469f0b9a58', class: "cty-camera-controls__main-delete cty-button-native flex-column-center", onClick: () => this.deleteLastPicture() }, h("cty-icon", { key: '355bd21f2feb8c790dcdb1e52301257b7d3ccdef', class: "cty-camera-controls__main-delete-icon", name: deleteIcon })), currentPhotoMode !== 'single' && pictures.length > 0 && h("button", { key: 'd577f40fe7ba3cc3f38defec443357fc2c3fc7fe', class: "cty-button-native flex-column-center", onClick: () => this.confirm() }, h("cty-icon", { key: '67599611fbcc9c5bb292e4d2d4fe7d93dbf6e274', class: "cty-camera-controls__main-confirm-icon", name: confirmIcon }), confirmText && h("span", { key: 'b592907eb84e2d6c255c252e5bbd50533c737c47', class: "cty-camera-controls__main-confirm-text" }, confirmText)))), h("slot", { key: '6dbc7b9d6ed47f647c561ed1a1e7ff621dfe635e', name: "images" }, h("div", { key: '5428de1571189999e306abd4115487a681360e79', 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: 'd42a638850e04f7920176fd63af812034ab754a6', images: pictures.map(item => item.url), initialSlide: imageViewerIndex, overlayIndex: 100, backdropDismiss: false, closeable: false, onCtyDismiss: (e) => this.closeImageViewer(e) }, currentPhotoMode !== 'multiple' && h("div", { key: '2dc441f65a66d38d271c390bc2fb1ebaa26c52f5', class: "cty-camera-viewer__single flex-center-between", slot: "pager" }, h("button", { key: '8c80910fb2d0ef00c828f0eec19d9c50309d2dca', class: "cty-camera-viewer__single-close cty-button-native", onClick: (event) => this.closeSingleImageViewer(event) }, h("cty-icon", { key: '3c606131b6693c04957d4114d4cf757a1df5453a', name: "cty-close2" })), h("button", { key: '56e9915d1224049cc9d48d7aa3a875d66a47c50a', class: "cty-camera-viewer__single-confirm cty-button-native", onClick: () => this.confirm() }, h("cty-icon", { key: '895c32f1f067760c15ac82ce0c1f31db069daa82', name: "cty-tick" }))), currentPhotoMode !== 'multiple' && h("i", { key: '5b4a7c8cc661e11127804aad19204cd4abdbb6dc', slot: "close" })), this.permissionAlertVisible && h("cty-permission-alert", { key: '87f6eac68fd015a6a1902a1cda5d546cabea9e3b', part: "permission-alert", title: this.permissionAlertTitle, content: this.permissionAlertContent, buttons: this.permissionAlertbuttons, onCtyDismiss: (e) => this.closePermissionAlert(e), onCtyTap: (e) => this.toOpenAppSetting(e) }), h("ion-toast", { key: '7fe4417cee38fe17e86cc52ddda0f09a3270b38e', "is-open": this.isToastOpen, message: this.toastContent, duration: 2000, position: 'middle' })));
+        return (h(Host, { key: 'c9c77bf5cdbd827a90d52e58b410f4bd8d4ecd6b', class: "cty-camera", onClick: (e) => e.stopPropagation() }, h("cty-nav-bar", { key: '3e55ca8d5d81af9833d921c95e232e10f878716d', title: title, type: "clear" }, h("slot", { key: 'e590bb74fbf49144ed975d496d33973d388afd34', name: "header-start", slot: "start" }, !!closeIcon && h("ion-button", { key: 'b6a34463ffe45ae903be0bb4838df88a8b17d73e', class: "cty-camera__close", onClick: () => this.close() }, h("cty-icon", { key: 'b2724508c1a12d3b732c88d33714a50d2a533690', class: "cty-camera__close-icon", name: closeIcon })))), h("div", { key: 'ad473c6f2c905b14d60c1249010c2d834e5f2ebf', class: "cty-camera-main", onTouchStart: (e) => this.touchstart(e), onTouchMove: (e) => this.touchmove(e), onTouchEnd: (e) => this.touchend(e) }, h("div", { key: '77d389c0f9db179820b8ea29df50bc3ea1f13eda', class: "cty-camera-widgets", part: "widgets" }, !!flipText && h("button", { key: 'dca002796db7e7518d48f6d4e101f1c9622ba547', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.flipCamera() }, h("cty-icon", { key: '5b1bd6b6ee4cac35ec97d5cbe0d1b88686c520ce', class: "cty-camera-widget__icon", name: "cty-flip" }), !!flipText && h("span", { key: '2b1c5887a660b765f543467faa8bd8c27295d974', class: "cty-camera-widget__text" }, flipText)), !!flashText && h("button", { key: 'b785a98282dc4472a2ca4f2907e900c08c5e8e5e', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.toggleFlash() }, h("cty-icon", { key: '9fcf44ba82be422cd579169cd4a5d6cc78f8e990', class: "cty-camera-widget__icon", name: flash ? 'cty-flash-on' : 'cty-flash-off' }), !!flashText && h("span", { key: '76ff6abbf9cb59718e0ec6b06f889485d978892f', class: "cty-camera-widget__text" }, flashText)), !!ratioText && h("button", { key: '477bc1785238d584e0c12ff61e2ae37bbe6864ff', class: "cty-button-native cty-camera-widget", part: "ratio", onClick: () => this.ratioChange() }, h("span", { key: '573ac175910ac4fa7fff555ae5c6ea5a40e701b2', class: "cty-camera-widget__ratio flex-center" }, ratios[ratioIndex]), !!ratioText && h("span", { key: '1a321035f9885c52433dfec1d16bfb2cbe83fc6e', class: "cty-camera-widget__text" }, ratioText)))), h("div", { key: 'd216f184261aecbf7438a960161074058e33cc15', class: "cty-camera-controls safe-area-bottom-padding" }, mode == 'both' && pictures.length <= 0 && h("div", { key: '3cc475ac62af1716c14ab09f4002ffea4ccb9ffc', class: "cty-camera-controls__mode flex-center", part: "mode" }, h("button", { key: '1153472f6e908ea1f0fab282e6d533519eee6ed1', 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: '63a760a648159ad8c64d3de65b85f959490423f6', 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: 'e888ac3c94c6f27b5a390cbe7f049134773e2ea1', name: "zooms" }, !touchZoom && zooms.length > 0 && h("div", { key: '114b8a4245651286114956a0b7d86312a0d619a9', 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: 'f37e07f6aa2c1245df2ebb93beeb9f2b66afd181', class: "cty-camera-controls__zooms flex-center", part: "zooms" }, h("div", { key: '8c1124aa24b34735732a0d130210cfe2afd76499', class: { 'cty-camera-controls__zoom-item flex-center cty-camera-controls__zoom-item__active': true }, onClick: () => this.resetZoom() }, h("span", { key: '7c9a78509a9f43781752b0d196fb2545faf944a2', class: "cty-camera-controls__zoom-text flex-center" }, currentZoom, "X")))), h("div", { key: 'd94734dbe9a8ebf2108bc7752713cc3ce8543a77', class: "cty-camera-controls__main flex-center" }, h("div", { key: 'bc9e21a71a42406fe2a24eda52b621e45862d780', class: "cty-camera-controls__main-left flex-center" }), h("div", { key: '537009b5525f168f174e6506ccded4ee33f9083d', class: "cty-camera-controls__take-photo flex-center" }, h("button", { key: 'd468d04caa0bfd9bf12340a3bfe5e4872e35dd76', class: "cty-button-native cty-camera-controls__take-photo-button", part: "take-photo", onClick: () => this.takePhoto() })), h("div", { key: '2de162ce15bb42dbc298f813d9ae9a5c18cb097a', class: "cty-camera-controls__main-confirm flex-center" }, currentPhotoMode !== 'single' && pictures.length > 0 && !!deleteIcon && h("button", { key: '124dc0a32ba27ae3153395e1f4ff4265c9f1b8e8', class: "cty-camera-controls__main-delete cty-button-native flex-column-center", onClick: () => this.deleteLastPicture() }, h("cty-icon", { key: 'a4e45a5d829b639c57fc4cc01a423750413706a4', class: "cty-camera-controls__main-delete-icon", name: deleteIcon })), currentPhotoMode !== 'single' && pictures.length > 0 && h("button", { key: 'b915254322a34d1892e15ae829b9c483e369885b', class: "cty-button-native flex-column-center", onClick: () => this.confirm() }, h("cty-icon", { key: 'aea11c2dd72ccaface9b2d49b87aa3e6f5a3aba0', class: "cty-camera-controls__main-confirm-icon", name: confirmIcon }), confirmText && h("span", { key: '41d6f86104e845edc60dd3604e15418d9923e88f', class: "cty-camera-controls__main-confirm-text" }, confirmText)))), h("slot", { key: 'f497681d198d87406cf4240f3bfae58c7b3e7f63', name: "images" }, h("div", { key: '5017c982ef53b289a03b727859224f2b9097ff50', 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: 'c4b3b92b85d33334ccafb190c5ea6a06e224f1fe', images: pictures.map(item => item.url), initialSlide: imageViewerIndex, overlayIndex: 100, backdropDismiss: false, closeable: false, onCtyDismiss: (e) => this.closeImageViewer(e) }, currentPhotoMode !== 'multiple' && h("div", { key: '12005aa3348b6cefa3090a7acfc1b5069969b05b', class: "cty-camera-viewer__single flex-center-between", slot: "pager" }, h("button", { key: '9c8713de8d555060faf54b8372a89a9f5c001374', class: "cty-camera-viewer__single-close cty-button-native", onClick: (event) => this.closeSingleImageViewer(event) }, h("cty-icon", { key: 'c25875803ea82d88d49185579e1412ba6adba51e', name: "cty-close2" })), h("button", { key: '1697315ec0480bfcf19fd3c002d5da021c911853', class: "cty-camera-viewer__single-confirm cty-button-native", onClick: () => this.confirm() }, h("cty-icon", { key: '750f58dde677d1e72221b73d4b62b1e1db5c22de', name: "cty-tick" }))), currentPhotoMode !== 'multiple' && h("i", { key: '3e904d6fa050d0909788540a6e9f40b3552b4942', slot: "close" }))));
     }
     get el() { return this; }
     static get style() { return cameraCss; }
@@ -331,9 +298,6 @@ 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],
@@ -342,9 +306,6 @@ 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],
@@ -357,79 +318,64 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    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"];
+    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"];
     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$e();
-            }
-            break;
-        case "cty-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$d();
-            }
-            break;
-        case "cty-image-viewer":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();
             }
             break;
-        case "cty-nav-bar":
+        case "cty-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$b();
             }
             break;
-        case "cty-permission-alert":
+        case "cty-image-viewer":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }
             break;
-        case "cty-swiper":
+        case "cty-nav-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "ion-button":
+        case "cty-swiper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "ion-buttons":
+        case "ion-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "ion-header":
+        case "ion-buttons":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "ion-icon":
+        case "ion-header":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "ion-ripple-effect":
+        case "ion-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "ion-title":
+        case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "ion-toast":
+        case "ion-title":
             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: '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: {
+        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: {
                 'stroke-width': this.width + 'px',
                 'strokeDasharray': (this.ratio * this.perimeter) + 'px ' + this.perimeter + 'px'
-            } }), h("path", { key: 'c0e0e7bde4ee4218d369f0a68c45bdcc41b9bf6f', ref: el => (this.hoverEl = el), class: "cty-circle__hover", style: {
+            } }), h("path", { key: 'fefec8d3cb6927b35b37ca04498d3abc572e8b63', 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: '87e72df56f972317345f50b3b7e82ff002df5048', class: "cty-circle__text" }, this.text), h("slot", { key: '269615587b996b6dc54c2a3390a0ef47ff08fb4c' })));
+            } })), this.text !== '' && h("div", { key: 'f683c2dc61d281e6c506ff9a15b3a2a2f4ef56da', class: "cty-circle__text" }, this.text), h("slot", { key: '64eba94a1e793fe3dec863d0733f8a7ceb9e659b' })));
     }
     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: '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" })));
+        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" })));
     }
     get el() { return this; }
     static get style() { return cropImageCss; }

package/components/cty-camera-photo.js

@@ -4,24 +4,21 @@ import { d as deviceInfo, c as checkAppPermission } from './device-info.js';
 import { e as createDelegateController, f as createTriggerController, p as prepareOverlay, g as removeBodyScrollClass, h as present, j as dismiss, k as eventMethod } from './overlays.js';
 import { c as createLockController, g as getClassMap, e as enterAnimation, l as leaveAnimation } from './theme.js';
 import { r as raf } from './helpers.js';
-import { d as defineCustomElement$k } from './action-sheet.js';
-import { d as defineCustomElement$j } from './alert.js';
-import { d as defineCustomElement$i } from './backdrop.js';
-import { d as defineCustomElement$h } from './camera.js';
-import { d as defineCustomElement$g } from './crop-image.js';
-import { d as defineCustomElement$f } from './icon.js';
-import { d as defineCustomElement$e } from './image-viewer.js';
-import { d as defineCustomElement$d } from './nav-bar.js';
-import { d as defineCustomElement$c } from './permission-alert.js';
-import { d as defineCustomElement$b } from './permission-purpose.js';
-import { d as defineCustomElement$a } from './swiper.js';
-import { d as defineCustomElement$9 } from './button.js';
-import { d as defineCustomElement$8 } from './buttons.js';
-import { d as defineCustomElement$7 } from './header.js';
-import { d as defineCustomElement$6 } from './icon2.js';
-import { d as defineCustomElement$5 } from './ripple-effect.js';
-import { d as defineCustomElement$4 } from './title.js';
-import { d as defineCustomElement$3 } from './toast.js';
+import { d as defineCustomElement$h } from './action-sheet.js';
+import { d as defineCustomElement$g } from './backdrop.js';
+import { d as defineCustomElement$f } from './camera.js';
+import { d as defineCustomElement$e } from './crop-image.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-purpose.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 './toolbar.js';
 
 const cameraPhotoCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}p,h1,h2,h3,h4,h5,h6{margin:0;padding:0}.cty-pos-rel{position:relative}.cty-pos-abs{position:absolute}.cty-pos-fix{position:fixed}.cty-pos-sti{position:-webkit-sticky;position:sticky}.cty-pos-cover{position:absolute;top:0;bottom:0;left:0;right:0}.cty-pos-l-t{position:absolute;left:0;top:0}.cty-pos-l-b{position:absolute;left:0;bottom:0}.cty-pos-r-t{position:absolute;right:0;top:0}.cty-pos-r-b{position:absolute;right:0;bottom:0}.cty-pos-100{position:absolute;left:0;top:0;width:100%;height:100%}.cty-pos-w100{position:absolute;left:0;width:100%}.cty-pos-h100{position:absolute;top:0;height:100%}.cty-pos-c{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.cty-pos-c-x{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.cty-pos-c-x-t{position:absolute;top:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.cty-pos-c-x-b{position:absolute;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.cty-pos-c-y{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.cty-pos-c-y-l{position:absolute;left:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.cty-pos-c-y-r{position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}:host{--cty-camera-photo-overlay-position:fixed;--cty-camera-photo-overlay-z-index:10;--cty-camera-photo-overlay-background:var(--cty-overlay-color);--cty-camera-photo-overlay-width:100vw;--cty-camera-photo-overlay-height:100vh;--cty-camera-photo-padding:0;--cty-camera-photo-border-radius:0;--cty-camera-photo-title-color:var(--cty-text-color-primary);--cty-camera-photo-title-size:var(--cty-font-size-medium);--cty-camera-photo-title-line-height:36px;--cty-camera-photo-title-weight:500;--cty-camera-photo-title-align:center;--cty-camera-photo-close-top:10px;--cty-camera-photo-close-right:10px;--cty-camera-photo-close-color:var(--cty-text-color-secondary);--cty-camera-photo-close-size:20px;--cty-camera-photo-option-padding-bottom:14px;--cty-camera-photo-option-padding-top:14px;--cty-camera-photo-option-text-align:center;--cty-camera-photo-option-text-color:var(--cty-text-color-primary);--cty-camera-photo-option-text-size:var(--cty-font-size-medium);--cty-camera-photo-option-text-line-height:22px;--cty-camera-photo-cancel-background:var(--cty-color-white);--cty-camera-photo-cancel-padding-top:0;--cty-camera-photo-cancel-padding-bottom:0;--cty-camera-photo-cancel-border:8px solid var(--cty-border-color-extra-light);--cty-camera-photo-cancel-color:var(--cty-text-color-primary);--cty-camera-photo-cancel-min-height:48px;--cty-camera-photo-cancel-size:var(--cty-font-size-medium);--cty-camera-photo-crop-width:100vw;--cty-camera-photo-crop-height:100vh;--cty-camera-photo-crop-background:var(--cty-color-black);--cty-camera-photo-crop-clip-height:100vw;--cty-camera-photo-crop-clip-width:100vw;--cty-camera-photo-crop-clip-background:var(--cty-overlay-color-dark);--cty-camera-photo-crop-clip-border:1px solid #767676;--cty-camera-photo-crop-buttons-padding:12px 0;--cty-camera-photo-crop-button-padding:0 12px;--cty-camera-photo-crop-button-color:var(--cty-text-color-white);--cty-camera-photo-crop-button-active-color:var(--cty-text-color-white);--cty-camera-photo-crop-button-size:var(--cty-font-size-base);--cty-camera-photo-crop-button-line-height:30px;--cty-camera-photo-crop-button-weight:400;--cty-camera-photo-crop-overlay-background:var(--cty-overlay-color);--cty-camera-photo-crop-overlay-z-index:999999;--cty-camera-photo-permission-purpose-overlay-background:transparent;--cty-camera-photo-permission-purpose-overlay-height:auto;--cty-camera-photo-permission-purpose-overlay-z-index:999999}:host(.overlay-hidden){display:none}cty-action-sheet{--cty-action-sheet-overlay-position:var(--cty-camera-photo-overlay-position);--cty-action-sheet-overlay-z-index:var(--cty-camera-photo-overlay-z-index);--cty-action-sheet-overlay-width:var(--cty-camera-photo-overlay-width);--cty-action-sheet-overlay-height:var(--cty-camera-photo-overlay-height);--cty-action-sheet-overlay-background:var(--cty-camera-photo-overlay-background);--cty-action-sheet-padding:var(--cty-camera-photo-padding);--cty-action-sheet-border-radius:var(--cty-camera-photo-border-radius);--cty-action-sheet-title-color:var(--cty-camera-photo-title-color);--cty-action-sheet-title-size:var(--cty-camera-photo-title-size);--cty-action-sheet-title-line-height:var(--cty-camera-photo-title-line-height);--cty-action-sheet-title-weight:var(--cty-camera-photo-title-weight);--cty-action-sheet-title-align:var(--cty-camera-photo-title-align);--cty-action-sheet-close-top:var(--cty-action-sheet-close-top);--cty-action-sheet-close-right:var(--cty-action-sheet-close-right);--cty-action-sheet-close-color:var(--cty-action-sheet-close-color);--cty-action-sheet-close-size:var(--cty-action-sheet-close-size);--cty-action-sheet-option-padding-bottom:var(--cty-camera-photo-option-padding-bottom);--cty-action-sheet-option-padding-top:var(--cty-camera-photo-option-padding-top);--cty-action-sheet-option-text-align:var(--cty-camera-photo-option-text-align);--cty-action-sheet-option-text-color:var(--cty-camera-photo-option-text-color);--cty-action-sheet-option-text-size:var(--cty-camera-photo-option-text-size);--cty-action-sheet-option-text-line-height:var(--cty-camera-photo-option-text-line-height);--cty-action-sheet-cancel-background:var(--cty-camera-photo-cancel-background);--cty-action-sheet-cancel-padding-top:var(--cty-camera-photo-cancel-padding-top);--cty-action-sheet-cancel-padding-bottom:var(--cty-camera-photo-cancel-padding-bottom);--cty-action-sheet-cancel-border:var(--cty-camera-photo-cancel-border);--cty-action-sheet-cancel-color:var(--cty-camera-photo-cancel-color);--cty-action-sheet-cancel-min-height:var(--cty-camera-photo-cancel-min-height);--cty-action-sheet-cancel-size:var(--cty-camera-photo-cancel-size)}cty-backdrop{z-index:var(--cty-camera-photo-crop-overlay-z-index);background:var(--cty-camera-photo-crop-overlay-background)}cty-crop-image{background:var(--cty-camera-photo-crop-background);width:var(--cty-camera-photo-crop-width);height:var(--cty-camera-photo-crop-height);--cty-crop-image-clip-width:var(--cty-camera-photo-crop-clip-width);--cty-crop-image-clip-height:var(--cty-camera-photo-crop-clip-height);--cty-crop-image-clip-background:var(--cty-camera-photo-crop-clip-background);--cty-crop-image-clip-border:var(--cty-camera-photo-crop-clip-border);--cty-crop-image-buttons-padding:var(--cty-camera-photo-crop-buttons-padding);--cty-crop-image-button-padding:var(--cty-camera-photo-crop-button-padding);--cty-crop-image-button-color:var(--cty-camera-photo-crop-button-color);--cty-crop-image-button-active-color:var(--cty-camera-photo-crop-button-active-color);--cty-crop-image-button-size:var(--cty-camera-photo-crop-button-size);--cty-crop-image-button-line-height:var(--cty-camera-photo-crop-button-line-height);--cty-crop-image-button-weight:var(--cty-camera-photo-crop-overlay-weight)}cty-permission-purpose{--cty-permission-purpose-overlay-background:var(--cty-camera-photo-permission-purpose-overlay-background);--cty-permission-purpose-overlay-height:var(--cty-camera-photo-permission-purpose-overlay-height);--cty-permission-purpose-overlay-z-index:var(--cty-camera-photo-permission-purpose-overlay-z-index)}";
@@ -38,6 +35,7 @@ const CameraPhoto = /*@__PURE__*/ proxyCustomElement(class CameraPhoto extends H
         this.willPresent = createEvent(this, "ctyWillPresent", 7);
         this.willDismiss = createEvent(this, "ctyWillDismiss", 7);
         this.didDismiss = createEvent(this, "ctyDidDismiss", 7);
+        this.ctyPermissionNotify = createEvent(this, "ctyPermissionNotify", 7);
         this.delegateController = createDelegateController(this);
         this.lockController = createLockController();
         this.triggerController = createTriggerController();
@@ -74,8 +72,6 @@ const CameraPhoto = /*@__PURE__*/ proxyCustomElement(class CameraPhoto extends H
         this.clipImageQuality = 1;
         this.clipImageSuffix = 'jpeg';
         this.permissionPurpose = true;
-        this.permissionAlertTitle = '需要申请开启相册权限';
-        this.permissionAlertContent = '需要开启相册权限，我们会帮助您选择好的照片或视频上传发布';
         this.root = 'default';
         this.animated = false;
         this.overlay = true;
@@ -91,9 +87,6 @@ const CameraPhoto = /*@__PURE__*/ proxyCustomElement(class CameraPhoto extends H
         this.permissionDescription = '';
         this.showCameraPreview = false;
         this.hasPermission = deviceInfo.isMicroMessager;
-        this.permissionAlertVisible = false;
-        this.isToastOpen = false;
-        this.toastContent = '';
     }
     triggerChanged() {
         const { trigger, el, triggerController } = this;
@@ -150,13 +143,7 @@ const CameraPhoto = /*@__PURE__*/ proxyCustomElement(class CameraPhoto extends H
             }
             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.ctyPermissionNotify.emit({ code, message, openAppSettings: () => imagePicker.openAppSettings() });
             }
         }
     }
@@ -256,22 +243,8 @@ const CameraPhoto = /*@__PURE__*/ proxyCustomElement(class CameraPhoto extends H
         option.handler && option.handler({ option, imageList });
         this.ctyTap.emit({ index, imageList });
     }
-    async toOpenAppSetting(event) {
-        const { item } = event.detail;
-        if (item.action == 'permission') {
-            try {
-                await imagePicker.openAppSettings();
-            }
-            catch (error) { }
-            this.permissionAlertVisible = false;
-        }
-    }
-    closePermissionAlert(e) {
-        e.stopPropagation();
-        this.permissionAlertVisible = false;
-    }
     render() {
-        return (h(Host, { key: '6626fa119a9c343df0fd6175c16c0a9cd18b6bf2', class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'cty-pos-cover': this.overlay }), style: { zIndex: `${20000 + this.overlayIndex}` } }, h("cty-action-sheet", { key: 'b88a31483aaee47dad3969a616eb74945d199447', class: "cty-camera-photo", animated: false, overlayIndex: 1, backdropDismiss: this.backdropDismiss, title: this.title, closeable: this.closeable, closeIcon: this.closeIcon, cancelText: this.cancelText, options: this.options, onCtyDismiss: () => this.dismiss(), onCtyTap: e => this._buttonClick(e) }), this.showCropImage && (h("cty-backdrop", { key: '83e30b75f98f48e69e97898c6b95e835e519f999', backdropDismiss: false }, h("cty-crop-image", { key: 'e382a18a7c8d9b212f01843d78a1000112e5d486', url: this.clipImage, cancelText: this.clipCancelText, confirmText: this.clipCconfirmText, imageWidth: this.clipImageWidth, imageBackground: this.clipImageBg, maxScale: this.clipMaxScale, minScale: this.clipMinScale, suffix: this.clipImageSuffix, quality: this.clipImageQuality, onCtyCancel: () => this._doCropCancel(), onCtyConfirm: (e) => this._doCropConfirm(e) }))), this.showPermissionPurpose && h("cty-permission-purpose", { key: '55dd946e9896839ccd7930b1b3e0573429e29dc1', description: this.permissionDescription }), this.continuous && this.showCameraPreview && h("cty-camera", Object.assign({ key: '67729d43a590b8630169bd1daac1117f1f41641c' }, this.cameraProps, { onCtyDismiss: () => this.showCameraPreview = false, onCtyConfirm: (e) => this.continuousConfirm(e) })), this.permissionAlertVisible && h("cty-permission-alert", { key: '64742e62f0a6172a8533e68d815f9ab2a084cf32', part: "permission-alert", title: this.permissionAlertTitle, content: this.permissionAlertContent, buttons: this.permissionAlertbuttons, onCtyDismiss: (e) => this.closePermissionAlert(e), onCtyTap: (e) => this.toOpenAppSetting(e) }), h("ion-toast", { key: 'c5b814ec61ba275fe28c5fc49160955914756a68', "is-open": this.isToastOpen, message: this.toastContent, duration: 2000, position: 'middle' })));
+        return (h(Host, { key: 'ed23594ac43fc1941376c052281f6fb615387bc2', class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'cty-pos-cover': this.overlay }), style: { zIndex: `${20000 + this.overlayIndex}` } }, h("cty-action-sheet", { key: 'e194fccacc4f73f16fac81685ef55d47d1d74fbd', class: "cty-camera-photo", animated: false, overlayIndex: 1, backdropDismiss: this.backdropDismiss, title: this.title, closeable: this.closeable, closeIcon: this.closeIcon, cancelText: this.cancelText, options: this.options, onCtyDismiss: () => this.dismiss(), onCtyTap: e => this._buttonClick(e) }), this.showCropImage && (h("cty-backdrop", { key: 'ee8e555a7b7eff9720fea799fe3ee8bd64707c53', backdropDismiss: false }, h("cty-crop-image", { key: '43ca4d1c794c6b5ab214c9377a95c85a62066a28', url: this.clipImage, cancelText: this.clipCancelText, confirmText: this.clipCconfirmText, imageWidth: this.clipImageWidth, imageBackground: this.clipImageBg, maxScale: this.clipMaxScale, minScale: this.clipMinScale, suffix: this.clipImageSuffix, quality: this.clipImageQuality, onCtyCancel: () => this._doCropCancel(), onCtyConfirm: (e) => this._doCropConfirm(e) }))), this.showPermissionPurpose && h("cty-permission-purpose", { key: 'afc4d51f9e134a32eb0536e973d2067c0a516f15', description: this.permissionDescription }), this.continuous && this.showCameraPreview && h("cty-camera", Object.assign({ key: '21196314cc989345cf3830ee3e154c998a20b1fe' }, this.cameraProps, { onCtyDismiss: () => this.showCameraPreview = false, onCtyConfirm: (e) => this.continuousConfirm(e) }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -301,9 +274,6 @@ const CameraPhoto = /*@__PURE__*/ proxyCustomElement(class CameraPhoto extends H
         "clipImageQuality": [2, "clip-image-quality"],
         "clipImageSuffix": [1, "clip-image-suffix"],
         "permissionPurpose": [4, "permission-purpose"],
-        "permissionAlertTitle": [1, "permission-alert-title"],
-        "permissionAlertContent": [1, "permission-alert-content"],
-        "permissionAlertbuttons": [16, "permission-alertbuttons"],
         "root": [1],
         "animated": [4],
         "overlay": [4],
@@ -318,9 +288,6 @@ const CameraPhoto = /*@__PURE__*/ proxyCustomElement(class CameraPhoto extends H
         "showPermissionPurpose": [32],
         "permissionDescription": [32],
         "showCameraPreview": [32],
-        "permissionAlertVisible": [32],
-        "isToastOpen": [32],
-        "toastContent": [32],
         "present": [64],
         "dismiss": [64],
         "onDidDismiss": [64],
@@ -332,7 +299,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["cty-camera-photo", "cty-action-sheet", "cty-alert", "cty-backdrop", "cty-camera", "cty-crop-image", "cty-icon", "cty-image-viewer", "cty-nav-bar", "cty-permission-alert", "cty-permission-purpose", "cty-swiper", "ion-button", "ion-buttons", "ion-header", "ion-icon", "ion-ripple-effect", "ion-title", "ion-toast", "ion-toolbar"];
+    const components = ["cty-camera-photo", "cty-action-sheet", "cty-backdrop", "cty-camera", "cty-crop-image", "cty-icon", "cty-image-viewer", "cty-nav-bar", "cty-permission-purpose", "cty-swiper", "ion-button", "ion-buttons", "ion-header", "ion-icon", "ion-ripple-effect", "ion-title", "ion-toolbar"];
     components.forEach(tagName => { switch (tagName) {
         case "cty-camera-photo":
             if (!customElements.get(tagName)) {
@@ -340,91 +307,76 @@ function defineCustomElement$1() {
             }
             break;
         case "cty-action-sheet":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$k();
-            }
-            break;
-        case "cty-alert":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$j();
-            }
-            break;
-        case "cty-backdrop":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$i();
-            }
-            break;
-        case "cty-camera":
             if (!customElements.get(tagName)) {
                 defineCustomElement$h();
             }
             break;
-        case "cty-crop-image":
+        case "cty-backdrop":
             if (!customElements.get(tagName)) {
                 defineCustomElement$g();
             }
             break;
-        case "cty-icon":
+        case "cty-camera":
             if (!customElements.get(tagName)) {
                 defineCustomElement$f();
             }
             break;
-        case "cty-image-viewer":
+        case "cty-crop-image":
             if (!customElements.get(tagName)) {
                 defineCustomElement$e();
             }
             break;
-        case "cty-nav-bar":
+        case "cty-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$d();
             }
             break;
-        case "cty-permission-alert":
+        case "cty-image-viewer":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();
             }
             break;
-        case "cty-permission-purpose":
+        case "cty-nav-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$b();
             }
             break;
-        case "cty-swiper":
+        case "cty-permission-purpose":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }
             break;
-        case "ion-button":
+        case "cty-swiper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "ion-buttons":
+        case "ion-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "ion-header":
+        case "ion-buttons":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "ion-icon":
+        case "ion-header":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "ion-ripple-effect":
+        case "ion-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "ion-title":
+        case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "ion-toast":
+        case "ion-title":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }