@ptcwebops/ptcw-design 4.1.0 → 4.1.1

package/dist/collection/components/ptc-footer/ptc-footer-v2.css

@@ -0,0 +1,210 @@
+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;
+  }
+}
+
+ptc-footer {
+  display: block;
+  color: var(--color-white);
+  background-color: var(--color-gray-12);
+  position: relative;
+}
+ptc-footer ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+ptc-footer ul li a {
+  text-decoration: none;
+  color: var(--color-white);
+  border-bottom: 1px solid transparent;
+  transition: border-bottom-color var(--ptc-transition-medium) var(--ptc-ease-inout);
+}
+ptc-footer ul li a:hover {
+  color: var(--color-white) !important;
+  border-bottom-color: var(--color-white);
+}
+ptc-footer ul li a:visited {
+  color: var(--color-gray-4);
+  border-bottom-color: var(--color-gray-4);
+}
+ptc-footer .gap-20 {
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+}
+ptc-footer .footer-bg-wrap {
+  position: relative;
+}
+ptc-footer .footer-bg {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  z-index: 0;
+  opacity: 0.4;
+}
+ptc-footer .footer-top {
+  padding-top: 48px;
+  padding-bottom: 48px;
+  position: relative;
+  z-index: 1;
+  max-width: 500px;
+  margin: auto;
+}
+@media only screen and (min-width: 992px) {
+  ptc-footer .footer-top {
+    padding-top: var(--ptc-layout-spacing-06);
+    padding-bottom: var(--ptc-layout-spacing-06);
+    max-width: 1136px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  ptc-footer .footer-top {
+    padding-bottom: var(--ptc-layout-spacing-04);
+  }
+}
+@media only screen and (min-width: 1440px) {
+  ptc-footer .footer-top {
+    max-width: 1200px;
+  }
+}
+ptc-footer .footer-top ptc-title {
+  margin-bottom: 24px;
+  display: block;
+}
+ptc-footer .footer-top .f-menu {
+  justify-content: space-between;
+}
+@media only screen and (min-width: 992px) {
+  ptc-footer .footer-top .f-menu {
+    justify-content: flex-start;
+  }
+}
+ptc-footer .footer-top .f-menu ul li {
+  padding: 6px 0;
+}
+ptc-footer .footer-top .f-menu ul li:first-child {
+  padding-top: 0;
+}
+ptc-footer .footer-top .f-menu ul li:last-child {
+  padding-bottom: 0;
+}
+ptc-footer .footer-top .f-menu ul li a {
+  display: inline-block;
+  font-weight: var(--ptc-font-weight-semibold);
+  line-height: var(--ptc-line-height-p);
+}
+@media only screen and (min-width: 992px) {
+  ptc-footer .footer-top .f-menu .f-menu-1 {
+    margin-right: 56px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  ptc-footer .footer-top .f-menu .f-menu-1 {
+    margin-right: 88px;
+  }
+}
+ptc-footer ptc-mobile-select {
+  display: block;
+}
+@media only screen and (min-width: 1200px) {
+  ptc-footer ptc-mobile-select {
+    display: none;
+  }
+}
+ptc-footer .footer-bottom {
+  background-color: var(--color-gray-11);
+  padding-top: var(--ptc-layout-spacing-02);
+  padding-bottom: var(--ptc-layout-spacing-02);
+  text-align: center;
+  font-size: var(--ptc-font-size-xx-small);
+}
+@media only screen and (min-width: 768px) {
+  ptc-footer .footer-bottom {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+ptc-footer .footer-bottom .logo {
+  margin-bottom: var(--ptc-element-spacing-06);
+}
+@media only screen and (min-width: 768px) {
+  ptc-footer .footer-bottom .logo {
+    margin-bottom: 0;
+  }
+}
+@media only screen and (min-width: 768px) {
+  ptc-footer .footer-bottom .copyright-list {
+    display: flex;
+    align-items: center;
+  }
+}
+ptc-footer .footer-bottom .copyright-list ul {
+  margin-top: var(--ptc-element-spacing-04);
+}
+@media only screen and (min-width: 768px) {
+  ptc-footer .footer-bottom .copyright-list ul {
+    margin-left: 40px;
+    margin-top: 0;
+  }
+}
+ptc-footer .footer-bottom .copyright-list ul li {
+  display: inline-block;
+  margin: 0 12px;
+}
+ptc-footer .footer-bottom .copyright-list ul li a {
+  display: block;
+  padding: 6px 0;
+}

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

@@ -0,0 +1,42 @@
+import { Host, h } from '@stencil/core';
+// import footerBg from '../../media/svg-imgs/footer-background.svg';
+export class PtcFooter {
+  constructor() {
+    this.backgroundImage = undefined;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "footer-bg-wrap" }, h("div", { class: 'footer-bg', style: { backgroundImage: `url(${this.backgroundImage})` } }), h("slot", null)), h("slot", { name: 'footer-bottom-slot' })));
+  }
+  static get is() { return "ptc-footer"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-footer-v2.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-footer-v2.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "backgroundImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "background-image",
+        "reflect": false
+      }
+    };
+  }
+}

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

