cty-mui-core 1.0.36 → 1.0.37

package/components/camera.js

@@ -55,12 +55,14 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
         this.showImageViewer = false;
         this.imageViewerIndex = 0;
         this.currentPhotoMode = 'multiple';
+        this.currentZoom = 1;
+        this.startZoom = 1;
         this.SCREEN_WIDTH = window.screen.width;
         this.SCREEN_HEIGHT = window.screen.height;
         this.originalBodyBackground = '';
         this.isTakingPhoto = false;
         this.distance = 0;
-        this.startZoom = 0;
+        this.startCameraZoom = 0;
     }
     connectedCallback() {
         if (this.mode === 'single') {
@@ -177,13 +179,18 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
         pictures.pop();
         this.pictures = pictures;
     }
+    resetZoom() {
+        this.currentZoom = 1;
+        this.setZoom(0);
+    }
     async 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);
-            this.startZoom = await cameraPreview.getZoom();
+            this.startCameraZoom = await cameraPreview.getZoom();
+            this.startZoom = this.currentZoom;
         }
     }
     touchmove(e) {
@@ -201,10 +208,13 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
         e.stopPropagation();
     }
     async updateZoom(diff) {
-        const { startZoom } = this;
+        const { startCameraZoom, startZoom } = this;
         let maxZoom = await cameraPreview.getMaxZoom();
         const zoomStep = (maxZoom + 1) / this.zoomSteps;
         const lastZoom = this.zooms.slice(-1)[0] || 10;
+        this.currentZoom = Math.floor((startZoom + diff) * 10) / 10;
+        this.currentZoom = Math.max(this.currentZoom, 1);
+        this.currentZoom = Math.min(this.currentZoom, lastZoom);
         if (deviceInfo.isIos) {
             maxZoom = lastZoom;
         }
@@ -212,11 +222,11 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
             maxZoom = Math.min(maxZoom, lastZoom * zoomStep);
             diff = zoomStep * diff;
         }
