cty-mui-core 1.0.37 → 1.0.39

package/components/cty-media-capture.js

@@ -2,7 +2,10 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { r as statusBar, s as secondsToVehicle } from './status-bar.js';
 import { v as videoCapture } from './video-capture.js';
 import { d as closeOutline, l as arrowUndoCircle } from './index2.js';
-import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$6 } from './alert.js';
+import { d as defineCustomElement$5 } from './backdrop.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './permission-alert.js';
 import { d as defineCustomElement$2 } from './icon2.js';
 
 const mediaCaptureCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}p,h1,h2,h3,h4,h5,h6{margin:0;padding:0}.flex{display:-ms-flexbox;display:flex}.flex-wrap{display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap}.flex-align-start{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.flex-align-center{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.flex-align-end{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end}.flex-justify-start{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start}.flex-justify-center{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.flex-justify-end{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.flex-align-end-start{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}.flex-align-end-center{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}.flex-align-end-end{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}.flex-center{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.flex-center-justify-end{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.flex-between{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.flex-center-between{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.flex-column{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column}.flex-column-align-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center}.flex-column-justify-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:center;justify-content:center}.flex-column-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.flex-column-between{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:justify;justify-content:space-between}.flex-column-center-between{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.cty-button-native{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin:0;padding:0;background:transparent;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;line-height:1;border:0;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;cursor:pointer}:host{--cty-media-capture-video-background:var(--cty-color-black);--cty-media-capture-header-top:var(--ion-safe-area-top, 44px);--cty-media-capture-header-padding-start:10px;--cty-media-capture-header-padding-end:15px;--cty-media-capture-close-icon-size:24px;--cty-media-capture-close-icon-color:var(--cty-color-primary);--cty-media-capture-time-padding:2px 5px;--cty-media-capture-time-bg-color:#f00;--cty-media-capture-time-size:var(--cty-font-size-base);--cty-media-capture-time-color:var(--cty-color-white);--cty-media-capture-time-border-radius:var(--cty-border-radius-small);--cty-media-capture-footer-bottom:30px;--cty-media-capture-switch-size:60px;--cty-media-capture-switch-bg-color:var(--cty-color-primary);--cty-media-capture-switch-active-bg-color:#f00;--cty-media-capture-switch-border-width:3px;--cty-media-capture-switch-active-size:24px;--cty-media-capture-status-size:48px;--cty-media-capture-confirm-min-height:30px;--cty-media-capture-confirm-padding:0 1em;--cty-media-capture-confirm-size:var(--cty-font-size-base);--cty-media-capture-confirm-color:var(--cty-color-white);--cty-media-capture-confirm-bg-color:var(--cty-color-primary);--cty-media-capture-confirm-right:15px;--cty-media-capture-confirm-border-radius:var(--cty-border-radius-base);--cty-media-capture-video-object-fit:cover;position:absolute;left:0;top:0;width:100vw;height:100vh;visibility:visible !important}:host(.cty-media-captured){background:var(--cty-media-capture-video-background)}.cty-media-capture__header{position:absolute;z-index:1;left:0;top:var(--cty-media-capture-header-top);width:100%;padding-left:var(--cty-media-capture-header-padding-start);padding-right:var(--cty-media-capture-header-padding-end)}.cty-capture__close-icon{font-size:var(--cty-media-capture-close-icon-size);color:var(--cty-media-capture-close-icon-color)}.cty-media-capture__time{position:absolute;left:50%;top:50%;padding:var(--cty-media-capture-time-padding);border-radius:var(--cty-media-capture-time-border-radius);font-size:var(--cty-media-capture-time-size);color:var(--cty-media-capture-time-color);-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.cty-media-capture__time-active{background:var(--cty-media-capture-time-bg-color)}.cty-media-capture__footer{position:absolute;bottom:var(--cty-media-capture-footer-bottom);left:0;width:100%}.cty-media-capture__switch{width:var(--cty-media-capture-switch-size);height:var(--cty-media-capture-switch-size);border-color:var(--cty-media-capture-switch-bg-color);border-width:var(--cty-media-capture-switch-border-width);border-style:solid;border-radius:var(--cty-border-radius-circle);cursor:pointer}.cty-media-capture__status{width:var(--cty-media-capture-status-size);height:var(--cty-media-capture-status-size);border-radius:var(--cty-border-radius-circle);background:var(--cty-media-capture-switch-bg-color);-webkit-transition:0.3s;transition:0.3s}.cty-media-capture__status-active{width:var(--cty-media-capture-switch-active-size);height:var(--cty-media-capture-switch-active-size);border-radius:var(--cty-border-radius-base);background:var(--cty-media-capture-switch-active-bg-color)}.cty-media-capture__confirm{position:absolute;right:var(--cty-media-capture-confirm-right);top:50%;min-height:var(--cty-media-capture-confirm-min-height);background:var(--cty-media-capture-confirm-bg-color);padding:var(--cty-media-capture-confirm-padding);color:var(--cty-media-capture-confirm-color);font-size:var(--cty-media-capture-confirm-size);border-radius:var(--cty-media-capture-confirm-border-radius);-webkit-transform:translateY(-50%);transform:translateY(-50%)}.cty-media-capture__video{position:absolute;left:0;top:0;width:100%;height:100%;-o-object-fit:var(--cty-media-capture-video-object-fit);object-fit:var(--cty-media-capture-video-object-fit)}";
@@ -26,11 +29,15 @@ const MediaCapture = /*@__PURE__*/ proxyCustomElement(class MediaCapture extends
         this.controls = false;
         this.poster = '';
         this.timeLimit = 0; //大于0则有录制时间限制
+        this.permissionAlertTitle = '需要申请开启相机权限';
+        this.permissionAlertContent = '需要开启相机权限，用于拍摄视频。我们承诺仅在功能使用时调用摄像头。';
         this.isCaptured = false;
         this.capturing = false;
         this.captureDuration = 0;
         this.filePath = '';
         this.videoFileUrl = '';
+        this.hasPermission = false;
+        this.permissionAlertVisible = false;
         this.originalBodyBackground = '';
         this._timer = 0;
     }
@@ -51,7 +58,15 @@ const MediaCapture = /*@__PURE__*/ proxyCustomElement(class MediaCapture extends
                     this.videoEl.play();
                 }, 150);
             }
-        }).catch(() => { });
+        }).catch((error) => {
+            const { code } = error || {};
+            if (code == 'PERMISSION_DENIED_NEED_SETTINGS') {
+                this.permissionAlertVisible = true;
+            }
+            else {
+                this.ctyDismiss.emit();
+            }
+        });
     }
     disconnectedCallback() {
         videoCapture.stopVideoCapture();
@@ -113,9 +128,27 @@ const MediaCapture = /*@__PURE__*/ proxyCustomElement(class MediaCapture extends
     confirm() {
         this.ctyComplete.emit({ data: this.filePath, url: this.videoFileUrl });
     }
+    async toOpenAppSetting(event) {
+        const { item } = event.detail;
+        if (item.action == 'permission') {
+            try {
+                await videoCapture.openAppSettings();
+                this.permissionAlertVisible = false;
+                this.initVideoCapture();
+            }
+            catch (error) {
+                this.closePermissionAlert(event);
+            }
+        }
+    }
+    closePermissionAlert(e) {
+        e.stopPropagation();
+        this.permissionAlertVisible = false;
+        this.ctyDismiss.emit();
+    }
     render() {
         const captureDuration = secondsToVehicle(this.captureDuration);
-        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' })));
+        return (h(Host, { key: 'dea0fde2e775dac71b8d627fbf72502ce8b01ac6', class: { 'cty-media-capture': true, 'cty-media-captured': this.isCaptured } }, h("div", { key: '639152bb0476a2577a91268088efd50d251c3962', class: "cty-media-capture__header" }, h("button", { key: 'a2246e49b5e58c4623b1e2d65c7d14e216be179f', onClick: () => this.doHeaderAction(), class: "cty-button-native" }, h("cty-icon", { key: 'a47c9b4f70a9ffa317e6ed165ed05098eba5198f', class: "cty-capture__close-icon", name: this.isCaptured ? this.revocationIcon : this.closeIcon })), this.captureTime && (this.isCaptured || this.capturing) && (h("span", { key: '0bd480dc6ba6963ac65c14c55b6d7d242a1b79e2', class: { 'cty-media-capture__time': true, 'cty-media-capture__time-active': this.capturing } }, captureDuration))), this.isCaptured && (h("video", { key: '9bb3ad454c63e53d6acd2968b2281a5c152a9390', 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: '90101389dea8e43c50dddf98c6cea75f8d324bd9', class: "cty-media-capture__footer flex-center" }, !this.isCaptured && (h("button", { key: '71f330777cdabab5829a2dbcf703ba3a40d99647', class: "cty-media-capture__switch cty-button-native", onClick: () => this.doCapture() }, h("span", { key: '6957cf9034bd74ea7ae4653557f417b2c934ee81', class: { 'cty-media-capture__status': true, 'cty-media-capture__status-active': this.capturing } }))), this.isCaptured && (h("button", { key: 'f508c7bb4cca833a13b1cfe3957a10114c92377e', class: "cty-media-capture__confirm cty-button-native", onClick: () => this.confirm() }, this.confirmText))), h("slot", { key: 'f5f99097bc702e82912865d500172f4a88966623' }), this.permissionAlertVisible && h("cty-permission-alert", { key: '07ce58f2409b15db1621343acec4a7938cc87474', title: this.permissionAlertTitle, content: this.permissionAlertContent, buttons: this.permissionAlertbuttons, onCtyDismiss: (e) => this.closePermissionAlert(e), onCtyTap: (e) => this.toOpenAppSetting(e) })));
     }
     get el() { return this; }
     static get style() { return mediaCaptureCss; }
@@ -130,11 +163,15 @@ const MediaCapture = /*@__PURE__*/ proxyCustomElement(class MediaCapture extends
         "controls": [4],
         "poster": [1],
         "timeLimit": [2, "time-limit"],
+        "permissionAlertTitle": [1, "permission-alert-title"],
+        "permissionAlertContent": [1, "permission-alert-content"],
+        "permissionAlertbuttons": [16, "permission-alertbuttons"],
         "isCaptured": [32],
         "capturing": [32],
         "captureDuration": [32],
         "filePath": [32],
         "videoFileUrl": [32],
+        "permissionAlertVisible": [32],
         "startVideoCapture": [64],
         "stopVideoCapture": [64]
     }]);
@@ -142,14 +179,29 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["cty-media-capture", "cty-icon", "ion-icon"];
+    const components = ["cty-media-capture", "cty-alert", "cty-backdrop", "cty-icon", "cty-permission-alert", "ion-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "cty-media-capture":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, MediaCapture);
             }
             break;
+        case "cty-alert":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "cty-backdrop":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
         case "cty-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "cty-permission-alert":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

package/components/cty-notice-bar.js

@@ -55,7 +55,7 @@ const NoticeBar = /*@__PURE__*/ proxyCustomElement(class NoticeBar extends HTMLE
         }, 1000);
     }
     render() {
-        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' })));
+        return (h(Host, { key: '69d2fe26714632a8cc1ba86a5baed8e454fb8ceb', class: "cty-notice-bar flex-align-center" }, this.startIcon && h("button", { key: '5b1de819afbc15424ecf7204cc861f69bed8e021', part: "start", class: "cty-button-native", onClick: (e) => this.doIconAction(e, 'start') }, h("cty-icon", { key: 'b79d1cbbe9d107743146f4a2329d13b82e60ea19', name: this.startIcon, class: "cty-notice-bar__start-icon" })), h("slot", { key: 'ad325087d6664d5ef7773f73c3329b280a121920', name: 'start' }), h("div", { key: '5bc22f7f060b5b130e6f38784a1c94d942997c64', class: "cty-notice-bar__wrap flex-align-center", ref: el => this.wrapRefEl = el }, h("div", { key: '4e35cade717e3244df86ac97e19369b89c2cd36f', class: { 'cty-ellipsis': !this.scrollable, 'cty-notice-bar__content': true }, ref: el => this.contentEl = el }, this.text, h("slot", { key: '609eb6474970b05f71e7c37e3631dd6efe106f3a' }))), this.endIcon && h("button", { key: '8a08f174e0725086a0153161a1b6eedaefc12219', part: "start", class: "cty-button-native", onClick: (e) => this.doIconAction(e, 'end') }, h("cty-icon", { key: '44190679ff737269165330799e2dab7f8b604d20', name: this.endIcon, class: "cty-notice-bar__end-icon" })), h("slot", { key: '7cfac5f266453d21254536461cecd83bd80c943f', 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: 'aed6d8695d41419600bad134950fc019f3c0cabd', class: "cty-pdf-viewer" }, h("slot", { key: 'b450966e3adba96b285fec2a06191cb70b705fa2' })));
+        return (h(Host, { key: 'b9c75cd618f45e4e8a81a2c3da1a4f03639552a0', class: "cty-pdf-viewer" }, h("slot", { key: '54730034acd9237e541b7f0cff8e37aa51a38b90' })));
     }
     get el() { return this; }
     static get style() { return pdfViewerCss; }

package/components/cty-permission-alert.d.ts

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

package/components/cty-permission-alert.js

@@ -0,0 +1,6 @@
+import { P as PermissionAlert, d as defineCustomElement$1 } from './permission-alert.js';
+
+const CtyPermissionAlert = PermissionAlert;
+const defineCustomElement = defineCustomElement$1;
+
+export { CtyPermissionAlert, defineCustomElement };

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: '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: {
+        return (h(Host, { key: 'cd7ee00d56f7d4382bb07ddb1ee7fcd60b8e4e73', class: "cty-progress" }, h("span", { key: 'af47715016908fd6c3a56e30e25419f2a01fc3a1', class: "cty-progress__portion", style: { width: this._percentage + '%' } }), this.pivot && (h("span", { key: 'c33139bd15eeb34a3fe07399c2ef8a920acdf04c', 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: '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" })));
+        return (h(Host, { key: '21abcd1dbbef70659e4e01b04259b9d6b302d03f', class: "cty-quick-access" }, h("slot", { key: '4373fda4c24c656de181c1b961d92c253c19dcc1', name: "header" }), h("div", { key: '2f6258413b1e94c0463611413e9b461796198d8f', 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: 'c463924b981ef2bcc89972d099cba6abe19838f1', name: "bottom" }), this.list.length > 1 && this.paper && (h("div", { key: 'a390fe76c1e6693ebad8bc63cb15b318579c8a76', 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: '8fc4482cbb1169fc8e7d65ded8f96ceb67aeeeb3', 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: '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 + '%' } })))))));
+        return (h(Host, { key: '4bb846f8dc1e71a95931f39f49d820c6db7f5d3c', 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

@@ -5,10 +5,11 @@ import { e as createDelegateController, f as createTriggerController, p as prepa
 import { c as createLockController, g as getClassMap, e as enterAnimation, l as leaveAnimation } from './theme.js';
 import { r as raf } from './helpers.js';
 import { d as closeOutline } from './index2.js';
-import { d as defineCustomElement$8 } from './alert.js';
-import { d as defineCustomElement$7 } from './backdrop.js';
-import { d as defineCustomElement$6 } from './circle.js';
-import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$9 } from './alert.js';
+import { d as defineCustomElement$8 } from './backdrop.js';
+import { d as defineCustomElement$7 } from './circle.js';
+import { d as defineCustomElement$6 } from './icon.js';
+import { d as defineCustomElement$5 } from './permission-alert.js';
 import { d as defineCustomElement$4 } from './icon2.js';
 import { d as defineCustomElement$3 } from './ripple-effect.js';
 import { d as defineCustomElement$2 } from './toast.js';
@@ -41,6 +42,8 @@ const Record = /*@__PURE__*/ proxyCustomElement(class Record extends HTMLElement
         this.minSeconds = 1;
         this.circleColor = 'var(--cty-color-primary)';
         this.circleWidth = 50;
+        this.permissionAlertTitle = '需要申请开启麦克风权限';
+        this.permissionAlertContent = '需要开启麦克风权限，以便发送语音消息。我们仅在主动点击语音按钮时开启录音。';
         this.root = 'default';
         this.animated = false;
         this.recordDescription = '点击开始录音';
@@ -53,6 +56,8 @@ const Record = /*@__PURE__*/ proxyCustomElement(class Record extends HTMLElement
         this.lasttime = 0;
         this.countDownTimer = 0;
         this.audioFile = '';
+        this.hasPermission = deviceInfo.isMicroMessager;
+        this.permissionAlertVisible = false;
         this.showWarning = false;
         this.toastOptions = {
             isOpen: false,
@@ -154,7 +159,36 @@ const Record = /*@__PURE__*/ proxyCustomElement(class Record extends HTMLElement
             }
         }
     }
+    async requestPermission() {
+        if (!this.hasPermission) {
+            try {
+                this.hasPermission = await audioRecorder.hasPermission();
+            }
+            catch (error) {
+                this.hasPermission = false;
+            }
+        }
+        if (!this.hasPermission) {
+            try {
+                await audioRecorder.requestPermission();
+                this.hasPermission = true;
+            }
+            catch (error) {
+                const { code, message } = error;
+                if (code == 'PERMISSION_DENIED_NEED_SETTINGS') {
+                    this.permissionAlertVisible = true;
+                }
+                else if (code != 'PERMISSION_DENIED_FIRST_TIME' && message) {
+                    this.toastOptions = { isOpen: true, message };
+                }
+            }
+        }
+    }
     async startRecord() {
+        await this.requestPermission();
+        if (!this.hasPermission) {
+            return;
+        }
         this.recordSecond = 0;
         this.recording = true;
         this.recorded = false;
@@ -242,8 +276,22 @@ const Record = /*@__PURE__*/ proxyCustomElement(class Record extends HTMLElement
             this.dismiss();
         }
     }
+    async toOpenAppSetting(event) {
+        const { item } = event.detail;
+        if (item.action == 'permission') {
+            try {
+                await audioRecorder.openAppSettings();
+            }
+            catch (error) { }
+            this.permissionAlertVisible = false;
+        }
+    }
+    closePermissionAlert(e) {
+        e.stopPropagation();
+        this.permissionAlertVisible = false;
+    }
     render() {
-        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" })))));
+        return (h(Host, { key: '43324ef68b0f2e8d1a9ce076112c87432df17213', class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { 'overlay-hidden cty-pos-cover': true }), style: { zIndex: `${20000 + this.overlayIndex}` } }, h("cty-backdrop", { key: '45ebeab107e3af77c58e3680b8dad93b299de623', position: "bottom", backdropDismiss: this.backdropDismiss, onCtyDismiss: () => this.dismiss() }, h("div", { key: 'd215b46f4de67b97979831404e9bb708a0b4fffe', class: "cty-record safe-area-bottom-padding flex-center-column", onClick: (e) => e.stopPropagation() }, h("slot", { key: 'b4b9ea9cfc0956436174eb43957f0d13217ec549', name: "header" }), this.closeable && (h("div", { key: 'a5ca9aadbc15f2d8e69b26acad63e4b9cb19cc37', class: "cty-record__close", onClick: () => this.handleCloseRecord() }, h("cty-icon", { key: 'ef0fa355dea771b315667761c4a0ea304ad90364', name: closeOutline }))), h("p", { key: 'bd67297dfaafcadb7f77816f1bfcf1231a59dea6', class: "cty-record__desc" }, this.recordDescription), h("p", { key: '327aa0fa2fa70dc70a9e8c91f481ddff0dd930dd', class: "cty-record__time" }, this.recordDuration), h("div", { key: 'a3f5acd54fda613ec1dbb70428dfbb64a34cc579', class: "cty-record__main flex-align-end-center" }, this.recorded && (h("button", { key: 'f6a65afcbcd1f395765df9ce2629dd4b53593f84', class: "cty-record__redo flex-column-center cty-button-native", onClick: () => this.restartRecording() }, h("cty-icon", { key: '4530c67455c3d551c16cba6a0a081a4cf9e22809', name: "cty-redo", class: "flex-center" }), h("span", { key: '4940cdee4266b61742b23ae60c78fc62c07cb09c' }, "\u91CD\u5F55"))), !this.recording && (h("button", { key: '54e3efce63bd0cdd1e96777252571e1c8945cdaa', class: "cty-record__button cty-button-native", onClick: () => this.handleRecordAction() }, !this.auditioning && !this.recorded && h("cty-icon", { key: '4cb49678c931c4f806a3e2c54b398fa0b62e56b8', name: "cty-record" }), this.auditioning && this.recorded && h("cty-icon", { key: '6ccc9e0e3a35a7a0daa50af3e2fcac2e81e44be2', name: "cty-pause" }), !this.auditioning && this.recorded && h("cty-icon", { key: 'aea60df70839e471250802a87682c293e9f9ea55', name: "cty-play" }))), this.recording && (h("div", { key: '719d50881292e5555acf44bb2047bb84d32ee3e7', class: "cty-record__recording flex-center", onClick: () => this.stopRecording() }, h("cty-circle", { key: '744b19f125e415686936d1af242ad96b7ad6508c', rate: (this.recordSecond / this.maxSeconds) * 100, width: this.circleWidth, color: this.circleColor }), h("cty-icon", { key: 'ef31ac9b11abad0f5d989c1647ce6203961cb84e', name: "cty-pause" }))), this.recorded && (h("button", { key: '50466c6883029528186cada3bb0c4a2d0bef71bf', class: "cty-record__yes flex-column-center cty-button-native", onClick: () => this.confirmRecording() }, h("cty-icon", { key: 'd5d2b82dcf94217659140b802237449ebeeddd87', name: "cty-yes", class: "flex-center" }), h("span", { key: '2a71ba3edecc390e8e246ed396665ece96154ed4' }, "\u786E\u5B9A")))), !this.auditioning && !this.recorded && !this.recording && h("p", { key: 'd10af2a0a94fed05752d36d90433e2e779253ae1', class: "cty-record__send" }, "\u4EC5\u53D1\u9001\u8BED\u97F3"), (this.auditioning || this.recorded || this.recording) && h("p", { key: '926937f8eb05e802b790d76e93936c95d1692695', class: "cty-record__status" }, this.recordState))), h("ion-toast", { key: '4590611480e2b27ecd1e0c8ac0719924252948a9', isOpen: this.toastOptions.isOpen, message: this.toastOptions.message, duration: 2000, position: "middle", onIonToastWillDismiss: () => (this.toastOptions.isOpen = false) }), this.showWarning && h("cty-alert", { key: 'bdfe00993cdb88a3a4f63292610e56b4cc6dbbf6', 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: 'e34d25e615d06fde71388d50ebb0ddc47be989a9', slot: "close", class: "cty--record__alert-close cty-button-native", onClick: () => this.showWarning = false }, h("cty-icon", { key: '4c4fe78dd1011901e763bbf41cb6e40409ce70e1', name: "cty-close2" }))), this.permissionAlertVisible && h("cty-permission-alert", { key: 'dcc1d21b7b7db47a4019e87483bcc42e18ed1fe9', title: this.permissionAlertTitle, content: this.permissionAlertContent, buttons: this.permissionAlertbuttons, onCtyDismiss: (e) => this.closePermissionAlert(e), onCtyTap: (e) => this.toOpenAppSetting(e) })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -260,6 +308,9 @@ const Record = /*@__PURE__*/ proxyCustomElement(class Record extends HTMLElement
         "minSeconds": [2, "min-seconds"],
         "circleColor": [1, "circle-color"],
         "circleWidth": [8, "circle-width"],
+        "permissionAlertTitle": [1, "permission-alert-title"],
+        "permissionAlertContent": [1, "permission-alert-content"],
+        "permissionAlertbuttons": [16, "permission-alertbuttons"],
         "root": [1],
         "animated": [4],
         "cssClass": [1, "css-class"],
@@ -273,6 +324,7 @@ const Record = /*@__PURE__*/ proxyCustomElement(class Record extends HTMLElement
         "recording": [32],
         "auditioning": [32],
         "recordSecond": [32],
+        "permissionAlertVisible": [32],
         "showWarning": [32],
         "toastOptions": [32],
         "present": [64],
@@ -289,7 +341,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["cty-record", "cty-alert", "cty-backdrop", "cty-circle", "cty-icon", "ion-icon", "ion-ripple-effect", "ion-toast"];
+    const components = ["cty-record", "cty-alert", "cty-backdrop", "cty-circle", "cty-icon", "cty-permission-alert", "ion-icon", "ion-ripple-effect", "ion-toast"];
     components.forEach(tagName => { switch (tagName) {
         case "cty-record":
             if (!customElements.get(tagName)) {
@@ -298,20 +350,25 @@ function defineCustomElement$1() {
             break;
         case "cty-alert":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "cty-backdrop":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "cty-circle":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "cty-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "cty-permission-alert":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }

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: '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 }))))));
+        return (h(Host, { key: 'd57bb2adf2db683a57db6c0ab0ec363287b93108', class: "cty-segment-slides" }, h("ion-segment", { key: '853398f61a1f62efc454e703e2ccc8d686947789', part: "segment", class: "cty-segment-slides__segment", value: this._slideValue, onIonChange: (e) => this.segmentChanged(e), mode: "md", style: { 'top': this._top } }, h("slot", { key: '2b37890e9c5b68c5781739308d98161fb501dc77', 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: 'c2776d7956c14886074ba5b88f93769d0b1e88f1', 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: '4294be3a3fa8169d9ad4e26c5d18b261cee659bf', role: "listbox", class: {
+        return (h(Host, { key: '8184ae43a40feeada061d46199df3fafced3b370', role: "listbox", class: {
                 'cty-selector-grid': !!this.columns,
             }, style: { 'grid-template-columns': `repeat(${this.columns}, 1fr)` } }, this.options.map(option => {
             const valueArr = this.getValueArray();

package/components/cty-share-sheet.js

@@ -394,7 +394,7 @@ const ShareSheet = /*@__PURE__*/ proxyCustomElement(class ShareSheet extends HTM
         this.ctyGuide.emit();
     }
     render() {
-        return (h(Host, { key: 'ca489b414cf1c01d6ce00950d5b5dbad977a938d', class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { 'overlay-hidden': true }), style: { zIndex: `${20000 + this.overlayIndex}` } }, h("cty-backdrop", { key: 'ddea0259656724152216b2b1a545ed5123301372', backdropDismiss: this.backdropDismiss, position: "bottom", onCtyDismiss: () => this.dismiss() }, this.guide && this.isMicroMessager && (h("div", { key: '3f3cc0cc5b2bf12822329b976121bbbef907aef3', class: "cty-share-guide", onClick: (e) => this._doGuid(e) }, h("img", { key: '06e43710cedfcf5c14881b1fa5e20150d5dd2ded', src: this.guideImg }))), h("slot", { key: 'ae58ed4611f66cd19d4bfff5a4970ba82e19e8fc', name: "share-sheet" }), !this.hiddenSheet && (h("div", { key: 'bd0cc93dba9b9244d0155ce0f81dff3368349493', class: "cty-share-sheet safe-area-bottom-padding", onClick: (e) => e.stopPropagation() }, h("slot", { key: '553a9e3cf19d4bd6bc00c9f93526bf8d8ef61a63', name: "header" }), (this.title || this.description) && (h("div", { key: '5a5577026e2523ec2c3a6b1183234b5fe989f1b9', class: "cty-share-sheet__header", part: "header" }, this.title && h("cty-divider", { key: '8f68ea8d492fe8644fc6f9d514bc25a41d36b771' }, this.title), this.description && h("p", { key: 'fceafcb4cf9016ff3fde77a39986e13b74f464bb', class: "cty-share-sheet__description" }, this.description))), h("slot", { key: 'ac0002634cf318cd4bf88c2c4dc458b95a900045', name: "options" }), h("div", { key: '71a0bb52285b752d8e22ca2d281b390b484d1a4a', class: "cty-share-sheet__options flex", part: "options" }, this._options.map((option, idx) => (h("div", { part: "option", class: "cty-share-sheet__option flex-align-center", onClick: () => this._buttonClick(option, idx) }, option.icon && option.icon.indexOf('/') >= 0 && !option.icon.endsWith('.svg') && h("img", { class: "cty-share-sheet__img", src: option.icon }), option.icon && (option.icon.indexOf('/') < 0 || option.icon.endsWith('.svg')) && h("cty-icon", { name: option.icon, class: "cty-share-sheet__icon" }), option.title && h("span", { class: "cty-share-sheet__option-title" }, option.title), option.description && h("span", { class: "cty-share-sheet__option-description" }, option.description))))), h("slot", { key: '23f8e2859484ef5415ef7695b4fe99cdbcdf7901', name: "cancel" }), this.cancelText && (h("button", { key: '509f931694c9ca9831c569c0be252f7adec4e321', part: "cancel", class: "cty-button-native cty-share-sheet__cancel", onClick: () => this.dismiss() }, this.cancelText))))), this.showPermissionPurpose && h("cty-permission-purpose", { key: '9bb7de83692cae24dcdfb0210bfab0eff26158c7', description: this.permissionDescription }), h("ion-toast", { key: '6eebb5fafd77e5f904b1b9289972de5ecf66f245', "is-open": this.isToastOpen, message: this.toastContent, duration: 2000 })));
+        return (h(Host, { key: '91ae445e5b8e6d4c4f556813c46827662c3caa71', class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { 'overlay-hidden': true }), style: { zIndex: `${20000 + this.overlayIndex}` } }, h("cty-backdrop", { key: '5a77795a16d71fe24a1d71295aae63a589e6349d', backdropDismiss: this.backdropDismiss, position: "bottom", onCtyDismiss: () => this.dismiss() }, this.guide && this.isMicroMessager && (h("div", { key: 'b9df03165a447b5a386104985a63599a8be14ad9', class: "cty-share-guide", onClick: (e) => this._doGuid(e) }, h("img", { key: 'd6ab14d9d8fe4c42d239460d9f3a56bd77b8f082', src: this.guideImg }))), h("slot", { key: 'cd693bc3c0fb09d05669fe4d40e44a2835346f26', name: "share-sheet" }), !this.hiddenSheet && (h("div", { key: '92834554e2db55f4e4820acbabae4295830f3d63', class: "cty-share-sheet safe-area-bottom-padding", onClick: (e) => e.stopPropagation() }, h("slot", { key: '055adadf28f9b98e367340da523b333a5a620171', name: "header" }), (this.title || this.description) && (h("div", { key: 'ca99c89598e6df644d33f96df3f7b23fcac55357', class: "cty-share-sheet__header", part: "header" }, this.title && h("cty-divider", { key: '02fddae72eb92bae8b17e8698fde6ffd6c38df21' }, this.title), this.description && h("p", { key: '4dfc9d2fc63e334d21f36615155a14de1e4a8316', class: "cty-share-sheet__description" }, this.description))), h("slot", { key: '52fbd2f38afce3445f27cc6e38d6dc16337abdfa', name: "options" }), h("div", { key: 'd845d4240a80174bd151e7d692fb5f9ab580eaf8', class: "cty-share-sheet__options flex", part: "options" }, this._options.map((option, idx) => (h("div", { part: "option", class: "cty-share-sheet__option flex-align-center", onClick: () => this._buttonClick(option, idx) }, option.icon && option.icon.indexOf('/') >= 0 && !option.icon.endsWith('.svg') && h("img", { class: "cty-share-sheet__img", src: option.icon }), option.icon && (option.icon.indexOf('/') < 0 || option.icon.endsWith('.svg')) && h("cty-icon", { name: option.icon, class: "cty-share-sheet__icon" }), option.title && h("span", { class: "cty-share-sheet__option-title" }, option.title), option.description && h("span", { class: "cty-share-sheet__option-description" }, option.description))))), h("slot", { key: 'e7f1a1873f568faf04fa8a0c881e27c370eed775', name: "cancel" }), this.cancelText && (h("button", { key: '80e5bdfb42c7c79ba96b9adfb8b37664d2ae32d6', part: "cancel", class: "cty-button-native cty-share-sheet__cancel", onClick: () => this.dismiss() }, this.cancelText))))), this.showPermissionPurpose && h("cty-permission-purpose", { key: '05109f049fcfe3f95ab56ac91c07a48ccf4a84cc', description: this.permissionDescription }), h("ion-toast", { key: '6e064a31101c1d9a29eda650b00a3b18b776b062', "is-open": this.isToastOpen, message: this.toastContent, duration: 2000 })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/cty-side-panel.js

@@ -35,7 +35,7 @@ const SidePanel = /*@__PURE__*/ proxyCustomElement(class SidePanel extends HTMLE
             }, part: 'content-item' }, h("slot", { name: 'content' + index }));
     }
     render() {
-        return (h(Host, { key: '2697433b8103652884bcba1092a949e3cf156b35', class: 'cty-side-panel flex' }, h("div", { key: 'b7cbd85e5517197b3d8353f8bf980d1eee526cde', class: 'cty-side-panel-nav', part: 'nav' }, this.sideBars.map((item, index) => this.renderNavItem(item, index))), this.singleContent && h("div", { key: '2ea136b1c3fda6186728e5523bd885caf2b75abb', class: 'cty-side-panel-content', part: 'content' }, h("slot", { key: 'f0cf620561e6d35a1d74417913ab93878cf6bef5' }), h("slot", { key: '6e8122fe4745910f3c287463703f9ba3f1e41d84', name: 'content' + this.value })), !this.singleContent && h("div", { key: 'f850b65de05afbe7f148cf2f134e1bc2ffdf48dc', class: 'cty-side-panel-content' }, this.sideBars.map((_, index) => this.renderContentItem(index)))));
+        return (h(Host, { key: 'd4ccbc7a5e08436a2de5474726e6f239f3617616', class: 'cty-side-panel flex' }, h("div", { key: 'a32ae0ef541d94cc380414ed716cbaaae9b837d4', class: 'cty-side-panel-nav', part: 'nav' }, this.sideBars.map((item, index) => this.renderNavItem(item, index))), this.singleContent && h("div", { key: '97633fbba588804a1f2f7e237a113c9cb5bd5453', class: 'cty-side-panel-content', part: 'content' }, h("slot", { key: '863a072aed538fffaad933dcf0d077e6c65eb9c1' }), h("slot", { key: 'b7d28b8e62ab85db1cb9b86f460a4de08b597896', name: 'content' + this.value })), !this.singleContent && h("div", { key: 'cb18b933d68e8eb54253ac25e56745dd0f31d824', class: 'cty-side-panel-content' }, this.sideBars.map((_, index) => this.renderContentItem(index)))));
     }
     get el() { return this; }
     static get style() { return sidePanelCss; }

package/components/cty-stepper.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { i as clamp } from './format.js';
 
-const stepperCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}p,h1,h2,h3,h4,h5,h6{margin:0;padding:0}.flex{display:-ms-flexbox;display:flex}.flex-wrap{display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap}.flex-align-start{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.flex-align-center{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.flex-align-end{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end}.flex-justify-start{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start}.flex-justify-center{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.flex-justify-end{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.flex-align-end-start{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}.flex-align-end-center{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}.flex-align-end-end{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}.flex-center{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.flex-center-justify-end{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.flex-between{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.flex-center-between{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.flex-column{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column}.flex-column-align-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center}.flex-column-justify-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:center;justify-content:center}.flex-column-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.flex-column-between{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:justify;justify-content:space-between}.flex-column-center-between{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.cty-button-native{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin:0;padding:0;background:transparent;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;line-height:1;border:0;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;cursor:pointer}:host{--cty-stepper-input-width:32px;--cty-stepper-input-height:28px;--cty-stepper-input-offset:0 2px;--cty-stepper-input-padding:0;--cty-stepper-input-background:var(--cty-color-light);--cty-stepper-input-font-size:var(--cty-font-size-base);--cty-stepper-input-color:var(--cty-text-color-primary);--cty-stepper-input-disabled-background:var(--cty-color-light);--cty-stepper-input-disabled-color:var(--cty-text-color-primary);--cty-stepper-input-disabled-opacity:0.6;--cty-stepper-button-width:28px;--cty-stepper-button-height:28px;--cty-stepper-button-padding:0;--cty-stepper-button-offset:0 2px;--cty-stepper-button-color:var(--cty-text-color-primary);--cty-stepper-button-background:var(--cty-color-light);--cty-stepper-button-font-size:var(--cty-font-size-extra-large);--cty-stepper-minus-border-radius:4px 0 0 4px;--cty-stepper-plus-border-radius:0 4px 4px 0;--cty-stepper-button-disabled-color:#c8c9cc;--cty-stepper-button-disabled-background:var(--cty-color-light);--cty-stepper-button-disabled-opacity:.6;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.cty-input-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:var(--cty-stepper-input-width);height:var(--cty-stepper-input-height);margin:var(--cty-stepper-input-offset)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.cty-stepper_input{width:100%;height:100%;background:transparent;border:0;outline:none;text-align:center;vertical-align:middle;background:var(--cty-stepper-input-background);padding:var(--cty-stepper-input-padding);color:var(--cty-stepper-input-color);font-size:var(--cty-stepper-input-font-size)}.cty-stepper_input[disabled]{color:var(--cty-stepper-input-disabled-color);background:var(--cty-stepper-input-disabled-background);opacity:var(--cty-stepper-input-disabled-opacity);cursor:not-allowed}.cty-button-native{width:var(--cty-stepper-button-width);height:var(--cty-stepper-button-height);padding:var(--cty-stepper-button-padding);margin:var(--cty-stepper-button-offset);background:var(--cty-stepper-button-background);color:var(--cty-stepper-button-color);font-size:var(--cty-stepper-button-font-size)}.cty-button-native[disabled]{color:var(--cty-stepper-button-disabled-color);background:var(--cty-stepper-button-disabled-background);opacity:var(--cty-stepper-button-disabled-opacity);cursor:not-allowed}.cty-stepper_minus{--border-radius:var(--cty-stepper-minus-border-radius)}.cty-stepper_plus{--border-radius:var(--cty-stepper-plus-border-radius)}";
+const stepperCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}p,h1,h2,h3,h4,h5,h6{margin:0;padding:0}.flex{display:-ms-flexbox;display:flex}.flex-wrap{display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap}.flex-align-start{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.flex-align-center{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.flex-align-end{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end}.flex-justify-start{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start}.flex-justify-center{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.flex-justify-end{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.flex-align-end-start{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}.flex-align-end-center{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}.flex-align-end-end{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}.flex-center{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.flex-center-justify-end{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.flex-between{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.flex-center-between{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.flex-column{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column}.flex-column-align-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center}.flex-column-justify-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:center;justify-content:center}.flex-column-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.flex-column-between{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:justify;justify-content:space-between}.flex-column-center-between{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.cty-button-native{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin:0;padding:0;background:transparent;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;line-height:1;border:0;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;cursor:pointer}:host{--cty-stepper-input-width:32px;--cty-stepper-input-height:28px;--cty-stepper-input-offset:0 2px;--cty-stepper-input-padding:0;--cty-stepper-input-background:var(--cty-color-light);--cty-stepper-input-font-size:var(--cty-font-size-base);--cty-stepper-input-color:var(--cty-text-color-primary);--cty-stepper-input-disabled-background:var(--cty-color-light);--cty-stepper-input-disabled-color:var(--cty-text-color-primary);--cty-stepper-input-disabled-opacity:0.6;--cty-stepper-button-width:28px;--cty-stepper-button-height:28px;--cty-stepper-button-padding:0;--cty-stepper-button-offset:0 2px;--cty-stepper-button-color:var(--cty-text-color-primary);--cty-stepper-button-background:var(--cty-color-light);--cty-stepper-button-font-size:var(--cty-font-size-extra-large);--cty-stepper-minus-border-radius:4px 0 0 4px;--cty-stepper-plus-border-radius:0 4px 4px 0;--cty-stepper-button-disabled-color:#c8c9cc;--cty-stepper-button-disabled-background:var(--cty-color-light);--cty-stepper-button-disabled-opacity:.6;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.cty-input-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:var(--cty-stepper-input-width);height:var(--cty-stepper-input-height);margin:var(--cty-stepper-input-offset)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.cty-stepper_input{width:100%;height:100%;background:transparent;border:0;outline:none;text-align:center;vertical-align:middle;background:var(--cty-stepper-input-background);padding:var(--cty-stepper-input-padding);color:var(--cty-stepper-input-color);font-size:var(--cty-stepper-input-font-size);border:var(--cty-stepper-input-border, none);border-radius:var(--cty-stepper-input-border-radius, 0)}.cty-stepper_input[disabled]{color:var(--cty-stepper-input-disabled-color);background:var(--cty-stepper-input-disabled-background);opacity:var(--cty-stepper-input-disabled-opacity);cursor:not-allowed}.cty-button-native{width:var(--cty-stepper-button-width);height:var(--cty-stepper-button-height);padding:var(--cty-stepper-button-padding);margin:var(--cty-stepper-button-offset);background:var(--cty-stepper-button-background);color:var(--cty-stepper-button-color);font-size:var(--cty-stepper-button-font-size);border:var(--cty-stepper-button-border, none)}.cty-button-native[disabled]{color:var(--cty-stepper-button-disabled-color);background:var(--cty-stepper-button-disabled-background);opacity:var(--cty-stepper-button-disabled-opacity);cursor:not-allowed}.cty-stepper_minus{border-radius:var(--cty-stepper-minus-border-radius)}.cty-stepper_plus{border-radius:var(--cty-stepper-plus-border-radius)}";
 
 const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLElement {
     constructor() {
@@ -28,6 +28,7 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         this.plusText = '+';
         this.showPlus = true;
         this.disablePlus = false;
+        this.beforeChange = () => true;
     }
     componentWillLoad() {
         const value = clamp(+this.value, +this.min, +this.max);
@@ -38,6 +39,9 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
     }
     async handleMinus() {
         const { value, min, step } = this;
+        if (this.beforeChange && !(await this.beforeChange(+value, -step))) {
+            return;
+        }
         let newValue = this.calculateNewValue(+value, +step, 'minus');
         if (+newValue <= +min) {
             newValue = min;
@@ -48,6 +52,9 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
     }
     async handlePlus() {
         const { value, max, step } = this;
+        if (this.beforeChange && !(await this.beforeChange(+value, +step))) {
+            return;
+        }
         let newValue = this.calculateNewValue(+value, +step);
         if (+newValue > +max) {
             newValue = max;
@@ -95,7 +102,7 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         return 0;
     }
     render() {
-        return (h(Host, { key: 'd47a21dc76aa8712bce1845b09474da69a5951fb', class: "cty-stepper" }, this.showMinus && (h("button", { key: '41053878fc7fbd11248554a9e92310ce96d92d10', class: "cty-stepper_minus cty-button-native", disabled: +this.min === +this.value || this.disabled || this.disableMinus, onClick: () => this.handleMinus() }, this.minusText)), this.showInput && (h("div", { key: '6f13b1ed3f03bff1e36e6ed5cb9f213201fb4767', class: "cty-input-wrapper" }, h("input", { key: '9189e52f5f68ca91a0a78bf0e61f271137bff7a5', class: "cty-stepper_input", type: "number", disabled: this.disabled || this.disableInput, readonly: this.readonly, value: this.value, onBlur: (e) => this.handleInputBlur(e), onChange: (e) => this.handleInputChange(e), onFocus: e => this.handleFocus(e), onKeyPress: e => this.handleKeyPress(e) }))), this.showPlus && (h("button", { key: 'bb3c311791945851aac2b610d6dee05405516de3', class: "cty-stepper_plus cty-button-native", disabled: +this.max === +this.value || this.disabled || this.disablePlus, onClick: () => this.handlePlus() }, this.plusText))));
+        return (h(Host, { key: '49bba785b43a7bd1c8419f50f273200d73ed02dc', class: "cty-stepper" }, this.showMinus && (h("button", { key: '0945f647adb0df5224c362364f5fa4677e31c2c9', part: "minus", class: "cty-stepper_minus cty-button-native", disabled: +this.min === +this.value || this.disabled || this.disableMinus, onClick: () => this.handleMinus() }, this.minusText)), this.showInput && (h("div", { key: '3b72a9a10b41065f0996915d404933e82d6f9435', class: "cty-input-wrapper" }, h("input", { key: '41781e498b05f976de4192e4e9e5f72d24841f09', class: "cty-stepper_input", type: "number", disabled: this.disabled || this.disableInput, readonly: this.readonly, value: this.value, onBlur: (e) => this.handleInputBlur(e), onChange: (e) => this.handleInputChange(e), onFocus: e => this.handleFocus(e), onKeyPress: e => this.handleKeyPress(e), part: "input" }))), this.showPlus && (h("button", { key: '7b945de98a1c14527ff74a4818b44720bc45ec25', part: "plus", class: "cty-stepper_plus cty-button-native", disabled: +this.max === +this.value || this.disabled || this.disablePlus, onClick: () => this.handlePlus() }, this.plusText))));
     }
     get el() { return this; }
     static get style() { return stepperCss; }
@@ -115,6 +122,7 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         "plusText": [1, "plus-text"],
         "showPlus": [4, "show-plus"],
         "disablePlus": [4, "disable-plus"],
+        "beforeChange": [16, "before-change"],
         "handleMinus": [64],
         "handlePlus": [64]
     }]);

package/components/cty-steps.js

@@ -23,7 +23,7 @@ const Steps = /*@__PURE__*/ proxyCustomElement(class Steps extends HTMLElement {
         this.ctyStepTap.emit(index);
     }
     render() {
-        return (h(Host, { key: '8709443180e52bf0ce7416db6b06a21d6d6c1241', class: 'cty-steps cty-steps__' + this.direction }, h("div", { key: '4d68fcbe73563b20e1d5cd98782235aaeaf087fb', class: "cty-steps__items" }, h("slot", { key: 'dd8e181958ce313c7ad4436280f64c86d9b49e9d' }))));
+        return (h(Host, { key: '5745583e60bbf601374638b8a5f706f316a846ab', class: 'cty-steps cty-steps__' + this.direction }, h("div", { key: '72dbc47ceca5f930d42003edd69282939cbae126', class: "cty-steps__items" }, h("slot", { key: '6b252b0ded95e31c185edbfc0262f351dd7886a1' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/cty-text-ellipsis.js

@@ -127,8 +127,8 @@ const TextEllipsis = /*@__PURE__*/ proxyCustomElement(class TextEllipsis extends
     }
     ;
     render() {
-        return (h(Host, { key: '7ab7bb1721e7ad6fbc3cb0126dde7d759c532f62', class: "cty-text-ellipsis" }, h("span", { key: 'b7e671d517b94a10b73f68dad09974d0e4b5f688' }, this.expanded ? this.content : this.text), this.hasExpand &&
-            h("button", { key: '48a54697fedd3d0009311286a8d1541b31d0b801', onClick: () => this.toggleExpand(), class: "cty-text-ellipsis__expand cty-button-native" }, this.expanded ? this.collapseText : this.expandText)));
+        return (h(Host, { key: '95f2e897086901c648bbf87de5609650be8e675c', class: "cty-text-ellipsis" }, h("span", { key: '2f4c1fd976816e9f09fcec78be781a1675a36302' }, this.expanded ? this.content : this.text), this.hasExpand &&
+            h("button", { key: '59fc941bb365858a6e7720e7ffe3f542496dc6b7', onClick: () => this.toggleExpand(), class: "cty-text-ellipsis__expand cty-button-native" }, this.expanded ? this.collapseText : this.expandText)));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/cty-title-bar.js

@@ -19,7 +19,7 @@ const TitleBar = /*@__PURE__*/ proxyCustomElement(class TitleBar extends HTMLEle
         this.ctyClickEnd.emit();
     }
     render() {
-        return (h(Host, { key: 'b960195f9d44749465c11d5cef2078f2be588154', class: "cty-title-bar flex-between" }, h("div", { key: '258b8032dde21375d1f09c5d573d45a795963006', class: "cty-title-bar-start flex-align-center" }, h("slot", { key: '30a9c84c34c471ea7ffecd266f515e42b5528b73', name: "start-icon" }, this.startIcon && h("cty-icon", { key: '8484739dd99d4f88630429c0f8a011b167fa08e4', name: this.startIcon, class: "cty-title-bar-start__icon" })), h("slot", { key: '020960115bcf36c0970b6227b197aa1ba2ba2951', name: "title" }, this.title && h("h3", { key: '15f6717cf2ca855ae72d9bceb29ef06a76eb526b', class: "cty-title-bar-title cty-ellipsis" }, this.title))), h("div", { key: '4346338ef92f6eecb2bdcbb46e93a1186f9912d1', class: "cty-title-bar-end flex-center-justify-end", onClick: () => this.clickEnd() }, h("slot", { key: '73261237d39e3961c2c838a09e4c3992ea86ed69', name: "end-text" }, this.endText && h("span", { key: '27c491fa95000c665e5460593add153ca5ff0ef9', class: "cty-title-bar-end__text" }, this.endText)), h("slot", { key: 'dc51e0b4a9b320ee77873df1aaf7c4509a2ee422', name: "end-icon" }, this.endIcon && h("cty-icon", { key: '34b5b9ff622f03afb4610d6d8eb17d954a255788', name: this.endIcon, class: "cty-title-bar-end__icon" })))));
+        return (h(Host, { key: 'c97b8916b8e9a74962a0aeb9186b700027150724', class: "cty-title-bar flex-between" }, h("div", { key: 'fe96befb4d176a262cdc8ff8e9613f7253ec7074', class: "cty-title-bar-start flex-align-center" }, h("slot", { key: '95500656c92be76b080a79b67b0b8e55215803c2', name: "start-icon" }, this.startIcon && h("cty-icon", { key: '9fbdf275bf289ea5fa515b306ede199c7ad5c4fe', name: this.startIcon, class: "cty-title-bar-start__icon" })), h("slot", { key: '2402ed869ec0ae482de8bb2992d98eedbe78a5eb', name: "title" }, this.title && h("h3", { key: '0da4af519b6bbe2d407ca02b660f9c25041a5a0d', class: "cty-title-bar-title cty-ellipsis" }, this.title))), h("div", { key: '8e7ac912edfbb07bcb614ff7e6d7a30163b5261a', class: "cty-title-bar-end flex-center-justify-end", onClick: () => this.clickEnd() }, h("slot", { key: '01ff584f499ede8101644ce0ca40c3358f867d54', name: "end-text" }, this.endText && h("span", { key: '7fb2410cd5c2f409f16ab5bb6400c103dd60927f', class: "cty-title-bar-end__text" }, this.endText)), h("slot", { key: '1ef2f029ec69647e6bf4c4f11fd275a9f94a26fc', name: "end-icon" }, this.endIcon && h("cty-icon", { key: '1d07a316ca0c4e6669fc0e10191e66eee893320d', name: this.endIcon, class: "cty-title-bar-end__icon" })))));
     }
     get el() { return this; }
     static get style() { return titleBarCss; }