@ptcwebops/ptcw-design 0.3.3 → 0.3.5

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

@@ -0,0 +1,252 @@
+import { Component, Element, Host, Prop, State, h, Event } from '@stencil/core';
+export class PtcModal {
+  constructor() {
+    /**
+     * Sets if popup should close if click on outside
+     */
+    this.size = 'sm';
+    /**
+     * Set whether or not to display modal
+     */
+    this.show = false;
+    /**
+     * Sets if popup should overlay
+     */
+    this.overlay = true;
+    /**
+     * Sets if popup should close if click on outside
+     */
+    this.closeOnBlur = false;
+  }
+  fireOnClosed(modal) {
+    this.closed.emit(modal);
+  }
+  fireOnOpened(modal) {
+    this.opened.emit(modal);
+  }
+  componentWillLoad() {
+    let body = document.querySelector('body');
+    this.bodyOverflowSetting = {
+      //overflow: body.style['overflow'],
+      overflowY: body.style['overflowY'],
+      overflowX: body.style['overflowX'],
+    };
+  }
+  componentWillRender() {
+    let body = document.querySelector('body');
+    if (body) {
+      if (this.show) {
+        //body.style['overflow'] = 'hidden';
+        body.style['overflowY'] = 'scroll';
+        body.style['overflowX'] = 'hidden';
+      }
+      else {
+        //body.style['overflow'] = this.bodyOverflowSetting.overflow;
+        body.style['overflowY'] = this.bodyOverflowSetting.overflowY;
+        body.style['overflowX'] = this.bodyOverflowSetting.overflowX;
+      }
+    }
+  }
+  componentDidLoad() {
+    if (this.show) {
+      this.fireOnOpened(this);
+    }
+  }
+  componentDidUpdate() {
+    if (this.show) {
+      this.fireOnOpened(this);
+    }
+    else {
+      this.fireOnClosed(this);
+    }
+  }
+  resizeIframe(e) {
+    let iFrame = e.target;
+    setTimeout(() => {
+      try {
+        iFrame.height = `${iFrame.contentDocument.body.scrollHeight}px`;
+      }
+      catch (error) {
+        console.log(error);
+        iFrame.height = '616px'; //default
+        iFrame.removeAttribute('scrolling');
+      }
+      iFrame.classList.add('ready');
+    }, 50);
+  }
+  close() {
+    this.show = false;
+  }
+  render() {
+    let content;
+    let overlay;
+    let type = this.iframeUrl ? 'frame' : 'html';
+    if (this.iframeUrl) {
+      content = (h("iframe", { src: this.iframeUrl, frameBorder: 0, allowFullScreen: false, height: "100%", width: "100%", scrolling: "no", onLoad: this.resizeIframe }));
+    }
+    else {
+      content = (h("slot", null));
+    }
+    if (this.overlay) {
+      if (this.closeOnBlur) {
+        overlay = h("div", { class: "overlay", onClick: (_) => this.close() });
+      }
+      else {
+        overlay = h("div", { class: "overlay" });
+      }
+    }
+    return (h(Host, null,
+      h("div", { class: `wrapper ${this.show ? "show" : "hide"}` },
+        overlay,
+        h("div", { class: `modal-popup ${this.size} ${type}` },
+          h("div", { class: "close" },
+            h("a", { href: "#", onClick: (_) => this.close() },
+              h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" },
+                h("path", { d: "M1 1L13 13", stroke: "black" }),
+                h("path", { d: "M13 1L1 13", stroke: "black" })))),
+          h("div", { class: "modal-body" }, content)))));
+  }
+  static get is() { return "ptc-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-modal.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-modal.css"]
+  }; }
+  static get properties() { return {
+    "iframeUrl": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set url for content iframe to load if false will load slot element"
+      },
+      "attribute": "iframe-url",
+      "reflect": false
+    },
+    "size": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "'sm' | 'md' | 'lg' | 'xl'",
+        "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Sets if popup should close if click on outside"
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'sm'"
+    },
+    "show": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Set whether or not to display modal"
+      },
+      "attribute": "show",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "overlay": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Sets if popup should overlay"
+      },
+      "attribute": "overlay",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "closeOnBlur": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Sets if popup should close if click on outside"
+      },
+      "attribute": "close-on-blur",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "overlayHeight": {},
+    "bodyOverflowSetting": {}
+  }; }
+  static get events() { return [{
+      "method": "closed",
+      "name": "closed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event for modal popup closed"
+      },
+      "complexType": {
+        "original": "PtcModal",
+        "resolved": "PtcModal",
+        "references": {
+          "PtcModal": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "opened",
+      "name": "opened",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event for modal popup opened"
+      },
+      "complexType": {
+        "original": "PtcModal",
+        "resolved": "PtcModal",
+        "references": {
+          "PtcModal": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}

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

@@ -23,22 +23,23 @@
   background: linear-gradient(180deg, rgba(0, 137, 11, 0.2) 0%, #00890B 100%);
 }
 
-:host(.black-1-sm) {
-  background: linear-gradient(270deg, rgba(32, 38, 42, 0) 33.33%, #20262A 100%);
+:host(.black-1) {
+  background: linear-gradient(270deg, rgba(32, 38, 42, 0.32) 33.33%, #20262A 100%);
 }
 
-:host(.black-2-sm) {
+:host(.black-2) {
   background: linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, #20262A 100%);
 }
 
-:host(.black-1-xs) {
-  background: linear-gradient(270deg, rgba(32, 38, 42, 0.32) 33.33%, #20262A 100%);
-}
+@media screen and (min-width: 768px) {
+  :host(.black-1) {
+    background: linear-gradient(270deg, rgba(32, 38, 42, 0) 33.33%, #20262A 100%);
+  }
 
-:host(.black-2-xs) {
-  background: linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, #20262A 100%);
+  :host(.black-2) {
+    background: linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, #20262A 100%);
+  }
 }
-
 :host(.black-3) {
   background: linear-gradient(180deg, #20262A 0%, rgba(32, 38, 42, 0.55) 100%);
 }

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

@@ -30,8 +30,8 @@ export class PtcOverlay {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'blue' | 'red' | 'orange' | 'green' | 'black-1-xs' | 'black-2-xs' | 'black-1-sm' | 'black-2-sm' | 'black-3' | 'slate-grey'",
-        "resolved": "\"black-1-sm\" | \"black-1-xs\" | \"black-2-sm\" | \"black-2-xs\" | \"black-3\" | \"blue\" | \"green\" | \"orange\" | \"red\" | \"slate-grey\"",
+        "original": "'blue' | 'red' | 'orange' | 'green' | 'black-1' | 'black-2' | 'black-3' | 'slate-grey'",
+        "resolved": "\"black-1\" | \"black-2\" | \"black-3\" | \"blue\" | \"green\" | \"orange\" | \"red\" | \"slate-grey\"",
         "references": {}
       },
       "required": false,

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

@@ -74,29 +74,61 @@ p.margin-flush {
   margin-top: 0;
   margin-bottom: 0;
 }
+p.margin-top-1 {
+  margin-top: var(--ptc-element-spacing-01);
+  margin-bottom: 0;
+}
+p.margin-top-2 {
+  margin-top: var(--ptc-element-spacing-02);
+  margin-bottom: 0;
+}
 p.margin-top-3 {
   margin-top: var(--ptc-element-spacing-03);
+  margin-bottom: 0;
 }
 p.margin-top-4 {
   margin-top: var(--ptc-element-spacing-04);
+  margin-bottom: 0;
 }
 p.margin-top-5 {
   margin-top: var(--ptc-element-spacing-05);
+  margin-bottom: 0;
 }
 p.margin-top-6 {
   margin-top: var(--ptc-element-spacing-06);
+  margin-bottom: 0;
+}
+p.margin-bottom-1 {
+  margin-bottom: var(--ptc-element-spacing-01);
+  margin-top: 0;
+}
+p.margin-bottom-2 {
+  margin-bottom: var(--ptc-element-spacing-02);
+  margin-top: 0;
 }
 p.margin-bottom-3 {
   margin-bottom: var(--ptc-element-spacing-03);
+  margin-top: 0;
 }
 p.margin-bottom-4 {
   margin-bottom: var(--ptc-element-spacing-04);
+  margin-top: 0;
 }
 p.margin-bottom-5 {
   margin-bottom: var(--ptc-element-spacing-05);
+  margin-top: 0;
 }
 p.margin-bottom-6 {
   margin-bottom: var(--ptc-element-spacing-06);
+  margin-top: 0;
+}
+p.margin-1 {
+  margin-top: var(--ptc-element-spacing-01);
+  margin-bottom: var(--ptc-element-spacing-01);
+}
+p.margin-2 {
+  margin-top: var(--ptc-element-spacing-02);
+  margin-bottom: var(--ptc-element-spacing-02);
 }
 p.margin-3 {
   margin-top: var(--ptc-element-spacing-03);
@@ -123,6 +155,9 @@ p.line-height-18 {
 p.line-height-19 {
   line-height: var(--ptc-line-height-19);
 }
+p.line-height-23 {
+  line-height: 23px;
+}
 p.line-height-denser {
   line-height: var(--ptc-line-height-denser);
 }

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

@@ -122,8 +122,8 @@ export class PtcPara {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'line-height-17' | 'line-height-18' | 'line-height-19' | 'line-height-denser' | 'line-height-dense' | 'line-height-normal' | 'line-height-loose' | 'line-height-looser'",
-        "resolved": "\"line-height-17\" | \"line-height-18\" | \"line-height-19\" | \"line-height-dense\" | \"line-height-denser\" | \"line-height-loose\" | \"line-height-looser\" | \"line-height-normal\"",
+        "original": "'line-height-17' | 'line-height-18' | 'line-height-19' | 'line-heigth-23' | 'line-height-denser' | 'line-height-dense' | 'line-height-normal' | 'line-height-loose' | 'line-height-looser'",
+        "resolved": "\"line-height-17\" | \"line-height-18\" | \"line-height-19\" | \"line-height-dense\" | \"line-height-denser\" | \"line-height-loose\" | \"line-height-looser\" | \"line-height-normal\" | \"line-heigth-23\"",
         "references": {}
       },
       "required": false,
@@ -140,8 +140,8 @@ export class PtcPara {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'margin-flush' | 'margin-top-3' | 'margin-top-4' | 'margin-top-5' | 'margin-top-6' | 'margin-bottom-3' | 'margin-bottom-4' | 'margin-bottom-5' | 'margin-bottom-6'| 'margin-3' | 'margin-4' | 'margin-5' | 'margin-6'",
-        "resolved": "\"margin-3\" | \"margin-4\" | \"margin-5\" | \"margin-6\" | \"margin-bottom-3\" | \"margin-bottom-4\" | \"margin-bottom-5\" | \"margin-bottom-6\" | \"margin-flush\" | \"margin-top-3\" | \"margin-top-4\" | \"margin-top-5\" | \"margin-top-6\"",
+        "original": "'margin-flush' | 'maring-top-1' | 'margin-top-2' | 'margin-top-3' | 'margin-top-4' | 'margin-top-5' | 'margin-top-6' | 'margin-bottom-1' | 'margin-bottom-2' | 'margin-bottom-3' | 'margin-bottom-4' | 'margin-bottom-5' | 'margin-bottom-6'| 'margin-1' | 'margin-2' | 'margin-3' | 'margin-4' | 'margin-5' | 'margin-6'",
+        "resolved": "\"margin-1\" | \"margin-2\" | \"margin-3\" | \"margin-4\" | \"margin-5\" | \"margin-6\" | \"margin-bottom-1\" | \"margin-bottom-2\" | \"margin-bottom-3\" | \"margin-bottom-4\" | \"margin-bottom-5\" | \"margin-bottom-6\" | \"margin-flush\" | \"margin-top-2\" | \"margin-top-3\" | \"margin-top-4\" | \"margin-top-5\" | \"margin-top-6\" | \"maring-top-1\"",
         "references": {}
       },
       "required": false,

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

@@ -0,0 +1,19 @@
+:host(.inline-block) {
+  display: inline-block;
+}
+
+:host(.block) {
+  display: block;
+}
+
+:host(.inline) {
+  display: inline;
+}
+
+:host(.flex) {
+  display: flex;
+}
+
+:host(.ptc-social-share) {
+  cursor: pointer;
+}

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

@@ -0,0 +1,196 @@
+import { Component, Host, h, Prop, Element } from '@stencil/core';
+export class PtcSocialShare {
+  constructor() {
+    this.display = "inline-block";
+    this.shareType = 'twitter';
+    /**
+     * Optional - source for linkedin
+     */
+    this.source = '';
+    /**
+     * Email recipient.
+     * If you want to use mail share, you need to use this property
+     */
+    this.recipient = '';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap },
+      h("div", { onClick: () => this.share() },
+        this.shareType == 'mail' ? h("icon-asset", { type: "ptc", size: "x-large", name: "plm-mail", color: "white" }) : null,
+        this.shareType == 'linkedin' ? h("icon-asset", { type: "ptc", size: "x-large", name: "plm-linkedin", color: "white" }) : null,
+        this.shareType == 'twitter' ? h("icon-asset", { type: "ptc", size: "x-large", name: "plm-twitter", color: "white" }) : null,
+        this.shareType == 'facebook' ? h("icon-asset", { type: "ptc", size: "x-large", name: "plm-fb", color: "white" }) : null,
+        this.shareType == 'share-api' ? h("icon-asset", { type: "solid", size: "x-large", name: "share-square", color: "white" }) : null)));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-social-share']: true,
+      [this.display]: true
+    };
+  }
+  share() {
+    if (this.shareType == 'twitter') {
+      window.open(`https://twitter.com/share?text=${this.text}&url=${this.url}`);
+    }
+    if (this.shareType == 'facebook') {
+      window.open(`https://www.facebook.com/sharer/sharer.php?u=${this.url}`);
+    }
+    if (this.shareType == 'linkedin') {
+      window.open(`https://www.linkedin.com/shareArticle?mini=true&url=${this.url}&title=${this.shareTitle}&summary=${this.text}&source=${this.source}`);
+    }
+    if (this.shareType == 'mail') {
+      window.open(`mailto:${this.recipient}?subject=${this.text}&body=${this.url}`);
+    }
+    if (this.shareType == 'share-api') {
+      if (navigator.share) {
+        navigator
+          .share({
+          title: this.shareTitle,
+          text: this.text,
+          url: this.url,
+        })
+          .then(() => console.log('Successful share'))
+          .catch(error => console.log('Error sharing', error));
+      }
+      else {
+        // fallback to sharing to twitter
+        window.open(`http://twitter.com/share?text=${this.text}&url=${this.url}`);
+      }
+    }
+  }
+  static get is() { return "ptc-social-share"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-social-share.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-social-share.css"]
+  }; }
+  static get properties() { return {
+    "display": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'inline-block' | 'block' | 'inline' | 'flex'",
+        "resolved": "\"block\" | \"flex\" | \"inline\" | \"inline-block\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "display",
+      "reflect": false,
+      "defaultValue": "\"inline-block\""
+    },
+    "shareType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'mail' | 'twitter' | 'linkedin' | 'facebook' | 'share-api'",
+        "resolved": "\"facebook\" | \"linkedin\" | \"mail\" | \"share-api\" | \"twitter\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "share-type",
+      "reflect": false,
+      "defaultValue": "'twitter'"
+    },
+    "shareTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "share-title",
+      "reflect": false
+    },
+    "text": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "text",
+      "reflect": false
+    },
+    "url": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "url",
+      "reflect": false
+    },
+    "source": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Optional - source for linkedin"
+      },
+      "attribute": "source",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "recipient": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Email recipient.\nIf you want to use mail share, you need to use this property"
+      },
+      "attribute": "recipient",
+      "reflect": false,
+      "defaultValue": "''"
+    }
+  }; }
+  static get elementRef() { return "el"; }
+}

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

@@ -246,6 +246,11 @@
 	height: 120px;
 	min-height: 120px;
 }