-        cameraPreview.setZoom(Math.min(startZoom + diff, maxZoom));
+        cameraPreview.setZoom(Math.min(startCameraZoom + diff, maxZoom));
     }
     render() {
-        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: '0e1236ed3e7ded3d45a20557720d0a1cb73cacbc', class: "cty-camera", onClick: (e) => e.stopPropagation() }, h("cty-nav-bar", { key: '2138287d88ab3b3e7c479e1e7081e7a84913330c', title: title, type: "clear" }, h("slot", { key: '116f078017c84816398aeaf160a752c37cc04f8e', name: "header-start", slot: "start" }, !!closeIcon && h("ion-button", { key: '865c3e7b3fde6d3f4af25797aa06b9951768ad43', class: "cty-camera__close", onClick: () => this.close() }, h("cty-icon", { key: 'fd6221b44faabef4946c159caf79c6e92ef954a1', class: "cty-camera__close-icon", name: closeIcon })))), h("div", { key: 'e3f231b248e2d3d28d02abc94f756c00e03dfc7c', class: "cty-camera-main", onTouchStart: (e) => this.touchstart(e), onTouchMove: (e) => this.touchmove(e), onTouchEnd: (e) => this.touchend(e) }, h("div", { key: '7eef3b7f58ed5f9b879ed9d06ea305bf6a2aeded', class: "cty-camera-widgets", part: "widgets" }, !!flipText && h("button", { key: 'd6cec2925a2f8764b012ad1236c2e1604bff0655', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.flipCamera() }, h("cty-icon", { key: '21d6f991eeb503edd1052e522ba4fdbfd295a390', class: "cty-camera-widget__icon", name: "cty-flip" }), !!flipText && h("span", { key: '170cbbd39f096f131b7eeb35c9bdc56ca13eb660', class: "cty-camera-widget__text" }, flipText)), !!flashText && h("button", { key: '4229d973f0de5cb7a1b32f1c75cc7b490c8914b4', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.toggleFlash() }, h("cty-icon", { key: 'bdb3655ae114f987a8b7b351379e42a9cc6080bf', class: "cty-camera-widget__icon", name: flash ? 'cty-flash-on' : 'cty-flash-off' }), !!flashText && h("span", { key: '16e1c210050d4655dd4efbde5801735114caf0d3', class: "cty-camera-widget__text" }, flashText)), !!ratioText && h("button", { key: '70ab5fad1921117f852f5ddde7b8869f18bee67f', class: "cty-button-native cty-camera-widget", part: "ratio", onClick: () => this.ratioChange() }, h("span", { key: '60400bddd066b601271c5145cd0fc974a74bf251', class: "cty-camera-widget__ratio flex-center" }, ratios[ratioIndex]), !!ratioText && h("span", { key: '0c7dcc67fc1a42f0af3a7a97a95e456d635b21e2', class: "cty-camera-widget__text" }, ratioText)))), h("div", { key: '0ab4ac819601e800f67a738506bd7b598e807793', class: "cty-camera-controls safe-area-bottom-padding" }, mode == 'both' && pictures.length <= 0 && h("div", { key: '5a7a68b29e56ed0fa08efed78b440a33aeb8bba3', class: "cty-camera-controls__mode flex-center", part: "mode" }, h("button", { key: '37f5fd30dd852d12283045ffc97ce62713565379', 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: '8db9de7660b537b2323ecb8257a29b03a5a1b739', 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: '563ba129d45a1654397d1f661e0d4a878a3eb98f', name: "zooms" }, !touchZoom && zooms.length > 0 && h("div", { key: '4141297ceb466b1b048c3dbe615e438754726be0', 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: '6ad6e1b222de0dd719f3d585d3c6d5142e50ac95', class: "cty-camera-controls__main flex-center" }, h("div", { key: '8e022c6b28fbfb68e3b92bf450fdc0fcb340c4cb', class: "cty-camera-controls__main-left flex-center" }), h("div", { key: 'ec1b6be8a71a7980ebe762a921d525f89a9acf93', class: "cty-camera-controls__take-photo flex-center" }, h("button", { key: '2f70643b5323354d66f1722701baee3c7afa7713', class: "cty-button-native cty-camera-controls__take-photo-button", part: "take-photo", onClick: () => this.takePhoto() })), h("div", { key: '59a140ade0e6aba2954c4916f2721604cc72bfb8', class: "cty-camera-controls__main-confirm flex-center" }, currentPhotoMode !== 'single' && pictures.length > 0 && !!deleteIcon && h("button", { key: 'b748cf4b9c14858b75bf45d8583f596afeb6b87d', class: "cty-camera-controls__main-delete cty-button-native flex-column-center", onClick: () => this.deleteLastPicture() }, h("cty-icon", { key: '70968ad36c52dc7af04d830342847156ffe44d8b', class: "cty-camera-controls__main-delete-icon", name: deleteIcon })), currentPhotoMode !== 'single' && pictures.length > 0 && h("button", { key: 'b8fb364fb8a1f71570589ca62262c7b742fa275c', class: "cty-button-native flex-column-center", onClick: () => this.confirm() }, h("cty-icon", { key: '0b299878047b1cdeb26a55a310fa237cdca02a56', class: "cty-camera-controls__main-confirm-icon", name: confirmIcon }), confirmText && h("span", { key: '7fc9bf60f54ac7b1fa4dd6b9ddce67d0976c159b', class: "cty-camera-controls__main-confirm-text" }, confirmText)))), h("slot", { key: '8e779e2656ca8ac77dc4a8c624aeb5e517352ab5', name: "images" }, h("div", { key: 'ea7893d466cb404d0cae3c506ffb9a16ad7e7766', 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: '6b3983c245ef6f73b848732c8cddbe5239c3356a', images: pictures.map(item => item.url), initialSlide: imageViewerIndex, overlayIndex: 100, backdropDismiss: false, closeable: false, onCtyDismiss: (e) => this.closeImageViewer(e) }, currentPhotoMode !== 'multiple' && h("div", { key: '7cfebe0c9321aa7ed268e27842fcd763e2230020', class: "cty-camera-viewer__single flex-center-between", slot: "pager" }, h("button", { key: 'a22468122b2923d3556157bb345f781f0c2eceee', class: "cty-camera-viewer__single-close cty-button-native", onClick: (event) => this.closeSingleImageViewer(event) }, h("cty-icon", { key: 'e7b6b467b217590b80abf0c64b2fe1818e0a4f96', name: "cty-close2" })), h("button", { key: '8bddc0bb96d9cc2eb1d12baeeaaf8a610f9c0837', class: "cty-camera-viewer__single-confirm cty-button-native", onClick: () => this.confirm() }, h("cty-icon", { key: '5f0f94f95f02a1609f5a26994eaba85f7b9c7b5a', name: "cty-tick" }))), currentPhotoMode !== 'multiple' && h("i", { key: '90a85c170d700bb74b0ce919fa99469ebc8605b5', slot: "close" }))));
+        const { title, closeIcon, flash, flipText, flashText, ratioText, ratios, ratioIndex, zoomIndex, zooms, mode, singleText, multipleText, currentPhotoMode, confirmIcon, confirmText, deleteIcon, pictures, showImageViewer, imageViewerIndex, touchZoom, currentZoom } = this;
+        return (h(Host, { key: 'f40edbc29fe5da2917d4010c6d3b1a518aedaa41', class: "cty-camera", onClick: (e) => e.stopPropagation() }, h("cty-nav-bar", { key: '5ff4256016fa09b23178155358ebf130e43bcb7f', title: title, type: "clear" }, h("slot", { key: 'd2e04b67a7d3950bf4affa93bb5cb4d7c2a617c9', name: "header-start", slot: "start" }, !!closeIcon && h("ion-button", { key: '15ac081655793b3e389a1f3639bedfc1d9ecbf07', class: "cty-camera__close", onClick: () => this.close() }, h("cty-icon", { key: '0a502cc7dacef6aae4f0d378dde420bdc809fe06', class: "cty-camera__close-icon", name: closeIcon })))), h("div", { key: '50daa357c535b0b664cee8f7f2f373a6580b1999', class: "cty-camera-main", onTouchStart: (e) => this.touchstart(e), onTouchMove: (e) => this.touchmove(e), onTouchEnd: (e) => this.touchend(e) }, h("div", { key: '9480b0a5d2ecf27c8c29a4ff92b96ef3ea88ef42', class: "cty-camera-widgets", part: "widgets" }, !!flipText && h("button", { key: '686db6af3c4dafb1581bea7fa2e6b4a2f4f27083', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.flipCamera() }, h("cty-icon", { key: 'e79bfc8da5c2b406ac216c06b6a968f5abec969a', class: "cty-camera-widget__icon", name: "cty-flip" }), !!flipText && h("span", { key: 'ba9aa97adee38dac5b7ac62162748cbe1692fdd0', class: "cty-camera-widget__text" }, flipText)), !!flashText && h("button", { key: '40e364c8c390b8d34a10483dd9c59e6308af086a', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.toggleFlash() }, h("cty-icon", { key: 'b3529fb6899eec50a9dd23cafd14c702b73f0eab', class: "cty-camera-widget__icon", name: flash ? 'cty-flash-on' : 'cty-flash-off' }), !!flashText && h("span", { key: '5db6b0cdeda7be4a9dfc141ac2853f77b39480b3', class: "cty-camera-widget__text" }, flashText)), !!ratioText && h("button", { key: 'ca8f01983dd7c8d881e62f6537b59e54147989ba', class: "cty-button-native cty-camera-widget", part: "ratio", onClick: () => this.ratioChange() }, h("span", { key: 'ce1b6eae99a1a28490b5e354dc7b5d787f33012d', class: "cty-camera-widget__ratio flex-center" }, ratios[ratioIndex]), !!ratioText && h("span", { key: '5f8782c77973f304783f090c0d074d9aa4d37529', class: "cty-camera-widget__text" }, ratioText)))), h("div", { key: 'eb9fbcf73791d348b2721af75eb6379fac9edc5a', class: "cty-camera-controls safe-area-bottom-padding" }, mode == 'both' && pictures.length <= 0 && h("div", { key: 'd8ab77317beba8093cfa5b14a7b58b576f92b0d4', class: "cty-camera-controls__mode flex-center", part: "mode" }, h("button", { key: 'ba2f4a6ce81f5d7cd34cc9ccb405c3b42f399d38', class: { 'cty-button-native cty-camera-controls__mode-button': true, 'cty-camera-controls__mode-button__active': currentPhotoMode === 'single' }, onClick: () => this.currentPhotoMode = 'single' }, singleText), h("button", { key: '8617e01437655cc1dfa2f77c977f826375be9b6a', class: { 'cty-button-native cty-camera-controls__mode-button': true, 'cty-camera-controls__mode-button__active': currentPhotoMode === 'multiple' }, onClick: () => this.currentPhotoMode = 'multiple' }, multipleText)), h("slot", { key: 'c23efc3fc61cb836bb970252106ed1e1cf3558d9', name: "zooms" }, !touchZoom && zooms.length > 0 && h("div", { key: '02e630d9fb5e30cc9257d74102301991f4f34cda', class: "cty-camera-controls__zooms flex-center", part: "zooms" }, zooms.map((item, idx) => (h("div", { class: { 'cty-camera-controls__zoom-item flex-center': true, 'cty-camera-controls__zoom-item__active': zoomIndex === idx }, onClick: () => this.setZoom(idx) }, h("span", { class: "cty-camera-controls__zoom-text flex-center" }, item, "X"))))), touchZoom && h("div", { key: 'e9f24d62c30dd73fd7be61a92b2a9e8477444d31', class: "cty-camera-controls__zooms flex-center", part: "zooms" }, h("div", { key: '15c9dfb471ebbc9d042b43c0798ca09fa20866d9', class: { 'cty-camera-controls__zoom-item flex-center cty-camera-controls__zoom-item__active': true }, onClick: () => this.resetZoom() }, h("span", { key: '02bf72c6259c9580006fa3ae14623686478e0637', class: "cty-camera-controls__zoom-text flex-center" }, currentZoom, "X")))), h("div", { key: 'd48ce6b8c8100b91876519bcc3aaae6ec6c64bb2', class: "cty-camera-controls__main flex-center" }, h("div", { key: 'bab57f9bb2276980e1eaf97db8a3473c393bd2a9', class: "cty-camera-controls__main-left flex-center" }), h("div", { key: '771f14a7d81b3ddd8ee3389de781baa408e58ab2', class: "cty-camera-controls__take-photo flex-center" }, h("button", { key: 'eb69383d3140935cf780d90f7a2f094295341613', class: "cty-button-native cty-camera-controls__take-photo-button", part: "take-photo", onClick: () => this.takePhoto() })), h("div", { key: '4de8c1abb63d4413d80fc6038b2d01161b61d03e', class: "cty-camera-controls__main-confirm flex-center" }, currentPhotoMode !== 'single' && pictures.length > 0 && !!deleteIcon && h("button", { key: 'd147510274b3f2d6afd7b8bc484a674274805556', class: "cty-camera-controls__main-delete cty-button-native flex-column-center", onClick: () => this.deleteLastPicture() }, h("cty-icon", { key: '28b17cecf4e4f3dbc25a2b1a6c9dd08cdace231a', class: "cty-camera-controls__main-delete-icon", name: deleteIcon })), currentPhotoMode !== 'single' && pictures.length > 0 && h("button", { key: 'be6a8e67255e4265f5f5744ba4bc12ea86fd8413', class: "cty-button-native flex-column-center", onClick: () => this.confirm() }, h("cty-icon", { key: 'e721a132723d3ec61d450d7bb92551fb3255a85b', class: "cty-camera-controls__main-confirm-icon", name: confirmIcon }), confirmText && h("span", { key: 'cd3413a3f091755709d4766bfb9851cd62797637', class: "cty-camera-controls__main-confirm-text" }, confirmText)))), h("slot", { key: '25cd2fd4dbf4383a38944f7a05c82d8529a1f329', name: "images" }, h("div", { key: 'd494fba5318e56f1bbd5e298c94d0db792fe2466', class: "cty-camera-controls__images flex-align-center" }, currentPhotoMode !== 'single' && pictures.map((item, idx) => (h("div", { class: "cty-camera-controls__image", onClick: () => this.toImageViewer(idx) }, h("img", { class: 'cty-camera-controls__image-img', src: item.url }), h("button", { class: "cty-button-native", onClick: (e) => this.deletePicture(e, idx) }, h("cty-icon", { class: "cty-camera-controls__image-delete", name: closeOutline })))))))), showImageViewer && h("cty-image-viewer", { key: 'e7b85e1ee2817e30dffd31b8dc54bb688e7eebda', images: pictures.map(item => item.url), initialSlide: imageViewerIndex, overlayIndex: 100, backdropDismiss: false, closeable: false, onCtyDismiss: (e) => this.closeImageViewer(e) }, currentPhotoMode !== 'multiple' && h("div", { key: '5ee748c3a00c7b59a06caf8452e991923f8b0e03', class: "cty-camera-viewer__single flex-center-between", slot: "pager" }, h("button", { key: 'e887095785b5a51ba6e7b9535302048f52847fec', class: "cty-camera-viewer__single-close cty-button-native", onClick: (event) => this.closeSingleImageViewer(event) }, h("cty-icon", { key: '9835324ca3a6d13a5492cc71e275a10176a2c41a', name: "cty-close2" })), h("button", { key: 'ead287871bcf1427012c48efff2f13e51acb8fc9', class: "cty-camera-viewer__single-confirm cty-button-native", onClick: () => this.confirm() }, h("cty-icon", { key: '5bcfd41d3c8998abcc06bf9852efcb4b1b821ffb', name: "cty-tick" }))), currentPhotoMode !== 'multiple' && h("i", { key: 'd1410f731edc011af6acdc1652264e760d557213', slot: "close" }))));
     }
     get el() { return this; }
     static get style() { return cameraCss; }
@@ -251,6 +261,7 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
         "showImageViewer": [32],
         "imageViewerIndex": [32],
         "currentPhotoMode": [32],
+        "currentZoom": [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: '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: {
+        return (h(Host, { key: 'b552b6f0190327fbd9fcf458994feee63b761d38', class: "cty-circle" }, h("svg", { key: '64b07a4798544cc9f9878dc4be3a046c881a6706', ref: el => (this.svgEl = el) }, this.needDefs && h("defs", { key: '5762f3641189b8d8dd8da4beddaeb82c28b68287' }, h("linearGradient", { key: '03205dd0dc64e90bf6ca30fb613ceeffe688585e', id: this.gradientId, x1: "100%", y1: "0%", x2: "0%", y2: "0%", gradientTransform: "rotate(90)" }, this.colors.map(() => (h("stop", null))))), h("path", { key: '8075a1ece096aa40e2e57bba80760bfb87c38b01', ref: el => (this.layerEl = el), class: "cty-circle__layer", style: {
                 'stroke-width': this.width + 'px',
                 'strokeDasharray': (this.ratio * this.perimeter) + 'px ' + this.perimeter + 'px'
-            } }), h("path", { key: '878ef384292e1316f84ade7bb88ffb8870ac3cff', ref: el => (this.hoverEl = el), class: "cty-circle__hover", style: {
+            } }), h("path", { key: 'fefec8d3cb6927b35b37ca04498d3abc572e8b63', ref: el => (this.hoverEl = el), class: "cty-circle__hover", style: {
                 'stroke': this.rate <= 0 && this.zeroTransparent ? 'transparent' : this.needDefs ? 'url(#' + this.gradientId + ')' : this.color,
                 'stroke-width': +this.width + this.widthDif + 'px',
                 'strokeDasharray': (this.ratio * this.rate / 100 * this.perimeter) + 'px ' + this.perimeter + 'px'
-            } })), this.text !== '' && h("div", { key: '52556d7b0b513272cf2e7ea986b06b4a757e2c61', class: "cty-circle__text" }, this.text), h("slot", { key: '140a0fc9b856b00fc8ca1e16bdb0908c98c64a22' })));
+            } })), this.text !== '' && h("div", { key: 'f683c2dc61d281e6c506ff9a15b3a2a2f4ef56da', class: "cty-circle__text" }, this.text), h("slot", { key: '64eba94a1e793fe3dec863d0733f8a7ceb9e659b' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/crop-image.js

@@ -208,7 +208,7 @@ const CropImage = /*@__PURE__*/ proxyCustomElement(class CropImage extends HTMLE
         return (h("div", { class: "cty-crop-image__buttons flex-center-between safe-area-bottom-border-color" }, this.cancelText && cancelCmp, this.confirmText && confirmCmp));
     }
     render() {
-        return (h(Host, { key: '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" })));
+        return (h(Host, { key: 'f03ef034659039ca694e92e094e6f771b65ed41d', class: "cty-crop-image", onMouseDown: (e) => this.doTouchStart(e), onTouchStart: (e) => this.doTouchStart(e), onTouchMove: (e) => this.doTouchMove(e), onTouchEnd: () => this.doTouchEnd() }, h("slot", { key: '4d1f7dcd27ebf1824937e8e056fec2e64b871610', name: "header" }), h("div", { key: '53adedd36ec4b3d2a622d9c308f35b593df3c7dd', class: "cty-crop-image__wrapper", ref: el => (this.imageEl = el) }, h("img", { key: '70dc841fd80c5e80923e3365597653837ee2d01d', src: this.url, class: "cty-crop-image__image" })), h("div", { key: '7c19c8da9253e17615aa2699391fcc545cb1f9ac', class: "cty-crop-image__clip", ref: el => (this.clipEl = el) }), h("slot", { key: '8394107199cf8626534e3d0c1a258225306c6eaf', name: "clip" }), this.renderButtons(), h("slot", { key: 'e723cd0166a0a1d752d6f69af3873ac97b96298c', name: "footer" })));
     }
     get el() { return this; }
     static get style() { return cropImageCss; }

package/components/cty-camera-photo.js

@@ -217,7 +217,7 @@ const CameraPhoto = /*@__PURE__*/ proxyCustomElement(class CameraPhoto extends H
         this.ctyTap.emit({ index, imageList });
     }
     render() {
-        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) }))));
+        return (h(Host, { key: 'eea07b307cd18485730d5c3eadce68aaf8dc1b29', 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: '7efa3cb1bbcf392be95095f4aebec0f50281cce3', class: "cty-camera-photo", animated: false, overlayIndex: 1, backdropDismiss: this.backdropDismiss, title: this.title, closeable: this.closeable, closeIcon: this.closeIcon, cancelText: this.cancelText, options: this.options, onCtyDismiss: () => this.dismiss(), onCtyTap: e => this._buttonClick(e) }), this.showCropImage && (h("cty-backdrop", { key: 'beb314ab8d1f1001bb6031f94d6cb3caa5d02e78', backdropDismiss: false }, h("cty-crop-image", { key: '898aa3f15eed3c289f3f543d07520bfc09c10640', url: this.clipImage, cancelText: this.clipCancelText, confirmText: this.clipCconfirmText, imageWidth: this.clipImageWidth, imageBackground: this.clipImageBg, maxScale: this.clipMaxScale, minScale: this.clipMinScale, suffix: this.clipImageSuffix, quality: this.clipImageQuality, onCtyCancel: () => this._doCropCancel(), onCtyConfirm: (e) => this._doCropConfirm(e) }))), this.showPermissionPurpose && h("cty-permission-purpose", { key: '556c162b22f867697445d72d30befd9c92a66985', description: this.permissionDescription }), this.continuous && this.showCameraPreview && h("cty-camera", Object.assign({ key: '45d9311b5eea8abc67fbd62bcb4c6ad8177a9e4c' }, 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

@@ -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: '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()));
+        return (h(Host, { key: '77461f05c3380459bbf8663b7b17adbefc1a9eb5', class: "cty-canvas-board flex-column" }, h("slot", { key: '1b9fdfc979353af1e012207341007884ebc854d3', name: "header" }), this.headerOpn && (h("div", { key: '44f83e96e5ee8d8ecbf192bbf6068a39d3f54eef', class: "cty-canvas-board__header flex-center-between" }, h("slot", { key: '1ece92c8330cabf64d6be6245b8586b576862e6c', name: "header-start" }), this.bgIcon && h("button", { key: 'c4a1a08e5db586d55e145f60d28c429d02d346be', class: "cty-button-native", onClick: () => this.updateBgColor() }, h("cty-icon", { key: '86113a93e80216c1fa342a41d6e144e6c8873762', name: this.bgIcon, class: "cty-canvas-board__palette" }), h("input", { key: 'ab128a619a0548e3bda4ab952144f8735e004874', type: "color", class: "cty-canvas-board__picker-color", ref: el => (this.bgPickerEl = el), value: this.bgColor, onInput: (e) => this.bgColorChange(e) })), h("slot", { key: '62bcbe6f83e52bf9ce60c36f57388b080e330763', name: "header-opn-start" }, " "), (this.undoIcon || this.redoIcon) && h("div", { key: 'e061c427becfd216bb547ac2a43bd88d84a8516d', class: "cty-canvas-board__opn flex-center" }, this.undoIcon && h("button", { key: '7a120805a9cda67ec76f7ceb7e1e9e2f9b43119e', class: "cty-button-native cty-canvas-board__opn-icon", onClick: () => this.undo() }, h("cty-icon", { key: '61f9e434e4c1175e0e0deb645c588286e11abb72', name: this.undoIcon, class: { 'cty-canvas-board__opn-active': this.drawingHistory.length > 1 && this.step > 0 } })), this.redoIcon && h("button", { key: '65240b6060be512120983d70affb6320507b9a3f', class: "cty-button-native cty-canvas-board__opn-icon", onClick: () => this.redo() }, h("cty-icon", { key: '60e2c28cadd3c2d40eeb98a8cad9f72d792f8589', name: this.redoIcon, class: { 'cty-canvas-board__opn-active': this.step < this.drawingHistory.length - 1 } }))), h("slot", { key: '8e867a01cdaafbbe08da91fce36f22fa049f4db9', name: "header-opn-end" }), this.clearIcon && h("button", { key: '19a809120e0f4604d52dbe03dc3f67f2c5698f83', class: "cty-button-native cty-canvas-board__clear", onClick: () => this.clear() }, h("cty-icon", { key: 'c49522de5d1b2d442f0e44b2ac36fdff97ea41ab', name: this.clearIcon })), h("slot", { key: 'fc0ba8abb29039edf9151dfb9d51a1aeede60cd8', name: "header-end" }))), h("slot", { key: '1ec5283eb61319f212d0898d8a5ac1d88d13f508', name: "main" }), h("div", { key: 'c0b508a7b55cdc56df6c848543d1b2b0e65bddb2', class: "cty-canvas-board__main" }, h("canvas", { key: '3a22c825d29c62a52aef31ab60deefbbd062d1b5', ref: el => (this.canvasEl = el), style: { background: this.bgColor }, onTouchStart: e => this.startDrawing(e), onTouchMove: e => this.moveDrawing(e), onTouchEnd: e => this.endDrawing(e), onMouseDown: e => this.startDrawing(e), onMouseMove: e => this.moveDrawing(e), onMouseUp: e => this.endDrawing(e) }), h("canvas", { key: '89311b6698020381cd3b35895997678c111dcd98', ref: el => (this.imageCanvasEl = el), style: { display: 'none' } }), h("span", { key: '5f462b61d2b29b1b702376085bc166681fa18ce9', class: "cty-canvas-board__eraser-circle", ref: el => (this.eraserEl = el) }), this.isCanvasEmpty && h("slot", { key: '765b89a4bd4b89d4be9435b7b28f1460830e5c40', name: "placeholder" }), h("slot", { key: '05bd544f4293977a3e505b50f2fc1563c51461df' })), h("slot", { key: 'c5828b000c59d7ac6c788fd8f058bf3cd17b9b32', name: "footer" }), this.footerOpn && (h("div", { key: '6420abefc57b8ee8f11a79ddea686f4804b19119', class: "cty-canvas-board__footer flex-center" }, h("slot", { key: 'f3ccd75e1e869c98e123b8e419e8a59ba9113bce', name: "footer-start" }), this.pencilIcon && (h("button", { key: 'c140c157ae713d94c9d0f6da55ae3e87d488b5b7', class: "cty-button-native cty-canvas-board__pen", onClick: e => this.updatePencil(e) }, h("cty-icon", { key: '7262819d76c1552a9566f025270255625f22ecc3', name: this.pencilIcon, class: { 'cty-canvas-board__footer-active': !this.isEraser } }))), h("button", { key: '31f3f0f0f2a68c5290809a4ae8a012fd353917f2', class: "cty-button-native cty-canvas-board__eraser", onClick: () => (this.isEraser = !this.isEraser) }, h("cty-icon", { key: '897c7d062bbdd7dceccaeb759f5967a000023e41', name: this.eraserIcon, class: { 'cty-canvas-board__footer-active': this.isEraser } })), h("button", { key: 'c9a7a647baa4ac93b081c3f9586c7455a5c5ef44', class: "cty-button-native cty-canvas-board__color-button", onClick: () => this.updateColor() }, h("input", { key: 'd91f1947c9f66a5050d92a6c9fd2c4758d119c20', type: "color", value: this.strokeColor, class: "cty-canvas-board__picker-color", ref: el => (this.colorPickerEl = el), onInput: (e) => this.penColorChange(e) })), h("slot", { key: 'bc134a972e3d5bca92e59b612cdff45ee7d1041f', name: "footer-end" }))), h("slot", { key: '5ab3b8c50038cbf8d98728ded8565d831d8eed1b', name: "bottom" }), this.showButtons && (h("div", { key: 'af85a5d9ef4d6e1ae76c43a9700e2b2b1a1bdcc3', class: "cty-canvas-board__buttons flex-justify-end" }, h("slot", { key: 'cb01fd8b02cf4b47af3143574c519de888b9edf9', name: "bottom-button-start" }), h("button", { key: '62141bb06b1e69946080a385043127c10963a25c', class: "cty-canvas-board__button cty-button-native", onClick: () => this.clear() }, this.clearLabel), h("button", { key: 'abf4c4bbab5f2dda8ea5b52f5d1bfbad64eca70b', class: "cty-canvas-board__button cty-button-native", onClick: () => this.confirm() }, this.confirmLabel), h("slot", { key: '91e5ab4da613f99793f900f154bdf94dd4c0adbb', 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: '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())));
+        return (h(Host, { key: 'c9247641307c3565f4162b4ac9527af5901f0d57', class: "cty-canvas-video" }, h("div", { key: '1064099a468d1cb4e1bfcbfcba86726c7b03a778', class: "cty-canvas-videos" }, h("video", { key: 'd07090531623c5def3b458f32882ecbd3f79d760', 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: '5a3cce01cf472b86a2fb57ec2c3152537cae51c3', 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: '10972bbb0330fe362e7182f672d09fcfbf8722f2', 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: '4970e44d666e586da384372056a835b226ab7529', 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: 'e48b6314ecc1f7f793369bf1b79ab2442a71eb0e', class: "cty-cascader-view" }, h("div", { key: '258c8e6bb0230beacaa5c7ce19fd494266b55757', class: "cty-cascader-tabs" }, levels.map((level, index) => (h("div", { class: {
+        return (h(Host, { key: '02b0f40ab83b2f227be69ada8954abeb95ccd0ae', class: "cty-cascader-view" }, h("div", { key: '33be506937c8a4438a3002dad686e0680fdde965', 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: '71cbef40a1e6c083e84674a188073d659434ea57', 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: 'cfdf8e4d323feba09c2f869c9188e349c439d831', class: "cty-cascader-tab-underline", style: {
                 width: `${this.underlineWidth}px`,
                 transform: `translateX(${this.underlineLeft}px)`,
-            } })), h("div", { key: 'd7bd53add2fc975d5cd2279dad54fbf06a3378a0', class: "cty-cascader-content" }, (() => {
+            } })), h("div", { key: '67bbfb1a0b7df79506e672cc25582e63cabb499d', 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: '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' } }))))));
+        return (h(Host, { key: 'f77c6e1424f111bc8d37bd12b12070feb39101cf', class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { 'overlay-hidden': true }), style: { zIndex: `${20000 + this.overlayIndex}` } }, h("cty-backdrop", { key: '95b6eaafaf4803d2a86a5110855541ad67f6e49e', position: "bottom", backdropDismiss: this.backdropDismiss, onCtyDismiss: () => this.dismiss() }, h("div", { key: '572fceaf785626fac23dda2bce92bf5a6286d868', class: "cty-cascader", part: "cascader", onClick: (e) => e.stopPropagation() }, h("slot", { key: '0942125916bf919c0a65e5627331126afded4826', name: 'header' }), h("div", { key: 'd6df99527b420d74799fc46c0cc6bd705e1a8029', class: "cty-cascader-header", part: "header" }, h("button", { key: '62d51a685660ea3f72cb43ae86e11f95aa829359', onClick: () => this.dismiss(), class: "cancel cty-button-native" }, this.cancelText), h("div", { key: '4e24518a56ef746cbc8416817fa22d2bd64befbe', class: "cty-cascader-title" }, this.title), h("button", { key: 'bb2cd0c4f2300fb9880038e2e9ba516b1ec479b0', onClick: () => this.confirm(), class: "confirm cty-button-native" }, this.confirmText)), h("div", { key: 'eff01b56ebb0abeda07bab0ade1532f7555484b3', 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: 'dbf1e0cb4fb9134316f93c6a3030237dde566f7b', class: "cty-cascader-picked", style: { top: this.center + 'px', height: this.optionHeight + 'px' } }), h("div", { key: '537c696af3cdb849c6beb2a8cd3d2dccb2921333', 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: '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' })));
+        return (h(Host, { key: '2f81e4f12a44af17c35088f25634497f32abc9c5', 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: 'fafb431baf155e6ddb6d9288b2fcb28cc4afc50f', class: "cty-count-down__item", part: "item" }, h("span", { key: '7c5e49d9a4e4459c7804afd8e6c7c1fd21d91892', class: "cty-count-down__label", part: "label" }, " ", this.formattedTime, " "))), h("slot", { key: '7a60d356c17a00eb9700e034fe20efc9f0b16398' })));
     }
     get el() { return this; }
     static get style() { return countDownCss; }

package/components/cty-dropdown.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: 'ab1c7183a831abd19a0e4d59b154c7529bb83c84', class: {
+        return (h(Host, { key: '5cd075db391b80bff2c3802c5864ffe76b9931c2', class: {
                 'cty-dropdown': true,
                 'cty-dropdown-open': tabActiveIndex !== -1,
-            } }, h("div", { key: '22abe3ffa96e6c085f9cca90e2b61331a82f5239', class: "cty-dropdown-nav" }, innerOptions.map((option, index) => (h("div", { class: {
+            } }, h("div", { key: 'fbf91dbc7e7636adadcdabc7751dd74582e293cd', 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: 'b35afb67165191669ffa3c707751322754715377', class: {
+            } }, h("cty-icon", { name: option.arrowIcon || arrowIcon }))))))), h("div", { key: '11c4c8c68c670c92ae86af2e105969b2daffdd6e', 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: '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) => {
+            } }, h("div", { key: 'f7f816b8237b11c4a46a08fc474e5a6ffa35ca46', class: "cty-dropdown-popup-mask", onClick: this.handleMaskClick }), h("div", { key: '73a5db305846157a312f197045cfb1fa2f221a0c', 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: '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" })));
+        return (h(Host, { key: '4eb56b280eeb9f0fbe4b67cd71a558cf0f0bc7e2', class: "cty-empty" }, h("slot", { key: '241e56e654739d1edb6af501f37652ffd07d834e', name: "top" }), image && h("img", { key: '429d88a5b6b0c24b6db1e877afb514189fb26eb5', class: "cty-empty__image", src: image }), h("slot", { key: '41e9cfc4948a4a72dbf83d992db62bba8269781c', name: "image" }), this.description && h("p", { key: '4cb5825ef8ad176b427d14595d8892cae299fdc1', class: "cty-empty__description" }, this.description), h("slot", { key: 'f0b31f8bdd3749419cb11d776191169b1f692b7c', 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: '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' })));
+        return (h(Host, { key: 'e0ec234a20abec0ba7294d31656bfbc89f8974ff', 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: '84dd9f24811481d7a513d10242deecc7678a2255', class: "cty-floating-bubble__icon", name: this.icon })), h("slot", { key: 'bc7ea18aa26283be64dd255b78f3df8010bc577d' })));
     }
     get el() { return this; }
     static get style() { return floatingBubbleCss; }

package/components/cty-floating-panel.js

@@ -100,15 +100,15 @@ const FloatingPanel = /*@__PURE__*/ proxyCustomElement(class FloatingPanel exten
         return moveY;
     }
     render() {
-        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: () => {
+        return (h(Host, { key: 'f2cf5536d268f54f0ec3683afabb99dc10459f52', 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: '00f3f71ee575b3205f1b6c6bc83e9a332a41600c', class: "cty-floating-panel__header flex-center", onTouchStart: () => {
                 this.setContentTouched(false);
             }, onMouseDown: () => {
                 this.setContentTouched(false);
-            } }, 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: () => {
+            } }, h("slot", { key: 'a2c0b49cdf13aefc8d82442e6ae4caae6ddb7bf1', name: "icon-start" }), this.icon && h("cty-icon", { key: '33b43106ced47e3a46a0b4e34284ff042bcae596', class: "cty-floating-panel__header-bar", name: this.icon }), h("slot", { key: '185bcb4c5d3e3b1dd6b841ce89ffe5c478ca40f7', name: "icon-end" })), h("div", { key: '60791d76b61410d85f4e34601a47dd22bd8a5f1b', class: "cty-floating-panel__content", ref: (el) => (this.contentRef = el), onTouchStart: () => {
                 this.setContentTouched(true);
             }, onMouseDown: () => {
                 this.setContentTouched(true);
-            } }, h("slot", { key: '79ff0b772b9f1cfd1b20e368c5bc921f86423cbc' }))));
+            } }, h("slot", { key: 'd84ff597db9ec40cb588e306dbf6a87b658d0078' }))));
     }
     get el() { return this; }
     static get style() { return floatingPanelCss; }

package/components/cty-image-upload.js

@@ -94,7 +94,7 @@ const ImageUpload = /*@__PURE__*/ proxyCustomElement(class ImageUpload extends H
         this.ctyDeleteImage.emit(this.internalImages);
     }
     render() {
-        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" })))));
+        return (h(Host, { key: 'c74ff7c9782bd2d28df239249336aab72814307e', 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: 'bc2aca9606226e308fac0da596d9aa7d57c0cdc9', class: "cty-image-upload__item flex-column-center", onClick: () => this.handlePickerImage() }, !this.addImage && this.addIcon && h("cty-icon", { key: '71a7f9080d66c77ca6a13e85f442209f7c0ea42f', class: "cty-image-upload__add-icon", name: this.addIcon }), this.addImage && h("img", { key: '86c409c6007ab662098dd1c35d437e7b4ccf5192', class: "cty-image-upload__add-image", src: this.addImage }), h("slot", { key: '85eddf095240e759f6e8039b443da1b62e8cb206', name: "description" })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/cty-index-bar.js

@@ -92,10 +92,10 @@ const IndexBar = /*@__PURE__*/ proxyCustomElement(class IndexBar extends HTMLEle
         this.ctyScrollToPoint.emit(index);
     }
     render() {
-        return (h(Host, { key: '9a642f3ede74ca2e52e035975eb983d0e4a8b6b6', class: "cty-index-bar" }, h("div", { key: '6f573fbb5729db11cf754a91e70ab02c429e3582', class: "cty-index-bar__list" }, this.indexList.map((item, idx) => {
+        return (h(Host, { key: 'a53f2aba840cde51fad96c3fa152f55f5eec29cb', class: "cty-index-bar" }, h("div", { key: '0b9cf94a3abaa9c0b6f634da2956067875bec151', class: "cty-index-bar__list" }, this.indexList.map((item, idx) => {
             var _a;
             return h("div", { class: "cty-index-bar__item" }, h("div", { part: "header", class: { 'cty-index-bar__item-header': true, 'cty-index-bar__item-header-active': this.alphabet === item.belong }, style: { position: this.sticky ? 'sticky' : 'initial', 'top': this.stickyTop + 'px' } }, h("span", null, item.belong), this.sum && h("span", { class: "cty-index-bar__item-header-sum" }, "(", item.sum, ")")), h("slot", { name: (_a = item.slot) !== null && _a !== void 0 ? _a : `${idx}` }));
-        })), h("div", { key: '86d9a895e685ab137ebfe14af4416fdf59d9f9a1', class: "cty-index-bar__sidebar", part: "sidebar" }, this.alphabets.map((item, i) => h("button", { class: { 'cty-index-bar__index cty-button-native': true, 'cty-index-bar__index-active': this.alphabet === item }, onClick: () => this.scrollToIndex(i), onKeyUp: (e) => this.onKeyUp(e, i), tabindex: "0" }, item)))));
+        })), h("div", { key: 'ff0cbe06ef99762719a251aad755841d37acc798', class: "cty-index-bar__sidebar", part: "sidebar" }, this.alphabets.map((item, i) => h("button", { class: { 'cty-index-bar__index cty-button-native': true, 'cty-index-bar__index-active': this.alphabet === item }, onClick: () => this.scrollToIndex(i), onKeyUp: (e) => this.onKeyUp(e, i), tabindex: "0" }, item)))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/cty-keyboard.js

@@ -65,7 +65,7 @@ const Keyboard = /*@__PURE__*/ proxyCustomElement(class Keyboard extends HTMLEle
         }
     }
     render() {
-        return (h(Host, { key: 'af371f575d865d95eb5ab93f99847f609ecd06cd' }));
+        return (h(Host, { key: 'd525c65b7c5e689b1569fb2216867221b67f0f09' }));
     }
     get el() { return this; }
     static get style() { return keyboardCss; }

package/components/cty-loading.js

@@ -82,7 +82,7 @@ const Loading = /*@__PURE__*/ proxyCustomElement(class Loading extends HTMLEleme
         return this.spinnerComponents[this.spinner] || null;
     }
     render() {
-        return (h(Host, { key: 'fa7c45d34d10f948bbd067b85ade00397d9c225d', class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { 'overlay-hidden cty-pos-cover': true }), style: { zIndex: `${20000 + this.overlayIndex}` } }, h("cty-backdrop", { key: 'a73b8fe371c02c96c90d818a59df91c873d7c935', backdropDismiss: this.backdropDismiss, onCtyDismiss: () => this.dismiss() }, h("div", { key: '6866a4f3bfcfe91ae0d4b9bc162572505fd98cb6', class: this.vertical ? 'cty-loading flex-column-center' : 'cty-loading flex-center', onClick: (e) => e.stopPropagation() }, this.renderSpinner(), h("div", { key: 'b40e848697d93605691b618856f89db85e5374f4', class: { 'cty-loading__text': true, 'cty-loading__text-hor': !this.vertical } }, h("slot", { key: '9f6184d18e1f9f67b46dee7c57f5bab604722f8c' }))))));
+        return (h(Host, { key: 'bd3ac53bbc22cc0222ee21c3428d52311d05ff31', class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { 'overlay-hidden cty-pos-cover': true }), style: { zIndex: `${20000 + this.overlayIndex}` } }, h("cty-backdrop", { key: '0458cd35d0e0875f4c3d20a131df8e8829bc9af5', backdropDismiss: this.backdropDismiss, onCtyDismiss: () => this.dismiss() }, h("div", { key: '2b479bb6111d23af385ab4ebd433c575f0fc5dca', class: this.vertical ? 'cty-loading flex-column-center' : 'cty-loading flex-center', onClick: (e) => e.stopPropagation() }, this.renderSpinner(), h("div", { key: '06a9afa4f27f78e83bfa988eb48a39da95c35e67', class: { 'cty-loading__text': true, 'cty-loading__text-hor': !this.vertical } }, h("slot", { key: '615e24637383a1c57a98b59a9d87746b30116b52' }))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/cty-media-capture.js

@@ -115,7 +115,7 @@ const MediaCapture = /*@__PURE__*/ proxyCustomElement(class MediaCapture extends
     }
     render() {
         const captureDuration = secondsToVehicle(this.captureDuration);
-        return (h(Host, { key: '94bb1371e3a7ed55516f8b8cb9831dabbdc383bf', class: { 'cty-media-capture': true, 'cty-media-captured': this.isCaptured } }, h("div", { key: 'a3da381683e3320965ad06bc7d159e64d41e1da7', class: "cty-media-capture__header" }, h("button", { key: '4e3ec2292d5906c30a2dc5c2df2f0ec1acbf7f29', onClick: () => this.doHeaderAction(), class: "cty-button-native" }, h("cty-icon", { key: 'cfb32b62119040b65885463d90cb8ce45235a333', class: "cty-capture__close-icon", name: this.isCaptured ? this.revocationIcon : this.closeIcon })), this.captureTime && (this.isCaptured || this.capturing) && (h("span", { key: 'e64231390aacfa85adbac103edf1d1b3b46c4fc4', class: { 'cty-media-capture__time': true, 'cty-media-capture__time-active': this.capturing } }, captureDuration))), this.isCaptured && (h("video", { key: '531867b2e0ef21c8b910a695614f5735427f3c28', ref: el => (this.videoEl = el), class: "cty-media-capture__video", autoplay: this.autoplay, loop: this.loop, poster: this.poster, src: this.videoFileUrl, playsinline: true, "webkit-playsinline": true, controls: this.controls, onClick: e => this.toggleVideo(e) })), h("div", { key: 'd58cb511c5c8a0c8a1d68e5c07d3b04944e26e64', class: "cty-media-capture__footer flex-center" }, !this.isCaptured && (h("button", { key: '30f8698451a4e5978e91dc856fe1b743e5a190e6', class: "cty-media-capture__switch cty-button-native", onClick: () => this.doCapture() }, h("span", { key: 'c54bc3d1db75d7beb34a370c15105b6b7e1a4430', class: { 'cty-media-capture__status': true, 'cty-media-capture__status-active': this.capturing } }))), this.isCaptured && (h("button", { key: '99296dda3a6da80cb9c41625200f7faa8ea85997', class: "cty-media-capture__confirm cty-button-native", onClick: () => this.confirm() }, this.confirmText))), h("slot", { key: '96c008cc141e4bc14e924497690b91af37e57f2f' })));
+        return (h(Host, { key: 'a2348b392a4dfc583c83f0aa45ca688c516d3a33', class: { 'cty-media-capture': true, 'cty-media-captured': this.isCaptured } }, h("div", { key: '8941dcb4cbca994d15aead39cf77dea0a621bde8', class: "cty-media-capture__header" }, h("button", { key: '603afe4b821ef29f29db2cd359d9722dc30f41f3', onClick: () => this.doHeaderAction(), class: "cty-button-native" }, h("cty-icon", { key: 'fd886d9f6fd97b34e8950a1e7cc77df9d035f8f5', class: "cty-capture__close-icon", name: this.isCaptured ? this.revocationIcon : this.closeIcon })), this.captureTime && (this.isCaptured || this.capturing) && (h("span", { key: 'b03a09ae0dc739a43961bc9bbde4a6a641fb467b', class: { 'cty-media-capture__time': true, 'cty-media-capture__time-active': this.capturing } }, captureDuration))), this.isCaptured && (h("video", { key: 'a31e886e82bb680bb3a8293f43b7a4231bfa5a31', ref: el => (this.videoEl = el), class: "cty-media-capture__video", autoplay: this.autoplay, loop: this.loop, poster: this.poster, src: this.videoFileUrl, playsinline: true, "webkit-playsinline": true, controls: this.controls, onClick: e => this.toggleVideo(e) })), h("div", { key: 'ad1dc5425bd7df3aafdd2ef1b169999b784ccd44', class: "cty-media-capture__footer flex-center" }, !this.isCaptured && (h("button", { key: '7c9f565bbfb783c28743c44b27dea30ec385e8ed', class: "cty-media-capture__switch cty-button-native", onClick: () => this.doCapture() }, h("span", { key: '27099ff17056b20c3b5615a564712e82727c33e5', class: { 'cty-media-capture__status': true, 'cty-media-capture__status-active': this.capturing } }))), this.isCaptured && (h("button", { key: '693f23683121bc970cd83d6a032be0a007c827de', class: "cty-media-capture__confirm cty-button-native", onClick: () => this.confirm() }, this.confirmText))), h("slot", { key: 'c767b7dac399530e54a34e49c712aefff61af093' })));
     }
     get el() { return this; }
     static get style() { return mediaCaptureCss; }

package/components/cty-notice-bar.js

@@ -55,7 +55,7 @@ const NoticeBar = /*@__PURE__*/ proxyCustomElement(class NoticeBar extends HTMLE
         }, 1000);
     }
     render() {
-        return (h(Host, { key: 'c3d9d23abf08c3a59ad48088bbe6d460ac5e6438', class: "cty-notice-bar flex-align-center" }, this.startIcon && h("button", { key: 'd1f1e474790f6f1121a0c0ad7ce622abf0634efb', part: "start", class: "cty-button-native", onClick: (e) => this.doIconAction(e, 'start') }, h("cty-icon", { key: '73058738e8f16040c507163f145b8ad338ed834b', name: this.startIcon, class: "cty-notice-bar__start-icon" })), h("slot", { key: '2855dfcb6fbe4cec7102cb362f2334bc3b238a56', name: 'start' }), h("div", { key: '80115da541ed08d84c50844a9a3ce2db0797348e', class: "cty-notice-bar__wrap flex-align-center", ref: el => this.wrapRefEl = el }, h("div", { key: 'bb51a93ee2d3230f5a1289c30c842e784bde7b06', class: { 'cty-ellipsis': !this.scrollable, 'cty-notice-bar__content': true }, ref: el => this.contentEl = el }, this.text, h("slot", { key: '430f4e13c185bd76f9d5716ec96c865baa279648' }))), this.endIcon && h("button", { key: '67e586f8d5e32ee60c6e79a3ed8d96b74f334ed7', part: "start", class: "cty-button-native", onClick: (e) => this.doIconAction(e, 'end') }, h("cty-icon", { key: '5f2e90b32409ad4fe3342382774b6f3b086b9b69', name: this.endIcon, class: "cty-notice-bar__end-icon" })), h("slot", { key: '51371076a6c600b721d7e1cf666b80bfe1ef3a55', name: 'end' })));
+        return (h(Host, { key: '8fe4badffd3c26a5b90f3c70bc1266cff3e48dd7', class: "cty-notice-bar flex-align-center" }, this.startIcon && h("button", { key: '42b2ce640e0082a697aabddd09d0e8957e57bc68', part: "start", class: "cty-button-native", onClick: (e) => this.doIconAction(e, 'start') }, h("cty-icon", { key: 'fb3fbccc467ec64d367e99f7125d8b60a7c427b6', name: this.startIcon, class: "cty-notice-bar__start-icon" })), h("slot", { key: '2c87ec53addee98f6d7e3fb2bfce71fc84135851', name: 'start' }), h("div", { key: '009bc56d904bdcaf474d4030537c59a22165f1ae', class: "cty-notice-bar__wrap flex-align-center", ref: el => this.wrapRefEl = el }, h("div", { key: '1a0c6125a02b1bb298476826936461e4f77a3f79', class: { 'cty-ellipsis': !this.scrollable, 'cty-notice-bar__content': true }, ref: el => this.contentEl = el }, this.text, h("slot", { key: '4acc839afa9b5f03c62cd4db2332c3a9cbcc53a1' }))), this.endIcon && h("button", { key: '8277fc5efbf37b01c4747751d89c46e43118b068', part: "start", class: "cty-button-native", onClick: (e) => this.doIconAction(e, 'end') }, h("cty-icon", { key: 'b3b6d477bde47c77b1cfe8c14caf9b8115e0f0ac', name: this.endIcon, class: "cty-notice-bar__end-icon" })), h("slot", { key: 'c0508546a5af3fe0369562be3cc1aa77f9c7488f', name: 'end' })));
     }
     get el() { return this; }
     static get style() { return noticeBarCss; }

package/components/cty-pdf-viewer.js

@@ -30,7 +30,7 @@ const PdfViewer = /*@__PURE__*/ proxyCustomElement(class PdfViewer extends HTMLE
         }
     }
     render() {
-        return (h(Host, { key: '63e7ef8bd3f752f6ec0babd274d9406b34391ec7', class: "cty-pdf-viewer" }, h("slot", { key: '980af64c9fbcfdbd2b7c87d272ab9ac5bceee481' })));
+        return (h(Host, { key: 'aed6d8695d41419600bad134950fc019f3c0cabd', class: "cty-pdf-viewer" }, h("slot", { key: 'b450966e3adba96b285fec2a06191cb70b705fa2' })));
     }
     get el() { return this; }
     static get style() { return pdfViewerCss; }

package/components/cty-progress.js

@@ -19,7 +19,7 @@ const Progress = /*@__PURE__*/ proxyCustomElement(class Progress extends HTMLEle
         this.handleProgressChange(this.percentage);
     }
     render() {
-        return (h(Host, { key: '232634327fc3757e0c1e0ece4efeeb1b3816564a', class: "cty-progress" }, h("span", { key: '8edc0e324ad3df79bddb20563dcd455905594a23', class: "cty-progress__portion", style: { width: this._percentage + '%' } }), this.pivot && (h("span", { key: '6c932a76091a8d7ee4493396fc23639efc46a549', class: "cty-progress__pivot", style: {
+        return (h(Host, { key: '423e3f4f656108d7f9ad7fcb736970c2991a1cf7', class: "cty-progress" }, h("span", { key: 'de8725f62c537ded20dd6792c4b09d951f453d24', class: "cty-progress__portion", style: { width: this._percentage + '%' } }), this.pivot && (h("span", { key: '6cb688a90e1f875828d895a4550732751784e163', class: "cty-progress__pivot", style: {
                 left: this._percentage + '%',
                 transform: 'translate(-' + (this._percentage + '%') + ',-50%)',
             } }, this.pivotText || this._percentage + '%'))));

package/components/cty-quick-access.js

@@ -118,7 +118,7 @@ const QuickAccess = /*@__PURE__*/ proxyCustomElement(class QuickAccess extends H
         return dataList.map((item, idx) => (h("div", { class: "cty-quick-access__list-item flex-column-center", style: { width: this.itemWidth + '%' }, onClick: () => this.clickItem(item, idx) }, item[this._props.icon] && h("cty-icon", { name: item[this._props.icon], class: "cty-quick-access__list-item-icon" }), item[this._props.image] && h("img", { src: item[this._props.image], class: "cty-quick-access__list-item-img" }), item[this._props.text] && h("div", { class: "cty-quick-access__list-item-text" }, item[this._props.text]))));
     }
     render() {
-        return (h(Host, { key: '26903a99a241531eca59feaf228c2417daff8795', class: "cty-quick-access" }, h("slot", { key: '4bc5b12a251d74550ebe12dac8109e58b4832fef', name: "header" }), h("div", { key: '6b137446e93e78d638191d35da6303b9ca755ff6', ref: el => (this.slideEl = el), class: "cty-quick-access__wrapper flex-align-start", style: { width: this.sliderTotalWidth + '%' }, onTouchStart: e => this.handleDragStart(e), onTouchMove: e => this.handleDragMove(e), onTouchEnd: () => this.handleDragEnd(), onMouseDown: e => this.handleDragStart(e), onMouseMove: e => this.handleDragMove(e), onMouseUp: () => this.handleDragEnd() }, this.list.map(dataList => (h("div", { class: "cty-quick-access__list flex-wrap" }, this.renderDataList(dataList))))), h("slot", { key: 'f80a871cf6bce848fc758f098d30379129ff3e13', name: "bottom" }), this.list.length > 1 && this.paper && (h("div", { key: '672f3d07f40492717fe4570f80a0c5e9a5bebe4e', class: "cty-quick-access__pagination flex-center" }, [...this.list.keys()].map(idx => (h("div", { class: { 'cty-quick-access__pagination-point': true, 'active': idx === this.currentPage } }))))), h("slot", { key: '1380cafaf4b1a558f514867f1351514bb74c5beb', name: "p-bottom" })));
+        return (h(Host, { key: 'da9f105f1edd62ae0907033cd4e1550264a97144', class: "cty-quick-access" }, h("slot", { key: 'bb394487a338085609ccff43ca54a90d2d33d1a8', name: "header" }), h("div", { key: 'fae0602581b0c19ad3a95cbb4424bf507943ef25', ref: el => (this.slideEl = el), class: "cty-quick-access__wrapper flex-align-start", style: { width: this.sliderTotalWidth + '%' }, onTouchStart: e => this.handleDragStart(e), onTouchMove: e => this.handleDragMove(e), onTouchEnd: () => this.handleDragEnd(), onMouseDown: e => this.handleDragStart(e), onMouseMove: e => this.handleDragMove(e), onMouseUp: () => this.handleDragEnd() }, this.list.map(dataList => (h("div", { class: "cty-quick-access__list flex-wrap" }, this.renderDataList(dataList))))), h("slot", { key: '6d06c241da55cd9ce4d06950409c0c9b33eebf47', name: "bottom" }), this.list.length > 1 && this.paper && (h("div", { key: 'c995942baa11333fa2be555d35d30169029c794d', class: "cty-quick-access__pagination flex-center" }, [...this.list.keys()].map(idx => (h("div", { class: { 'cty-quick-access__pagination-point': true, 'active': idx === this.currentPage } }))))), h("slot", { key: '197c43ef5ccf77f33abcbf552150d9955c743ddb', name: "p-bottom" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/cty-rate.js

@@ -156,7 +156,7 @@ const Rate = /*@__PURE__*/ proxyCustomElement(class Rate extends HTMLElement {
         }
     }
     render() {
-        return (h(Host, { key: 'f1df9fa7ba3160a9b334982d85e70f3de7b0b8fd', class: { 'cty-rate': true, 'cty-rate__disabled': this.disabled, 'cty-rate__readonly': this.readonly }, onTouchStart: () => this._start(), onTouchMove: (e) => this._move(e), onTouchEnd: () => this._end(), onMouseDown: () => this._start(), onMouseMove: (e) => this._move(e), onMouseUp: () => this._end() }, this.statusList.map(item => (h("div", { class: "cty-rate__item", onClick: (e) => this._doAction(e) }, h("cty-icon", { name: item.status === 'full' ? this.icon : this.voidIcon, class: { 'cty-rate__icon': true, 'cty-rate__icon-full': item.status === 'full', 'cty-rate__icon-disabled': this.disabled } }), this.half && item.value > 0 && item.value < 1 && (h("cty-icon", { name: item.status === 'void' ? this.voidIcon : this.icon, class: { 'cty-rate__icon cty-rate__icon-half': true, 'cty-rate__icon-full': item.status !== 'void', 'cty-rate__icon-disabled': this.disabled }, style: { width: item.value * 100 + '%' } })))))));
+        return (h(Host, { key: '2dc67f1fea979036a8adfb4fa4b8634294086b6c', class: { 'cty-rate': true, 'cty-rate__disabled': this.disabled, 'cty-rate__readonly': this.readonly }, onTouchStart: () => this._start(), onTouchMove: (e) => this._move(e), onTouchEnd: () => this._end(), onMouseDown: () => this._start(), onMouseMove: (e) => this._move(e), onMouseUp: () => this._end() }, this.statusList.map(item => (h("div", { class: "cty-rate__item", onClick: (e) => this._doAction(e) }, h("cty-icon", { name: item.status === 'full' ? this.icon : this.voidIcon, class: { 'cty-rate__icon': true, 'cty-rate__icon-full': item.status === 'full', 'cty-rate__icon-disabled': this.disabled } }), this.half && item.value > 0 && item.value < 1 && (h("cty-icon", { name: item.status === 'void' ? this.voidIcon : this.icon, class: { 'cty-rate__icon cty-rate__icon-half': true, 'cty-rate__icon-full': item.status !== 'void', 'cty-rate__icon-disabled': this.disabled }, style: { width: item.value * 100 + '%' } })))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/cty-record.js

@@ -243,7 +243,7 @@ const Record = /*@__PURE__*/ proxyCustomElement(class Record extends HTMLElement
         }
     }
     render() {
-        return (h(Host, { key: '29bac8a3bb560f447bb62f6fc9d2d901cef26883', class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { 'overlay-hidden cty-pos-cover': true }), style: { zIndex: `${20000 + this.overlayIndex}` } }, h("cty-backdrop", { key: 'a06549ebed5eabca48cfb3116b9b3858051b22b3', position: "bottom", backdropDismiss: this.backdropDismiss, onCtyDismiss: () => this.dismiss() }, h("div", { key: 'ec5d823335ea3db0bc344ad1618c059e5c6bb170', class: "cty-record safe-area-bottom-padding flex-center-column", onClick: (e) => e.stopPropagation() }, h("slot", { key: '96d07aa41296e9fc521794aab468fc7ac20f9bfe', name: "header" }), this.closeable && (h("div", { key: 'd39caea613d27bc8f62ffba9d587cf5b8c69ecac', class: "cty-record__close", onClick: () => this.handleCloseRecord() }, h("cty-icon", { key: 'f4ee9d4b70e75ddd5fb0dd68f5ac5aac84046db8', name: closeOutline }))), h("p", { key: 'f204119f6cf0546b4c52fa475a0f843922adee29', class: "cty-record__desc" }, this.recordDescription), h("p", { key: '27db762939b187d6c0ca45656acb83d46c5264c0', class: "cty-record__time" }, this.recordDuration), h("div", { key: '475276bf120ff8d8efeac93a6f995ca682c060ff', class: "cty-record__main flex-align-end-center" }, this.recorded && (h("button", { key: '44b5040455b0b0dfe4856e1ce8f276b88a40db3a', class: "cty-record__redo flex-column-center cty-button-native", onClick: () => this.restartRecording() }, h("cty-icon", { key: 'dac95e673605a70b1bb7b4f8cd3286a92e16df3f', name: "cty-redo", class: "flex-center" }), h("span", { key: 'a05f28e8e1bbce8f2157b6d2279390d99611b4c4' }, "\u91CD\u5F55"))), !this.recording && (h("button", { key: 'fa7a50a51c1d3c4324f281e1e1834a2b7b2d41fd', class: "cty-record__button cty-button-native", onClick: () => this.handleRecordAction() }, !this.auditioning && !this.recorded && h("cty-icon", { key: '1de81b32cbbfcc3940532843331d0bb15aeb1709', name: "cty-record" }), this.auditioning && this.recorded && h("cty-icon", { key: '9f4b1ff04106cc582a110c5c4ad316c008d60d46', name: "cty-pause" }), !this.auditioning && this.recorded && h("cty-icon", { key: '018624c2e4fdb6557bf26536dc790cf756c0e7b4', name: "cty-play" }))), this.recording && (h("div", { key: 'c63ac425f56f4368547d03816229fbafc9cf355b', class: "cty-record__recording flex-center", onClick: () => this.stopRecording() }, h("cty-circle", { key: '442d02b544cfc40205ed08cc1646d873c491a3ff', rate: (this.recordSecond / this.maxSeconds) * 100, width: this.circleWidth, color: this.circleColor }), h("cty-icon", { key: '9b551acb4b93d67aef22a4b940589c5c13d4be32', name: "cty-pause" }))), this.recorded && (h("button", { key: 'a34557f097bf2c3e3493ff2be848ea938bd34a03', class: "cty-record__yes flex-column-center cty-button-native", onClick: () => this.confirmRecording() }, h("cty-icon", { key: '6e831023534f05a9358b28b3cba6284c799af394', name: "cty-yes", class: "flex-center" }), h("span", { key: '5263072b9b2ede2470449b1bf8fbe564d3c57fe5' }, "\u786E\u5B9A")))), !this.auditioning && !this.recorded && !this.recording && h("p", { key: '5e9af057993e5438499785a46413da533ee013a6', class: "cty-record__send" }, "\u4EC5\u53D1\u9001\u8BED\u97F3"), (this.auditioning || this.recorded || this.recording) && h("p", { key: 'aa05d4be824175bea5c05828de9c8bad1321281a', class: "cty-record__status" }, this.recordState))), h("ion-toast", { key: 'd9f3554a7339beae5810af2ddbaa44346fe8ae40', isOpen: this.toastOptions.isOpen, message: this.toastOptions.message, duration: 2000, position: "middle", onIonToastWillDismiss: () => (this.toastOptions.isOpen = false) }), this.showWarning && h("cty-alert", { key: 'd61a767a2f8da9872f10902c38ade3d3b5435402', title: "\u53D6\u6D88\u5F55\u97F3", content: "\u786E\u5B9A\u53D6\u6D88\u672C\u6761\u5F55\u97F3\uFF1F", buttons: ['取消', '确定'], overlayIndex: 1, onCtyTap: e => this.handleAlertAction(e) }, h("button", { key: '04f6327e2eaae0a2318911ddff452aaa9f790efb', slot: "close", class: "cty--record__alert-close cty-button-native", onClick: () => this.showWarning = false }, h("cty-icon", { key: '95fb53204b049369465cc84435b77a1576696064', name: "cty-close2" })))));
+        return (h(Host, { key: 'c4ba73a48a1bc147e056847d4ae46b203c44366c', class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { 'overlay-hidden cty-pos-cover': true }), style: { zIndex: `${20000 + this.overlayIndex}` } }, h("cty-backdrop", { key: '7218fe22a46c4ac3c028e46494597f36cab4ebe8', position: "bottom", backdropDismiss: this.backdropDismiss, onCtyDismiss: () => this.dismiss() }, h("div", { key: 'a87aec16b7b82b1bde78b687b925d7b48153391e', class: "cty-record safe-area-bottom-padding flex-center-column", onClick: (e) => e.stopPropagation() }, h("slot", { key: 'eccd57954f17e968d23ea94f75d8c3802366d691', name: "header" }), this.closeable && (h("div", { key: 'cbbc613e735c0ac4e2cf135ada8d09eb54aa7d6d', class: "cty-record__close", onClick: () => this.handleCloseRecord() }, h("cty-icon", { key: '77a6c951b39ac67bf8379cbd2753fce83f59338e', name: closeOutline }))), h("p", { key: '86ab24df51b170261d59b8f96a2965affc8c4f59', class: "cty-record__desc" }, this.recordDescription), h("p", { key: 'fde15e3b3250d5426067b2ee499fc352bb9aae27', class: "cty-record__time" }, this.recordDuration), h("div", { key: '897f325e516653d08fe27a250b11a02158e9bd89', class: "cty-record__main flex-align-end-center" }, this.recorded && (h("button", { key: 'a364a0b36d7f783b722f610e55acf6a4fd68b52f', class: "cty-record__redo flex-column-center cty-button-native", onClick: () => this.restartRecording() }, h("cty-icon", { key: '3ae2d555119e0f4a6bd9108067cac53ede537cf6', name: "cty-redo", class: "flex-center" }), h("span", { key: '3174b87f43dec28f2360266f5d7d96265b35877e' }, "\u91CD\u5F55"))), !this.recording && (h("button", { key: '3613cd1f3efcaa231a1ec6ee98239df3cba5de8d', class: "cty-record__button cty-button-native", onClick: () => this.handleRecordAction() }, !this.auditioning && !this.recorded && h("cty-icon", { key: 'ee0fe4426c826face420e41fbcfece92cd892861', name: "cty-record" }), this.auditioning && this.recorded && h("cty-icon", { key: 'd58ce9dcc99395534e9413c0ef7f807421556b94', name: "cty-pause" }), !this.auditioning && this.recorded && h("cty-icon", { key: '76e18cbd690d36bae0bc7cf910aeeaf8bbfa1e46', name: "cty-play" }))), this.recording && (h("div", { key: 'c0fc560fc891395af022ffe392fb12a0bd03dbcc', class: "cty-record__recording flex-center", onClick: () => this.stopRecording() }, h("cty-circle", { key: 'ad604f13d72f3817a43f5d1de4f869f0df888658', rate: (this.recordSecond / this.maxSeconds) * 100, width: this.circleWidth, color: this.circleColor }), h("cty-icon", { key: '2f45c995452aab5a2de6c4854a13dc87594690cc', name: "cty-pause" }))), this.recorded && (h("button", { key: '7b9075d36e6662ebc486d3303f4bb0d10eee63e5', class: "cty-record__yes flex-column-center cty-button-native", onClick: () => this.confirmRecording() }, h("cty-icon", { key: 'f15efd03ccebc4162ef678788a1753fd776327ef', name: "cty-yes", class: "flex-center" }), h("span", { key: '62bcfd0bfab7c3786ec083c1648a4bf996c6ee84' }, "\u786E\u5B9A")))), !this.auditioning && !this.recorded && !this.recording && h("p", { key: 'e03781ff170a57aad3a5d45a0ce5a42cefc13ba4', class: "cty-record__send" }, "\u4EC5\u53D1\u9001\u8BED\u97F3"), (this.auditioning || this.recorded || this.recording) && h("p", { key: '656d9e3141991dc629df234e663b0134dc56296c', class: "cty-record__status" }, this.recordState))), h("ion-toast", { key: '7ae66bbecd89e30b2ad8b0026558969244ad8ee2', isOpen: this.toastOptions.isOpen, message: this.toastOptions.message, duration: 2000, position: "middle", onIonToastWillDismiss: () => (this.toastOptions.isOpen = false) }), this.showWarning && h("cty-alert", { key: '128f2bb455c95c3822a963ae32c16f9074b828f3', title: "\u53D6\u6D88\u5F55\u97F3", content: "\u786E\u5B9A\u53D6\u6D88\u672C\u6761\u5F55\u97F3\uFF1F", buttons: ['取消', '确定'], overlayIndex: 1, onCtyTap: e => this.handleAlertAction(e) }, h("button", { key: '36942f7899f78986cea3bd7844a66fa591267ab3', slot: "close", class: "cty--record__alert-close cty-button-native", onClick: () => this.showWarning = false }, h("cty-icon", { key: 'f0ee3344beed11b83af7832ed23f28b329104ff8', name: "cty-close2" })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/cty-segment-slides.js

@@ -67,7 +67,7 @@ const SegmentSlides = /*@__PURE__*/ proxyCustomElement(class SegmentSlides exten
         return this.slidesEl.swiper;
     }
     render() {
-        return (h(Host, { key: '32052d2c24c9665960adcaa7aa18eb2142a2dbce', class: "cty-segment-slides" }, h("ion-segment", { key: 'ff4badb11c9a0291b4ec48724040e72b5d6da9d9', part: "segment", class: "cty-segment-slides__segment", value: this._slideValue, onIonChange: (e) => this.segmentChanged(e), mode: "md", style: { 'top': this._top } }, h("slot", { key: 'f9edb10bd371e7f876fc1affdb67153c037ced10', name: 'segments' }), this._segments.map((item, idx) => h("ion-segment-button", { part: "segment-button", value: idx, layout: this.layout, class: "cty-segment-slides__segment-button" }, item[this._segmentProps['label']] && h("span", { class: "cty-segment-slides__segment-label" }, item[this._segmentProps['label']]), item[this._segmentProps['icon']] && h("cty-icon", { name: item[this._segmentProps['icon']], class: "cty-segment-slides__segment-icon" }), h("slot", { name: 'segment-button' + idx })))), h("swiper-container", { key: 'ee007354d1c65e956f5c66923594a49513984edb', part: "container", class: "cty-segment-slides__swiper-container", ref: (el) => this.slidesEl = el, observer: this.observer, observerParents: this.observerParents, resistanceRatio: '0', autoHeight: this.autoHeight, onSwiperslidechangetransitionstart: () => this.slideChange() }, this._segments.map((_, idx) => h("swiper-slide", { part: "slide", class: "cty-segment-slides__swiper-slide" }, h("slot", { name: 'content' + idx }))))));
+        return (h(Host, { key: '4213f7b87bc6340e47b5a365b6e102a11c57df56', class: "cty-segment-slides" }, h("ion-segment", { key: '7219e32d86bc3a5009e10f05acdee3ead8f2bcb4', part: "segment", class: "cty-segment-slides__segment", value: this._slideValue, onIonChange: (e) => this.segmentChanged(e), mode: "md", style: { 'top': this._top } }, h("slot", { key: '6a2c2d61dcb53180ca3d334032f7e88e3f62b78b', name: 'segments' }), this._segments.map((item, idx) => h("ion-segment-button", { part: "segment-button", value: idx, layout: this.layout, class: "cty-segment-slides__segment-button" }, item[this._segmentProps['label']] && h("span", { class: "cty-segment-slides__segment-label" }, item[this._segmentProps['label']]), item[this._segmentProps['icon']] && h("cty-icon", { name: item[this._segmentProps['icon']], class: "cty-segment-slides__segment-icon" }), h("slot", { name: 'segment-button' + idx })))), h("swiper-container", { key: 'dc948453d173fc4531c01c07807569ee5f8676e5', part: "container", class: "cty-segment-slides__swiper-container", ref: (el) => this.slidesEl = el, observer: this.observer, observerParents: this.observerParents, resistanceRatio: '0', autoHeight: this.autoHeight, onSwiperslidechangetransitionstart: () => this.slideChange() }, this._segments.map((_, idx) => h("swiper-slide", { part: "slide", class: "cty-segment-slides__swiper-slide" }, h("slot", { name: 'content' + idx }))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/cty-selector.js

@@ -64,7 +64,7 @@ const Selector = /*@__PURE__*/ proxyCustomElement(class Selector extends HTMLEle
         return [this.value];
     }
     render() {
-        return (h(Host, { key: '8b9233925a03e38cf663e1758906209728c1c254', role: "listbox", class: {
+        return (h(Host, { key: '4294be3a3fa8169d9ad4e26c5d18b261cee659bf', role: "listbox", class: {
                 'cty-selector-grid': !!this.columns,
             }, style: { 'grid-template-columns': `repeat(${this.columns}, 1fr)` } }, this.options.map(option => {
             const valueArr = this.getValueArray();