@ptcwebops/ptcw-design 4.9.5 → 4.9.6

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

@@ -6,11 +6,13 @@ export class PtcJumbotron {
     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.bgSrc = undefined;
     this.isIframe = false;
     this.isHomepage = false;
+    this.isBlogDetail = false;
     this.playButtonTitle = undefined;
     this.pauseButtonTitle = undefined;
     this.buttonLocation = undefined;
@@ -56,7 +58,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 }, 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 } }, 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("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' ? '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 }))), 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)))));
+    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 } }, 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("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' ? '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 }), this.jumbotronType === 'png' && this.isBlogDetail && h("div", null, h("ptc-spacer", { breakpoint: 'x-small', size: 'medium' }), h("ptc-spacer", { breakpoint: 'small', size: 'small' }), h("slot", { name: "blog-author" })))), 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, 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)))));
   }
   getCssClassMap() {
     return {
@@ -75,6 +77,7 @@ export class PtcJumbotron {
       switch (this.jumbotronType) {
         case 'light':
         case 'light-video':
+        case 'png':
           this.contentBackground = 'var(--color-white)';
           this.contentColor = 'var(--color-gray-10)';
           break;
@@ -93,6 +96,7 @@ export class PtcJumbotron {
       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;
@@ -215,6 +219,24 @@ export class PtcJumbotron {
         "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,
@@ -302,6 +324,24 @@ export class PtcJumbotron {
         "reflect": false,
         "defaultValue": "false"
       },
+      "isBlogDetail": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-blog-detail",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "playButtonTitle": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/ptc-nav-skip-to-content/ptc-nav-skip-to-content.css

@@ -0,0 +1,82 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
+  word-break: break-word;
+  hyphens: manual;
+  -webkit-hyphens: manual;
+  -moz-hyphens: manual;
+  -ms-hyphens: manual;
+}
+@supports (hyphenate-limit-chars: 12 3 3) {
+  h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    /* For Safari */
+    -webkit-hyphenate-limit-after: 3;
+    /* For Safari */
+    hyphenate-limit-chars: 12 3 3;
+    hyphenate-limit-lines: 2;
+    hyphenate-limit-last: always;
+    hyphenate-limit-zone: 6%;
+    -webkit-hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+    -webkit-hyphenate-limit-chars: 12 3 3;
+    -webkit-hyphenate-limit-lines: 2;
+    -moz-hyphens: auto;
+    -moz-hyphenate-limit-chars: 12 3 3;
+    -moz-hyphenate-limit-lines: 2;
+    -ms-hyphens: auto;
+    -ms-hyphenate-limit-chars: 12 3 3;
+    -ms-hyphenate-limit-lines: 2;
+  }
+}
+
+:host {
+  display: block;
+}
+:host .skip-link {
+  position: fixed;
+  top: -200px;
+}
+:host .skip-link:focus {
+  top: 0;
+  display: block;
+  padding: 8px 12px;
+  text-align: center;
+  margin: 8px;
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid #003DD6;
+  background: #FFF;
+  z-index: 99999;
+  box-shadow: var(--ptc-shadow-medium);
+  text-decoration: none;
+  color: var(--color-gray-10);
+  font-family: var(--ptc-font-latin);
+  font-size: var(--ptc-font-size-x-small);
+  font-style: normal;
+  font-weight: var(--ptc-font-weight-bold);
+  line-height: var(--ptc-line-height-p);
+}

package/dist/collection/components/ptc-nav-skip-to-content/ptc-nav-skip-to-content.js

@@ -0,0 +1,74 @@
+import { Host, h } from '@stencil/core';
+export class PtcNavSkipToContent {
+  constructor() {
+    this.hideOnScroll = () => {
+      var _a, _b;
+      let skipLink = (_b = (_a = this.hostEle) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('a.skip-link');
+      skipLink === null || skipLink === void 0 ? void 0 : skipLink.blur();
+    };
+    this.componentWillLoad = () => {
+      window.addEventListener('scroll', this.hideOnScroll);
+    };
+    this.disconnectedCallback = () => {
+      window.removeEventListener('scroll', this.hideOnScroll);
+    };
+    this.buttonText = "Skip To Main Content";
+    this.sectionId = "";
+  }
+  render() {
+    return (h(Host, null, h("slot", null), h("a", { tabindex: 0, class: "skip-link", href: `#${this.sectionId}` }, this.buttonText)));
+  }
+  static get is() { return "ptc-nav-skip-to-content"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-nav-skip-to-content.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-nav-skip-to-content.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "buttonText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "button-text",
+        "reflect": false,
+        "defaultValue": "\"Skip To Main Content\""
+      },
+      "sectionId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "section-id",
+        "reflect": false,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get elementRef() { return "hostEle"; }
+}

package/dist/collection/components/ptc-news/ptc-news.css

@@ -68,28 +68,11 @@ ptc-link, ptc-square-card,
   line-height: var(--ptc-line-height-densest);
   display: inline-block;
 }
-:host .news-secondary-title {
-  margin: 0 0 20px 0;
-  font-size: var(--ptc-font-size-medium);
-  color: var(--color-gray-10);
-}
-@media only screen and (min-width: 768px) {
-  :host .news-secondary-title {
-    font-size: var(--ptc-font-size-large);
-  }
-}
 :host .news-date {
   margin-bottom: 20px;
   display: inline-block;
   font-size: var(--ptc-font-size-small);
 }
-:host .news-summary {
-  font-size: var(--ptc-font-size-medium);
-  color: var(--color-gray-10);
-  font-weight: var(--ptc-font-weight-medium);
-  line-height: var(--ptc-line-height-normal);
-  margin: 0 0 20px 0;
-}
 :host .news-content {
   padding-top: var(--ptc-element-spacing-08);
 }

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

@@ -2,15 +2,13 @@ import { Host, h } from '@stencil/core';
 export class PtcNews {
   constructor() {
     this.newsTag = undefined;
-    this.newsSecondaryTitle = undefined;
     this.newsDate = undefined;
-    this.newsSummary = undefined;
     this.newsImage = undefined;
     this.newsImageAlt = undefined;
     this.newsDownloadUrl = undefined;
   }
   render() {
-    return (h(Host, null, h("div", { class: "news-container" }, this.newsTag && h("span", { class: "news-tag" }, this.newsTag), h("slot", { name: "news-title" }), this.newsSecondaryTitle && h("h2", { class: "news-secondary-title", innerHTML: this.newsSecondaryTitle }), this.newsDate && h("span", { class: "news-date" }, this.newsDate), this.newsSummary && h("h2", { class: "news-summary", innerHTML: this.newsSummary }), this.getArticleImage(), h("div", { class: "news-content" }, h("slot", { name: "share-icons" }), h("slot", null)))));
+    return (h(Host, null, h("div", { class: "news-container" }, this.newsTag && h("span", { class: "news-tag" }, this.newsTag), h("slot", { name: "news-title" }), h("slot", { name: "news-secondary-title" }), this.newsDate && h("span", { class: "news-date" }, this.newsDate), h("slot", { name: "news-summary" }), this.getArticleImage(), h("div", { class: "news-content" }, h("slot", { name: "share-icons" }), h("slot", null)))));
   }
   getArticleImage() {
     if (this.newsImage && this.newsDownloadUrl) {
@@ -51,23 +49,6 @@ export class PtcNews {
         "attribute": "news-tag",
         "reflect": false
       },
-      "newsSecondaryTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "News Secondary Title"
-        },
-        "attribute": "news-secondary-title",
-        "reflect": false
-      },
       "newsDate": {
         "type": "string",
         "mutable": false,
@@ -85,23 +66,6 @@ export class PtcNews {
         "attribute": "news-date",
         "reflect": false
       },
-      "newsSummary": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "News summary"
-        },
-        "attribute": "news-summary",
-        "reflect": false
-      },
       "newsImage": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/ptc-social-icons/ptc-social-icons.css

@@ -0,0 +1,73 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
+  word-break: break-word;
+  hyphens: manual;
+  -webkit-hyphens: manual;
+  -moz-hyphens: manual;
+  -ms-hyphens: manual;
+}
+@supports (hyphenate-limit-chars: 12 3 3) {
+  h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    /* For Safari */
+    -webkit-hyphenate-limit-after: 3;
+    /* For Safari */
+    hyphenate-limit-chars: 12 3 3;
+    hyphenate-limit-lines: 2;
+    hyphenate-limit-last: always;
+    hyphenate-limit-zone: 6%;
+    -webkit-hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+    -webkit-hyphenate-limit-chars: 12 3 3;
+    -webkit-hyphenate-limit-lines: 2;
+    -moz-hyphens: auto;
+    -moz-hyphenate-limit-chars: 12 3 3;
+    -moz-hyphenate-limit-lines: 2;
+    -ms-hyphens: auto;
+    -ms-hyphenate-limit-chars: 12 3 3;
+    -ms-hyphenate-limit-lines: 2;
+  }
+}
+
+:host {
+  display: block;
+  height: max-content;
+}
+:host div {
+  display: flex;
+  gap: 16px;
+}
+:host div a {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  background-color: var(--color-gray-10);
+}

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

@@ -0,0 +1,121 @@
+import { Host, h } from '@stencil/core';
+import facebookSVG from '../../media/svg-imgs/facebook.svg';
+import linkedinSVG from '../../media/svg-imgs/linkedin.svg';
+import xSVG from '../../media/svg-imgs/x.svg';
+import emailSVG from '../../media/svg-imgs/email.svg';
+export class PtcSocialIcons {
+  constructor() {
+    this.componentWillLoad = () => { };
+    this.facebookUrl = undefined;
+    this.linkedinUrl = undefined;
+    this.xUrl = undefined;
+    this.emailTo = undefined;
+    this.target = '_blank';
+  }
+  render() {
+    return (h(Host, null, h("slot", null), h("div", null, this.facebookUrl && h("a", { href: this.facebookUrl, title: 'Facebook', innerHTML: facebookSVG, target: this.target }), this.linkedinUrl && h("a", { href: this.linkedinUrl, title: 'LinkedIn', innerHTML: linkedinSVG, target: this.target }), this.xUrl && h("a", { href: this.xUrl, title: 'X', innerHTML: xSVG, target: this.target }), this.emailTo && h("a", { href: `mailto:${this.emailTo}`, title: 'Email', innerHTML: emailSVG, target: this.target }))));
+  }
+  static get is() { return "ptc-social-icons"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-social-icons.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-social-icons.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "facebookUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "facebook-url",
+        "reflect": false
+      },
+      "linkedinUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "linkedin-url",
+        "reflect": false
+      },
+      "xUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "x-url",
+        "reflect": false
+      },
+      "emailTo": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "email-to",
+        "reflect": false
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "target",
+        "reflect": false,
+        "defaultValue": "'_blank'"
+      }
+    };
+  }
+  static get elementRef() { return "hostEle"; }
+}

