@ptcwebops/ptcw-design 6.4.28-beta → 6.4.30-beta

package/dist/collection/components/ptc-store-card-list/ptc-store-card-list.js

@@ -0,0 +1,108 @@
+import { h } from "@stencil/core";
+import Swiper, { Navigation, Scrollbar, Pagination } from "swiper";
+export class PtcStoreCardList {
+  constructor() {
+    this.breakpoint = 768;
+    this.modalTriggerClickHandler = (event) => {
+      const trigger = event.currentTarget;
+      // Ensure the trigger is a child of this component instance
+      if (!this.el.contains(trigger)) {
+        return;
+      }
+      event.preventDefault();
+      const modalId = trigger.getAttribute("data-modal-target");
+      if (modalId) {
+        const modal = document.getElementById(modalId);
+        if (modal && typeof modal.showModal === "function") {
+          modal.showModal();
+        }
+      }
+    };
+  }
+  componentDidLoad() {
+    window.addEventListener("resize", this.handleResize.bind(this));
+    this.handleResize();
+    this.setupModalTriggers();
+  }
+  disconnectedCallback() {
+    window.removeEventListener("resize", this.handleResize.bind(this));
+    this.destroySwiper();
+    this.removeModalTriggers();
+  }
+  setupModalTriggers() {
+    const modalTriggers = this.el.querySelectorAll("[data-modal-target]");
+    modalTriggers.forEach((trigger) => {
+      trigger.addEventListener("click", this.modalTriggerClickHandler);
+    });
+  }
+  removeModalTriggers() {
+    const modalTriggers = this.el.querySelectorAll("[data-modal-target]");
+    modalTriggers.forEach((trigger) => {
+      trigger.removeEventListener("click", this.modalTriggerClickHandler);
+    });
+  }
+  handleResize() {
+    if (window.innerWidth < this.breakpoint) {
+      this.initSwiper();
+    }
+    else {
+      this.destroySwiper();
+    }
+  }
+  initSwiper() {
+    if (this.swiperInstance) {
+      return;
+    }
+    const swiperContainer = this.el.querySelector(".swiper-container");
+    if (swiperContainer) {
+      this.swiperInstance = new Swiper(swiperContainer, {
+        modules: [Navigation, Scrollbar, Pagination],
+        slidesPerView: 1.1,
+        spaceBetween: 24,
+        scrollbar: {
+          el: this.swiperScrollbarRef,
+          draggable: true,
+        },
+        navigation: {
+          nextEl: this.swiperButtonNextRef,
+          prevEl: this.swiperButtonPrevRef,
+        },
+        breakpoints: {
+          480: {
+            slidesPerView: 1.3,
+          },
+        },
+      });
+    }
+  }
+  destroySwiper() {
+    if (this.swiperInstance) {
+      this.swiperInstance.destroy(true, true);
+      this.swiperInstance = undefined;
+      // Clean up swiper styles
+      const swiperWrapper = this.el.querySelector(".swiper-wrapper");
+      if (swiperWrapper) {
+        swiperWrapper.style.transform = "";
+      }
+      const slides = this.el.querySelectorAll(".swiper-slide");
+      slides.forEach((slide) => {
+        slide.style.marginRight = "";
+      });
+    }
+  }
+  render() {
+    return (h("div", { class: "ptc-store-card-list-container" }, h("div", { class: "swiper-container" }, h("div", { class: "swiper-wrapper" }, h("slot", null))), h("div", { class: "swiper-scrollbar", ref: (el) => (this.swiperScrollbarRef = el) }), h("div", { class: "swiper-button-next", ref: (el) => (this.swiperButtonNextRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { class: "swiper-button-prev", ref: (el) => (this.swiperButtonPrevRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" })))));
+  }
+  static get is() { return "ptc-store-card-list"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-store-card-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-store-card-list.css"]
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/ptc-subnav-v2/ptc-subnav-v2.js

@@ -334,10 +334,6 @@ export class PtcSubnavV2 {
       if (this.manualNavigationTimeout) {
         clearTimeout(this.manualNavigationTimeout);
       }
-      // Reset manual navigation flag after scroll animation completes
-      this.manualNavigationTimeout = window.setTimeout(() => {
-        this.isManualNavigation = false;
-      }, 1500); // Give enough time for smooth scroll to complete
       // Emit custom event for parent components
       const customEvent = new CustomEvent("sectionChange", {
         detail: { section },
@@ -359,6 +355,63 @@ export class PtcSubnavV2 {
           top: targetPosition,
           behavior: "smooth",
         });
+        // Reset manual navigation flag and correct scroll position after animation
+        this.manualNavigationTimeout = window.setTimeout(() => {
+          this.isManualNavigation = false;
+          // Re-check position to account for lazy-loaded images
+          const finalNavHeight = this.el.offsetHeight;
+          const finalTargetPosition = targetElement.getBoundingClientRect().top +
+            window.scrollY -
+            finalNavHeight;
+          // If we're off by more than a small threshold, correct it instantly.
+          if (Math.abs(window.scrollY - finalTargetPosition) > 5) {
+            window.scrollTo({
+              top: finalTargetPosition,
+              behavior: "smooth",
+            });
+          }
+        }, 800); // Give enough time for smooth scroll to complete
+      }
+      else {
+        // Fallback timeout if the element doesn't exist
+        this.manualNavigationTimeout = window.setTimeout(() => {
+          this.isManualNavigation = false;
+        }, 1500);
+      }
+    };
+    this.handleInitialLoadWithHash = () => {
+      if (window.location.hash) {
+        if (document.readyState === "complete") {
+          // If the page is already loaded, scroll immediately
+          this.handleHashChange();
+        }
+        else {
+          // Otherwise, wait for the page to fully load before scrolling
+          window.addEventListener("load", this.boundHandleHashChange, {
+            once: true,
+          });
+        }
+      }
+    };
+    this.handleHashChange = () => {
+      const hash = window.location.hash;
+      if (hash) {
+        const sectionId = hash.substring(1);
+        this.scrollToSection(sectionId);
+      }
+    };
+    this.scrollToSection = (sectionId, smooth = true) => {
+      const targetElement = document.getElementById(sectionId);
+      if (targetElement) {
+        const navHeight = this.el.offsetHeight;
+        const targetPosition = targetElement.getBoundingClientRect().top +
+          window.scrollY -
+          navHeight;
+        window.scrollTo({
+          top: targetPosition,
+          behavior: smooth ? "smooth" : "auto",
+        });
+        this.currentActive = sectionId;
       }
     };
     this.activeSection = "overview";
@@ -381,6 +434,7 @@ export class PtcSubnavV2 {
     this.setupIntersectionObserver();
     this.setupResizeObserver();
     this.initializeStickyPosition();
+    this.handleInitialLoadWithHash();
   }
   bindEventHandlers() {
     this.boundHandleResize = this.handleResize.bind(this);
@@ -388,6 +442,7 @@ export class PtcSubnavV2 {
     this.boundHandleScroll = this.handleScroll.bind(this);
     this.boundHandleKeyDown = this.handleKeyDown.bind(this);
     this.boundHandleStickyScroll = this.handleStickyScroll.bind(this);
+    this.boundHandleHashChange = this.handleHashChange.bind(this);
   }
   addEventListeners() {
     window.addEventListener("resize", this.boundHandleResize);
@@ -399,6 +454,10 @@ export class PtcSubnavV2 {
     window.addEventListener("scroll", this.boundHandleStickyScroll, {
       passive: true,
     });
+    window.addEventListener("hashchange", this.boundHandleHashChange);
+    window.addEventListener("load", this.boundHandleHashChange, {
+      once: true,
+    });
   }
   disconnectedCallback() {
     this.removeEventListeners();
@@ -413,6 +472,8 @@ export class PtcSubnavV2 {
     document.removeEventListener("keydown", this.boundHandleKeyDown);
     window.removeEventListener("scroll", this.boundHandleScroll);
     window.removeEventListener("scroll", this.boundHandleStickyScroll);
+    window.removeEventListener("hashchange", this.boundHandleHashChange);
+    window.removeEventListener("load", this.boundHandleHashChange);
   }
   cleanupTimeouts() {
     if (this.scrollTimeout)

package/dist/collection/components/ptc-tooltip-v2/ptc-tooltip-v2.css

@@ -235,6 +235,10 @@ ptc-modal inline-form a,
   outline: 5px solid var(--keyboard-nav-outline);
 }
 
+.white-links a {
+  color: var(--color-white) !important;
+}
+
 .ptc-link {
   color: var(--color-gray-10);
   text-decoration: underline;

package/dist/collection/components/ptc-value-led-speed-bump/ptc-value-led-speed-bump.css

@@ -235,6 +235,10 @@ ptc-modal inline-form a,
   outline: 5px solid var(--keyboard-nav-outline);
 }
 
+.white-links a {
+  color: var(--color-white) !important;
+}
+
 .ptc-link {
   color: var(--color-gray-10);
   text-decoration: underline;

package/dist/collection/components/ptc-white-paper/ptc-white-paper.css

@@ -5787,6 +5787,10 @@ ptc-modal inline-form a,
   outline: 5px solid var(--keyboard-nav-outline);
 }
 
+.white-links a {
+  color: var(--color-white) !important;
+}
+
 .ptc-link {
   color: var(--color-gray-10);
   text-decoration: underline;

package/dist/collection/stories/BluePillAnnouncementBar.stories.js

@@ -0,0 +1,20 @@
+import { html } from "lit-html";
+
+export default {
+	title: "Molecules/ptc-blue-pill-announcement-bar",
+	tags: ["autodocs"],
+};
+
+const Template = () => html`
+	<div class="ptc-container">
+		<ptc-blue-pill-announcement-bar class="white-links">
+			<p>
+				This extension can only be purchased as an add-on to
+				<a href="#">Creo Design Essentials </a>at checkout.
+			</p>
+		</ptc-blue-pill-announcement-bar>
+	</div>
+`;
+
+export const Default = Template.bind({});
+Default.args = {};

package/dist/collection/stories/organisms/ptc/E Store Build Product/preview.stories.js

@@ -6,7 +6,7 @@ export default {
 
 const AlertsPage = args => {
   return html`
-    
+
 
 <section>
         <ptc-hero hero-type="jumbotron" class="ptc-jumbotron" bg-url="https://www.ptc.com/-/media/Images/new-org/1920x500/Digital-Manufacturing/Header-Increase-OEE-1920x500.jpg?h=500&w=1920&la=en&hash=EBD7026CF9A9186AFD98050BF2055750">
@@ -26,6 +26,17 @@ const AlertsPage = args => {
             </div>
         </ptc-hero>
         <div class="pricing-block">
+            <div class="ptc-container">
+              <ptc-blue-pill-announcement-bar class="white-links">
+                <p>
+                  This extension can only be purchased as an add-on to
+                  <a href="#">Creo Design Essentials </a>at checkout.
+                </p>
+              </ptc-blue-pill-announcement-bar>
+            </div>
+            <ptc-spacer size="medium"></ptc-spacer>
+            <ptc-spacer size="medium"></ptc-spacer>
+            <ptc-spacer size="small" breakpoint="x-small"></ptc-spacer>
             <ptc-container elevation="x-large">
                 <ptc-pricing-tabs id="pricing-tabs" product-tag="Advanced Plug-In"
                                 tab-label="Pricing Options:" filter-tag="subscription"
@@ -52,7 +63,7 @@ const AlertsPage = args => {
                         <ptc-para font-size="xx-small" font-weight="w-6" para-margin="margin-2" para-style="main" para-line-h="line-height-denser">
                             Pay an annual fee to use the software. Support & Maintenance is included.
                         </ptc-para>
-                        
+
                         <ptc-quantity-counter add-to-cart-label="Add to Cart" added-label="Added"></ptc-quantity-counter>
                     </pricing-tab>
                     <pricing-tab header="1-1500 Tags" product-label="$2,968/yr" html="true" tag="subscription" >