@ptcwebops/ptcw-design 2.3.0 → 2.3.2

package/dist/esm/ptc-media-card.entry.js

@@ -1,65 +1,65 @@
-import { r as registerInstance, h, H as Host } from './index-22a84644.js';
-import { a as getFileExtension } from './utils-38decc43.js';
+import { r as registerInstance, h, H as Host } from './index-8db28d54.js';
+import { a as getFileExtension } from './utils-f937097d.js';
 
 const ptcMediaCardCss = ":host{display:block;position:relative;width:100%;background-size:cover;background-position:50%;background-repeat:no-repeat}:host .anchor-wrap{height:100%;width:100%;display:block;text-decoration:none;position:relative}:host video{object-fit:cover;height:100%;width:100%;z-index:0;position:absolute;left:0;right:0;top:0;bottom:0;display:none}:host(.media-card) .card-wrap{display:flex;height:100%;width:100%;position:relative;z-index:1;min-height:329px;align-items:end}:host(.media-card) .card-wrap .car-content{padding:20px 30px 30px 30px}:host(.media-card) .card-wrap .car-content h4,:host(.media-card) .card-wrap .car-content h3{color:#fff}:host(.media-card) .card-wrap .car-content h3{position:relative;margin-bottom:0;font-size:var(--ptc-font-size-large);text-shadow:1px 3px 30px #000;line-height:var(--ptc-line-height-denser);display:inline;letter-spacing:1.1px}:host(.media-card) .card-wrap .car-content h3::before{content:\"\";width:100%;height:3px;background-image:url(\"data:image/svg+xml,%3Csvg width='60' height='1' viewBox='0 0 60 1' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='1' fill='%2333A13C'/%3E%3C/svg%3E\");background-repeat:repeat;position:absolute;background-size:initial;top:-10px}:host(.media-card) .card-wrap .car-content h4{text-shadow:1px 3px 30px var(--color-black);font-weight:var(--ptc-font-weight-semibold);display:block;font-size:var(--ptc-font-size-x-small);font-style:normal;font-stretch:normal;letter-spacing:0.6px}:host(.bureau-card){height:100%;position:relative}";
 
-const PtcMediaCard = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * ref video element
-     */
-    this.videoEle = undefined;
-    this.cardType = 'media-card';
-    this.cardHref = undefined;
-    this.target = '_self';
-    this.rel = undefined;
-    this.activeBackgroundImage = undefined;
-    this.hoverBackgroundImage = undefined;
-    this.heading = undefined;
-    this.headingTransform = 'none';
-    this.category = undefined;
-    this.isHovered = false;
-  }
-  WatchStateHandler(newValue) {
-    if (this.videoEle) {
-      newValue ? this.videoEle.play() : this.videoEle.pause();
-    }
-  }
-  getCardText() {
-    if (this.cardType === 'media-card') {
-      return [
-        h("div", { class: "card-wrap" }, h("div", { class: "car-content" }, h("h4", null, this.category, " "), h("h3", null, this.heading))),
-      ];
-    }
-    // else if (this.cardType === 'bureau-card') {
-    //   return (
-    //     <div class="card-content">
-    //       <slot name="bureau-description"></slot>
-    //     </div>
-    //   );
-    // }
-  }
-  render() {
-    const Tag = !!this.cardHref ? 'a' : 'div';
-    const isVideoUrl = getFileExtension(this.hoverBackgroundImage) === '.mp4' ? true : false;
-    //console.log("isVideoUrl: " + isVideoUrl + " hoverBackgroundImage: " + this.hoverBackgroundImage);
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap, onmouseenter: () => (this.isHovered = true), onmouseleave: () => (this.isHovered = false),
-      // {...(!isVideoUrl
-      //   ? { ...{ style: this.isHovered ? { backgroundImage: `url(${this.hoverBackgroundImage})` } : { backgroundImage: `url(${this.activeBackgroundImage})` } } }
-      //   : null)}
-      style: this.isHovered ? { backgroundImage: `url(${this.hoverBackgroundImage})` } : { backgroundImage: `url(${this.activeBackgroundImage})` } }, h(Tag, { class: 'anchor-wrap', target: this.target, href: this.cardHref, rel: this.rel }, isVideoUrl && (h("video", { muted: true, loop: true, playsinline: true, poster: this.activeBackgroundImage, ref: el => (this.videoEle = el), style: this.isHovered ? { display: 'block' } : { display: 'none' } }, h("source", { src: this.hoverBackgroundImage, type: "video/mp4" }, "Your browser does not support the video tag."))), this.cardType === "media-card" && h("ptc-overlay", { "filter-color": "black-2" }), this.cardType === "media-card" && this.getCardText())));
-  }
-  getCssClassMap() {
-    return {
-      [this.cardType]: true,
-    };
-  }
-  static get watchers() { return {
-    "isHovered": ["WatchStateHandler"]
-  }; }
-};
+const PtcMediaCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * ref video element
+     */
+    this.videoEle = undefined;
+    this.cardType = 'media-card';
+    this.cardHref = undefined;
+    this.target = '_self';
+    this.rel = undefined;
+    this.activeBackgroundImage = undefined;
+    this.hoverBackgroundImage = undefined;
+    this.heading = undefined;
+    this.headingTransform = 'none';
+    this.category = undefined;
+    this.isHovered = false;
+  }
+  WatchStateHandler(newValue) {
+    if (this.videoEle) {
+      newValue ? this.videoEle.play() : this.videoEle.pause();
+    }
+  }
+  getCardText() {
+    if (this.cardType === 'media-card') {
+      return [
+        h("div", { class: "card-wrap" }, h("div", { class: "car-content" }, h("h4", null, this.category, " "), h("h3", null, this.heading))),
+      ];
+    }
+    // else if (this.cardType === 'bureau-card') {
+    //   return (
+    //     <div class="card-content">
+    //       <slot name="bureau-description"></slot>
+    //     </div>
+    //   );
+    // }
+  }
+  render() {
+    const Tag = !!this.cardHref ? 'a' : 'div';
+    const isVideoUrl = getFileExtension(this.hoverBackgroundImage) === '.mp4' ? true : false;
+    //console.log("isVideoUrl: " + isVideoUrl + " hoverBackgroundImage: " + this.hoverBackgroundImage);
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap, onmouseenter: () => (this.isHovered = true), onmouseleave: () => (this.isHovered = false),
+      // {...(!isVideoUrl
+      //   ? { ...{ style: this.isHovered ? { backgroundImage: `url(${this.hoverBackgroundImage})` } : { backgroundImage: `url(${this.activeBackgroundImage})` } } }
+      //   : null)}
+      style: this.isHovered ? { backgroundImage: `url(${this.hoverBackgroundImage})` } : { backgroundImage: `url(${this.activeBackgroundImage})` } }, h(Tag, { class: 'anchor-wrap', target: this.target, href: this.cardHref, rel: this.rel }, isVideoUrl && (h("video", { muted: true, loop: true, playsinline: true, poster: this.activeBackgroundImage, ref: el => (this.videoEle = el), style: this.isHovered ? { display: 'block' } : { display: 'none' } }, h("source", { src: this.hoverBackgroundImage, type: "video/mp4" }, "Your browser does not support the video tag."))), this.cardType === "media-card" && h("ptc-overlay", { "filter-color": "black-2" }), this.cardType === "media-card" && this.getCardText())));
+  }
+  getCssClassMap() {
+    return {
+      [this.cardType]: true,
+    };
+  }
+  static get watchers() { return {
+    "isHovered": ["WatchStateHandler"]
+  }; }
+};
 PtcMediaCard.style = ptcMediaCardCss;
 
 export { PtcMediaCard as ptc_media_card };

