@ptcwebops/ptcw-design 6.4.37-beta → 6.5.0-upgrade

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

@@ -1,704 +0,0 @@
-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.pngImgStyles = "";
-    this.gifSrc = undefined;
-    this.bgVideoSrc = undefined;
-    this.bgVideoPosterSrc = undefined;
-    this.bgSrc = undefined;
-    this.isIframe = false;
-    this.isHomepage = false;
-    this.playButtonTitle = undefined;
-    this.pauseButtonTitle = undefined;
-    this.buttonLocation = undefined;
-    this.buttonTabIndex = 0;
-    this.contentBackground = undefined;
-    this.contentColor = undefined;
-    this.textAlign = "left";
-    this.isMobile = undefined;
-    this.isTransitioning = undefined;
-    this.blogAuthorImage = "";
-    this.blogAuthorImageAlt = "";
-    this.blogAuthorName = "";
-    this.blogAuthorQueryHref = "";
-    this.blogAuthorQueryTarget = "";
-    this.hasCountdown = false;
-    this.logo = "";
-    this.styles = undefined;
-    this.enableLazy = false;
-    this.defer = undefined;
-    this.hasCtaSlot = undefined;
-  }
-  componentWillLoad() {
-    this.hasCtaSlot = !!this.el.querySelector('[slot="j-cta"]');
-  }
-  handleResize() {
-    this.getContentBackground();
-    //this.adjustJumbotronHeight();
-  }
-  connectedCallback() {
-    this.getContentBackground();
-  }
-  componentDidLoad() {
-    //this.adjustJumbotronHeight();
-  }
-  componentDidUpdate() {
-    this.getContentBackground();
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    let mediaElement;
-    switch (this.jumbotronType) {
-      case "png":
-        mediaElement = (h("div", { class: "mobile-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { src: this.pngSrc }), this.hasPopupVideo && this.isMobile ? (h("slot", { name: "video" })) : null)));
-        break;
-      case "blog":
-        mediaElement = (h("div", { class: "mobile-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: "img {height: 100%;}" }))));
-        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, "button-location": this.buttonLocation, "button-tab-index": this.buttonTabIndex, defer: this.defer, posterSrc: this.bgVideoPosterSrc }, " ", this.hasPopupVideo && this.isMobile ? (h("div", { class: "mobile-modal-play-btn" }, " ", h("slot", { name: "video" }))) : null));
-        break;
-      case "dark":
-      case "light":
-        mediaElement = (h("div", { class: "dl-img-wrap" }, h("ptc-img", { "img-url": this.bgSrc, "enable-lazy-load": this.enableLazy, styles: ".smart-bg{background-position:right !important;}" }), this.hasPopupVideo && this.isMobile ? (h("div", { class: "mobile-modal-play-btn" }, " ", h("slot", { name: "video" }))) : null));
-        break;
-      default:
-        mediaElement = (h("ptc-img", { "img-url": this.bgSrc, "enable-lazy-load": this.enableLazy, styles: ".smart-bg{background-position:right !important;}" }));
-    }
-    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: {
-        parent: true,
-        "light-links": this.jumbotronType === "dark" ||
-          this.jumbotronType === "dark-video",
-        "hp-adjustments": this.isHomepage,
-        transitioning: this.isTransitioning,
-      } }, 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": true,
-        "content-layout": true,
-        "hp-container": this.isHomepage,
-        "blog-container": this.jumbotronType === "blog",
-      } }, h("max-width-container", { "max-width-p": "60", breakpoint: 992, "content-align": this.jumbotronType === "text"
-        ? "center"
-        : this.textAlign, styles: ":host{z-index: 999}" }, h("slot", { name: "breadcrumb" }), !!this.logo && (h("div", { class: "logo-frame" }, h("img", { alt: "Logo", src: this.logo }))), h("span", { class: "main-content-items" }, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("slot", { name: "main-title" }), h("slot", { name: "hp-sub-title" }), (this.jumbotronType !== "text" ||
-      (this.jumbotronType === "text" &&
-        this.subTitle)) &&
-      !this.isHomepage && (h("div", null, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }))), !this.isHomepage && (h("ptc-para", { styles: `p{color: ${this.contentColor}!important;}`, "font-size": this.jumbotronType === "text" &&
-        this.isMobile
-        ? "x-small"
-        : "small", "font-weight": "w-4", "para-margin": `${this.jumbotronType === "text" ||
-        this.jumbotronType === "blog"
-        ? "margin-flush"
-        : "margin-bottom-6"}`, "para-color": "white", "para-line-h": "line-height-p", "para-align": this.jumbotronType === "text"
-        ? "center"
-        : "left", "seo-compatibility-mode": true }, h("p", { innerHTML: this.subTitle, style: { margin: "0" } }), h("p", { style: { margin: "0" } }, h("slot", { name: "blog-date" })), this.jumbotronType === "blog" && (h("div", null, h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("div", { id: "header-blog-author", slot: "blog-author" }, h("div", { class: "image" }, h("img", { alt: this
-        .blogAuthorImageAlt, src: this
-        .blogAuthorImage })), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, h("a", { class: "blog-author-name mf-listen", tabindex: "0", href: this
-        .blogAuthorQueryHref, target: this
-        .blogAuthorQueryTarget, "aria-label": "Other blogs by author" }, this
-      .blogAuthorName))))))), this.hasCtaSlot && (h("div", { class: `u-flex u-flex-wrap gap-adjustment${this.jumbotronType === "text"
-        ? " text-adjustment"
-        : ""}` }, h("slot", { name: "j-cta" }))))), this.hasPopupVideo &&
-      this.jumbotronType !== "png" ? (h("slot", { name: "video" })) : null, this.hasCountdown ? (h("slot", { name: "countdown" })) : null, this.jumbotronType === "png" ? (h("div", { class: "desktop-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: `img {${this.pngImgStyles}}` }), this.hasPopupVideo ? (h("slot", { name: "video" })) : null))) : null, this.jumbotronType === "gif" ? (h("div", { class: "desktop-media-image desk-gif-adjustment" }, h("img", { src: this.gifSrc }))) : null, this.jumbotronType === "blog" ? (h("div", { class: "desktop-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: "img {height: 100%;}" })))) : null)))));
-  }
-  getCssClassMap() {
-    return {
-      // [this.imageZIndex] : true
-      "text-jumbotron": this.jumbotronType === "text" ? true : false,
-      "png-jumbotron": this.jumbotronType === "png" ? true : false,
-      "blog-jumbotron": this.jumbotronType === "blog" ? true : false,
-      "gif-jumbotron": this.jumbotronType === "gif" ? true : false,
-      "dark-video-jumbotron light-links": this.jumbotronType === "dark-video" ? true : false,
-      "light-video-jumbotron": this.jumbotronType === "light-video" ? true : false,
-      "dark-jumbotron light-links": this.jumbotronType === "dark" ? true : false,
-      "light-jumbotron": this.jumbotronType === "light" ? true : false,
-    };
-  }
-  getContentBackground() {
-    if (window.innerWidth < 992) {
-      switch (this.jumbotronType) {
-        case "light":
-        case "light-video":
-        case "png":
-          this.contentBackground = "var(--color-white)";
-          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;
-        case "blog":
-          this.contentBackground = "white";
-          this.contentColor = "var(--color-gray-10)";
-          break;
-        default:
-          this.contentBackground = "transparent";
-          this.contentColor = "var(--color-gray-10)";
-      }
-      this.isMobile = true;
-    }
-    else {
-      switch (this.jumbotronType) {
-        case "light":
-        case "light-video":
-        case "png":
-          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;
-        case "blog":
-          this.contentBackground = "white";
-          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\""
-      },
-      "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
-      },
-      "pngImgStyles": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "png-img-styles",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "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
-      },
-      "bgVideoPosterSrc": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "bg-video-poster-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"
-      },
-      "isHomepage": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-homepage",
-        "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
-      },
-      "buttonLocation": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "button-location",
-        "reflect": false
-      },
-      "buttonTabIndex": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "button-tab-index",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "isTransitioning": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-transitioning",
-        "reflect": false
-      },
-      "blogAuthorImage": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "blog-author-image",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "blogAuthorImageAlt": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "blog-author-image-alt",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "blogAuthorName": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "blog-author-name",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "blogAuthorQueryHref": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "blog-author-query-href",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "blogAuthorQueryTarget": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "blog-author-query-target",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "hasCountdown": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "has-countdown",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "logo": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "logo",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "styles": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "(optional) Injected CSS styles"
-        },
-        "attribute": "styles",
-        "reflect": false
-      },
-      "enableLazy": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "(optional) to enable lazy loading"
-        },
-        "attribute": "enable-lazy",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "defer": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "delay loading of video to improve perfomance"
-        },
-        "attribute": "defer",
-        "reflect": false
-      },
-      "hasCtaSlot": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "has-cta-slot",
-        "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
-      }];
-  }
-}