@ptcwebops/ptcw-design 6.3.12 → 6.3.13-beta

package/dist/collection/components/icon-asset/media/designer-v6.0.6.svg

@@ -395,7 +395,6 @@
     <path id="rect28" d="M 0,0 H 4 V 18 H 0 Z" />
     <path id="rect30" d="m 10,0 h 4 v 18 h -4 z" />
   </symbol>
-
   <symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 22.84 22.84" id="download-arrow-news">
     <defs>
@@ -423,7 +422,6 @@
       </g>
     </g>
   </symbol>
-
   <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="twitter-blogs-icon">
     <g id="Layer_2">
       <g id="Layer_1-2">
@@ -460,6 +458,36 @@
       </g>
     </g>
   </symbol>
+
+  <symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 22.84 22.84" id="download-arrow-news">
+    <style>.cls-1{fill:url(#linear-gradient);}</style>
+    <defs>
+      <linearGradient id="linear-gradient" x1="0.22" y1="25.05" x2="-0.67" y2="25.43"
+        gradientTransform="matrix(35, 0, 0, -35, 13.73, 892.38)" gradientUnits="userSpaceOnUse">
+        <stop offset="0" stop-color="#77c14d"></stop>
+        <stop offset="1" stop-color="#03793e"></stop>
+      </linearGradient>
+    </defs>
+    <g id="Layer_2">
+      <g id="Layer_1-2">
+        <g id="Group_1444">
+          <g id="Ellipse_446-2">
+            <circle cx="11.42" cy="11.42" r="11.42" class="cls-1"></circle>
+            <circle cx="11.42" cy="11.42" r="11.26" style="fill:none;stroke:#fff;stroke-width:0.33px;"></circle>
+          </g>
+        </g>
+        <g id="Group_1424">
+          <rect id="Rectangle_420" x="10.05" y="8.04" width="2.73" height="1.24" style="fill:#fff;"></rect>
+          <rect id="Rectangle_421" x="10.05" y="6.53" width="2.73" height="0.83" style="fill:#fff;"></rect>
+          <path id="Path_4278"
+            d="M10.17,12a.07.07,0,0,1-.07.07H8.8a.08.08,0,0,0-.08.07.11.11,0,0,0,0,.05L11.34,16a.08.08,0,0,0,.12,0,0,0,0,0,0,0,0l2.59-3.79a.08.08,0,0,0,0-.11h-1.3a.08.08,0,0,1-.08-.07h0V10a.07.07,0,0,0-.07-.07H10.25a.08.08,0,0,0-.08.07h0Z"
+            style="fill:#fff;"></path>
+        </g>
+      </g>
+    </g>
+  </symbol>
+  
   <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 32" id="arrow_ascending">
     <path d="M21.8 14.6L11 0L0 14.6H7L7 32L14.8 32L14.8 14.6L21.8 14.6Z"></path>
   </symbol>

package/dist/collection/components/innovator-toggle-container/innovator-toggle-container.css

@@ -82,26 +82,26 @@ a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
 }
 
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-plm-grey a.light-link {
   color: var(--color-blue-04);
   margin: -2px;
   border: 2px solid transparent;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
   transition: none;
   color: var(--color-blue-07);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
   color: var(--color-blue-05);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);

package/dist/collection/components/jumbotron-sub-menu/jumbotron-sub-menu.js

@@ -23,6 +23,7 @@ export class JumbotronSubMenu {
     const upArrow = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "11", viewBox: "0 0 15 11", fill: "none" }, h("path", { d: "M13 8.5L7.34315 2.71178L1.68629 8.5", stroke: "white", "stroke-width": "3", "stroke-linecap": "round" })));
     const downArrow = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "11", viewBox: "0 0 15 11", fill: "none" }, h("path", { d: "M13 2.5L7.34315 8.28822L1.68629 2.5", stroke: "white", "stroke-width": "3", "stroke-linecap": "round" })));
     const menuItems = Array.from(this.el.querySelectorAll('[slot^="menu-item"]'));
