cty-mui-core 1.0.30 → 1.0.32

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

@@ -0,0 +1 @@
+<svg t="1778565691795" class="cty-icon ionicon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2677"><path d="M358.9 830.9c-8.5 0-16.6-3.4-22.6-9.4L106.5 591.8c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l207.1 207.1 513.4-513.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-536 536c-6.1 6-14.3 9.4-22.7 9.4z" p-id="2678"></path></svg>

package/components/camera.js

@@ -1,6 +1,7 @@
 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 deviceInfo } from './device-info.js';
+import { d as closeOutline, e as backspaceOutline } from './index2.js';
 import { d as defineCustomElement$c } from './backdrop.js';
 import { d as defineCustomElement$b } from './icon.js';
 import { d as defineCustomElement$a } from './image-viewer.js';
@@ -14,7 +15,7 @@ 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 cameraCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}p,h1,h2,h3,h4,h5,h6{margin:0;padding:0}.flex{display:-ms-flexbox;display:flex}.flex-wrap{display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap}.flex-align-start{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.flex-align-center{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.flex-align-end{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end}.flex-justify-start{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start}.flex-justify-center{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.flex-justify-end{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.flex-align-end-start{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}.flex-align-end-center{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}.flex-align-end-end{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}.flex-center{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.flex-center-justify-end{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.flex-between{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.flex-center-between{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.flex-column{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column}.flex-column-align-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center}.flex-column-justify-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:center;justify-content:center}.flex-column-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.flex-column-between{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:justify;justify-content:space-between}.flex-column-center-between{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.cty-button-native{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin:0;padding:0;background:transparent;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;line-height:1;border:0;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;cursor:pointer}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:fixed;left:0;top:0;z-index:20099;width:100vw !important;height:100vh !important;visibility:visible !important}.cty-camera__close[class]{margin:0;min-height:var(--cty-camera-close-min-hieght, 3.1em);--background:transparent;--background-activated:transparent;--background-focused:transparent;--background-hover:transparent;--box-shadow:none;--padding-top:var(--cty-camera-close-padding-top, 3px);--padding-bottom:var(--cty-camera-close-padding-bottom, 3px);--padding-start:var(--cty-camera-close-padding-start, 6px);--padding-end:var(--cty-camera-close-padding-end, 6px);--color:var(--cty-camera-close-color, var(--cty-text-color-white))}.cty-camera__close-icon{font-size:var(--cty-camera-close-font-size, 28px)}.cty-camera-main{-ms-flex:1;flex:1;position:relative}.cty-camera-widgets{position:absolute;top:0;right:15px}.cty-camera-widget{-ms-flex-direction:column;flex-direction:column;margin-bottom:var(--cty-camera-camera-widget-offset-y, 30px);color:var(--cty-camera-camera-widget-color, #fff)}.cty-camera-widget__icon{font-size:var(--cty-camera-camera-widget-icon-size, 20px)}.cty-camera-widget__text{margin-top:var(--cty-camera-camera-widget-text-offset-y, 5px);font-size:var(--cty-camera-camera-widget-text-size, var(--cty-font-size-extra-small))}.cty-camera-widget__ratio{width:24px;height:16px;border-radius:2px;border:1px solid var(--cty-camera-camera-widget-color, #fff);font-size:10px}.cty-camera-controls{margin-top:auto}.cty-camera-controls__mode{width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:var(--cty-camera-camera-controls-mode-padding, 2px);margin:var(--cty-camera-camera-controls-mode-offset, 0 auto 15px);background:var(--cty-camera-camera-controls-mode-bg, rgba(0, 0, 0, 0.5));border-radius:var(--cty-camera-camera-controls-mode-radius, 3px);color:var(--cty-camera-camera-controls-mode-color, #fff)}.cty-camera-controls__mode-button{padding:var(--cty-camera-camera-controls-mode-button-padding, 3px 5px);border-radius:var(--cty-camera-camera-controls-mode-button-radius, 3px);font-size:var(--cty-camera-camera-controls-mode-button-font-szie, var(--cty-font-size-extra-small))}.cty-camera-controls__mode-button__active{background:var(--cty-camera-camera-controls-mode-button-active-bg, #fff);color:var(--cty-camera-camera-controls-mode-button-active-color, #000)}.cty-camera-controls__zooms{margin:var(--cty-camera-camera-controls-zooms-offset, 0 0 15px)}.cty-camera-controls__zoom-item{width:var(--cty-camera-camera-controls-zoom-active-size, 28px);height:var(--cty-camera-camera-controls-zoom-active-size, 28px);border-radius:50%}.cty-camera-controls__zoom-item:not(:last-child){margin-right:var(--cty-camera-camera-controls-zoom-offset, 10px)}.cty-camera-controls__zoom-item__active{border:var(--cty-camera-camera-controls-zoom-active-border, 1px solid #fff)}.cty-camera-controls__zoom-item__active .cty-camera-controls__zoom-text{background:var(--cty-camera-camera-controls-zoom-active-bg, transparent)}.cty-camera-controls__zoom-text{width:var(--cty-camera-camera-controls-zoom-size, 24px);height:var(--cty-camera-camera-controls-zoom-size, 24px);background:var(--cty-camera-camera-controls-zoom-bg, rgba(0, 0, 0, 0.3));border-radius:50%;color:var(--cty-camera-camera-controls-color, #fff);font-size:var(--cty-camera-camera-controls-zoom-font-size, 10px);font-weight:var(--cty-camera-camera-controls-zoom-font-weight, 600)}.cty-camera-controls__main{margin:var(--cty-camera-camera-controls-take-photo-offset, 0 0 15px)}.cty-camera-controls__take-photo{width:var(--cty-camera-camera-controls-take-photo-size, 60px);height:var(--cty-camera-camera-controls-take-photo-size, 60px);border-radius:50%;border:var(--cty-camera-camera-controls-take-photo-border, 2px solid #fff)}.cty-camera-controls__take-photo-button{width:var(--cty-camera-camera-controls-take-photo-button-size, 48px);height:var(--cty-camera-camera-controls-take-photo-button-size, 48px);border-radius:50%;background:var(--cty-camera-camera-controls-color, #fff)}.cty-camera-controls__take-photo-button:active{-webkit-transform:scale(0.9);transform:scale(0.9);-webkit-transition:-webkit-transform 0.05s cubic-bezier(0.2, 0.9, 0.4, 1.1);transition:-webkit-transform 0.05s cubic-bezier(0.2, 0.9, 0.4, 1.1);transition:transform 0.05s cubic-bezier(0.2, 0.9, 0.4, 1.1);transition:transform 0.05s cubic-bezier(0.2, 0.9, 0.4, 1.1), -webkit-transform 0.05s cubic-bezier(0.2, 0.9, 0.4, 1.1);-webkit-box-shadow:0 3px 8px rgba(0, 0, 0, 0.2);box-shadow:0 3px 8px rgba(0, 0, 0, 0.2);-webkit-filter:brightness(0.96);filter:brightness(0.96)}.cty-camera-controls__main-left,.cty-camera-controls__main-confirm{-ms-flex:1;flex:1}.cty-camera-controls__main-confirm-icon{font-size:var(--cty-camera-camera-controls-confirm-icon-size, 24px);color:var(--cty-camera-camera-controls-confirm-icon-color, var(--cty-color-danger))}.cty-camera-controls__main-confirm-text{margin-top:var(--cty-camera-camera-controls-confirm-text-offset, 5px);font-size:var(--cty-camera-camera-controls-confirm-text-size, 12px);color:var(--cty-camera-camera-controls-confirm-text-color, #fff)}.cty-camera-controls__main-delete{margin-right:var(--cty-camera-camera-controls-delete-offser, 30px)}.cty-camera-controls__main-delete-icon{font-size:var(--cty-camera-camera-controls-delete-icon-size, 20px);color:var(--cty-camera-camera-controls-delete-icon-color, #fff)}.cty-camera-controls__images{overflow-x:auto;width:100%;min-height:var(--cty-camera-camera-controls-images-min-height, 84px);padding:var(--cty-camera-camera-controls-images-padding, 0 15px);margin:var(--cty-camera-camera-controls-images-offset, 15px 0)}.cty-camera-controls__image{-ms-flex:none;flex:none;position:relative;width:var(--cty-camera-camera-controls-image-size, 54px);height:var(--cty-camera-camera-controls-image-size, 54px)}.cty-camera-controls__image:not(:last-child){margin-right:var(--cty-camera-camera-controls-image-offset, 10px)}.cty-camera-controls__image-img{display:block;width:100%;height:100%;border-radius:var(--cty-camera-camera-controls-image-border-radius, 8px);-o-object-fit:var(--cty-camera-camera-controls-image-object-fit, cover);object-fit:var(--cty-camera-camera-controls-image-object-fit, cover)}.cty-camera-controls__image-delete{position:absolute;top:0;right:0;width:var(--cty-camera-camera-controls-image-delete-size, 20px);height:var(--cty-camera-camera-controls-image-delete-size, 20px);background:var(--cty-camera-camera-controls-image-delete-bg, rgba(0, 0, 0, 0.5));border-radius:var(--cty-camera-camera-controls-image-delete-border-radius, 0 8px);color:var(--cty-camera-camera-controls-image-delete-color, #fff);font-size:var(--cty-camera-camera-controls-image-delete-font-size, 18px)}.cty-camera-viewer__single{min-height:var(--cty-camera-viewer-single-min-height, 44px);padding:var(--cty-camera-viewer-single-padding, 0 15px)}.cty-camera-viewer__single-close,.cty-camera-viewer__single-confirm{font-size:var(--cty-image-viewer-single-close-size, 20px);color:var(--cty-image-viewer-single-close-color, #fff)}";
 
 const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement {
     constructor() {
@@ -24,16 +25,11 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
         this.ctyDismiss = createEvent(this, "ctyDismiss", 7);
         this.ctyTakePhoto = createEvent(this, "ctyTakePhoto", 7);
         this.ctyConfirm = createEvent(this, "ctyConfirm", 7);
-        /**
-         * 自定义限定数量
-         * 支持删除最后一张图片（需要开关控制是否显示）
-         * 翻转、闪光和比例支持开关控制
-         *
-         */
         this.safeArea = 44;
         this.title = '';
         this.options = {};
         this.closeIcon = closeOutline;
+        this.deleteIcon = backspaceOutline;
         this.width = 0;
         this.height = 0;
         this.quality = 85;
@@ -44,25 +40,29 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
         this.ratioText = '比例';
         this.confirmIcon = 'cty-confirm';
         this.confirmText = '确定';
+        this.mode = 'both';
+        this.singleText = '单拍';
+        this.multipleText = '连拍';
+        this.touchZoom = true;
         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.pictures = [];
         this.showImageViewer = false;
         this.imageViewerIndex = 0;
+        this.currentPhotoMode = 'multiple';
         this.SCREEN_WIDTH = window.screen.width;
         this.SCREEN_HEIGHT = window.screen.height;
         this.originalBodyBackground = '';
+        this.isTakingPhoto = false;
+        this.distance = 0;
     }
     connectedCallback() {
+        if (this.mode === 'single') {
+            this.currentPhotoMode = 'single';
+        }
         const bodyEl = window.document.querySelector('body');
         bodyEl.style.visibility = 'hidden';
         this.originalBodyBackground = window.getComputedStyle(bodyEl).background;
@@ -77,7 +77,7 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
     }
     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 }));
+        return 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 }));
     }
     close() {
         this.ctyDismiss.emit();
@@ -106,7 +106,9 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
             this.ratioIndex = 0;
         }
         const currentRatio = ratios[this.ratioIndex];
-        if (!currentRatio.includes(':') || lastRatio.includes(':')) ;
+        if (!currentRatio.includes(':') || !lastRatio.includes(':')) {
+            cameraPreview.setPreviewPosition(0, !lastRatio.includes(':') ? this.safeArea : 0);
+        }
         const height = this.getCameraHeight();
         return cameraPreview.setPreviewSize({ width: SCREEN_WIDTH, height });
     }
@@ -114,15 +116,26 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
         const { zooms } = this;
         this.zoomIndex = idx;
         const maxZoom = await cameraPreview.getMaxZoom();
-        const zoom = ((+maxZoom + 1) / zooms.slice(-1)[0]) * zooms[idx];
+        let zoom = ((+maxZoom + 1) / (zooms.slice(-1)[0] || 10)) * zooms[idx];
+        if (deviceInfo.isIos) {
+            zoom = zooms[idx];
+        }
         return cameraPreview.setZoom(idx === 0 ? 0 : Math.min(zoom, maxZoom));
     }
     async takePhoto() {
-        const { quality, width, height, file } = this;
+        const { quality, width, height, file, max, pictures } = this;
+        if (max > 0 && pictures.length >= max || this.currentPhotoMode === 'single' && this.pictures.length > 0 || this.isTakingPhoto) {
+            return;
+        }
+        this.isTakingPhoto = true;
         const data = await cameraPreview.takePicture({ width, height, quality });
         const result = await imagePicker.formatPictureResult(file, data);
-        this.pictures = [...this.pictures, result];
+        this.pictures = [...pictures, result];
         this.ctyTakePhoto.emit(result);
+        this.isTakingPhoto = false;
+        if (this.currentPhotoMode === 'single') {
+            this.toImageViewer(0);
+        }
         return result;
     }
     deletePicture(e, idx) {
@@ -138,22 +151,65 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
             return SCREEN_HEIGHT;
         }
         const [x, y] = currentRatio.split(':');
