@ptcwebops/ptcw-design 4.3.1 → 4.3.3

package/dist/collection/components/ptc-info-tile/ptc-info-tile.js

@@ -0,0 +1,136 @@
+import { Host, h } from '@stencil/core';
+export class PtcInfoTile {
+  constructor() {
+    this.tileTitle = undefined;
+    this.description = undefined;
+    this.imgSrc = undefined;
+    this.link = undefined;
+    this.variant = undefined;
+  }
+  handleClick() {
+    this.tileClick.emit();
+  }
+  render() {
+    const content = (h("div", { class: "tile-content" }, h("h3", null, this.tileTitle), h("p", null, this.description)));
+    return (h(Host, null, h("div", { class: `tile ${this.variant}`, onClick: () => this.handleClick() }, this.variant === 'image' && this.imgSrc && h("img", { src: this.imgSrc, alt: this.tileTitle }), content, this.link && (h("a", { href: this.link, class: "link-overlay" })))));
+  }
+  static get is() { return "ptc-info-tile"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-info-tile.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-info-tile.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "tileTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tile-title",
+        "reflect": false
+      },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "description",
+        "reflect": false
+      },
+      "imgSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "img-src",
+        "reflect": false
+      },
+      "link": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "link",
+        "reflect": false
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'image' | 'text'",
+          "resolved": "\"image\" | \"text\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "variant",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tileClick",
+        "name": "tileClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+}

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

@@ -52,7 +52,7 @@ export class PtcJumbotron {
       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': true, 'light-links': (this.jumbotronType === 'dark' || this.jumbotronType === 'dark-video') } }, 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-p": "60", breakpoint: 992, "content-align": this.jumbotronType === 'text' ? 'center' : this.textAlign, styles: ":host{z-index: 999}" }, h("slot", { name: "breadcrumb" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("slot", { name: "main-title" }), (this.jumbotronType !== 'text' || (this.jumbotronType === 'text' && this.subTitle)) && (h("div", null, 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": 'w-4', "para-margin": `${this.jumbotronType === 'text' ? 'margin-flush' : '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};}` })), this.hasCtaSlot &&
+    return (h(Host, { class: classMap }, h("div", { class: { 'parent': true, 'light-links': (this.jumbotronType === 'dark' || this.jumbotronType === 'dark-video') } }, 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-p": "60", breakpoint: 992, "content-align": this.jumbotronType === 'text' ? 'center' : this.textAlign, styles: ":host{z-index: 999}" }, 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("slot", { name: "hp-sub-title" }), (this.jumbotronType !== 'text' || (this.jumbotronType === 'text' && this.subTitle)) && (h("div", null, 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": 'w-4', "para-margin": `${this.jumbotronType === 'text' ? 'margin-flush' : '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};}` })), 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.jumbotronType === 'png' ? (h("div", { class: "desktop-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc }), 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)))));
   }
   getCssClassMap() {
@@ -317,7 +317,7 @@ export class PtcJumbotron {
       },
       "hasCtaSlot": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",

package/dist/collection/components/ptc-social-icons-footer/ptc-social-icons-footer.js

@@ -17,9 +17,16 @@ export class PtcSocialIconsFooter {
     this.weiboUrl = undefined;
     this.youkuUrl = undefined;
     this.wechatQrImageUrl = undefined;
+    this.wechatQrImageAltText = undefined;
+    this.target = undefined;
+  }
+  openModal(e) {
+    e.preventDefault();
+    const modal = this.hostElement.shadowRoot.querySelector('#QRModal');
+    modal.show = true;
   }
   render() {
-    return (h(Host, null, h("slot", null), h("ul", null, this.instagramUrl && h("li", null, " ", h("a", { href: this.instagramUrl, title: 'Instagram', innerHTML: instagramSVG }), " "), this.facebookUrl && h("li", null, " ", h("a", { href: this.facebookUrl, title: 'Facebook', innerHTML: facebookSVG }), " "), this.linkedinUrl && h("li", null, " ", h("a", { href: this.linkedinUrl, title: 'LinkedIn', innerHTML: linkedinSVG }), " "), this.xUrl && h("li", null, " ", h("a", { href: this.xUrl, title: 'X', innerHTML: xSVG }), " "), this.youtubeUrl && h("li", null, " ", h("a", { href: this.youtubeUrl, title: 'Youtube', innerHTML: youtubeSVG }), " "), this.weiboUrl && h("li", null, " ", h("a", { href: this.weiboUrl, title: 'Weibo', innerHTML: weiboSVG }), " "), this.youkuUrl && h("li", null, " ", h("a", { href: this.youkuUrl, title: 'Youku', innerHTML: ykSVG }), " "), this.wechatQrImageUrl && h("li", null, " ", h("a", { href: this.wechatQrImageUrl, title: 'WeChat', innerHTML: wechatSVG }), " "))));
+    return (h(Host, null, h("slot", null), h("ul", null, this.instagramUrl && h("li", null, " ", h("a", { href: this.instagramUrl, title: 'Instagram', innerHTML: instagramSVG, target: this.target }), " "), this.facebookUrl && h("li", null, " ", h("a", { href: this.facebookUrl, title: 'Facebook', innerHTML: facebookSVG, target: this.target }), " "), this.linkedinUrl && h("li", null, " ", h("a", { href: this.linkedinUrl, title: 'LinkedIn', innerHTML: linkedinSVG, target: this.target }), " "), this.xUrl && h("li", null, " ", h("a", { href: this.xUrl, title: 'X', innerHTML: xSVG, target: this.target }), " "), this.youtubeUrl && h("li", null, " ", h("a", { href: this.youtubeUrl, title: 'Youtube', innerHTML: youtubeSVG, target: this.target }), " "), this.weiboUrl && h("li", null, " ", h("a", { href: this.weiboUrl, title: 'Weibo', innerHTML: weiboSVG, target: this.target }), " "), this.youkuUrl && h("li", null, " ", h("a", { href: this.youkuUrl, title: 'Youku', innerHTML: ykSVG, target: this.target }), " "), this.wechatQrImageUrl && h("li", null, " ", h("a", { href: "#", onClick: (Event) => { this.openModal(Event); }, title: 'WeChat', innerHTML: wechatSVG }), " ")), h("ptc-modal", { id: "QRModal", show: false, size: "sm", "close-on-blur": true, fixed: true, styles: '.wrapper .modal-popup .modal-body { padding-bottom: 40px}' }, h("ptc-picture", { alt: this.wechatQrImageAltText, src: this.wechatQrImageUrl, "max-width": '250', "image-alignment": 'center', styles: 'img{margin:auto}' }))));
   }
   static get is() { return "ptc-social-icons-footer"; }
   static get encapsulation() { return "shadow"; }
@@ -170,7 +177,42 @@ export class PtcSocialIconsFooter {
         },
         "attribute": "wechat-qr-image-url",
         "reflect": false
+      },
+      "wechatQrImageAltText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "wechat-qr-image-alt-text",
+        "reflect": false
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "target",
+        "reflect": false
       }
     };
   }
