@ptcwebops/ptcw-design 1.4.5 → 1.4.6

package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.js

@@ -1,303 +1,303 @@
-import { Host, h } from '@stencil/core';
-export class PtcJumbotron {
-  constructor() {
-    this.jumbotronType = 'light';
-    this.popupVideo = undefined;
-    this.mainTitle = 'Lorem Ipsum Dolor Sit Amet Consectetur';
-    this.subTitle = 'Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Lorem Ipsum Dolor Sit Amet Consectetur Adipisci Lorem Ipsum Dolor Sit Amet';
-    this.pngSrc = undefined;
-    this.gifSrc = undefined;
-    this.bgVideoSrc = undefined;
-    this.bgSrc = undefined;
-    this.isIframe = false;
-    this.contentBackground = undefined;
-    this.contentColor = undefined;
-    this.textAlign = 'left';
-    this.isMobile = undefined;
-  }
-  handleResize() {
-    this.getContentBackground();
-  }
-  connectedCallback() {
-    this.getContentBackground();
-  }
-  componentDidLoad() {
-    if (!!this.popupVideo) {
-      const selectedBtn = this.el.shadowRoot.querySelector('#j-modal-btn');
-      const PtcModal = this.el.shadowRoot.querySelector('#j-modal');
-      console.log('selected btn: ' + selectedBtn + '; selected Modal: ' + PtcModal);
-      selectedBtn.addEventListener('click', () => {
-        PtcModal.show = true;
-      });
-    }
-    const contentContainerH = this.el.shadowRoot.querySelector(".content-container").clientHeight;
-    const videoEle = !!this.el.shadowRoot.querySelector(".video-ratio") ? this.el.shadowRoot.querySelector(".video-ratio") : null;
-    if (contentContainerH < 500 && videoEle) {
-      videoEle.style.paddingBottom = "500px";
-    }
-    //console.log('content-container: ' + this.el.shadowRoot.querySelector(".content-container").clientHeight);
-  }
-  render() {
-    console.log('render');
-    const classMap = this.getCssClassMap();
-    let mediaElement;
-    switch (this.jumbotronType) {
-      case 'png':
-        mediaElement = (h("div", { class: "mobile-media-image" }, h("ptc-picture", { src: this.pngSrc })));
-        break;
-      case 'gif':
-        mediaElement = (h("div", { class: "mobile-media-image gif-bg" }, h("img", { src: this.gifSrc })));
-        break;
-      case 'dark-video':
-      case 'light-video':
-        mediaElement = h("ptc-background-video", { class: "video-ratio", overlay: false, "video-src": this.bgVideoSrc, isIframe: this.isIframe });
-        break;
-      default:
-        mediaElement = h("ptc-img", { "img-url": this.bgSrc });
-    }
-    return (h(Host, { class: classMap }, h("div", { class: "parent" }, h("div", { class: `div1 image-container ${this.jumbotronType === 'text' ? 'hidden' : ''}` }, mediaElement), h("div", { class: "div2 content-container" }, h("div", { class: "bg-overlay", style: { background: this.contentBackground } }), h("div", { class: "ptc-container content-layout" }, h("max-width-container", { "max-width": "578", breakpoint: 992, "content-align": this.jumbotronType === 'text' ? 'center' : this.textAlign }, h("slot", { name: "breadcrumb" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-title", { type: "h1", upperline: "no-upperline", "title-size": "xxxx-large", "title-height": "densest", "title-weight": "w-8", "title-margin": "margin-flush", "text-align": this.jumbotronType === 'text' ? 'center' : 'left' }, h("ptc-tooltip", { "text-lines": "3", description: this.mainTitle, position: "right", styles: `.ellipsis-by-line-boxing{color: ${this.contentColor};}` })), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-para", { "font-size": this.jumbotronType === 'text' && this.isMobile ? "x-small" : "small", "font-weight": this.jumbotronType === 'text' && this.isMobile ? 'w-7' : 'w-4', "para-margin": "margin-bottom-6", "para-color": "white", "para-line-h": "line-height-p", "para-align": this.jumbotronType === 'text' ? 'center' : 'left' }, h("ptc-tooltip", { "text-lines": "8", description: this.subTitle, position: "right", styles: `.ellipsis-by-line-boxing{color: ${this.contentColor};}` })), h("div", { class: `u-flex u-flex-wrap gap-adjustment${this.jumbotronType === 'text' ? ' text-adjustment' : ''}` }, h("slot", { name: "j-cta" }))), !!this.popupVideo
-      ? [
-        h("ptc-modal", { id: "j-modal", show: false, size: "lg", "iframe-url": this.popupVideo }),
-        h("ptc-svg-btn", { id: "j-modal-btn", "svg-name": "play", display: "block", "z-index": 2 }),
-      ]
-      : null, this.jumbotronType === 'png' ? (h("div", { class: "desktop-media-image" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc }))) : null, this.jumbotronType === 'gif' ? (h("div", { class: "desktop-media-image desk-gif-adjustment" }, h("img", { src: this.gifSrc }))) : null)))));
-  }
-  getCssClassMap() {
-    return {
-    // [this.imageZIndex] : true
-    };
-  }
-  getContentBackground() {
-    if (window.innerWidth < 992) {
-      switch (this.jumbotronType) {
-        case 'light':
-        case 'light-video':
-          this.contentBackground = '#F3F3F3';
-          this.contentColor = 'var(--color-gray-10)';
-          break;
-        case 'dark':
-        case 'dark-video':
-          this.contentBackground = 'var(--color-gray-09)';
-          this.contentColor = 'var(--color-gray-01)';
-          break;
-        default:
-          this.contentBackground = 'transparent';
-          this.contentColor = 'var(--color-gray-10)';
-      }
-      this.isMobile = true;
-    }
-    else {
-      switch (this.jumbotronType) {
-        case 'light':
-        case 'light-video':
-          this.contentBackground = 'linear-gradient(90.19deg, rgba(255, 255, 255, 0.9) 62.55%, rgba(228, 231, 233, 0) 99.86%)';
-          this.contentColor = 'var(--color-gray-10)';
-          break;
-        case 'dark':
-        case 'dark-video':
-          this.contentBackground = 'linear-gradient(90deg, rgba(0, 0, 0, 0.63) 52.42%, rgba(40, 47, 53, 0) 100%)';
-          this.contentColor = 'var(--color-gray-01)';
-          break;
-        case 'gif':
-          this.contentBackground = '#F3F3F3';
-          this.contentColor = 'var(--color-gray-10)';
-          break;
-        default:
-          this.contentBackground = 'transparent';
-          this.contentColor = 'var(--color-gray-10)';
-      }
-      this.isMobile = false;
-    }
-  }
-  static get is() { return "ptc-jumbotron"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-jumbotron.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-jumbotron.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "jumbotronType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "jumbotron-type",
-        "reflect": false,
-        "defaultValue": "'light'"
-      },
-      "popupVideo": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "popup-video",
-        "reflect": false
-      },
-      "mainTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "main-title",
-        "reflect": false,
-        "defaultValue": "'Lorem Ipsum Dolor Sit Amet Consectetur'"
-      },
-      "subTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "sub-title",
-        "reflect": false,
-        "defaultValue": "'Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Lorem Ipsum Dolor Sit Amet Consectetur Adipisci Lorem Ipsum Dolor Sit Amet'"
-      },
-      "pngSrc": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "png-src",
-        "reflect": false
-      },
-      "gifSrc": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "gif-src",
-        "reflect": false
-      },
-      "bgVideoSrc": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "bg-video-src",
-        "reflect": false
-      },
-      "bgSrc": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "bg-src",
-        "reflect": false
-      },
-      "isIframe": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-iframe",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "contentBackground": {},
-      "contentColor": {},
-      "textAlign": {},
-      "isMobile": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcJumbotron {
+  constructor() {
+    this.jumbotronType = 'light';
+    this.popupVideo = undefined;
+    this.mainTitle = 'Lorem Ipsum Dolor Sit Amet Consectetur';
+    this.subTitle = 'Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Lorem Ipsum Dolor Sit Amet Consectetur Adipisci Lorem Ipsum Dolor Sit Amet';
+    this.pngSrc = undefined;
+    this.gifSrc = undefined;
+    this.bgVideoSrc = undefined;
+    this.bgSrc = undefined;
+    this.isIframe = false;
+    this.contentBackground = undefined;
+    this.contentColor = undefined;
+    this.textAlign = 'left';
+    this.isMobile = undefined;
+  }
+  handleResize() {
+    this.getContentBackground();
+  }
+  connectedCallback() {
+    this.getContentBackground();
+  }
+  componentDidLoad() {
+    if (!!this.popupVideo) {
+      const selectedBtn = this.el.shadowRoot.querySelector('#j-modal-btn');
+      const PtcModal = this.el.shadowRoot.querySelector('#j-modal');
+      console.log('selected btn: ' + selectedBtn + '; selected Modal: ' + PtcModal);
+      selectedBtn.addEventListener('click', () => {
+        PtcModal.show = true;
+      });
+    }
+    const contentContainerH = this.el.shadowRoot.querySelector(".content-container").clientHeight;
+    const videoEle = !!this.el.shadowRoot.querySelector(".video-ratio") ? this.el.shadowRoot.querySelector(".video-ratio") : null;
+    if (contentContainerH < 500 && videoEle) {
+      videoEle.style.paddingBottom = "500px";
+    }
+    //console.log('content-container: ' + this.el.shadowRoot.querySelector(".content-container").clientHeight);
+  }
+  render() {
+    console.log('render');
+    const classMap = this.getCssClassMap();
+    let mediaElement;
+    switch (this.jumbotronType) {
+      case 'png':
+        mediaElement = (h("div", { class: "mobile-media-image" }, h("ptc-picture", { src: this.pngSrc })));
+        break;
+      case 'gif':
+        mediaElement = (h("div", { class: "mobile-media-image gif-bg" }, h("img", { src: this.gifSrc })));
+        break;
+      case 'dark-video':
+      case 'light-video':
+        mediaElement = h("ptc-background-video", { class: "video-ratio", overlay: false, "video-src": this.bgVideoSrc, isIframe: this.isIframe });
+        break;
+      default:
+        mediaElement = h("ptc-img", { "img-url": this.bgSrc });
+    }
+    return (h(Host, { class: classMap }, h("div", { class: "parent" }, h("div", { class: `div1 image-container ${this.jumbotronType === 'text' ? 'hidden' : ''}` }, mediaElement), h("div", { class: "div2 content-container" }, h("div", { class: "bg-overlay", style: { background: this.contentBackground } }), h("div", { class: "ptc-container content-layout" }, h("max-width-container", { "max-width": "578", breakpoint: 992, "content-align": this.jumbotronType === 'text' ? 'center' : this.textAlign }, h("slot", { name: "breadcrumb" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-title", { type: "h1", upperline: "no-upperline", "title-size": "xxxx-large", "title-height": "densest", "title-weight": "w-8", "title-margin": "margin-flush", "text-align": this.jumbotronType === 'text' ? 'center' : 'left' }, h("ptc-tooltip", { "text-lines": "3", description: this.mainTitle, position: "right", styles: `.ellipsis-by-line-boxing{color: ${this.contentColor};}` })), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-para", { "font-size": this.jumbotronType === 'text' && this.isMobile ? "x-small" : "small", "font-weight": this.jumbotronType === 'text' && this.isMobile ? 'w-7' : 'w-4', "para-margin": "margin-bottom-6", "para-color": "white", "para-line-h": "line-height-p", "para-align": this.jumbotronType === 'text' ? 'center' : 'left' }, h("ptc-tooltip", { "text-lines": "8", description: this.subTitle, position: "right", styles: `.ellipsis-by-line-boxing{color: ${this.contentColor};}` })), h("div", { class: `u-flex u-flex-wrap gap-adjustment${this.jumbotronType === 'text' ? ' text-adjustment' : ''}` }, h("slot", { name: "j-cta" }))), !!this.popupVideo
+      ? [
+        h("ptc-modal", { id: "j-modal", show: false, size: "lg", "iframe-url": this.popupVideo }),
+        h("ptc-svg-btn", { id: "j-modal-btn", "svg-name": "play", display: "block", "z-index": 2 }),
+      ]
+      : null, this.jumbotronType === 'png' ? (h("div", { class: "desktop-media-image" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc }))) : null, this.jumbotronType === 'gif' ? (h("div", { class: "desktop-media-image desk-gif-adjustment" }, h("img", { src: this.gifSrc }))) : null)))));
+  }
+  getCssClassMap() {
+    return {
+    // [this.imageZIndex] : true
+    };
+  }
+  getContentBackground() {
+    if (window.innerWidth < 992) {
+      switch (this.jumbotronType) {
+        case 'light':
+        case 'light-video':
+          this.contentBackground = '#F3F3F3';
+          this.contentColor = 'var(--color-gray-10)';
+          break;
+        case 'dark':
+        case 'dark-video':
+          this.contentBackground = 'var(--color-gray-09)';
+          this.contentColor = 'var(--color-gray-01)';
+          break;
+        default:
+          this.contentBackground = 'transparent';
+          this.contentColor = 'var(--color-gray-10)';
+      }
+      this.isMobile = true;
+    }
+    else {
+      switch (this.jumbotronType) {
+        case 'light':
+        case 'light-video':
+          this.contentBackground = 'linear-gradient(90.19deg, rgba(255, 255, 255, 0.9) 62.55%, rgba(228, 231, 233, 0) 99.86%)';
+          this.contentColor = 'var(--color-gray-10)';
+          break;
+        case 'dark':
+        case 'dark-video':
+          this.contentBackground = 'linear-gradient(90deg, rgba(0, 0, 0, 0.63) 52.42%, rgba(40, 47, 53, 0) 100%)';
+          this.contentColor = 'var(--color-gray-01)';
+          break;
+        case 'gif':
+          this.contentBackground = '#F3F3F3';
+          this.contentColor = 'var(--color-gray-10)';
+          break;
+        default:
+          this.contentBackground = 'transparent';
+          this.contentColor = 'var(--color-gray-10)';
+      }
+      this.isMobile = false;
+    }
+  }
+  static get is() { return "ptc-jumbotron"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-jumbotron.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-jumbotron.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "jumbotronType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "jumbotron-type",
+        "reflect": false,
+        "defaultValue": "'light'"
+      },
+      "popupVideo": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "popup-video",
+        "reflect": false
+      },
+      "mainTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "main-title",
+        "reflect": false,
+        "defaultValue": "'Lorem Ipsum Dolor Sit Amet Consectetur'"
+      },
+      "subTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "sub-title",
+        "reflect": false,
+        "defaultValue": "'Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Lorem Ipsum Dolor Sit Amet Consectetur Adipisci Lorem Ipsum Dolor Sit Amet'"
+      },
+      "pngSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "png-src",
+        "reflect": false
+      },
+      "gifSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "gif-src",
+        "reflect": false
+      },
+      "bgVideoSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "bg-video-src",
+        "reflect": false
+      },
+      "bgSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "bg-src",
+        "reflect": false
+      },
+      "isIframe": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-iframe",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "contentBackground": {},
+      "contentColor": {},
+      "textAlign": {},
+      "isMobile": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}