-        return +y * SCREEN_WIDTH / +x;
+        return Math.min(SCREEN_HEIGHT, +y * SCREEN_WIDTH / +x);
     }
     toImageViewer(index) {
-        this.showImageViewer = true;
         this.imageViewerIndex = index;
+        this.showImageViewer = true;
     }
     closeImageViewer(e) {
         e.stopPropagation();
         this.showImageViewer = false;
     }
+    closeSingleImageViewer(e) {
+        this.pictures = [];
+        this.closeImageViewer(e);
+    }
     confirm() {
         this.ctyConfirm.emit(this.pictures);
     }
+    deleteLastPicture() {
+        const pictures = [...this.pictures];
+        pictures.pop();
+        this.pictures = pictures;
+    }
+    touchstart(e) {
+        e.stopPropagation();
+        if (this.touchZoom && e.touches.length == 2) {
+            const xMove = e.touches[1].clientX - e.touches[0].clientX;
+            const yMove = e.touches[1].clientY - e.touches[0].clientY;
+            this.distance = Math.sqrt(xMove * xMove + yMove * yMove);
+        }
+    }
+    touchmove(e) {
+        e.stopPropagation();
+        if (this.touchZoom && e.touches.length == 2) {
+            const xMove = e.touches[1].clientX - e.touches[0].clientX;
+            const yMove = e.touches[1].clientY - e.touches[0].clientY;
+            const distance = Math.sqrt(xMove * xMove + yMove * yMove);
+            const distanceDiff = distance - this.distance;
+            const zoom = 0.005 * distanceDiff;
+            this.updateZoom(zoom);
+        }
+    }
+    touchend(e) {
+        e.stopPropagation();
+    }
+    async updateZoom(diff) {
+        const currentZoom = await cameraPreview.getZoom();
+        let maxZoom = await cameraPreview.getMaxZoom();
+        const lastZoom = (this.zooms.slice(-1)[0] || 10);
+        if (deviceInfo.isIos) {
+            maxZoom = lastZoom;
+        }
+        else {
+            diff = (maxZoom + 1) / lastZoom * diff;
+        }
+        cameraPreview.setZoom(Math.min(currentZoom + diff, maxZoom));
+    }
     render() {
-        const { title, closeIcon, flash, flipText, flashText, ratioText, ratios, ratioIndex, zoomIndex, zooms, confirmIcon, confirmText, pictures, showImageViewer, imageViewerIndex } = this;
-        return (h(Host, { key: '6c0e8aee4840edae99979e2f8fa4fe1f28b91f00', class: "cty-camera", onClick: (e) => e.stopPropagation() }, h("cty-nav-bar", { key: '16ed59dc05921a634765cae7e3c8ab817a509b66', title: title, type: "clear" }, h("slot", { key: 'dbeb5240503757e7fb35741bfaacfee520e935c5', name: "header-start", slot: "start" }, h("ion-button", { key: 'e0258b6b06a50aa10d9903e6a4789d155b1a926b', class: "cty-camera__close", onClick: () => this.close() }, h("cty-icon", { key: '48c9f1c506dd13155e2545f1e4d5b8970886bb12', class: "cty-camera__close-icon", name: closeIcon })))), h("div", { key: 'a367e170321b0966ab490b9b694eaffe18fb8f6c', class: "cty-camera-widgets", part: "widgets" }, h("button", { key: '9f54e594fec181935c988f320158ce8f5754cd5c', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.flipCamera() }, h("cty-icon", { key: 'db2e97bd1ec69d82e93c9506fd8976cff560ed24', class: "cty-camera-widget__icon", name: "cty-flip" }), !!flipText && h("span", { key: '947fee726ab0e6c514747a2b2eadbf989f5ff91c', class: "cty-camera-widget__text" }, flipText)), h("button", { key: '01a10aae9e6745d83033ef5e4441cc3d7e199612', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.toggleFlash() }, h("cty-icon", { key: 'd2bd45656aa68309b40f8977e80b15ae7ec29e17', class: "cty-camera-widget__icon", name: flash ? 'cty-flash-on' : 'cty-flash-off' }), !!flashText && h("span", { key: 'b4f9d0d5675c6a21483f4bc211b92ba4e7a8f688', class: "cty-camera-widget__text" }, flashText)), h("button", { key: 'c36f3a4a1d6d2705ea7c52acb0281f18f7570de9', class: "cty-button-native cty-camera-widget", part: "ratio", onClick: () => this.ratioChange() }, h("span", { key: 'ac8cb010492f470ea5e776efa59d2e3b622c031b', class: "cty-camera-widget__ratio flex-center" }, ratios[ratioIndex]), !!ratioText && h("span", { key: 'fc2792dd4c5e27b4946db17fc05ca8d1f79ab475', class: "cty-camera-widget__text" }, ratioText))), h("div", { key: '2b6cb7cb689119162cba517b5469efdcf173e481', class: "cty-camera-controls safe-area-bottom-padding" }, h("slot", { key: '93ba0e977b61d5c5fdd0bd6ab220711064af826d', name: "zooms" }, h("div", { key: '2ea4da678fda37ba175c66a72e34fccf1974a521', 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: '8f308406f2ceac48cd7cbfd4306a7a65aebce21f', class: "cty-camera-controls__main flex-center" }, h("div", { key: 'd3fc1707c8f6ee3d9f968f916e8a50810e580a4b', class: "cty-camera-controls__main-left flex-center" }), h("div", { key: 'fa7a8905a22006276b941693c26ac15e6b002976', class: "cty-camera-controls__take-photo flex-center" }, h("button", { key: '61536741582da9bef8bcf0fe4fba09e3fefde58e', class: "cty-button-native cty-camera-controls__take-photo-button", part: "take-photo", onClick: () => this.takePhoto() })), h("div", { key: '74ef21c9e62c7ac604b11b53f9b6a1126fa0338b', class: "cty-camera-controls__main-confirm flex-center" }, pictures.length > 0 && h("button", { key: 'c019b93aab832fadcb3e6d5c77bc98dd8e126b16', class: "cty-button-native flex-column-center", onClick: () => this.confirm() }, h("cty-icon", { key: 'eb9ae426c45fa31202247c99ebb991bc7ceede55', class: "cty-camera-controls__main-confirm-icon", name: confirmIcon }), h("span", { key: '25afa75bcbda33b8f15c432879712bdec937678c', class: "cty-camera-controls__main-confirm-text" }, confirmText)))), h("slot", { key: '14def885116f251bd8390313d46c661dcc807282', name: "images" }, h("div", { key: '254067237e7506f87bdc762285dc3eaff6591ed6', 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: 'e84bcb7a5ce6cbb504dbe55e6538622d3914d334', images: pictures.map(item => item.url), initialSlide: imageViewerIndex, overlayIndex: 100, backdropDismiss: false, closeable: true, onCtyDismiss: (e) => this.closeImageViewer(e) })));
+        const { title, closeIcon, flash, flipText, flashText, ratioText, ratios, ratioIndex, zoomIndex, zooms, mode, singleText, multipleText, currentPhotoMode, confirmIcon, confirmText, deleteIcon, pictures, showImageViewer, imageViewerIndex, touchZoom } = this;
+        return (h(Host, { key: '4c546fc5fd43147be694191c6af7f2cc62ef0d92', class: "cty-camera", onClick: (e) => e.stopPropagation() }, h("cty-nav-bar", { key: '1da5d9e614b899a65e196167bc327d436895548b', title: title, type: "clear" }, h("slot", { key: 'c9f33592122c0e9f4b7483f826de1c2103aa4c5e', name: "header-start", slot: "start" }, !!closeIcon && h("ion-button", { key: 'd17064350fe3f1d38588dfb2015fee953cb6726a', class: "cty-camera__close", onClick: () => this.close() }, h("cty-icon", { key: '5ac3798d9be4c8af86d3fa18b3527dd9a972f25f', class: "cty-camera__close-icon", name: closeIcon })))), h("div", { key: '875ba5a5a212a44f5c597819781c0ff7de807a81', class: "cty-camera-main", onTouchStart: (e) => this.touchstart(e), onTouchMove: (e) => this.touchmove(e), onTouchEnd: (e) => this.touchend(e) }, h("div", { key: 'f5b1a96b91c9403f8c4f559f98f38d4307ceefdd', class: "cty-camera-widgets", part: "widgets" }, !!flipText && h("button", { key: '5f5e5c584fd5322fac0105ee8531f3243d34c60c', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.flipCamera() }, h("cty-icon", { key: '0191d166953e98672abc7967c34c576ec5bd0c09', class: "cty-camera-widget__icon", name: "cty-flip" }), !!flipText && h("span", { key: 'a50f6157cd1b988fb15ddbcf11907a3d5d1d6b65', class: "cty-camera-widget__text" }, flipText)), !!flashText && h("button", { key: '948a0448019d93a025a7dc2a3f999f9144f29088', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.toggleFlash() }, h("cty-icon", { key: 'b98246a927de76ca647614b166b56ca43a6819a6', class: "cty-camera-widget__icon", name: flash ? 'cty-flash-on' : 'cty-flash-off' }), !!flashText && h("span", { key: '1fc5a917af4849f5c0557abf6e4992713cb2ef85', class: "cty-camera-widget__text" }, flashText)), !!ratioText && h("button", { key: 'f359f5140b9c9260baefb72f7bd36d6ea4621e96', class: "cty-button-native cty-camera-widget", part: "ratio", onClick: () => this.ratioChange() }, h("span", { key: '5cf64c913f90dd7396db226246634c17c75524cd', class: "cty-camera-widget__ratio flex-center" }, ratios[ratioIndex]), !!ratioText && h("span", { key: 'f92c7c72d7d2e940083a04d7ab6618b0a0a47126', class: "cty-camera-widget__text" }, ratioText)))), h("div", { key: '9aaa6db2ad0d14de0ee73b5bc0a4ed7675f98f73', class: "cty-camera-controls safe-area-bottom-padding" }, mode == 'both' && pictures.length <= 0 && h("div", { key: '9da7b81a77afba08f72444bcf58760fe0b27c90d', class: "cty-camera-controls__mode flex-center", part: "mode" }, h("button", { key: '0268af23a92767e7225be4a03ff3900af39a2b35', class: { 'cty-button-native cty-camera-controls__mode-button': true, 'cty-camera-controls__mode-button__active': currentPhotoMode === 'single' }, onClick: () => this.currentPhotoMode = 'single' }, singleText), h("button", { key: 'a1fe3908dae8a2002d5188e34bfbf7f96920526f', class: { 'cty-button-native cty-camera-controls__mode-button': true, 'cty-camera-controls__mode-button__active': currentPhotoMode === 'multiple' }, onClick: () => this.currentPhotoMode = 'multiple' }, multipleText)), h("slot", { key: '17b06073ac3b281191d1aecdbd64ad2f357a46cd', name: "zooms" }, !touchZoom && zooms.length > 0 && h("div", { key: '2ed23d12da50b9a1fa4b538bcd6e0d786bd7330a', 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: '83f52c454632fe2dbd44f8b98dc2e98872860be7', class: "cty-camera-controls__main flex-center" }, h("div", { key: '8b200564764769b6977c1a96b66ce05f214f88fe', class: "cty-camera-controls__main-left flex-center" }), h("div", { key: 'b9e03f0dd3f8458aa5367888360379021b3aa831', class: "cty-camera-controls__take-photo flex-center" }, h("button", { key: 'cc72d00564e89088725b64b2d9b48e7d4414b163', class: "cty-button-native cty-camera-controls__take-photo-button", part: "take-photo", onClick: () => this.takePhoto() })), h("div", { key: 'da7c6358dc12623e46243eba2c9a86bd80a2158c', class: "cty-camera-controls__main-confirm flex-center" }, currentPhotoMode !== 'single' && pictures.length > 0 && !!deleteIcon && h("button", { key: '6d0601cf4cbae112ae1e46f9279680ddb9d654a8', class: "cty-camera-controls__main-delete cty-button-native flex-column-center", onClick: () => this.deleteLastPicture() }, h("cty-icon", { key: '56093c75cb0e6095acc572e1c2e99d3ec97d1ae8', class: "cty-camera-controls__main-delete-icon", name: deleteIcon })), currentPhotoMode !== 'single' && pictures.length > 0 && h("button", { key: '9f2467ddbee75a7a2f659d1738beb71917d9228d', class: "cty-button-native flex-column-center", onClick: () => this.confirm() }, h("cty-icon", { key: '9beead7f5384f6b6cf489fb9054df091315be050', class: "cty-camera-controls__main-confirm-icon", name: confirmIcon }), confirmText && h("span", { key: 'f011506e6aa14dc09f835a66d3c444b993fb4860', class: "cty-camera-controls__main-confirm-text" }, confirmText)))), h("slot", { key: '6a65ebc8ffea094632cc7e5a38d79c283b44d1e3', name: "images" }, h("div", { key: '8af1946b2e9ac7f3766c838f0db1efcc032fa1aa', class: "cty-camera-controls__images flex-align-center" }, currentPhotoMode !== 'single' && pictures.map((item, idx) => (h("div", { class: "cty-camera-controls__image", onClick: () => this.toImageViewer(idx) }, h("img", { class: 'cty-camera-controls__image-img', src: item.url }), h("button", { class: "cty-button-native", onClick: (e) => this.deletePicture(e, idx) }, h("cty-icon", { class: "cty-camera-controls__image-delete", name: closeOutline })))))))), showImageViewer && h("cty-image-viewer", { key: '6207f205fa06f88504e38b2495784c8743ea1128', images: pictures.map(item => item.url), initialSlide: imageViewerIndex, overlayIndex: 100, backdropDismiss: false, closeable: false, onCtyDismiss: (e) => this.closeImageViewer(e) }, currentPhotoMode !== 'multiple' && h("div", { key: 'c5deb6fe90be1ebb42d68279fc714ee25b21aceb', class: "cty-camera-viewer__single flex-center-between", slot: "pager" }, h("button", { key: 'b508a53e598c385e3201efc2f54d46c7e86a97e0', class: "cty-camera-viewer__single-close cty-button-native", onClick: (event) => this.closeSingleImageViewer(event) }, h("cty-icon", { key: '7a46eaf484eb993f8fecc9d1b49b101660e2f34a', name: "cty-close2" })), h("button", { key: '37cbcbd166b3ac8cb8f8195a314d89e4c81ea4be', class: "cty-camera-viewer__single-confirm cty-button-native", onClick: () => this.confirm() }, h("cty-icon", { key: '56413ca1296d49370a807c4b94be2a17a2ac2d99', name: "cty-tick" }))), currentPhotoMode !== 'multiple' && h("i", { key: '85632502d954b0427517625932df8c52603f1ad9', slot: "close" }))));
     }
     get el() { return this; }
     static get style() { return cameraCss; }
@@ -162,6 +218,7 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
         "title": [1],
         "options": [16],
         "closeIcon": [1, "close-icon"],
+        "deleteIcon": [1, "delete-icon"],
         "width": [2],
         "height": [2],
         "quality": [2],
@@ -172,6 +229,10 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
         "ratioText": [1, "ratio-text"],
         "confirmIcon": [1, "confirm-icon"],
         "confirmText": [1, "confirm-text"],
+        "mode": [1],
+        "singleText": [1, "single-text"],
+        "multipleText": [1, "multiple-text"],
+        "touchZoom": [4, "touch-zoom"],
         "ratios": [16],
         "zooms": [16],
         "ratioIndex": [32],
@@ -180,6 +241,7 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
         "pictures": [32],
         "showImageViewer": [32],
         "imageViewerIndex": [32],
+        "currentPhotoMode": [32],
         "flipCamera": [64],
         "toggleFlash": [64],
         "flashOff": [64],

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: '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: {
+        return (h(Host, { key: 'd853d65cf1fa3dc9626349e942c8d19f661dc306', class: "cty-circle" }, h("svg", { key: '33311fb22d6ca02b070e547ebc709c78eaadb9e9', ref: el => (this.svgEl = el) }, this.needDefs && h("defs", { key: '2e9dbdd1c3a34a5afcaea680f63371b92c227cdc' }, h("linearGradient", { key: 'da81536ff0c00bbb06f5c19759a6c5b5f79fbf34', id: this.gradientId, x1: "100%", y1: "0%", x2: "0%", y2: "0%", gradientTransform: "rotate(90)" }, this.colors.map(() => (h("stop", null))))), h("path", { key: 'dc61d62409c3a02b4ffb27501c9f71914f34f4a0', 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: 'd9dd38b01745838904c8a7902912dde90ea1ecad', ref: el => (this.hoverEl = el), class: "cty-circle__hover", style: {
+            } }), h("path", { key: '878ef384292e1316f84ade7bb88ffb8870ac3cff', 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: '0c7e160c0bbb20bc9e840c7e64117d1e52d621a3', class: "cty-circle__text" }, this.text), h("slot", { key: 'f6d1356d6242546c2d2d69139be0fab8873b6fb6' })));
+            } })), this.text !== '' && h("div", { key: '52556d7b0b513272cf2e7ea986b06b4a757e2c61', class: "cty-circle__text" }, this.text), h("slot", { key: '140a0fc9b856b00fc8ca1e16bdb0908c98c64a22' })));
     }
     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: '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" })));
