@ptcwebops/ptcw-design 6.3.66-beta → 6.3.68-beta

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

@@ -1,12 +1,12 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-c83db688.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-hyperlink);\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        transition:none;\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    &:focus-visible {\r\n        outline: 5px solid #003DD6 !important;\r\n        outline-offset: 0px !important;\r\n        border-radius: var(--ptc-border-radius-standard);\r\n      }\r\n}\r\n\r\n.light-links,.background-grey-10,.background-plm-grey  {\r\n    a:not(.hero-footer-form-wrapper a,  ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), a.light-link {\r\n        color: var(--color-blue-04);\r\n        margin: -2px;\r\n        border: 2px solid transparent;\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            transition:none;\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        &:focus-visible {\r\n            border-radius: var(--ptc-border-radius-standard);\r\n            border: 2px solid rgb(255, 255, 255);\r\n            outline: 5px solid var(--keyboard-nav-outline);\r\n        }\r\n    }\r\n\r\n    .podcast-cta-section a {\r\n        border: 2px solid transparent;\r\n\r\n        &:focus-visible {\r\n            border-radius: var(--ptc-border-radius-standard);\r\n            border: 2px solid rgb(255, 255, 255);\r\n            outline: 5px solid var(--keyboard-nav-outline);\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        transition:none;\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        transition:none;\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.vjs-social-share-links{\r\n    a{\r\n        color: var(--color-white);\r\n        &:hover{\r\n            color: var(--color-white);\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 {\r\n\tfont-family: var(--ptc-font-latin);\r\n\tfont-style: var(--ptc-font-style-normal);\r\n\ttext-decoration-line: underline;\r\n\tcolor: var(--color-hyperlink);\r\n\ttransition: color var(--ptc-transition-medium) var(--ptc-ease-out);\r\n\tfont-weight: var(--ptc-font-weight-bold);\r\n\r\n\t&:visited {\r\n\t\tcolor: var(--color-blue-10);\r\n\t}\r\n\r\n\t&:active,\r\n\t&:visited:active {\r\n\t\ttransition: none;\r\n\t\t// pressed\r\n\t\tcolor: var(--color-blue-09);\r\n\t}\r\n\r\n\t&:hover,\r\n\t&:visited:hover {\r\n\t\tcolor: var(--color-blue-08);\r\n\t}\r\n\r\n\t&.disabled {\r\n\t\tcolor: var(--color-gray-04) !important;\r\n\t\tcursor: not-allowed;\r\n\t}\r\n\t&:focus-visible {\r\n\t\toutline: 5px solid #003dd6 !important;\r\n\t\toutline-offset: 0px !important;\r\n\t\tborder-radius: var(--ptc-border-radius-standard);\r\n\t}\r\n}\r\n\r\n.light-links,\r\n.background-grey-10,\r\n.background-plm-grey {\r\n\ta:not(\r\n\t\t\t.hero-footer-form-wrapper a,\r\n\t\t\tptc-modal inline-form a,\r\n\t\t\t.podcast-cta-section a,\r\n\t\t\t.vjs-social-share-links a\r\n\t\t),\r\n\ta.light-link {\r\n\t\tcolor: var(--color-blue-04);\r\n\t\tmargin: -2px;\r\n\t\tborder: 2px solid transparent;\r\n\r\n\t\t&:visited {\r\n\t\t\tcolor: var(--color-blue-06);\r\n\t\t}\r\n\r\n\t\t&:active,\r\n\t\t&:visited:active {\r\n\t\t\ttransition: none;\r\n\t\t\t// pressed\r\n\t\t\tcolor: var(--color-blue-07);\r\n\t\t}\r\n\r\n\t\t&:hover,\r\n\t\t&:visited:hover {\r\n\t\t\tcolor: var(--color-blue-05);\r\n\t\t}\r\n\r\n\t\t&.disabled {\r\n\t\t\tcolor: var(--color-gray-04) !important;\r\n\t\t\tcursor: not-allowed;\r\n\t\t}\r\n\r\n\t\t&:focus-visible {\r\n\t\t\tborder-radius: var(--ptc-border-radius-standard);\r\n\t\t\tborder: 2px solid rgb(255, 255, 255);\r\n\t\t\toutline: 5px solid var(--keyboard-nav-outline);\r\n\t\t}\r\n\t}\r\n\r\n\t.podcast-cta-section a {\r\n\t\tborder: 2px solid transparent;\r\n\r\n\t\t&:focus-visible {\r\n\t\t\tborder-radius: var(--ptc-border-radius-standard);\r\n\t\t\tborder: 2px solid rgb(255, 255, 255);\r\n\t\t\toutline: 5px solid var(--keyboard-nav-outline);\r\n\t\t}\r\n\t}\r\n}\r\n\r\n.ptc-link {\r\n\tcolor: var(--color-gray-10);\r\n\ttext-decoration: underline;\r\n\ttext-decoration-thickness: 2px;\r\n\ttext-decoration-color: var(--color-green-06);\r\n\ttext-underline-offset: 5px;\r\n\ttransition: text-decoration-color var(--ptc-transition-medium)\r\n\t\tvar(--ptc-ease-inout);\r\n\r\n\t&:hover {\r\n\t\tcolor: var(--color-green-06);\r\n\t}\r\n\r\n\t&:visited {\r\n\t\tcolor: var(--color-gray-10);\r\n\t}\r\n\r\n\t&:active,\r\n\t&:visited:active {\r\n\t\ttransition: none;\r\n\t\t// pressed\r\n\t\tcolor: var(--color-green-06);\r\n\t}\r\n\r\n\t&:hover,\r\n\t&:visited:hover {\r\n\t\tcolor: var(--color-green-06);\r\n\t}\r\n}\r\n\r\n.ptc-link-dark {\r\n\tcolor: var(--color-white);\r\n\ttext-decoration: underline;\r\n\ttext-decoration-thickness: 2px;\r\n\ttext-decoration-color: var(--color-green-06);\r\n\ttext-underline-offset: 5px;\r\n\ttransition: text-decoration-color var(--ptc-transition-medium)\r\n\t\tvar(--ptc-ease-inout);\r\n\r\n\t&:hover {\r\n\t\tcolor: var(--color-green-06);\r\n\t}\r\n\r\n\t&:visited {\r\n\t\tcolor: var(--color-white);\r\n\t}\r\n\r\n\t&:active,\r\n\t&:visited:active {\r\n\t\ttransition: none;\r\n\t\t// pressed\r\n\t\tcolor: var(--color-green-06);\r\n\t}\r\n\r\n\t&:hover,\r\n\t&:visited:hover {\r\n\t\tcolor: var(--color-green-06);\r\n\t}\r\n}\r\n.vjs-social-share-links {\r\n\ta {\r\n\t\tcolor: var(--color-white);\r\n\t\t&:hover {\r\n\t\t\tcolor: var(--color-white);\r\n\t\t}\r\n\t}\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 FeaturedList = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.isMobile = undefined;
-    this.selectedTabGloble = 'tab-01';
+    this.selectedTabGloble = "tab-01";
   }
   handleResize() {
     this.isMobile = window.innerWidth < 992;
@@ -22,59 +22,69 @@ const FeaturedList = class {
   holdTabOnResize(name) {
     const contentBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-content`);
     const headerBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-header`);
-    contentBlocks.forEach(content => {
+    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'));
+      content.getAttribute("name-key") === name
+        ? content.setAttribute("selected", "selected")
+        : content.removeAttribute("selected");
     });
-    headerBlocks.forEach(header => {
+    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'));
+      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 => {
+    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'));
+      image.getAttribute("name-key") === name
+        ? image.setAttribute("selected", "selected")
+        : image.removeAttribute("selected");
     });
-    contentBlocks.forEach(content => {
+    contentBlocks.forEach((content) => {
       this.updateActiveTab(name, content);
       //  Added code to recall readmore for hidden tabs
-      if (content.getAttribute('name-key') === name) {
-        const readMoreComp = content.querySelector('ptc-readmore');
+      if (content.getAttribute("name-key") === name) {
+        const readMoreComp = content.querySelector("ptc-readmore");
         if (readMoreComp) {
           readMoreComp.updateReadmoreStatus();
         }
       }
     });
-    headerBlocks.forEach(header => {
+    headerBlocks.forEach((header) => {
       this.updateActiveTab(name, header);
     });
   }
   updateActiveTab(name, tabName) {
     if (this.isMobile) {
-      if (tabName.getAttribute('name-key') === name) {
+      if (tabName.getAttribute("name-key") === name) {
         if (tabName.classList.contains("init-active")) {
-          tabName.removeAttribute('selected');
+          tabName.removeAttribute("selected");
         }
         else {
-          tabName.getAttribute('selected') == 'selected' ? (tabName.removeAttribute('selected')) : (tabName.setAttribute('selected', 'selected'));
+          tabName.getAttribute("selected") == "selected"
+            ? tabName.removeAttribute("selected")
+            : tabName.setAttribute("selected", "selected");
         }
       }
       else {
-        tabName.removeAttribute('selected');
+        tabName.removeAttribute("selected");
       }
     }
     else {
-      tabName.getAttribute('name-key') === name ? (tabName.setAttribute('selected', 'selected')) : (tabName.removeAttribute('selected'));
+      tabName.getAttribute("name-key") === name
+        ? tabName.setAttribute("selected", "selected")
+        : tabName.removeAttribute("selected");
     }
     if (tabName.classList.contains("init-active")) {
       tabName.classList.remove("init-active");
@@ -83,11 +93,9 @@ const FeaturedList = class {
   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")))))));
+    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); }
 };

package/dist/esm/fl-tab-content_3.entry.js

@@ -10,7 +10,10 @@ const FlTabContent = class {
     this.onbeforematch = undefined;
   }
   render() {
-    return (h(Host, { class: `featured-content ${this.selected ? 'selected' : ''}` }, h("div", Object.assign({ class: "fl-content-wrap" }, !this.selected && { hidden: 'until-found' }, { onBeforeMatch: this.onbeforematch }), h("slot", null))));
+    return (h(Host, { class: `featured-content ${this.selected ? "selected" : ""}` }, h("div", Object.assign({ class: "fl-content-wrap" }, (!this.selected && { hidden: "until-found" }), {
+      /**@ts-ignore */
+      onBeforeMatch: this.onbeforematch
+    }), h("slot", null))));
   }
 };
 FlTabContent.style = flTabContentCss;
@@ -27,17 +30,17 @@ const FlTabHeader = class {
       switch (e.key) {
         case "ArrowDown": {
           this.flHeaderArrowFocus.emit({
-            'event': e,
-            'valueKey': this.valueKey,
-            'direction': 1
+            event: e,
+            valueKey: this.valueKey,
+            direction: 1,
           });
           break;
         }
         case "ArrowUp": {
           this.flHeaderArrowFocus.emit({
-            'event': e,
-            'valueKey': this.valueKey,
-            'direction': -1
+            event: e,
+            valueKey: this.valueKey,
+            direction: -1,
           });
           break;
         }
@@ -48,9 +51,9 @@ const FlTabHeader = class {
         case "Tab":
           {
             this.flHeaderTabFocus.emit({
-              'sender': this,
-              'event': e,
-              'valueKey': this.valueKey
+              sender: this,
+              event: e,
+              valueKey: this.valueKey,
             });
           }
           break;
@@ -65,14 +68,14 @@ const FlTabHeader = class {
   }
   handleClick(event) {
     this.flTabClicked.emit({
-      'sender': this,
-      'event': event,
-      'name': this.nameKey,
-      'valueKey': this.valueKey
+      sender: this,
+      event: event,
+      name: this.nameKey,
+      valueKey: this.valueKey,
     });
   }
   render() {
-    return (h(Host, { class: `fl-header ${this.selected ? 'selected' : ''}`, onClick: this.handleClick.bind(this), onKeyDown: this.handleKeyDown.bind(this) }, h("slot", null), h("p", { id: this.trackerId, class: `${this.selected ? 'selected-p' : ''} mf-listen`, tabindex: (this.selected || window.innerWidth < 992) ? 0 : -1 }, this.tabTitle)));
+    return (h(Host, { class: `fl-header ${this.selected ? "selected" : ""}`, onClick: this.handleClick.bind(this), onKeyDown: this.handleKeyDown.bind(this) }, h("slot", null), h("p", { id: this.trackerId, class: `${this.selected ? "selected-p" : ""} mf-listen`, tabindex: this.selected || window.innerWidth < 992 ? 0 : -1 }, this.tabTitle)));
   }
   get el() { return getElement(this); }
 };
@@ -87,7 +90,7 @@ const FlTabImage = class {
     this.selected = false;
   }
   render() {
-    return (h(Host, { class: `featured-img ${this.selected ? 'selected' : ''}` }, h("slot", null)));
+    return (h(Host, { class: `featured-img ${this.selected ? "selected" : ""}` }, h("slot", null)));
   }
 };
 FlTabImage.style = flTabImageCss;

package/dist/esm/footer-form.entry.js

@@ -1,12 +1,12 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-c83db688.js';
 
-const footerFormCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block}.flex-adjustments{display:flex;justify-content:center}@media only screen and (min-width: 768px){.flex-adjustments{justify-content:flex-end}}.embedded-form-container{background-color:#142D48}.form-wrapper{width:433px;display:flex;border-radius:3px;background:#FFF;box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.16);flex-direction:column;align-items:center;padding:24px 0px;justify-content:center}";
+const footerFormCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block}.flex-adjustments{display:flex;justify-content:center}@media only screen and (min-width: 768px){.flex-adjustments{justify-content:flex-end}}.embedded-form-container{background-color:#142d48}.form-wrapper{width:433px;display:flex;border-radius:3px;background:#fff;box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.16);flex-direction:column;align-items:center;padding:24px 0px;justify-content:center}";
 
 const FooterForm = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.formData = {
-      email: '',
+      email: "",
       policyChecked: false,
     };
   }
@@ -15,8 +15,8 @@ const FooterForm = class {
   // private companyEle: HTMLPtcTextfieldElement;
   // private phoneEle: HTMLPtcTextfieldElement;
   componentDidLoad() {
-    this.formButton = this.el.querySelector('.form-submit');
-    this.formButton.addEventListener('click', this.handleSubmit.bind(this));
+    this.formButton = this.el.querySelector(".form-submit");
+    this.formButton.addEventListener("click", this.handleSubmit.bind(this));
     //get Email
     this.emailEle = this.el.querySelector('ptc-textfield[field-id="contact-email"]');
     // this.firstNameEle = this.el.querySelector('ptc-textfield[field-id="contact-firstname"]')
@@ -35,23 +35,23 @@ const FooterForm = class {
     // this.formData.company = this.companyEle.inputValue;
     // this.formData.phone = this.phoneEle.inputValue;
     if (this.isValid()) {
-      const formSubmitEvent = new CustomEvent('formSubmit', {
+      const formSubmitEvent = new CustomEvent("formSubmit", {
         detail: this.formData,
         bubbles: true,
       });
       this.el.dispatchEvent(formSubmitEvent);
     }
     else {
-      console.log('Form validation failed');
+      console.log("Form validation failed");
     }
   }
   isValid() {
     const { email, policyChecked } = this.formData;
-    const invalidLength = document.querySelectorAll('.invalid-field').length;
-    return email !== '' && policyChecked && invalidLength === 0;
+    const invalidLength = document.querySelectorAll(".invalid-field").length;
+    return email !== "" && policyChecked && invalidLength === 0;
   }
   render() {
-    return (h(Host, null, h("div", { class: "ptc-container ptc-section-standard u-flex u-flex-justify-center" }, h("div", { class: "form-wrapper" }, h("form", { onSubmit: event => this.handleSubmit(event) }, h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), h("ptc-form-checkbox", { label: "I agree to the policy", "checkbox-id": "test" }), h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block;}" }, "Submit"))))));
+    return (h(Host, null, h("div", { class: "ptc-container ptc-section-standard u-flex u-flex-justify-center" }, h("div", { class: "form-wrapper" }, h("form", { onSubmit: (event) => this.handleSubmit(event) }, h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), h("ptc-form-checkbox", { label: "I agree to the policy", "checkbox-id": "test" }), h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block;}" }, "Submit"))))));
   }
   get el() { return getElement(this); }
 };

package/dist/esm/homepage-clickable-tab.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c83db688.js';
 
-const homepageClickableTabCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;position:relative}.tab-id-wrapper{width:100%;height:100%;display:flex}a{text-decoration:none !important}.tab-item{cursor:pointer;color:var(--color-white);border-radius:var(--ptc-border-radius-standard);display:flex;width:-webkit-fill-available;height:-webkit-fill-available;min-height:72px;padding:var(--ptc-element-spacing-06);justify-content:center;align-items:center;gap:10px;align-self:stretch;text-align:center;font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-extrabold)}@-moz-document url-prefix(){.tab-item{width:100%}}@media screen and (min-width: 1200px){.tab-item{font-size:var(--ptc-font-size-medium)}}@media only screen and (min-width: 1440px){.tab-item{width:calc(100% - 48px)}}@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none){.tab-item{height:auto}}.tab-item span{z-index:2}.tab-item:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}.tab-item{background:var(--color-gray-11);position:relative}.tab-item::before{content:\"\";position:absolute;width:100%;height:100%;opacity:0;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout);border-radius:var(--ptc-border-radius-standard)}.tab-item:hover{color:var(--color-white)}.tab-item:hover::before{opacity:1}.tab-item.active{color:var(--color-white)}.tab-item.active::after{content:\"\";position:absolute;bottom:-18.5px;left:50%;transform:translateX(-50%);width:28px;height:19px;background-repeat:no-repeat}@-moz-document url-prefix(){.tab-item.active::after{bottom:-18px}}.tab-item.hp-blue::before{background:linear-gradient(180deg, #197BC0 0%, #4795CD 100%)}.tab-item.hp-blue.active{background:linear-gradient(180deg, #197BC0 0%, #4795CD 100%)}.tab-item.hp-blue.active::after{background-image:url(\"data:image/svg+xml,%3Csvg width='28' height='19' viewBox='0 0 28 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L12.3578 17.6585C13.1539 18.7962 14.8388 18.7962 15.635 17.6585L27.9927 0H0Z' fill='%234795CD'/%3E%3C/svg%3E\")}.tab-item.hp-green::before{background:linear-gradient(180deg, #00890B 0%, #33A13C 100%)}.tab-item.hp-green.active{background:linear-gradient(180deg, #00890B 0%, #33A13C 100%)}.tab-item.hp-green.active::after{background-image:url(\"data:image/svg+xml,%3Csvg width='28' height='19' viewBox='0 0 28 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.35082e-07 0L12.3578 17.6585C13.1539 18.7962 14.8388 18.7962 15.635 17.6585L27.9927 0H9.35082e-07Z' fill='%2333A13C'/%3E%3C/svg%3E\")}.tab-item.hp-red::before{background:linear-gradient(180deg, #D33E3E 0%, #DC6565 100%)}.tab-item.hp-red.active{background:linear-gradient(180deg, #D33E3E 0%, #DC6565 100%)}.tab-item.hp-red.active::after{background-image:url(\"data:image/svg+xml,%3Csvg width='28' height='19' viewBox='0 0 28 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.35082e-07 0L12.3578 17.6585C13.1539 18.7962 14.8388 18.7962 15.635 17.6585L27.9927 0H9.35082e-07Z' fill='%23DC6565'/%3E%3C/svg%3E%0A\")}.tab-item.hp-gray::before{background:linear-gradient(180deg, #617480 0%, #819099 100%)}.tab-item.hp-gray.active{background:linear-gradient(180deg, #617480 0%, #819099 100%)}.tab-item.hp-gray.active::after{background-image:url(\"data:image/svg+xml,%3Csvg width='28' height='19' viewBox='0 0 28 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.35082e-07 0L12.3578 17.6585C13.1539 18.7962 14.8388 18.7962 15.635 17.6585L27.9927 0H9.35082e-07Z' fill='%23819099'/%3E%3C/svg%3E\")}.tab-item.hp-orange::before{background:linear-gradient(180deg, #C37729 0%, #CF9254 100%)}.tab-item.hp-orange.active{background:linear-gradient(180deg, #C37729 0%, #CF9254 100%)}.tab-item.hp-orange.active::after{background-image:url(\"data:image/svg+xml,%3Csvg width='28' height='19' viewBox='0 0 28 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.35082e-07 0L12.3578 17.6585C13.1539 18.7962 14.8388 18.7962 15.635 17.6585L27.9927 0H9.35082e-07Z' fill='%23CF9254'/%3E%3C/svg%3E\")}.tab-item span{overflow-wrap:break-word}";
+const homepageClickableTabCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;position:relative}.tab-id-wrapper{width:100%;height:100%;display:flex}a{text-decoration:none !important}.tab-item{cursor:pointer;color:var(--color-white);border-radius:var(--ptc-border-radius-standard);display:flex;width:-webkit-fill-available;height:-webkit-fill-available;min-height:72px;padding:var(--ptc-element-spacing-06);justify-content:center;align-items:center;gap:10px;align-self:stretch;text-align:center;font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-extrabold)}@-moz-document url-prefix(){.tab-item{width:100%}}@media screen and (min-width: 1200px){.tab-item{font-size:var(--ptc-font-size-medium)}}@media only screen and (min-width: 1440px){.tab-item{width:calc(100% - 48px)}}@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none){.tab-item{height:auto}}.tab-item span{z-index:2}.tab-item:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}.tab-item{background:var(--color-gray-11);position:relative}.tab-item::before{content:\"\";position:absolute;width:100%;height:100%;opacity:0;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout);border-radius:var(--ptc-border-radius-standard)}.tab-item:hover{color:var(--color-white)}.tab-item:hover::before{opacity:1}.tab-item.active{color:var(--color-white)}.tab-item.active::after{content:\"\";position:absolute;bottom:-18.5px;left:50%;transform:translateX(-50%);width:28px;height:19px;background-repeat:no-repeat}@-moz-document url-prefix(){.tab-item.active::after{bottom:-18px}}.tab-item.hp-blue::before{background:linear-gradient(180deg, #197bc0 0%, #4795cd 100%)}.tab-item.hp-blue.active{background:linear-gradient(180deg, #197bc0 0%, #4795cd 100%)}.tab-item.hp-blue.active::after{background-image:url(\"data:image/svg+xml,%3Csvg width='28' height='19' viewBox='0 0 28 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L12.3578 17.6585C13.1539 18.7962 14.8388 18.7962 15.635 17.6585L27.9927 0H0Z' fill='%234795CD'/%3E%3C/svg%3E\")}.tab-item.hp-green::before{background:linear-gradient(180deg, #00890b 0%, #33a13c 100%)}.tab-item.hp-green.active{background:linear-gradient(180deg, #00890b 0%, #33a13c 100%)}.tab-item.hp-green.active::after{background-image:url(\"data:image/svg+xml,%3Csvg width='28' height='19' viewBox='0 0 28 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.35082e-07 0L12.3578 17.6585C13.1539 18.7962 14.8388 18.7962 15.635 17.6585L27.9927 0H9.35082e-07Z' fill='%2333A13C'/%3E%3C/svg%3E\")}.tab-item.hp-red::before{background:linear-gradient(180deg, #d33e3e 0%, #dc6565 100%)}.tab-item.hp-red.active{background:linear-gradient(180deg, #d33e3e 0%, #dc6565 100%)}.tab-item.hp-red.active::after{background-image:url(\"data:image/svg+xml,%3Csvg width='28' height='19' viewBox='0 0 28 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.35082e-07 0L12.3578 17.6585C13.1539 18.7962 14.8388 18.7962 15.635 17.6585L27.9927 0H9.35082e-07Z' fill='%23DC6565'/%3E%3C/svg%3E%0A\")}.tab-item.hp-gray::before{background:linear-gradient(180deg, #617480 0%, #819099 100%)}.tab-item.hp-gray.active{background:linear-gradient(180deg, #617480 0%, #819099 100%)}.tab-item.hp-gray.active::after{background-image:url(\"data:image/svg+xml,%3Csvg width='28' height='19' viewBox='0 0 28 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.35082e-07 0L12.3578 17.6585C13.1539 18.7962 14.8388 18.7962 15.635 17.6585L27.9927 0H9.35082e-07Z' fill='%23819099'/%3E%3C/svg%3E\")}.tab-item.hp-orange::before{background:linear-gradient(180deg, #c37729 0%, #cf9254 100%)}.tab-item.hp-orange.active{background:linear-gradient(180deg, #c37729 0%, #cf9254 100%)}.tab-item.hp-orange.active::after{background-image:url(\"data:image/svg+xml,%3Csvg width='28' height='19' viewBox='0 0 28 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.35082e-07 0L12.3578 17.6585C13.1539 18.7962 14.8388 18.7962 15.635 17.6585L27.9927 0H9.35082e-07Z' fill='%23CF9254'/%3E%3C/svg%3E\")}.tab-item span{overflow-wrap:break-word}";
 
 const HomepageClickableTab = class {
   constructor(hostRef) {
@@ -8,7 +8,7 @@ const HomepageClickableTab = class {
     this.tabSelected = createEvent(this, "tabSelected", 7);
     this.active = undefined;
     this.label = undefined;
-    this.activeColor = 'hp-blue';
+    this.activeColor = "hp-blue";
     this.isHovered = false;
     this.styles = undefined;
     this.trackerId = undefined;
@@ -24,15 +24,30 @@ const HomepageClickableTab = class {
   }
   componentDidRender() {
     let that = this;
-    this.el.shadowRoot.querySelectorAll('a').forEach((a) => {
-      a.addEventListener('click', (e) => { e.preventDefault(); that.handleClick(); });
-      a.addEventListener('keypress', () => { that.handleClick(); });
-      a.addEventListener('mouseenter', () => { that.handleMouseEnter(); });
-      a.addEventListener('mouseleave', () => { that.handleMouseLeave(); });
+    this.el.shadowRoot
+      .querySelectorAll("a")
+      .forEach((a) => {
+      a.addEventListener("click", (e) => {
+        e.preventDefault();
+        that.handleClick();
+      });
+      a.addEventListener("keypress", () => {
+        that.handleClick();
+      });
+      a.addEventListener("mouseenter", () => {
+        that.handleMouseEnter();
+      });
+      a.addEventListener("mouseleave", () => {
+        that.handleMouseLeave();
+      });
     });
   }
   render() {
-    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { id: this.trackerId, class: "tab-id-wrapper" }, h("a", { href: "#", class: { 'tab-item': true, 'active': this.active, [this.activeColor]: true }, tabindex: "0" }, h("span", { class: "hyphenate-text" }, this.label)))));
+    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { id: this.trackerId, class: "tab-id-wrapper" }, h("a", { href: "#", class: {
+        "tab-item": true,
+        active: this.active,
+        [this.activeColor]: true,
+      }, tabindex: "0" }, h("span", { class: "hyphenate-text" }, this.label)))));
   }
   get el() { return getElement(this); }
 };

package/dist/esm/homepage-jumbotron.entry.js

@@ -8,12 +8,12 @@ const HomepageJumbotron = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.tileCount = 0;
-    this.bgVideoSrc = '';
-    this.bgSrc = '';
-    this.jumbotron = 'dark';
+    this.bgVideoSrc = "";
+    this.bgSrc = "";
+    this.jumbotron = "dark";
     this.isIframe = false;
-    this.playBtnText = 'play';
-    this.pauseBtnText = 'pause';
+    this.playBtnText = "play";
+    this.pauseBtnText = "pause";
     this.activeTab = 0;
     this.activeBgVideoSrc = undefined;
     this.activeMainTitle = undefined;
@@ -21,10 +21,10 @@ const HomepageJumbotron = class {
     this.activeButton = undefined;
     this.tileElements = [];
     this.isTransitioning = undefined;
-    this.mediaTag = 'VIDEO';
+    this.mediaTag = "VIDEO";
   }
   handleWindowResize() {
-    equalizeHeights('ptc-info-tile', this.el);
+    equalizeHeights("ptc-info-tile", this.el);
   }
   componentWillLoad() {
     this.updateDefaultContent();
@@ -33,23 +33,23 @@ const HomepageJumbotron = class {
     this.initSlider();
   }
   componentDidRender() {
-    equalizeHeights('ptc-info-tile', this.el);
+    equalizeHeights("ptc-info-tile", this.el);
   }
   initSlider() {
     if (this.swiperContainerRef) {
       this.mySwiper = new Swiper(this.swiperContainerRef, {
-        slidesPerView: 'auto',
+        slidesPerView: "auto",
         initialSlide: 0,
         spaceBetween: 0,
         loop: false,
         pagination: {
-          el: '.swiper-pagination',
+          el: ".swiper-pagination",
           clickable: true,
         },
         breakpoints: {
           768: {
             initialSlide: 0,
-            slidesPerView: 'auto',
+            slidesPerView: "auto",
             spaceBetween: 0,
           },
           1200: {
@@ -84,10 +84,18 @@ const HomepageJumbotron = class {
     const activeMainTitleElement = this.el.querySelector(`[slot="main-title-${this.activeTab}"]`);
     const activeSubTitleElement = this.el.querySelector(`[slot="sub-title-${this.activeTab}"]`);
     const activeButtonElement = this.el.querySelector(`[slot="j-cta-${this.activeTab}"]`);
-    this.activeBgVideoSrc = activeBgVideoElement ? activeBgVideoElement.getAttribute('src') : '';
-    this.activeMainTitle = activeMainTitleElement ? activeMainTitleElement.innerHTML : '';
-    this.activeSubTitle = activeSubTitleElement ? activeSubTitleElement.innerHTML : '';
-    this.activeButton = activeButtonElement ? activeButtonElement.innerHTML : '';
+    this.activeBgVideoSrc = activeBgVideoElement
+      ? activeBgVideoElement.getAttribute("src")
+      : "";
+    this.activeMainTitle = activeMainTitleElement
+      ? activeMainTitleElement.innerHTML
+      : "";
+    this.activeSubTitle = activeSubTitleElement
+      ? activeSubTitleElement.innerHTML
+      : "";
+    this.activeButton = activeButtonElement
+      ? activeButtonElement.innerHTML
+      : "";
     this.mediaTag = activeBgVideoElement.tagName;
   }
   updateTileElements() {
@@ -102,9 +110,12 @@ const HomepageJumbotron = class {
     }, 250);
   }
   render() {
-    return (h(Host, null, h("ptc-jumbotron", Object.assign({ styles: ".parent{min-height:600px; max-height:850px;}", "jumbotron-type": this.mediaTag === 'VIDEO' ? 'dark-video' : 'dark' }, (!!this.activeBgVideoSrc && { bgVideoSrc: this.activeBgVideoSrc }), (!this.bgVideoSrc && !!this.bgSrc && { bgSrc: this.bgSrc }), { "is-iframe": this.isIframe, "is-homepage": "true", "is-transitioning": this.isTransitioning, "sub-title": "" //sub title is coming from slot here
+    return (h(Host, null, h("ptc-jumbotron", Object.assign({ styles: ".parent{min-height:600px; max-height:850px;}", "jumbotron-type": this.mediaTag === "VIDEO" ? "dark-video" : "dark" }, (!!this.activeBgVideoSrc && {
+      bgVideoSrc: this.activeBgVideoSrc,
+    }), (!this.bgVideoSrc &&
+      !!this.bgSrc && { bgSrc: this.bgSrc }), { "is-iframe": this.isIframe, "is-homepage": "true", "is-transitioning": this.isTransitioning, "sub-title": "" //sub title is coming from slot here
       ,
-      "play-button-title": this.playBtnText, "pause-button-title": this.pauseBtnText, "button-location": "allbp-bottom-right", "button-tab-index": "true" }), h("slot", { name: "breadcrumb" }), h("h1", { slot: "main-title", class: "hp-h1" }, this.activeMainTitle), h("p", { slot: "hp-sub-title", class: "hp-sub-title" }, this.activeSubTitle), h("div", { slot: "j-cta", innerHTML: this.activeButton })), h("div", { class: "swiper-container", ref: el => (this.swiperContainerRef = el) }, h("div", { class: "swiper-wrapper" }, this.tileElements.map((tile, index) => (h("div", { class: "swiper-slide", key: index, innerHTML: tile.outerHTML })))), h("div", { class: "swiper-pagination" }))));
+      "play-button-title": this.playBtnText, "pause-button-title": this.pauseBtnText, "button-location": "allbp-bottom-right", "button-tab-index": "true" }), h("slot", { name: "breadcrumb" }), h("h1", { slot: "main-title", class: "hp-h1" }, this.activeMainTitle), h("p", { slot: "hp-sub-title", class: "hp-sub-title" }, this.activeSubTitle), h("div", { slot: "j-cta", innerHTML: this.activeButton })), h("div", { class: "swiper-container", ref: (el) => (this.swiperContainerRef = el) }, h("div", { class: "swiper-wrapper" }, this.tileElements.map((tile, index) => (h("div", { class: "swiper-slide", key: index, innerHTML: tile.outerHTML })))), h("div", { class: "swiper-pagination" }))));
   }
   get el() { return getElement(this); }
 };