@ptcwebops/ptcw-design 2.5.7 → 2.6.0

package/dist/custom-elements/index.js

@@ -1849,7 +1849,7 @@ function calcSupport() {
   const window = getWindow();
   const document = getDocument();
   return {
-    smoothScroll: document.documentElement && document.documentElement.style && 'scrollBehavior' in document.documentElement.style,
+    smoothScroll: document.documentElement && 'scrollBehavior' in document.documentElement.style,
     touch: !!('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch)
   };
 }
@@ -2257,8 +2257,6 @@ function updateSlides() {
   }
   if (typeof spaceBetween === 'string' && spaceBetween.indexOf('%') >= 0) {
     spaceBetween = parseFloat(spaceBetween.replace('%', '')) / 100 * swiperSize;
-  } else if (typeof spaceBetween === 'string') {
-    spaceBetween = parseFloat(spaceBetween);
   }
   swiper.virtualSize = -spaceBetween;
 
@@ -2368,10 +2366,10 @@ function updateSlides() {
   }
   swiper.virtualSize = Math.max(swiper.virtualSize, swiperSize) + offsetAfter;
   if (rtl && wrongRTL && (params.effect === 'slide' || params.effect === 'coverflow')) {
-    wrapperEl.style.width = `${swiper.virtualSize + spaceBetween}px`;
+    wrapperEl.style.width = `${swiper.virtualSize + params.spaceBetween}px`;
   }
   if (params.setWrapperSize) {
-    wrapperEl.style[getDirectionLabel('width')] = `${swiper.virtualSize + spaceBetween}px`;
+    wrapperEl.style[getDirectionLabel('width')] = `${swiper.virtualSize + params.spaceBetween}px`;
   }
   if (gridEnabled) {
     swiper.grid.updateWrapperSize(slideSize, snapGrid, getDirectionLabel);
@@ -2410,7 +2408,7 @@ function updateSlides() {
     }
   }
   if (snapGrid.length === 0) snapGrid = [0];
-  if (spaceBetween !== 0) {
+  if (params.spaceBetween !== 0) {
     const key = swiper.isHorizontal() && rtl ? 'marginLeft' : getDirectionLabel('marginRight');
     slides.filter((_, slideIndex) => {
       if (!params.cssMode || params.loop) return true;
@@ -2425,9 +2423,9 @@ function updateSlides() {
   if (params.centeredSlides && params.centeredSlidesBounds) {
     let allSlidesSize = 0;
     slidesSizesGrid.forEach(slideSizeValue => {
-      allSlidesSize += slideSizeValue + (spaceBetween || 0);
+      allSlidesSize += slideSizeValue + (params.spaceBetween ? params.spaceBetween : 0);
     });
-    allSlidesSize -= spaceBetween;
+    allSlidesSize -= params.spaceBetween;
     const maxSnap = allSlidesSize - swiperSize;
     snapGrid = snapGrid.map(snap => {
       if (snap < 0) return -offsetBefore;
@@ -2438,9 +2436,9 @@ function updateSlides() {
   if (params.centerInsufficientSlides) {
     let allSlidesSize = 0;
     slidesSizesGrid.forEach(slideSizeValue => {
-      allSlidesSize += slideSizeValue + (spaceBetween || 0);
+      allSlidesSize += slideSizeValue + (params.spaceBetween ? params.spaceBetween : 0);
     });
-    allSlidesSize -= spaceBetween;
+    allSlidesSize -= params.spaceBetween;
     if (allSlidesSize < swiperSize) {
       const allSlidesOffset = (swiperSize - allSlidesSize) / 2;
       snapGrid.forEach((snap, snapIndex) => {
@@ -2502,7 +2500,7 @@ function updateAutoHeight(speed) {
   }
   const getSlideByIndex = index => {
     if (isVirtual) {
-      return swiper.slides[swiper.getSlideIndexByData(index)];
+      return swiper.getSlideIndexByData(index);
     }
     return swiper.slides[index];
   };
@@ -2541,7 +2539,7 @@ function updateSlidesOffset() {
   // eslint-disable-next-line
   const minusOffset = swiper.isElement ? swiper.isHorizontal() ? swiper.wrapperEl.offsetLeft : swiper.wrapperEl.offsetTop : 0;
   for (let i = 0; i < slides.length; i += 1) {
-    slides[i].swiperSlideOffset = (swiper.isHorizontal() ? slides[i].offsetLeft : slides[i].offsetTop) - minusOffset - swiper.cssOverflowAdjustment();
+    slides[i].swiperSlideOffset = (swiper.isHorizontal() ? slides[i].offsetLeft : slides[i].offsetTop) - minusOffset;
   }
 }
 
@@ -2564,20 +2562,14 @@ function updateSlidesProgress(translate = this && this.translate || 0) {
   });
   swiper.visibleSlidesIndexes = [];
   swiper.visibleSlides = [];
-  let spaceBetween = params.spaceBetween;
-  if (typeof spaceBetween === 'string' && spaceBetween.indexOf('%') >= 0) {
-    spaceBetween = parseFloat(spaceBetween.replace('%', '')) / 100 * swiper.size;
-  } else if (typeof spaceBetween === 'string') {
-    spaceBetween = parseFloat(spaceBetween);
-  }
   for (let i = 0; i < slides.length; i += 1) {
     const slide = slides[i];
     let slideOffset = slide.swiperSlideOffset;
     if (params.cssMode && params.centeredSlides) {
       slideOffset -= slides[0].swiperSlideOffset;
     }
-    const slideProgress = (offsetCenter + (params.centeredSlides ? swiper.minTranslate() : 0) - slideOffset) / (slide.swiperSlideSize + spaceBetween);
-    const originalSlideProgress = (offsetCenter - snapGrid[0] + (params.centeredSlides ? swiper.minTranslate() : 0) - slideOffset) / (slide.swiperSlideSize + spaceBetween);
+    const slideProgress = (offsetCenter + (params.centeredSlides ? swiper.minTranslate() : 0) - slideOffset) / (slide.swiperSlideSize + params.spaceBetween);
+    const originalSlideProgress = (offsetCenter - snapGrid[0] + (params.centeredSlides ? swiper.minTranslate() : 0) - slideOffset) / (slide.swiperSlideSize + params.spaceBetween);
     const slideBefore = -(offsetCenter - slideOffset);
     const slideAfter = slideBefore + swiper.slidesSizesGrid[i];
     const isVisible = slideBefore >= 0 && slideBefore < swiper.size - 1 || slideAfter > 1 && slideAfter <= swiper.size || slideBefore <= 0 && slideAfter >= swiper.size;
@@ -2706,41 +2698,6 @@ function updateSlidesClasses() {
   swiper.emitSlidesClasses();
 }
 
-const processLazyPreloader = (swiper, imageEl) => {
-  if (!swiper || swiper.destroyed || !swiper.params) return;
-  const slideSelector = () => swiper.isElement ? `swiper-slide` : `.${swiper.params.slideClass}`;
-  const slideEl = imageEl.closest(slideSelector());
-  if (slideEl) {
-    const lazyEl = slideEl.querySelector(`.${swiper.params.lazyPreloaderClass}`);
-    if (lazyEl) lazyEl.remove();
-  }
-};
-const unlazy = (swiper, index) => {
-  if (!swiper.slides[index]) return;
-  const imageEl = swiper.slides[index].querySelector('[loading="lazy"]');
-  if (imageEl) imageEl.removeAttribute('loading');
-};
-const preload = swiper => {
-  if (!swiper || swiper.destroyed || !swiper.params) return;
-  let amount = swiper.params.lazyPreloadPrevNext;
-  const len = swiper.slides.length;
-  if (!len || !amount || amount < 0) return;
-  amount = Math.min(amount, len);
-  const slidesPerView = swiper.params.slidesPerView === 'auto' ? swiper.slidesPerViewDynamic() : Math.ceil(swiper.params.slidesPerView);
-  const activeIndex = swiper.activeIndex;
-  const slideIndexLastInView = activeIndex + slidesPerView - 1;
-  if (swiper.params.rewind) {
-    for (let i = activeIndex - amount; i <= slideIndexLastInView + amount; i += 1) {
-      const realIndex = (i % len + len) % len;
-      if (realIndex !== activeIndex && realIndex > slideIndexLastInView) unlazy(swiper, realIndex);
-    }
-  } else {
-    for (let i = Math.max(slideIndexLastInView - amount, 0); i <= Math.min(slideIndexLastInView + amount, len - 1); i += 1) {
-      if (i !== activeIndex && i > slideIndexLastInView) unlazy(swiper, i);
-    }
-  }
-};
-
 function getActiveIndexByTranslate(swiper) {
   const {
     slidesGrid,
@@ -2817,16 +2774,11 @@ function updateActiveIndex(newActiveIndex) {
     realIndex = activeIndex;
   }
   Object.assign(swiper, {
-    previousSnapIndex,
     snapIndex,
-    previousRealIndex,
     realIndex,
     previousIndex,
     activeIndex
   });
-  if (swiper.initialized) {
-    preload(swiper);
-  }
   swiper.emit('activeIndexChange');
   swiper.emit('snapIndexChange');
   if (previousRealIndex !== realIndex) {
@@ -2896,7 +2848,6 @@ function getSwiperTranslate(axis = this.isHorizontal() ? 'x' : 'y') {
     return translate;
   }
   let currentTranslate = getTranslate(wrapperEl, axis);
-  currentTranslate += swiper.cssOverflowAdjustment();
   if (rtl) currentTranslate = -currentTranslate;
   return currentTranslate || 0;
 }
@@ -2921,18 +2872,13 @@ function setTranslate(translate, byController) {
     x = Math.floor(x);
     y = Math.floor(y);
   }
-  swiper.previousTranslate = swiper.translate;
-  swiper.translate = swiper.isHorizontal() ? x : y;
   if (params.cssMode) {
     wrapperEl[swiper.isHorizontal() ? 'scrollLeft' : 'scrollTop'] = swiper.isHorizontal() ? -x : -y;
   } else if (!params.virtualTranslate) {
-    if (swiper.isHorizontal()) {
-      x -= swiper.cssOverflowAdjustment();
-    } else {
-      y -= swiper.cssOverflowAdjustment();
-    }
     wrapperEl.style.transform = `translate3d(${x}px, ${y}px, ${z}px)`;
   }
+  swiper.previousTranslate = swiper.translate;
+  swiper.translate = swiper.isHorizontal() ? x : y;
 
   // Check if we need to update progress
   let newProgress;
@@ -3525,22 +3471,15 @@ function loopFix({
   }
   if (isPrev) {
     prependSlidesIndexes.forEach(index => {
-      swiper.slides[index].swiperLoopMoveDOM = true;
       slidesEl.prepend(swiper.slides[index]);
-      swiper.slides[index].swiperLoopMoveDOM = false;
     });
   }
   if (isNext) {
     appendSlidesIndexes.forEach(index => {
-      swiper.slides[index].swiperLoopMoveDOM = true;
       slidesEl.append(swiper.slides[index]);
-      swiper.slides[index].swiperLoopMoveDOM = false;
     });
   }
   swiper.recalcSlides();
-  if (params.slidesPerView === 'auto') {
-    swiper.updateSlides();
-  }
   if (params.watchSlidesProgress) {
     swiper.updateSlidesOffset();
   }
@@ -4169,6 +4108,7 @@ function onTouchEnd(event) {
   }
 }
 
+let timeout;
 function onResize() {
   const swiper = this;
   const {
@@ -4207,8 +4147,8 @@ function onResize() {
     }
   }
   if (swiper.autoplay && swiper.autoplay.running && swiper.autoplay.paused) {
-    clearTimeout(swiper.autoplay.resizeTimeout);
-    swiper.autoplay.resizeTimeout = setTimeout(() => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
       if (swiper.autoplay && swiper.autoplay.running && swiper.autoplay.paused) {
         swiper.autoplay.resume();
       }
@@ -4265,12 +4205,19 @@ function onScroll() {
   swiper.emit('setTranslate', swiper.translate, false);
 }
 
+const processLazyPreloader = (swiper, imageEl) => {
+  if (!swiper || swiper.destroyed || !swiper.params) return;
+  const slideSelector = () => swiper.isElement ? `swiper-slide` : `.${swiper.params.slideClass}`;
+  const slideEl = imageEl.closest(slideSelector());
+  if (slideEl) {
+    const lazyEl = slideEl.querySelector(`.${swiper.params.lazyPreloaderClass}`);
+    if (lazyEl) lazyEl.remove();
+  }
+};
+
 function onLoad(e) {
   const swiper = this;
   processLazyPreloader(swiper, e.target);
-  if (swiper.params.cssMode || swiper.params.slidesPerView !== 'auto' && !swiper.params.autoHeight) {
-    return;
-  }
   swiper.update();
 }
 
@@ -4680,7 +4627,6 @@ const defaults = {
   slidePrevClass: 'swiper-slide-prev',
   wrapperClass: 'swiper-wrapper',
   lazyPreloaderClass: 'swiper-lazy-preloader',
-  lazyPreloadPrevNext: 0,
   // Callbacks
   runCallbacksOnInit: true,
   // Internals
@@ -4834,11 +4780,6 @@ class Swiper {
       progress: 0,
       velocity: 0,
       animating: false,
-      cssOverflowAdjustment() {
-        // Returns 0 unless `translate` is > 2**23
-        // Should be subtracted from css values to prevent overflow
-        return Math.trunc(this.translate / 2 ** 23) * 2 ** 23;
-      },
       // Locks
       allowSlideNext: swiper.params.allowSlideNext,
       allowSlidePrev: swiper.params.allowSlidePrev,
@@ -4855,7 +4796,7 @@ class Swiper {
         // Form elements to match
         focusableElements: swiper.params.focusableElements,
         // Last click time
-        lastClickTime: 0,
+        lastClickTime: now(),
         clickTimeout: undefined,
         // Velocities
         velocities: [],
@@ -5050,8 +4991,7 @@ class Swiper {
       }
     } else {
       if ((swiper.params.slidesPerView === 'auto' || swiper.params.slidesPerView > 1) && swiper.isEnd && !swiper.params.centeredSlides) {
-        const slides = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.slides : swiper.slides;
-        translated = swiper.slideTo(slides.length - 1, 0, false, true);
+        translated = swiper.slideTo(swiper.slides.length - 1, 0, false, true);
       } else {
         translated = swiper.slideTo(swiper.activeIndex, 0, false, true);
       }
@@ -5203,11 +5143,9 @@ class Swiper {
         });
       }
     });
-    preload(swiper);
 
     // Init Flag
     swiper.initialized = true;
-    preload(swiper);
 
     // Emit
     swiper.emit('init');
@@ -5580,12 +5518,10 @@ function Pagination({
     const index = elementIndex(bulletEl) * swiper.params.slidesPerGroup;
     if (swiper.params.loop) {
       if (swiper.realIndex === index) return;
-      const newSlideIndex = swiper.getSlideIndexByData(index);
-      const currentSlideIndex = swiper.getSlideIndexByData(swiper.realIndex);
-      if (newSlideIndex > swiper.slides.length - swiper.loopedSlides) {
+      if (index < swiper.loopedSlides || index > swiper.slides.length - swiper.loopedSlides) {
         swiper.loopFix({
-          direction: newSlideIndex > currentSlideIndex ? 'next' : 'prev',
-          activeSlideIndex: newSlideIndex,
+          direction: index < swiper.loopedSlides ? 'prev' : 'next',
+          activeSlideIndex: index,
           slideTo: false
         });
       }
@@ -5603,17 +5539,13 @@ function Pagination({
     el = makeElementsArray(el);
     // Current/Total
     let current;
-    let previousIndex;
     const slidesLength = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.slides.length : swiper.slides.length;
     const total = swiper.params.loop ? Math.ceil(slidesLength / swiper.params.slidesPerGroup) : swiper.snapGrid.length;
     if (swiper.params.loop) {
-      previousIndex = swiper.previousRealIndex || 0;
       current = swiper.params.slidesPerGroup > 1 ? Math.floor(swiper.realIndex / swiper.params.slidesPerGroup) : swiper.realIndex;
     } else if (typeof swiper.snapIndex !== 'undefined') {
       current = swiper.snapIndex;
-      previousIndex = swiper.previousSnapIndex;
     } else {
-      previousIndex = swiper.previousIndex || 0;
       current = swiper.activeIndex || 0;
     }
     // Types
@@ -5627,8 +5559,8 @@ function Pagination({
         el.forEach(subEl => {
           subEl.style[swiper.isHorizontal() ? 'width' : 'height'] = `${bulletSize * (params.dynamicMainBullets + 4)}px`;
         });
-        if (params.dynamicMainBullets > 1 && previousIndex !== undefined) {
-          dynamicBulletIndex += current - (previousIndex || 0);
+        if (params.dynamicMainBullets > 1 && swiper.previousIndex !== undefined) {
+          dynamicBulletIndex += current - (swiper.previousIndex || 0);
           if (dynamicBulletIndex > params.dynamicMainBullets - 1) {
             dynamicBulletIndex = params.dynamicMainBullets - 1;
           } else if (dynamicBulletIndex < 0) {
@@ -5849,18 +5781,6 @@ function Pagination({
     }
     if (swiper.pagination.bullets) swiper.pagination.bullets.forEach(subEl => subEl.classList.remove(...params.bulletActiveClass.split(' ')));
   }
-  on('changeDirection', () => {
-    if (!swiper.pagination || !swiper.pagination.el) return;
-    const params = swiper.params.pagination;
-    let {
-      el
-    } = swiper.pagination;
-    el = makeElementsArray(el);
-    el.forEach(subEl => {
-      subEl.classList.remove(params.horizontalClass, params.verticalClass);
-      subEl.classList.add(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
-    });
-  });
   on('init', () => {
     if (swiper.params.pagination.enabled === false) {
       // eslint-disable-next-line
@@ -7001,15 +6921,6 @@ function Grid({
   let slidesNumberEvenToRows;
   let slidesPerRow;
   let numFullColumns;
-  const getSpaceBetween = () => {
-    let spaceBetween = swiper.params.spaceBetween;
-    if (typeof spaceBetween === 'string' && spaceBetween.indexOf('%') >= 0) {
-      spaceBetween = parseFloat(spaceBetween.replace('%', '')) / 100 * swiper.size;
-    } else if (typeof spaceBetween === 'string') {
-      spaceBetween = parseFloat(spaceBetween);
-    }
-    return spaceBetween;
-  };
   const initSlides = slidesLength => {
     const {
       slidesPerView
@@ -7031,9 +6942,9 @@ function Grid({
   };
   const updateSlide = (i, slide, slidesLength, getDirectionLabel) => {
     const {
-      slidesPerGroup
+      slidesPerGroup,
+      spaceBetween
     } = swiper.params;
-    const spaceBetween = getSpaceBetween();
     const {
       rows,
       fill
@@ -7068,10 +6979,10 @@ function Grid({
   };
   const updateWrapperSize = (slideSize, snapGrid, getDirectionLabel) => {
     const {
+      spaceBetween,
       centeredSlides,
       roundLengths
     } = swiper.params;
-    const spaceBetween = getSpaceBetween();
     const {
       rows
     } = swiper.params.grid;
@@ -8889,18 +8800,15 @@ const PtcMinimizedNav$1 = class extends HTMLElement$1 {
 };
 
 /*
-* mobile-select v1.4.0
+* mobile-select v1.3.2
 * Homepage: https://github.com/onlyhom/mobile-select
 * Released under the MIT License.
 * (c) 2017-present
 */
-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 {
+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 {
   constructor(t) {
     h(this, "mobileSelect");
     h(this, "trigger");
@@ -8928,74 +8836,82 @@ const l = 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");
-    !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());
+    !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());
   }
   init() {
-    if (!this.checkTriggerAvailable())
-      return;
     const { config: t } = this;
-    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);
-    }
-    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)
+    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);
       }
-    }, w() && (this.eventHandleMap.panel.event = ["mousedown", "mousemove", "mouseup"]), this.registerEvents("add"), this.fixRowStyle(), t.autoFocus && this.show();
+      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();
+    }
+  }
+  static checkIsPC() {
+    return !navigator.userAgent.toLowerCase().match(/ipad|iphone os|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/);
   }
   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 = l.REQUIRED_PARAMS;
+    const e = r.REQUIRED_PARAMS;
     if (!t) {
       const i = e.map((s) => `'${s}'`);
-      return l.log("error", `missing required param ${i.join(" and ")}.`), !1;
+      return r.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 l.log("error", `missing required param '${s}'.`), !1;
+        return r.log("error", `missing required param '${s}'.`), !1;
     }
     return !0;
   }
@@ -9005,48 +8921,25 @@ const l = class {
   }
   checkTriggerAvailable() {
     const { config: t } = this;
-    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);
+    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);
   }
-  getPositionByInitValue() {
+  getPositionByValue() {
     var n;
     const { keyMap: t, connector: e, initValue: i } = this.config, s = (i == null ? void 0 : i.split(e)) || [];
     if (this.isJsonType) {
-      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;
+      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;
       }, []);
     }
-    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;
+    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;
     }, []);
   }
-  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;
   }
@@ -9092,8 +8985,8 @@ const l = class {
     let i = "";
     if (this.isJsonType)
       for (let s = 0; s < t.length; s++) {
-        const n = t[s][e.id], o = t[s][e.value];
-        i += `<li data-id="${n}">${o}</li>`;
+        const n = t[s][e.id], l = t[s][e.value];
+        i += `<li data-id="${n}">${l}</li>`;
       }
     else
       for (let s = 0; s < t.length; s++)
@@ -9166,13 +9059,13 @@ const l = 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 o;
+    var l;
     const i = this.displayJson.length - 1 - t, { keyMap: s } = this.config;
-    for (let r = 0; r < i; r++)
+    for (let o = 0; o < i; o++)
       this.displayJson.pop();
     let n;
-    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]];
+    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]];
     this.checkArrDeep(n), this.reRenderWheels(), this.fixRowStyle(), this.setCurDistance(this.resetPosition(t, e));
   }
   resetPosition(t, e) {
@@ -9203,7 +9096,7 @@ const l = class {
   }
   updateWheel(t, e) {
     if (this.isCascade) {
-      l.log("error", "'updateWheel()' not support cascade json data, please use 'updateWheels()' instead to update the whole data source");
+      r.log("error", "'updateWheel()' not support cascade json data, please use 'updateWheels()' instead to update the whole data source");
       return;
     }
     let i = "";
@@ -9249,7 +9142,7 @@ const l = class {
     return t;
   }
   getValue() {
-    return this.getCurValue();
+    return this.curValue;
   }
   calcDistance(t) {
     return 2 * this.optionHeight - t * this.optionHeight;
@@ -9267,7 +9160,7 @@ const l = class {
     t.style.transform = "translate3d(0," + e + "px, 0)";
   }
   locatePosition(t, e) {
-    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()));
+    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]);
@@ -9276,10 +9169,10 @@ const l = 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.textContent) || "";
+    return i >= e ? i = e - 1 : i < 0 && (i = 0), ((s = this.sliderList[t].getElementsByTagName("li")[i]) == null ? void 0 : s.innerText) || "";
   }
   touch(t) {
-    var o, r, c, a, u, d, f, v;
+    var l, o, d, a, c, u, f, v;
     const i = (t.composedPath && t.composedPath()).find((m) => {
       var p;
       return (p = m.classList) == null ? void 0 : p.contains("ms-wheel");
@@ -9304,16 +9197,16 @@ const l = 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]), (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));
+            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));
           }
         } 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]), (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);
+          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);
         t.type === "mouseup" && (this.enableClickStatus = !1), this.isCascade && this.checkRange(n, this.getIndexArr());
         break;
     }
   }
 };
-let y = l;
+let y = r;
 h(y, "defaultConfig", {
   keyMap: { id: "id", value: "value", childs: "childs" },
   position: [],
@@ -9326,7 +9219,7 @@ h(y, "defaultConfig", {
   scrollSpeed: 1
 }), h(y, "REQUIRED_PARAMS", ["trigger", "wheels"]);
 
-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 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 PtcMobileSelect$1 = class extends HTMLElement$1 {
   constructor() {
@@ -9591,7 +9484,7 @@ const PtcNavCard$1 = class extends HTMLElement$1 {
   static get style() { return ptcNavCardCss; }
 };
 
-const ptcNavLinkCss = ":host{display:block;padding:12px;position:relative}@media only screen and (min-width: 1200px){:host{display:inline-block}}:host::before,:host::after{content:\" \";width:1600px;height:1px;background-color:var(--color-gray-08);position:absolute;right:0;bottom:0}@media only screen and (min-width: 1200px){:host::before,:host::after{display:none}}:host::after{left:0;right:auto}:host a{color:var(--color-gray-03);text-decoration:none;display:inline-block;border-bottom:2px solid transparent;margin-left:34%;font-size:15px;line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}@media only screen and (min-width: 480px){:host a{margin-left:38%}}@media only screen and (min-width: 768px){:host a{margin-left:42%}}@media only screen and (min-width: 1200px){:host a{margin-left:0;border-bottom:2px solid transparent;display:flex;align-items:center;white-space:nowrap;position:relative}}:host a svg{width:1rem;height:0.875rem;display:inline-block;background-size:cover;transition:margin-left 250ms ease-out;vertical-align:middle;margin-left:4px}:host a:hover,:host a:focus{color:var(--color-white);border-color:var(--color-white)}:host a:hover svg path,:host a:focus svg path{fill:var(--color-white)}:host ::slotted(icon-asset){margin-top:4px;margin-right:8px}";
+const ptcNavLinkCss = ":host{display:block;position:relative}@media only screen and (min-width: 1200px){:host{display:inline-block}}:host::before,:host::after{content:\" \";width:1600px;height:1px;background-color:var(--color-gray-08);position:absolute;right:0;bottom:0}@media only screen and (min-width: 1200px){:host::before,:host::after{display:none}}:host::after{left:0;right:auto}:host a{color:var(--color-gray-03);text-decoration:none;display:inline-block;border-bottom:2px solid transparent;margin-left:34%;padding:22px 12px;font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}@media only screen and (min-width: 480px){:host a{margin-left:38%}}@media only screen and (min-width: 768px){:host a{margin-left:42%}}@media only screen and (min-width: 1200px){:host a{margin-left:0;display:flex;align-items:center;white-space:nowrap;position:relative}:host a::after{content:\"\";display:block;border-bottom:2px solid transparent;margin:auto;position:absolute;width:calc(100% - 20px);left:0;right:0;bottom:20px}}:host a svg{width:1rem;height:0.875rem;display:inline-block;background-size:cover;transition:margin-left 250ms ease-out;vertical-align:middle;margin-left:4px}:host a:hover,:host a:focus{color:var(--color-white)}@media only screen and (min-width: 1200px){:host a:hover::after,:host a:focus::after{border-color:var(--color-white)}}:host a:hover svg path,:host a:focus svg path{fill:var(--color-white)}:host ::slotted(icon-asset){margin-top:4px;margin-right:8px}";
 
 const PtcNavLink$1 = class extends HTMLElement$1 {
   constructor() {
@@ -9743,7 +9636,7 @@ const PtcNavSlider$1 = class extends HTMLElement$1 {
   static get style() { return ptcNavSliderCss; }
 };
 
-const ptcNavSubmenuCss = ":host{display:block;position:relative;padding:var(--ptc-element-spacing-03)}:host .back-btn{display:none;position:absolute;left:30px;color:var(--color-white);font-size:15px;line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}:host .back-btn svg{margin-right:4px;vertical-align:middle}@media only screen and (min-width: 1200px){:host{display:inline-block;position:initial}}:host::before,:host::after{content:\" \";width:800px;height:1px;background-color:var(--color-gray-08);position:absolute;right:0;bottom:0}@media only screen and (min-width: 1200px){:host::before,:host::after{display:none}}:host::after{left:0;right:auto}:host .submenu-toggle{display:inline-block;cursor:pointer;color:var(--color-gray-03);font-size:15px;line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold);white-space:nowrap;border-bottom:2px solid transparent;margin-left:34%;position:relative}@media only screen and (min-width: 480px){:host .submenu-toggle{margin-left:38%}}@media only screen and (min-width: 768px){:host .submenu-toggle{margin-left:42%}}@media only screen and (min-width: 1200px){:host .submenu-toggle{margin-left:0;display:flex;align-items:center}}:host .submenu-toggle svg{margin-left:5px;margin-top:2px;vertical-align:middle}:host .submenu-toggle svg path{fill:var(--color-gray-04)}:host .submenu-toggle:hover{color:var(--color-white);border-color:var(--color-white)}:host .submenu-toggle:hover svg path{fill:var(--color-white)}:host .submenu-toggle icon-asset{margin-right:8px}:host .submenu-toggle icon-asset svg{margin:0}:host .submenu-container{background-color:var(--color-gray-12)}@media only screen and (min-width: 1200px){:host .submenu-container{position:absolute;width:100%;right:0;left:0;top:64px}}:host .submenu-container .submenu-container-lg{padding:0 32px;width:100%;margin:auto}@media only screen and (min-width: 992px){:host .submenu-container .submenu-container-lg{padding:0 32px}}@media only screen and (min-width: 1200px){:host .submenu-container .submenu-container-lg{padding:0;width:1106px}}@media only screen and (min-width: 1256px){:host .submenu-container .submenu-container-lg{width:1164px}}@media only screen and (min-width: 1280px){:host .submenu-container .submenu-container-lg{width:1180px}}@media only screen and (min-width: 1300px){:host .submenu-container .submenu-container-lg{width:1200px}}@media only screen and (min-width: 1440px){:host .submenu-container .submenu-container-lg{width:83.5rem}}@media only screen and (min-width: 1600px){:host .submenu-container .submenu-container-lg{width:93.5rem}}@media only screen and (min-width: 1980px){:host .submenu-container .submenu-container-lg{width:113.5rem}}:host ::slotted(ptc-nav-link:last-child)::before,:host ::slotted(ptc-nav-link:last-child)::after{display:none}:host(.short-dropdown) .submenu-container{text-align:center}@media only screen and (min-width: 1200px){:host(.short-dropdown) .submenu-container{width:initial;right:3%;left:initial;top:56px;z-index:1000}}:host(.short-dropdown) .submenu-container .submenu-container-lg{padding:0;width:auto;min-width:348px;display:flex;justify-content:space-evenly}:host(.active){padding-bottom:0}:host(.active) .submenu-toggle{color:var(--color-white);border-color:var(--color-white)}:host(.active) .submenu-toggle svg path{fill:var(--color-white)}:host(.active)::before,:host(.active)::after{display:none}@media only screen and (min-width: 1200px){:host(.active){padding-bottom:var(--ptc-element-spacing-03)}}:host(.active.short-dropdown) .back-btn{display:inline-block}@media only screen and (min-width: 1200px){:host(.active.short-dropdown) .back-btn{display:none}}.custom-icon{object-fit:cover;width:1.5rem;height:1.5rem}.custom-icon:hover{filter:brightness(0) invert(1)}.menu-right *{color:transparent !important}";
+const ptcNavSubmenuCss = ":host{display:block;position:relative;cursor:pointer}:host .back-btn{display:none;position:absolute;left:30px;top:22px;color:var(--color-white);font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}:host .back-btn svg{margin-right:4px;vertical-align:middle;width:12px;height:12px}@media only screen and (min-width: 1200px){:host{display:inline-block;position:initial}}:host::before,:host::after{content:\" \";width:1600px;height:1px;background-color:var(--color-gray-08);position:absolute;right:0;bottom:0}@media only screen and (min-width: 1200px){:host::before,:host::after{display:none}}:host::after{left:0;right:auto}:host .submenu-toggle{display:inline-block;color:var(--color-gray-03);font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold);white-space:nowrap;padding:22px var(--ptc-element-spacing-03);margin-left:34%;position:relative}:host .submenu-toggle::after{content:\"\";display:block;border-bottom:2px solid transparent;margin:auto;position:absolute;width:calc(100% - 20px);left:0;right:0;bottom:20px}@media only screen and (min-width: 480px){:host .submenu-toggle{margin-left:38%}}@media only screen and (min-width: 768px){:host .submenu-toggle{margin-left:42%}}@media only screen and (min-width: 1200px){:host .submenu-toggle{margin-left:0;display:flex;align-items:center}}:host .submenu-toggle svg{margin-left:5px;margin-top:2px;vertical-align:middle;width:12px;height:12px}:host .submenu-toggle svg path{fill:var(--color-gray-04)}:host .submenu-toggle:hover{color:var(--color-white)}:host .submenu-toggle:hover::after{border-color:var(--color-white)}:host .submenu-toggle:hover svg path{fill:var(--color-white)}:host .submenu-toggle icon-asset{margin-right:8px}:host .submenu-toggle icon-asset svg{margin:0}:host .submenu-container{background-color:var(--color-gray-12)}@media only screen and (min-width: 1200px){:host .submenu-container{position:absolute;width:100%;right:0;left:0;top:64px}}:host .submenu-container .submenu-container-lg{max-width:1200px;margin:auto}@media only screen and (min-width: 992px){:host .submenu-container .submenu-container-lg{padding:0 32px}}:host ::slotted(ptc-nav-link:last-child)::before,:host ::slotted(ptc-nav-link:last-child)::after{display:none}:host(.short-dropdown) .submenu-container{text-align:center}@media only screen and (min-width: 1200px){:host(.short-dropdown) .submenu-container{width:initial;right:3%;left:initial;top:56px;z-index:1000}}:host(.short-dropdown) .submenu-container .submenu-container-lg{padding:0;width:auto;min-width:348px;display:flex;justify-content:space-evenly}:host(.active){padding-bottom:0}:host(.active) .submenu-toggle{color:var(--color-white);border-color:var(--color-white)}:host(.active) .submenu-toggle svg path{fill:var(--color-white)}:host(.active)::before,:host(.active)::after{display:none}:host(.active.short-dropdown) .back-btn{display:inline-block}@media only screen and (min-width: 1200px){:host(.active.short-dropdown) .back-btn{display:none}}.custom-icon{object-fit:cover;width:1.5rem;height:1.5rem}.custom-icon:hover{filter:brightness(0) invert(1)}.menu-right *{color:transparent !important}";
 
 const PtcNavSubmenu$1 = class extends HTMLElement$1 {
   constructor() {
@@ -9760,7 +9653,7 @@ const PtcNavSubmenu$1 = class extends HTMLElement$1 {
     var container = this.el.closest('ptc-subnav');
     if (dropdown && container) {
       if (window.innerWidth >= 1200) {
-        let height = container.clientHeight - 10;
+        let height = container.clientHeight;
         if (height > 0) {
           dropdown.style.top = `${height}px`;
         }
@@ -11587,9 +11480,10 @@ const PtcQuiz$1 = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.quiz = window.GetQuiz && window.GetQuiz();
-    this.additionalOptionOnClick = window.AdditionalOptionOnClick && window.AdditionalOptionOnClick();
-    this.slide = this.quiz;
+    this.optionClick = createEvent(this, "optionClick", 7);
+    this.getQuizEndpoint = undefined;
+    this.quiz = null;
+    this.slide = null;
     this.traversal = [];
   }
   handleStartButtonClick() {
@@ -11618,7 +11512,7 @@ const PtcQuiz$1 = class extends HTMLElement$1 {
         break;
       }
     }
-    this.additionalOptionOnClick(dataModelId);
+    this.optionClick.emit(option);
     this.traversal = [...this.traversal, "options", optionInd, "next"];
     let nextImage = new Image();
     nextImage.src = option["next"]["image"];
@@ -11626,6 +11520,15 @@ const PtcQuiz$1 = class extends HTMLElement$1 {
       this.slide = option["next"];
     };
   }
+  componentWillLoad() {
+    fetch(this.getQuizEndpoint)
+      .then((response) => response.json())
+      .then((responseJSON) => {
+      this.quiz = responseJSON;
+      this.slide = this.quiz;
+    })
+      .catch((err) => console.log("Quiz retireval error: ", err));
+  }
   render() {
     const QuizSlideRestartButton = () => {
       return h$1("div", { class: "right-button-container" }, h$1("div", { class: "restart-quiz-button", onClick: () => this.handleRestartButtonClick() }, h$1("icon-asset", { id: "restart-arrow", type: "ptc", size: "small", name: "quiz-arrow-restart" }), h$1("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-densest", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, "Restart")));
@@ -11637,7 +11540,7 @@ const PtcQuiz$1 = class extends HTMLElement$1 {
       return (h$1("div", { class: "quiz-slide-initial" }, h$1("div", { class: "quiz-slide-content" }, h$1("div", { id: "initial-quiz-h2", class: "quiz-slide-text-container" }, h$1("ptc-title", { type: "h2", "text-align": "center", "title-size": "x-large", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-shadow": "", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-8", "is-plm-hub": "false" }, this.slide["h2"])), h$1("ptc-spacer", { size: 'medium', breakpoint: 'small' }), h$1("ptc-spacer", { size: 'large', breakpoint: 'x-small' }), h$1("div", { id: "initial-quiz-h3", class: "quiz-slide-text-container" }, h$1("ptc-title", { type: "h3", "text-align": "center", "title-size": "medium", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-shadow": "", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", "is-plm-hub": "false" }, this.slide["h3"])), h$1("ptc-spacer", { size: 'x-large', breakpoint: 'small' }), h$1("ptc-spacer", { size: 'xx-large', breakpoint: 'x-small' }), h$1("div", { id: "initial-quiz-p", class: "quiz-slide-text-container" }, h$1("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-5", "para-align": "center", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, this.slide["p"])), h$1("div", { class: "center-button-container" }, h$1("div", { id: "quiz-start-button", onClick: () => this.handleStartButtonClick() }, h$1("ptc-button", { type: "link", color: "ptc-tertiary", "link-href": "", target: "_blank" }, "Start"))))));
     };
     const QuizQuestionSlide = () => {
-      return (h$1("div", { class: "quiz-slide-question" }, h$1("div", { class: "quiz-slide-content" }, h$1("div", { class: "quiz-slide-dual-layout" }, h$1("div", { class: "image-container" }, h$1("img", { alt: "", src: this.slide["image"] })), h$1("div", { class: "content-container" }, h$1("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "medium", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-denser", "para-margin": "margin-bottom-6", "para-style": "", "para-z-index": "z-1", styles: "" }, this.slide["question"]), h$1("div", { class: "options-container" }, this.slide["options"].map(option => {
+      return (h$1("div", { class: "quiz-slide-question" }, h$1("div", { class: "quiz-slide-content" }, h$1("div", { class: "quiz-slide-dual-layout" }, h$1("div", { class: "image-container" }, h$1("img", { alt: "", src: this.slide['image'] })), h$1("div", { class: "content-container" }, h$1("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "medium", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-denser", "para-margin": "margin-bottom-6", "para-style": "", "para-z-index": "z-1", styles: "" }, this.slide["question"]), h$1("div", { class: "options-container" }, this.slide["options"].map(option => {
         return h$1("div", { class: "radio-input" }, h$1("input", { type: "radio", name: "test", id: `${option["data-value"]}`, onClick: () => this.handleQuestionOptionClick(option["data-model-id"]), "data-model-id": `${option["data-model-id"]}` }), h$1("label", { class: "option-label", htmlFor: `${option["data-value"]}` }, h$1("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-densest", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, option["data-value"])));
       })))))));
     };
@@ -11652,7 +11555,7 @@ const PtcQuiz$1 = class extends HTMLElement$1 {
         default: return null;
       }
     };
-    return (h$1(Host, null, h$1("div", { class: "quiz-slide-container" }, h$1("div", { class: "quiz-slide-background" }), getQuizSlide())));
+    return (h$1(Host, null, this.quiz && h$1("div", { class: "quiz-slide-container" }, h$1("div", { class: "quiz-slide-background" }), getQuizSlide())));
   }
   get el() { return this; }
   static get style() { return ptcQuizCss; }
@@ -12460,7 +12363,7 @@ const PtcStickyTitle$1 = class extends HTMLElement$1 {
   static get style() { return ptcStickyTitleCss; }
 };
 
-const ptcSubnavCss = ":host{display:block;width:100%;background-color:var(--color-gray-10);position:relative}:host .stickyEl.sticky{top:0;position:fixed;width:100%;z-index:2000;transition:top 0.5s}:host .navbar .navbar-inner{width:100%;margin:auto;padding:0px;display:none}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner{width:1170px}}@media only screen and (min-width: 1256px){:host .navbar .navbar-inner{width:1256px}}@media only screen and (min-width: 1440px){:host .navbar .navbar-inner{width:87.5rem}}@media only screen and (min-width: 1600px){:host .navbar .navbar-inner{width:97.5rem}}@media only screen and (min-width: 1980px){:host .navbar .navbar-inner{width:117.5rem}}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner{padding:10px 16px;height:auto;display:block}}:host .navbar .navbar-inner .nav-wrapper{width:auto;margin:auto 32px;min-width:163px}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner .nav-wrapper{width:auto;display:flex;justify-content:space-between}}:host .navbar.navOpen .navbar-inner{background-color:var(--color-gray-12);display:block}:host .navbar .navbar-toggle{display:block;width:100%;text-align:center;color:var(--color-white);background-color:var(--color-gray-10);border:none;padding:16px;font-size:15px;line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}:host .navbar .navbar-toggle svg{vertical-align:middle;margin-left:4px}@media only screen and (min-width: 1200px){:host .navbar .navbar-toggle{display:none}}";
+const ptcSubnavCss = ":host{display:block;width:100%;background-color:var(--color-gray-10);position:relative}:host .stickyEl.sticky{top:0;position:fixed;width:100%;z-index:2000;transition:top 0.5s}:host .navbar{overflow-x:hidden}@media only screen and (min-width: 1200px){:host .navbar{overflow-x:visible}}:host .navbar .navbar-inner{max-width:1200px;margin:auto;box-sizing:border-box;padding:0px;display:none}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner{padding:0px;height:auto;display:block}}:host .navbar .navbar-inner .nav-wrapper{width:auto;margin:auto 0;min-width:163px}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner .nav-wrapper{width:auto;display:flex;justify-content:space-between}}:host .navbar.navOpen .navbar-inner{background-color:var(--color-gray-12);display:block}:host .navbar .navbar-toggle{display:block;width:100%;text-align:center;color:var(--color-white);background-color:var(--color-gray-10);border:none;padding:16px;font-size:15px;line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}:host .navbar .navbar-toggle svg{vertical-align:middle;margin-left:4px}@media only screen and (min-width: 1200px){:host .navbar .navbar-toggle{display:none}}";
 
 const PtcSubnav$1 = class extends HTMLElement$1 {
   constructor() {
@@ -13518,7 +13421,7 @@ const PtcProductHighlightCard = /*@__PURE__*/proxyCustomElement(PtcProductHighli
 const PtcProductList = /*@__PURE__*/proxyCustomElement(PtcProductList$1, [1,"ptc-product-list",null,[[4,"selectedResult","handleSearchResult"],[4,"clearsearch","handleSearchResult"],[4,"selectedValues","handleMultipleSearchResult"],[4,"emptyResult","handleEmptyResult"]]]);
 const PtcProductSidebar = /*@__PURE__*/proxyCustomElement(PtcProductSidebar$1, [1,"ptc-product-sidebar",{"suggestionList":[16],"searchTerm":[32],"suggestions":[32]},[[4,"dropdownTouched","handleDropdownTouched"],[0,"click","handleClick"],[4,"clearCtaClicked","handleclearCtaClicked"],[4,"selectedValues","handleSelectedValues"]]]);
 const PtcProgressBar = /*@__PURE__*/proxyCustomElement(PtcProgressBar$1, [1,"ptc-progress-bar",{"scrollPercentage":[32]},[[9,"scroll","handleScroll"]]]);
-const PtcQuiz = /*@__PURE__*/proxyCustomElement(PtcQuiz$1, [1,"ptc-quiz",{"quiz":[32],"additionalOptionOnClick":[32],"slide":[32],"traversal":[32]}]);
+const PtcQuiz = /*@__PURE__*/proxyCustomElement(PtcQuiz$1, [1,"ptc-quiz",{"getQuizEndpoint":[1,"get-quiz-endpoint"],"quiz":[32],"slide":[32],"traversal":[32]}]);
 const PtcQuote = /*@__PURE__*/proxyCustomElement(PtcQuote$1, [1,"ptc-quote",{"quoteType":[1025,"quote-type"],"quoteName":[1025,"quote-name"],"ctaText":[1,"cta-text"],"ctaUrl":[1,"cta-url"],"imgSrc":[1,"img-src"],"imgTitle":[1,"img-title"]}]);
 const PtcReadmore = /*@__PURE__*/proxyCustomElement(PtcReadmore$1, [1,"ptc-readmore",{"moreText":[1025,"more-text"],"lessText":[1025,"less-text"],"readMorePosition":[1,"read-more-position"],"display":[1],"visibleLines":[1,"visible-lines"],"visibleLinesCustom":[2,"visible-lines-custom"],"zIndex":[1,"z-index"],"checked":[1028],"size":[1],"isIcon":[4,"is-icon"],"color":[1]},[[9,"resize","addBtnTruncated"]]]);
 const PtcReadmoreChar = /*@__PURE__*/proxyCustomElement(PtcReadmoreChar$1, [1,"ptc-readmore-char",{"maxCharacters":[2,"max-characters"],"description":[1],"readMoreText":[1,"read-more-text"],"readLessText":[1,"read-less-text"],"expanded":[32]}]);