cty-mui-core 1.0.37 → 1.0.39

package/components/swiper.js

@@ -46,6 +46,10 @@ const Swiper = /*@__PURE__*/ proxyCustomElement(class Swiper extends HTMLElement
         this._swiper = this.swiperEl.swiper;
         this.refreshSwiper();
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this._swiper) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
     slideChange() {
         this.ctySlideChange.emit({
             realIndex: this._swiper.realIndex,
@@ -91,7 +95,7 @@ const Swiper = /*@__PURE__*/ proxyCustomElement(class Swiper extends HTMLElement
         return this._swiper;
     }
     render() {
-        return (h(Host, { key: 'aa4df59ca9139127fc4b1fd82b8db09c9d9822da', class: "cty-swiper" }, h("swiper-container", Object.assign({ key: 'e8ab2140706022c8203552019b16eb5b0d69c3e7', class: "cty-swipe__container", ref: (el) => this.swiperEl = el, autoplay: this.autoplay, modules: this.swiperModules, direction: this.direction, loop: this.loop, pagination: this.pagination, observer: this.observer, "observer-parents": this.observerParents, onSwiperslidechangetransitionend: () => this.slideChange(), onSwiperclick: () => this.slideClick() }, this.attrs), this._swipers.map((item, idx) => h("swiper-slide", { class: "cty-swipe__slide" }, h("slot", { name: idx + '' }, h("div", { class: "swiper-zoom-container" }, h("img", { src: item[this.props.pic], alt: item[this.props.alt || ''] || '', onClick: (e) => e.stopPropagation() }))))), h("slot", { key: '2fdfb202c53cae9e5f805b5f046bac0da13de968', name: "container-start", slot: "container-start" }), h("slot", { key: '139dcd57bb0ce780d0be5cde0943603b3621d7a9', name: "container-end", slot: "container-end" }))));
+        return (h(Host, { key: '4279a041c842204c199d6ebc251f44128f0e3b65', class: "cty-swiper" }, h("swiper-container", Object.assign({ key: '61fa76ec459f33c92504fec0d3cdd9465e882b19', class: "cty-swipe__container", ref: (el) => this.swiperEl = el, autoplay: this.autoplay, modules: this.swiperModules, direction: this.direction, loop: this.loop, pagination: this.pagination, observer: this.observer, "observer-parents": this.observerParents, onSwiperslidechangetransitionend: () => this.slideChange(), onSwiperclick: () => this.slideClick() }, this.attrs), this._swipers.map((item, idx) => h("swiper-slide", { class: "cty-swipe__slide" }, h("slot", { name: idx + '' }, h("div", { class: "swiper-zoom-container" }, h("img", { src: item[this.props.pic], alt: item[this.props.alt || ''] || '', onClick: (e) => e.stopPropagation() }))))), h("slot", { key: 'be071f0b3e5059921d8febb081456659816e8765', name: "container-start", slot: "container-start" }), h("slot", { key: 'eb6160945f271cccb52bcdad7977f38dbda3552e', name: "container-end", slot: "container-end" }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/video-capture.js

@@ -9,6 +9,33 @@ class CTYVideoCapture {
     get isVideoCaptureAvailable() {
         return !!this._videoCapturePlugin;
     }
+    hasPermission() {
+        return new Promise((resolve, reject) => {
+            if (!this.isVideoCaptureAvailable) {
+                reject('Video capture plugin is not available');
+                return;
+            }
+            this._videoCapturePlugin.hasCapturePermission((result) => resolve(result), (error) => reject(error));
+        });
+    }
+    requestPermission() {
+        return new Promise((resolve, reject) => {
+            if (!this.isVideoCaptureAvailable) {
+                reject('Video capture plugin is not available');
+                return;
+            }
+            this._videoCapturePlugin.requestCapturePermission((result) => resolve(result), (error) => reject(error));
+        });
+    }
+    openAppSettings() {
+        return new Promise((resolve, reject) => {
+            if (!this.isVideoCaptureAvailable) {
+                reject('Video capture plugin is not available');
+                return;
+            }
+            this._videoCapturePlugin.openAppSettings(() => resolve(), (error) => reject(error));
+        });
+    }
     captureVideo(options) {
         return new Promise((resolve, reject) => {
             if (!this.isVideoCaptureAvailable) {
@@ -24,7 +51,7 @@ class CTYVideoCapture {
                     else {
                         resolve(null);
                     }
-                }, Object.assign({ width: 1280 }, options));
+                }, reject, Object.assign({ width: 1280 }, options));
             }
             catch (error) {
                 reject(error);

package/dist/cjs/{audio-recorder-ChGIymnF.js → audio-recorder-D3rqlSLq.js}

@@ -77,6 +77,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 = exports.UploadProgressTip.SHOW) {
         return new Promise((resolve, reject) => {
             try {

package/dist/cjs/{camera-preview-CTbXcOZK.js → camera-preview-BylkRIcS.js}

@@ -8,10 +8,37 @@ class CTYCameraPreview {
     get isCameraPreviewAvailable() {
         return !!this.cameraPreviewPlugin;
     }
+    hasPermission() {
+        return new Promise((resolve, reject) => {
+            if (!this.isCameraPreviewAvailable) {
+                reject('Camera preview plugin is not available');
+                return;
+            }
+            this.cameraPreviewPlugin.hasPermission((result) => resolve(result), (error) => reject(error));
+        });
+    }
+    requestPermission() {
+        return new Promise((resolve, reject) => {
+            if (!this.isCameraPreviewAvailable) {
+                reject('Camera preview plugin is not available');
+                return;
+            }
+            this.cameraPreviewPlugin.requestPermission(() => resolve(), (error) => reject(error));
+        });
+    }
+    openAppSettings() {
+        return new Promise((resolve, reject) => {
+            if (!this.isCameraPreviewAvailable) {
+                reject('Camera preview plugin is not available');
+                return;
+            }
+            this.cameraPreviewPlugin.openAppSettings(() => resolve(), (error) => reject(error));
+        });
+    }
     startCamera(options) {
         return new Promise((resolve, reject) => {
             if (!this.isCameraPreviewAvailable) {
-                return reject('Camera Preview plugin is not available');
+                return reject('Camera preview plugin is not available');
             }
             this.cameraPreviewPlugin.startCamera(options, resolve, reject);
         });
@@ -29,7 +56,7 @@ class CTYCameraPreview {
     takePicture(options) {
         return new Promise((resolve, reject) => {
             this.cameraPreviewPlugin.takePicture(options, (data) => {
-                resolve(data[0]);
+                resolve(data);
             }, reject);
         });
     }

package/dist/cjs/cty-alert_2.cjs.entry.js

@@ -107,82 +107,41 @@ const Alert = class {
 };
 Alert.style = alertCss;
 
-const circleCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}p,h1,h2,h3,h4,h5,h6{margin:0;padding:0}:host{display:inline-block;position:relative;width:100px;height:100px;--cty-circle-fill:none;--cty-circle-color:var(--cty-color-white);--cty-circle-linecap:round;--cty-circle-rotate:0deg;--cty-circle-text-color:var(--cty-color-primary);--cty-circle-text-size:var(--cty-font-size-base);--cty-circle-text-weight:normal;--cty-circle-text-line-height:20px}svg{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transform:rotate(var(--cty-circle-rotate));transform:rotate(var(--cty-circle-rotate))}path{fill:none}.cty-circle__layer{stroke:var(--cty-circle-color);fill:var(--cty-circle-fill)}.cty-circle__hover{stroke-linecap:var(--cty-circle-linecap)}.cty-circle__text{position:absolute;top:50%;left:0;width:100%;color:var(--cty-circle-text-color);font-weight:var(--cty-circle-text-weight);font-size:var(--cty-circle-text-size);line-height:var(--cty-circle-text-line-height);text-align:center;-webkit-transform:translateY(-50%);transform:translateY(-50%)}";
+const permissionAlertCss = ":host{--cty-permission-alert-overlay-position:fixed;--cty-permission-alert-overlay-z-index:999999;--cty-permission-alert-overlay-background:var(--cty-overlay-color);--cty-permission-alert-overlay-width:100vw;--cty-permission-alert-overlay-height:100vh;--cty-permission-alert-width:80%;--cty-permission-alert-background:var(--cty-color-white);--cty-permission-alert-padding-bottom:15px;--cty-permission-alert-padding-end:15px;--cty-permission-alert-padding-start:15px;--cty-permission-alert-padding-top:15px;--cty-permission-alert-border-radius:12px;--cty-permission-alert-title-align:flex-start;--cty-permission-alert-title-color:var(--cty-text-color-primary);--cty-permission-alert-title-size:var(--cty-font-size-medium);--cty-permission-alert-content-margin-bottom:20px;--cty-permission-alert-content-margin-top:20px;--cty-permission-alert-content-size:var(--cty-font-size-base);--cty-permission-alert-content-align:justify;--cty-permission-alert-content-color:var(--cty-text-color-primary);--cty-permission-alert-button-min-height:36px;--cty-permission-alert-button-color:var(--cty-text-color-primary);--cty-permission-alert-button-size:var(--cty-font-size-base);--cty-permission-alert-button-radius:var(--cty-border-radius-medium);--cty-permission-alert-button-primary-background:var(--cty-color-primary);--cty-permission-alert-button-primary-color:var(--cty-text-color-white)}cty-alert{--cty-alert-overlay-position:var(--cty-permission-alert-overlay-position);--cty-alert-overlay-z-index:var(--cty-permission-alert-overlay-z-index);--cty-alert-overlay-background:var(--cty-permission-alert-overlay-background);--cty-alert-overlay-width:var(--cty-permission-alert-overlay-width);--cty-alert-overlay-height:var(--cty-permission-alert-overlay-height);--cty-alert-width:var(--cty-permission-alert-width);--cty-alert-background:var(--cty-permission-alert-background);--cty-alert-padding-bottom:var(--cty-permission-alert-padding-bottom);--cty-alert-padding-end:var(--cty-permission-alert-padding-end);--cty-alert-padding-start:var(--cty-permission-alert-padding-start);--cty-alert-padding-top:var(--cty-permission-alert-padding-top);--cty-alert-border-radius:var(--cty-permission-alert-border-radius);--cty-alert-title-align:var(--cty-permission-alert-title-align);--cty-alert-title-color:var(--cty-permission-alert-title-color);--cty-alert-title-size:var(--cty-permission-alert-title-size);--cty-alert-content-margin-bottom:var(--cty-permission-alert-content-margin-bottom);--cty-alert-content-margin-top:var(--cty-permission-alert-content-margin-top);--cty-alert-content-size:var(--cty-permission-alert-content-size);--cty-alert-content-align:var(--cty-permission-alert-content-align);--cty-alert-content-color:var(--cty-permission-alert-content-color);--cty-alert-button-min-height:var(--cty-permission-alert-button-min-height);--cty-alert-button-color:var(--cty-permission-alert-button-color);--cty-alert-button-size:var(--cty-permission-alert-button-size);--cty-alert-button-radius:var(--cty-permission-alert-button-radius);--cty-alert-button-primary-background:var(--cty-permission-alert-button-primary-background);--cty-alert-button-primary-color:var(--cty-permission-alert-button-primary-color)}";
 
-const Circle = class {
+const PermissionAlert = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.rate = 0;
-        this.width = 40;
-        this.color = 'var(--cty-color-primary)';
-        this.text = '';
-        this.clockwise = true;
-        this.zeroTransparent = true;
-        this.rad = 500;
-        this.ratio = 1;
-        this.widthDif = 1;
-        this.offset = 0;
-        this.needDefs = false;
-        this.gradientId = '';
-        this.colors = [];
-        this.perimeter = 0;
-    }
-    watchColorHandler() {
-        this.needDefs = this.color instanceof Object;
-        if (this.needDefs) {
-            this.colors = Object.keys(this.color).sort((a, b) => parseFloat(a) - parseFloat(b)).map((key) => ({
-                offset: key.toString(),
-                color: this.color[key]
-            }));
-            this.updateSVGAttr();
+        this.ctyDismiss = index.createEvent(this, "ctyDismiss", 7);
+        this.ctyTap = index.createEvent(this, "ctyTap", 7);
+        this.backdropDismiss = false;
+        this.title = '需要申请相机权限';
+        this.content = '需要开启相机权限，用于拍照、扫码或视频聊天。我们承诺仅在功能使用时调用摄像头。';
+        this.closeable = false;
+        this.buttons = [{
+                text: '取消',
+                action: 'cancel'
+            }, {
+                text: '去打开',
+                action: 'permission'
+            }];
+    }
+    _buttonClick(event) {
+        event.stopPropagation();
+        const { item, index } = event.detail;
+        if (item.action !== 'cancel') {
+            this.ctyTap.emit({ item, index });
         }
     }
-    watchRadHandler() {
-        this.perimeter = 2 * 3.14 * this.rad;
-        this.updateSVGAttr();
-    }
-    updateSVGAttr() {
-        var _a, _b, _c, _d;
-        (_a = this.svgEl) === null || _a === void 0 ? void 0 : _a.setAttribute('viewBox', `0 0 ${+this.width + this.rad * 2 + this.offset * 2} ${+this.width + this.rad * 2 + this.offset * 2}`);
-        (_b = this.layerEl) === null || _b === void 0 ? void 0 : _b.setAttribute('d', this._getPath());
-        (_c = this.hoverEl) === null || _c === void 0 ? void 0 : _c.setAttribute('d', this._getPath());
-        Array.from(((_d = this.svgEl) === null || _d === void 0 ? void 0 : _d.querySelectorAll('stop')) || []).forEach((stopEL, index) => {
-            stopEL.setAttribute('key', index.toString());
-            stopEL.setAttribute('offset', this.colors[index].offset);
-            stopEL.setAttribute('stop-color', this.colors[index].color);
-        });
-    }
-    componentWillLoad() {
-        this.perimeter = 2 * 3.14 * this.rad;
-        this.gradientId = 'cty-circle-' + Math.random().toFixed(12).slice(2);
-        this.watchColorHandler();
-    }
-    componentDidLoad() {
-        this.updateSVGAttr();
-    }
-    _getPath() {
-        const { rad, width, offset, clockwise } = this;
-        const viewBoxSize = +width + rad * 2 + offset * 2;
-        const sweepFlag = clockwise ? 1 : 0;
-        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}`;
+    _dismiss() {
+        this.ctyDismiss.emit();
     }
     render() {
-        return (index.h(index.Host, { key: 'b552b6f0190327fbd9fcf458994feee63b761d38', class: "cty-circle" }, index.h("svg", { key: '64b07a4798544cc9f9878dc4be3a046c881a6706', ref: el => (this.svgEl = el) }, this.needDefs && index.h("defs", { key: '5762f3641189b8d8dd8da4beddaeb82c28b68287' }, index.h("linearGradient", { key: '03205dd0dc64e90bf6ca30fb613ceeffe688585e', id: this.gradientId, x1: "100%", y1: "0%", x2: "0%", y2: "0%", gradientTransform: "rotate(90)" }, this.colors.map(() => (index.h("stop", null))))), index.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'
-            } }), index.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 !== '' && index.h("div", { key: 'f683c2dc61d281e6c506ff9a15b3a2a2f4ef56da', class: "cty-circle__text" }, this.text), index.h("slot", { key: '64eba94a1e793fe3dec863d0733f8a7ceb9e659b' })));
+        return (index.h(index.Host, { key: '56a3795cba4d50f34250ae7bd6a95cd1f9aeb8be' }, index.h("cty-alert", { key: '30d8a9b62d7cb7c391a746755dbecdaef347ada0', part: "permission-alert", class: "cty-permission-alert", animated: false, overlayIndex: 1, backdropDismiss: this.backdropDismiss, title: this.title, content: this.content, closeable: this.closeable, buttons: this.buttons, onCtyTap: (e) => this._buttonClick(e), onCtyDismiss: () => this._dismiss() }, index.h("slot", { key: 'e661dd93f220462e2478233fce1a887bb6ac57d3', name: "header", slot: "header" }), index.h("slot", { key: '128a5f263a932e9c5263c51fccd6f2a67ef1cc49', name: "content", slot: "content" }), index.h("slot", { key: 'bfefd5cdb9c04a6fb3b13f1e4ea21d3b1a1b3dae', name: "buttons", slot: "buttons" }))));
     }
     get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "color": ["watchColorHandler"],
-        "rad": ["watchColorHandler", "watchRadHandler"]
-    }; }
 };
-Circle.style = circleCss;
+PermissionAlert.style = permissionAlertCss;
 
 exports.cty_alert = Alert;
-exports.cty_circle = Circle;
+exports.cty_permission_alert = PermissionAlert;

package/dist/cjs/cty-camera-photo.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DCK462Hl.js');
-var imagePicker = require('./image-picker-BoG8_gzp.js');
+var imagePicker = require('./image-picker-C9sdhsR_.js');
 var deviceInfo = require('./device-info-BPtPRb6d.js');
 var overlays = require('./overlays-Cfk4eti-.js');
 var lockController = require('./lock-controller-Dk7it1jt.js');
@@ -63,6 +63,8 @@ const CameraPhoto = class {
         this.clipImageQuality = 1;
         this.clipImageSuffix = 'jpeg';
         this.permissionPurpose = true;
+        this.permissionAlertTitle = '需要申请开启相册权限';
+        this.permissionAlertContent = '需要开启相册权限，我们会帮助您选择好的照片或视频上传发布';
         this.root = 'default';
         this.animated = false;
         this.overlay = true;
@@ -77,6 +79,10 @@ const CameraPhoto = class {
         this.showPermissionPurpose = false;
         this.permissionDescription = '';
         this.showCameraPreview = false;
+        this.hasPermission = deviceInfo.deviceInfo.isMicroMessager;
+        this.permissionAlertVisible = false;
+        this.isToastOpen = false;
+        this.toastContent = '';
     }
     triggerChanged() {
         const { trigger, el, triggerController } = this;
@@ -119,6 +125,30 @@ const CameraPhoto = class {
     onWillDismiss() {
         return overlays.eventMethod(this.el, 'ctyWillDismiss');
     }
+    async requestPermission() {
+        try {
+            this.hasPermission = await imagePicker.imagePicker.hasPermission();
+        }
+        catch (error) {
+            this.hasPermission = false;
+        }
+        if (!this.hasPermission) {
+            try {
+                await imagePicker.imagePicker.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;
+                }
+            }
+        }
+    }
     async _buttonClick(event) {
         event.stopPropagation();
         const { index } = event.detail;
@@ -138,13 +168,20 @@ const CameraPhoto = class {
             return;
         }
         let imageList = [];
+        const pictureOption = {
+            camera: option.action === 'camera',
+            file: this.file,
+            count: this.count,
+            option: this.photoOption,
+        };
+        //暂时处理多选图片的情况
+        if (!pictureOption.camera && pictureOption.count > 1 && !this.hasPermission) {
+            await this.requestPermission();
+            if (!this.hasPermission) {
+                return;
+            }
+        }
         try {
-            const pictureOption = {
-                camera: option.action === 'camera',
-                file: this.file,
-                count: this.count,
-                option: this.photoOption,
-            };
             imageList = await imagePicker.imagePicker.getPictures(pictureOption);
             this.showPermissionPurpose = false;
         }
@@ -208,8 +245,22 @@ const CameraPhoto = class {
         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.imagePicker.openAppSettings();
+            }
+            catch (error) { }
+            this.permissionAlertVisible = false;
+        }
+    }
+    closePermissionAlert(e) {
+        e.stopPropagation();
+        this.permissionAlertVisible = false;
+    }
     render() {
-        return (index.h(index.Host, { key: 'eea07b307cd18485730d5c3eadce68aaf8dc1b29', class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'cty-pos-cover': this.overlay }), style: { zIndex: `${20000 + this.overlayIndex}` } }, index.h("cty-action-sheet", { key: '7efa3cb1bbcf392be95095f4aebec0f50281cce3', 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 && (index.h("cty-backdrop", { key: 'beb314ab8d1f1001bb6031f94d6cb3caa5d02e78', backdropDismiss: false }, index.h("cty-crop-image", { key: '898aa3f15eed3c289f3f543d07520bfc09c10640', 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 && index.h("cty-permission-purpose", { key: '556c162b22f867697445d72d30befd9c92a66985', description: this.permissionDescription }), this.continuous && this.showCameraPreview && index.h("cty-camera", Object.assign({ key: '45d9311b5eea8abc67fbd62bcb4c6ad8177a9e4c' }, this.cameraProps, { onCtyDismiss: () => this.showCameraPreview = false, onCtyConfirm: (e) => this.continuousConfirm(e) }))));
+        return (index.h(index.Host, { key: '6626fa119a9c343df0fd6175c16c0a9cd18b6bf2', class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'cty-pos-cover': this.overlay }), style: { zIndex: `${20000 + this.overlayIndex}` } }, index.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 && (index.h("cty-backdrop", { key: '83e30b75f98f48e69e97898c6b95e835e519f999', backdropDismiss: false }, index.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 && index.h("cty-permission-purpose", { key: '55dd946e9896839ccd7930b1b3e0573429e29dc1', description: this.permissionDescription }), this.continuous && this.showCameraPreview && index.h("cty-camera", Object.assign({ key: '67729d43a590b8630169bd1daac1117f1f41641c' }, this.cameraProps, { onCtyDismiss: () => this.showCameraPreview = false, onCtyConfirm: (e) => this.continuousConfirm(e) })), this.permissionAlertVisible && index.h("cty-permission-alert", { key: '2fe87f4d37895f5187e1f86723fd2e34dc38e2b9', title: this.permissionAlertTitle, content: this.permissionAlertContent, buttons: this.permissionAlertbuttons, onCtyDismiss: (e) => this.closePermissionAlert(e), onCtyTap: (e) => this.toOpenAppSetting(e) }), index.h("ion-toast", { key: '7a30b6c1e4314cd092bef5c313bff43449fd12ee', "is-open": this.isToastOpen, message: this.toastContent, duration: 2000, position: 'middle' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/cty-camera_2.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
 var index = require('./index-DCK462Hl.js');
-var cameraPreview = require('./camera-preview-CTbXcOZK.js');
+var cameraPreview = require('./camera-preview-BylkRIcS.js');
 var deviceInfo = require('./device-info-BPtPRb6d.js');
-var imagePicker = require('./image-picker-BoG8_gzp.js');
+var imagePicker = require('./image-picker-C9sdhsR_.js');
 var index$1 = require('./index-DASUhQA3.js');
 var dom = require('./dom-B8PDM5o-.js');
 var format = require('./format-BSDO5P-c.js');
@@ -27,6 +27,8 @@ const Camera = class {
         this.width = 0;
         this.height = 0;
         this.quality = 85;
+        this.includeThumb = true;
+        this.thumbWidth = 120;
         this.file = true;
         this.max = 9;
         this.flipText = '翻转';
@@ -42,6 +44,8 @@ const Camera = class {
         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;
@@ -50,6 +54,10 @@ const Camera = class {
         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;
@@ -74,9 +82,46 @@ const Camera = class {
         bodyEl.style.visibility = 'visible';
         bodyEl.style.background = this.originalBodyBackground;
     }
-    initCamera() {
+    async requestPermission() {
+        try {
+            this.hasPermission = await cameraPreview.cameraPreview.hasPermission();
+        }
+        catch (error) {
+            this.hasPermission = false;
+        }
+        if (!this.hasPermission) {
+            try {
+                await cameraPreview.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.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.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();
@@ -123,14 +168,24 @@ const Camera = class {
         return cameraPreview.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.cameraPreview.takePicture({ width, height, quality });
-        const result = await imagePicker.imagePicker.formatPictureResult(file, data);
-        this.pictures = [...pictures, result];
+        const data = await cameraPreview.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.imagePicker.formatPictureResult(file, uri);
+        const thumbResult = await imagePicker.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') {
@@ -166,7 +221,7 @@ const Camera = class {
         this.closeImageViewer(e);
     }
     confirm() {
-        this.ctyConfirm.emit(this.pictures);
+        this.ctyConfirm.emit(this.pictures.map(({ url, data }) => ({ url, data })));
     }
     deleteLastPicture() {
         const pictures = [...this.pictures];
@@ -218,9 +273,26 @@ const Camera = class {
         }
         cameraPreview.cameraPreview.setZoom(Math.min(startCameraZoom + diff, maxZoom));
     }
+    async toOpenAppSetting(event) {
+        const { item } = event.detail;
+        if (item.action == 'permission') {
+            try {
+                await cameraPreview.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 (index.h(index.Host, { key: 'f40edbc29fe5da2917d4010c6d3b1a518aedaa41', class: "cty-camera", onClick: (e) => e.stopPropagation() }, index.h("cty-nav-bar", { key: '5ff4256016fa09b23178155358ebf130e43bcb7f', title: title, type: "clear" }, index.h("slot", { key: 'd2e04b67a7d3950bf4affa93bb5cb4d7c2a617c9', name: "header-start", slot: "start" }, !!closeIcon && index.h("ion-button", { key: '15ac081655793b3e389a1f3639bedfc1d9ecbf07', class: "cty-camera__close", onClick: () => this.close() }, index.h("cty-icon", { key: '0a502cc7dacef6aae4f0d378dde420bdc809fe06', class: "cty-camera__close-icon", name: closeIcon })))), index.h("div", { key: '50daa357c535b0b664cee8f7f2f373a6580b1999', class: "cty-camera-main", onTouchStart: (e) => this.touchstart(e), onTouchMove: (e) => this.touchmove(e), onTouchEnd: (e) => this.touchend(e) }, index.h("div", { key: '9480b0a5d2ecf27c8c29a4ff92b96ef3ea88ef42', class: "cty-camera-widgets", part: "widgets" }, !!flipText && index.h("button", { key: '686db6af3c4dafb1581bea7fa2e6b4a2f4f27083', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.flipCamera() }, index.h("cty-icon", { key: 'e79bfc8da5c2b406ac216c06b6a968f5abec969a', class: "cty-camera-widget__icon", name: "cty-flip" }), !!flipText && index.h("span", { key: 'ba9aa97adee38dac5b7ac62162748cbe1692fdd0', class: "cty-camera-widget__text" }, flipText)), !!flashText && index.h("button", { key: '40e364c8c390b8d34a10483dd9c59e6308af086a', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.toggleFlash() }, index.h("cty-icon", { key: 'b3529fb6899eec50a9dd23cafd14c702b73f0eab', class: "cty-camera-widget__icon", name: flash ? 'cty-flash-on' : 'cty-flash-off' }), !!flashText && index.h("span", { key: '5db6b0cdeda7be4a9dfc141ac2853f77b39480b3', class: "cty-camera-widget__text" }, flashText)), !!ratioText && index.h("button", { key: 'ca8f01983dd7c8d881e62f6537b59e54147989ba', class: "cty-button-native cty-camera-widget", part: "ratio", onClick: () => this.ratioChange() }, index.h("span", { key: 'ce1b6eae99a1a28490b5e354dc7b5d787f33012d', class: "cty-camera-widget__ratio flex-center" }, ratios[ratioIndex]), !!ratioText && index.h("span", { key: '5f8782c77973f304783f090c0d074d9aa4d37529', class: "cty-camera-widget__text" }, ratioText)))), index.h("div", { key: 'eb9fbcf73791d348b2721af75eb6379fac9edc5a', class: "cty-camera-controls safe-area-bottom-padding" }, mode == 'both' && pictures.length <= 0 && index.h("div", { key: 'd8ab77317beba8093cfa5b14a7b58b576f92b0d4', class: "cty-camera-controls__mode flex-center", part: "mode" }, index.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), index.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)), index.h("slot", { key: 'c23efc3fc61cb836bb970252106ed1e1cf3558d9', name: "zooms" }, !touchZoom && zooms.length > 0 && index.h("div", { key: '02e630d9fb5e30cc9257d74102301991f4f34cda', class: "cty-camera-controls__zooms flex-center", part: "zooms" }, zooms.map((item, idx) => (index.h("div", { class: { 'cty-camera-controls__zoom-item flex-center': true, 'cty-camera-controls__zoom-item__active': zoomIndex === idx }, onClick: () => this.setZoom(idx) }, index.h("span", { class: "cty-camera-controls__zoom-text flex-center" }, item, "X"))))), touchZoom && index.h("div", { key: 'e9f24d62c30dd73fd7be61a92b2a9e8477444d31', class: "cty-camera-controls__zooms flex-center", part: "zooms" }, index.h("div", { key: '15c9dfb471ebbc9d042b43c0798ca09fa20866d9', class: { 'cty-camera-controls__zoom-item flex-center cty-camera-controls__zoom-item__active': true }, onClick: () => this.resetZoom() }, index.h("span", { key: '02bf72c6259c9580006fa3ae14623686478e0637', class: "cty-camera-controls__zoom-text flex-center" }, currentZoom, "X")))), index.h("div", { key: 'd48ce6b8c8100b91876519bcc3aaae6ec6c64bb2', class: "cty-camera-controls__main flex-center" }, index.h("div", { key: 'bab57f9bb2276980e1eaf97db8a3473c393bd2a9', class: "cty-camera-controls__main-left flex-center" }), index.h("div", { key: '771f14a7d81b3ddd8ee3389de781baa408e58ab2', class: "cty-camera-controls__take-photo flex-center" }, index.h("button", { key: 'eb69383d3140935cf780d90f7a2f094295341613', class: "cty-button-native cty-camera-controls__take-photo-button", part: "take-photo", onClick: () => this.takePhoto() })), index.h("div", { key: '4de8c1abb63d4413d80fc6038b2d01161b61d03e', class: "cty-camera-controls__main-confirm flex-center" }, currentPhotoMode !== 'single' && pictures.length > 0 && !!deleteIcon && index.h("button", { key: 'd147510274b3f2d6afd7b8bc484a674274805556', class: "cty-camera-controls__main-delete cty-button-native flex-column-center", onClick: () => this.deleteLastPicture() }, index.h("cty-icon", { key: '28b17cecf4e4f3dbc25a2b1a6c9dd08cdace231a', class: "cty-camera-controls__main-delete-icon", name: deleteIcon })), currentPhotoMode !== 'single' && pictures.length > 0 && index.h("button", { key: 'be6a8e67255e4265f5f5744ba4bc12ea86fd8413', class: "cty-button-native flex-column-center", onClick: () => this.confirm() }, index.h("cty-icon", { key: 'e721a132723d3ec61d450d7bb92551fb3255a85b', class: "cty-camera-controls__main-confirm-icon", name: confirmIcon }), confirmText && index.h("span", { key: 'cd3413a3f091755709d4766bfb9851cd62797637', class: "cty-camera-controls__main-confirm-text" }, confirmText)))), index.h("slot", { key: '25cd2fd4dbf4383a38944f7a05c82d8529a1f329', name: "images" }, index.h("div", { key: 'd494fba5318e56f1bbd5e298c94d0db792fe2466', class: "cty-camera-controls__images flex-align-center" }, currentPhotoMode !== 'single' && pictures.map((item, idx) => (index.h("div", { class: "cty-camera-controls__image", onClick: () => this.toImageViewer(idx) }, index.h("img", { class: 'cty-camera-controls__image-img', src: item.url }), index.h("button", { class: "cty-button-native", onClick: (e) => this.deletePicture(e, idx) }, index.h("cty-icon", { class: "cty-camera-controls__image-delete", name: index$1.closeOutline })))))))), showImageViewer && index.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' && index.h("div", { key: '5ee748c3a00c7b59a06caf8452e991923f8b0e03', class: "cty-camera-viewer__single flex-center-between", slot: "pager" }, index.h("button", { key: 'e887095785b5a51ba6e7b9535302048f52847fec', class: "cty-camera-viewer__single-close cty-button-native", onClick: (event) => this.closeSingleImageViewer(event) }, index.h("cty-icon", { key: '9835324ca3a6d13a5492cc71e275a10176a2c41a', name: "cty-close2" })), index.h("button", { key: 'ead287871bcf1427012c48efff2f13e51acb8fc9', class: "cty-camera-viewer__single-confirm cty-button-native", onClick: () => this.confirm() }, index.h("cty-icon", { key: '5bcfd41d3c8998abcc06bf9852efcb4b1b821ffb', name: "cty-tick" }))), currentPhotoMode !== 'multiple' && index.h("i", { key: 'd1410f731edc011af6acdc1652264e760d557213', slot: "close" }))));
+        return (index.h(index.Host, { key: '249d6c9269af0bb404fa13c2679db953580196be', class: "cty-camera", onClick: (e) => e.stopPropagation() }, index.h("cty-nav-bar", { key: '3ddc96ed9540f67485013bd1d52cf593f7a159ec', title: title, type: "clear" }, index.h("slot", { key: 'c3124d840af6803fe87669dc1da346b5a51d6dc1', name: "header-start", slot: "start" }, !!closeIcon && index.h("ion-button", { key: '48ebfe61e98a586fb127feb9e57e556108665126', class: "cty-camera__close", onClick: () => this.close() }, index.h("cty-icon", { key: '8da9e811d18687d6c3c3fd19f3b6d96db3b4d992', class: "cty-camera__close-icon", name: closeIcon })))), index.h("div", { key: '918f5390b8d846231a1fbd3550858114efb3797f', class: "cty-camera-main", onTouchStart: (e) => this.touchstart(e), onTouchMove: (e) => this.touchmove(e), onTouchEnd: (e) => this.touchend(e) }, index.h("div", { key: '4d872387a4bb06d4d5030c181c6a67a9ef19f5aa', class: "cty-camera-widgets", part: "widgets" }, !!flipText && index.h("button", { key: '6de4076ab5b8ee8a31a63305fc4fd4c954e87291', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.flipCamera() }, index.h("cty-icon", { key: 'cf2cd7ccbf12a6b972371389045aa7360a7e361c', class: "cty-camera-widget__icon", name: "cty-flip" }), !!flipText && index.h("span", { key: '63816718efe322900dd80192a3c96e1dde0f56bf', class: "cty-camera-widget__text" }, flipText)), !!flashText && index.h("button", { key: '71f482e92876e408cfe4391c92c79789d83ff12b', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.toggleFlash() }, index.h("cty-icon", { key: '70a2838d229df2418807329013cf2db86c8b2886', class: "cty-camera-widget__icon", name: flash ? 'cty-flash-on' : 'cty-flash-off' }), !!flashText && index.h("span", { key: 'dc6dcb389cde04abe9e94824fc7ab23d7cbd49c3', class: "cty-camera-widget__text" }, flashText)), !!ratioText && index.h("button", { key: '13fd40b68adeefca52a5775b2fc86bd0602728c7', class: "cty-button-native cty-camera-widget", part: "ratio", onClick: () => this.ratioChange() }, index.h("span", { key: 'e971f50bb4a923dfb119497d530890dc2a2f4cc2', class: "cty-camera-widget__ratio flex-center" }, ratios[ratioIndex]), !!ratioText && index.h("span", { key: 'c13601a6c3866a72120a9b441d971c5134e95b26', class: "cty-camera-widget__text" }, ratioText)))), index.h("div", { key: 'b82e91f54f7416c8f8ba0bbc99ad034b7d90d201', class: "cty-camera-controls safe-area-bottom-padding" }, mode == 'both' && pictures.length <= 0 && index.h("div", { key: 'da4867ad484906fb92bb0b9840ae05cab7f6017c', class: "cty-camera-controls__mode flex-center", part: "mode" }, index.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), index.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)), index.h("slot", { key: '706e3c7c60be9bea7a887743981e6c0c83d867a1', name: "zooms" }, !touchZoom && zooms.length > 0 && index.h("div", { key: 'dd6fe65fe090190eb2f1f0b678ebfa84f8bbbe31', class: "cty-camera-controls__zooms flex-center", part: "zooms" }, zooms.map((item, idx) => (index.h("div", { class: { 'cty-camera-controls__zoom-item flex-center': true, 'cty-camera-controls__zoom-item__active': zoomIndex === idx }, onClick: () => this.setZoom(idx) }, index.h("span", { class: "cty-camera-controls__zoom-text flex-center" }, item, "X"))))), touchZoom && index.h("div", { key: '9f0a68f5c87b36f50807a1ddce3fd7d495f5b0f7', class: "cty-camera-controls__zooms flex-center", part: "zooms" }, index.h("div", { key: '2b1f97c6fbe953d71779f536d408d8a878872b1c', class: { 'cty-camera-controls__zoom-item flex-center cty-camera-controls__zoom-item__active': true }, onClick: () => this.resetZoom() }, index.h("span", { key: '2e16a3df094da8fcfe0b3758732a48bc67e00797', class: "cty-camera-controls__zoom-text flex-center" }, currentZoom, "X")))), index.h("div", { key: '06a01b4fcb96b0bd33bde8ed91fc2b436e406791', class: "cty-camera-controls__main flex-center" }, index.h("div", { key: 'c748dab6ff814deab00d7f0ff8e2b9ae439acc82', class: "cty-camera-controls__main-left flex-center" }), index.h("div", { key: 'ae6105b6f28bd8be992ebf164987806a5cf52e9c', class: "cty-camera-controls__take-photo flex-center" }, index.h("button", { key: '1bbe3c2225a533fd7f4b9de9b7778c748c4f5a03', class: "cty-button-native cty-camera-controls__take-photo-button", part: "take-photo", onClick: () => this.takePhoto() })), index.h("div", { key: 'd8b0277f2daf2c6085edd86c18d220a7c24e1e37', class: "cty-camera-controls__main-confirm flex-center" }, currentPhotoMode !== 'single' && pictures.length > 0 && !!deleteIcon && index.h("button", { key: 'cc83aa1aab767ea7a3aef3b44194b4891836c09a', class: "cty-camera-controls__main-delete cty-button-native flex-column-center", onClick: () => this.deleteLastPicture() }, index.h("cty-icon", { key: '5b2a06c3819fa158b12769b4cea08f7df6cecff2', class: "cty-camera-controls__main-delete-icon", name: deleteIcon })), currentPhotoMode !== 'single' && pictures.length > 0 && index.h("button", { key: '09642c94b869090cd1381b75a949013623558fb6', class: "cty-button-native flex-column-center", onClick: () => this.confirm() }, index.h("cty-icon", { key: '09e36ce96317e298f0a54ce6c1d76009a4ad4b95', class: "cty-camera-controls__main-confirm-icon", name: confirmIcon }), confirmText && index.h("span", { key: '9d24bf57e4c32abbbfb95671c1191f7d85adfce4', class: "cty-camera-controls__main-confirm-text" }, confirmText)))), index.h("slot", { key: '5530ce7f1411007acfd28326b53b5caa52c52376', name: "images" }, index.h("div", { key: '2a9366f14ff5878bb704703d9fd65a4549c002fb', class: "cty-camera-controls__images flex-align-center" }, currentPhotoMode !== 'single' && pictures.map((item, idx) => (index.h("div", { class: "cty-camera-controls__image", onClick: () => this.toImageViewer(idx) }, index.h("img", { class: 'cty-camera-controls__image-img', src: item.thumbnail || item.url }), index.h("button", { class: "cty-button-native", onClick: (e) => this.deletePicture(e, idx) }, index.h("cty-icon", { class: "cty-camera-controls__image-delete", name: index$1.closeOutline })))))))), showImageViewer && index.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' && index.h("div", { key: '2c0753cab107695962bbdd55ab9b334e91c361a2', class: "cty-camera-viewer__single flex-center-between", slot: "pager" }, index.h("button", { key: '3cf7393d965245e4b7072afe50412c150840cec3', class: "cty-camera-viewer__single-close cty-button-native", onClick: (event) => this.closeSingleImageViewer(event) }, index.h("cty-icon", { key: 'db1b6d35ff40650a00903d37d03adf9c4e7ce311', name: "cty-close2" })), index.h("button", { key: '25df5828eafcc1191e826445e0b20e41eec869bf', class: "cty-camera-viewer__single-confirm cty-button-native", onClick: () => this.confirm() }, index.h("cty-icon", { key: 'e96ba7b2413df359b4ab6ea184250edbf3618d2a', name: "cty-tick" }))), currentPhotoMode !== 'multiple' && index.h("i", { key: '8a167eb7c089ede4aeff07e73cd14424a0ccca55', slot: "close" })), this.permissionAlertVisible && index.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) }), index.h("ion-toast", { key: 'ac0224081e8ce22eaebfd7224391cf1957c2ff47', "is-open": this.isToastOpen, message: this.toastContent, duration: 2000, position: 'middle' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -430,7 +502,7 @@ const CropImage = class {
         return (index.h("div", { class: "cty-crop-image__buttons flex-center-between safe-area-bottom-border-color" }, this.cancelText && cancelCmp, this.confirmText && confirmCmp));
     }
     render() {
-        return (index.h(index.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() }, index.h("slot", { key: '4d1f7dcd27ebf1824937e8e056fec2e64b871610', name: "header" }), index.h("div", { key: '53adedd36ec4b3d2a622d9c308f35b593df3c7dd', class: "cty-crop-image__wrapper", ref: el => (this.imageEl = el) }, index.h("img", { key: '70dc841fd80c5e80923e3365597653837ee2d01d', src: this.url, class: "cty-crop-image__image" })), index.h("div", { key: '7c19c8da9253e17615aa2699391fcc545cb1f9ac', class: "cty-crop-image__clip", ref: el => (this.clipEl = el) }), index.h("slot", { key: '8394107199cf8626534e3d0c1a258225306c6eaf', name: "clip" }), this.renderButtons(), index.h("slot", { key: 'e723cd0166a0a1d752d6f69af3873ac97b96298c', name: "footer" })));
+        return (index.h(index.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() }, index.h("slot", { key: '441105402304f96770ff61b883993c952f7ea4a9', name: "header" }), index.h("div", { key: 'affa68ce2eacf57bff5dcbc140c1da82d59dc8a3', class: "cty-crop-image__wrapper", ref: el => (this.imageEl = el) }, index.h("img", { key: '9c5dd8cafb8e14f7f0e5d6ee2cc999a139580342', src: this.url, class: "cty-crop-image__image" })), index.h("div", { key: 'eafd9083b6728615b767dae842c8b102ad40916d', class: "cty-crop-image__clip", ref: el => (this.clipEl = el) }), index.h("slot", { key: '25cb5fb31191e0a991064164b4c5752f39b7499b', name: "clip" }), this.renderButtons(), index.h("slot", { key: 'e60a010fea26d6fa38a380c4cb9f6c4c28c25558', name: "footer" })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/cty-canvas-board.cjs.entry.js

@@ -204,7 +204,7 @@ const CanvasBoard = class {
             } }, index.h("i", { style: { width: item * 2 + 'px', height: item * 2 + 'px' } }))))), index.h("div", { class: "cty-canvas-board__line-alpha", onClick: e => e.stopPropagation() }, index.h("div", { class: "cty-canvas-board__line-alpha-bg" }), index.h("ion-range", { max: 1, min: 0, step: 0.01, ref: (el) => (this.alphaRangeRef = el), class: "cty-canvas-board__line-alpha-range", value: this.alpha, onIonChange: (event) => this.alphaChange(event) })))));
     }
     render() {
-        return (index.h(index.Host, { key: '77461f05c3380459bbf8663b7b17adbefc1a9eb5', class: "cty-canvas-board flex-column" }, index.h("slot", { key: '1b9fdfc979353af1e012207341007884ebc854d3', name: "header" }), this.headerOpn && (index.h("div", { key: '44f83e96e5ee8d8ecbf192bbf6068a39d3f54eef', class: "cty-canvas-board__header flex-center-between" }, index.h("slot", { key: '1ece92c8330cabf64d6be6245b8586b576862e6c', name: "header-start" }), this.bgIcon && index.h("button", { key: 'c4a1a08e5db586d55e145f60d28c429d02d346be', class: "cty-button-native", onClick: () => this.updateBgColor() }, index.h("cty-icon", { key: '86113a93e80216c1fa342a41d6e144e6c8873762', name: this.bgIcon, class: "cty-canvas-board__palette" }), index.h("input", { key: 'ab128a619a0548e3bda4ab952144f8735e004874', type: "color", class: "cty-canvas-board__picker-color", ref: el => (this.bgPickerEl = el), value: this.bgColor, onInput: (e) => this.bgColorChange(e) })), index.h("slot", { key: '62bcbe6f83e52bf9ce60c36f57388b080e330763', name: "header-opn-start" }, " "), (this.undoIcon || this.redoIcon) && index.h("div", { key: 'e061c427becfd216bb547ac2a43bd88d84a8516d', class: "cty-canvas-board__opn flex-center" }, this.undoIcon && index.h("button", { key: '7a120805a9cda67ec76f7ceb7e1e9e2f9b43119e', class: "cty-button-native cty-canvas-board__opn-icon", onClick: () => this.undo() }, index.h("cty-icon", { key: '61f9e434e4c1175e0e0deb645c588286e11abb72', name: this.undoIcon, class: { 'cty-canvas-board__opn-active': this.drawingHistory.length > 1 && this.step > 0 } })), this.redoIcon && index.h("button", { key: '65240b6060be512120983d70affb6320507b9a3f', class: "cty-button-native cty-canvas-board__opn-icon", onClick: () => this.redo() }, index.h("cty-icon", { key: '60e2c28cadd3c2d40eeb98a8cad9f72d792f8589', name: this.redoIcon, class: { 'cty-canvas-board__opn-active': this.step < this.drawingHistory.length - 1 } }))), index.h("slot", { key: '8e867a01cdaafbbe08da91fce36f22fa049f4db9', name: "header-opn-end" }), this.clearIcon && index.h("button", { key: '19a809120e0f4604d52dbe03dc3f67f2c5698f83', class: "cty-button-native cty-canvas-board__clear", onClick: () => this.clear() }, index.h("cty-icon", { key: 'c49522de5d1b2d442f0e44b2ac36fdff97ea41ab', name: this.clearIcon })), index.h("slot", { key: 'fc0ba8abb29039edf9151dfb9d51a1aeede60cd8', name: "header-end" }))), index.h("slot", { key: '1ec5283eb61319f212d0898d8a5ac1d88d13f508', name: "main" }), index.h("div", { key: 'c0b508a7b55cdc56df6c848543d1b2b0e65bddb2', class: "cty-canvas-board__main" }, index.h("canvas", { key: '3a22c825d29c62a52aef31ab60deefbbd062d1b5', ref: el => (this.canvasEl = el), style: { background: this.bgColor }, onTouchStart: e => this.startDrawing(e), onTouchMove: e => this.moveDrawing(e), onTouchEnd: e => this.endDrawing(e), onMouseDown: e => this.startDrawing(e), onMouseMove: e => this.moveDrawing(e), onMouseUp: e => this.endDrawing(e) }), index.h("canvas", { key: '89311b6698020381cd3b35895997678c111dcd98', ref: el => (this.imageCanvasEl = el), style: { display: 'none' } }), index.h("span", { key: '5f462b61d2b29b1b702376085bc166681fa18ce9', class: "cty-canvas-board__eraser-circle", ref: el => (this.eraserEl = el) }), this.isCanvasEmpty && index.h("slot", { key: '765b89a4bd4b89d4be9435b7b28f1460830e5c40', name: "placeholder" }), index.h("slot", { key: '05bd544f4293977a3e505b50f2fc1563c51461df' })), index.h("slot", { key: 'c5828b000c59d7ac6c788fd8f058bf3cd17b9b32', name: "footer" }), this.footerOpn && (index.h("div", { key: '6420abefc57b8ee8f11a79ddea686f4804b19119', class: "cty-canvas-board__footer flex-center" }, index.h("slot", { key: 'f3ccd75e1e869c98e123b8e419e8a59ba9113bce', name: "footer-start" }), this.pencilIcon && (index.h("button", { key: 'c140c157ae713d94c9d0f6da55ae3e87d488b5b7', class: "cty-button-native cty-canvas-board__pen", onClick: e => this.updatePencil(e) }, index.h("cty-icon", { key: '7262819d76c1552a9566f025270255625f22ecc3', name: this.pencilIcon, class: { 'cty-canvas-board__footer-active': !this.isEraser } }))), index.h("button", { key: '31f3f0f0f2a68c5290809a4ae8a012fd353917f2', class: "cty-button-native cty-canvas-board__eraser", onClick: () => (this.isEraser = !this.isEraser) }, index.h("cty-icon", { key: '897c7d062bbdd7dceccaeb759f5967a000023e41', name: this.eraserIcon, class: { 'cty-canvas-board__footer-active': this.isEraser } })), index.h("button", { key: 'c9a7a647baa4ac93b081c3f9586c7455a5c5ef44', class: "cty-button-native cty-canvas-board__color-button", onClick: () => this.updateColor() }, index.h("input", { key: 'd91f1947c9f66a5050d92a6c9fd2c4758d119c20', type: "color", value: this.strokeColor, class: "cty-canvas-board__picker-color", ref: el => (this.colorPickerEl = el), onInput: (e) => this.penColorChange(e) })), index.h("slot", { key: 'bc134a972e3d5bca92e59b612cdff45ee7d1041f', name: "footer-end" }))), index.h("slot", { key: '5ab3b8c50038cbf8d98728ded8565d831d8eed1b', name: "bottom" }), this.showButtons && (index.h("div", { key: 'af85a5d9ef4d6e1ae76c43a9700e2b2b1a1bdcc3', class: "cty-canvas-board__buttons flex-justify-end" }, index.h("slot", { key: 'cb01fd8b02cf4b47af3143574c519de888b9edf9', name: "bottom-button-start" }), index.h("button", { key: '62141bb06b1e69946080a385043127c10963a25c', class: "cty-canvas-board__button cty-button-native", onClick: () => this.clear() }, this.clearLabel), index.h("button", { key: 'abf4c4bbab5f2dda8ea5b52f5d1bfbad64eca70b', class: "cty-canvas-board__button cty-button-native", onClick: () => this.confirm() }, this.confirmLabel), index.h("slot", { key: '91e5ab4da613f99793f900f154bdf94dd4c0adbb', name: "bottom-button-end" }))), this.renderPopover()));
+        return (index.h(index.Host, { key: '5c1d547318a944d16e02a0d89e3fffded39e0bdd', class: "cty-canvas-board flex-column" }, index.h("slot", { key: 'e0acd38c2dd73f444ff810398f181d59465e0ec1', name: "header" }), this.headerOpn && (index.h("div", { key: '83a86afb9509cc85780f93ba712f6ccb0f1a728b', class: "cty-canvas-board__header flex-center-between" }, index.h("slot", { key: '622ab8273190d2795c1816663656eb1deb1b8e67', name: "header-start" }), this.bgIcon && index.h("button", { key: 'd8f7a0040b968e826533fbe5fa96c2a7801b3c72', class: "cty-button-native", onClick: () => this.updateBgColor() }, index.h("cty-icon", { key: '43e2bd356e3d51368e11f1e7673292eb35dbcdfc', name: this.bgIcon, class: "cty-canvas-board__palette" }), index.h("input", { key: 'b96ab00872f55b7e71eccbac4fd9ffead9de1d48', type: "color", class: "cty-canvas-board__picker-color", ref: el => (this.bgPickerEl = el), value: this.bgColor, onInput: (e) => this.bgColorChange(e) })), index.h("slot", { key: '0f9c4685c82f01b16da1c216f1a082c331aac1f2', name: "header-opn-start" }, " "), (this.undoIcon || this.redoIcon) && index.h("div", { key: '12b46e18bf7621a274db06e488bf2aad8c5f841c', class: "cty-canvas-board__opn flex-center" }, this.undoIcon && index.h("button", { key: 'f1aaa8dbd4a335ab95726213a0637fed02dd6c02', class: "cty-button-native cty-canvas-board__opn-icon", onClick: () => this.undo() }, index.h("cty-icon", { key: '6f69dd8f47e2817d38a0f478e533c696b848a888', name: this.undoIcon, class: { 'cty-canvas-board__opn-active': this.drawingHistory.length > 1 && this.step > 0 } })), this.redoIcon && index.h("button", { key: '6800f914f7a959eeb86884d5f296c6c98edb8f31', class: "cty-button-native cty-canvas-board__opn-icon", onClick: () => this.redo() }, index.h("cty-icon", { key: 'dffc5e3e76c4fc5f8ea7e54398f86a90b8b38007', name: this.redoIcon, class: { 'cty-canvas-board__opn-active': this.step < this.drawingHistory.length - 1 } }))), index.h("slot", { key: '52cd777aa3d99718e3b73333bc70f8da551d51d0', name: "header-opn-end" }), this.clearIcon && index.h("button", { key: 'beaf0980ad1613210e05fc18684f8050e0bc14f9', class: "cty-button-native cty-canvas-board__clear", onClick: () => this.clear() }, index.h("cty-icon", { key: '4c59d492b92480fd2eb028480cc25823cf3af4f9', name: this.clearIcon })), index.h("slot", { key: 'a03ad3ae3c5295a09e23371bbd03da1b005278f7', name: "header-end" }))), index.h("slot", { key: 'e85153d6eb9f3f41bc43782deef4d1a7a9a11c1b', name: "main" }), index.h("div", { key: '74cdcc4b9ca9da6a0391f077cb4cdf263836150e', class: "cty-canvas-board__main" }, index.h("canvas", { key: '8b3bf6e0b28f811531b8879d642d9de0299a8b8f', ref: el => (this.canvasEl = el), style: { background: this.bgColor }, onTouchStart: e => this.startDrawing(e), onTouchMove: e => this.moveDrawing(e), onTouchEnd: e => this.endDrawing(e), onMouseDown: e => this.startDrawing(e), onMouseMove: e => this.moveDrawing(e), onMouseUp: e => this.endDrawing(e) }), index.h("canvas", { key: '3be84d339b42c57bb9543d50dabac45b345d7744', ref: el => (this.imageCanvasEl = el), style: { display: 'none' } }), index.h("span", { key: '03b3a54198b7e4115ded1ee51dfae47a03958f3f', class: "cty-canvas-board__eraser-circle", ref: el => (this.eraserEl = el) }), this.isCanvasEmpty && index.h("slot", { key: '40f663e90e0ac2e8eec1c173d92d4f2afbb17197', name: "placeholder" }), index.h("slot", { key: 'c5ce29e7aef527910d6ab7593675475e1c83e465' })), index.h("slot", { key: '41f037aa77b7c4b02b882d74b384816c03f1a498', name: "footer" }), this.footerOpn && (index.h("div", { key: 'e8a967e7a47e2803942c5758805485b45ff05de3', class: "cty-canvas-board__footer flex-center" }, index.h("slot", { key: '8c792a5b6b0bed91769061f1f08dcce4c857df72', name: "footer-start" }), this.pencilIcon && (index.h("button", { key: 'd38bd9c14fb12ef9df57140119a9cc73958eb183', class: "cty-button-native cty-canvas-board__pen", onClick: e => this.updatePencil(e) }, index.h("cty-icon", { key: 'be9d5a10731393ae63743ff48d9fcab513a4194d', name: this.pencilIcon, class: { 'cty-canvas-board__footer-active': !this.isEraser } }))), index.h("button", { key: '7f7ac5a80313a8091be48557d660b2437c96bc84', class: "cty-button-native cty-canvas-board__eraser", onClick: () => (this.isEraser = !this.isEraser) }, index.h("cty-icon", { key: '27b2c2fac487a6e6c64e2901ecda959b5986e53c', name: this.eraserIcon, class: { 'cty-canvas-board__footer-active': this.isEraser } })), index.h("button", { key: 'd4a8a76108b5a0daffe6363a00a831c6ea2f1f5b', class: "cty-button-native cty-canvas-board__color-button", onClick: () => this.updateColor() }, index.h("input", { key: 'd112d696ffdc60f3bab52d5a353cb240ea46f69b', type: "color", value: this.strokeColor, class: "cty-canvas-board__picker-color", ref: el => (this.colorPickerEl = el), onInput: (e) => this.penColorChange(e) })), index.h("slot", { key: '9e7c87513fed66167fc8d222510090c7cd1195b3', name: "footer-end" }))), index.h("slot", { key: 'a7319635e7d42639532bb2eb8233a44190ca91c3', name: "bottom" }), this.showButtons && (index.h("div", { key: '7d8a64385d94fe7c581266242e0c36d792eb500d', class: "cty-canvas-board__buttons flex-justify-end" }, index.h("slot", { key: '81f318a6785818049ad7495992d4ec9712a782f5', name: "bottom-button-start" }), index.h("button", { key: '1a2f3161c2525d8ba1e1570285d0afbfd5cac710', class: "cty-canvas-board__button cty-button-native", onClick: () => this.clear() }, this.clearLabel), index.h("button", { key: '094fe6960e7eaeb06f94554d42564c07a9c80b92', class: "cty-canvas-board__button cty-button-native", onClick: () => this.confirm() }, this.confirmLabel), index.h("slot", { key: '3a4e37ea42b3bd2e3653fc8488b4ca8e33055946', name: "bottom-button-end" }))), this.renderPopover()));
     }
     get el() { return index.getElement(this); }
 };