cty-mui-core 1.0.25 → 1.0.27

package/assets/cty_res/svg/cty-confirm.svg

@@ -0,0 +1 @@
+<svg t="1775631442627" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="38680" width="48" height="48"><path d="M512 76.8c-236.8 0-435.2 192-435.2 435.2s192 435.2 435.2 435.2 435.2-192 435.2-435.2S748.8 76.8 512 76.8z m249.6 320L480 704c-12.8 12.8-38.4 12.8-51.2 0L288 556.8c-12.8-12.8-12.8-38.4 0-51.2 12.8-12.8 38.4-12.8 51.2 0l115.2 115.2L704 339.2c12.8-12.8 38.4-12.8 51.2 0 25.6 12.8 25.6 38.4 6.4 57.6z" fill="currentColor" p-id="38681"></path><path d="M710.4 339.2l-256 281.6-115.2-115.2c-12.8-12.8-38.4-12.8-51.2 0-12.8 12.8-12.8 38.4 0 51.2l147.2 140.8c12.8 12.8 38.4 12.8 51.2 0L768 390.4c12.8-12.8 12.8-38.4 0-51.2-19.2-12.8-44.8-12.8-57.6 0z" fill="#FFFFFF" p-id="38682"></path></svg>

package/assets/cty_res/svg/cty-flash-off.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="cty-icon ionicon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M208.244364 338.501818l70.888727 70.912-61.789091 144.337455 206.196364 0.023272 87.645091 87.668364-37.236364 154.903273 87.738182-104.401455 66.094545 66.094546-209.570909 249.367272a46.545455 46.545455 0 0 1-80.872727-40.820363l76.8-319.720727-267.380364-0.023273a46.592 46.592 0 0 1-42.775273-64.884364l104.261819-243.456z m175.709091-338.525091l350.580363 0.162909a46.545455 46.545455 0 0 1 42.449455 65.629091l-152.436364 339.549091h199.68a46.545455 46.545455 0 0 1 35.630546 76.474182l-123.950546 147.549091 205.777455 205.754182a46.545455 46.545455 0 0 1-62.859637 68.561454l-2.955636-2.722909-815.709091-815.709091A46.545455 46.545455 0 0 1 123.066182 16.686545l2.955636 2.699637L279.272727 172.683636l61.858909-144.453818a46.568727 46.568727 0 0 1 39.098182-28.066909l3.677091-0.162909h0.023273z m340.363636 498.408728h-119.342546l64.861091 64.86109 54.481455-64.86109zM414.603636 93.090909l-64.465454 150.481455 169.053091 169.029818 143.429818-319.394909L414.603636 93.090909z"  /></svg>

package/assets/cty_res/svg/cty-flash-on.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="cty-icon ionicon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M233.472 553.751273l255.860364 0.046545a46.545455 46.545455 0 0 1 45.242181 57.413818l-44.497454 185.157819 250.368-297.960728h-171.706182a46.592 46.592 0 0 1-42.449454-65.629091l152.436363-339.549091L430.754909 93.090909l-197.259636 460.637091zM398.661818 1024a46.545455 46.545455 0 0 1-45.242182-57.413818l76.8-319.697455L162.909091 646.842182a46.568727 46.568727 0 0 1-42.775273-64.861091L357.236364 28.229818A46.545455 46.545455 0 0 1 400.034909 0l350.626909 0.162909a46.545455 46.545455 0 0 1 42.449455 65.605818l-152.436364 339.549091h199.68a46.545455 46.545455 0 0 1 35.607273 76.497455L434.362182 1007.406545A46.545455 46.545455 0 0 1 398.661818 1024z"  /></svg>

package/assets/cty_res/svg/cty-flip.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="cty-icon ionicon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M639.36 54.857143a101.888 101.888 0 0 1 88.448 51.510857l43.209143 76.16h91.428571c89.088 0 161.554286 72.466286 161.554286 161.554286v458.514285c0 89.088-72.466286 161.554286-161.554286 161.554286H161.554286C72.466286 964.150857 0 891.702857 0 802.633143V344.064c0-89.106286 72.466286-161.554286 161.554286-161.554286h91.428571l43.190857-76.141714A101.942857 101.942857 0 0 1 384.64 54.857143z m0 73.142857h-254.72c-10.258286 0-19.766857 5.540571-24.850286 14.482286l-53.686857 94.665143A36.608 36.608 0 0 1 274.285714 255.670857H161.554286A88.502857 88.502857 0 0 0 73.142857 344.082286v458.514285a88.502857 88.502857 0 0 0 88.411429 88.411429h700.891428A88.502857 88.502857 0 0 0 950.857143 802.633143V344.064a88.502857 88.502857 0 0 0-88.411429-88.411429H749.714286c-13.165714 0-25.307429-7.076571-31.817143-18.523428l-53.705143-94.665143A28.617143 28.617143 0 0 0 639.36 128zM299.136 561.737143a36.498286 36.498286 0 0 1 27.977143 1.389714l72.082286 34.102857a36.608 36.608 0 0 1 17.408 48.713143 36.443429 36.443429 0 0 1-31.817143 20.736 168.338286 168.338286 0 0 0 55.881143 42.660572 167.533714 167.533714 0 0 0 129.005714 6.290285 168.009143 168.009143 0 0 0 101.997714-102.034285 36.589714 36.589714 0 0 1 68.864 24.685714 241.261714 241.261714 0 0 1-146.194286 146.212571 242.102857 242.102857 0 0 1-81.737142 14.299429 241.188571 241.188571 0 0 1-103.186286-23.314286 240.292571 240.292571 0 0 1-100.333714-88.502857l-1.609143 3.419429a36.571429 36.571429 0 1 1-66.157715-31.177143l37.083429-78.628572c4.132571-8.777143 11.593143-15.561143 20.736-18.834285z m145.590857-241.645714a240.164571 240.164571 0 0 1 183.826286 22.016 240.402286 240.402286 0 0 1 84.443428 79.177142l3.730286-7.68a36.571429 36.571429 0 0 1 65.773714 32.036572l-38.070857 78.153143a36.571429 36.571429 0 0 1-48.932571 16.841143l-71.643429-35.035429a36.571429 36.571429 0 0 1-16.822857-48.932571 36.443429 36.443429 0 0 1 25.691429-19.638858 168.923429 168.923429 0 0 0-39.990857-31.158857 167.68 167.68 0 0 0-128.237715-15.36 168.484571 168.484571 0 0 0-108.324571 93.184 36.571429 36.571429 0 1 1-66.669714-30.08 241.371429 241.371429 0 0 1 155.227428-133.522285z" /></svg>

package/components/camera.js

