@ptcwebops/ptcw-design 6.4.9 → 6.4.10-beta

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

@@ -83,7 +83,8 @@ swiper-slide {
 }
 .swiper-backface-hidden .swiper-slide {
   transform: translateZ(0);
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 /* 3D Effects */
 .swiper-3d.swiper-css-mode .swiper-wrapper {
@@ -390,8 +391,7 @@ button.swiper-pagination-bullet {
   padding: 0;
   box-shadow: none;
   -webkit-appearance: none;
-          -moz-appearance: none;
-       appearance: none;
+          appearance: none;
 }
 .swiper-pagination-clickable .swiper-pagination-bullet {
   cursor: pointer;
@@ -559,8 +559,7 @@ button.swiper-pagination-bullet {
 .swiper-zoom-container > canvas {
   max-width: 100%;
   max-height: 100%;
-  -o-object-fit: contain;
-     object-fit: contain;
+  object-fit: contain;
 }
 .swiper-slide-zoomed {
   cursor: move;
@@ -606,7 +605,8 @@ swiper-container .swiper-notification {
 }
 .swiper-cube .swiper-slide {
   pointer-events: none;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   z-index: 1;
   visibility: hidden;
   transform-origin: 0 0;
@@ -635,7 +635,8 @@ swiper-container .swiper-notification {
 .swiper-cube .swiper-slide-shadow-left,
 .swiper-cube .swiper-slide-shadow-right {
   z-index: 0;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 .swiper-cube .swiper-cube-shadow {
   position: absolute;
@@ -661,7 +662,8 @@ swiper-container .swiper-notification {
 }
 .swiper-flip .swiper-slide {
   pointer-events: none;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   z-index: 1;
 }
 .swiper-flip .swiper-slide .swiper-slide {
@@ -676,10 +678,12 @@ swiper-container .swiper-notification {
 .swiper-flip .swiper-slide-shadow-left,
 .swiper-flip .swiper-slide-shadow-right {
   z-index: 0;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 .swiper-creative .swiper-slide {
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   overflow: hidden;
   transition-property: transform, opacity, height;
 }
@@ -688,7 +692,8 @@ swiper-container .swiper-notification {
 }
 .swiper-cards .swiper-slide {
   transform-origin: center bottom;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   overflow: hidden;
 }
 
@@ -1136,8 +1141,7 @@ homepage-case-study-cards {
   display: block;
   width: 100%;
   height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 
 .event-slider-cards.swiper-horizontal {

package/dist/collection/components/organism-bundles/featured-events-slider-example/featured-events-slider-example.css

@@ -83,7 +83,8 @@ swiper-slide {
 }
 .swiper-backface-hidden .swiper-slide {
   transform: translateZ(0);
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 /* 3D Effects */
 .swiper-3d.swiper-css-mode .swiper-wrapper {
@@ -390,8 +391,7 @@ button.swiper-pagination-bullet {
   padding: 0;
   box-shadow: none;
   -webkit-appearance: none;
-          -moz-appearance: none;
-       appearance: none;
+          appearance: none;
 }
 .swiper-pagination-clickable .swiper-pagination-bullet {
   cursor: pointer;
@@ -559,8 +559,7 @@ button.swiper-pagination-bullet {
 .swiper-zoom-container > canvas {
   max-width: 100%;
   max-height: 100%;
-  -o-object-fit: contain;
-     object-fit: contain;
+  object-fit: contain;
 }
 .swiper-slide-zoomed {
   cursor: move;
@@ -606,7 +605,8 @@ swiper-container .swiper-notification {
 }
 .swiper-cube .swiper-slide {
   pointer-events: none;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   z-index: 1;
   visibility: hidden;
   transform-origin: 0 0;
@@ -635,7 +635,8 @@ swiper-container .swiper-notification {
 .swiper-cube .swiper-slide-shadow-left,
 .swiper-cube .swiper-slide-shadow-right {
   z-index: 0;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 .swiper-cube .swiper-cube-shadow {
   position: absolute;
@@ -661,7 +662,8 @@ swiper-container .swiper-notification {
 }
 .swiper-flip .swiper-slide {
   pointer-events: none;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   z-index: 1;
 }
 .swiper-flip .swiper-slide .swiper-slide {
@@ -676,10 +678,12 @@ swiper-container .swiper-notification {
 .swiper-flip .swiper-slide-shadow-left,
 .swiper-flip .swiper-slide-shadow-right {
   z-index: 0;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 .swiper-creative .swiper-slide {
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   overflow: hidden;
   transition-property: transform, opacity, height;
 }
@@ -688,7 +692,8 @@ swiper-container .swiper-notification {
 }
 .swiper-cards .swiper-slide {
   transform-origin: center bottom;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   overflow: hidden;
 }
 
@@ -1061,8 +1066,7 @@ featured-events-slider-example .fe-slider.swiper-horizontal .fe-slider-card .car
   /* 150% */
   display: flex;
   align-items: center;
-  -moz-column-gap: 12px;
-       column-gap: 12px;
+  column-gap: 12px;
   margin-bottom: 8px;
 }
 featured-events-slider-example .fe-slider.swiper-horizontal .swiper-scrollbar {

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,114 @@
+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/homepage-jumbotron/homepage-jumbotron.css

@@ -83,7 +83,8 @@ swiper-slide {
 }
 .swiper-backface-hidden .swiper-slide {
   transform: translateZ(0);
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 /* 3D Effects */
 .swiper-3d.swiper-css-mode .swiper-wrapper {
@@ -390,8 +391,7 @@ button.swiper-pagination-bullet {
   padding: 0;
   box-shadow: none;
   -webkit-appearance: none;
-          -moz-appearance: none;
-       appearance: none;
+          appearance: none;
 }
 .swiper-pagination-clickable .swiper-pagination-bullet {
   cursor: pointer;
@@ -559,8 +559,7 @@ button.swiper-pagination-bullet {
 .swiper-zoom-container > canvas {
   max-width: 100%;
   max-height: 100%;
-  -o-object-fit: contain;
-     object-fit: contain;
+  object-fit: contain;
 }
 .swiper-slide-zoomed {
   cursor: move;
@@ -606,7 +605,8 @@ swiper-container .swiper-notification {
 }
 .swiper-cube .swiper-slide {
   pointer-events: none;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   z-index: 1;
   visibility: hidden;
   transform-origin: 0 0;
@@ -635,7 +635,8 @@ swiper-container .swiper-notification {
 .swiper-cube .swiper-slide-shadow-left,
 .swiper-cube .swiper-slide-shadow-right {
   z-index: 0;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 .swiper-cube .swiper-cube-shadow {
   position: absolute;
@@ -661,7 +662,8 @@ swiper-container .swiper-notification {
 }
 .swiper-flip .swiper-slide {
   pointer-events: none;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   z-index: 1;
 }
 .swiper-flip .swiper-slide .swiper-slide {
@@ -676,10 +678,12 @@ swiper-container .swiper-notification {
 .swiper-flip .swiper-slide-shadow-left,
 .swiper-flip .swiper-slide-shadow-right {
   z-index: 0;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 .swiper-creative .swiper-slide {
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   overflow: hidden;
   transition-property: transform, opacity, height;
 }
@@ -688,7 +692,8 @@ swiper-container .swiper-notification {
 }
 .swiper-cards .swiper-slide {
   transform-origin: center bottom;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   overflow: hidden;
 }
 

package/dist/collection/components/organism-bundles/homepage-toggled-content/homepage-toggled-content.css

@@ -87,8 +87,7 @@ ptc-footer {
 
 ::slotted(.tab-slot-image) {
   width: auto;
-  -o-object-fit: contain;
-     object-fit: contain;
+  object-fit: contain;
   margin-bottom: 32px;
 }
 @media screen and (min-width: 480px) {

package/dist/collection/components/organism-bundles/homepage-toggled-content/homepage-toggled-content.js

@@ -118,7 +118,9 @@ export class HomepageToggledContent {
     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 tabs = this.getTabs();
-    return (h("div", { class: "wrapper" }, h("div", { class: "header" }, h("h2", null, h("slot", { name: "title" })), h("p", null, h("slot", { name: "description" }))), h("div", { class: "tabs" }, h("div", { class: "tabs-desktop" }, tabs.map((tab) => (h("homepage-clickable-tab", { label: tab.label, active: this.activeTab === tab.index, activeColor: this.colors[tab.index], onClick: () => this.handleTabSelected(tab.index) })))), h("div", { class: "tabs-mobile" }, h("button", { class: `dropdown-button ${this.colors[this.activeTab]} ${this.dropdownOpen ? "opened" : ""}`, onClick: () => this.toggleDropdown() }, tabs[this.activeTab].label, h("span", { class: "arrow" }, this.dropdownOpen ? upArrow : downArrow)), this.dropdownOpen && (h("div", { class: "dropdown-menu" }, tabs.map((tab) => (h("div", { class: `dropdown-item ${tab.index === this.activeTab ? "active-tab" : ""}`, onClick: () => this.handleTabSelected(tab.index) }, h("slot", { name: `tab-label-${tab.index}` })))))))), h("div", { class: "content" }, tabs.map((tab, index) => (h("div", { class: `tab-content ${this.activeTab === index ? "active-tab" : ""}` }, h("slot", { name: `tab-image-${index}` }), h("div", { class: "content-detail" }, h("div", { hidden: true }, tab.label), h("h2", null, h("slot", { name: `tab-title-${index}` })), h("p", null, h("slot", { name: `tab-content-${index}` })), h("slot", { name: `tab-button-${index}` }), this.activeTab === index &&
+    return (h("div", { class: "wrapper" }, h("div", { class: "header" }, h("h2", null, h("slot", { name: "title" })), h("p", null, h("slot", { name: "description" }))), h("div", { class: "tabs" }, h("div", { class: "tabs-desktop" }, tabs.map((tab) => (h("homepage-clickable-tab", { label: tab.label, active: this.activeTab === tab.index, activeColor: this.colors[tab.index], onClick: () => this.handleTabSelected(tab.index) })))), h("div", { class: "tabs-mobile" }, h("button", { class: `dropdown-button ${this.colors[this.activeTab]} ${this.dropdownOpen ? "opened" : ""}`, onClick: () => this.toggleDropdown() }, tabs[this.activeTab].label, h("span", { class: "arrow" }, this.dropdownOpen ? upArrow : downArrow)), this.dropdownOpen && (h("div", { class: "dropdown-menu" }, tabs.map((tab) => (h("div", { class: `dropdown-item ${tab.index === this.activeTab
+        ? "active-tab"
+        : ""}`, onClick: () => this.handleTabSelected(tab.index) }, h("slot", { name: `tab-label-${tab.index}` })))))))), h("div", { class: "content" }, tabs.map((tab, index) => (h("div", { class: `tab-content ${this.activeTab === index ? "active-tab" : ""}` }, h("slot", { name: `tab-image-${index}` }), h("div", { class: "content-detail" }, h("div", { hidden: true }, tab.label), h("h2", null, h("slot", { name: `tab-title-${index}` })), h("p", null, h("slot", { name: `tab-content-${index}` })), h("slot", { name: `tab-button-${index}` }), this.activeTab === index &&
       this.tileElements.length > 0 ? (h("div", Object.assign({ class: "info-card-wrapper card-section" }, this.getSliderBindings()), this.tileElements.map((tile, index) => (h("div", { class: `swiper-slide card-link card-link-${index + 1}`, "tab-index": index + 1, key: index, innerHTML: tile.outerHTML, onMouseDown: (e) => this.onCardMouseDown(e), onMouseUp: (e) => this.onCardMouseUp(e), onMouseLeave: (e) => this.onCardMouseUp(e), onTouchEnd: (e) => {
         this.onCardMouseUp(e);
       } }))))) : null)))))));

package/dist/collection/components/organism-bundles/ptc-icon-card-slider-example/ptc-icon-card-slider-example.css

@@ -83,7 +83,8 @@ swiper-slide {
 }
 .swiper-backface-hidden .swiper-slide {
   transform: translateZ(0);
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 /* 3D Effects */
 .swiper-3d.swiper-css-mode .swiper-wrapper {
@@ -390,8 +391,7 @@ button.swiper-pagination-bullet {
   padding: 0;
   box-shadow: none;
   -webkit-appearance: none;
-          -moz-appearance: none;
-       appearance: none;
+          appearance: none;
 }
 .swiper-pagination-clickable .swiper-pagination-bullet {
   cursor: pointer;
@@ -559,8 +559,7 @@ button.swiper-pagination-bullet {
 .swiper-zoom-container > canvas {
   max-width: 100%;
   max-height: 100%;
-  -o-object-fit: contain;
-     object-fit: contain;
+  object-fit: contain;
 }
 .swiper-slide-zoomed {
   cursor: move;
@@ -606,7 +605,8 @@ swiper-container .swiper-notification {
 }
 .swiper-cube .swiper-slide {
   pointer-events: none;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   z-index: 1;
   visibility: hidden;
   transform-origin: 0 0;
@@ -635,7 +635,8 @@ swiper-container .swiper-notification {
 .swiper-cube .swiper-slide-shadow-left,
 .swiper-cube .swiper-slide-shadow-right {
   z-index: 0;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 .swiper-cube .swiper-cube-shadow {
   position: absolute;
@@ -661,7 +662,8 @@ swiper-container .swiper-notification {
 }
 .swiper-flip .swiper-slide {
   pointer-events: none;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   z-index: 1;
 }
 .swiper-flip .swiper-slide .swiper-slide {
@@ -676,10 +678,12 @@ swiper-container .swiper-notification {
 .swiper-flip .swiper-slide-shadow-left,
 .swiper-flip .swiper-slide-shadow-right {
   z-index: 0;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 .swiper-creative .swiper-slide {
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   overflow: hidden;
   transition-property: transform, opacity, height;
 }
@@ -688,7 +692,8 @@ swiper-container .swiper-notification {
 }
 .swiper-cards .swiper-slide {
   transform-origin: center bottom;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   overflow: hidden;
 }
 

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

@@ -83,7 +83,8 @@ swiper-slide {
 }
 .swiper-backface-hidden .swiper-slide {
   transform: translateZ(0);
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 /* 3D Effects */
 .swiper-3d.swiper-css-mode .swiper-wrapper {
@@ -390,8 +391,7 @@ button.swiper-pagination-bullet {
   padding: 0;
   box-shadow: none;
   -webkit-appearance: none;
-          -moz-appearance: none;
-       appearance: none;
+          appearance: none;
 }
 .swiper-pagination-clickable .swiper-pagination-bullet {
   cursor: pointer;
@@ -559,8 +559,7 @@ button.swiper-pagination-bullet {
 .swiper-zoom-container > canvas {
   max-width: 100%;
   max-height: 100%;
-  -o-object-fit: contain;
-     object-fit: contain;
+  object-fit: contain;
 }
 .swiper-slide-zoomed {
   cursor: move;
@@ -606,7 +605,8 @@ swiper-container .swiper-notification {
 }
 .swiper-cube .swiper-slide {
   pointer-events: none;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   z-index: 1;
   visibility: hidden;
   transform-origin: 0 0;
@@ -635,7 +635,8 @@ swiper-container .swiper-notification {
 .swiper-cube .swiper-slide-shadow-left,
 .swiper-cube .swiper-slide-shadow-right {
   z-index: 0;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 .swiper-cube .swiper-cube-shadow {
   position: absolute;
@@ -661,7 +662,8 @@ swiper-container .swiper-notification {
 }
 .swiper-flip .swiper-slide {
   pointer-events: none;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   z-index: 1;
 }
 .swiper-flip .swiper-slide .swiper-slide {
@@ -676,10 +678,12 @@ swiper-container .swiper-notification {
 .swiper-flip .swiper-slide-shadow-left,
 .swiper-flip .swiper-slide-shadow-right {
   z-index: 0;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 .swiper-creative .swiper-slide {
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   overflow: hidden;
   transition-property: transform, opacity, height;
 }
@@ -688,7 +692,8 @@ swiper-container .swiper-notification {
 }
 .swiper-cards .swiper-slide {
   transform-origin: center bottom;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   overflow: hidden;
 }