@@ -0,0 +1,100 @@
+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;
+  height: 100%;
+}
+:host a {
+  display: block;
+  padding: var(--ptc-layout-spacing-03);
+  background-color: var(--color-gray-10);
+  border-radius: var(--ptc-border-radius-standard);
+  align-items: center;
+  text-decoration: none;
+  text-align: center;
+  box-sizing: border-box;
+  height: 100%;
+  transition: background-color var(--ptc-transition-medium) var(--ptc-ease-inout);
+}
+@media only screen and (min-width: 480px) {
+  :host a {
+    display: flex;
+    text-align: left;
+  }
+}
+:host a:hover {
+  background-color: var(--color-gray-08);
+}
+:host a:active {
+  background-color: var(--color-gray-09);
+}
+:host a span {
+  display: block;
+}
+:host .card-icon {
+  width: 2rem;
+  height: 2rem;
+  margin: auto;
+  margin-bottom: 1rem;
+}
+@media only screen and (min-width: 480px) {
+  :host .card-icon {
+    margin: 0 var(--ptc-element-spacing-04) 0 0;
+  }
+}
+:host .card-title {
+  font-weight: var(--ptc-font-weight-extrabold);
+  color: var(--color-white);
+}

package/dist/collection/components/ptc-icon-card/ptc-icon-card.js

@@ -0,0 +1,42 @@
+import { Host, h } from '@stencil/core';
+export class PtcIconCard {
+  constructor() {
+    this.cardTitle = undefined;
+  }
+  render() {
+    return (h(Host, null, h("a", { href: "#", title: this.cardTitle }, h("span", { class: 'card-icon' }, h("slot", null)), h("span", { class: 'card-title' }, this.cardTitle))));
+  }
+  static get is() { return "ptc-icon-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-icon-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-icon-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cardTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "card-title",
+        "reflect": false
+      }
+    };
+  }
+}

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

@@ -548,6 +548,14 @@ ptc-link, ptc-square-card {
   white-space: nowrap;
 }
 
+.u-text-medium {
+  font-weight: var(--ptc-font-weight-medium);
+}
+
+.u-text-semibold {
+  font-weight: var(--ptc-font-weight-semibold);
+}
+
 .u-text-bold {
   font-weight: var(--ptc-font-weight-bold);
 }

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