package/dist/esm/ptc-minimized-nav.entry.js

@@ -1,19 +1,19 @@
-import { r as registerInstance, h, H as Host } from './index-22a84644.js';
+import { r as registerInstance, h, H as Host } from './index-8db28d54.js';
 
 const ptcMinimizedNavCss = ":host{display:block}.minimized-header .header{overflow:hidden;height:48px;background-color:var(--color-gray-10);display:flex;align-items:center;justify-content:center}.minimized-header .header a{float:left;color:var(--color-black);text-align:center;padding:0px 0;text-decoration:none;border-radius:var(--ptc-border-radius-standard)}.minimized-header .header a.mini-navbar-logo{font-weight:var(--ptc-font-weight-bold)}.minimized-header .header a.mini-navbar-logo img{width:65px;vertical-align:middle;border:0;height:auto}.mini-navbar-logo{outline:3px solid transparent}.mini-navbar-logo:focus{outline:3px solid var(--color-blue-07);outline-offset:2px;border-radius:var(--ptc-border-radius-standard);text-decoration:none;border-color:transparent !important}@media only screen and (min-width: 768px){.temp-container{width:750px}}@media only screen and (min-width: 992px){.temp-container{width:970px}}@media only screen and (min-width: 1200px){.temp-container{width:1170px}}@media only screen and (min-width: 1440px){.temp-container{width:1400px}}@media only screen and (min-width: 1600px){.temp-container{width:1560px}}.ptc-min-footer{box-shadow:var(--ptc-shadow-medium);color:var(--color-white);position:relative;overflow:hidden;position:relative;z-index:1000;padding:0;height:60px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--color-gray-10)}.min-footer-nav-list{margin:0;padding:0;list-style:none}.min-footer-copyright-wrapper{text-align:center;position:relative;z-index:20}.min-footer-copyright-wrapper .min-footer-copyright-list{padding:var(--ptc-element-spacing-04) 0;display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;justify-content:center}@media screen-sm{.min-footer-copyright-wrapper .min-footer-copyright-list{padding:var(--ptc-element-spacing-04) 0}}@media screen-xs{.minimized-header .header a{float:none;display:block;text-align:left}}";
 
-const PtcMinimizedNav = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.linkUrl = '#';
-    this.imgSrc = '';
-    this.imgAlt = 'PTC';
-    this.navType = 'minimized-header';
-  }
-  render() {
-    return (h(Host, null, this.navType == 'minimized-header' ? (h("div", { class: "minimized-header" }, h("div", { class: "header" }, h("div", { class: "temp-container" }, h("a", { class: "mini-navbar-logo", href: this.linkUrl }, h("img", { src: this.imgSrc, alt: this.imgAlt })))))) : null, this.navType == 'minimized-footer' ? (h("div", { class: "ptc-min-footer mini-footer" }, h("div", { class: "min-footer-copyright-wrapper" }, h("ul", { class: "min-footer-nav-list min-footer-copyright-list" }, h("slot", null))))) : null));
-  }
-};
+const PtcMinimizedNav = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.linkUrl = '#';
+    this.imgSrc = '';
+    this.imgAlt = 'PTC';
+    this.navType = 'minimized-header';
+  }
+  render() {
+    return (h(Host, null, this.navType == 'minimized-header' ? (h("div", { class: "minimized-header" }, h("div", { class: "header" }, h("div", { class: "temp-container" }, h("a", { class: "mini-navbar-logo", href: this.linkUrl }, h("img", { src: this.imgSrc, alt: this.imgAlt })))))) : null, this.navType == 'minimized-footer' ? (h("div", { class: "ptc-min-footer mini-footer" }, h("div", { class: "min-footer-copyright-wrapper" }, h("ul", { class: "min-footer-nav-list min-footer-copyright-list" }, h("slot", null))))) : null));
+  }
+};
 PtcMinimizedNav.style = ptcMinimizedNavCss;
 
 export { PtcMinimizedNav as ptc_minimized_nav };

