cty-mui-core 1.0.37 → 1.0.39

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)}";
@@ -33,6 +36,8 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
         this.width = 0;
         this.height = 0;
         this.quality = 85;
+        this.includeThumb = true;
+        this.thumbWidth = 120;
         this.file = true;
         this.max = 9;
         this.flipText = '翻转';
@@ -48,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;
@@ -56,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;
@@ -80,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.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();
@@ -129,14 +177,24 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
         return cameraPreview.setZoom(idx === 0 ? 0 : Math.min(zoom, maxZoom));
     }
     async takePhoto() {
-        const { quality, width, height, file, max, pictures } = this;
+        const { quality, width, height, includeThumb, thumbWidth, file, max, pictures } = this;
         if (max > 0 && pictures.length >= max || this.currentPhotoMode === 'single' && this.pictures.length > 0 || this.isTakingPhoto) {
             return;
         }
         this.isTakingPhoto = true;
-        const data = await cameraPreview.takePicture({ width, height, quality });
-        const result = await imagePicker.formatPictureResult(file, data);
-        this.pictures = [...pictures, result];
+        const data = await cameraPreview.takePicture({ width, height, quality, includeThumb, thumbWidth });
+        let uri = '';
+        let thumbnail = '';
+        if (data && typeof data === 'object') {
+            uri = data.image;
+            thumbnail = data.thumbnail;
+        }
+        else {
+            uri = data;
+        }
+        const result = await imagePicker.formatPictureResult(file, uri);
+        const thumbResult = await imagePicker.formatPictureResult(file, thumbnail);
+        this.pictures = [...pictures, Object.assign(Object.assign({}, result), { thumbnail: thumbResult.url })];
         this.ctyTakePhoto.emit(result);
         this.isTakingPhoto = false;
         if (this.currentPhotoMode === 'single') {
@@ -172,7 +230,7 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
         this.closeImageViewer(e);
     }
     confirm() {
-        this.ctyConfirm.emit(this.pictures);
+        this.ctyConfirm.emit(this.pictures.map(({ url, data }) => ({ url, data })));
     }
     deleteLastPicture() {
         const pictures = [...this.pictures];
@@ -224,9 +282,26 @@ 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;
+            }
+            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: 'f40edbc29fe5da2917d4010c6d3b1a518aedaa41', class: "cty-camera", onClick: (e) => e.stopPropagation() }, h("cty-nav-bar", { key: '5ff4256016fa09b23178155358ebf130e43bcb7f', title: title, type: "clear" }, h("slot", { key: 'd2e04b67a7d3950bf4affa93bb5cb4d7c2a617c9', name: "header-start", slot: "start" }, !!closeIcon && h("ion-button", { key: '15ac081655793b3e389a1f3639bedfc1d9ecbf07', class: "cty-camera__close", onClick: () => this.close() }, h("cty-icon", { key: '0a502cc7dacef6aae4f0d378dde420bdc809fe06', class: "cty-camera__close-icon", name: closeIcon })))), h("div", { key: '50daa357c535b0b664cee8f7f2f373a6580b1999', class: "cty-camera-main", onTouchStart: (e) => this.touchstart(e), onTouchMove: (e) => this.touchmove(e), onTouchEnd: (e) => this.touchend(e) }, h("div", { key: '9480b0a5d2ecf27c8c29a4ff92b96ef3ea88ef42', class: "cty-camera-widgets", part: "widgets" }, !!flipText && h("button", { key: '686db6af3c4dafb1581bea7fa2e6b4a2f4f27083', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.flipCamera() }, h("cty-icon", { key: 'e79bfc8da5c2b406ac216c06b6a968f5abec969a', class: "cty-camera-widget__icon", name: "cty-flip" }), !!flipText && h("span", { key: 'ba9aa97adee38dac5b7ac62162748cbe1692fdd0', class: "cty-camera-widget__text" }, flipText)), !!flashText && h("button", { key: '40e364c8c390b8d34a10483dd9c59e6308af086a', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.toggleFlash() }, h("cty-icon", { key: 'b3529fb6899eec50a9dd23cafd14c702b73f0eab', class: "cty-camera-widget__icon", name: flash ? 'cty-flash-on' : 'cty-flash-off' }), !!flashText && h("span", { key: '5db6b0cdeda7be4a9dfc141ac2853f77b39480b3', class: "cty-camera-widget__text" }, flashText)), !!ratioText && h("button", { key: 'ca8f01983dd7c8d881e62f6537b59e54147989ba', class: "cty-button-native cty-camera-widget", part: "ratio", onClick: () => this.ratioChange() }, h("span", { key: 'ce1b6eae99a1a28490b5e354dc7b5d787f33012d', class: "cty-camera-widget__ratio flex-center" }, ratios[ratioIndex]), !!ratioText && h("span", { key: '5f8782c77973f304783f090c0d074d9aa4d37529', class: "cty-camera-widget__text" }, ratioText)))), h("div", { key: 'eb9fbcf73791d348b2721af75eb6379fac9edc5a', class: "cty-camera-controls safe-area-bottom-padding" }, mode == 'both' && pictures.length <= 0 && h("div", { key: 'd8ab77317beba8093cfa5b14a7b58b576f92b0d4', class: "cty-camera-controls__mode flex-center", part: "mode" }, h("button", { key: 'ba2f4a6ce81f5d7cd34cc9ccb405c3b42f399d38', 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: '8617e01437655cc1dfa2f77c977f826375be9b6a', 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: 'c23efc3fc61cb836bb970252106ed1e1cf3558d9', name: "zooms" }, !touchZoom && zooms.length > 0 && h("div", { key: '02e630d9fb5e30cc9257d74102301991f4f34cda', 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: 'e9f24d62c30dd73fd7be61a92b2a9e8477444d31', class: "cty-camera-controls__zooms flex-center", part: "zooms" }, h("div", { key: '15c9dfb471ebbc9d042b43c0798ca09fa20866d9', class: { 'cty-camera-controls__zoom-item flex-center cty-camera-controls__zoom-item__active': true }, onClick: () => this.resetZoom() }, h("span", { key: '02bf72c6259c9580006fa3ae14623686478e0637', class: "cty-camera-controls__zoom-text flex-center" }, currentZoom, "X")))), h("div", { key: 'd48ce6b8c8100b91876519bcc3aaae6ec6c64bb2', class: "cty-camera-controls__main flex-center" }, h("div", { key: 'bab57f9bb2276980e1eaf97db8a3473c393bd2a9', class: "cty-camera-controls__main-left flex-center" }), h("div", { key: '771f14a7d81b3ddd8ee3389de781baa408e58ab2', class: "cty-camera-controls__take-photo flex-center" }, h("button", { key: 'eb69383d3140935cf780d90f7a2f094295341613', class: "cty-button-native cty-camera-controls__take-photo-button", part: "take-photo", onClick: () => this.takePhoto() })), h("div", { key: '4de8c1abb63d4413d80fc6038b2d01161b61d03e', class: "cty-camera-controls__main-confirm flex-center" }, currentPhotoMode !== 'single' && pictures.length > 0 && !!deleteIcon && h("button", { key: 'd147510274b3f2d6afd7b8bc484a674274805556', class: "cty-camera-controls__main-delete cty-button-native flex-column-center", onClick: () => this.deleteLastPicture() }, h("cty-icon", { key: '28b17cecf4e4f3dbc25a2b1a6c9dd08cdace231a', class: "cty-camera-controls__main-delete-icon", name: deleteIcon })), currentPhotoMode !== 'single' && pictures.length > 0 && h("button", { key: 'be6a8e67255e4265f5f5744ba4bc12ea86fd8413', class: "cty-button-native flex-column-center", onClick: () => this.confirm() }, h("cty-icon", { key: 'e721a132723d3ec61d450d7bb92551fb3255a85b', class: "cty-camera-controls__main-confirm-icon", name: confirmIcon }), confirmText && h("span", { key: 'cd3413a3f091755709d4766bfb9851cd62797637', class: "cty-camera-controls__main-confirm-text" }, confirmText)))), h("slot", { key: '25cd2fd4dbf4383a38944f7a05c82d8529a1f329', name: "images" }, h("div", { key: 'd494fba5318e56f1bbd5e298c94d0db792fe2466', 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.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: 'e7b85e1ee2817e30dffd31b8dc54bb688e7eebda', images: pictures.map(item => item.url), initialSlide: imageViewerIndex, overlayIndex: 100, backdropDismiss: false, closeable: false, onCtyDismiss: (e) => this.closeImageViewer(e) }, currentPhotoMode !== 'multiple' && h("div", { key: '5ee748c3a00c7b59a06caf8452e991923f8b0e03', class: "cty-camera-viewer__single flex-center-between", slot: "pager" }, h("button", { key: 'e887095785b5a51ba6e7b9535302048f52847fec', class: "cty-camera-viewer__single-close cty-button-native", onClick: (event) => this.closeSingleImageViewer(event) }, h("cty-icon", { key: '9835324ca3a6d13a5492cc71e275a10176a2c41a', name: "cty-close2" })), h("button", { key: 'ead287871bcf1427012c48efff2f13e51acb8fc9', class: "cty-camera-viewer__single-confirm cty-button-native", onClick: () => this.confirm() }, h("cty-icon", { key: '5bcfd41d3c8998abcc06bf9852efcb4b1b821ffb', name: "cty-tick" }))), currentPhotoMode !== 'multiple' && h("i", { key: 'd1410f731edc011af6acdc1652264e760d557213', slot: "close" }))));
+        return (h(Host, { key: '249d6c9269af0bb404fa13c2679db953580196be', class: "cty-camera", onClick: (e) => e.stopPropagation() }, h("cty-nav-bar", { key: '3ddc96ed9540f67485013bd1d52cf593f7a159ec', title: title, type: "clear" }, h("slot", { key: 'c3124d840af6803fe87669dc1da346b5a51d6dc1', name: "header-start", slot: "start" }, !!closeIcon && h("ion-button", { key: '48ebfe61e98a586fb127feb9e57e556108665126', class: "cty-camera__close", onClick: () => this.close() }, h("cty-icon", { key: '8da9e811d18687d6c3c3fd19f3b6d96db3b4d992', class: "cty-camera__close-icon", name: closeIcon })))), h("div", { key: '918f5390b8d846231a1fbd3550858114efb3797f', class: "cty-camera-main", onTouchStart: (e) => this.touchstart(e), onTouchMove: (e) => this.touchmove(e), onTouchEnd: (e) => this.touchend(e) }, h("div", { key: '4d872387a4bb06d4d5030c181c6a67a9ef19f5aa', class: "cty-camera-widgets", part: "widgets" }, !!flipText && h("button", { key: '6de4076ab5b8ee8a31a63305fc4fd4c954e87291', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.flipCamera() }, h("cty-icon", { key: 'cf2cd7ccbf12a6b972371389045aa7360a7e361c', class: "cty-camera-widget__icon", name: "cty-flip" }), !!flipText && h("span", { key: '63816718efe322900dd80192a3c96e1dde0f56bf', class: "cty-camera-widget__text" }, flipText)), !!flashText && h("button", { key: '71f482e92876e408cfe4391c92c79789d83ff12b', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.toggleFlash() }, h("cty-icon", { key: '70a2838d229df2418807329013cf2db86c8b2886', class: "cty-camera-widget__icon", name: flash ? 'cty-flash-on' : 'cty-flash-off' }), !!flashText && h("span", { key: 'dc6dcb389cde04abe9e94824fc7ab23d7cbd49c3', class: "cty-camera-widget__text" }, flashText)), !!ratioText && h("button", { key: '13fd40b68adeefca52a5775b2fc86bd0602728c7', class: "cty-button-native cty-camera-widget", part: "ratio", onClick: () => this.ratioChange() }, h("span", { key: 'e971f50bb4a923dfb119497d530890dc2a2f4cc2', class: "cty-camera-widget__ratio flex-center" }, ratios[ratioIndex]), !!ratioText && h("span", { key: 'c13601a6c3866a72120a9b441d971c5134e95b26', class: "cty-camera-widget__text" }, ratioText)))), h("div", { key: 'b82e91f54f7416c8f8ba0bbc99ad034b7d90d201', class: "cty-camera-controls safe-area-bottom-padding" }, mode == 'both' && pictures.length <= 0 && h("div", { key: 'da4867ad484906fb92bb0b9840ae05cab7f6017c', class: "cty-camera-controls__mode flex-center", part: "mode" }, h("button", { key: '8932fc465360764b3d19c2ba0f9afa26df747248', 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: 'a70dd98026cb8125f04841f3f82ae83bffedea17', 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: '706e3c7c60be9bea7a887743981e6c0c83d867a1', name: "zooms" }, !touchZoom && zooms.length > 0 && h("div", { key: 'dd6fe65fe090190eb2f1f0b678ebfa84f8bbbe31', 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: '9f0a68f5c87b36f50807a1ddce3fd7d495f5b0f7', class: "cty-camera-controls__zooms flex-center", part: "zooms" }, h("div", { key: '2b1f97c6fbe953d71779f536d408d8a878872b1c', class: { 'cty-camera-controls__zoom-item flex-center cty-camera-controls__zoom-item__active': true }, onClick: () => this.resetZoom() }, h("span", { key: '2e16a3df094da8fcfe0b3758732a48bc67e00797', class: "cty-camera-controls__zoom-text flex-center" }, currentZoom, "X")))), h("div", { key: '06a01b4fcb96b0bd33bde8ed91fc2b436e406791', class: "cty-camera-controls__main flex-center" }, h("div", { key: 'c748dab6ff814deab00d7f0ff8e2b9ae439acc82', class: "cty-camera-controls__main-left flex-center" }), h("div", { key: 'ae6105b6f28bd8be992ebf164987806a5cf52e9c', class: "cty-camera-controls__take-photo flex-center" }, h("button", { key: '1bbe3c2225a533fd7f4b9de9b7778c748c4f5a03', class: "cty-button-native cty-camera-controls__take-photo-button", part: "take-photo", onClick: () => this.takePhoto() })), h("div", { key: 'd8b0277f2daf2c6085edd86c18d220a7c24e1e37', class: "cty-camera-controls__main-confirm flex-center" }, currentPhotoMode !== 'single' && pictures.length > 0 && !!deleteIcon && h("button", { key: 'cc83aa1aab767ea7a3aef3b44194b4891836c09a', class: "cty-camera-controls__main-delete cty-button-native flex-column-center", onClick: () => this.deleteLastPicture() }, h("cty-icon", { key: '5b2a06c3819fa158b12769b4cea08f7df6cecff2', class: "cty-camera-controls__main-delete-icon", name: deleteIcon })), currentPhotoMode !== 'single' && pictures.length > 0 && h("button", { key: '09642c94b869090cd1381b75a949013623558fb6', class: "cty-button-native flex-column-center", onClick: () => this.confirm() }, h("cty-icon", { key: '09e36ce96317e298f0a54ce6c1d76009a4ad4b95', class: "cty-camera-controls__main-confirm-icon", name: confirmIcon }), confirmText && h("span", { key: '9d24bf57e4c32abbbfb95671c1191f7d85adfce4', class: "cty-camera-controls__main-confirm-text" }, confirmText)))), h("slot", { key: '5530ce7f1411007acfd28326b53b5caa52c52376', name: "images" }, h("div", { key: '2a9366f14ff5878bb704703d9fd65a4549c002fb', 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: '5c3f82c1f25c434e79c2df83f657c25cc42f0ffc', images: pictures.map(item => item.url), initialSlide: imageViewerIndex, overlayIndex: 100, backdropDismiss: false, closeable: false, onCtyDismiss: (e) => this.closeImageViewer(e) }, currentPhotoMode !== 'multiple' && h("div", { key: '2c0753cab107695962bbdd55ab9b334e91c361a2', class: "cty-camera-viewer__single flex-center-between", slot: "pager" }, h("button", { key: '3cf7393d965245e4b7072afe50412c150840cec3', class: "cty-camera-viewer__single-close cty-button-native", onClick: (event) => this.closeSingleImageViewer(event) }, h("cty-icon", { key: 'db1b6d35ff40650a00903d37d03adf9c4e7ce311', name: "cty-close2" })), h("button", { key: '25df5828eafcc1191e826445e0b20e41eec869bf', class: "cty-camera-viewer__single-confirm cty-button-native", onClick: () => this.confirm() }, h("cty-icon", { key: 'e96ba7b2413df359b4ab6ea184250edbf3618d2a', name: "cty-tick" }))), currentPhotoMode !== 'multiple' && h("i", { key: '8a167eb7c089ede4aeff07e73cd14424a0ccca55', slot: "close" })), this.permissionAlertVisible && h("cty-permission-alert", { key: '3fb0cd60cb246d94f12a6adff586087071075ea2', title: this.permissionAlertTitle, content: this.permissionAlertContent, buttons: this.permissionAlertbuttons, onCtyDismiss: (e) => this.closePermissionAlert(e), onCtyTap: (e) => this.toOpenAppSetting(e) }), h("ion-toast", { key: 'ac0224081e8ce22eaebfd7224391cf1957c2ff47', "is-open": this.isToastOpen, message: this.toastContent, duration: 2000, position: 'middle' })));
     }
     get el() { return this; }
     static get style() { return cameraCss; }
@@ -239,6 +314,8 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
         "width": [2],
         "height": [2],
         "quality": [2],
+        "includeThumb": [4, "include-thumb"],
+        "thumbWidth": [2, "thumb-width"],
         "file": [4],
         "max": [2],
         "flipText": [1, "flip-text"],
@@ -254,6 +331,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],
@@ -262,6 +342,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],
@@ -274,64 +357,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; }