@ptcwebops/ptcw-design 1.4.0 → 1.4.2

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

@@ -1,152 +1,152 @@
-import { Host, h, getAssetPath } from '@stencil/core';
-// import Swiper JS
-import Swiper from 'swiper';
-export class SequentialBundleExample {
-  constructor() {
-    this.isConnected = false;
-    this.dotSvg = getAssetPath('./media/nav-active-dotslick.svg');
-    this.isInteralCardsExpanded = [true, false, false, false, false];
-    this.isMobile = false;
-    this.expandedCardIndex = 0;
-  }
-  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: 1,
-            spaceBetween: 20,
-            loop: true,
-            pagination: {
-              el: '.swiper-pagination',
-            },
-          });
-        }
-        else {
-          setTimeout(createSwiper, 100);
-        }
-      };
-      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;
-    }
-  }
-  render() {
-    const deskTCards = [
-      h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "desktop", "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", "is-expanded": this.isInteralCardsExpanded[0] }, 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("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "desktop", "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", "is-expanded": this.isInteralCardsExpanded[1] }, 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("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "desktop", "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", "is-expanded": this.isInteralCardsExpanded[2] }, 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("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "desktop", "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", "is-expanded": this.isInteralCardsExpanded[3] }, 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("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "desktop", "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", "is-expanded": this.isInteralCardsExpanded[4] }, 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")),
-    ];
-    return (h(Host, null, this.isMobile ? (h("div", { class: "swiper-container mobile-container" }, 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", { class: "accordion-container desktop-container" }, deskTCards.map((card, index) => (h("div", { class: {
-          card: true,
-          expanded: index === this.expandedCardIndex,
-        }, onClick: () => {
-          this.expandedCardIndex = index;
-          this.isInteralCardsExpanded = [false, false, false, false, false];
-          this.isInteralCardsExpanded[index] = true;
-        } }, card)))),
-      h("div", { class: "pagination desktop-pagination" }, deskTCards.map((_, index) => (h("div", { class: {
-          'pagination-dot': true,
-          'active': index === this.expandedCardIndex,
-        }, onClick: () => {
-          this.expandedCardIndex = index;
-          this.isInteralCardsExpanded = [false, false, false, false, false];
-          this.isInteralCardsExpanded[index] = true;
-        } })))),
-      h("div", { hidden: true }, h("svg", null, h("use", { href: `${this.dotSvg}` }))),
-    ])));
-  }
-  updateIsMobile() {
-    // console.log("Checking isMobile...")
-    this.isMobile = window.innerWidth < 1200;
-  }
-  static get is() { return "sequential-bundle-example"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["sequential-bundle-example.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["sequential-bundle-example.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "isInteralCardsExpanded": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean[]",
-          "resolved": "boolean[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "defaultValue": "[true, false, false, false, false]"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isMobile": {},
-      "expandedCardIndex": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "isMobile",
-        "methodName": "watchStateHandler"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
-}
+import { Host, h, getAssetPath } from '@stencil/core';
+// import Swiper JS
+import Swiper from 'swiper';
+export class SequentialBundleExample {
+  constructor() {
+    this.isConnected = false;
+    this.dotSvg = getAssetPath('./media/nav-active-dotslick.svg');
+    this.isInteralCardsExpanded = [true, false, false, false, false];
+    this.isMobile = false;
+    this.expandedCardIndex = 0;
+  }
+  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: 1,
+            spaceBetween: 20,
+            loop: true,
+            pagination: {
+              el: '.swiper-pagination',
+            },
+          });
+        }
+        else {
+          setTimeout(createSwiper, 100);
+        }
+      };
+      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;
+    }
+  }
+  render() {
+    const deskTCards = [
+      h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "desktop", "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", "is-expanded": this.isInteralCardsExpanded[0] }, 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("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "desktop", "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", "is-expanded": this.isInteralCardsExpanded[1] }, 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("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "desktop", "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", "is-expanded": this.isInteralCardsExpanded[2] }, 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("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "desktop", "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", "is-expanded": this.isInteralCardsExpanded[3] }, 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("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "desktop", "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", "is-expanded": this.isInteralCardsExpanded[4] }, 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")),
+    ];
+    return (h(Host, null, this.isMobile ? (h("div", { class: "swiper-container mobile-container" }, 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", { class: "accordion-container desktop-container" }, deskTCards.map((card, index) => (h("div", { class: {
+          card: true,
+          expanded: index === this.expandedCardIndex,
+        }, onClick: () => {
+          this.expandedCardIndex = index;
+          this.isInteralCardsExpanded = [false, false, false, false, false];
+          this.isInteralCardsExpanded[index] = true;
+        } }, card)))),
+      h("div", { class: "pagination desktop-pagination" }, deskTCards.map((_, index) => (h("div", { class: {
+          'pagination-dot': true,
+          'active': index === this.expandedCardIndex,
+        }, onClick: () => {
+          this.expandedCardIndex = index;
+          this.isInteralCardsExpanded = [false, false, false, false, false];
+          this.isInteralCardsExpanded[index] = true;
+        } })))),
+      h("div", { hidden: true }, h("svg", null, h("use", { href: `${this.dotSvg}` }))),
+    ])));
+  }
+  updateIsMobile() {
+    // console.log("Checking isMobile...")
+    this.isMobile = window.innerWidth < 1200;
+  }
+  static get is() { return "sequential-bundle-example"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sequential-bundle-example.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sequential-bundle-example.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "isInteralCardsExpanded": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean[]",
+          "resolved": "boolean[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[true, false, false, false, false]"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isMobile": {},
+      "expandedCardIndex": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "isMobile",
+        "methodName": "watchStateHandler"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}