@ptcwebops/ptcw-design 3.2.2 → 3.2.3

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

@@ -1,94 +1,94 @@
-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() {
-    return (h(Host, null, h("div", { class: "ptc-container ptc-section-standard u-flex u-flex-justify-center" }, h("div", { class: "form-wrapper" }, h("max-width-container", { "max-width": "277", breakpoint: 480 }, h("ptc-title", { type: "h2", "text-align": "center", "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-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", "data-value": "" }, h("span", { class: "mdc-list-item__ripple" })), 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": "" }, 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-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("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block;}" }, "Submit"))))));
-  }
-  static get is() { return "ptc-form"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-form.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-form.css"]
-    };
-  }
-  static get states() {
-    return {
-      "formData": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-}
+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() {
+    return (h(Host, null, h("div", { class: "ptc-container ptc-section-standard u-flex u-flex-justify-center" }, h("div", { class: "form-wrapper" }, h("max-width-container", { "max-width": "277", breakpoint: 480 }, h("ptc-title", { type: "h2", "text-align": "center", "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-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", "data-value": "" }, h("span", { class: "mdc-list-item__ripple" })), 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": "" }, 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-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("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block;}" }, "Submit"))))));
+  }
+  static get is() { return "ptc-form"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-form.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-form.css"]
+    };
+  }
+  static get states() {
+    return {
+      "formData": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}

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

@@ -1,116 +1,116 @@
-import { h, Host } from '@stencil/core';
-import Swiper from 'swiper';
-import 'swiper/swiper-bundle.css';
-export class SequentialBundle {
-  constructor() {
-    this.isMobile = undefined;
-  }
-  handleResize() {
-    this.isMobile = window.innerWidth < 1200;
-  }
-  componentWillLoad() {
-    this.isMobile = window.innerWidth < 1200;
-  }
-  componentDidLoad() {
-    this.initSlider();
-  }
-  render() {
-    return (h(Host, null, this.isMobile ? (h("div", { class: "swiper-container", ref: el => this.swiperContainerRef = el }, h("div", { class: "swiper-wrapper" }, h("div", { class: "swiper-slide" }, h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "mobile", "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p" }, "The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!"), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Learn More"))), h("div", { class: "swiper-slide" }, h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "mobile", "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p" }, "The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!"), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Learn More"))), h("div", { class: "swiper-slide" }, h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "mobile", "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p" }, "The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!"), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Learn More")))), h("div", { class: "swiper-pagination" }))) : (h("div", null, "test")
-    // <div class="accordion-container desktop-container">
-    //   <div class="accordion">
-    //     <div class="accordion-item">
-    //       <ptc-dynamic-card
-    //         card-type="sequential"
-    //         card-screen="desktop"
-    //         is-expanded="true"
-    //         card-title="iWarranty Business Update Webinar"
-    //         card-img-src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data"
-    //         card-img-alt="image-test"
-    //       >
-    //         <ptc-para font-size="x-small" font-weight="w-4" para-margin="margin-flush" para-color="white" para-line-h="line-height-p">
-    //           The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!
-    //         </ptc-para>
-    //         <ptc-spacer breakpoint="x-small" size="xx-large"></ptc-spacer>
-    //         <ptc-spacer breakpoint="small" size="x-large"></ptc-spacer>
-    //         <ptc-button type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank">
-    //           Learn More
-    //         </ptc-button>
-    //       </ptc-dynamic-card>
-    //       <ptc-dynamic-card
-    //         card-type="sequential"
-    //         card-screen="desktop"
-    //         is-expanded="false"
-    //         card-title="iWarranty Business Update Webinar"
-    //         card-img-src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data"
-    //         card-img-alt="image-test"
-    //       >
-    //         <ptc-para font-size="x-small" font-weight="w-4" para-margin="margin-flush" para-color="white" para-line-h="line-height-p">
-    //           The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!
-    //         </ptc-para>
-    //         <ptc-spacer breakpoint="x-small" size="xx-large"></ptc-spacer>
-    //         <ptc-spacer breakpoint="small" size="x-large"></ptc-spacer>
-    //         <ptc-button type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank">
-    //           Learn More
-    //         </ptc-button>
-    //       </ptc-dynamic-card>
-    //       <ptc-dynamic-card
-    //         card-type="sequential"
-    //         card-screen="desktop"
-    //         is-expanded="false"
-    //         card-title="iWarranty Business Update Webinar"
-    //         card-img-src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data"
-    //         card-img-alt="image-test"
-    //       >
-    //         <ptc-para font-size="x-small" font-weight="w-4" para-margin="margin-flush" para-color="white" para-line-h="line-height-p">
-    //           The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!
-    //         </ptc-para>
-    //         <ptc-spacer breakpoint="x-small" size="xx-large"></ptc-spacer>
-    //         <ptc-spacer breakpoint="small" size="x-large"></ptc-spacer>
-    //         <ptc-button type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank">
-    //           Learn More
-    //         </ptc-button>
-    //       </ptc-dynamic-card>
-    //     </div>
-    //   </div>
-    // </div>
-    )));
-  }
-  initSlider() {
-    if (this.isMobile) {
-      if (this.swiperContainerRef) {
-        this.mySwiper = new Swiper(this.swiperContainerRef, {
-          // Customize options here
-          loop: true,
-          slidesPerView: 1,
-        });
-        console.log("running swiper");
-      }
-    }
-  }
-  static get is() { return "sequential-bundle"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["sequential-bundle.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["sequential-bundle.css"]
-    };
-  }
-  static get states() {
-    return {
-      "isMobile": {}
-    };
-  }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
-}
+import { h, Host } from '@stencil/core';
+import Swiper from 'swiper';
+import 'swiper/swiper-bundle.css';
+export class SequentialBundle {
+  constructor() {
+    this.isMobile = undefined;
+  }
+  handleResize() {
+    this.isMobile = window.innerWidth < 1200;
+  }
+  componentWillLoad() {
+    this.isMobile = window.innerWidth < 1200;
+  }
+  componentDidLoad() {
+    this.initSlider();
+  }
+  render() {
+    return (h(Host, null, this.isMobile ? (h("div", { class: "swiper-container", ref: el => this.swiperContainerRef = el }, h("div", { class: "swiper-wrapper" }, h("div", { class: "swiper-slide" }, h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "mobile", "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p" }, "The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!"), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Learn More"))), h("div", { class: "swiper-slide" }, h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "mobile", "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p" }, "The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!"), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Learn More"))), h("div", { class: "swiper-slide" }, h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "mobile", "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p" }, "The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!"), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Learn More")))), h("div", { class: "swiper-pagination" }))) : (h("div", null, "test")
+    // <div class="accordion-container desktop-container">
+    //   <div class="accordion">
+    //     <div class="accordion-item">
+    //       <ptc-dynamic-card
+    //         card-type="sequential"
+    //         card-screen="desktop"
+    //         is-expanded="true"
+    //         card-title="iWarranty Business Update Webinar"
+    //         card-img-src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data"
+    //         card-img-alt="image-test"
+    //       >
+    //         <ptc-para font-size="x-small" font-weight="w-4" para-margin="margin-flush" para-color="white" para-line-h="line-height-p">
+    //           The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!
+    //         </ptc-para>
+    //         <ptc-spacer breakpoint="x-small" size="xx-large"></ptc-spacer>
+    //         <ptc-spacer breakpoint="small" size="x-large"></ptc-spacer>
+    //         <ptc-button type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank">
+    //           Learn More
+    //         </ptc-button>
+    //       </ptc-dynamic-card>
+    //       <ptc-dynamic-card
+    //         card-type="sequential"
+    //         card-screen="desktop"
+    //         is-expanded="false"
+    //         card-title="iWarranty Business Update Webinar"
+    //         card-img-src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data"
+    //         card-img-alt="image-test"
+    //       >
+    //         <ptc-para font-size="x-small" font-weight="w-4" para-margin="margin-flush" para-color="white" para-line-h="line-height-p">
+    //           The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!
+    //         </ptc-para>
+    //         <ptc-spacer breakpoint="x-small" size="xx-large"></ptc-spacer>
+    //         <ptc-spacer breakpoint="small" size="x-large"></ptc-spacer>
+    //         <ptc-button type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank">
+    //           Learn More
+    //         </ptc-button>
+    //       </ptc-dynamic-card>
+    //       <ptc-dynamic-card
+    //         card-type="sequential"
+    //         card-screen="desktop"
+    //         is-expanded="false"
+    //         card-title="iWarranty Business Update Webinar"
+    //         card-img-src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data"
+    //         card-img-alt="image-test"
+    //       >
+    //         <ptc-para font-size="x-small" font-weight="w-4" para-margin="margin-flush" para-color="white" para-line-h="line-height-p">
+    //           The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!
+    //         </ptc-para>
+    //         <ptc-spacer breakpoint="x-small" size="xx-large"></ptc-spacer>
+    //         <ptc-spacer breakpoint="small" size="x-large"></ptc-spacer>
+    //         <ptc-button type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank">
+    //           Learn More
+    //         </ptc-button>
+    //       </ptc-dynamic-card>
+    //     </div>
+    //   </div>
+    // </div>
+    )));
+  }
+  initSlider() {
+    if (this.isMobile) {
+      if (this.swiperContainerRef) {
+        this.mySwiper = new Swiper(this.swiperContainerRef, {
+          // Customize options here
+          loop: true,
+          slidesPerView: 1,
+        });
+        console.log("running swiper");
+      }
+    }
+  }
+  static get is() { return "sequential-bundle"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sequential-bundle.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sequential-bundle.css"]
+    };
+  }
+  static get states() {
+    return {
+      "isMobile": {}
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

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

@@ -690,93 +690,93 @@ swiper-container .swiper-notification {
           backface-visibility: hidden;
   overflow: hidden;
 }
-
-
-:host {
-  display: block;
-}
-
-.swiper-container {
-  width: 100%;
-  height: 100%;
-}
-
-.swiper-slide {
-  /* text-align: center;
-  font-size: 18px; */
-  background: #fff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.mobile-container{
-  display: block;
-}
-.desktop-container{
-  display:none;
-}
-
-@media screen and (min-width: 1200px){
-  .mobile-container{
-    display: none;
-  }
-  .desktop-container{
-    display:flex;
-    align-items: center;
-  }
-}
-
-@media screen and (max-width: 1199.9px) {
-  .swiper-slide {
-    width: calc(100% - 40px);
-    margin-right: 20px;
-    width: 350px !important;
-  }
-  .swiper-slide:last-child {
-    margin-right: 0;
-  }
-}
-
-/* desktop pagination dots */
-.pagination {
-  display: flex;
-  justify-content: center;
-  margin-top: 20px;
-}
-
-.pagination-dot {
-  height: 20px;
-  width: 20px;
-  border-radius: 50%;
-  margin: 0 14px;
-  cursor: pointer;
-  cursor: pointer;
-  border: 2px solid #c3cbcd;
-  background-color: #f3f3f3;
-  position:relative;
-}
-
-.pagination-dot::after {
-  content: "";
-  display: block;
-  position: absolute;
-  width: 38px;
-  height: 1px;
-  border-top: 2px solid #c3cbcd;
-  margin-top: -1px;
-  z-index: -1;
-  top:50%;
-  left: 10px;
-}
-
-.pagination-dot:last-of-type::after {
-  visibility: hidden;
-}
-
-.pagination-dot.active {
-  background-image: url(/build/media/nav-active-dotslick.svg);
-  background-position: 50%;
-  background-repeat: no-repeat;
-  border: 2px solid transparent;
-}
+
+
+:host {
+  display: block;
+}
+
+.swiper-container {
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-slide {
+  /* text-align: center;
+  font-size: 18px; */
+  background: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.mobile-container{
+  display: block;
+}
+.desktop-container{
+  display:none;
+}
+
+@media screen and (min-width: 1200px){
+  .mobile-container{
+    display: none;
+  }
+  .desktop-container{
+    display:flex;
+    align-items: center;
+  }
+}
+
+@media screen and (max-width: 1199.9px) {
+  .swiper-slide {
+    width: calc(100% - 40px);
+    margin-right: 20px;
+    width: 350px !important;
+  }
+  .swiper-slide:last-child {
+    margin-right: 0;
+  }
+}
+
+/* desktop pagination dots */
+.pagination {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.pagination-dot {
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  margin: 0 14px;
+  cursor: pointer;
+  cursor: pointer;
+  border: 2px solid #c3cbcd;
+  background-color: #f3f3f3;
+  position:relative;
+}
+
+.pagination-dot::after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 38px;
+  height: 1px;
+  border-top: 2px solid #c3cbcd;
+  margin-top: -1px;
+  z-index: -1;
+  top:50%;
+  left: 10px;
+}
+
+.pagination-dot:last-of-type::after {
+  visibility: hidden;
+}
+
+.pagination-dot.active {
+  background-image: url(/build/media/nav-active-dotslick.svg);
+  background-position: 50%;
+  background-repeat: no-repeat;
+  border: 2px solid transparent;
+}