@@ -109,8 +109,8 @@ ptc-link, ptc-square-card {
   height: 100%;
 }
 .wrapper .modal-popup.sm-modal {
-  width: 433px;
-  max-width: 433px;
+  width: 341px;
+  max-width: 341px;
 }
 @media only screen and (max-width: 360px) {
   .wrapper .modal-popup.sm-modal {
@@ -124,22 +124,16 @@ ptc-link, ptc-square-card {
     width: 360px;
   }
 }
-@media only screen and (min-width: 480px) and (max-width: 767.55px) {
-  .wrapper .modal-popup.sm-modal {
-    max-width: 433px;
-    width: 433px;
-  }
-}
-@media only screen and (min-width: 768px) and (max-width: 991.55px) {
-  .wrapper .modal-popup.sm-modal {
-    max-width: 620px;
-    width: 620px;
+@media only screen and (min-width: 480px) {
+  .wrapper .modal-popup.sm-modal.modal-with-content {
+    width: 371px;
+    max-width: 371px;
   }
 }
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 360px) and (max-width: 479.55px) {
   .wrapper .modal-popup.sm-modal.modal-with-content {
-    width: 620px;
-    max-width: 620px;
+    max-width: 360px;
+    width: 360px;
   }
 }
 .wrapper .modal-popup .modal-body {

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

@@ -10,6 +10,7 @@ export class PtcOfficeLocationCard {
     this.isContactEmpty = false;
     this.officeName = undefined;
     this.showFullAddressModal = false;
+    this.showFullAddressText = 'Show Full Address';
   }
   handleClick() {
     // Emit the addressClicked event with the address as the detail
@@ -22,7 +23,7 @@ export class PtcOfficeLocationCard {
   }
   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("div", { class: 'show-full-cta', onClick: (e) => { this.showFullAddress(e); } }, this.showFullAddressText, 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' })))));
@@ -144,6 +145,24 @@ export class PtcOfficeLocationCard {
         "attribute": "show-full-address-modal",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "showFullAddressText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-full-address-text",
+        "reflect": false,
+        "defaultValue": "'Show Full Address'"
       }
     };
   }

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

@@ -185,7 +185,6 @@ ptc-link, ptc-square-card {
 }
 :host .region-list .region {
   position: relative;
-  height: 100%;
 }
 :host .region-list .region .region-btn {
   margin: 0 0.5rem;
@@ -213,6 +212,7 @@ ptc-link, ptc-square-card {
   align-items: center;
   padding: 12px 8px 12px 16px;
   border-right: 1px solid var(--color-gray-03);
+  text-align: center;
 }
 @media only screen and (min-width: 1200px) {
   :host .region-list .region .region-btn .continent-name {
@@ -370,7 +370,6 @@ ptc-link, ptc-square-card {
   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) {

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

@@ -13,6 +13,10 @@ export class PtcOfficeLocations {
     this.regionListManual = undefined;
     this.showMapText = 'Show Map';
     this.hideMapText = 'Hide Map';
+    this.filtersText = 'Filters';
+    this.allRegionsText = 'All Regions';
+    this.applyText = 'Apply';
+    this.clearText = 'Clear';
     this.showMap = false;
   }
   handleResize() {
@@ -191,7 +195,7 @@ export class PtcOfficeLocations {
   renderCountrylist(region) {
     const uniqueLocations = [...new Map(this.locations
         .filter(location => location.region === region).map(item => [item['country'], item])).values()];
-    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, "data-continent": region, onChange: (e) => this.updateCheckboxStatus(region.replace(/\s+/g, ''), e) }), h("span", { class: 'checkmark' }))), uniqueLocations
+    return (h("ul", { id: 'region-list-' + region.replace(/\s+/g, '') }, h("li", null, h("label", { htmlFor: 'all-regions-' + region.replace(/\s+/g, '') }, this.allRegionsText, h("input", { type: "checkbox", class: 'all-region-label', id: 'all-regions-' + region.replace(/\s+/g, ''), value: region, "data-continent": region, onChange: (e) => this.updateCheckboxStatus(region.replace(/\s+/g, ''), e) }), h("span", { class: 'checkmark' }))), uniqueLocations
       .map(location => (h("li", { key: location.id }, h("label", { htmlFor: location.country }, location.country, h("input", { type: "checkbox", id: location.country, value: location.country, "data-continent": region, onChange: (e) => this.updateCheckboxStatus(region.replace(/\s+/g, ''), e) }), h("span", { class: 'checkmark' })))))));
   }
   toggleMap() {
@@ -209,9 +213,9 @@ export class PtcOfficeLocations {
   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 country-list-desktop` }, 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 ? this.hideMapText : this.showMapText, " "))), 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: "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 country-list-desktop` }, 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}' }, this.clearText), h("ptc-button", { color: "ptc-secondary", "link-title": "Apply", type: "button", size: "small", onClick: () => this.applyFilter(region) }, this.applyText)))))), h("span", { class: "map-btn", onClick: () => { this.toggleMap(); } }, h("span", { class: 'map-icon', innerHTML: this.showMap ? hideMapSVG : showMapSVG }), h("span", null, this.showMap ? this.hideMapText : this.showMapText, " "))), this.isMobile &&
+      h("button", { class: "filter-cta", onClick: () => { this.openFilterModal(); } }, " ", h("span", { class: "svg-close", innerHTML: filterSVG }), this.filtersText), 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" }, this.filtersText)), 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}' }, this.clearText), h("ptc-button", { color: "ptc-secondary", "link-title": "Apply", type: "button", size: "small", onClick: () => { this.applyFilterMobile(); } }, this.applyText)), 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() {
@@ -286,6 +290,78 @@ export class PtcOfficeLocations {
         "attribute": "hide-map-text",
         "reflect": false,
         "defaultValue": "'Hide Map'"
+      },
+      "filtersText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "filters-text",
+        "reflect": false,
+        "defaultValue": "'Filters'"
+      },
+      "allRegionsText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "all-regions-text",
+        "reflect": false,
+        "defaultValue": "'All Regions'"
+      },
+      "applyText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "apply-text",
+        "reflect": false,
+        "defaultValue": "'Apply'"
+      },
+      "clearText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "clear-text",
+        "reflect": false,
+        "defaultValue": "'Clear'"
       }
     };
   }

package/dist/collection/components/ptc-pricing-tabs/ptc-pricing-tabs.css

@@ -493,6 +493,14 @@ ptc-link, ptc-square-card {
   white-space: nowrap;
 }
 
+.u-text-medium {
+  font-weight: var(--ptc-font-weight-medium);
+}
+
+.u-text-semibold {
+  font-weight: var(--ptc-font-weight-semibold);
+}
+
 .u-text-bold {
   font-weight: var(--ptc-font-weight-bold);
 }