@ptcwebops/ptcw-design 6.4.28-beta → 6.4.29-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-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,19 @@
+import { html } from "lit-html";
+
+export default {
+	title: "Molecules/Blue Pill Announcement Bar",
+};
+
+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" >