@@ -0,0 +1,265 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as cameraPreview, i as imagePicker } from './image-picker.js';
+import { d as closeOutline } 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$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-widgets{-ms-flex-item-align:end;align-self:flex-end;margin-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__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__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)}";
+
+const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.ctyDismiss = createEvent(this, "ctyDismiss", 7);
+        this.ctyTakePhoto = createEvent(this, "ctyTakePhoto", 7);
+        this.ctyConfirm = createEvent(this, "ctyConfirm", 7);
+        /**
+         * 自定义限定数量
+         * 支持删除最后一张图片（需要开关控制是否显示）
+         * 翻转、闪光和比例支持开关控制
+         *
+         */
+        this.safeArea = 44;
+        this.title = '';
+        this.options = {};
+        this.closeIcon = closeOutline;
+        this.width = 0;
+        this.height = 0;
+        this.quality = 85;
+        this.file = true;
+        this.max = 9;
+        this.flipText = '翻转';
+        this.flashText = '闪光';
+        this.ratioText = '比例';
+        this.confirmIcon = 'cty-confirm';
+        this.confirmText = '确定';
+        this.ratios = ['9:16', '3:4', '1:1', '16:9', 'full'];
+        this.zooms = [1, 2, 5, 10];
+        this.ratioIndex = 0;
+        this.flash = false;
+        this.zoomIndex = 0;
+        this.pictures = [{
+                url: '/img/wechat.png',
+                data: ''
+            }, {
+                url: '/img/wechat.png',
+                data: ''
+            }];
+        this.showImageViewer = false;
+        this.imageViewerIndex = 0;
+        this.SCREEN_WIDTH = window.screen.width;
+        this.SCREEN_HEIGHT = window.screen.height;
+        this.originalBodyBackground = '';
+    }
+    connectedCallback() {
+        const bodyEl = window.document.querySelector('body');
+        bodyEl.style.visibility = 'hidden';
+        this.originalBodyBackground = window.getComputedStyle(bodyEl).background;
+        bodyEl.style.background = 'transparent';
+        this.initCamera();
+    }
+    disconnectedCallback() {
+        cameraPreview.stopCamera();
+        const bodyEl = window.document.querySelector('body');
+        bodyEl.style.visibility = 'visible';
+        bodyEl.style.background = this.originalBodyBackground;
+    }
+    initCamera() {
+        const height = this.getCameraHeight();
+        return cameraPreview.startCamera(Object.assign(Object.assign({ y: this.safeArea, camera: 'back' }, this.options), { x: 0, height, toBack: true, tapPhoto: false, tapFocus: true, storeToFile: this.file }));
+    }
+    close() {
+        this.ctyDismiss.emit();
+    }
+    flipCamera() {
+        return cameraPreview.switchCamera();
+    }
+    toggleFlash() {
+        this.flash = !this.flash;
+        if (!this.flash) {
+            return this.flashOff();
+        }
+        return this.flashOn();
+    }
+    flashOff() {
+        return cameraPreview.setFlashMode('off');
+    }
+    flashOn() {
+        return cameraPreview.setFlashMode('torch');
+    }
+    ratioChange() {
+        const { ratios, ratioIndex, SCREEN_WIDTH } = this;
+        const lastRatio = ratios[ratioIndex];
+        this.ratioIndex++;
+        if (this.ratioIndex >= ratios.length) {
+            this.ratioIndex = 0;
+        }
+        const currentRatio = ratios[this.ratioIndex];
+        if (!currentRatio.includes(':') || lastRatio.includes(':')) ;
+        const height = this.getCameraHeight();
+        return cameraPreview.setPreviewSize({ width: SCREEN_WIDTH, height });
+    }
+    async setZoom(idx) {
+        const { zooms } = this;
+        this.zoomIndex = idx;
+        const maxZoom = await cameraPreview.getMaxZoom();
+        const zoom = ((+maxZoom + 1) / zooms.slice(-1)[0]) * zooms[idx];
+        return cameraPreview.setZoom(idx === 0 ? 0 : Math.min(zoom, maxZoom));
+    }
+    async takePhoto() {
+        const { quality, width, height, file } = this;
+        const data = await cameraPreview.takePicture({ width, height, quality });
+        const result = imagePicker.formatPictureResult(file, data);
+        this.pictures = [...this.pictures, result];
+        this.ctyTakePhoto.emit(result);
+        return result;
+    }
+    deletePicture(e, idx) {
+        e.stopPropagation();
+        const pictures = [...this.pictures];
+        pictures.splice(idx, 1);
+        this.pictures = pictures;
+    }
+    getCameraHeight() {
+        const { ratios, ratioIndex, SCREEN_WIDTH, SCREEN_HEIGHT } = this;
+        const currentRatio = ratios[ratioIndex];
+        if (!currentRatio.includes(':')) {
+            return SCREEN_HEIGHT;
+        }
+        const [x, y] = currentRatio.split(':');
+        return +y * SCREEN_WIDTH / +x;
+    }
+    toImageViewer(index) {
+        this.showImageViewer = true;
+        this.imageViewerIndex = index;
+    }
+    closeImageViewer(e) {
+        e.stopPropagation();
+        this.showImageViewer = false;
+    }
+    confirm() {
+        this.ctyConfirm.emit(this.pictures);
+    }
+    render() {
+        const { title, closeIcon, flash, flipText, flashText, ratioText, ratios, ratioIndex, zoomIndex, zooms, confirmIcon, confirmText, pictures, showImageViewer, imageViewerIndex } = this;
+        return (h(Host, { key: '87619df83dfd1df6b3163dd2b7c45f94a6f74db6', class: "cty-camera", onClick: (e) => e.stopPropagation() }, h("cty-nav-bar", { key: '1ffe4cdebe32d92862667663bbd3b89452c5f186', title: title, type: "clear" }, h("slot", { key: '8556b0ca01c55bbe9ced998da6a8895ee8bd5c52', name: "header-start", slot: "start" }, h("ion-button", { key: '21115e603b0876f12b6d58fbb3bdab2f80520795', class: "cty-camera__close", onClick: () => this.close() }, h("cty-icon", { key: 'd640e89531b9edbe290c99e2cacfce41fc4ed879', class: "cty-camera__close-icon", name: closeIcon })))), h("div", { key: 'a8611dac88a7f2a2615b4874f0db86de9be1151d', class: "cty-camera-widgets", part: "widgets" }, h("button", { key: '887509307c97fb0837c6503bc6428fffb7b9b0cb', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.flipCamera() }, h("cty-icon", { key: '15422b01e83849f0848e164065f2492eed796e37', class: "cty-camera-widget__icon", name: "cty-flip" }), !!flipText && h("span", { key: '22e490eef01255bcb0a266125743a0d1a5202c16', class: "cty-camera-widget__text" }, flipText)), h("button", { key: '1b4ce3cb9d1c07d5f31cf9baa2e8d6d110b60ec0', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.toggleFlash() }, h("cty-icon", { key: '5b1a2953996507d693381321bb4e1a03c3465421', class: "cty-camera-widget__icon", name: flash ? 'cty-flash-on' : 'cty-flash-off' }), !!flashText && h("span", { key: '1a91d914956cd17599d79f0221e4b7a0563b13be', class: "cty-camera-widget__text" }, flashText)), h("button", { key: '1bea848be4d5904ca74ee0b6e1d56807fc4a0731', class: "cty-button-native cty-camera-widget", part: "ratio", onClick: () => this.ratioChange() }, h("span", { key: 'ab10f91f90c8a8471bc94243b7bad535e1171e2f', class: "cty-camera-widget__ratio flex-center" }, ratios[ratioIndex]), !!ratioText && h("span", { key: '502527a106025d6012d86faefa0b225b8ad8ded8', class: "cty-camera-widget__text" }, ratioText))), h("div", { key: '2863467ed92620bf06204917567d0e1600044662', class: "cty-camera-controls safe-area-bottom-padding" }, h("slot", { key: '3a14102cbadd7325f220ce105aaaf5105b21629f', name: "zooms" }, h("div", { key: '0ca55abd29fcf660bbde14873cdb74f2bbd58450', class: "cty-camera-controls__zooms flex-center" }, 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")))))), h("div", { key: '58bec9af89ace3ca63c91cd6768040a0b2e0a190', class: "cty-camera-controls__main flex-center" }, h("div", { key: 'caa835c546b83741659b1c36f0b3f99d7d5481c8', class: "cty-camera-controls__main-left flex-center" }), h("div", { key: '561f4f794938fdedae4ecf8b216d445e9c16708f', class: "cty-camera-controls__take-photo flex-center" }, h("button", { key: 'ebda39c88c8afcac7ad03a93779b52034e4f03ad', class: "cty-button-native cty-camera-controls__take-photo-button", part: "take-photo", onClick: () => this.takePhoto() })), h("div", { key: 'c6f12f91a7a36a826e456929b08d240ee3cbae82', class: "cty-camera-controls__main-confirm flex-center" }, pictures.length > 0 && h("button", { key: '2bedc3ae07ed1c01a880562459d7f30cb1c10cfe', class: "cty-button-native flex-column-center", onClick: () => this.confirm() }, h("cty-icon", { key: '250431733180d4d6b403a2a5535576fdf3978ba2', class: "cty-camera-controls__main-confirm-icon", name: confirmIcon }), h("span", { key: 'a4c1eac8d7b8b7b0f58b3492a51c906dd97fadd0', class: "cty-camera-controls__main-confirm-text" }, confirmText)))), h("slot", { key: '9a58817e2c3dac0f02bd21483b92d2d751095014', name: "images" }, h("div", { key: 'e9cdadd9bb8da0b5ccff3681f484570fc5b4269e', class: "cty-camera-controls__images flex-align-center" }, 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: 'fb724686c5f0d9a24f12527ba1b50f09de85a82f', images: pictures.map(item => item.url), initialSlide: imageViewerIndex, overlayIndex: 100, backdropDismiss: false, closeable: true, onCtyDismiss: (e) => this.closeImageViewer(e) })));
+    }
+    get el() { return this; }
+    static get style() { return cameraCss; }
+}, [1, "cty-camera", {
+        "safeArea": [2, "safe-area"],
+        "title": [1],
+        "options": [16],
+        "closeIcon": [1, "close-icon"],
+        "width": [2],
+        "height": [2],
+        "quality": [2],
+        "file": [4],
+        "max": [2],
+        "flipText": [1, "flip-text"],
+        "flashText": [1, "flash-text"],
+        "ratioText": [1, "ratio-text"],
+        "confirmIcon": [1, "confirm-icon"],
+        "confirmText": [1, "confirm-text"],
+        "ratios": [16],
+        "zooms": [16],
+        "ratioIndex": [32],
+        "flash": [32],
+        "zoomIndex": [32],
+        "pictures": [32],
+        "showImageViewer": [32],
+        "imageViewerIndex": [32],
+        "flipCamera": [64],
+        "toggleFlash": [64],
+        "flashOff": [64],
+        "flashOn": [64],
+        "ratioChange": [64],
+        "setZoom": [64],
+        "takePhoto": [64]
+    }]);
+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"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cty-camera":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Camera);
+            }
+            break;
+        case "cty-backdrop":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "cty-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "cty-image-viewer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "cty-nav-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "cty-swiper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "ion-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ion-buttons":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ion-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ion-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ion-ripple-effect":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ion-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ion-toolbar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { Camera as C, defineCustomElement as d };

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: '25a8155fbda44dffe92d58a6ce34253d36481adb', class: "cty-circle" }, h("svg", { key: '9b53f827d3812b92052050c8da080ff8d3e9a3b5', ref: el => (this.svgEl = el) }, this.needDefs && h("defs", { key: '02ba5996f2693237a8954a29646f93ab8d585af0' }, h("linearGradient", { key: '246a917c3641fe2339a665b7092917277ea47c80', id: this.gradientId, x1: "100%", y1: "0%", x2: "0%", y2: "0%", gradientTransform: "rotate(90)" }, this.colors.map(() => (h("stop", null))))), h("path", { key: '9aeab6b39754436fcfbc5b2a03e02a58751ce720', ref: el => (this.layerEl = el), class: "cty-circle__layer", style: {
+        return (h(Host, { key: '78f93955dda55128bc6d86c70ddee8adea4526c3', class: "cty-circle" }, h("svg", { key: 'f7713a2508e09344242bbb87e2031f43ff140805', ref: el => (this.svgEl = el) }, this.needDefs && h("defs", { key: '8bbbb8403b58a971fc162bf2b96012c38be02137' }, h("linearGradient", { key: 'ad3cdaa775fab5e6c702e31e7c950d2ef048a6cd', id: this.gradientId, x1: "100%", y1: "0%", x2: "0%", y2: "0%", gradientTransform: "rotate(90)" }, this.colors.map(() => (h("stop", null))))), h("path", { key: 'bc8b1c5d51f2596f208768379ac964c4c94e6d44', 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: '0e6be85b769a7570b9b82974682cd041b987ce22', ref: el => (this.hoverEl = el), class: "cty-circle__hover", style: {
+            } }), h("path", { key: 'd9dd38b01745838904c8a7902912dde90ea1ecad', 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: 'ac7e0497eb016c333e2881f2b090882c3f2aeb2f', class: "cty-circle__text" }, this.text), h("slot", { key: '7a5dfbc56e0c226356aded08854b00ebc3f719de' })));
+            } })), this.text !== '' && h("div", { key: '0c7e160c0bbb20bc9e840c7e64117d1e52d621a3', class: "cty-circle__text" }, this.text), h("slot", { key: 'f6d1356d6242546c2d2d69139be0fab8873b6fb6' })));
     }
     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: 'abb49182ad0b15def9653316fadf35d068c3aa76', 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: '8856f5ad0891c78697deaf81fb486fa1ae02c84e', name: "header" }), h("div", { key: '37d34a782fa47474e3aa58c897936f2e308da2e1', class: "cty-crop-image__wrapper", ref: el => (this.imageEl = el) }, h("img", { key: '669754ac8c44912f581e78dd6d1d0c0b6b55d091', src: this.url, class: "cty-crop-image__image" })), h("div", { key: 'ecb26fa317936a2901d43a2d909556db9e65c9ed', class: "cty-crop-image__clip", ref: el => (this.clipEl = el) }), h("slot", { key: 'd7529d1cb382a82437b07c042426aa01a80496a7', name: "clip" }), this.renderButtons(), h("slot", { key: 'd18b21af179a140009106cee5952ffa37337664e', name: "footer" })));
