@ptcwebops/ptcw-design 1.4.9 → 1.5.2

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

@@ -1,317 +1,349 @@
-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();
-    this.adjustJumbotronHeight();
-  }
-  connectedCallback() {
-    this.getContentBackground();
-  }
-  componentDidLoad() {
-    if (!!this.popupVideo) {
-      const selectedBtn = this.el.shadowRoot.querySelector('#j-modal-btn');
-      const PtcModal = this.el.shadowRoot.querySelector('#j-modal');
-      if (selectedBtn && PtcModal) {
-        selectedBtn.addEventListener('click', function () {
-          PtcModal.show = true;
-        });
-        const iframe = PtcModal.shadowRoot.querySelector('iframe');
-        console.log('iframe');
-        console.log(iframe);
-        const iframeDoc = iframe.contentDocument;
-        //const shadowVideo = shadowIframe.querySelector('document')
-        console.log('video: ');
-        console.log(iframeDoc);
-      }
-    }
-    this.adjustJumbotronHeight();
-  }
-  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, styles: ".smart-bg{background-position:right !important;}" });
-    }
-    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, fixed: true }),
-        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;
-    }
-  }
-  adjustJumbotronHeight() {
-    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 && !this.isMobile) {
-      videoEle.style.paddingBottom = '500px';
-    }
-    else {
-      !!videoEle ? videoEle.style.paddingBottom = '' : null;
-    }
-  }
-  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.hasPopupVideo = false;
+    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.playButtonTitle = undefined;
+    this.pauseButtonTitle = undefined;
+    this.contentBackground = undefined;
+    this.contentColor = undefined;
+    this.textAlign = 'left';
+    this.isMobile = undefined;
+  }
+  handleResize() {
+    this.getContentBackground();
+    this.adjustJumbotronHeight();
+  }
+  connectedCallback() {
+    this.getContentBackground();
+  }
+  componentDidLoad() {
+    // if (!!this.popupVideo) {
+    //   const selectedBtn = this.el.shadowRoot.querySelector('#j-modal-btn');
+    //   const PtcModal: HTMLPtcModalElement = this.el.shadowRoot.querySelector('#j-modal');
+    //   if (selectedBtn && PtcModal) {
+    //     selectedBtn.addEventListener('click', function () {
+    //       PtcModal.show = true;
+    //     });
+    //     const iframe = PtcModal.shadowRoot.querySelector('iframe');
+    //     console.log('iframe')
+    //     console.log(iframe);
+    //     const iframeDoc= iframe.contentDocument
+    //     //const shadowVideo = shadowIframe.querySelector('document')
+    //     console.log('video: ')
+    //     console.log(iframeDoc)
+    //   }
+    // }
+    this.adjustJumbotronHeight();
+  }
+  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, "play-button-title": this.playButtonTitle, "pause-button-title": this.pauseButtonTitle }));
+        break;
+      default:
+        mediaElement = h("ptc-img", { "img-url": this.bgSrc, styles: ".smart-bg{background-position:right !important;}" });
+    }
+    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("slot", { name: "main-title" }), 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.hasPopupVideo ? h("slot", { name: "video" }) : 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;
+    }
+  }
+  adjustJumbotronHeight() {
+    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 && !this.isMobile) {
+      videoEle.style.paddingBottom = '500px';
+    }
+    else {
+      !!videoEle ? (videoEle.style.paddingBottom = '') : null;
+    }
+  }
+  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'"
+      },
+      "hasPopupVideo": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "has-popup-video",
+        "reflect": false,
+        "defaultValue": "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"
+      },
+      "playButtonTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "play-button-title",
+        "reflect": false
+      },
+      "pauseButtonTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "pause-button-title",
+        "reflect": 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
+      }];
+  }
+}