@ptcwebops/ptcw-design 6.3.13 → 6.3.14-beta

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"; }

package/dist/collection/components/organism-bundles/storefront-enhanced-product-list-example/storefront-enhanced-product-list-example.css

@@ -995,30 +995,30 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
     transform: rotate(360deg);
   }
 }
-storefront-enhanced-product-list-example .swiper, storefront-enhanced-product-list-alt-example .swiper {
+storefront-enhanced-product-list-example .swiper {
   width: 100%;
   height: 100%;
 }
-storefront-enhanced-product-list-example .swiper-container, storefront-enhanced-product-list-alt-example .swiper-container {
+storefront-enhanced-product-list-example .swiper-container {
   padding-left: 24px;
   padding-right: 24px;
   margin-left: -24px;
   margin-right: -24px;
   overflow-x: clip;
 }
-storefront-enhanced-product-list-example .swiper-wrapper, storefront-enhanced-product-list-alt-example .swiper-wrapper {
+storefront-enhanced-product-list-example .swiper-wrapper {
   max-width: 1200px;
 }
-storefront-enhanced-product-list-example .swiper-slide, storefront-enhanced-product-list-alt-example .swiper-slide {
+storefront-enhanced-product-list-example .swiper-slide {
   width: max-content;
   height: auto;
 }
-storefront-enhanced-product-list-example .swiper-horizontal, storefront-enhanced-product-list-alt-example .swiper-horizontal {
+storefront-enhanced-product-list-example .swiper-horizontal {
   position: relative;
   display: block;
   padding-bottom: 4.104rem;
 }
-storefront-enhanced-product-list-example .swiper-horizontal .swiper-scrollbar, storefront-enhanced-product-list-alt-example .swiper-horizontal .swiper-scrollbar {
+storefront-enhanced-product-list-example .swiper-horizontal .swiper-scrollbar {
   position: absolute;
   left: 50%;
   transform: translate(-50%, -13px);
@@ -1028,28 +1028,25 @@ storefront-enhanced-product-list-example .swiper-horizontal .swiper-scrollbar, s
   border-radius: 999px;
   background: #E4E7E9;
 }
-storefront-enhanced-product-list-example .swiper-horizontal .swiper-scrollbar .swiper-scrollbar-drag, storefront-enhanced-product-list-alt-example .swiper-horizontal .swiper-scrollbar .swiper-scrollbar-drag {
+storefront-enhanced-product-list-example .swiper-horizontal .swiper-scrollbar .swiper-scrollbar-drag {
   height: 8px;
   border-radius: 999px;
   background: #323B42;
   transform: translateX(-16px);
 }
-storefront-enhanced-product-list-example .swiper-horizontal:has(.swiper-scrollbar[style*="display: none"]), storefront-enhanced-product-list-alt-example .swiper-horizontal:has(.swiper-scrollbar[style*="display: none"]) {
+storefront-enhanced-product-list-example .swiper-horizontal:has(.swiper-scrollbar[style*="display: none"]) {
   padding-bottom: 0;
 }
 storefront-enhanced-product-list-example .swiper-button-prev:after,
-storefront-enhanced-product-list-example .swiper-button-next:after, storefront-enhanced-product-list-alt-example .swiper-button-prev:after,
-storefront-enhanced-product-list-alt-example .swiper-button-next:after {
+storefront-enhanced-product-list-example .swiper-button-next:after {
   content: none;
 }
 storefront-enhanced-product-list-example .swiper-button-prev img,
-storefront-enhanced-product-list-example .swiper-button-next img, storefront-enhanced-product-list-alt-example .swiper-button-prev img,
-storefront-enhanced-product-list-alt-example .swiper-button-next img {
+storefront-enhanced-product-list-example .swiper-button-next img {
   background-color: #ffffff;
 }
 storefront-enhanced-product-list-example .swiper-button-prev,
-storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next, storefront-enhanced-product-list-alt-example .swiper-button-prev,
-storefront-enhanced-product-list-alt-example .swiper-rtl .swiper-button-next {
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next {
   top: auto;
   bottom: 0px;
   left: auto;
@@ -1059,8 +1056,7 @@ storefront-enhanced-product-list-alt-example .swiper-rtl .swiper-button-next {
   border-radius: 4px;
 }
 storefront-enhanced-product-list-example .swiper-button-prev:hover,
-storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next:hover, storefront-enhanced-product-list-alt-example .swiper-button-prev:hover,
-storefront-enhanced-product-list-alt-example .swiper-rtl .swiper-button-next:hover {
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next:hover {
   outline: none;
   outline-offset: 0;
   text-decoration: none;
@@ -1069,23 +1065,19 @@ storefront-enhanced-product-list-alt-example .swiper-rtl .swiper-button-next:hov
 }
 storefront-enhanced-product-list-example .swiper-button-prev:focus, storefront-enhanced-product-list-example .swiper-button-prev:active,
 storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next:focus,
-storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next:active, storefront-enhanced-product-list-alt-example .swiper-button-prev:focus, storefront-enhanced-product-list-alt-example .swiper-button-prev:active,
-storefront-enhanced-product-list-alt-example .swiper-rtl .swiper-button-next:focus,
-storefront-enhanced-product-list-alt-example .swiper-rtl .swiper-button-next:active {
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next:active {
   outline: none;
   outline-offset: 0;
   text-decoration: none;
   background-color: #BEC6CA;
 }
 storefront-enhanced-product-list-example .swiper-button-prev svg,
-storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next svg, storefront-enhanced-product-list-alt-example .swiper-button-prev svg,
-storefront-enhanced-product-list-alt-example .swiper-rtl .swiper-button-next svg {
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next svg {
   height: 14px;
   width: 9px;
 }
 storefront-enhanced-product-list-example .swiper-button-next,
-storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev, storefront-enhanced-product-list-alt-example .swiper-button-next,
-storefront-enhanced-product-list-alt-example .swiper-rtl .swiper-button-prev {
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev {
   top: auto;
   bottom: 0px;
   right: auto;
@@ -1095,8 +1087,7 @@ storefront-enhanced-product-list-alt-example .swiper-rtl .swiper-button-prev {
   border-radius: 4px;
 }
 storefront-enhanced-product-list-example .swiper-button-next:hover,
-storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev:hover, storefront-enhanced-product-list-alt-example .swiper-button-next:hover,
-storefront-enhanced-product-list-alt-example .swiper-rtl .swiper-button-prev:hover {
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev:hover {
   outline: none;
   outline-offset: 0;
   text-decoration: none;
@@ -1105,22 +1096,19 @@ storefront-enhanced-product-list-alt-example .swiper-rtl .swiper-button-prev:hov
 }
 storefront-enhanced-product-list-example .swiper-button-next:focus, storefront-enhanced-product-list-example .swiper-button-next:active,
 storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev:focus,
-storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev:active, storefront-enhanced-product-list-alt-example .swiper-button-next:focus, storefront-enhanced-product-list-alt-example .swiper-button-next:active,
-storefront-enhanced-product-list-alt-example .swiper-rtl .swiper-button-prev:focus,
-storefront-enhanced-product-list-alt-example .swiper-rtl .swiper-button-prev:active {
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev:active {
   outline: none;
   outline-offset: 0;
   text-decoration: none;
   background-color: #BEC6CA;
 }
 storefront-enhanced-product-list-example .swiper-button-next svg,
-storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev svg, storefront-enhanced-product-list-alt-example .swiper-button-next svg,
-storefront-enhanced-product-list-alt-example .swiper-rtl .swiper-button-prev svg {
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev svg {
   height: 14px;
   width: 9px;
 }
 @media only screen and (min-width: 768px) {
-  storefront-enhanced-product-list-example .swiper-container, storefront-enhanced-product-list-alt-example .swiper-container {
+  storefront-enhanced-product-list-example .swiper-container {
     padding-left: 4px;
     padding-right: 4px;
     margin-left: -4px;

package/dist/collection/components/ptc-background-video/ptc-background-video.js

@@ -17,6 +17,29 @@ export class PtcBackgroundVideo {
     this.isIframe = false;
     this.loadedTrue = false;
   }
+  // componentDidLoad() {
+  //   if(this.isIframe){
+  //     const iframe:HTMLIFrameElement = this.el.shadowRoot.querySelector('iframe');
+  //     const iframeDoc = iframe.contentDocument
+  //     const iframeVideo = iframeDoc.querySelector('video');
+  //     console.log("iframe ele: " + iframeDoc.querySelectorAll('video'));
+  //     iframeVideo.style.objectFit = 'cover';
+  //   }
+  // }
+  // @Method()
+  // async toggleVideo() {
+  //   // show a prompt
+  //   this.paused = !this.paused;
+  //   let video = this.el.shadowRoot.querySelector('video') as HTMLVideoElement;
+  //   if (video) {
+  //     if (this.paused) {
+  //       video.pause();
+  //     } else {
+  //       video.play().catch(z => console.error(z));
+  //     }
+  //   }
+  //   console.log('Hello, I am a publish method from ptc-background-video!');
+  // }
   componentDidLoad() {
     if (this.defer) {
       nextUserInteractionEvent(this).then(() => {