+        return (h(Host, { key: 'f1039fb41379b4d04afe4326bf75eaf4a8be49fe', 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: 'c5392eee0b3f4b65749885fb775172ceee97a136', name: "header" }), h("div", { key: '601d7002e3fc1db6bd74c1d523eeb642abd41546', class: "cty-crop-image__wrapper", ref: el => (this.imageEl = el) }, h("img", { key: '62fd554ba538281f858990028847a1909fe93d58', src: this.url, class: "cty-crop-image__image" })), h("div", { key: '318457a3274a31d53da93a02cb888afff7c6b724', class: "cty-crop-image__clip", ref: el => (this.clipEl = el) }), h("slot", { key: 'e02928c120f4926e1d8b85e8b13263268e2f53a3', name: "clip" }), this.renderButtons(), h("slot", { key: '4d283c4409b97c811c01bd03ca000d47843b560e', name: "footer" })));
     }
     get el() { return this; }
     static get style() { return cropImageCss; }

package/components/cty-camera-photo.js

@@ -74,7 +74,7 @@ const CameraPhoto = /*@__PURE__*/ proxyCustomElement(class CameraPhoto extends H
         this.root = 'default';
         this.animated = false;
         this.overlay = true;
-        this.continuous = true;
+        this.continuous = false;
         this.cameraProps = {};
         this.isMicroMessager = deviceInfo.isMicroMessager;
         this.isIOS = deviceInfo.isIos;
@@ -217,7 +217,7 @@ const CameraPhoto = /*@__PURE__*/ proxyCustomElement(class CameraPhoto extends H
         this.ctyTap.emit({ index, imageList });
     }
     render() {
-        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) }))));
+        return (h(Host, { key: '1660d92dc6eefab105541df6d3e70fce7adaf200', 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: 'c2951d679744abbfd012284697dc550108be5d06', 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: 'ba53667d270e776f62292711e3f76e05692fa01d', backdropDismiss: false }, h("cty-crop-image", { key: 'f079c373994a79cb0b005ecb95f69832900b68b6', 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: '4595efb3231fb52c788d2ee28a889be593965359', description: this.permissionDescription }), this.continuous && this.showCameraPreview && h("cty-camera", Object.assign({ key: 'f79e7606e1edbda07665a89437d73cc716a654d8' }, this.cameraProps, { onCtyDismiss: () => this.showCameraPreview = false, onCtyConfirm: (e) => this.continuousConfirm(e) }))));
     }
     get el() { return this; }
     static get watchers() { return {

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 { e as colorPaletteOutline, t as trashOutline, f as arrowUndoCircleOutline, g as arrowRedoCircleOutline, p as pencilOutline } from './index2.js';
+import { f as colorPaletteOutline, t as trashOutline, g as arrowUndoCircleOutline, h 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: '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()));
+        return (h(Host, { key: '9afc781ac5ed12f60ca42466b7a394a8db17e045', class: "cty-canvas-board flex-column" }, h("slot", { key: '64a18b2afa1b122d17770706722caeafda5e7d13', name: "header" }), this.headerOpn && (h("div", { key: 'bf799759cde3991f1bb36d165c03c951d47d6ac3', class: "cty-canvas-board__header flex-center-between" }, h("slot", { key: '707e692ccb92f8223d5f0ae7718869550cf5fc3b', name: "header-start" }), this.bgIcon && h("button", { key: '7cd686f69a71572c796514d2a0b77796fa0ccb59', class: "cty-button-native", onClick: () => this.updateBgColor() }, h("cty-icon", { key: 'c587102c8eef24f00505c91a2bfec1d279395d3a', name: this.bgIcon, class: "cty-canvas-board__palette" }), h("input", { key: 'f13b2f8650a22d83804233bcd3cdf0414cb6e1b3', type: "color", class: "cty-canvas-board__picker-color", ref: el => (this.bgPickerEl = el), value: this.bgColor, onInput: (e) => this.bgColorChange(e) })), h("slot", { key: '4c1140c45cc754f922f417530c0130fd29a24cf8', name: "header-opn-start" }, " "), (this.undoIcon || this.redoIcon) && h("div", { key: '37e7d2a0215a7a390a3e5ec7428a9932dc38da04', class: "cty-canvas-board__opn flex-center" }, this.undoIcon && h("button", { key: '98dbd56b598780eec663815a9a5d562005ff4f2f', class: "cty-button-native cty-canvas-board__opn-icon", onClick: () => this.undo() }, h("cty-icon", { key: '9847b4a2d029a281f8c85f7580b6284cac733ff9', name: this.undoIcon, class: { 'cty-canvas-board__opn-active': this.drawingHistory.length > 1 && this.step > 0 } })), this.redoIcon && h("button", { key: '0a9c4d6ef4e2c5cc7572c82b67e190894bc29be0', class: "cty-button-native cty-canvas-board__opn-icon", onClick: () => this.redo() }, h("cty-icon", { key: '105f2a5a113f9c60641a46f7b4947bed22f605f5', name: this.redoIcon, class: { 'cty-canvas-board__opn-active': this.step < this.drawingHistory.length - 1 } }))), h("slot", { key: '80783ce611b1e8d2a658a38874f1245bdfcf2fac', name: "header-opn-end" }), this.clearIcon && h("button", { key: '1f8996a2a0c0cef2dd9f46284ab26bea10526c07', class: "cty-button-native cty-canvas-board__clear", onClick: () => this.clear() }, h("cty-icon", { key: 'f253cc175f6c93e35bf101e3e834d21c8665a906', name: this.clearIcon })), h("slot", { key: '5e5decd0672313a4752a456a4366d134f6700052', name: "header-end" }))), h("slot", { key: '98e43ead5ffad546dafe76033e9d765a91bc3f6a', name: "main" }), h("div", { key: 'b1c95af52d23ce5c85125cb311c8056900dbd7ed', class: "cty-canvas-board__main" }, h("canvas", { key: '5afba3a8e94fad88f75ca76593d829ba9a21a62c', 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: '803e98e0c44557d30b5362d318a467b7b69082c4', ref: el => (this.imageCanvasEl = el), style: { display: 'none' } }), h("span", { key: '7856a12b5eaa4d02b10eed26eeea7d435bb9ded6', class: "cty-canvas-board__eraser-circle", ref: el => (this.eraserEl = el) }), this.isCanvasEmpty && h("slot", { key: 'b284fec28f9f6f12367cd1d68501563c93f81c3c', name: "placeholder" }), h("slot", { key: '9e26453a3295d07889721a02c073a4c82bb6c8e3' })), h("slot", { key: '4b563fc43095dd418630bad198fb159e9c9fa18e', name: "footer" }), this.footerOpn && (h("div", { key: 'e354969d8c8570a0081770ff5db2ce28d49f9727', class: "cty-canvas-board__footer flex-center" }, h("slot", { key: '3a25b72b21a19ecccd455ed4662ffc1d14426236', name: "footer-start" }), this.pencilIcon && (h("button", { key: 'f80a39bab59334d3fba7164da12d54d8d4affc9f', class: "cty-button-native cty-canvas-board__pen", onClick: e => this.updatePencil(e) }, h("cty-icon", { key: 'a8391e0d5951256bb0930c32b64529950bd5c326', name: this.pencilIcon, class: { 'cty-canvas-board__footer-active': !this.isEraser } }))), h("button", { key: '233915aab3fb18c5c6cf471f6cd7f6d9599f31f1', class: "cty-button-native cty-canvas-board__eraser", onClick: () => (this.isEraser = !this.isEraser) }, h("cty-icon", { key: '5d802cba0c2e6ed0dadb54e625c4888b7ba1843d', name: this.eraserIcon, class: { 'cty-canvas-board__footer-active': this.isEraser } })), h("button", { key: '9eb5df625d51d425b3bae8a7783a72efd6d3b97b', class: "cty-button-native cty-canvas-board__color-button", onClick: () => this.updateColor() }, h("input", { key: '87e370114a4e757d0021061979b958fcacfc9d11', type: "color", value: this.strokeColor, class: "cty-canvas-board__picker-color", ref: el => (this.colorPickerEl = el), onInput: (e) => this.penColorChange(e) })), h("slot", { key: 'dcfb708bfec564de474eb62be2967ee1db80a855', name: "footer-end" }))), h("slot", { key: '8af87c25d9074ee42059d9cd0e3a3dd648b9dc4d', name: "bottom" }), this.showButtons && (h("div", { key: '66addf12614741a3552a3df2c5f501c0479db0a5', class: "cty-canvas-board__buttons flex-justify-end" }, h("slot", { key: '3147d3af051a14924418c34c7fb91d3389766b1a', name: "bottom-button-start" }), h("button", { key: 'cbfb65c129ad31fcc697a2329e5f4ee3f18a2ac8', class: "cty-canvas-board__button cty-button-native", onClick: () => this.clear() }, this.clearLabel), h("button", { key: '3aa8dc25e8610b1050f5faea2fc9058bff2428f8', class: "cty-canvas-board__button cty-button-native", onClick: () => this.confirm() }, this.confirmLabel), h("slot", { key: '72911c7683069f53acbb0f599ebede14aab9e6f8', name: "bottom-button-end" }))), this.renderPopover()));
     }
     get el() { return this; }
     static get style() { return canvasBoardCss; }

package/components/cty-canvas-video.js

@@ -769,7 +769,7 @@ const CanvasVideo = /*@__PURE__*/ proxyCustomElement(class CanvasVideo extends H
             }, onTransitionEnd: () => this.transitionend() }, h("div", { class: "cty-canvas-video__progress-inner" }))), !this.isVertical && this.isMove && !!this.progressBar && (h("div", { class: "cty-canvas-video__time" }, h("span", { class: "cty-canvas-video__time-left" }, this.transTime(this.pTime)), h("span", { class: "cty-canvas-video__time-center" }, "/"), h("span", { class: "cty-canvas-video__time-right" }, this.transTime(this.pDuration)))), !(!this.isVertical && this.isMove && !!this.progressBar) && (h("div", { class: "cty-canvas-video__content" }, option.renderSlot !== 'content' && (h("div", { class: "cty-canvas-video__content-box" }, h("div", { class: "cty-canvas-video__tip" }, h("cty-icon", { name: "cty-lamp" }), option[this._props.tip || 'tip']), h("p", { class: "cty-canvas-video__date" }, option[this._props.date || 'date']), h("p", { class: "cty-canvas-video__description" }, option[this._props.description || 'description']), h("button", { class: "cty-canvas-video__name cty-button-native", onClick: e => this.clickName(e) }, '@' + option[this._props.name || 'name']))), option.contentRender !== undefined && h("slot", { name: option.contentRender }))), !(!this.isVertical && this.isMove && !!this.progressBar) && (h("div", { class: "cty-canvas-video__sidebar" }, option.renderSlot !== 'sidebar' && (h("button", { class: "cty-canvas-video__avatar cty-button-native", onClick: e => this.clickAvatar(e) }, h("img", { src: option[this._props.avatar || 'avatar'] }), this.avatarButton && h("span", { class: "cty-canvas-video__avatar-button" }, this.avatarButton))), option.renderSlot !== 'sidebar' && option[this._props.likeCount || 'likeCount'] && (h("button", { class: "cty-canvas-video__sidebar-item cty-button-native", onClick: e => this.clickLike(e) }, h("cty-icon", { name: "cty-thumb" }), h("span", null, option[this._props.likeCount || 'likeCount']))), option.renderSlot !== 'sidebar' && option[this._props.viewCount || 'viewCount'] && (h("button", { class: "cty-canvas-video__sidebar-item cty-button-native" }, h("cty-icon", { name: "cty-eye" }), h("span", null, option[this._props.viewCount || 'viewCount']))), option.renderSlot !== 'sidebar' && option[this._props.collectCount || 'collectCount'] && (h("button", { class: "cty-canvas-video__sidebar-item cty-button-native", onClick: e => this.clickCollect(e) }, h("cty-icon", { name: "cty-star" }), h("span", null, option[this._props.collectCount || 'collectCount']))), option.sidebarRender !== 'sidebar' && (h("button", { class: "cty-canvas-video__sidebar-item cty-button-native", onClick: e => this.clickShare(e) }, h("cty-icon", { name: "cty-share" }), h("span", null, "\u5206\u4EAB"))), option.sidebarRender !== undefined && h("slot", { name: option.sidebarRender }))))));
     }
     render() {
-        return (h(Host, { key: '2a118b52d29356f2753605bd90e736741266ddc6', class: "cty-canvas-video" }, h("div", { key: 'f0f94a4d09c1522b75e77ae79ab86d7c66f5a62b', class: "cty-canvas-videos" }, h("video", { key: 'aa528f90a879e8b6c53289fa54c5e57ff0ea9e87', ref: el => (this.videoEl1 = el), preload: this.preload, "x5-video-player-type": "h5", "x5-video-player-fullscreen": "true", playsinline: true, "webkit-playsinline": true, onTimeUpdate: () => this.videoTimeupdate1(), onEnded: () => this.videoEnded(), src: this.videoUrl1, typeof: "video/mp4", autoplay: this.autoplay && this.videoIndex == 0 }), h("video", { key: '5d40e2cb62209f0d79b8b5feb75e72cc457e333e', ref: el => (this.videoEl2 = el), preload: this.preload, "x5-video-player-type": "h5", "x5-video-player-fullscreen": "true", playsinline: true, "webkit-playsinline": true, onTimeUpdate: () => this.videoTimeupdate2(), onEnded: () => this.videoEnded(), src: this.videoUrl2, typeof: "video/mp4", autoplay: this.autoplay && this.videoIndex == 1 }), h("video", { key: '650017fcc8f7ca2f3d199adf095b3d2ecb87298e', ref: el => (this.videoEl3 = el), preload: this.preload, "x5-video-player-type": "h5", "x5-video-player-fullscreen": "true", playsinline: true, "webkit-playsinline": true, onTimeUpdate: () => this.videoTimeupdate3(), onEnded: () => this.videoEnded(), src: this.videoUrl3, typeof: "video/mp4", autoplay: this.autoplay && this.videoIndex == 2 })), h("div", { key: 'b2310151df860ccde18a90975e8eb96b54db87e1', class: "cty-canvas-video__slides", ref: el => (this.videoSlidesEl = el) }, this.renderSlide())));
+        return (h(Host, { key: 'ef023759451a16bd63eb5bdee6ab972880a2440c', class: "cty-canvas-video" }, h("div", { key: '2edf6097b8c2aeb68e6bdde2d810a74101679429', class: "cty-canvas-videos" }, h("video", { key: '2674bf8f147ff1730ebf75b1a8a3b04576f91962', ref: el => (this.videoEl1 = el), preload: this.preload, "x5-video-player-type": "h5", "x5-video-player-fullscreen": "true", playsinline: true, "webkit-playsinline": true, onTimeUpdate: () => this.videoTimeupdate1(), onEnded: () => this.videoEnded(), src: this.videoUrl1, typeof: "video/mp4", autoplay: this.autoplay && this.videoIndex == 0 }), h("video", { key: '574b5811ddbacf3510e66f6ea66ce217afbf42bc', ref: el => (this.videoEl2 = el), preload: this.preload, "x5-video-player-type": "h5", "x5-video-player-fullscreen": "true", playsinline: true, "webkit-playsinline": true, onTimeUpdate: () => this.videoTimeupdate2(), onEnded: () => this.videoEnded(), src: this.videoUrl2, typeof: "video/mp4", autoplay: this.autoplay && this.videoIndex == 1 }), h("video", { key: '1e9683a4fa603c3c04fb2f159736f1731fc134fb', ref: el => (this.videoEl3 = el), preload: this.preload, "x5-video-player-type": "h5", "x5-video-player-fullscreen": "true", playsinline: true, "webkit-playsinline": true, onTimeUpdate: () => this.videoTimeupdate3(), onEnded: () => this.videoEnded(), src: this.videoUrl3, typeof: "video/mp4", autoplay: this.autoplay && this.videoIndex == 2 })), h("div", { key: 'c0ab9aec0d20ff99e715ca2656b516e99e110db9', class: "cty-canvas-video__slides", ref: el => (this.videoSlidesEl = el) }, this.renderSlide())));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/cty-cascader-view.js

@@ -112,13 +112,13 @@ const CascaderView = /*@__PURE__*/ proxyCustomElement(class CascaderView extends
     }
     render() {
         const levels = this.getLevels();
-        return (h(Host, { key: '9e55b44f589b922c5509b294ea4a8b108f5451db', class: "cty-cascader-view" }, h("div", { key: '819765e008f314551e854206402a6ff4d86a8226', class: "cty-cascader-tabs" }, levels.map((level, index) => (h("div", { class: {
+        return (h(Host, { key: 'e48b6314ecc1f7f793369bf1b79ab2442a71eb0e', class: "cty-cascader-view" }, h("div", { key: '258c8e6bb0230beacaa5c7ce19fd494266b55757', class: "cty-cascader-tabs" }, levels.map((level, index) => (h("div", { class: {
                 'cty-cascader-tab': true,
                 'cty-cascader-tab-active': this.tabActiveIndex === index,
-            }, part: "tab-item", onClick: () => this.onTabChange(index) }, h("div", { class: "cty-cascader-header-title", ref: el => (this.tabRefs[index] = el) }, level.selected ? level.selected[this.props.label] : this.placeholder)))), h("div", { key: '2c50ae141ff31a9f4cc84ee53c421ec0b28bf457', class: "cty-cascader-tab-underline", style: {
+            }, part: "tab-item", onClick: () => this.onTabChange(index) }, h("div", { class: "cty-cascader-header-title", ref: el => (this.tabRefs[index] = el) }, level.selected ? level.selected[this.props.label] : this.placeholder)))), h("div", { key: '71cbef40a1e6c083e84674a188073d659434ea57', class: "cty-cascader-tab-underline", style: {
                 width: `${this.underlineWidth}px`,
                 transform: `translateX(${this.underlineLeft}px)`,
-            } })), h("div", { key: '13fb51d8f9a5a17ad6d72747b416602864057d02', class: "cty-cascader-content" }, (() => {
+            } })), h("div", { key: 'd7bd53add2fc975d5cd2279dad54fbf06a3378a0', class: "cty-cascader-content" }, (() => {
             const level = levels[this.tabActiveIndex];
             if (!level)
                 return null;

package/components/cty-cascader.js

@@ -392,7 +392,7 @@ const Cascader = /*@__PURE__*/ proxyCustomElement(class Cascader extends HTMLEle
         this.ctyConfirm.emit({ values, indexes, options });
     }
     render() {
-        return (h(Host, { key: '097eed08fa6387e4f77c968fcfd523902e4a2d95', class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { 'overlay-hidden': true }), style: { zIndex: `${20000 + this.overlayIndex}` } }, h("cty-backdrop", { key: '40398490974a6af7b0c0229092e8bd0fc04ba536', position: "bottom", backdropDismiss: this.backdropDismiss, onCtyDismiss: () => this.dismiss() }, h("div", { key: 'd438ca191dfec690ca240012843f481fb30c0672', class: "cty-cascader", part: "cascader", onClick: (e) => e.stopPropagation() }, h("slot", { key: '2913dd209a2125b7cb0c2837fe1d26e16462cfd6', name: 'header' }), h("div", { key: 'abfdfe12b689d58d6d721697e60b4e64246073d5', class: "cty-cascader-header", part: "header" }, h("button", { key: '2325a0729b33722c77a259de35e46d83f374c25e', onClick: () => this.dismiss(), class: "cancel cty-button-native" }, this.cancelText), h("div", { key: '1212cce0c7ab278df9f806458272749a6f79600b', class: "cty-cascader-title" }, this.title), h("button", { key: '16136a09843436414470fef4d83f27c4d7a8c865', onClick: () => this.confirm(), class: "confirm cty-button-native" }, this.confirmText)), h("div", { key: '439b61643b827aea12bf576046362a6400f79b2e', class: "cty-cascader-columns", part: "columns", style: { height: this.columnHeight + 'px' } }, this.scrollColumns.map(c => h("div", { class: "cty-cascader-column", onTouchStart: (e) => this.handleTouchstart(e, c), onTouchMove: (e) => this.handleTouchmove(e, c), onTouchEnd: () => this.handleTouchend(c), onMouseDown: (e) => this.handleTouchstart(e, c), onMouseMove: (e) => this.handleTouchmove(e, c), onMouseUp: () => this.handleTouchend(c) }, h("div", { ref: (el) => this.setScrollEl(el, c), class: "cty-cascader-scroller", style: { transform: 'translateY(' + c.translate + 'px)', 'transition-duration': c.duration + 'ms', 'transition-property': c.duration ? 'transform' : 'none' }, onTransitionEnd: () => this.handleTransitionend(c) }, c.column.map((option, i) => h("div", { class: 'cty-cascader-option ' + (option.className || ''), style: { height: this.optionHeight + 'px' }, onClick: () => this.handleClick(c, i) }, h("div", { class: 'cty-cascader-text ' + (option.textClassName || '') }, option[this.textKey])))))), h("div", { key: '014116fa9f105919f7da7ed1494509b92420710d', class: "cty-cascader-picked", style: { top: this.center + 'px', height: this.optionHeight + 'px' } }), h("div", { key: '845bbee8cb11354210879a9067ce5978c2b000af', class: "cty-cascader-mask", style: { 'background-size': '100% ' + (this.columnHeight - this.optionHeight) / 2 + 'px' } }))))));
+        return (h(Host, { key: 'db6cec6243c28a0dc82503d528ef36190d8cb3c4', class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { 'overlay-hidden': true }), style: { zIndex: `${20000 + this.overlayIndex}` } }, h("cty-backdrop", { key: '0ae6c4315bc4bbcb9e69a51071c7376dc2c20d01', position: "bottom", backdropDismiss: this.backdropDismiss, onCtyDismiss: () => this.dismiss() }, h("div", { key: 'd327bf69c0c6dd648505f20c4cbe3e5434e8299c', class: "cty-cascader", part: "cascader", onClick: (e) => e.stopPropagation() }, h("slot", { key: 'b99f7be1e92409f71a8bd357a58b985af790b7d0', name: 'header' }), h("div", { key: 'a9000078bb76dab3444bca10a35a6cc4fa9aeaf9', class: "cty-cascader-header", part: "header" }, h("button", { key: 'de8da2d954d77e686e0fc684cda44eaa10cd0283', onClick: () => this.dismiss(), class: "cancel cty-button-native" }, this.cancelText), h("div", { key: '4951be3afed0c8f019621da44de74ccaea341d2d', class: "cty-cascader-title" }, this.title), h("button", { key: '246d476bb00234cdf1df00db65733630f3898142', onClick: () => this.confirm(), class: "confirm cty-button-native" }, this.confirmText)), h("div", { key: '43d243de03a05411df3e3e8b47dd9f1e8bdcf892', class: "cty-cascader-columns", part: "columns", style: { height: this.columnHeight + 'px' } }, this.scrollColumns.map(c => h("div", { class: "cty-cascader-column", onTouchStart: (e) => this.handleTouchstart(e, c), onTouchMove: (e) => this.handleTouchmove(e, c), onTouchEnd: () => this.handleTouchend(c), onMouseDown: (e) => this.handleTouchstart(e, c), onMouseMove: (e) => this.handleTouchmove(e, c), onMouseUp: () => this.handleTouchend(c) }, h("div", { ref: (el) => this.setScrollEl(el, c), class: "cty-cascader-scroller", style: { transform: 'translateY(' + c.translate + 'px)', 'transition-duration': c.duration + 'ms', 'transition-property': c.duration ? 'transform' : 'none' }, onTransitionEnd: () => this.handleTransitionend(c) }, c.column.map((option, i) => h("div", { class: 'cty-cascader-option ' + (option.className || ''), style: { height: this.optionHeight + 'px' }, onClick: () => this.handleClick(c, i) }, h("div", { class: 'cty-cascader-text ' + (option.textClassName || '') }, option[this.textKey])))))), h("div", { key: '098ccb99299be8a5f073b5ade75714c01a2bf7fc', class: "cty-cascader-picked", style: { top: this.center + 'px', height: this.optionHeight + 'px' } }), h("div", { key: 'e3ff801a7b3c821ddcaf9bc8210824b283c3b888', class: "cty-cascader-mask", style: { 'background-size': '100% ' + (this.columnHeight - this.optionHeight) / 2 + 'px' } }))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/cty-count-down.js

@@ -143,8 +143,8 @@ const CountDown = /*@__PURE__*/ proxyCustomElement(class CountDown extends HTMLE
         return timeText;
     }
     render() {
-        return (h(Host, { key: '7954527ee9c495dbf5a8b1dbe4bcff11839bc9b7', class: "cty-count-down" }, !this.isSingle &&
-            this.timeRange.map((item, idx) => (h("div", { class: "cty-count-down__item", part: "item" }, h("span", { class: "cty-count-down__label", part: "label" }, pad(this.timeData[item], 2) || this.timeData[item]), (this.unit || idx !== this.timeRange.length - 1) && h("span", { class: "cty-count-down__unit" }, this.unit ? this.dateFormatUnit[item] : ':')))), this.isSingle && (h("div", { key: '101d69a213e0a887dc99b24d65bbcc1afff1e302', class: "cty-count-down__item", part: "item" }, h("span", { key: '19cc22d07cbf9fad5cd4f64568f7eee1917cdd2e', class: "cty-count-down__label", part: "label" }, " ", this.formattedTime, " "))), h("slot", { key: 'a8d5ae8ac83c1967ad7d3bd6c778b6a38c26e4d1' })));
+        return (h(Host, { key: '2a7568ea351f90316d3f935644033d9642743e2d', class: "cty-count-down" }, !this.isSingle &&
+            this.timeRange.map((item, idx) => (h("div", { class: "cty-count-down__item", part: "item" }, h("span", { class: "cty-count-down__label", part: "label" }, pad(this.timeData[item], 2) || this.timeData[item]), (this.unit || idx !== this.timeRange.length - 1) && h("span", { class: "cty-count-down__unit" }, this.unit ? this.dateFormatUnit[item] : ':')))), this.isSingle && (h("div", { key: 'ceb129111c92bc0a8b3f5af48d13369da3ae18b9', class: "cty-count-down__item", part: "item" }, h("span", { key: 'ddb0ff0c791a2d490341df9dfacef7cef721e9ba', class: "cty-count-down__label", part: "label" }, " ", this.formattedTime, " "))), h("slot", { key: '45afe6d44deb88adaed12ed51fe6692e93f85877' })));
     }
     get el() { return this; }
     static get style() { return countDownCss; }

package/components/cty-dropdown.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { h as caretDown } from './index2.js';
+import { i as caretDown } from './index2.js';
 import { d as deepClone } from './utils.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './icon2.js';
@@ -102,24 +102,24 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
     }
     render() {
         const { elRect, innerOptions, tabActiveIndex, arrowIcon, innerValue, direction } = this;
-        return (h(Host, { key: '5e915dfaf0714329fcacb1283c2deddac8fa6366', class: {
+        return (h(Host, { key: 'ab1c7183a831abd19a0e4d59b154c7529bb83c84', class: {
                 'cty-dropdown': true,
                 'cty-dropdown-open': tabActiveIndex !== -1,
-            } }, h("div", { key: 'cdd285ff631cd63220708ea253721f21c9e20a14', class: "cty-dropdown-nav" }, innerOptions.map((option, index) => (h("div", { class: {
+            } }, h("div", { key: '22abe3ffa96e6c085f9cca90e2b61331a82f5239', class: "cty-dropdown-nav" }, innerOptions.map((option, index) => (h("div", { class: {
                 'cty-dropdown-item': true,
                 'cty-dropdown-item__disabled': !!option.disabled,
                 'cty-dropdown-item__active': index === tabActiveIndex,
             }, onClick: () => this.toggleNavPop(index) }, h("div", { class: "cty-dropdown-item-title flex-center" }, h("span", { class: "cty-dropdown-item-title-text" }, option.label), h("span", { class: {
                 'cty-dropdown-item-title-arrow': true,
                 'cty-dropdown-item-title-arrow__active': index === tabActiveIndex,
-            } }, h("cty-icon", { name: option.arrowIcon || arrowIcon }))))))), h("div", { key: '27e4379e8356783747b9a8dccd3da5eb86c14212', class: {
+            } }, h("cty-icon", { name: option.arrowIcon || arrowIcon }))))))), h("div", { key: 'b35afb67165191669ffa3c707751322754715377', class: {
                 'cty-dropdown-popup': true,
                 'cty-dropdown-popup__visible': tabActiveIndex != -1,
             }, style: {
                 top: `${direction == 'up' ? 0 : elRect.bottom}px`,
                 bottom: `${direction == 'up' ? 'auto' : 0}`,
                 height: `${direction == 'up' ? `${elRect.top}px` : 'auto'}`
-            } }, h("div", { key: 'e7960c77a091be918a010a068b50e46a46fbbff7', class: "cty-dropdown-popup-mask", onClick: this.handleMaskClick }), h("div", { key: '6b6fb969afa953b314bbc5bcf2f85aa678824714', class: "cty-dropdown-popup-body", style: { bottom: `${direction == 'up' ? '0px' : 'auto'}` } }, innerOptions.map((option, index) => {
+            } }, h("div", { key: '864a765df060abc552a23d06cdb2df49a3973b47', class: "cty-dropdown-popup-mask", onClick: this.handleMaskClick }), h("div", { key: '56c8c4affe03652a96a7691818312831c18934dd', class: "cty-dropdown-popup-body", style: { bottom: `${direction == 'up' ? '0px' : 'auto'}` } }, innerOptions.map((option, index) => {
             if (index != tabActiveIndex)
                 return null;
             return (h("slot", { name: "content" }, h("div", { class: "cty-dropdown-popup-content" }, option.children && Array.isArray(option.children) && option.children.map((child, index) => (h("slot", { name: 'content-item' + index }, h("div", { class: { 'cty-dropdown-popup-item': true, "cty-dropdown-popup-item__active": innerValue[tabActiveIndex] == child.key }, onClick: () => this.handleItemClick(child) }, child.label)))))));

package/components/cty-empty.js

@@ -12,7 +12,7 @@ const Empty = /*@__PURE__*/ proxyCustomElement(class Empty extends HTMLElement {
     }
     render() {
         const image = this.image === undefined ? (config.get('resUrlPrefix', '') + 'assets/cty_res/svg/cty-no-data.svg') : this.image;
-        return (h(Host, { key: 'b43c54d1c344d5da3cf5f0d135a3202a31741ab2', class: "cty-empty" }, h("slot", { key: '2fc221f92edd4a91a25dab1b43c1e3ee10913201', name: "top" }), image && h("img", { key: '72e6244a1dc135aaa56207f413d47f5e624aec11', class: "cty-empty__image", src: image }), h("slot", { key: '14500d3dc1302de58c1afac10e579e24348e5a4d', name: "image" }), this.description && h("p", { key: 'dd52a376a87b63f176456b7a25b68c44f60ad130', class: "cty-empty__description" }, this.description), h("slot", { key: 'ddab74600bd4a415fadb898b54d39346f7b9b7e0', name: "description" })));
+        return (h(Host, { key: '0a0739e0f79ceac617e345c6bbcca60c90f0647c', class: "cty-empty" }, h("slot", { key: 'de1e22f56efa532629c6ec9dd03bb6e4638e0035', name: "top" }), image && h("img", { key: '4ac5616a87b9b71429be9969fb007c263e8bc21d', class: "cty-empty__image", src: image }), h("slot", { key: 'f536fe175752de7bce77da2056e83ea43e6152b0', name: "image" }), this.description && h("p", { key: '061bad50887d4e8bc8bc906cb1c1ed0acc590277', class: "cty-empty__description" }, this.description), h("slot", { key: '6702d4ed80beb09f8221a6a5610e4b52610d488f', name: "description" })));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

package/components/cty-floating-bubble.js

@@ -148,7 +148,7 @@ const FloatingBubble = /*@__PURE__*/ proxyCustomElement(class FloatingBubble ext
         return touch;
     }
     render() {
-        return (h(Host, { key: 'a8b63559adfa83fb3f2c0dc2fa199b47e69b001f', class: "cty-floating-bubble", onTouchStart: () => this.onTouchStart(), onTouchMove: (e) => this.onTouchMove(e), onTouchEnd: (e) => this.onTouchEnd(e), onTouchCancel: (e) => this.onTouchEnd(e), onMouseDown: () => this.onTouchStart(), onMouseMove: (e) => this.onTouchMove(e), onMouseUp: (e) => this.onTouchEnd(e), onMouseLeave: (e) => this.onTouchEnd(e), onClick: (e) => this.onClick(e), style: this.rootStyle }, this.icon && (h("cty-icon", { key: '89ce6930196e092f5ea02ad70dbcd1a0367b8295', class: "cty-floating-bubble__icon", name: this.icon })), h("slot", { key: '9468315d8ab2fb6830aadd97424cfcc02b084bd0' })));
+        return (h(Host, { key: '85181e1a986368493bc7d97e630fd2160b055406', class: "cty-floating-bubble", onTouchStart: () => this.onTouchStart(), onTouchMove: (e) => this.onTouchMove(e), onTouchEnd: (e) => this.onTouchEnd(e), onTouchCancel: (e) => this.onTouchEnd(e), onMouseDown: () => this.onTouchStart(), onMouseMove: (e) => this.onTouchMove(e), onMouseUp: (e) => this.onTouchEnd(e), onMouseLeave: (e) => this.onTouchEnd(e), onClick: (e) => this.onClick(e), style: this.rootStyle }, this.icon && (h("cty-icon", { key: '2c23afeef2e7ef22b47d0fa3eafc958561653542', class: "cty-floating-bubble__icon", name: this.icon })), h("slot", { key: '31a5c469ace8d7619fabb25373b3a86d9963c2d3' })));
     }
     get el() { return this; }
     static get style() { return floatingBubbleCss; }

package/components/cty-floating-panel.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { b as getEventPageCoords } from './dom.js';
 import { c as closest } from './utils.js';
-import { i as remove } from './index2.js';
+import { j as remove } from './index2.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './icon2.js';
 
@@ -100,15 +100,15 @@ const FloatingPanel = /*@__PURE__*/ proxyCustomElement(class FloatingPanel exten
         return moveY;
     }
     render() {
-        return (h(Host, { key: 'bbd3b2e989cd465ef5b0e8ab78a7ac2018a4569d', class: "cty-floating-panel flex-column", onTouchStart: (e) => this.dragStart(e), onTouchMove: (e) => this.dragMove(e), onTouchEnd: () => this.dragEnd(), onMouseDown: (e) => this.dragStart(e), onMouseMove: (e) => this.dragMove(e), onMouseUp: () => this.dragEnd() }, h("div", { key: 'c1caf441ce6a086fd3403f879c9f227f94385b39', class: "cty-floating-panel__header flex-center", onTouchStart: () => {
+        return (h(Host, { key: '1822f791d1b0c79b753a9e4320e7a28e2cfeb7ff', class: "cty-floating-panel flex-column", onTouchStart: (e) => this.dragStart(e), onTouchMove: (e) => this.dragMove(e), onTouchEnd: () => this.dragEnd(), onMouseDown: (e) => this.dragStart(e), onMouseMove: (e) => this.dragMove(e), onMouseUp: () => this.dragEnd() }, h("div", { key: 'e8aaae838024cf93869d01ffc28edafb62d9002c', class: "cty-floating-panel__header flex-center", onTouchStart: () => {
                 this.setContentTouched(false);
             }, onMouseDown: () => {
                 this.setContentTouched(false);
-            } }, h("slot", { key: '3e9056fd69f71ea31ef0049becfbcd2cb09b599b', name: "icon-start" }), this.icon && h("cty-icon", { key: '36db27e0af1af4151c9ab2fcaaabc2b3efadbd62', class: "cty-floating-panel__header-bar", name: this.icon }), h("slot", { key: '40abafa8498498f36ae00b19c45caed1f0898f22', name: "icon-end" })), h("div", { key: '191d7be5366e5821303ca47ee2c4712a764ec585', class: "cty-floating-panel__content", ref: (el) => (this.contentRef = el), onTouchStart: () => {
+            } }, h("slot", { key: 'eba74d3402c490b7228975e8223df6d1e9f71cf9', name: "icon-start" }), this.icon && h("cty-icon", { key: '5149f391746eefa79e9a754c515c23828eed7a19', class: "cty-floating-panel__header-bar", name: this.icon }), h("slot", { key: '1d742308399786f3a80786d465a5a57bee23203d', name: "icon-end" })), h("div", { key: '4c314da3928737c9bffcbad03629d918b4c7c654', class: "cty-floating-panel__content", ref: (el) => (this.contentRef = el), onTouchStart: () => {
                 this.setContentTouched(true);
             }, onMouseDown: () => {
                 this.setContentTouched(true);
-            } }, h("slot", { key: 'b7235ef8b093a6448f3f3fd8575a5160a71a456e' }))));
+            } }, h("slot", { key: '79ff0b772b9f1cfd1b20e368c5bc921f86423cbc' }))));
     }
     get el() { return this; }
     static get style() { return floatingPanelCss; }

package/components/cty-image-upload.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { i as imageViewerController, c as cameraPhotoController } from './overlays.js';
-import { j as addOutline } from './index2.js';
+import { k as addOutline } from './index2.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './icon2.js';
 
@@ -94,7 +94,7 @@ const ImageUpload = /*@__PURE__*/ proxyCustomElement(class ImageUpload extends H
         this.ctyDeleteImage.emit(this.internalImages);
     }
     render() {
-        return (h(Host, { key: 'a6bce022f37749bbe096122b51dea2b1e397caeb', class: "cty-image-upload flex-wrap" }, this.internalImages.map((item, idx) => (h("div", { class: "cty-image-upload__item", onClick: () => this.handleImageTap(idx) }, h("img", { class: "cty-image-upload__item-img", src: item.url, style: { 'object-fit': item.fit } }), this.deleteable && (h("div", { class: "cty-image-upload__item-delete flex", onClick: e => this.handleImageDelete(e, idx) }, h("slot", { name: "deleteable" }, h("cty-icon", { class: "cty-image-upload__item-delete-icon", name: "cty-close2" }))))))), this.internalImages.length < this.count && (h("div", { key: '56c16578261239587d00bbc69ea60f8954adf595', class: "cty-image-upload__item flex-column-center", onClick: () => this.handlePickerImage() }, !this.addImage && this.addIcon && h("cty-icon", { key: '8c2217944c04906d42aea1c327778bcb998ab787', class: "cty-image-upload__add-icon", name: this.addIcon }), this.addImage && h("img", { key: '8c8e84aa1cf158c5bcdf1471823d8133db316bdd', class: "cty-image-upload__add-image", src: this.addImage }), h("slot", { key: 'a774630917d35ab072359459d1693b325b691431', name: "description" })))));
+        return (h(Host, { key: 'cc963a6a3cec6ebd6f3c12af0810c37730c4983e', class: "cty-image-upload flex-wrap" }, this.internalImages.map((item, idx) => (h("div", { class: "cty-image-upload__item", onClick: () => this.handleImageTap(idx) }, h("img", { class: "cty-image-upload__item-img", src: item.url, style: { 'object-fit': item.fit } }), this.deleteable && (h("div", { class: "cty-image-upload__item-delete flex", onClick: e => this.handleImageDelete(e, idx) }, h("slot", { name: "deleteable" }, h("cty-icon", { class: "cty-image-upload__item-delete-icon", name: "cty-close2" }))))))), this.internalImages.length < this.count && (h("div", { key: '233ea747c7d8b57cde1c3d5ae561a683834a472e', class: "cty-image-upload__item flex-column-center", onClick: () => this.handlePickerImage() }, !this.addImage && this.addIcon && h("cty-icon", { key: 'a3089afd69af41d3ee8c2745079ad75f03627766', class: "cty-image-upload__add-icon", name: this.addIcon }), this.addImage && h("img", { key: 'bdc4d1de7bcb96251645dd54ca26d2b668e6c0a3', class: "cty-image-upload__add-image", src: this.addImage }), h("slot", { key: 'd5b454ee1e9eab5edb8d4f0b8b585d2477be49db', name: "description" })))));
     }
     get el() { return this; }
     static get watchers() { return {