+    //console.log("menuItems: " + menuItems[0].textContent)
     return (h("nav", { class: "menu" }, h("div", { class: "mobile-menu-icon", onClick: () => this.toggleMenu(), onKeyPress: () => this.toggleMenu(), tabindex: "0" }, h("span", { class: "mobile-menu-text" }, menuItems[this.activeItem].textContent), h("span", null, this.isOpen ? upArrow : downArrow)), h("ul", { class: `menu-list ${this.isOpen ? 'open' : ''}` }, menuItems.map((item, index) => (h("li", { key: index, id: `hp-tab-${index}`, class: this.activeItem === index ? 'active' : '' }, h("button", { onClick: () => this.selectItem(index) }, item.textContent)))))));
   }
   static get is() { return "jumbotron-sub-menu"; }

package/dist/collection/components/jumbotron-sub-mune/jumbotron-sub-mune.js

@@ -17,6 +17,7 @@ export class JumbotronSubMune {
   componentWillLoad() {
     if (this.items.length > 0) {
       this.activeItem = this.items[0];
+      console.log("active item when first load: " + this.activeItem);
     }
   }
   toggleMenu() {

package/dist/collection/components/organism-bundles/blog-detail-content/blog-detail-content.js

@@ -145,6 +145,7 @@ export class BlogDetailContent {
         this.preloaderDependency = new PreloaderDependency(preloader);
       }
       setTimeout(() => {
+        console.log("Blog detail content resolving promise");
         this.preloaderDependency.resolve();
       }, 10000);
     };

package/dist/collection/components/organism-bundles/blog-detail-layout/blog-detail-layout.js

@@ -33,6 +33,7 @@ export class BlogDetailLayout {
         this.preloaderDependency = new PreloaderDependency(preloader);
       }
       setTimeout(() => {
+        console.log("Blog detail layout resolving promise");
         this.preloaderDependency.resolve();
       }, 5000);
     };

package/dist/collection/components/organism-bundles/blogs-search-section/blogs-search-section.js