+:host(.ptc-spacer-vertical.space-128){
+	width: 100%;
+	height: 128px;
+	min-height: 128px;
+}
 
 :host(.ptc-spacer-xx-small) {
 	display: none

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

@@ -63,8 +63,8 @@ export class PtcSpacer {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'large' | 'medium' | 'small' | 'x-large' | 'x-small' | 'xx-large' | 'xx-small' | 'xxx-large' | 'xxxx-large' | 'space-144' | 'space-120'",
-        "resolved": "\"large\" | \"medium\" | \"small\" | \"space-120\" | \"space-144\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxxx-large\"",
+        "original": "'large' | 'medium' | 'small' | 'x-large' | 'x-small' | 'xx-large' | 'xx-small' | 'xxx-large' | 'xxxx-large' | 'space-144' | 'space-120' | 'space-128'",
+        "resolved": "\"large\" | \"medium\" | \"small\" | \"space-120\" | \"space-128\" | \"space-144\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxxx-large\"",
         "references": {}
       },
       "required": false,

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

@@ -88,19 +88,19 @@ div.is-plm-hub h3 {
   margin-inline-end: 0px;
 }
 div.is-plm-hub h1 {
-  font-weight: var(--ptc-font-weight-bold);
+  font-weight: var(--ptc-font-weight-extrabold);
   font-size: 50px;
   line-height: 59px;
   color: var(--color-white);
 }
 div.is-plm-hub h2 {
-  font-weight: var(--ptc-font-weight-bold);
+  font-weight: var(--ptc-font-weight-extrabold);
   font-size: var(--ptc-font-size-x-large);
   line-height: 28px;
   color: var(--color-white);
 }
 div.is-plm-hub h3 {
-  font-weight: var(--ptc-font-weight-bold);
+  font-weight: var(--ptc-font-weight-extrabold);
   font-size: var(--ptc-font-size-large);
   line-height: 23px;
   color: var(--color-white);
@@ -173,4 +173,25 @@ div.orange h1, div.orange h2, div.orange h3 {
 }
 div.slate-grey h1, div.slate-grey h2, div.slate-grey h3 {
   text-shadow: 0px 0px 12px var(--color-grey-07);
+}
+div.w-3 h1, div.w-3 h2, div.w-3 h3 {
+  font-weight: var(--ptc-font-weight-thin);
+}
+div.w-4 h1, div.w-4 h2, div.w-4 h3 {
+  font-weight: var(--ptc-font-weight-regular);
+}
+div.w-5 h1, div.w-5 h2, div.w-5 h3 {
+  font-weight: var(--ptc-font-weight-medium);
+}
+div.w-6 h1, div.w-6 h2, div.w-6 h3 {
+  font-weight: var(--ptc-font-weight-semibold);
+}
+div.w-7 h1, div.w-7 h2, div.w-7 h3 {
+  font-weight: var(--ptc-font-weight-bold);
+}
+div.w-8 h1, div.w-8 h2, div.w-8 h3 {
+  font-weight: var(--ptc-font-weight-extrabold);
+}
+div.w-9 h1, div.w-9 h2, div.w-9 h3 {
+  font-weight: var(--ptc-font-weight-black);
 }