package/dist/collection/media/svg-imgs/email.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewBox="0 0 18 12" fill="none">
+    <path d="M0.299866 0L9.07001 6.74679L17.4921 0H0.299866Z" fill="white"/>
+    <path d="M-0.00482178 1.4265V12L17.967 11.8667V1.25317L9.05766 8.34663L-0.00482178 1.4265Z" fill="white"/>
+</svg>

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

@@ -14,6 +14,18 @@ export const AuthorListingExample: {
   new (): AuthorListingExample;
 };
 
+interface BlogDetailContent extends Components.BlogDetailContent, HTMLElement {}
+export const BlogDetailContent: {
+  prototype: BlogDetailContent;
+  new (): BlogDetailContent;
+};
+
+interface BlogDetailLayout extends Components.BlogDetailLayout, HTMLElement {}
+export const BlogDetailLayout: {
+  prototype: BlogDetailLayout;
+  new (): BlogDetailLayout;
+};
+
 interface BlogsSearchSection extends Components.BlogsSearchSection, HTMLElement {}
 export const BlogsSearchSection: {
   prototype: BlogsSearchSection;
@@ -506,6 +518,12 @@ export const PtcNavPills: {
   new (): PtcNavPills;
 };
 
+interface PtcNavSkipToContent extends Components.PtcNavSkipToContent, HTMLElement {}
+export const PtcNavSkipToContent: {
+  prototype: PtcNavSkipToContent;
+  new (): PtcNavSkipToContent;
+};
+
 interface PtcNavSlider extends Components.PtcNavSlider, HTMLElement {}
 export const PtcNavSlider: {
   prototype: PtcNavSlider;
@@ -746,6 +764,12 @@ export const PtcSlitCard: {
   new (): PtcSlitCard;
 };
 
+interface PtcSocialIcons extends Components.PtcSocialIcons, HTMLElement {}
+export const PtcSocialIcons: {
+  prototype: PtcSocialIcons;
+  new (): PtcSocialIcons;
+};
+
 interface PtcSocialIconsFooter extends Components.PtcSocialIconsFooter, HTMLElement {}
 export const PtcSocialIconsFooter: {
   prototype: PtcSocialIconsFooter;