package/dist/esm/ptc-mobile-select.entry.js

@@ -1,15 +1,18 @@
-import { r as registerInstance, h as h$1 } from './index-22a84644.js';
+import { r as registerInstance, h as h$1 } from './index-8db28d54.js';
 
 /*
-* mobile-select v1.3.2
+* mobile-select v1.4.0
 * Homepage: https://github.com/onlyhom/mobile-select
 * Released under the MIT License.
 * (c) 2017-present
 */
-var D = Object.defineProperty;
-var w = (g, t, e) => t in g ? D(g, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : g[t] = e;
-var h = (g, t, e) => (w(g, typeof t != "symbol" ? t + "" : t, e), e);
-const r = class {
+var S = Object.defineProperty;
+var D = (g, t, e) => t in g ? S(g, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : g[t] = e;
+var h = (g, t, e) => (D(g, typeof t != "symbol" ? t + "" : t, e), e);
+function w() {
+  return !navigator.userAgent.toLowerCase().match(/ipad|iphone os|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/);
+}
+const l = class {
   constructor(t) {
     h(this, "mobileSelect");
     h(this, "trigger");
@@ -37,82 +40,74 @@ const r = class {
     h(this, "offsetSum");
     h(this, "oversizeBorder");
     h(this, "enableClickStatus");
-    h(this, "isPC");
     h(this, "optionHeight");
     h(this, "curDistance");
     h(this, "cascadeJsonData");
     h(this, "eventHandleMap");
     h(this, "initDeepCount");
     h(this, "config");
-    !r.checkRequiredConfig(t) || (this.config = Object.assign({}, r.defaultConfig, t), this.wheelsData = t.wheels, this.isJsonType = !1, this.cascadeJsonData = [], this.displayJson = [], this.curValue = [], this.curIndexArr = [], this.isCascade = !1, this.offsetY = 0, this.offsetSum = 0, this.curDistance = [], this.enableClickStatus = !1, this.isPC = !0, this.optionHeight = 0, this.initPosition = t.position || [], this.initColWidth = t.colWidth || [], this.init());
+    !l.checkRequiredConfig(t) || (this.config = Object.assign({}, l.defaultConfig, t), this.wheelsData = t.wheels, this.isJsonType = !1, this.cascadeJsonData = [], this.displayJson = [], this.curValue = [], this.curIndexArr = [], this.isCascade = !1, this.offsetY = 0, this.offsetSum = 0, this.curDistance = [], this.enableClickStatus = !1, this.optionHeight = 0, this.initPosition = t.position || [], this.initColWidth = t.colWidth || [], this.init());
   }
   init() {
+    if (!this.checkTriggerAvailable())
+      return;
     const { config: t } = this;
-    if (this.isJsonType = r.checkDataType(this.wheelsData), this.renderComponent(this.wheelsData), !!this.checkTriggerAvailable()) {
-      if (this.wheelList = this.mobileSelect.getElementsByClassName("ms-wheel"), this.sliderList = this.mobileSelect.getElementsByClassName("ms-select-container"), this.panel = this.mobileSelect.querySelector(".ms-panel"), this.wheelsContain = this.mobileSelect.querySelector(".ms-wheels"), this.ensureBtn = this.mobileSelect.querySelector(".ms-ensure"), this.cancelBtn = this.mobileSelect.querySelector(".ms-cancel"), this.grayLayer = this.mobileSelect.querySelector(".ms-gray-layer"), this.popUp = this.mobileSelect.querySelector(".ms-content"), this.optionHeight = this.mobileSelect.querySelector("li").offsetHeight, t.initValue && t.triggerDisplayValue && (this.trigger.innerText = t.initValue), this.setStyle(t), this.isPC = r.checkIsPC(), this.isCascade = this.checkCascade(), this.isCascade && this.initCascade(), t.initValue && (this.initPosition = this.getPositionByValue()), this.initPosition.length < this.sliderList.length) {
-        const e = this.sliderList.length - this.initPosition.length;
-        for (let i = 0; i < e; i++)
-          this.initPosition.push(0);
-      }
-      this.isCascade ? this.initPosition.forEach((e, i) => {
-        this.checkRange(i, this.initPosition);
-      }) : this.setCurDistance(this.initPosition), this.eventHandleMap = {
-        cancelBtn: {
-          event: "click",
-          fn: () => {
-            var e, i, s, n;
-            this.hide(), (i = (e = this.config).cancel) == null || i.call(e, this.curIndexArr, this.curValue, this), (n = (s = this.config).onCancel) == null || n.call(s, this.curValue, this.curIndexArr, this);
-          }
-        },
-        ensureBtn: {
-          event: "click",
-          fn: () => {
-            var i, s, n, l;
-            this.hide(), this.optionHeight || (this.optionHeight = this.mobileSelect.querySelector("li").offsetHeight);
-            let e = "";
-            for (let o = 0; o < this.wheelList.length; o++)
-              o == this.wheelList.length - 1 ? e += this.getInnerText(o) : e += this.getInnerText(o) + this.config.connector;
-            t.triggerDisplayValue && (this.trigger.innerText = e), this.curIndexArr = this.getIndexArr(), this.curValue = this.getCurValue(), (s = (i = this.config).callback) == null || s.call(i, this.curIndexArr, this.curValue, this), (l = (n = this.config).onChange) == null || l.call(n, this.curValue, this.curIndexArr, this);
-          }
-        },
-        trigger: {
-          event: "click",
-          fn: () => {
-            this.show();
-          }
-        },
-        grayLayer: {
-          event: "click",
-          fn: () => this.hide()
-        },
-        popUp: {
-          event: "click",
-          fn: (e) => e.stopPropagation()
-        },
-        panel: {
-          event: ["touchstart", "touchend", "touchmove"],
-          fn: (e) => this.touch(e)
-        }
-      }, this.isPC && (this.eventHandleMap.panel.event = ["mousedown", "mousemove", "mouseup"]), this.registerEvents("add"), this.fixRowStyle(), t.autoFocus && this.show();
+    if (this.isJsonType = l.checkDataType(this.wheelsData), this.renderComponent(this.wheelsData), this.wheelList = this.mobileSelect.getElementsByClassName("ms-wheel"), this.sliderList = this.mobileSelect.getElementsByClassName("ms-select-container"), this.panel = this.mobileSelect.querySelector(".ms-panel"), this.wheelsContain = this.mobileSelect.querySelector(".ms-wheels"), this.ensureBtn = this.mobileSelect.querySelector(".ms-ensure"), this.cancelBtn = this.mobileSelect.querySelector(".ms-cancel"), this.grayLayer = this.mobileSelect.querySelector(".ms-gray-layer"), this.popUp = this.mobileSelect.querySelector(".ms-content"), this.optionHeight = this.mobileSelect.querySelector("li").offsetHeight, t.initValue && this.setTriggerInnerText(t.initValue), this.setStyle(t), this.isCascade = this.checkCascade(), this.isCascade && this.initCascade(), t.initValue && (this.initPosition = this.getPositionByInitValue()), this.initPosition.length < this.sliderList.length) {
+      const e = this.sliderList.length - this.initPosition.length;
+      for (let i = 0; i < e; i++)
+        this.initPosition.push(0);
     }
-  }
-  static checkIsPC() {
-    return !navigator.userAgent.toLowerCase().match(/ipad|iphone os|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/);
+    this.isCascade ? this.initPosition.forEach((e, i) => {
+      this.checkRange(i, this.initPosition);
+    }) : this.setCurDistance(this.initPosition), this.eventHandleMap = {
+      cancelBtn: {
+        event: "click",
+        fn: () => {
+          var e, i, s, n;
+          this.hide(), (i = (e = this.config).cancel) == null || i.call(e, this.curIndexArr, this.curValue, this), (n = (s = this.config).onCancel) == null || n.call(s, this.curValue, this.curIndexArr, this);
+        }
+      },
+      ensureBtn: {
+        event: "click",
+        fn: () => {
+          var e, i, s, n;
+          this.hide(), this.optionHeight || (this.optionHeight = this.mobileSelect.querySelector("li").offsetHeight), this.setTriggerInnerText(this.getConnectedString()), this.curIndexArr = this.getIndexArr(), this.curValue = this.getCurValue(), (i = (e = this.config).callback) == null || i.call(e, this.curIndexArr, this.curValue, this), (n = (s = this.config).onChange) == null || n.call(s, this.curValue, this.curIndexArr, this);
+        }
+      },
+      trigger: {
+        event: "click",
+        fn: () => {
+          this.show();
+        }
+      },
+      grayLayer: {
+        event: "click",
+        fn: () => this.hide()
+      },
+      popUp: {
+        event: "click",
+        fn: (e) => e.stopPropagation()
+      },
+      panel: {
+        event: ["touchstart", "touchend", "touchmove"],
+        fn: (e) => this.touch(e)
+      }
+    }, w() && (this.eventHandleMap.panel.event = ["mousedown", "mousemove", "mouseup"]), this.registerEvents("add"), this.fixRowStyle(), t.autoFocus && this.show();
   }
   static checkDataType(t) {
     var e, i;
     return typeof ((i = (e = t[0]) == null ? void 0 : e.data) == null ? void 0 : i[0]) == "object";
   }
   static checkRequiredConfig(t) {
-    const e = r.REQUIRED_PARAMS;
+    const e = l.REQUIRED_PARAMS;
     if (!t) {
       const i = e.map((s) => `'${s}'`);
-      return r.log("error", `missing required param ${i.join(" and ")}.`), !1;
+      return l.log("error", `missing required param ${i.join(" and ")}.`), !1;
     }
     for (let i = 0; i < e.length; i++) {
       const s = e[i];
       if (!t[s])
-        return r.log("error", `missing required param '${s}'.`), !1;
+        return l.log("error", `missing required param '${s}'.`), !1;
     }
     return !0;
   }
@@ -122,25 +117,48 @@ const r = class {
   }
   checkTriggerAvailable() {
     const { config: t } = this;
-    return this.trigger = t.trigger instanceof HTMLElement ? t.trigger : document.querySelector(t.trigger), this.trigger ? !0 : (r.log("error", "trigger HTMLElement does not found on your document."), !1);
+    return this.trigger = t.trigger instanceof HTMLElement ? t.trigger : document.querySelector(t.trigger), this.trigger ? !0 : (l.log("error", "trigger HTMLElement does not found on your document."), !1);
   }
-  getPositionByValue() {
+  getPositionByInitValue() {
     var n;
     const { keyMap: t, connector: e, initValue: i } = this.config, s = (i == null ? void 0 : i.split(e)) || [];
     if (this.isJsonType) {
-      let l = (n = this.wheelsData[0]) == null ? void 0 : n.data;
-      return s.reduce((o, d) => {
-        var c;
-        const a = l == null ? void 0 : l.findIndex((u) => u[t.value] == d);
-        return o.push(a < 0 ? 0 : a), l = (c = l[a]) == null ? void 0 : c[t.childs], o;
+      let o = (n = this.wheelsData[0]) == null ? void 0 : n.data;
+      return s.reduce((r, c) => {
+        var u;
+        const a = o == null ? void 0 : o.findIndex((d) => d[t.value] == c);
+        return r.push(a < 0 ? 0 : a), o = (u = o[a]) == null ? void 0 : u[t.childs], r;
       }, []);
     }
-    return s.reduce((l, o, d) => {
-      var c, u;
-      const a = (u = (c = this.wheelsData[d]) == null ? void 0 : c.data) == null ? void 0 : u.findIndex((f) => f == o);
-      return l.push(a < 0 ? 0 : a), l;
+    return s.reduce((o, r, c) => {
+      var u, d;
+      const a = (d = (u = this.wheelsData[c]) == null ? void 0 : u.data) == null ? void 0 : d.findIndex((f) => f == r);
+      return o.push(a < 0 ? 0 : a), o;
     }, []);
   }
+  getConnectedString() {
+    let t = "";
+    for (let e = 0; e < this.wheelList.length; e++)
+      e == this.wheelList.length - 1 ? t += this.getInnerText(e) : t += this.getInnerText(e) + this.config.connector;
+    return t;
+  }
+  setTriggerInnerText(t) {
+    this.config.triggerDisplayValue && (this.trigger.textContent = t);
+  }
+  setValue(t) {
+    if (!t || !t.length)
+      return;
+    if (this.isJsonType && typeof t[0] != "object" || !this.isJsonType && typeof t[0] == "object") {
+      l.log("error", `The setValue() input format should be same with getValue(), like: ${JSON.stringify(this.getValue())}`);
+      return;
+    }
+    const { keyMap: e } = this.config;
+    t.forEach((i, s) => {
+      var r;
+      const n = this.isCascade ? this.displayJson[s] : (r = this.wheelsData[s]) == null ? void 0 : r.data, o = n == null ? void 0 : n.findIndex((c) => this.isJsonType ? i[e.id] == c[e.id] || i[e.value] == c[e.value] : i == c);
+      this.locatePosition(s, o);
+    }), this.setTriggerInnerText(this.getConnectedString());
+  }
   setTitle(t) {
     this.mobileSelect.querySelector(".ms-title").innerHTML = t;
   }
@@ -186,8 +204,8 @@ const r = class {
     let i = "";
     if (this.isJsonType)
       for (let s = 0; s < t.length; s++) {
-        const n = t[s][e.id], l = t[s][e.value];
-        i += `<li data-id="${n}">${l}</li>`;
+        const n = t[s][e.id], o = t[s][e.value];
+        i += `<li data-id="${n}">${o}</li>`;
       }
     else
       for (let s = 0; s < t.length; s++)
@@ -260,13 +278,13 @@ const r = class {
     e.childs in t && t[e.childs].length > 0 && (this.displayJson.push(t[e.childs]), this.checkArrDeep(t[e.childs][0]));
   }
   checkRange(t, e) {
-    var l;
+    var o;
     const i = this.displayJson.length - 1 - t, { keyMap: s } = this.config;
-    for (let o = 0; o < i; o++)
+    for (let r = 0; r < i; r++)
       this.displayJson.pop();
     let n;
-    for (let o = 0; o <= t; o++)
-      n = o == 0 ? this.cascadeJsonData[e[0]] : (l = n == null ? void 0 : n[s.childs]) == null ? void 0 : l[e[o]];
+    for (let r = 0; r <= t; r++)
+      n = r == 0 ? this.cascadeJsonData[e[0]] : (o = n == null ? void 0 : n[s.childs]) == null ? void 0 : o[e[r]];
     this.checkArrDeep(n), this.reRenderWheels(), this.fixRowStyle(), this.setCurDistance(this.resetPosition(t, e));
   }
   resetPosition(t, e) {
@@ -297,7 +315,7 @@ const r = class {
   }
   updateWheel(t, e) {
     if (this.isCascade) {
-      r.log("error", "'updateWheel()' not support cascade json data, please use 'updateWheels()' instead to update the whole data source");
+      l.log("error", "'updateWheel()' not support cascade json data, please use 'updateWheels()' instead to update the whole data source");
       return;
     }
     let i = "";
@@ -343,7 +361,7 @@ const r = class {
     return t;
   }
   getValue() {
-    return this.curValue;
+    return this.getCurValue();
   }
   calcDistance(t) {
     return 2 * this.optionHeight - t * this.optionHeight;
@@ -361,7 +379,7 @@ const r = class {
     t.style.transform = "translate3d(0," + e + "px, 0)";
   }
   locatePosition(t, e) {
-    this.curDistance[t] = this.calcDistance(e), this.movePosition(this.sliderList[t], this.curDistance[t]), this.isCascade && this.checkRange(t, this.getIndexArr());
+    t === void 0 || e === void 0 || e < 0 || (this.curDistance[t] = this.calcDistance(e), this.movePosition(this.sliderList[t], this.curDistance[t]), this.isCascade && this.checkRange(t, this.getIndexArr()));
   }
   updateCurDistance(t, e) {
     this.curDistance[e] = parseInt(t.style.transform.split(",")[1]);
@@ -370,10 +388,10 @@ const r = class {
     var s;
     const e = this.sliderList[t].getElementsByTagName("li").length;
     let i = this.getIndex(this.curDistance[t]);
-    return i >= e ? i = e - 1 : i < 0 && (i = 0), ((s = this.sliderList[t].getElementsByTagName("li")[i]) == null ? void 0 : s.innerText) || "";
+    return i >= e ? i = e - 1 : i < 0 && (i = 0), ((s = this.sliderList[t].getElementsByTagName("li")[i]) == null ? void 0 : s.textContent) || "";
   }
   touch(t) {
-    var l, o, d, a, c, u, f, v;
+    var o, r, c, a, u, d, f, v;
     const i = (t.composedPath && t.composedPath()).find((m) => {
       var p;
       return (p = m.classList) == null ? void 0 : p.contains("ms-wheel");
@@ -398,16 +416,16 @@ const r = class {
           const m = Math.floor((window.innerHeight - this.moveEndY) / 40);
           if (m != 2) {
             const p = m - 2, C = this.curDistance[n] + p * this.optionHeight;
-            C <= 2 * this.optionHeight && C >= this.oversizeBorder && (this.curDistance[n] = C, this.movePosition(s, this.curDistance[n]), (o = (l = this.config).transitionEnd) == null || o.call(l, this.getIndexArr(), this.getCurValue(), this), (a = (d = this.config).onTransitionEnd) == null || a.call(d, this.getCurValue(), this.getIndexArr(), this));
+            C <= 2 * this.optionHeight && C >= this.oversizeBorder && (this.curDistance[n] = C, this.movePosition(s, this.curDistance[n]), (r = (o = this.config).transitionEnd) == null || r.call(o, this.getIndexArr(), this.getCurValue(), this), (a = (c = this.config).onTransitionEnd) == null || a.call(c, this.getCurValue(), this.getIndexArr(), this));
           }
         } else
-          this.updateCurDistance(s, n), this.curDistance[n] = this.fixPosition(this.curDistance[n]), this.curDistance[n] > 2 * this.optionHeight ? this.curDistance[n] = 2 * this.optionHeight : this.curDistance[n] < this.oversizeBorder && (this.curDistance[n] = this.oversizeBorder), this.movePosition(s, this.curDistance[n]), (u = (c = this.config).transitionEnd) == null || u.call(c, this.getIndexArr(), this.getCurValue(), this), (v = (f = this.config).onTransitionEnd) == null || v.call(f, this.getCurValue(), this.getIndexArr(), this);
+          this.updateCurDistance(s, n), this.curDistance[n] = this.fixPosition(this.curDistance[n]), this.curDistance[n] > 2 * this.optionHeight ? this.curDistance[n] = 2 * this.optionHeight : this.curDistance[n] < this.oversizeBorder && (this.curDistance[n] = this.oversizeBorder), this.movePosition(s, this.curDistance[n]), (d = (u = this.config).transitionEnd) == null || d.call(u, this.getIndexArr(), this.getCurValue(), this), (v = (f = this.config).onTransitionEnd) == null || v.call(f, this.getCurValue(), this.getIndexArr(), this);
         t.type === "mouseup" && (this.enableClickStatus = !1), this.isCascade && this.checkRange(n, this.getIndexArr());
         break;
     }
   }
 };
-let y = r;
+let y = l;
 h(y, "defaultConfig", {
   keyMap: { id: "id", value: "value", childs: "childs" },
   position: [],
@@ -420,61 +438,61 @@ h(y, "defaultConfig", {
   scrollSpeed: 1
 }), h(y, "REQUIRED_PARAMS", ["trigger", "wheels"]);
 
-const ptcMobileSelectCss = ".ms-mobile-select{position:relative;z-index:0;opacity:0;visibility:hidden;-webkit-transition:opacity 0.4s, z-index 0.4s;transition:opacity 0.4s, z-index 0.4s}.ms-mobile-select *{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.ms-mobile-select .ms-gray-layer{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0, 0, 0, 0.7);z-index:888;display:block}.ms-mobile-select .ms-content{width:100%;display:block;position:fixed;z-index:889;color:black;-webkit-transition:all 0.4s;transition:all 0.4s;bottom:-350px;left:0;background:white}.ms-mobile-select .ms-fix-width{width:90%;margin:0 auto;position:relative}.ms-mobile-select .ms-fix-width:after{content:\".\";display:block;height:0;clear:both;visibility:hidden}.ms-mobile-select .ms-btn-bar{border-bottom:1px solid #dcdcdc;font-size:15px;height:45px;position:relative;text-align:center;line-height:45px}.ms-mobile-select .ms-cancel,.ms-mobile-select .ms-ensure{height:45px;width:55px;cursor:pointer;position:absolute;top:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.ms-mobile-select .ms-cancel{left:0;color:#666}.ms-mobile-select .ms-ensure{right:0;color:#1e83d3}.ms-mobile-select .ms-title{font-size:15px;padding:0 15%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ms-mobile-select .ms-panel:after{content:\".\";display:block;height:0;clear:both;visibility:hidden}.ms-mobile-select .ms-wheels{width:100%;height:200px;overflow:hidden}.ms-mobile-select .ms-wheel{position:relative;z-index:0;float:left;width:50%;height:200px;overflow:hidden;-webkit-transition:width 0.3s ease;transition:width 0.3s ease}.ms-mobile-select .ms-select-container{display:block;text-align:center}.ms-mobile-select .ms-select-container li{font-size:15px;display:block;height:40px;line-height:40px;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.ms-mobile-select .ms-select-line{height:40px;width:100%;position:absolute;top:80px;pointer-events:none;-webkit-box-sizing:border-box;box-sizing:border-box;border-top:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc}.ms-mobile-select .ms-shadow-mask{position:absolute;top:0;width:100%;height:200px;background:linear-gradient(to bottom, #fffffff5, #ffffffcc 25%, #ffffff00 49%, #ffffff00 51%, #ffffffcc 75%, #fffffff5);opacity:0.9;pointer-events:none}.ms-mobile-select.ms-show{opacity:1;z-index:10000;visibility:visible}.ms-mobile-select.ms-show .ms-content{bottom:0}.ms-default-trigger{min-height:1em;color:#888}body.ms-show{overflow-y:hidden}.mobile-select-wrapper{display:block}.mobile-select-wrapper div{display:inline;margin-right:var(--ptc-element-spacing-03);width:100%;font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-regular);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest);color:var(--color-white);height:18px}.mobileSelect .content{top:auto}.mobileSelect .content .btnBar{border-color:var(--color-gray-10)}.mobileSelect .content .btnBar .cancel,.mobileSelect .content .btnBar .ensure,.mobileSelect .content .btnBar .title{font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest)}.mobileSelect .content .btnBar .ensure,.mobileSelect .content .btnBar .cancel{transform:translateY(12.5px);width:125px}.mobileSelect .content .panel .wheel .selectContainer li{font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest);height:45px}ptc-responsive-wrapper.xsmall .mobile-select-wrapper,ptc-responsive-wrapper.small .mobile-select-wrapper{display:block}ptc-responsive-wrapper.medium .mobile-select-wrapper,ptc-responsive-wrapper.large .mobile-select-wrapper,ptc-responsive-wrapper.xlarge .mobile-select-wrapper,ptc-responsive-wrapper.xxlarge .mobile-select-wrapper,ptc-responsive-wrapper.large2k .mobile-select-wrapper,ptc-responsive-wrapper.large4k .mobile-select-wrapper{display:none}";
+const ptcMobileSelectCss = ".ms-mobile-select{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;opacity:0;visibility:hidden;-webkit-transition:opacity 0.4s, z-index 0.4s;transition:opacity 0.4s, z-index 0.4s;transform:translate(0, 0)}.ms-mobile-select *{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.ms-mobile-select .ms-gray-layer{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0, 0, 0, 0.7);z-index:888;display:block}.ms-mobile-select .ms-content{width:100%;display:block;position:fixed;z-index:889;color:black;-webkit-transition:all 0.4s;transition:all 0.4s;bottom:-350px;left:0;background:white}.ms-mobile-select .ms-fix-width{width:90%;margin:0 auto;position:relative}.ms-mobile-select .ms-fix-width:after{content:\".\";display:block;height:0;clear:both;visibility:hidden}.ms-mobile-select .ms-btn-bar{border-bottom:1px solid #dcdcdc;font-size:15px;height:45px;position:relative;text-align:center;line-height:45px}.ms-mobile-select .ms-cancel,.ms-mobile-select .ms-ensure{height:45px;width:55px;cursor:pointer;position:absolute;top:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.ms-mobile-select .ms-cancel{left:0;color:#666}.ms-mobile-select .ms-ensure{right:0;color:#1e83d3}.ms-mobile-select .ms-title{font-size:15px;padding:0 15%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ms-mobile-select .ms-panel:after{content:\".\";display:block;height:0;clear:both;visibility:hidden}.ms-mobile-select .ms-wheels{width:100%;height:200px;overflow:hidden}.ms-mobile-select .ms-wheel{position:relative;z-index:0;float:left;width:50%;height:200px;overflow:hidden;-webkit-transition:width 0.3s ease;transition:width 0.3s ease}.ms-mobile-select .ms-select-container{display:block;text-align:center}.ms-mobile-select .ms-select-container li{font-size:15px;display:block;height:40px;line-height:40px;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.ms-mobile-select .ms-select-line{height:40px;width:100%;position:absolute;top:80px;pointer-events:none;-webkit-box-sizing:border-box;box-sizing:border-box;border-top:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc}.ms-mobile-select .ms-shadow-mask{position:absolute;top:0;width:100%;height:200px;background:linear-gradient(to bottom, #fffffff5, #ffffffcc 25%, #ffffff00 49%, #ffffff00 51%, #ffffffcc 75%, #fffffff5);opacity:0.9;pointer-events:none}.ms-mobile-select.ms-show{opacity:1;z-index:10000;visibility:visible}.ms-mobile-select.ms-show .ms-content{bottom:0}.ms-default-trigger{min-height:1em;color:#888}body.ms-show{overflow-y:hidden}.mobile-select-wrapper{display:block}.mobile-select-wrapper div{display:inline;margin-right:var(--ptc-element-spacing-03);width:100%;font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-regular);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest);color:var(--color-white);height:18px}.mobileSelect .content{top:auto}.mobileSelect .content .btnBar{border-color:var(--color-gray-10)}.mobileSelect .content .btnBar .cancel,.mobileSelect .content .btnBar .ensure,.mobileSelect .content .btnBar .title{font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest)}.mobileSelect .content .btnBar .ensure,.mobileSelect .content .btnBar .cancel{transform:translateY(12.5px);width:125px}.mobileSelect .content .panel .wheel .selectContainer li{font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest);height:45px}ptc-responsive-wrapper.xsmall .mobile-select-wrapper,ptc-responsive-wrapper.small .mobile-select-wrapper{display:block}ptc-responsive-wrapper.medium .mobile-select-wrapper,ptc-responsive-wrapper.large .mobile-select-wrapper,ptc-responsive-wrapper.xlarge .mobile-select-wrapper,ptc-responsive-wrapper.xxlarge .mobile-select-wrapper,ptc-responsive-wrapper.large2k .mobile-select-wrapper,ptc-responsive-wrapper.large4k .mobile-select-wrapper{display:none}";
 
-const PtcMobileSelect = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.triggerName = undefined;
-    this.selectedText = undefined;
-    this.wheelData = undefined;
-    this.selectedId = '';
-    this.ensureBtnText = 'Confirm';
-    this.cancelBtnText = 'Cancel';
-    this.listTitle = undefined;
-  }
-  render() {
-    return (h$1("div", { class: "mobile-select-wrapper" }, h$1("div", { id: this.triggerName }, this.selectedText, h$1("icon-asset", { type: "ptc", size: "x-small", name: "chevron-down", color: "white", "is-mobile-select": "true", "injected-style": "svg.ismobileselect{transform:translateX(10px);}" }))));
-  }
-  componentDidRender() {
-    let currentId = this.selectedId; //input current lang
-    let storeIndex = 0;
-    new y({
-      trigger: `#${this.triggerName}`,
-      title: `${this.listTitle ? this.listTitle : ''}`,
-      wheels: this.wheelData ? [{ data: this.wheelData }] : [{ data: ['test1', 'test2'] }],
-      position: [0],
-      ensureBtnText: this.ensureBtnText,
-      cancelBtnText: this.cancelBtnText,
-      ensureBtnColor: 'var(--color-gray-12)',
-      cancelBtnColor: 'var(--color-gray-12)',
-      titleColor: 'var(--color-gray-12)',
-      onShow: function (e) {
-        if (currentId) {
-          let liEle = document.querySelectorAll('.selectContainer li');
-          liEle.forEach((currentValue, currentIndex) => {
-            if (currentValue.getAttribute('data-id') == currentId) {
-              storeIndex = currentIndex;
-              return;
-            }
-          });
-          e.locatePosition(0, storeIndex);
-        }
-        else {
-          return;
-        }
-      },
-      callback: function (indexArr, data) {
-        if (data[0].id) {
-          window.location.href = data[0].id;
-        }
-        else {
-          console.log('href: ' + data[0].id + '; indexArr: ' + indexArr);
-        }
-      }.bind(this),
-    });
-  }
-};
+const PtcMobileSelect = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.triggerName = undefined;
+    this.selectedText = undefined;
+    this.wheelData = undefined;
+    this.selectedId = '';
+    this.ensureBtnText = 'Confirm';
+    this.cancelBtnText = 'Cancel';
+    this.listTitle = undefined;
+  }
+  render() {
+    return (h$1("div", { class: "mobile-select-wrapper" }, h$1("div", { id: this.triggerName }, this.selectedText, h$1("icon-asset", { type: "ptc", size: "x-small", name: "chevron-down", color: "white", "is-mobile-select": "true", "injected-style": "svg.ismobileselect{transform:translateX(10px);}" }))));
+  }
+  componentDidRender() {
+    let currentId = this.selectedId; //input current lang
+    let storeIndex = 0;
+    new y({
+      trigger: `#${this.triggerName}`,
+      title: `${this.listTitle ? this.listTitle : ''}`,
+      wheels: this.wheelData ? [{ data: this.wheelData }] : [{ data: ['test1', 'test2'] }],
+      position: [0],
+      ensureBtnText: this.ensureBtnText,
+      cancelBtnText: this.cancelBtnText,
+      ensureBtnColor: 'var(--color-gray-12)',
+      cancelBtnColor: 'var(--color-gray-12)',
+      titleColor: 'var(--color-gray-12)',
+      onShow: function (e) {
+        if (currentId) {
+          let liEle = document.querySelectorAll('.selectContainer li');
+          liEle.forEach((currentValue, currentIndex) => {
+            if (currentValue.getAttribute('data-id') == currentId) {
+              storeIndex = currentIndex;
+              return;
+            }
+          });
+          e.locatePosition(0, storeIndex);
+        }
+        else {
+          return;
+        }
+      },
+      callback: function (indexArr, data) {
+        if (data[0].id) {
+          window.location.href = data[0].id;
+        }
+        else {
+          console.log('href: ' + data[0].id + '; indexArr: ' + indexArr);
+        }
+      }.bind(this),
+    });
+  }
+};
 PtcMobileSelect.style = ptcMobileSelectCss;
 
 export { PtcMobileSelect as ptc_mobile_select };