+        return (h(Host, { key: 'fc4fe46a6c28e991a45c8540f56849088a2b5490', 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: '17958355b49b4770f62cf935222d72811f0ceb17', name: "header" }), h("div", { key: 'ed26fe3384f2888d0de52d6bda9cb2a21ae1b667', class: "cty-crop-image__wrapper", ref: el => (this.imageEl = el) }, h("img", { key: '7c379401f0e909dabd984f975b0f8cc857eccd57', src: this.url, class: "cty-crop-image__image" })), h("div", { key: 'cad519b1090e34a69792c2c9fcc88bcd6b1902e0', class: "cty-crop-image__clip", ref: el => (this.clipEl = el) }), h("slot", { key: 'f6658900f90707743be1833c579c2e88098f6287', name: "clip" }), this.renderButtons(), h("slot", { key: '056d667b641a04beffd1682a6f7a9a8b348e04a9', name: "footer" })));
     }
     get el() { return this; }
     static get style() { return cropImageCss; }

package/components/cty-camera-photo.js

@@ -4,12 +4,22 @@ import { d as deviceInfo, c as checkAppPermission } from './device-info.js';
 import { e as createDelegateController, f as createTriggerController, p as prepareOverlay, g as removeBodyScrollClass, h as present, j as dismiss, k as eventMethod } from './overlays.js';
 import { c as createLockController, g as getClassMap, e as enterAnimation, l as leaveAnimation } from './theme.js';
 import { r as raf } from './helpers.js';
