@ptcwebops/ptcw-design 3.8.2 → 3.8.4

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

@@ -9,7 +9,7 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link {
+ptc-link, ptc-square-card {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -28,7 +28,7 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link {
+ptc-link, ptc-square-card {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

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

@@ -9,7 +9,7 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link {
+ptc-link, ptc-square-card {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -28,7 +28,7 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link {
+ptc-link, ptc-square-card {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

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

@@ -9,7 +9,7 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link {
+ptc-link, ptc-square-card {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -28,7 +28,7 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link {
+ptc-link, ptc-square-card {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/ptc-media-card/ptc-media-card.css

@@ -9,7 +9,7 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link {
+ptc-link, ptc-square-card {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -28,7 +28,7 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link {
+ptc-link, ptc-square-card {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/ptc-minimized-nav/ptc-minimized-nav.css

@@ -9,7 +9,7 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link {
+ptc-link, ptc-square-card {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -28,7 +28,7 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link {
+ptc-link, ptc-square-card {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/ptc-mobile-select/ptc-mobile-select.css

@@ -174,7 +174,7 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link {
+ptc-link, ptc-square-card {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -193,7 +193,7 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link {
+ptc-link, ptc-square-card {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

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

@@ -9,7 +9,7 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link {
+ptc-link, ptc-square-card {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -28,7 +28,7 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link {
+ptc-link, ptc-square-card {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/ptc-modal-quiz/ptc-modal-quiz.css

@@ -9,7 +9,7 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link {
+ptc-link, ptc-square-card {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -28,7 +28,7 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link {
+ptc-link, ptc-square-card {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/ptc-nav-card/ptc-nav-card.css

@@ -9,7 +9,7 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link {
+ptc-link, ptc-square-card {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -28,7 +28,7 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link {
+ptc-link, ptc-square-card {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/ptc-nav-pills/ptc-nav-pills.css

@@ -9,7 +9,7 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link {
+ptc-link, ptc-square-card {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -28,7 +28,7 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link {
+ptc-link, ptc-square-card {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/ptc-nav-tile/ptc-nav-tile.css

@@ -9,7 +9,7 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link {
+ptc-link, ptc-square-card {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -28,7 +28,7 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link {
+ptc-link, ptc-square-card {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

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

@@ -9,7 +9,7 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link {
+ptc-link, ptc-square-card {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -28,7 +28,7 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link {
+ptc-link, ptc-square-card {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/ptc-office-location-card/ptc-office-location-card.css

@@ -0,0 +1,102 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link, ptc-square-card {
+  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 {
+    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;
+  position: relative;
+}
+:host .ofc-card-wrapper {
+  padding: 2rem;
+  border: 1px solid var(--color-gray-02);
+  cursor: pointer;
+  color: var(--color-gray-10);
+  height: 100%;
+  box-sizing: border-box;
+  border-radius: var(--ptc-border-radius-standard);
+}
+:host .ofc-card-wrapper:hover {
+  border-color: var(--color-gray-10);
+}
+:host .map-link,
+:host .contact-number {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  color: var(--color-gray-10);
+}
+:host .map-link a,
+:host .contact-number a {
+  color: #2bad56 !important;
+}
+:host .ofc-icon {
+  margin-right: 1rem;
+}
+:host .show-full-cta {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  font-size: var(--ptc-font-size-xx-small);
+  font-weight: var(--ptc-font-weight-medium);
+  line-height: var(--ptc-line-height-densest);
+  display: flex;
+}
+:host .show-full-cta span {
+  margin-left: 8px;
+}
+:host .ofc-title {
+  color: var(--color-gray-10);
+  font-size: var(--ptc-font-size-large);
+  font-weight: var(--ptc-font-weight-extrabold);
+  line-height: var(--ptc-line-height-densest);
+}

package/dist/collection/components/ptc-office-location-card/ptc-office-location-card.js

@@ -0,0 +1,169 @@
+import { Host, h } from '@stencil/core';
+import showMapSVG from '../../media/svg-imgs/show-map-icon.svg';
+import phone from '../../media/svg-imgs/phone.svg';
+import showAll from '../../media/svg-imgs/show-all.svg';
+export class PtcOfficeLocationCard {
+  constructor() {
+    this.region = undefined;
+    this.country = undefined;
+    this.address = undefined;
+    this.isContactEmpty = false;
+    this.officeName = undefined;
+    this.showFullAddressModal = false;
+  }
+  handleClick() {
+    // Emit the addressClicked event with the address as the detail
+    this.officeCardClicked.emit(this.address);
+  }
+  showFullAddress(event) {
+    event.stopPropagation();
+    const modal = this.hostElement.shadowRoot.querySelector('#show-full-add');
+    modal.show = true;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: 'ofc-card-wrapper', onClick: () => this.handleClick() }, this.showFullAddressModal &&
+      h("div", { class: 'show-full-cta', onClick: (e) => { this.showFullAddress(e); } }, "Show Full Address", h("span", { innerHTML: showAll })), h("div", { class: 'ofc-title' }, this.officeName), h("div", { class: 'map-link' }, h("span", { class: "ofc-icon", innerHTML: showMapSVG }), h("slot", { name: "map-link" })), h("div", { class: 'contact-number' }, !this.isContactEmpty &&
+      h("span", { class: "ofc-icon", innerHTML: phone }), h("slot", { name: "contact-number" })), h("slot", null)), this.showFullAddressModal &&
+      h("ptc-modal", { id: "show-full-add", show: false, size: "md", fixed: true, rounded: true, overlay: true, "keep-in-viewport": true, styles: ".modal-body{padding: 0 32px 32px 32px;box-sizing: border-box;}" }, h("div", { class: 'ofc-title' }, this.officeName), h("div", { class: 'map-link' }, h("span", { class: "ofc-icon", innerHTML: showMapSVG }), h("slot", { name: 'map-link-modal' })), h("div", { class: 'contact-number' }, !this.isContactEmpty &&
+        h("span", { class: "ofc-icon", innerHTML: phone }), h("slot", { name: 'contact-number-modal' })))));
+  }
+  static get is() { return "ptc-office-location-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-office-location-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-office-location-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "region": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "region",
+        "reflect": false
+      },
+      "country": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "country",
+        "reflect": false
+      },
+      "address": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "address",
+        "reflect": false
+      },
+      "isContactEmpty": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-contact-empty",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "officeName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "office-name",
+        "reflect": false
+      },
+      "showFullAddressModal": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-full-address-modal",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "officeCardClicked",
+        "name": "officeCardClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+}