+  static get elementRef() { return "hostElement"; }
 }

package/dist/custom-elements/index.d.ts

@@ -74,6 +74,24 @@ export const FooterForm: {
   new (): FooterForm;
 };
 
+interface HomepageClickableTab extends Components.HomepageClickableTab, HTMLElement {}
+export const HomepageClickableTab: {
+  prototype: HomepageClickableTab;
+  new (): HomepageClickableTab;
+};
+
+interface HomepageJumbotron extends Components.HomepageJumbotron, HTMLElement {}
+export const HomepageJumbotron: {
+  prototype: HomepageJumbotron;
+  new (): HomepageJumbotron;
+};
+
+interface HomepageToggledContent extends Components.HomepageToggledContent, HTMLElement {}
+export const HomepageToggledContent: {
+  prototype: HomepageToggledContent;
+  new (): HomepageToggledContent;
+};
+
 interface IconAsset extends Components.IconAsset, HTMLElement {}
 export const IconAsset: {
   prototype: IconAsset;
@@ -86,6 +104,12 @@ export const InnovatorToggleContainer: {
   new (): InnovatorToggleContainer;
 };
 
+interface JumbotronSubMune extends Components.JumbotronSubMune, HTMLElement {}
+export const JumbotronSubMune: {
+  prototype: JumbotronSubMune;
+  new (): JumbotronSubMune;
+};
+
 interface ListItem extends Components.ListItem, HTMLElement {}
 export const ListItem: {
   prototype: ListItem;
@@ -374,6 +398,12 @@ export const PtcImg: {
   new (): PtcImg;
 };
 
+interface PtcInfoTile extends Components.PtcInfoTile, HTMLElement {}
+export const PtcInfoTile: {
+  prototype: PtcInfoTile;
+  new (): PtcInfoTile;
+};
+
 interface PtcJumbotron extends Components.PtcJumbotron, HTMLElement {}
 export const PtcJumbotron: {
   prototype: PtcJumbotron;