-import { d as defineCustomElement$7 } from './action-sheet.js';
-import { d as defineCustomElement$6 } from './backdrop.js';
-import { d as defineCustomElement$5 } from './crop-image.js';
-import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './permission-purpose.js';
-import { d as defineCustomElement$2 } from './icon2.js';
+import { d as defineCustomElement$h } from './action-sheet.js';
+import { d as defineCustomElement$g } from './backdrop.js';
+import { d as defineCustomElement$f } from './camera.js';
+import { d as defineCustomElement$e } from './crop-image.js';
+import { d as defineCustomElement$d } from './icon.js';
+import { d as defineCustomElement$c } from './image-viewer.js';
+import { d as defineCustomElement$b } from './nav-bar.js';
+import { d as defineCustomElement$a } from './permission-purpose.js';
+import { d as defineCustomElement$9 } from './swiper.js';
+import { d as defineCustomElement$8 } from './button.js';
+import { d as defineCustomElement$7 } from './buttons.js';
+import { d as defineCustomElement$6 } from './header.js';
+import { d as defineCustomElement$5 } from './icon2.js';
+import { d as defineCustomElement$4 } from './ripple-effect.js';
+import { d as defineCustomElement$3 } from './title.js';
+import { d as defineCustomElement$2 } from './toolbar.js';
 
 const cameraPhotoCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}p,h1,h2,h3,h4,h5,h6{margin:0;padding:0}.cty-pos-rel{position:relative}.cty-pos-abs{position:absolute}.cty-pos-fix{position:fixed}.cty-pos-sti{position:-webkit-sticky;position:sticky}.cty-pos-cover{position:absolute;top:0;bottom:0;left:0;right:0}.cty-pos-l-t{position:absolute;left:0;top:0}.cty-pos-l-b{position:absolute;left:0;bottom:0}.cty-pos-r-t{position:absolute;right:0;top:0}.cty-pos-r-b{position:absolute;right:0;bottom:0}.cty-pos-100{position:absolute;left:0;top:0;width:100%;height:100%}.cty-pos-w100{position:absolute;left:0;width:100%}.cty-pos-h100{position:absolute;top:0;height:100%}.cty-pos-c{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.cty-pos-c-x{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.cty-pos-c-x-t{position:absolute;top:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.cty-pos-c-x-b{position:absolute;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.cty-pos-c-y{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.cty-pos-c-y-l{position:absolute;left:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.cty-pos-c-y-r{position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}:host{--cty-camera-photo-overlay-position:fixed;--cty-camera-photo-overlay-z-index:10;--cty-camera-photo-overlay-background:var(--cty-overlay-color);--cty-camera-photo-overlay-width:100vw;--cty-camera-photo-overlay-height:100vh;--cty-camera-photo-padding:0;--cty-camera-photo-border-radius:0;--cty-camera-photo-title-color:var(--cty-text-color-primary);--cty-camera-photo-title-size:var(--cty-font-size-medium);--cty-camera-photo-title-line-height:36px;--cty-camera-photo-title-weight:500;--cty-camera-photo-title-align:center;--cty-camera-photo-close-top:10px;--cty-camera-photo-close-right:10px;--cty-camera-photo-close-color:var(--cty-text-color-secondary);--cty-camera-photo-close-size:20px;--cty-camera-photo-option-padding-bottom:14px;--cty-camera-photo-option-padding-top:14px;--cty-camera-photo-option-text-align:center;--cty-camera-photo-option-text-color:var(--cty-text-color-primary);--cty-camera-photo-option-text-size:var(--cty-font-size-medium);--cty-camera-photo-option-text-line-height:22px;--cty-camera-photo-cancel-background:var(--cty-color-white);--cty-camera-photo-cancel-padding-top:0;--cty-camera-photo-cancel-padding-bottom:0;--cty-camera-photo-cancel-border:8px solid var(--cty-border-color-extra-light);--cty-camera-photo-cancel-color:var(--cty-text-color-primary);--cty-camera-photo-cancel-min-height:48px;--cty-camera-photo-cancel-size:var(--cty-font-size-medium);--cty-camera-photo-crop-width:100vw;--cty-camera-photo-crop-height:100vh;--cty-camera-photo-crop-background:var(--cty-color-black);--cty-camera-photo-crop-clip-height:100vw;--cty-camera-photo-crop-clip-width:100vw;--cty-camera-photo-crop-clip-background:var(--cty-overlay-color-dark);--cty-camera-photo-crop-clip-border:1px solid #767676;--cty-camera-photo-crop-buttons-padding:12px 0;--cty-camera-photo-crop-button-padding:0 12px;--cty-camera-photo-crop-button-color:var(--cty-text-color-white);--cty-camera-photo-crop-button-active-color:var(--cty-text-color-white);--cty-camera-photo-crop-button-size:var(--cty-font-size-base);--cty-camera-photo-crop-button-line-height:30px;--cty-camera-photo-crop-button-weight:400;--cty-camera-photo-crop-overlay-background:var(--cty-overlay-color);--cty-camera-photo-crop-overlay-z-index:999999;--cty-camera-photo-permission-purpose-overlay-background:transparent;--cty-camera-photo-permission-purpose-overlay-height:auto;--cty-camera-photo-permission-purpose-overlay-z-index:999999}:host(.overlay-hidden){display:none}cty-action-sheet{--cty-action-sheet-overlay-position:var(--cty-camera-photo-overlay-position);--cty-action-sheet-overlay-z-index:var(--cty-camera-photo-overlay-z-index);--cty-action-sheet-overlay-width:var(--cty-camera-photo-overlay-width);--cty-action-sheet-overlay-height:var(--cty-camera-photo-overlay-height);--cty-action-sheet-overlay-background:var(--cty-camera-photo-overlay-background);--cty-action-sheet-padding:var(--cty-camera-photo-padding);--cty-action-sheet-border-radius:var(--cty-camera-photo-border-radius);--cty-action-sheet-title-color:var(--cty-camera-photo-title-color);--cty-action-sheet-title-size:var(--cty-camera-photo-title-size);--cty-action-sheet-title-line-height:var(--cty-camera-photo-title-line-height);--cty-action-sheet-title-weight:var(--cty-camera-photo-title-weight);--cty-action-sheet-title-align:var(--cty-camera-photo-title-align);--cty-action-sheet-close-top:var(--cty-action-sheet-close-top);--cty-action-sheet-close-right:var(--cty-action-sheet-close-right);--cty-action-sheet-close-color:var(--cty-action-sheet-close-color);--cty-action-sheet-close-size:var(--cty-action-sheet-close-size);--cty-action-sheet-option-padding-bottom:var(--cty-camera-photo-option-padding-bottom);--cty-action-sheet-option-padding-top:var(--cty-camera-photo-option-padding-top);--cty-action-sheet-option-text-align:var(--cty-camera-photo-option-text-align);--cty-action-sheet-option-text-color:var(--cty-camera-photo-option-text-color);--cty-action-sheet-option-text-size:var(--cty-camera-photo-option-text-size);--cty-action-sheet-option-text-line-height:var(--cty-camera-photo-option-text-line-height);--cty-action-sheet-cancel-background:var(--cty-camera-photo-cancel-background);--cty-action-sheet-cancel-padding-top:var(--cty-camera-photo-cancel-padding-top);--cty-action-sheet-cancel-padding-bottom:var(--cty-camera-photo-cancel-padding-bottom);--cty-action-sheet-cancel-border:var(--cty-camera-photo-cancel-border);--cty-action-sheet-cancel-color:var(--cty-camera-photo-cancel-color);--cty-action-sheet-cancel-min-height:var(--cty-camera-photo-cancel-min-height);--cty-action-sheet-cancel-size:var(--cty-camera-photo-cancel-size)}cty-backdrop{z-index:var(--cty-camera-photo-crop-overlay-z-index);background:var(--cty-camera-photo-crop-overlay-background)}cty-crop-image{background:var(--cty-camera-photo-crop-background);width:var(--cty-camera-photo-crop-width);height:var(--cty-camera-photo-crop-height);--cty-crop-image-clip-width:var(--cty-camera-photo-crop-clip-width);--cty-crop-image-clip-height:var(--cty-camera-photo-crop-clip-height);--cty-crop-image-clip-background:var(--cty-camera-photo-crop-clip-background);--cty-crop-image-clip-border:var(--cty-camera-photo-crop-clip-border);--cty-crop-image-buttons-padding:var(--cty-camera-photo-crop-buttons-padding);--cty-crop-image-button-padding:var(--cty-camera-photo-crop-button-padding);--cty-crop-image-button-color:var(--cty-camera-photo-crop-button-color);--cty-crop-image-button-active-color:var(--cty-camera-photo-crop-button-active-color);--cty-crop-image-button-size:var(--cty-camera-photo-crop-button-size);--cty-crop-image-button-line-height:var(--cty-camera-photo-crop-button-line-height);--cty-crop-image-button-weight:var(--cty-camera-photo-crop-overlay-weight)}cty-permission-purpose{--cty-permission-purpose-overlay-background:var(--cty-camera-photo-permission-purpose-overlay-background);--cty-permission-purpose-overlay-height:var(--cty-camera-photo-permission-purpose-overlay-height);--cty-permission-purpose-overlay-z-index:var(--cty-camera-photo-permission-purpose-overlay-z-index)}";
 
@@ -64,6 +74,8 @@ const CameraPhoto = /*@__PURE__*/ proxyCustomElement(class CameraPhoto extends H
         this.root = 'default';
         this.animated = false;
         this.overlay = true;
+        this.continuous = true;
+        this.cameraProps = {};
         this.isMicroMessager = deviceInfo.isMicroMessager;
         this.isIOS = deviceInfo.isIos;
         this.allowEdit = false;
@@ -72,6 +84,7 @@ const CameraPhoto = /*@__PURE__*/ proxyCustomElement(class CameraPhoto extends H
         this.imageSource = { option: { action: '' }, imageList: [], index: 0 };
         this.showPermissionPurpose = false;
         this.permissionDescription = '';
+        this.showCameraPreview = false;
     }
     triggerChanged() {
         const { trigger, el, triggerController } = this;
@@ -127,6 +140,11 @@ const CameraPhoto = /*@__PURE__*/ proxyCustomElement(class CameraPhoto extends H
         if (!this.isIOS && !this.isMicroMessager) {
             await this.checkPermission(option.action || '', (option.permissionDescription || ''));
         }
+        if (this.continuous && !this.isMicroMessager && option.action === 'camera') {
+            this.showCameraPreview = true;
+            this.imageSource = { option, imageList: [], index };
+            return;
+        }
         let imageList = [];
         try {
             const pictureOption = {
@@ -150,6 +168,13 @@ const CameraPhoto = /*@__PURE__*/ proxyCustomElement(class CameraPhoto extends H
         option.handler && option.handler({ option, imageList });
         this.ctyTap.emit({ index, imageList });
     }
+    continuousConfirm(event) {
+        const imageList = event.detail;
+        const { option, index } = this.imageSource;
+        option.handler && option.handler({ option, imageList });
+        this.ctyTap.emit({ index, imageList });
+        this.showCameraPreview = false;
+    }
     checkPermission(action, description) {
         return Promise.resolve()
             .then(async () => {
@@ -192,7 +217,7 @@ const CameraPhoto = /*@__PURE__*/ proxyCustomElement(class CameraPhoto extends H
         this.ctyTap.emit({ index, imageList });
     }
     render() {
-        return (h(Host, { key: 'bf664a9c7a1a47f86e1e5efc94edce7b3897ca46', class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'cty-pos-cover': this.overlay }), style: { zIndex: `${20000 + this.overlayIndex}` } }, h("cty-action-sheet", { key: '6baf98701e79eead40a3f20f1deac5178d13563b', class: "cty-camera-photo", animated: false, overlayIndex: 1, backdropDismiss: this.backdropDismiss, title: this.title, closeable: this.closeable, closeIcon: this.closeIcon, cancelText: this.cancelText, options: this.options, onCtyDismiss: () => this.dismiss(), onCtyTap: e => this._buttonClick(e) }), this.showCropImage && (h("cty-backdrop", { key: '81456ac1e2f369d2d0564d7933776f26ba6f6e0d', backdropDismiss: false }, h("cty-crop-image", { key: 'e742d3caae19b9ee3c43a47c200a6768efb125ef', url: this.clipImage, cancelText: this.clipCancelText, confirmText: this.clipCconfirmText, imageWidth: this.clipImageWidth, imageBackground: this.clipImageBg, maxScale: this.clipMaxScale, minScale: this.clipMinScale, suffix: this.clipImageSuffix, quality: this.clipImageQuality, onCtyCancel: () => this._doCropCancel(), onCtyConfirm: (e) => this._doCropConfirm(e) }))), this.showPermissionPurpose && h("cty-permission-purpose", { key: '67c53ea351b7ec13edf5a47ef4aab5b28b275b3d', description: this.permissionDescription })));
+        return (h(Host, { key: '31073f340d92a311012b13038b4da8f032d02110', class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'cty-pos-cover': this.overlay }), style: { zIndex: `${20000 + this.overlayIndex}` } }, h("cty-action-sheet", { key: 'b2024c1901d022dae2b6b2b29a52a619e1722985', class: "cty-camera-photo", animated: false, overlayIndex: 1, backdropDismiss: this.backdropDismiss, title: this.title, closeable: this.closeable, closeIcon: this.closeIcon, cancelText: this.cancelText, options: this.options, onCtyDismiss: () => this.dismiss(), onCtyTap: e => this._buttonClick(e) }), this.showCropImage && (h("cty-backdrop", { key: '3af232599f3761030cda24aa470aa5f047dbf237', backdropDismiss: false }, h("cty-crop-image", { key: '1ad7efd36587e8fbc5488c5e55b5cfc7e534d87f', url: this.clipImage, cancelText: this.clipCancelText, confirmText: this.clipCconfirmText, imageWidth: this.clipImageWidth, imageBackground: this.clipImageBg, maxScale: this.clipMaxScale, minScale: this.clipMinScale, suffix: this.clipImageSuffix, quality: this.clipImageQuality, onCtyCancel: () => this._doCropCancel(), onCtyConfirm: (e) => this._doCropConfirm(e) }))), this.showPermissionPurpose && h("cty-permission-purpose", { key: '2e49b980d0e7adfadf29cb37a584576227f7c35d', description: this.permissionDescription }), this.continuous && this.showCameraPreview && h("cty-camera", Object.assign({ key: 'e41a4f8e567136d9a2bc13ad32b6ef9fc32a3d1a' }, this.cameraProps, { onCtyDismiss: () => this.showCameraPreview = false, onCtyConfirm: (e) => this.continuousConfirm(e) }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -228,11 +253,14 @@ const CameraPhoto = /*@__PURE__*/ proxyCustomElement(class CameraPhoto extends H
         "cssClass": [1, "css-class"],
         "leaveAnimation": [16, "leave-animation"],
         "enterAnimation": [16, "enter-animation"],
+        "continuous": [4],
+        "cameraProps": [16, "camera-props"],
         "trigger": [1],
         "showCropImage": [32],
         "clipImage": [32],
         "showPermissionPurpose": [32],
         "permissionDescription": [32],
+        "showCameraPreview": [32],
         "present": [64],
         "dismiss": [64],
         "onDidDismiss": [64],
@@ -244,7 +272,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["cty-camera-photo", "cty-action-sheet", "cty-backdrop", "cty-crop-image", "cty-icon", "cty-permission-purpose", "ion-icon"];
+    const components = ["cty-camera-photo", "cty-action-sheet", "cty-backdrop", "cty-camera", "cty-crop-image", "cty-icon", "cty-image-viewer", "cty-nav-bar", "cty-permission-purpose", "cty-swiper", "ion-button", "ion-buttons", "ion-header", "ion-icon", "ion-ripple-effect", "ion-title", "ion-toolbar"];
     components.forEach(tagName => { switch (tagName) {
         case "cty-camera-photo":
             if (!customElements.get(tagName)) {
@@ -253,30 +281,80 @@ function defineCustomElement$1() {
             break;
         case "cty-action-sheet":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$h();
             }
             break;
         case "cty-backdrop":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$g();
+            }
+            break;
+        case "cty-camera":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
             }
             break;
         case "cty-crop-image":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$e();
             }
             break;
         case "cty-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$d();
+            }
+            break;
+        case "cty-image-viewer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "cty-nav-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
             }
             break;
         case "cty-permission-purpose":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$a();
+            }
+            break;
+        case "cty-swiper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "ion-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "ion-buttons":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ion-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
             }
             break;
         case "ion-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ion-ripple-effect":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ion-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ion-toolbar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/components/cty-camera.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface CtyCamera extends Components.CtyCamera, HTMLElement {}
+export const CtyCamera: {
+    prototype: CtyCamera;
+    new (): CtyCamera;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/cty-camera.js

@@ -0,0 +1,6 @@
+import { C as Camera, d as defineCustomElement$1 } from './camera.js';
+
+const CtyCamera = Camera;
+const defineCustomElement = defineCustomElement$1;
+
+export { CtyCamera, defineCustomElement };

package/components/cty-canvas-board.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getElementRect, b as getEventPageCoords } from './dom.js';
-import { d as colorPaletteOutline, t as trashOutline, e as arrowUndoCircleOutline, f as arrowRedoCircleOutline, p as pencilOutline } from './index2.js';
+import { e as colorPaletteOutline, t as trashOutline, f as arrowUndoCircleOutline, g as arrowRedoCircleOutline, p as pencilOutline } from './index2.js';
 import { r as raf } from './helpers.js';
 import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './icon2.js';
@@ -207,7 +207,7 @@ const CanvasBoard = /*@__PURE__*/ proxyCustomElement(class CanvasBoard extends H
             } }, h("i", { style: { width: item * 2 + 'px', height: item * 2 + 'px' } }))))), h("div", { class: "cty-canvas-board__line-alpha", onClick: e => e.stopPropagation() }, h("div", { class: "cty-canvas-board__line-alpha-bg" }), 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 (h(Host, { key: 'ce82017d153b7e762b038e5cc36d028c28828d8f', class: "cty-canvas-board flex-column" }, h("slot", { key: 'fca9bc1c16ad41e2947d7679103d44ff47dee9a5', name: "header" }), this.headerOpn && (h("div", { key: '0cf16d03f30e7aec5de2e7cbcea21608e1c3b948', class: "cty-canvas-board__header flex-center-between" }, h("slot", { key: '64b5d3c0cce75bc4fa5e706bf3d44bf0c0a6d2cb', name: "header-start" }), this.bgIcon && h("button", { key: 'd7d5ddc5fae242d8a027194faece3a3ae2df25af', class: "cty-button-native", onClick: () => this.updateBgColor() }, h("cty-icon", { key: '6ee9bfbce32eff7c49e6686fb0785eac540309b6', name: this.bgIcon, class: "cty-canvas-board__palette" }), h("input", { key: '09c41122b91976a535e73bcb5d3fa30cd51decb5', type: "color", class: "cty-canvas-board__picker-color", ref: el => (this.bgPickerEl = el), value: this.bgColor, onInput: (e) => this.bgColorChange(e) })), h("slot", { key: 'fed2834682eee861b7020658eea21730943941bd', name: "header-opn-start" }, " "), (this.undoIcon || this.redoIcon) && h("div", { key: '6eac4cd2b6b037e65fc34a74ebd22ecaeba8caf4', class: "cty-canvas-board__opn flex-center" }, this.undoIcon && h("button", { key: 'dc1ba486246445072cf317c69d7a3579014b96e6', class: "cty-button-native cty-canvas-board__opn-icon", onClick: () => this.undo() }, h("cty-icon", { key: '0569b1f1d208034c604476cac35f9c4ad47bcbd1', name: this.undoIcon, class: { 'cty-canvas-board__opn-active': this.drawingHistory.length > 1 && this.step > 0 } })), this.redoIcon && h("button", { key: 'aef37883c067a542f823fc23ac7137f07f546818', class: "cty-button-native cty-canvas-board__opn-icon", onClick: () => this.redo() }, h("cty-icon", { key: 'f585895dbbdb1ebf452e89171ce8af3280e2c0f7', name: this.redoIcon, class: { 'cty-canvas-board__opn-active': this.step < this.drawingHistory.length - 1 } }))), h("slot", { key: '8ae23590d119c706a646b30a1dd30b3553f9436a', name: "header-opn-end" }), this.clearIcon && h("button", { key: 'e2e6966cf267a2728e19dac7e7f6308c4f78a686', class: "cty-button-native cty-canvas-board__clear", onClick: () => this.clear() }, h("cty-icon", { key: '5dfb19a53b984afb5b2d221e14ff8ba3e3bfb760', name: this.clearIcon })), h("slot", { key: 'bfcf6155e781306c855bbd3526892dd87d9e6a01', name: "header-end" }))), h("slot", { key: 'fc5399b470cb12ed9057e36acc09861eba42a578', name: "main" }), h("div", { key: 'd6d481d523a22516c5d76932485429760fea8664', class: "cty-canvas-board__main" }, h("canvas", { key: '6b58400fadd5b79355ad9e1f1926ffd08a033cc9', 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) }), h("canvas", { key: 'f3a831a7e66f3ed141a84255063bc71b04dd0055', ref: el => (this.imageCanvasEl = el), style: { display: 'none' } }), h("span", { key: '9789767464993ac81f4e3952db9eb58fbc445e3f', class: "cty-canvas-board__eraser-circle", ref: el => (this.eraserEl = el) }), this.isCanvasEmpty && h("slot", { key: 'f1082afe440d973dd0c4072ddd22b44cd3ba9ce4', name: "placeholder" }), h("slot", { key: 'ac3cb52a7927cbdd4580902660e5e19a210bf2ae' })), h("slot", { key: '2bdf964fb18cdbc34944c30f52c97f7ece3957b2', name: "footer" }), this.footerOpn && (h("div", { key: 'fc959589eac92b747e9e60989417e12cc2dbc7ce', class: "cty-canvas-board__footer flex-center" }, h("slot", { key: '5f6e1573b63cf89c7e6dcce190c6f7b647c0b7fb', name: "footer-start" }), this.pencilIcon && (h("button", { key: '9670ef1c5bd50cb1ef184050ced8ed92af1fb7c0', class: "cty-button-native cty-canvas-board__pen", onClick: e => this.updatePencil(e) }, h("cty-icon", { key: 'bf08a1711ad10e00a50ecff6b21409f00239c313', name: this.pencilIcon, class: { 'cty-canvas-board__footer-active': !this.isEraser } }))), h("button", { key: '3afabb724791f400d0a223e0bdfc87234e766bac', class: "cty-button-native cty-canvas-board__eraser", onClick: () => (this.isEraser = !this.isEraser) }, h("cty-icon", { key: '3cca9e7471a8dfacc6be0ca163e50a715c0d51a2', name: this.eraserIcon, class: { 'cty-canvas-board__footer-active': this.isEraser } })), h("button", { key: '64dadf48552769ad2e684436df6b123f00cf317b', class: "cty-button-native cty-canvas-board__color-button", onClick: () => this.updateColor() }, h("input", { key: '967453af3785b55ea2f6286e133a3ab69885b028', type: "color", value: this.strokeColor, class: "cty-canvas-board__picker-color", ref: el => (this.colorPickerEl = el), onInput: (e) => this.penColorChange(e) })), h("slot", { key: '8fe439a6726fd0f09f779d44d099c348486467fb', name: "footer-end" }))), h("slot", { key: '7192187ede22a5967f40ba651c3b4440c9e84ddd', name: "bottom" }), this.showButtons && (h("div", { key: 'f6931945fd1794cf56e50296520f6f6acc726716', class: "cty-canvas-board__buttons flex-justify-end" }, h("slot", { key: '68b9f1f78c2bcf1b2adae43e564d1bcdfd09beb3', name: "bottom-button-start" }), h("button", { key: '9a0c3285fb6ea020ccf66c0004530b77320b53ff', class: "cty-canvas-board__button cty-button-native", onClick: () => this.clear() }, this.clearLabel), h("button", { key: 'a65d042208074defffa6805938e7082aa1b976d3', class: "cty-canvas-board__button cty-button-native", onClick: () => this.confirm() }, this.confirmLabel), h("slot", { key: '6aa7bb862a673b73683040e524fec6a816259bc6', name: "bottom-button-end" }))), this.renderPopover()));
+        return (h(Host, { key: 'cacd461482de2b1a3afd6da14390f30996c6bc90', class: "cty-canvas-board flex-column" }, h("slot", { key: '059dd241be62e1da2029b4c254dcadcc0360eba6', name: "header" }), this.headerOpn && (h("div", { key: 'd96a63de3838a94c11f1ed7c0f01d0a3c58c123e', class: "cty-canvas-board__header flex-center-between" }, h("slot", { key: 'f94b0a6e2c3b41583e606c1317130043035135bb', name: "header-start" }), this.bgIcon && h("button", { key: '62f1e751b0b0a23e21003ebd2a075dbd7d540482', class: "cty-button-native", onClick: () => this.updateBgColor() }, h("cty-icon", { key: '45ecfbef0b9655bbe9b86a8a1eafb6119d97f405', name: this.bgIcon, class: "cty-canvas-board__palette" }), h("input", { key: '2418c21671347e6935e83237d8705521a6eb872b', type: "color", class: "cty-canvas-board__picker-color", ref: el => (this.bgPickerEl = el), value: this.bgColor, onInput: (e) => this.bgColorChange(e) })), h("slot", { key: 'f7db11bcec8cdab667f1923bfdbfa3828f5161ac', name: "header-opn-start" }, " "), (this.undoIcon || this.redoIcon) && h("div", { key: 'a757b86bdafcb881c4b5be13c380dd4a41bb0c6a', class: "cty-canvas-board__opn flex-center" }, this.undoIcon && h("button", { key: '393c70a70e866c227e79ae9764d0e5df99c0bd8b', class: "cty-button-native cty-canvas-board__opn-icon", onClick: () => this.undo() }, h("cty-icon", { key: 'bd2e0b3413abc3b4cd9dde5f8bcb82b7265b339b', name: this.undoIcon, class: { 'cty-canvas-board__opn-active': this.drawingHistory.length > 1 && this.step > 0 } })), this.redoIcon && h("button", { key: 'e2d9e8a9e2de3e67b2be7398740178ddf605b4e9', class: "cty-button-native cty-canvas-board__opn-icon", onClick: () => this.redo() }, h("cty-icon", { key: '106b0ec8e95242f200c0e8c654b05ddc237c8071', name: this.redoIcon, class: { 'cty-canvas-board__opn-active': this.step < this.drawingHistory.length - 1 } }))), h("slot", { key: '88e5cdc82a57816783333667c192a8a6ba43505f', name: "header-opn-end" }), this.clearIcon && h("button", { key: '253dd3c58a2e0b645dce4369bd55614447316f76', class: "cty-button-native cty-canvas-board__clear", onClick: () => this.clear() }, h("cty-icon", { key: '77ac7966efdd3408283eb2f24a065b2bcec8bf09', name: this.clearIcon })), h("slot", { key: '23024b1e3d2e46824fb9e6d2fc8294b1c402ae2a', name: "header-end" }))), h("slot", { key: 'cafd8f9a75bdc9a3c37fe23a6e2427c2c33d9259', name: "main" }), h("div", { key: '9e2d5c351573d284bf1b1ee7d768bdef6d899897', class: "cty-canvas-board__main" }, h("canvas", { key: '8be4aec30e6f891d3e3bbaec0a32d873a937f84c', 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) }), h("canvas", { key: '7282b7fb3857f1e7ad5e219e47307c3dc07abe1c', ref: el => (this.imageCanvasEl = el), style: { display: 'none' } }), h("span", { key: 'c26e7d9d62db6e6083216754512e9a02595e9d2a', class: "cty-canvas-board__eraser-circle", ref: el => (this.eraserEl = el) }), this.isCanvasEmpty && h("slot", { key: '28ba8463f9be877390819711584ed914156ee7f1', name: "placeholder" }), h("slot", { key: '176c7074a254f7bf34e1fda4937eea9b19b71a35' })), h("slot", { key: 'fde4b1793016374ee60b3c609e1e24933887e8e4', name: "footer" }), this.footerOpn && (h("div", { key: 'b2644e548d2ab5ac06546b9f7f746c14ed3fd597', class: "cty-canvas-board__footer flex-center" }, h("slot", { key: '922ccfc57ab20d39d66a86cfd46048f09188b42b', name: "footer-start" }), this.pencilIcon && (h("button", { key: 'ff6f0f1bdac3bb4aa15efd3f3499327f06bf9c5f', class: "cty-button-native cty-canvas-board__pen", onClick: e => this.updatePencil(e) }, h("cty-icon", { key: '7f4b47be6d0f19f099e07ae19a334b48db0c9474', name: this.pencilIcon, class: { 'cty-canvas-board__footer-active': !this.isEraser } }))), h("button", { key: '9628fd1e88b07f554921713dfddeb9befc04c2d8', class: "cty-button-native cty-canvas-board__eraser", onClick: () => (this.isEraser = !this.isEraser) }, h("cty-icon", { key: 'a1abe40b64529125b4964d50077e5d84c6094f52', name: this.eraserIcon, class: { 'cty-canvas-board__footer-active': this.isEraser } })), h("button", { key: 'e16d1f0a29bf5ad843741c55080366668516f1f2', class: "cty-button-native cty-canvas-board__color-button", onClick: () => this.updateColor() }, h("input", { key: 'de3675b2d3a0b6c6349e0449b113342073d1627e', type: "color", value: this.strokeColor, class: "cty-canvas-board__picker-color", ref: el => (this.colorPickerEl = el), onInput: (e) => this.penColorChange(e) })), h("slot", { key: '00c44423632153d5bb51db8cde4b10b65dad04d3', name: "footer-end" }))), h("slot", { key: 'af58932029caafb90bad6f623a53f3cbaa739fbd', name: "bottom" }), this.showButtons && (h("div", { key: '2057190c4fa7f2d657929e51fa1eb3a60f1bc2e5', class: "cty-canvas-board__buttons flex-justify-end" }, h("slot", { key: '271d097a4334213bd07a30c095c32cf2b627d516', name: "bottom-button-start" }), h("button", { key: '9cd72789351ceba94b2aee29306a90cd0af8b1fc', class: "cty-canvas-board__button cty-button-native", onClick: () => this.clear() }, this.clearLabel), h("button", { key: '485d77b59662ec6b044ef4f39791f5ab4d4cde08', class: "cty-canvas-board__button cty-button-native", onClick: () => this.confirm() }, this.confirmLabel), h("slot", { key: '53838fcf07aaeec1cc43dde62659b13f85b83b05', name: "bottom-button-end" }))), this.renderPopover()));
     }
     get el() { return this; }
     static get style() { return canvasBoardCss; }