@@ -110,6 +110,7 @@ export class BlogsSearchSection {
         this.getResults();
       });
       mobileFiltersModalCta.addEventListener('clicked', () => {
+        console.log("Modal open");
         mobileFiltersModal.setAttribute('show', 'true');
       });
       mobileFiltersModal.addEventListener('opened', () => {
@@ -172,6 +173,7 @@ export class BlogsSearchSection {
   }
   getResults() {
     setTimeout(() => {
+      console.log("Blogs search section resolving promise");
       this.preloaderDependency.resolve();
       // this.isLoading = false;
       this.data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

package/dist/collection/components/organism-bundles/bundle-example/bundle-example.js

@@ -13,6 +13,7 @@ export class BundleExample {
     this.updateMaxHeight();
   }
   squareHeightChangedHandler(event) {
+    //console.log('Received the height:', event.detail); // Here you get the height
     this.cardHeights = [...this.cardHeights, event.detail];
     this.updateMaxHeight();
   }
@@ -25,6 +26,7 @@ export class BundleExample {
   }
   updateMaxHeight() {
     this.maxCardHeight = Math.max(...this.cardHeights, 0); // Update maxHeight based on the current cardHeights
+    console.log('cardheights: ' + this.cardHeights);
   }
   render() {
     return (h(Host, null, h("div", { class: "is-grid has-col-2 has-col-2-sm has-col-3-md has-col-4-lg has-col-5-xl has-col-gap-md has-row-gap-md" }, h("div", { class: "is-col-1" }, h("ptc-card-wrapper", { "card-type": "card-video", class: "is-col-4", "card-link": "https://www.ptc.com", "link-title": "ptc", "is-loading": this.isLoading }, h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), h("ptc-card-bottom", { "card-type": "card-video" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-19", "para-color": "white", "para-margin": "margin-top-3" }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), h("div", { class: "is-col-1" }, h("ptc-card-wrapper", { "card-type": "card-video", class: "is-col-4", "card-link": "https://www.ptc.com", "link-title": "ptc", "is-loading": this.isLoading }, h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), h("ptc-card-bottom", { "card-type": "card-video" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-19", "para-color": "white", "para-margin": "margin-top-3" }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), h("div", { class: "is-col-1" }, h("ptc-card-wrapper", { "card-type": "card-video", class: "is-col-4", "card-link": "https://www.ptc.com", "link-title": "ptc", "is-loading": this.isLoading }, h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), h("ptc-card-bottom", { "card-type": "card-video" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-19", "para-color": "white", "para-margin": "margin-top-3" }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), h("div", { class: "is-col-1" }, h("ptc-card-wrapper", { "card-type": "card-video", class: "is-col-4", "card-link": "https://www.ptc.com", "link-title": "ptc", "is-loading": this.isLoading }, h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), h("ptc-card-bottom", { "card-type": "card-video" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-19", "para-color": "white", "para-margin": "margin-top-3" }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), h("div", { class: "is-col-1" }, h("ptc-card-wrapper", { "card-type": "card-video", class: "is-col-4", "card-link": "https://www.ptc.com", "link-title": "ptc", "is-loading": this.isLoading }, h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), h("ptc-card-bottom", { "card-type": "card-video" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-19", "para-color": "white", "para-margin": "margin-top-3" }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), h("div", { class: "is-col-1" }, h("ptc-card-wrapper", { "card-type": "card-video", class: "is-col-4", "card-link": "https://www.ptc.com", "link-title": "ptc", "is-loading": this.isLoading }, h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), h("ptc-card-bottom", { "card-type": "card-video" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-19", "para-color": "white", "para-margin": "margin-top-3" }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))))));

package/dist/collection/components/organism-bundles/bundle-featured-list/featured-list.css

@@ -34,7 +34,7 @@ a {
 }
 
 .light-links,.background-grey-10,.background-plm-grey  {
-    a:not(.hero-footer-form-wrapper a,  ptc-modal inline-form a, .vjs-social-share-links a), a.light-link {
+    a:not(.hero-footer-form-wrapper a,  ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), a.light-link {
         color: var(--color-blue-04);
         margin: -2px;
         border: 2px solid transparent;
@@ -61,7 +61,7 @@ a {
         }
 
         &:focus-visible {
-            border-radius: var(--ptc-border-radius-standard); 
+            border-radius: var(--ptc-border-radius-standard);
             border: 2px solid rgb(255, 255, 255);
             outline: 5px solid var(--keyboard-nav-outline);
         }
@@ -71,7 +71,7 @@ a {
         border: 2px solid transparent;
 
         &:focus-visible {
-            border-radius: var(--ptc-border-radius-standard); 
+            border-radius: var(--ptc-border-radius-standard);
             border: 2px solid rgb(255, 255, 255);
             outline: 5px solid var(--keyboard-nav-outline);
         }

package/dist/collection/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.css

@@ -60,14 +60,9 @@ ptc-link, ptc-square-card,
 }
 
 .event-jumbotron {
-  margin-bottom: calc(3rem - 5px);
+  margin-bottom: 3rem;
   width: 100%;
 }
-@media only screen and (min-width: 992px) {
-  .event-jumbotron {
-    margin-bottom: 3rem;
-  }
-}
 
 .white-placeholder {
   position: absolute;
@@ -89,7 +84,7 @@ ptc-link, ptc-square-card,
   display: flex;
   gap: 24px;
   overflow-x: auto;
-  padding: 5px 24px;
+  padding: 0 24px;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   cursor: grab;
@@ -213,7 +208,8 @@ ptc-link, ptc-square-card,
     cursor: auto;
     transition: transform 0.3s ease-in-out;
     width: 100%;
-    padding: 0px;
+    padding-left: 0px;
+    padding-right: 0px;
   }
 
   .card {

package/dist/collection/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.js

@@ -75,7 +75,6 @@ export class EventJumbotronExample {
             },
           });
           this.trap.activate();
-          this.setupTabNavigation(panel); //set up special navigation to no-content panel, skip tabindex=-1 container and focus on the A inside a shdow dom.
         }, 500);
       }
       else {
@@ -87,41 +86,11 @@ export class EventJumbotronExample {
     else if (!this.isDesktop) {
       if (!this.isDragging) {
         const modal = document.getElementById(`modal-${cardIndex}`);
+        console.log('open: ' + modal.id);
         modal.show = true;
       }
     }
   }
-  //Focus the ptc-button directly in the no content panel (tab navigation).
-  setupTabNavigation(panel) {
-    var _a;
-    if (panel.querySelector('.no-content-card')) {
-      const shadowButton = panel.querySelector('ptc-close-icon');
-      const closeButton = (_a = shadowButton.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.close-icon');
-      if (closeButton) {
-        closeButton.addEventListener('keydown', (event) => {
-          if (event.key === 'Tab' && !event.shiftKey) {
-            event.preventDefault();
-            this.focusShadowDomElement(panel);
-          }
-        });
-      }
-    }
-    else {
-      return;
-    }
-  }
-  focusShadowDomElement(panel) {
-    const card = panel.querySelector('.no-content-card');
-    if (card) {
-      const button = card.querySelector('ptc-button');
-      if (button) {
-        const link = button.shadowRoot.querySelector('a');
-        if (link) {
-          link.focus();
-        }
-      }
-    }
-  }
   showPanel(card, panel) {
     if (this.activePanel)
       return;
@@ -190,6 +159,7 @@ export class EventJumbotronExample {
     document.addEventListener('keydown', event => {
       if (event.key === 'Tab' || event.key === 'Enter' || event.key === ' ') {
         this.openedWithKeyboard = true;
+        console.log('keyboard status: ' + this.openedWithKeyboard);
       }
     });
     document.addEventListener('mousedown', () => {

package/dist/collection/components/organism-bundles/form/academic-form/academic-form-test.js

@@ -39,20 +39,27 @@ export class AcademicForm {
     this.formData.lastName = this.lastNameEle.inputValue;
     this.formData.company = this.companyEle.inputValue;
     this.formData.phone = this.phoneEle.inputValue;
+    // this.formData.country = this.countryEle.inputValue;
+    // this.formData.inquiryReason= this.inquiryreasonEle.inputValue;
+    // this.formData.howhearselfreport = this.howhearselfreport.inputValue;
+    // console.log("get form Data: " + this.formData.email)
     if (this.isValid()) {
       const formSubmitEvent = new CustomEvent('formSubmit', {
         detail: this.formData,
         bubbles: true,
       });
       this.el.dispatchEvent(formSubmitEvent);
+      console.log('Form Submitted: ' + this.formData);
     }
     else {
       console.log('Form validation failed');
+      console.log('Form Submitted: ' + this.formData.email, this.formData.firstName, this.formData.lastName, this.formData.company, this.formData.phone);
     }
   }
   isValid() {
     const { email, firstName, lastName, company, country, phone, inquiryReason, howhearselfreport, policyChecked } = this.formData;
     const invalidLength = document.querySelectorAll('.invalid-field').length;
+    // console.log('invalid fields length: ' + invalidLength), check the select field
     return (email !== '' &&
       phone !== '' &&
       firstName !== '' &&

package/dist/collection/components/organism-bundles/form/embedded-form/embedded-form.js

@@ -33,13 +33,20 @@ export class EmbeddedForm {
   onDataLookup() {
     const dataLookupElement = this.el.closest('ptc-data-lookup');
     if (dataLookupElement) {
-      // console.log('Perform Data Lookup...');
+      console.log('Perform Data Lookup...');
       dataLookupElement.performDataLookup();
     }
     else {
       console.log('No Data Lookup...');
     }
   }
+  // private init_notme(): void{
+  //   const topAdditional = document.getElementById('not-me-additional-top');
+  //   const bottomAdditional = document.getElementById('not-me-additional-bottom');
+  //   console.log("top: " + topAdditional)
+  //   if(topAdditional) topAdditional.style.display = 'none';
+  //   if(bottomAdditional) bottomAdditional.style.display = 'none';
+  // }
   handleInputChange(field, value) {
     this.formData = Object.assign(Object.assign({}, this.formData), { [field]: value });
   }
@@ -62,6 +69,7 @@ export class EmbeddedForm {
         });
         this.el.dispatchEvent(formSubmitEvent);
         this.isSubmitted = true;
+        console.log('Form Submitted: ' + this.formData.email, this.formData.firstName, this.formData.lastName, this.formData.company, this.formData.phone, this.formData.country, this.formData.inquiryReason, this.formData.howhearselfreport, this.formData.policyChecked);
       }
       else {
         console.log('Form validation failed');
@@ -75,6 +83,7 @@ export class EmbeddedForm {
   isValid() {
     const { email, firstName, lastName, company, country, phone, inquiryReason, howhearselfreport, policyChecked } = this.formData;
     const invalidLength = document.querySelectorAll('.invalid-field').length;
+    // console.log('invalid fields length: ' + invalidLength), check the select field
     return (email !== '' &&
       phone !== '' &&
       firstName !== '' &&

package/dist/collection/components/organism-bundles/form/footer-form/footer-form.js

@@ -36,9 +36,11 @@ export class FooterForm {
         bubbles: true,
       });
       this.el.dispatchEvent(formSubmitEvent);
+      console.log('Form Submitted: ' + this.formData);
     }
     else {
       console.log('Form validation failed');
+      console.log('Form Submitted: ' + this.formData.email);
     }
   }
   isValid() {

package/dist/collection/components/organism-bundles/form/modal-from-example/modal-form-example.css

@@ -0,0 +1,26 @@
+:host {
+  display: block;
+}
+
+.form-wrapper {
+  width: 371px;
+  display: flex;
+  border-radius: 3px;
+  background: #FFF;
+  flex-direction: column;
+  align-items: center;
+  padding: 0px 32px;
+
+  @media only screen and (min-width: 360px) and (max-width: 479.55px) {
+    max-width: 360px;
+    width: 360px;
+  }
+
+  .button-wrapper {
+    display: flex;
+    justify-content: flex-end;
+    gap: 20px;
+    margin-top: 48px;
+    flex-wrap: wrap;
+  }
+}

package/dist/collection/components/organism-bundles/form/modal-from-example/modal-form-example.js

@@ -0,0 +1,99 @@
+import { Host, h } from '@stencil/core';
+export class PtcForm {
+  constructor() {
+    this.formData = {
+      email: '',
+      firstName: '',
+      lastName: '',
+      company: '',
+      country: '',
+      phone: '',
+      inquiryReason: '',
+      howhearselfreport: '',
+      policyChecked: false,
+    };
+  }
+  // private countryEle: HTMLPtcSelectElement;
+  // private inquiryreasonEle: HTMLPtcTextfieldElement;
+  // private howhearselfreport: HTMLPtcTextfieldElement;
+  componentDidLoad() {
+    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"]');
+    this.lastNameEle = this.el.querySelector('ptc-textfield[field-id="contact-lastname"]');
+    this.companyEle = this.el.querySelector('ptc-textfield[field-id="company"]');
+    this.phoneEle = this.el.querySelector('ptc-textfield[field-id="contact-phone"]');
+    // this.countryEle = this.el.querySelector('ptc-select[field-id="contact-country"]')
+    // this.inquiryreasonEle = this.el.querySelector('ptc-textfield[field-id="contact-inquiry"]')
+    // this.howhearselfreport = this.el.querySelector('ptc-textfield[field-id="self-reporting"]')
+  }
+  handleInputChange(field, value) {
+    this.formData = Object.assign(Object.assign({}, this.formData), { [field]: value });
+  }
+  handleSubmit(event) {
+    event.preventDefault();
+    this.formData.email = this.emailEle.inputValue;
+    this.formData.firstName = this.firstNameEle.inputValue;
+    this.formData.lastName = this.lastNameEle.inputValue;
+    this.formData.company = this.companyEle.inputValue;
+    this.formData.phone = this.phoneEle.inputValue;
+    // this.formData.country = this.countryEle.inputValue;
+    // this.formData.inquiryReason= this.inquiryreasonEle.inputValue;
+    // this.formData.howhearselfreport = this.howhearselfreport.inputValue;
+    // console.log("get form Data: " + this.formData.email)
+    if (this.isValid()) {
+      const formSubmitEvent = new CustomEvent('formSubmit', {
+        detail: this.formData,
+        bubbles: true,
+      });
+      this.el.dispatchEvent(formSubmitEvent);
+      console.log('Form Submitted: ' + this.formData);
+    }
+    else {
+      console.log('Form validation failed');
+      console.log('Form Submitted: ' + this.formData.email, this.formData.firstName, this.formData.lastName, this.formData.company, this.formData.phone);
+    }
+  }
+  isValid() {
+    const { email, firstName, lastName, company, country, phone, inquiryReason, howhearselfreport, policyChecked } = this.formData;
+    const invalidLength = document.querySelectorAll('.invalid-field').length;
+    // console.log('invalid fields length: ' + invalidLength), check the select field
+    return (email !== '' &&
+      phone !== '' &&
+      firstName !== '' &&
+      lastName !== '' &&
+      company !== '' &&
+      country !== '' &&
+      inquiryReason !== '' &&
+      howhearselfreport != '' &&
+      policyChecked &&
+      invalidLength === 0);
+  }
+  render() {
+    const multiSelectItems = [
+      { text: 'Item 1', selected: false, ptcDataEloquaName: 'item_1', ptcDataTargetEloquaName: 'item_target-1' },
+      { text: 'Item 2', selected: false, ptcDataEloquaName: 'item_2', ptcDataTargetEloquaName: 'item_target-2' },
+      { text: 'Item 3', selected: false, ptcDataEloquaName: 'item_3', ptcDataTargetEloquaName: 'item_target-3' }
+    ];
+    return (h(Host, null, h("div", { class: "ptc-container u-flex u-flex-justify-center" }, h("div", { class: "form-wrapper" }, h("ptc-title", { "seo-compatibility-mode": true, "text-align": "left", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", "is-plm-hub": "false", "title-size": "medium" }, h("h2", null, "PTC\u2019s PLM application suite combines the power of Windchill, the industry\u2019s #1 PLM software with Thingworx")), h("ptc-spacer", { size: "x-small", breakpoint: "small" }), h("ptc-spacer", { size: "small", breakpoint: "x-small" }), h("ptc-para", { "seo-compatibility-mode": true, "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-style": "main", "para-line-h": "line-height-densest" }, "PTC\u2019s market-leading, purpose-built IIoT platform. The suite offers a mix of Packages, Add-Ons, and Apps to best suit your business needs:"), h("ptc-spacer", { size: "x-small", breakpoint: "small" }), h("ptc-spacer", { size: "small", breakpoint: "x-small" }), h("max-width-container", { "max-width": "277", breakpoint: 480 }, h("ptc-title", { type: "h2", "text-align": "", "title-size": "x-small", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-6", "is-plm-hub": "false" }, "Please fill out the form and a PTC sales representative will be in touch."), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "small" })), h("form", { onSubmit: event => this.handleSubmit(event) }, h("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", "field-name": "firstname" }), h("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", "field-name": "lastname" }), h("ptc-textfield", { "field-id": "company", "label-text": "Company*", type: "text", "ptc-data-eloqua-name": "C_Company", "field-name": "company" }), h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), h("ptc-textfield", { "field-id": "company-email", "label-text": "Company Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "companyemail" }), h("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", "field-name": "country" }, h("ul", { class: "mdc-list" }, h("li", { class: "mdc-list-item placehoder-li", "data-value": "" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Select a country")), h("li", { class: "mdc-list-item", "data-value": "USA" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "USA")), h("li", { class: "mdc-list-item", "data-value": "Canada" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Canada")), h("li", { class: "mdc-list-item", "data-value": "China" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "China")))), h("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", "field-name": "phone" }), h("ptc-select", { label: "What information are you interested in?*", "ptc-data-eloqua-name": "Inquiry_Reason", "field-name": "inquiryreason", "field-id": "contact-inquiry" }, h("ul", { class: "mdc-list" }, h("li", { class: "mdc-list-item", "data-value": "Please select a value" }, h("span", { class: "mdc-list-item__ripple" })), h("li", { class: "mdc-list-item", "data-value": "Augmented Reality (AR)" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Augmented Reality (AR)")), h("li", { class: "mdc-list-item", "data-value": "CAD" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Computer Aided Design")), h("li", { class: "mdc-list-item", "data-value": "Retail(FlexPLM)" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Fashion and Retail Product Lifecycle Management")))), h("ptc-multi-select", { items: multiSelectItems, "is-required": 'true' }), h("ptc-textfield", { "field-id": "Self-Reporting", "label-text": "How can we help you?*", type: "text", "ptc-data-eloqua-name": "HowHearSelfReport", "ptc-max-length": "100", "field-name": "howhearselfreport" }), h("ptc-form-checkbox", { label: "I agree to the policy", "checkbox-id": "test" }), h("div", { class: "button-wrapper" }, h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; display:block; float: left; width: fit-content;}" }, "Submit"), h("ptc-button", { class: "form-close", color: "ptc-tertiary", type: "button", styles: ":host{align-self:flex-end; display:block; float: left; width: fit-content;}" }, "Cancel")))))));
+  }
+  static get is() { return "modal-form-example"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["modal-form-example.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["modal-form-example.css"]
+    };
+  }
+  static get states() {
+    return {
+      "formData": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/organism-bundles/form/ptc-form/ptc-form.js

@@ -39,20 +39,27 @@ export class PtcForm {
     this.formData.lastName = this.lastNameEle.inputValue;
     this.formData.company = this.companyEle.inputValue;
     this.formData.phone = this.phoneEle.inputValue;
+    // this.formData.country = this.countryEle.inputValue;
+    // this.formData.inquiryReason= this.inquiryreasonEle.inputValue;
+    // this.formData.howhearselfreport = this.howhearselfreport.inputValue;
+    // console.log("get form Data: " + this.formData.email)
     if (this.isValid()) {
       const formSubmitEvent = new CustomEvent('formSubmit', {
         detail: this.formData,
         bubbles: true,
       });
       this.el.dispatchEvent(formSubmitEvent);
+      console.log('Form Submitted: ' + this.formData);
     }
     else {
       console.log('Form validation failed');
+      console.log('Form Submitted: ' + this.formData.email, this.formData.firstName, this.formData.lastName, this.formData.company, this.formData.phone);
     }
   }
   isValid() {
     const { email, firstName, lastName, company, country, phone, inquiryReason, howhearselfreport, policyChecked } = this.formData;
     const invalidLength = document.querySelectorAll('.invalid-field').length;
+    // console.log('invalid fields length: ' + invalidLength), check the select field
     return (email !== '' &&
       phone !== '' &&
       firstName !== '' &&

package/dist/collection/components/organism-bundles/homepage-jumbotron/homepage-jumbotron.js

@@ -57,6 +57,7 @@ export class HomepageJumbotron {
           },
         },
       });
+      console.log('running swiper');
     }
   }
   destroySlider() {
@@ -90,6 +91,7 @@ export class HomepageJumbotron {
   updateTileElements() {
     const tiles = Array.from(this.el.querySelectorAll(`[slot^="jumbotron-tile-${this.activeTab}"]`));
     this.tileElements = tiles;
+    //console.log('tile check: ' + tiles[0].outerHTML);
   }
   onItemSelected(event) {
     this.isTransitioning = true;

package/dist/collection/components/organism-bundles/sequential-bundle/sequential-bundle.js

@@ -83,6 +83,7 @@ export class SequentialBundle {
           loop: true,
           slidesPerView: 1,
         });
+        console.log("running swiper");
       }
     }
   }

package/dist/collection/components/organism-bundles/sequential-bundle-example/sequential-bundle-example.js

@@ -11,12 +11,17 @@ export class SequentialBundleExample {
   }
   handleResize() {
     this.updateIsMobile();
+    // console.log('handleResize: isMobile: ' + this.isMobile);
   }
   watchStateHandler() {
+    console.log('Runing Watch/ismobilechange: isMobile updated and Start handleIsMobileChange');
+    console.log('Start Watch: isMobile: ' + this.isMobile);
     if (this.isMobile && !this.mySwiper && this.isConnected) {
+      console.log('watch/ismobileChange condition1: Run swiper');
       let that = this;
       const createSwiper = () => {
         let tempSwiperContainer = that.el.shadowRoot.querySelector('.swiper-container');
+        console.log("find container: " + tempSwiperContainer);
         if (tempSwiperContainer) {
           that.mySwiper = new Swiper(tempSwiperContainer, {
             slidesPerView: "auto",
@@ -42,19 +47,25 @@ export class SequentialBundleExample {
       createSwiper();
     }
     else if (!this.isMobile && this.mySwiper) {
+      console.log("watch/ismobileChange condition2: it's not swiper and remove it");
       this.mySwiper.destroy(true, true);
       this.mySwiper = null;
     }
   }
   connectedCallback() {
+    console.log('START! isMobile: ' + this.isMobile);
     //if screen is mobile when first load
     this.updateIsMobile();
+    console.log("ConnectedCallback: isMobile: " + this.isMobile);
     this.isConnected = true;
   }
   componentDidLoad() {
+    console.log('Component Did Load');
     this.watchStateHandler();
   }
   disconnectedCallback() {
+    console.log("Running disconnectedCb");
+    //window.removeEventListener('resize', this.handleResize);
     if (this.mySwiper) {
       this.mySwiper.destroy(true, true);
       this.mySwiper = null;
@@ -95,6 +106,7 @@ export class SequentialBundleExample {
     ])));
   }
   updateIsMobile() {
+    // console.log("Checking isMobile...")
     this.isMobile = window.innerWidth < 1200;
   }
   static get is() { return "sequential-bundle-example"; }