@ptcwebops/ptcw-design 2.1.9 → 2.2.0

package/dist/esm/{core-73ab4867.js → core-209a2c67.js}

@@ -408,7 +408,7 @@ function calcSupport() {
   const window = getWindow();
   const document = getDocument();
   return {
-    smoothScroll: document.documentElement && 'scrollBehavior' in document.documentElement.style,
+    smoothScroll: document.documentElement && document.documentElement.style && 'scrollBehavior' in document.documentElement.style,
     touch: !!('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch)
   };
 }
@@ -816,6 +816,8 @@ 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;
 
@@ -925,10 +927,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 + params.spaceBetween}px`;
+    wrapperEl.style.width = `${swiper.virtualSize + spaceBetween}px`;
   }
   if (params.setWrapperSize) {
-    wrapperEl.style[getDirectionLabel('width')] = `${swiper.virtualSize + params.spaceBetween}px`;
+    wrapperEl.style[getDirectionLabel('width')] = `${swiper.virtualSize + spaceBetween}px`;
   }
   if (gridEnabled) {
     swiper.grid.updateWrapperSize(slideSize, snapGrid, getDirectionLabel);
@@ -967,7 +969,7 @@ function updateSlides() {
     }
   }
   if (snapGrid.length === 0) snapGrid = [0];
-  if (params.spaceBetween !== 0) {
+  if (spaceBetween !== 0) {
     const key = swiper.isHorizontal() && rtl ? 'marginLeft' : getDirectionLabel('marginRight');
     slides.filter((_, slideIndex) => {
       if (!params.cssMode || params.loop) return true;
@@ -982,9 +984,9 @@ function updateSlides() {
   if (params.centeredSlides && params.centeredSlidesBounds) {
     let allSlidesSize = 0;
     slidesSizesGrid.forEach(slideSizeValue => {
-      allSlidesSize += slideSizeValue + (params.spaceBetween ? params.spaceBetween : 0);
+      allSlidesSize += slideSizeValue + (spaceBetween || 0);
     });
-    allSlidesSize -= params.spaceBetween;
+    allSlidesSize -= spaceBetween;
     const maxSnap = allSlidesSize - swiperSize;
     snapGrid = snapGrid.map(snap => {
       if (snap < 0) return -offsetBefore;
@@ -995,9 +997,9 @@ function updateSlides() {
   if (params.centerInsufficientSlides) {
     let allSlidesSize = 0;
     slidesSizesGrid.forEach(slideSizeValue => {
-      allSlidesSize += slideSizeValue + (params.spaceBetween ? params.spaceBetween : 0);
+      allSlidesSize += slideSizeValue + (spaceBetween || 0);
     });
-    allSlidesSize -= params.spaceBetween;
+    allSlidesSize -= spaceBetween;
     if (allSlidesSize < swiperSize) {
       const allSlidesOffset = (swiperSize - allSlidesSize) / 2;
       snapGrid.forEach((snap, snapIndex) => {
@@ -1059,7 +1061,7 @@ function updateAutoHeight(speed) {
   }
   const getSlideByIndex = index => {
     if (isVirtual) {
-      return swiper.getSlideIndexByData(index);
+      return swiper.slides[swiper.getSlideIndexByData(index)];
     }
     return swiper.slides[index];
   };
@@ -1098,7 +1100,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;
+    slides[i].swiperSlideOffset = (swiper.isHorizontal() ? slides[i].offsetLeft : slides[i].offsetTop) - minusOffset - swiper.cssOverflowAdjustment();
   }
 }
 
@@ -1121,14 +1123,20 @@ 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 + params.spaceBetween);
-    const originalSlideProgress = (offsetCenter - snapGrid[0] + (params.centeredSlides ? swiper.minTranslate() : 0) - slideOffset) / (slide.swiperSlideSize + params.spaceBetween);
+    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 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;
@@ -1257,6 +1265,41 @@ 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,
@@ -1333,11 +1376,16 @@ 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) {
@@ -1407,6 +1455,7 @@ function getSwiperTranslate(axis = this.isHorizontal() ? 'x' : 'y') {
     return translate;
   }
   let currentTranslate = getTranslate(wrapperEl, axis);
+  currentTranslate += swiper.cssOverflowAdjustment();
   if (rtl) currentTranslate = -currentTranslate;
   return currentTranslate || 0;
 }
@@ -1431,13 +1480,18 @@ 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;
@@ -2030,15 +2084,22 @@ 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();
   }
@@ -2667,7 +2728,6 @@ function onTouchEnd(event) {
   }
 }
 
-let timeout;
 function onResize() {
   const swiper = this;
   const {
@@ -2706,8 +2766,8 @@ function onResize() {
     }
   }
   if (swiper.autoplay && swiper.autoplay.running && swiper.autoplay.paused) {
-    clearTimeout(timeout);
-    timeout = setTimeout(() => {
+    clearTimeout(swiper.autoplay.resizeTimeout);
+    swiper.autoplay.resizeTimeout = setTimeout(() => {
       if (swiper.autoplay && swiper.autoplay.running && swiper.autoplay.paused) {
         swiper.autoplay.resume();
       }
@@ -2764,19 +2824,12 @@ 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();
 }
 
@@ -3186,6 +3239,7 @@ const defaults = {
   slidePrevClass: 'swiper-slide-prev',
   wrapperClass: 'swiper-wrapper',
   lazyPreloaderClass: 'swiper-lazy-preloader',
+  lazyPreloadPrevNext: 0,
   // Callbacks
   runCallbacksOnInit: true,
   // Internals
@@ -3339,6 +3393,11 @@ 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,
@@ -3355,7 +3414,7 @@ class Swiper {
         // Form elements to match
         focusableElements: swiper.params.focusableElements,
         // Last click time
-        lastClickTime: now(),
+        lastClickTime: 0,
         clickTimeout: undefined,
         // Velocities
         velocities: [],
@@ -3550,7 +3609,8 @@ class Swiper {
       }
     } else {
       if ((swiper.params.slidesPerView === 'auto' || swiper.params.slidesPerView > 1) && swiper.isEnd && !swiper.params.centeredSlides) {
-        translated = swiper.slideTo(swiper.slides.length - 1, 0, false, true);
+        const slides = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.slides : swiper.slides;
+        translated = swiper.slideTo(slides.length - 1, 0, false, true);
       } else {
         translated = swiper.slideTo(swiper.activeIndex, 0, false, true);
       }
@@ -3702,9 +3762,11 @@ class Swiper {
         });
       }
     });
+    preload(swiper);
 
     // Init Flag
     swiper.initialized = true;
+    preload(swiper);
 
     // Emit
     swiper.emit('init');

package/dist/esm/dropdown-item.entry.js

@@ -1,17 +1,17 @@
-import { r as registerInstance, h } from './index-22a84644.js';
+import { r as registerInstance, h } from './index-8db28d54.js';
 
 const dropdownItemCss = ".dropdown-item{transition:background-color ease-out 250ms;max-width:240px}@media only screen and (min-width: 480px){.dropdown-item{max-width:400px}}@media only screen and (min-width: 992px){.dropdown-item{max-width:650px}}.dropdown-item:hover,.dropdown-item:active,.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--color-gray-02)}.dropdown-item span{display:block;padding:0.75rem 1.5rem;font-family:\"Raleway\";font-style:normal;font-weight:var(--ptc-font-weight-regular);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-dense);color:var(--color-gray-12);text-decoration:none}.dropdown-item span:hover,.dropdown-item span:visited,.dropdown-item span:active,.dropdown-item span:focus,.dropdown-item span:focus-visible{color:var(--color-gray-12)}";
 
-const DropdownItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.linkHref = undefined;
-    this.linkTarget = '_self';
-  }
-  render() {
-    return (h("div", { class: "dropdown-item" }, h("slot", null)));
-  }
-};
+const DropdownItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.linkHref = undefined;
+    this.linkTarget = '_self';
+  }
+  render() {
+    return (h("div", { class: "dropdown-item" }, h("slot", null)));
+  }
+};
 DropdownItem.style = dropdownItemCss;
 
 export { DropdownItem as dropdown_item };

package/dist/esm/dynamic-box-bundle.entry.js

@@ -1,32 +1,32 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-22a84644.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-8db28d54.js';
 
 const dynamicBoxBundleCss = ":host{display:block}:host .d-box{width:100%;height:550px;position:relative}:host .d-box.hovering .top-image{background-image:linear-gradient(0deg, rgba(242, 242, 242, 0), #f3f3f3)}:host .d-box.hovering .content{height:100%}:host .top-image{position:relative;display:flex;justify-content:center;align-items:center;height:50%;z-index:99}:host .top-image img{width:405px;height:40px;transform:translateY(-64px)}@media only screen and (min-width: 992px){:host .top-image img{height:35px;transform:translateY(-88px)}}:host .content{height:80%;box-shadow:0 0 0 1px #f3f3f3;width:100%;position:absolute;bottom:0px;left:0px}:host p{font-weight:var(--ptc-font-weight-regular);font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-p);margin:0px;padding:40px;box-sizing:border-box}@media only screen and (min-width: 1200px){:host p{padding:40px}}";
 
-const DynamicBoxBundle = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.topImgSrc = 'https://www.ptc.com/-/media/Images/new-org/logos/PTC-logo.svg';
-    this.topImgAlt = 'image';
-    this.boxHeight = undefined;
-    this.isHovering = false;
-  }
-  handleMouseOver() {
-    if (window.innerWidth >= 1200) {
-      this.isHovering = true;
-      //this.el.style.height = `${this.el.offsetHeight + 50}px`;
-    }
-  }
-  handleMouseOut() {
-    if (window.innerWidth >= 1200) {
-      this.isHovering = false;
-      //this.el.style.height = '';
-    }
-  }
-  render() {
-    return (h(Host, null, h("div", { class: `d-box ${this.isHovering && window.innerWidth >= 1200 ? 'hovering' : ''}` }, h("div", { class: "top-image" }, h("img", { src: this.topImgSrc, alt: this.topImgAlt })), h("div", { class: "content" }, h("slot", { name: "media" }))), h("p", null, h("slot", null))));
-  }
-  get el() { return getElement(this); }
-};
+const DynamicBoxBundle = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.topImgSrc = 'https://www.ptc.com/-/media/Images/new-org/logos/PTC-logo.svg';
+    this.topImgAlt = 'image';
+    this.boxHeight = undefined;
+    this.isHovering = false;
+  }
+  handleMouseOver() {
+    if (window.innerWidth >= 1200) {
+      this.isHovering = true;
+      //this.el.style.height = `${this.el.offsetHeight + 50}px`;
+    }
+  }
+  handleMouseOut() {
+    if (window.innerWidth >= 1200) {
+      this.isHovering = false;
+      //this.el.style.height = '';
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: `d-box ${this.isHovering && window.innerWidth >= 1200 ? 'hovering' : ''}` }, h("div", { class: "top-image" }, h("img", { src: this.topImgSrc, alt: this.topImgAlt })), h("div", { class: "content" }, h("slot", { name: "media" }))), h("p", null, h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
 DynamicBoxBundle.style = dynamicBoxBundleCss;
 
 export { DynamicBoxBundle as dynamic_box_bundle };

package/dist/esm/featured-list.entry.js

@@ -1,89 +1,89 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-22a84644.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-8db28d54.js';
 
-const featuredListCss = "a {\r\n    font-family: var(--ptc-font-latin);\r\n    font-style: var(--ptc-font-style-normal);\r\n    text-decoration-line: underline;\r\n    color: var(--color-blue-07);\r\n    transition: color var(--ptc-transition-medium) var(--ptc-ease-out);\r\n    font-weight: var(--ptc-font-weight-bold);\r\n\r\n    &:visited {\r\n        color: var(--color-blue-10);\r\n    }\r\n\r\n    &:active,\r\n    &:visited:active {\r\n        // pressed\r\n        color: var(--color-blue-09);\r\n    }\r\n\r\n    &:hover,\r\n    &:visited:hover {\r\n        color: var(--color-blue-08);\r\n    }\r\n\r\n    &.disabled {\r\n        color: var(--color-gray-04) !important;\r\n        cursor: not-allowed;\r\n    }\r\n}\r\n\r\n.light-links,.background-grey-10,.background-plm-grey  {\r\n    a, a.light-link {\r\n        color: var(--color-blue-04);\r\n\r\n        &:visited {\r\n            color: var(--color-blue-06);\r\n        }\r\n\r\n        &:active,\r\n        &:visited:active {\r\n            // pressed\r\n            color: var(--color-blue-07);\r\n        }\r\n\r\n        &:hover,\r\n        &:visited:hover {\r\n            color: var(--color-blue-05);\r\n        }\r\n\r\n        &.disabled {\r\n            color: var(--color-gray-04) !important;\r\n            cursor: not-allowed;\r\n        }\r\n    }\r\n}\r\n\r\n.ptc-link {\r\n    color: var(--color-gray-10);\r\n    text-decoration: underline;\r\n    text-decoration-thickness: 2px;\r\n    text-decoration-color: var(--color-green-06);\r\n    text-underline-offset: 5px;\r\n    transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n\r\n    &:hover {\r\n        color: var(--color-green-06);\r\n    }\r\n\r\n    &:visited {\r\n        color: var(--color-gray-10);\r\n    }\r\n\r\n    &:active,\r\n    &:visited:active {\r\n        // pressed\r\n        color: var(--color-green-06);\r\n    }\r\n\r\n    &:hover,\r\n    &:visited:hover {\r\n        color: var(--color-green-06);\r\n    }\r\n}\r\n\r\n.ptc-link-dark {\r\n    color: var(--color-white);\r\n    text-decoration: underline;\r\n    text-decoration-thickness: 2px;\r\n    text-decoration-color: var(--color-green-06);\r\n    text-underline-offset: 5px;\r\n    transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n\r\n    &:hover {\r\n        color: var(--color-green-06);\r\n    }\r\n\r\n    &:visited {\r\n        color: var(--color-white);\r\n    }\r\n\r\n    &:active,\r\n    &:visited:active {\r\n        // pressed\r\n        color: var(--color-green-06);\r\n    }\r\n\r\n    &:hover,\r\n    &:visited:hover {\r\n        color: var(--color-green-06);\r\n    }\r\n\r\n}\r\n :host {\r\n\t display: block;\r\n\t box-sizing: border-box;\r\n}\r\n :host ptc-background-video {\r\n\t height: 240px;\r\n}\r\n @media (min-width: 480px) {\r\n\t :host ptc-background-video {\r\n\t\t height: 320px;\r\n\t}\r\n}\r\n @media (min-width: 768px) {\r\n\t :host ptc-background-video {\r\n\t\t height: 450px;\r\n\t}\r\n}\r\n @media (min-width: 992px) {\r\n\t :host ptc-background-video {\r\n\t\t height: 500px;\r\n\t}\r\n}\r\n :host .fl-header {\r\n\t cursor: pointer;\r\n}\r\n :host .non-mobile-wrapper {\r\n\t box-sizing: border-box;\r\n}\r\n @media (min-width: 992px) {\r\n\t :host .non-mobile-wrapper {\r\n\t\t max-width: 1078px;\r\n\t\t margin: -75px auto 0 auto;\r\n\t\t display: flex;\r\n\t\t align-items: center;\r\n\t\t width: 100%;\r\n\t\t background: var(--color-white);\r\n\t\t box-shadow: var(--ptc-shadow-small);\r\n\t\t padding: 24px 32px;\r\n\t\t z-index: 1;\r\n\t\t position: relative;\r\n\t\t min-height: 350px;\r\n\t}\r\n}\r\n @media (min-width: 992px) {\r\n\t :host .non-mobile-wrapper .header-list-wrap {\r\n\t\t padding-right: 16px;\r\n\t\t margin-right: 64px;\r\n\t\t min-width: 270px;\r\n\t\t max-width: 270px;\r\n\t\t box-sizing: border-box;\r\n\t\t display: flex;\r\n\t\t flex-direction: column;\r\n\t\t align-items: baseline;\r\n\t}\r\n\t :host .non-mobile-wrapper .header-list-wrap::after {\r\n\t\t content: \"\";\r\n\t\t width: 1px;\r\n\t\t height: calc(100% - 48px);\r\n\t\t background-color: var(--color-gray-05);\r\n\t\t position: absolute;\r\n\t\t left: 297px;\r\n\t\t top: 24px;\r\n\t\t bottom: 24px;\r\n\t}\r\n}\r\n @media (min-width: 992px) {\r\n\t :host .non-mobile-wrapper .content-wrap {\r\n\t\t padding-right: 72px;\r\n\t}\r\n}\r\n :host .non-mobile-wrapper .fl-header {\r\n\t border-radius: 4px;\r\n\t margin: 12px 0;\r\n\t padding: 4px 8px;\r\n}\r\n :host .non-mobile-wrapper .fl-header:hover {\r\n\t background-color: var(--color-gray-02);\r\n}\r\n :host .non-mobile-wrapper .fl-header.selected, :host .non-mobile-wrapper .fl-header.init-active {\r\n\t background-color: var(--color-gray-03);\r\n}\r\n :host .mobile-wrapper .acc-item {\r\n\t border-bottom: 1px solid var(--color-gray-03);\r\n\t padding: 14px 30px;\r\n}\r\n :host .mobile-wrapper .acc-item fl-tab-header {\r\n\t padding-left: 34px;\r\n\t position: relative;\r\n}\r\n :host .mobile-wrapper .acc-item fl-tab-header::before {\r\n\t content: '';\r\n\t display: inline-block;\r\n\t width: 16px;\r\n\t height: 16px;\r\n\t background-image: url('data:image/svg+xml,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_91_790)\"><path d=\"M15.9001 6.29998H9.7001V0.0999756H6.3001V6.29998H0.100098V9.69998H6.3001V15.9H9.7001V9.69998H15.9001V6.29998Z\" fill=\"%23006E09\"/></g><defs><clipPath id=\"clip0_91_790\"><rect width=\"16\" height=\"16\" fill=\"white\"/></clipPath></defs></svg>');\r\n\t vertical-align: middle;\r\n\t position: absolute;\r\n\t left: 0;\r\n\t top: 4.5px;\r\n}\r\n :host .mobile-wrapper .acc-item fl-tab-header.selected::before, :host .mobile-wrapper .acc-item fl-tab-header.init-active::before {\r\n\t background-image: url('data:image/svg+xml,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_113_741)\"><path d=\"M0 7.05566V10.8637H13.913V7.05566H0Z\" fill=\"%23323B42\"/></g><defs><clipPath id=\"clip0_113_741\"><rect width=\"13.913\" height=\"17.92\" fill=\"white\"/></clipPath></defs></svg>');\r\n}\r\n :host .mobile-wrapper .acc-item fl-tab-content {\r\n\t padding-left: 34px;\r\n\t padding-bottom: 18px;\r\n}\r\n";
+const featuredListCss = "a {\n    font-family: var(--ptc-font-latin);\n    font-style: var(--ptc-font-style-normal);\n    text-decoration-line: underline;\n    color: var(--color-blue-07);\n    transition: color var(--ptc-transition-medium) var(--ptc-ease-out);\n    font-weight: var(--ptc-font-weight-bold);\n\n    &:visited {\n        color: var(--color-blue-10);\n    }\n\n    &:active,\n    &:visited:active {\n        // pressed\n        color: var(--color-blue-09);\n    }\n\n    &:hover,\n    &:visited:hover {\n        color: var(--color-blue-08);\n    }\n\n    &.disabled {\n        color: var(--color-gray-04) !important;\n        cursor: not-allowed;\n    }\n}\n\n.light-links,.background-grey-10,.background-plm-grey  {\n    a, a.light-link {\n        color: var(--color-blue-04);\n\n        &:visited {\n            color: var(--color-blue-06);\n        }\n\n        &:active,\n        &:visited:active {\n            // pressed\n            color: var(--color-blue-07);\n        }\n\n        &:hover,\n        &:visited:hover {\n            color: var(--color-blue-05);\n        }\n\n        &.disabled {\n            color: var(--color-gray-04) !important;\n            cursor: not-allowed;\n        }\n    }\n}\n\n.ptc-link {\n    color: var(--color-gray-10);\n    text-decoration: underline;\n    text-decoration-thickness: 2px;\n    text-decoration-color: var(--color-green-06);\n    text-underline-offset: 5px;\n    transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);\n\n    &:hover {\n        color: var(--color-green-06);\n    }\n\n    &:visited {\n        color: var(--color-gray-10);\n    }\n\n    &:active,\n    &:visited:active {\n        // pressed\n        color: var(--color-green-06);\n    }\n\n    &:hover,\n    &:visited:hover {\n        color: var(--color-green-06);\n    }\n}\n\n.ptc-link-dark {\n    color: var(--color-white);\n    text-decoration: underline;\n    text-decoration-thickness: 2px;\n    text-decoration-color: var(--color-green-06);\n    text-underline-offset: 5px;\n    transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);\n\n    &:hover {\n        color: var(--color-green-06);\n    }\n\n    &:visited {\n        color: var(--color-white);\n    }\n\n    &:active,\n    &:visited:active {\n        // pressed\n        color: var(--color-green-06);\n    }\n\n    &:hover,\n    &:visited:hover {\n        color: var(--color-green-06);\n    }\n\n}\n :host {\n\t display: block;\n\t box-sizing: border-box;\n}\n :host ptc-background-video {\n\t height: 240px;\n}\n @media (min-width: 480px) {\n\t :host ptc-background-video {\n\t\t height: 320px;\n\t}\n}\n @media (min-width: 768px) {\n\t :host ptc-background-video {\n\t\t height: 450px;\n\t}\n}\n @media (min-width: 992px) {\n\t :host ptc-background-video {\n\t\t height: 500px;\n\t}\n}\n :host .fl-header {\n\t cursor: pointer;\n}\n :host .non-mobile-wrapper {\n\t box-sizing: border-box;\n}\n @media (min-width: 992px) {\n\t :host .non-mobile-wrapper {\n\t\t max-width: 1078px;\n\t\t margin: -75px auto 0 auto;\n\t\t display: flex;\n\t\t align-items: center;\n\t\t width: 100%;\n\t\t background: var(--color-white);\n\t\t box-shadow: var(--ptc-shadow-small);\n\t\t padding: 24px 32px;\n\t\t z-index: 1;\n\t\t position: relative;\n\t\t min-height: 350px;\n\t}\n}\n @media (min-width: 992px) {\n\t :host .non-mobile-wrapper .header-list-wrap {\n\t\t padding-right: 16px;\n\t\t margin-right: 64px;\n\t\t min-width: 270px;\n\t\t max-width: 270px;\n\t\t box-sizing: border-box;\n\t\t display: flex;\n\t\t flex-direction: column;\n\t\t align-items: baseline;\n\t}\n\t :host .non-mobile-wrapper .header-list-wrap::after {\n\t\t content: \"\";\n\t\t width: 1px;\n\t\t height: calc(100% - 48px);\n\t\t background-color: var(--color-gray-05);\n\t\t position: absolute;\n\t\t left: 297px;\n\t\t top: 24px;\n\t\t bottom: 24px;\n\t}\n}\n @media (min-width: 992px) {\n\t :host .non-mobile-wrapper .content-wrap {\n\t\t padding-right: 72px;\n\t}\n}\n :host .non-mobile-wrapper .fl-header {\n\t border-radius: 4px;\n\t margin: 12px 0;\n\t padding: 4px 8px;\n}\n :host .non-mobile-wrapper .fl-header:hover {\n\t background-color: var(--color-gray-02);\n}\n :host .non-mobile-wrapper .fl-header.selected, :host .non-mobile-wrapper .fl-header.init-active {\n\t background-color: var(--color-gray-03);\n}\n :host .mobile-wrapper .acc-item {\n\t border-bottom: 1px solid var(--color-gray-03);\n\t padding: 14px 30px;\n}\n :host .mobile-wrapper .acc-item fl-tab-header {\n\t padding-left: 34px;\n\t position: relative;\n}\n :host .mobile-wrapper .acc-item fl-tab-header::before {\n\t content: '';\n\t display: inline-block;\n\t width: 16px;\n\t height: 16px;\n\t background-image: url('data:image/svg+xml,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_91_790)\"><path d=\"M15.9001 6.29998H9.7001V0.0999756H6.3001V6.29998H0.100098V9.69998H6.3001V15.9H9.7001V9.69998H15.9001V6.29998Z\" fill=\"%23006E09\"/></g><defs><clipPath id=\"clip0_91_790\"><rect width=\"16\" height=\"16\" fill=\"white\"/></clipPath></defs></svg>');\n\t vertical-align: middle;\n\t position: absolute;\n\t left: 0;\n\t top: 4.5px;\n}\n :host .mobile-wrapper .acc-item fl-tab-header.selected::before, :host .mobile-wrapper .acc-item fl-tab-header.init-active::before {\n\t background-image: url('data:image/svg+xml,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_113_741)\"><path d=\"M0 7.05566V10.8637H13.913V7.05566H0Z\" fill=\"%23323B42\"/></g><defs><clipPath id=\"clip0_113_741\"><rect width=\"13.913\" height=\"17.92\" fill=\"white\"/></clipPath></defs></svg>');\n}\n :host .mobile-wrapper .acc-item fl-tab-content {\n\t padding-left: 34px;\n\t padding-bottom: 18px;\n}\n";
 
-const FeaturedList = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.isMobile = undefined;
-    this.selectedTabGloble = 'tab-01';
-  }
-  handleResize() {
-    this.isMobile = window.innerWidth < 992;
-    this.holdTabOnResize(this.selectedTabGloble);
-  }
-  componentWillLoad() {
-    this.isMobile = window.innerWidth < 992;
-  }
-  handleflTabClicked(event) {
-    this.selectedTabGloble = event.detail.name;
-    this.selectTab(this.selectedTabGloble);
-  }
-  holdTabOnResize(name) {
-    const contentBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-content`);
-    const headerBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-header`);
-    contentBlocks.forEach(content => {
-      if (content.classList.contains("init-active")) {
-        content.classList.remove("init-active");
-      }
-      content.getAttribute('name-key') === name ? (content.setAttribute('selected', 'selected')) : (content.removeAttribute('selected'));
-    });
-    headerBlocks.forEach(header => {
-      if (header.classList.contains("init-active")) {
-        header.classList.remove("init-active");
-      }
-      header.getAttribute('name-key') === name ? (header.setAttribute('selected', 'selected')) : (header.removeAttribute('selected'));
-    });
-  }
-  selectTab(name) {
-    const featuredImages = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-image`);
-    const contentBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-content`);
-    const headerBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-header`);
-    featuredImages.forEach(image => {
-      if (image.classList.contains("init-active")) {
-        image.classList.remove("init-active");
-      }
-      image.getAttribute('name-key') === name ? (image.setAttribute('selected', 'selected')) : (image.removeAttribute('selected'));
-    });
-    contentBlocks.forEach(content => {
-      this.updateActiveTab(name, content);
-    });
-    headerBlocks.forEach(header => {
-      this.updateActiveTab(name, header);
-    });
-  }
-  updateActiveTab(name, tabName) {
-    if (this.isMobile) {
-      if (tabName.getAttribute('name-key') === name) {
-        if (tabName.classList.contains("init-active")) {
-          tabName.removeAttribute('selected');
-        }
-        else {
-          tabName.getAttribute('selected') == 'selected' ? (tabName.removeAttribute('selected')) : (tabName.setAttribute('selected', 'selected'));
-        }
-      }
-      else {
-        tabName.removeAttribute('selected');
-      }
-    }
-    else {
-      tabName.getAttribute('name-key') === name ? (tabName.setAttribute('selected', 'selected')) : (tabName.removeAttribute('selected'));
-    }
-    if (tabName.classList.contains("init-active")) {
-      tabName.classList.remove("init-active");
-    }
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "featured-image-wrap" }, h("fl-tab-image", { "name-key": "tab-01", class: "init-active" }, h("ptc-img", { "image-type": "smart-bg", "image-alignment": "center", "img-url": "http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway" })), h("fl-tab-image", { "name-key": "tab-02" }, h("ptc-background-video", { overlay: false, "play-button-title": "Play", "pause-button-title": "Pause", "video-src": "https://www.ptc.com/en/www.ptc.com//-/media/Videos/BRAND-FILM-CAR-SECTION-short-1mb.mp4", "poster-src": "https://www.ptc.com/-/media/Images/new-org/misc/W232501-LWX23-Hero-Banner-Video-FINAL-jebyrne-110922-screenshot.jpg" })), h("fl-tab-image", { "name-key": "tab-03" }, h("ptc-img", { "image-type": "smart-bg", "image-alignment": "center", "img-url": "https://www.ptc.com/-/media/Images/new-org/1366x542/CIMC-1366x542.jpg?h=542&w=1366&la=en&hash=56AE14F73CFB62C24276D08E556B0949" })), h("fl-tab-image", { "name-key": "tab-04" }, h("ptc-img", { "image-type": "smart-bg", "image-alignment": "center", "img-url": "https://www.ptc.com/-/media/Images/new-org/1366x542/ThingWorx_IIOT_CaterpillarCS_Img_1366x542.jpg?h=542&w=1366&la=en&hash=627ED00C1F58E3677A06F50C0F3009D6" }))), this.isMobile ? (
-    // Code for mobile only
-    h("div", { class: "mobile-wrapper" }, h("div", { class: 'acc-item' }, h("fl-tab-header", { "name-key": "tab-01", "tab-title": "Aerospace & Defense", class: "init-active" }, " "), h("fl-tab-content", { "name-key": "tab-01", class: "init-active" }, h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: '#' }, "See More about Aerospace & Defense"))), h("div", { class: 'acc-item' }, h("fl-tab-header", { "name-key": "tab-02", "tab-title": "Automotive" }), h("fl-tab-content", { "name-key": "tab-02" }, h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: '#' }, "See More about Aerospace & Defense"))), h("div", { class: 'acc-item' }, h("fl-tab-header", { "name-key": "tab-03", "tab-title": "Electronics & High-Tech" }), h("fl-tab-content", { "name-key": "tab-03" }, h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: '#' }, "See More about Aerospace & Defense"))), h("div", { class: 'acc-item' }, h("fl-tab-header", { "name-key": "tab-04", "tab-title": "Retail & Consumer Products" }), h("fl-tab-content", { "name-key": "tab-04" }, h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: '#' }, "See More about Aerospace & Defense")))))
-      :
-        (
-        // Code for Desktop only
-        h("div", { class: "non-mobile-wrapper" }, h("div", { class: "header-list-wrap" }, h("fl-tab-header", { "name-key": "tab-01", "tab-title": "Aerospace & Defense", class: "init-active" }, " "), h("fl-tab-header", { "name-key": "tab-02", "tab-title": "Automotive" }), h("fl-tab-header", { "name-key": "tab-03", "tab-title": "Electronics & High-Tech" }), h("fl-tab-header", { "name-key": "tab-04", "tab-title": "Retail & Consumer Products" })), h("div", { class: "content-wrap" }, h("fl-tab-content", { "name-key": "tab-01", class: "init-active" }, h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Aerospace & Defense"), h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: '#' }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "tab-02" }, h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Automotive"), h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: '#' }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "tab-03" }, h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Electronics & High-Tech"), h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Deliver the future of transportation and mobility and gain competitive advantage. Explore automotive solutions for OEMs and suppliers so your team can help drive the future of transportation."), h("a", { href: '#' }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "tab-04" }, h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Retail & Consumer Products"), h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Navigate supply chain disruption while maximizing revenue growth and sustainability. Explore how PTC\u2019s digital solutions can accelerate product innovation, supply chain collaboration, and more."), h("a", { href: '#' }, "See More about Aerospace & Defense")))))));
-  }
-  get hostElement() { return getElement(this); }
-};
+const FeaturedList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.isMobile = undefined;
+    this.selectedTabGloble = 'tab-01';
+  }
+  handleResize() {
+    this.isMobile = window.innerWidth < 992;
+    this.holdTabOnResize(this.selectedTabGloble);
+  }
+  componentWillLoad() {
+    this.isMobile = window.innerWidth < 992;
+  }
+  handleflTabClicked(event) {
+    this.selectedTabGloble = event.detail.name;
+    this.selectTab(this.selectedTabGloble);
+  }
+  holdTabOnResize(name) {
+    const contentBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-content`);
+    const headerBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-header`);
+    contentBlocks.forEach(content => {
+      if (content.classList.contains("init-active")) {
+        content.classList.remove("init-active");
+      }
+      content.getAttribute('name-key') === name ? (content.setAttribute('selected', 'selected')) : (content.removeAttribute('selected'));
+    });
+    headerBlocks.forEach(header => {
+      if (header.classList.contains("init-active")) {
+        header.classList.remove("init-active");
+      }
+      header.getAttribute('name-key') === name ? (header.setAttribute('selected', 'selected')) : (header.removeAttribute('selected'));
+    });
+  }
+  selectTab(name) {
+    const featuredImages = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-image`);
+    const contentBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-content`);
+    const headerBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-header`);
+    featuredImages.forEach(image => {
+      if (image.classList.contains("init-active")) {
+        image.classList.remove("init-active");
+      }
+      image.getAttribute('name-key') === name ? (image.setAttribute('selected', 'selected')) : (image.removeAttribute('selected'));
+    });
+    contentBlocks.forEach(content => {
+      this.updateActiveTab(name, content);
+    });
+    headerBlocks.forEach(header => {
+      this.updateActiveTab(name, header);
+    });
+  }
+  updateActiveTab(name, tabName) {
+    if (this.isMobile) {
+      if (tabName.getAttribute('name-key') === name) {
+        if (tabName.classList.contains("init-active")) {
+          tabName.removeAttribute('selected');
+        }
+        else {
+          tabName.getAttribute('selected') == 'selected' ? (tabName.removeAttribute('selected')) : (tabName.setAttribute('selected', 'selected'));
+        }
+      }
+      else {
+        tabName.removeAttribute('selected');
+      }
+    }
+    else {
+      tabName.getAttribute('name-key') === name ? (tabName.setAttribute('selected', 'selected')) : (tabName.removeAttribute('selected'));
+    }
+    if (tabName.classList.contains("init-active")) {
+      tabName.classList.remove("init-active");
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "featured-image-wrap" }, h("fl-tab-image", { "name-key": "tab-01", class: "init-active" }, h("ptc-img", { "image-type": "smart-bg", "image-alignment": "center", "img-url": "http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway" })), h("fl-tab-image", { "name-key": "tab-02" }, h("ptc-background-video", { overlay: false, "play-button-title": "Play", "pause-button-title": "Pause", "video-src": "https://www.ptc.com/en/www.ptc.com//-/media/Videos/BRAND-FILM-CAR-SECTION-short-1mb.mp4", "poster-src": "https://www.ptc.com/-/media/Images/new-org/misc/W232501-LWX23-Hero-Banner-Video-FINAL-jebyrne-110922-screenshot.jpg" })), h("fl-tab-image", { "name-key": "tab-03" }, h("ptc-img", { "image-type": "smart-bg", "image-alignment": "center", "img-url": "https://www.ptc.com/-/media/Images/new-org/1366x542/CIMC-1366x542.jpg?h=542&w=1366&la=en&hash=56AE14F73CFB62C24276D08E556B0949" })), h("fl-tab-image", { "name-key": "tab-04" }, h("ptc-img", { "image-type": "smart-bg", "image-alignment": "center", "img-url": "https://www.ptc.com/-/media/Images/new-org/1366x542/ThingWorx_IIOT_CaterpillarCS_Img_1366x542.jpg?h=542&w=1366&la=en&hash=627ED00C1F58E3677A06F50C0F3009D6" }))), this.isMobile ? (
+    // Code for mobile only
+    h("div", { class: "mobile-wrapper" }, h("div", { class: 'acc-item' }, h("fl-tab-header", { "name-key": "tab-01", "tab-title": "Aerospace & Defense", class: "init-active" }, " "), h("fl-tab-content", { "name-key": "tab-01", class: "init-active" }, h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: '#' }, "See More about Aerospace & Defense"))), h("div", { class: 'acc-item' }, h("fl-tab-header", { "name-key": "tab-02", "tab-title": "Automotive" }), h("fl-tab-content", { "name-key": "tab-02" }, h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: '#' }, "See More about Aerospace & Defense"))), h("div", { class: 'acc-item' }, h("fl-tab-header", { "name-key": "tab-03", "tab-title": "Electronics & High-Tech" }), h("fl-tab-content", { "name-key": "tab-03" }, h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: '#' }, "See More about Aerospace & Defense"))), h("div", { class: 'acc-item' }, h("fl-tab-header", { "name-key": "tab-04", "tab-title": "Retail & Consumer Products" }), h("fl-tab-content", { "name-key": "tab-04" }, h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: '#' }, "See More about Aerospace & Defense")))))
+      :
+        (
+        // Code for Desktop only
+        h("div", { class: "non-mobile-wrapper" }, h("div", { class: "header-list-wrap" }, h("fl-tab-header", { "name-key": "tab-01", "tab-title": "Aerospace & Defense", class: "init-active" }, " "), h("fl-tab-header", { "name-key": "tab-02", "tab-title": "Automotive" }), h("fl-tab-header", { "name-key": "tab-03", "tab-title": "Electronics & High-Tech" }), h("fl-tab-header", { "name-key": "tab-04", "tab-title": "Retail & Consumer Products" })), h("div", { class: "content-wrap" }, h("fl-tab-content", { "name-key": "tab-01", class: "init-active" }, h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Aerospace & Defense"), h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: '#' }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "tab-02" }, h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Automotive"), h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: '#' }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "tab-03" }, h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Electronics & High-Tech"), h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Deliver the future of transportation and mobility and gain competitive advantage. Explore automotive solutions for OEMs and suppliers so your team can help drive the future of transportation."), h("a", { href: '#' }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "tab-04" }, h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Retail & Consumer Products"), h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Navigate supply chain disruption while maximizing revenue growth and sustainability. Explore how PTC\u2019s digital solutions can accelerate product innovation, supply chain collaboration, and more."), h("a", { href: '#' }, "See More about Aerospace & Defense")))))));
+  }
+  get hostElement() { return getElement(this); }
+};
 FeaturedList.style = featuredListCss;
 
 export { FeaturedList as featured_list };