@ptcwebops/ptcw-design 3.8.2 → 3.8.4

package/dist/collection/components/ptc-office-locations/ptc-office-locations.css

@@ -0,0 +1,376 @@
+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;
+}
+:host .country-list {
+  z-index: 1;
+  min-width: 278px;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: max-content;
+  margin-top: 8px;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  border-radius: var(--ptc-border-radius-standard);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+  background-color: var(--color-white);
+  border-top: none;
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 0.25s ease-out;
+}
+:host .country-list ul {
+  list-style: none;
+  margin: 0;
+  padding: 24px 24px 8px 24px;
+  border-bottom: 1px solid var(--color-gray-02);
+}
+:host .country-list li {
+  margin-bottom: 1rem;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+:host .country-list li label {
+  display: block;
+  position: relative;
+  padding: 0 0 4px 32px;
+  font-weight: var(--ptc-font-weight-medium);
+  color: var(--color-gray-10);
+  cursor: pointer;
+}
+:host .country-list li label .checkmark {
+  background-color: var(--color-white);
+  border: 1px solid var(--color-gray-12);
+  border-radius: var(--ptc-border-radius-standard);
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  height: 20px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 20px;
+}
+:host .country-list li label .checkmark::after {
+  background-image: url('data:image/svg+xml,<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 4L5.5 8L12.5 1" stroke="white" stroke-width="2"/></svg>');
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: 75% 100%;
+  content: "";
+  display: none;
+  height: 20px;
+  left: -1px;
+  position: absolute;
+  top: -1px;
+  width: 20px;
+}
+:host .country-list li label input[type=checkbox] {
+  cursor: pointer;
+  height: 0;
+  opacity: 0;
+  position: absolute;
+  width: 0;
+  margin: 0;
+}
+:host .country-list li label input:checked ~ .checkmark {
+  background-color: #1f2024;
+}
+:host .country-list li label input:checked ~ .checkmark::after {
+  display: block;
+}
+:host .country-list li label:hover .checkmark {
+  background-color: var(--color-gray-02);
+}
+:host .country-list .country-list-footer {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 1rem;
+}
+:host .country-list.country-list-mobile {
+  display: block;
+  position: relative;
+  overflow: auto;
+  max-height: 100%;
+  width: 100%;
+  box-shadow: none;
+  margin: 0;
+  padding: 24px 32px;
+  border-top: 1px solid var(--color-gray-02);
+}
+:host .country-list.country-list-mobile .continent-name {
+  color: var(--color-gray-10);
+  font-size: var(--ptc-font-size-large);
+  font-weight: var(--ptc-font-weight-bold);
+  margin-bottom: 1rem;
+}
+:host .country-list.country-list-mobile ul {
+  border: none;
+  padding: 16px 0 0 0;
+}
+:host .region-list {
+  display: flex;
+  justify-content: center;
+  height: 100%;
+}
+:host .region-list .region {
+  position: relative;
+  height: 100%;
+}
+:host .region-list .region .region-btn {
+  margin: 0 0.5rem;
+  height: 100%;
+  display: flex;
+  cursor: pointer;
+  position: relative;
+}
+@media only screen and (min-width: 1200px) {
+  :host .region-list .region .region-btn {
+    margin: 0 1rem;
+  }
+}
+:host .region-list .region .region-btn .continent-arrow,
+:host .region-list .region .region-btn .continent-name {
+  background-color: var(--color-gray-02);
+  transition: background-color ease-out 250ms;
+  font-size: var(--ptc-font-size-x-small);
+  font-weight: var(--ptc-font-weight-semibold);
+  color: var(--color-gray-10);
+}
+:host .region-list .region .region-btn .continent-arrow:hover,
+:host .region-list .region .region-btn .continent-name:hover {
+  background-color: var(--color-gray-03);
+}
+:host .region-list .region .region-btn .continent-name {
+  display: flex;
+  border-top-left-radius: 270px;
+  border-bottom-left-radius: 270px;
+  align-items: center;
+  padding: 12px 8px 12px 16px;
+  border-right: 1px solid var(--color-gray-03);
+}
+@media only screen and (min-width: 1200px) {
+  :host .region-list .region .region-btn .continent-name {
+    padding: 12px 12px 12px 20px;
+  }
+}
+:host .region-list .region .region-btn .continent-arrow {
+  display: flex;
+  align-items: center;
+  border-top-right-radius: 270px;
+  border-bottom-right-radius: 270px;
+  padding: 12px 16px 12px 12px;
+}
+@media only screen and (min-width: 1200px) {
+  :host .region-list .region .region-btn .continent-arrow {
+    padding: 12px 18px 12px 12px;
+  }
+}
+:host .region-list .region .region-btn .continent-arrow svg {
+  transition: transform ease-out 250ms;
+}
+:host .region-list .region.active .country-list {
+  max-height: 800px;
+  /* Adjust height as needed */
+}
+:host .region-list .region.active .region-btn .continent-arrow svg {
+  transform: rotate(-180deg);
+}
+:host .region-list .region.selected .continent-arrow,
+:host .region-list .region.selected .continent-name {
+  background-color: var(--color-gray-12);
+  transition: background-color ease-out 250ms;
+  color: var(--color-white);
+}
+:host .region-list .region.selected .continent-arrow:hover,
+:host .region-list .region.selected .continent-name:hover {
+  background-color: var(--color-gray-12);
+  color: var(--color-white);
+}
+:host .region-list .region.selected .continent-arrow svg path {
+  stroke: var(--color-white);
+}
+:host .office-location-list-wrapper {
+  opacity: 1;
+  transition: opacity 0.25s ease-out;
+  margin-top: 2rem;
+}
+:host .office-location-list-wrapper.updating {
+  opacity: 0;
+}
+:host .office-location-list-wrapper .ol-list-bg {
+  background-color: var(--color-white);
+  display: grid;
+  align-content: flex-start;
+  padding: 16px;
+  column-gap: 16px;
+  row-gap: 16px;
+  grid-template-columns: 1fr;
+  overflow-y: auto;
+}
+@media only screen and (min-width: 768px) {
+  :host .office-location-list-wrapper .ol-list-bg {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  :host .office-location-list-wrapper .ol-list-bg {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+:host .office-location-list-wrapper .map-embed {
+  display: none;
+}
+:host .office-location-list-wrapper.showing-map {
+  display: flex;
+  flex-direction: row;
+  height: 56rem;
+  max-width: 1736rem;
+}
+:host .office-location-list-wrapper.showing-map .ol-list-bg {
+  width: 100%;
+  grid-template-columns: 1fr;
+}
+@media only screen and (min-width: 992px) {
+  :host .office-location-list-wrapper.showing-map .ol-list-bg {
+    width: 40%;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  :host .office-location-list-wrapper.showing-map .ol-list-bg {
+    width: 35%;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  :host .office-location-list-wrapper.showing-map .ol-list-bg {
+    width: 65%;
+    grid-template-columns: 1fr 1fr;
+  }
+}
+@media only screen and (min-width: 992px) {
+  :host .office-location-list-wrapper.showing-map .map-embed {
+    width: 60%;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  :host .office-location-list-wrapper.showing-map .map-embed {
+    width: 65%;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  :host .office-location-list-wrapper.showing-map .map-embed {
+    width: 35%;
+  }
+}
+:host .office-location-list-wrapper.showing-map .map-embed {
+  display: block;
+}
+:host .filter-cta {
+  background: var(--color-white);
+  border: 1px solid transparent;
+  border-radius: var(--ptc-border-radius-pill);
+  display: flex;
+  flex-direction: row;
+  margin: 0 auto;
+  padding: 12px 20px;
+  transition: border 0.25s ease-out;
+  font-weight: var(--ptc-font-weight-semibold);
+  font-size: var(--ptc-font-size-x-small);
+  color: var(--color-gray-10);
+}
+:host .filter-cta svg {
+  margin-right: 10px;
+}
+:host .filter-cta:hover {
+  border: 1px solid var(--color-gray-02);
+}
+:host .modal-footer {
+  display: flex;
+  justify-items: center;
+  justify-content: space-between;
+  padding: 0 1rem;
+}
+:host .map-btn {
+  margin: 0 0.5rem;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  background-color: var(--color-white);
+  padding: 9px 20px;
+  font-size: var(--ptc-font-size-x-small);
+  font-weight: var(--ptc-font-weight-semibold);
+  border-radius: var(--ptc-border-radius-pill);
+  color: var(--color-gray-10);
+  border: 1px solid transparent;
+  transition: border 0.25s ease-out;
+  height: 43px;
+  box-sizing: border-box;
+}
+@media only screen and (min-width: 1200px) {
+  :host .map-btn {
+    margin: 0 1rem;
+  }
+}
+:host .map-btn:hover {
+  border: 1px solid var(--color-gray-04);
+}
+:host .map-btn .map-icon {
+  margin-right: 10px;
+  min-height: 20px;
+}

package/dist/collection/components/ptc-office-locations/ptc-office-locations.js

@@ -0,0 +1,227 @@
+import { Host, h } from '@stencil/core';
+import filterSVG from '../../media/svg-imgs/filter.svg';
+import showMapSVG from '../../media/svg-imgs/show-map-icon.svg';
+import hideMapSVG from '../../media/svg-imgs/hide-map-icon.svg';
+export class PtcOfficeLocations {
+  constructor() {
+    this.locations = [];
+    this.regions = [];
+    this.openRegion = '';
+    this.isMobile = undefined;
+    this.address = undefined;
+    this.showMap = false;
+  }
+  handleResize() {
+    this.isMobile = window.innerWidth < 992;
+    if (this.isMobile) {
+      this.showMap = false;
+    }
+  }
+  handleAddressClicked(event) {
+    // CustomEvent's detail property contains the address
+    this.address = event.detail;
+    if (!this.isMobile) {
+      this.showMap = true;
+    }
+  }
+  componentWillLoad() {
+    this.isMobile = window.innerWidth < 992;
+    const officeCards = document.querySelectorAll('ptc-office-location-card');
+    officeCards.forEach((card, index) => {
+      const region = card.getAttribute('region');
+      const country = card.getAttribute('country');
+      if (region && country) {
+        this.locations.push({ id: index, region, country });
+      }
+    });
+    // Extract unique regions from locations array
+    const uniqueRegions = Array.from(new Set(this.locations.map(location => location.region)));
+    // Save unique regions to regions array
+    this.regions = uniqueRegions;
+    this.showFirstMap();
+  }
+  toggleCountryList(region) {
+    // Toggle open/close state for the clicked region
+    if (this.openRegion === region) {
+      // If the clicked region is already open, close it
+      this.openRegion = '';
+    }
+    else {
+      // Close any previously open region and open the clicked region
+      this.openRegion = region;
+    }
+  }
+  getCheckboxes(region) {
+    return this.hostEl.shadowRoot.querySelectorAll(`.country-list #region-list-${region.replace(/\s+/g, '')} input[type="checkbox"]`);
+  }
+  selectedCheckboxes() {
+    const selectedOptions = Array.from(this.hostEl.shadowRoot.querySelectorAll('.country-list input[type="checkbox"]:checked'))
+      .map((checkbox) => checkbox.value);
+    return selectedOptions;
+  }
+  updateOfficeList() {
+    const selectedOptions = this.selectedCheckboxes();
+    const officeCards = document.querySelectorAll('ptc-office-location-card');
+    officeCards.forEach((card) => {
+      const region = card.getAttribute('region');
+      const country = card.getAttribute('country');
+      // Hide show checboxes
+      if (selectedOptions.length > 0) {
+        if (selectedOptions.includes(region) || selectedOptions.includes(country)) {
+          card.style.display = "block";
+        }
+        else {
+          card.style.display = "none";
+        }
+      }
+      else {
+        card.style.display = "block";
+      }
+    });
+    this.showFirstMap();
+  }
+  applyFilter(region) {
+    this.updateOfficeList();
+    this.toggleCountryList(region);
+  }
+  clearFilter(region) {
+    const checkboxes = this.getCheckboxes(region);
+    const regionWrap = this.hostEl.shadowRoot.querySelector(`#region-wrap-${region.replace(/\s+/g, '')}`);
+    checkboxes.forEach((checkbox) => {
+      checkbox.checked = false;
+    });
+    regionWrap.classList.remove('selected');
+    this.updateOfficeList();
+    this.toggleCountryList(region);
+  }
+  updateCheckboxStatus(region, e) {
+    const regionWrap = this.hostEl.shadowRoot.querySelector(`#region-wrap-${region.replace(/\s+/g, '')}`);
+    const checkboxes = this.getCheckboxes(region);
+    const isAllRegionsCheckboxClicked = e.target.id === `all-regions-${region.replace(/\s+/g, '')}`;
+    let anyCheckboxSelected = false;
+    checkboxes.forEach((checkbox) => {
+      if (isAllRegionsCheckboxClicked) {
+        checkbox.checked = checkbox.classList.contains('all-region-label') ? e.target.checked : false;
+      }
+      else if (checkbox.classList.contains('all-region-label')) {
+        checkbox.checked = false;
+      }
+      if (checkbox.checked) {
+        anyCheckboxSelected = true;
+      }
+    });
+    regionWrap.classList.toggle('selected', anyCheckboxSelected);
+  }
+  updateSelectedClass(region) {
+    this.fadeInWrapper();
+    const regionWrap = this.hostEl.shadowRoot.querySelector(`#region-wrap-${region.replace(/\s+/g, '')}`);
+    const checkboxes = this.getCheckboxes(region);
+    let isAllRegionSelected;
+    checkboxes.forEach((checkbox) => {
+      if (!checkbox.classList.contains('all-region-label')) {
+        checkbox.checked = false;
+      }
+      if (checkbox.classList.contains('all-region-label')) {
+        checkbox.checked = !checkbox.checked;
+        isAllRegionSelected = checkbox.checked;
+      }
+    });
+    regionWrap.classList.toggle('selected', isAllRegionSelected);
+    this.updateOfficeList();
+    this.toggleCountryList('');
+  }
+  fadeInWrapper() {
+    const ele = this.hostEl.shadowRoot.querySelector('.office-location-list-wrapper');
+    ele.classList.add('updating');
+    // Listen for transitionend event to remove the class after the transition completes
+    ele.addEventListener('transitionend', () => {
+      ele.classList.remove('updating');
+    }, { once: true });
+  }
+  // mobile functions
+  openFilterModal() {
+    const modal = this.hostEl.shadowRoot.querySelector('ptc-modal');
+    modal.show = true;
+  }
+  clearFiltersMobile() {
+    const allChecboxes = this.hostEl.shadowRoot.querySelectorAll(`input[type=checkbox]`);
+    allChecboxes.forEach((checkbox) => {
+      checkbox.checked = false;
+    });
+    this.updateOfficeList();
+    const modal = this.hostEl.shadowRoot.querySelector('ptc-modal');
+    modal.show = false;
+  }
+  applyFilterMobile() {
+    this.updateOfficeList();
+    const modal = this.hostEl.shadowRoot.querySelector('ptc-modal');
+    modal.show = false;
+  }
+  renderCountrylist(region) {
+    return (h("ul", { id: 'region-list-' + region.replace(/\s+/g, '') }, h("li", null, h("label", { htmlFor: 'all-regions-' + region.replace(/\s+/g, '') }, "All Regions", h("input", { type: "checkbox", class: 'all-region-label', id: 'all-regions-' + region.replace(/\s+/g, ''), value: region, onChange: (e) => this.updateCheckboxStatus(region.replace(/\s+/g, ''), e) }), h("span", { class: 'checkmark' }))), this.locations
+      .filter(location => location.region === region)
+      .map(location => (h("li", { key: location.id }, h("label", { htmlFor: location.country }, location.country, h("input", { type: "checkbox", id: location.country, value: location.country, onChange: (e) => this.updateCheckboxStatus(region.replace(/\s+/g, ''), e) }), h("span", { class: 'checkmark' })))))));
+  }
+  toggleMap() {
+    this.showMap = !this.showMap;
+  }
+  showFirstMap() {
+    const nodeList = document.querySelectorAll('ptc-office-location-card');
+    const elementsArray = Array.from(nodeList);
+    const filteredElements = elementsArray.filter(element => {
+      return element.style.display === "" || element.style.display === 'block';
+    });
+    const firstMatchingElement = filteredElements.length > 0 ? filteredElements[0] : null;
+    this.address = firstMatchingElement.getAttribute('address');
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, null, !this.isMobile &&
+      h("div", { class: "region-list" }, this.regions.map(region => (h("div", { class: `region ${this.openRegion === region ? 'active' : ''}`, key: region.id, id: 'region-wrap-' + region.replace(/\s+/g, '') }, h("span", { class: "region-btn" }, h("span", { class: "continent-name", onClick: () => { this.updateSelectedClass(region.replace(/\s+/g, '')); } }, region), h("span", { class: "continent-arrow", onClick: () => this.toggleCountryList(region) }, h("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 1L5 5L9 1", stroke: "#40434A", "stroke-width": "2", "stroke-linecap": "round" })))), h("div", { class: `country-list` }, this.renderCountrylist(region), h("div", { class: "country-list-footer" }, h("ptc-button", { color: "ptc-tertiary", "link-title": "Clear", type: "button", size: "small", onClick: () => this.clearFilter(region), styles: 'button { border: none !important;} button:hover { background-color: transparent !important;} button:hover span{ text-decoration: underline !important}' }, "Clear"), h("ptc-button", { color: "ptc-secondary", "link-title": "Apply", type: "button", size: "small", onClick: () => this.applyFilter(region) }, "Apply")))))), h("span", { class: "map-btn", onClick: () => { this.toggleMap(); } }, h("span", { class: 'map-icon', innerHTML: this.showMap ? hideMapSVG : showMapSVG }), h("span", null, this.showMap ? 'Hide Map' : 'Show Map', " "))), this.isMobile &&
+      h("button", { class: "filter-cta", onClick: () => { this.openFilterModal(); } }, " ", h("span", { class: "svg-close", innerHTML: filterSVG }), "Filters"), this.isMobile &&
+      h("ptc-modal", { id: "modal-example", show: false, size: "lg", fixed: true, rounded: true, "show-header-footer": "true" }, h("div", { slot: "header" }, h("ptc-title", { type: 'h4', upperline: "no-upperline", "text-align": 'center', "title-margin": "margin-5" }, "Filters")), h("div", { slot: "footer", class: 'modal-footer' }, h("ptc-button", { color: "ptc-tertiary", "link-title": "Clear", type: "button", size: "small", onClick: () => { this.clearFiltersMobile(); }, styles: 'button { border: none !important;} button:hover { background-color: transparent !important;} button:hover span{ text-decoration: underline !important}' }, "Clear"), h("ptc-button", { color: "ptc-secondary", "link-title": "Apply", type: "button", size: "small", onClick: () => { this.applyFilterMobile(); } }, "Apply")), h("div", { slot: "body" }, h("div", { class: "filter-modal-body" }, this.regions.map(region => (h("div", { class: "country-list country-list-mobile", key: region.id, id: 'region-wrap-' + region.replace(/\s+/g, '') }, h("span", { class: "continent-name" }, region), this.renderCountrylist(region))))))), h("div", { class: classMap }, h("div", { class: `ol-list-bg ` }, h("slot", null)), !this.isMobile &&
+      h("div", { class: "map-embed" }, h("iframe", { frameborder: "0", referrerPolicy: "no-referrer-when-downgrade", width: '100%', height: '100%', style: { border: '0' }, allowfullScreen: true, src: `https://www.google.com/maps/embed/v1/place?key=AIzaSyATvSgSVv2hH0yXiKMcBYsF26j67d3oPLg&q=${this.address}` })))));
+  }
+  getCssClassMap() {
+    return {
+      ['office-location-list-wrapper']: true,
+      ['showing-map']: this.showMap
+    };
+  }
+  static get is() { return "ptc-office-locations"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-office-locations.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-office-locations.css"]
+    };
+  }
+  static get states() {
+    return {
+      "openRegion": {},
+      "isMobile": {},
+      "address": {},
+      "showMap": {}
+    };
+  }
+  static get elementRef() { return "hostEl"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "officeCardClicked",
+        "method": "handleAddressClicked",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/ptc-overlay/ptc-overlay.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-pagenation/ptc-pagenation.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-para/ptc-para.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-picture/ptc-picture.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-podcast-card/ptc-podcast-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 */