@ptcwebops/ptcw-design 6.3.38 → 6.3.39-beta

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

@@ -1,22 +1,22 @@
-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";
+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.checkboxes = [];
-    this.openRegion = "";
+    this.openRegion = '';
     this.isMobile = undefined;
     this.address = undefined;
     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.showMapText = 'Show Map';
+    this.hideMapText = 'Hide Map';
+    this.filtersText = 'Filters';
+    this.allRegionsText = 'All Regions';
+    this.applyText = 'Apply';
+    this.clearText = 'Clear';
     this.showMap = false;
     this.cardScroll = false;
   }
@@ -35,42 +35,31 @@ export class PtcOfficeLocations {
       if (!this.cardScroll) {
         const mapTop = this.hostEl.shadowRoot.querySelector(".office-location-list-wrapper");
         setTimeout(() => {
-          mapTop === null || mapTop === void 0 ? void 0 : mapTop.scrollIntoView({
-            inline: "nearest",
-            block: "start",
-          });
+          mapTop === null || mapTop === void 0 ? void 0 : mapTop.scrollIntoView({ inline: 'nearest', block: 'start' });
         }, 100);
         setTimeout(() => {
           var _a;
-          (_a = event.target) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
-            inline: "nearest",
-            block: "center",
-          });
+          (_a = event.target) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ inline: 'nearest', block: 'center' });
           this.cardScroll = this.showMap;
-          mapTop === null || mapTop === void 0 ? void 0 : mapTop.scrollIntoView({
-            inline: "nearest",
-            block: "start",
-          });
+          mapTop === null || mapTop === void 0 ? void 0 : mapTop.scrollIntoView({ inline: 'nearest', block: 'start' });
         }, 500);
       }
     }
   }
   watchStateHandler() {
-    this.checkboxes = Array.from(this.hostEl.shadowRoot.querySelectorAll('.country-list input[type="checkbox"]:checked')).map((checkbox) => [
-      checkbox.value,
-      checkbox.getAttribute("data-continent"),
-    ]);
+    this.checkboxes = Array.from(this.hostEl.shadowRoot.querySelectorAll('.country-list input[type="checkbox"]:checked'))
+      .map((checkbox) => [checkbox.value, checkbox.getAttribute('data-continent')]);
   }
   componentDidUpdate() {
     this.selectCheckboxesOnScreenResize();
   }
   selectCheckboxesOnScreenResize() {
     const selectedOptions = this.checkboxes;
-    selectedOptions.forEach((region) => {
-      const regionWrap = this.hostEl.shadowRoot.querySelector(`#region-wrap-${region[1].replace(/\s+/g, "")}`);
-      const checkboxSelected = this.hostEl.shadowRoot.querySelector(`#${region[0].replace(/\s+/g, "")}`);
-      if (!regionWrap.classList.contains("selected")) {
-        regionWrap.classList.add("selected");
+    selectedOptions.forEach(region => {
+      const regionWrap = this.hostEl.shadowRoot.querySelector(`#region-wrap-${region[1].replace(/\s+/g, '')}`);
+      const checkboxSelected = this.hostEl.shadowRoot.querySelector(`#${region[0].replace(/\s+/g, '')}`);
+      if (!regionWrap.classList.contains('selected')) {
+        regionWrap.classList.add('selected');
       }
       if (!checkboxSelected.checked) {
         checkboxSelected.checked = true;
@@ -80,40 +69,38 @@ export class PtcOfficeLocations {
   }
   componentWillLoad() {
     this.isMobile = window.innerWidth < 992;
-    const officeCards = document.querySelectorAll("ptc-office-location-card");
+    const officeCards = document.querySelectorAll('ptc-office-location-card');
     officeCards.forEach((card, index) => {
-      const region = card.getAttribute("region");
-      const country = card.getAttribute("country");
+      const region = card.getAttribute('region');
+      const country = card.getAttribute('country');
       if (region && country) {
         this.locations.push({ id: index, region, country });
       }
     });
     if (this.regionListManual) {
-      const regionList = this.regionListManual
-        .split(",")
-        .map((item) => item.trim());
+      const regionList = this.regionListManual.split(',').map(item => item.trim());
       this.regions = regionList;
     }
     else {
       // Extract unique regions from locations array
-      const uniqueRegions = Array.from(new Set(this.locations.map((location) => location.region)));
+      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) {
-    let regionListID = this.hostEl.shadowRoot.querySelector(`#region-wrap-${region.replace(/\s+/g, "")}`);
+    let regionListID = this.hostEl.shadowRoot.querySelector(`#region-wrap-${region.replace(/\s+/g, '')}`);
     // Toggle open/close state for the clicked region
     if (this.openRegion === region) {
       // If the clicked region is already open, close it
-      this.openRegion = "";
+      this.openRegion = '';
       if (regionListID) {
-        let labelsList = regionListID.querySelectorAll("label");
+        let labelsList = regionListID.querySelectorAll('label');
         labelsList.forEach((i) => {
           i.tabIndex = -1;
         });
-        let btnsList = regionListID.querySelectorAll("ptc-button");
+        let btnsList = regionListID.querySelectorAll('ptc-button');
         btnsList.forEach((i) => {
           i.tabIndex = -1;
         });
@@ -123,11 +110,11 @@ export class PtcOfficeLocations {
       // Close any previously open region and open the clicked region
       this.openRegion = region;
       if (regionListID) {
-        let labelsList = regionListID.querySelectorAll("label");
+        let labelsList = regionListID.querySelectorAll('label');
         labelsList.forEach((i) => {
           i.tabIndex = 0;
         });
-        let btnsList = regionListID.querySelectorAll("ptc-button");
+        let btnsList = regionListID.querySelectorAll('ptc-button');
         btnsList.forEach((i) => {
           i.removeAttribute("tabIndex");
         });
@@ -135,22 +122,22 @@ export class PtcOfficeLocations {
     }
   }
   getCheckboxes(region) {
-    return this.hostEl.shadowRoot.querySelectorAll(`.country-list #region-list-${region.replace(/\s+/g, "")} input[type="checkbox"]`);
+    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);
+    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");
+    const officeCards = document.querySelectorAll('ptc-office-location-card');
     officeCards.forEach((card) => {
-      const region = card.getAttribute("region");
-      const country = card.getAttribute("country");
+      const region = card.getAttribute('region');
+      const country = card.getAttribute('country');
       // Hide show checboxes
       if (selectedOptions.length > 0) {
-        if (selectedOptions.includes(region) ||
-          selectedOptions.includes(country)) {
+        if (selectedOptions.includes(region) || selectedOptions.includes(country)) {
           card.style.display = "block";
         }
         else {
@@ -169,11 +156,11 @@ export class PtcOfficeLocations {
   }
   clearFilter(region) {
     const checkboxes = this.getCheckboxes(region);
-    const regionWrap = this.hostEl.shadowRoot.querySelector(`#region-wrap-${region.replace(/\s+/g, "")}`);
+    const regionWrap = this.hostEl.shadowRoot.querySelector(`#region-wrap-${region.replace(/\s+/g, '')}`);
     checkboxes.forEach((checkbox) => {
       checkbox.checked = false;
     });
-    regionWrap.classList.remove("selected");
+    regionWrap.classList.remove('selected');
     this.updateOfficeList();
     this.toggleCountryList(region);
   }
@@ -183,15 +170,13 @@ export class PtcOfficeLocations {
     }
   }
   updateCheckboxStatus(region, e) {
-    const regionWrap = this.hostEl.shadowRoot.querySelector(`#region-wrap-${region.replace(/\s+/g, "")}`);
+    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, "")}` ||
-      (e.keyCode === 13 &&
-        e.target.getAttribute("data-id") ===
-          `all-regions-${region.replace(/\s+/g, "")}`);
+    const isAllRegionsCheckboxClicked = e.target.id === `all-regions-${region.replace(/\s+/g, '')}`
+      || e.keyCode === 13 && e.target.getAttribute("data-id") === `all-regions-${region.replace(/\s+/g, '')}`;
     let AllRegionsCheckBoxSelected = e.target.checked;
     if (e.keyCode === 13) {
-      const checkBoxSelected = e.target.querySelector("input");
+      const checkBoxSelected = e.target.querySelector('input');
       if (checkBoxSelected) {
         checkBoxSelected.checked = !checkBoxSelected.checked;
         AllRegionsCheckBoxSelected = checkBoxSelected.checked;
@@ -200,48 +185,46 @@ export class PtcOfficeLocations {
     let anyCheckboxSelected = false;
     checkboxes.forEach((checkbox) => {
       if (isAllRegionsCheckboxClicked) {
-        checkbox.checked = checkbox.classList.contains("all-region-label")
-          ? AllRegionsCheckBoxSelected
-          : false;
+        checkbox.checked = checkbox.classList.contains('all-region-label') ? AllRegionsCheckBoxSelected : false;
       }
-      else if (checkbox.classList.contains("all-region-label")) {
+      else if (checkbox.classList.contains('all-region-label')) {
         checkbox.checked = false;
       }
       if (checkbox.checked) {
         anyCheckboxSelected = true;
       }
     });
-    regionWrap.classList.toggle("selected", anyCheckboxSelected);
+    regionWrap.classList.toggle('selected', anyCheckboxSelected);
   }
   updateSelectedClass(region) {
     this.fadeInWrapper();
-    const regionWrap = this.hostEl.shadowRoot.querySelector(`#region-wrap-${region.replace(/\s+/g, "")}`);
+    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")) {
+      if (!checkbox.classList.contains('all-region-label')) {
         checkbox.checked = false;
       }
-      if (checkbox.classList.contains("all-region-label")) {
+      if (checkbox.classList.contains('all-region-label')) {
         checkbox.checked = !checkbox.checked;
         isAllRegionSelected = checkbox.checked;
       }
     });
-    regionWrap.classList.toggle("selected", isAllRegionSelected);
+    regionWrap.classList.toggle('selected', isAllRegionSelected);
     this.updateOfficeList();
-    this.toggleCountryList("");
+    this.toggleCountryList('');
   }
   fadeInWrapper() {
-    const ele = this.hostEl.shadowRoot.querySelector(".office-location-list-wrapper");
-    ele.classList.add("updating");
+    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");
+    ele.addEventListener('transitionend', () => {
+      ele.classList.remove('updating');
     }, { once: true });
   }
   // mobile functions
   openFilterModal() {
-    const modal = this.hostEl.shadowRoot.querySelector("ptc-modal");
+    const modal = this.hostEl.shadowRoot.querySelector('ptc-modal');
     modal.show = true;
   }
   clearFiltersMobile() {
@@ -250,61 +233,45 @@ export class PtcOfficeLocations {
       checkbox.checked = false;
     });
     this.updateOfficeList();
-    const modal = this.hostEl.shadowRoot.querySelector("ptc-modal");
+    const modal = this.hostEl.shadowRoot.querySelector('ptc-modal');
     modal.show = false;
   }
   applyFilterMobile() {
     this.updateOfficeList();
-    const modal = this.hostEl.shadowRoot.querySelector("ptc-modal");
+    const modal = this.hostEl.shadowRoot.querySelector('ptc-modal');
     modal.show = false;
   }
   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", { id: "all-regions-id-" + region.replace(/\s+/g, ""), class: "mf-listen" }, h("label", { htmlFor: "all-regions-" + region.replace(/\s+/g, ""), "data-id": "all-regions-" + region.replace(/\s+/g, ""), onKeyDown: (e) => this.updateCheckboxStatusOnenter(region.replace(/\s+/g, ""), e), tabindex: this.isMobile ? 0 : -1 }, this.allRegionsText, h("input", { type: "checkbox", class: "all-region-label", tabindex: -1, 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, id: location.id + "id", class: "mf-listen" }, h("label", { htmlFor: location.country, tabindex: this.isMobile ? 0 : -1, "data-id": location.country, onKeyDown: (e) => this.updateCheckboxStatusOnenter(region.replace(/\s+/g, ""), e) }, location.country, h("input", { type: "checkbox", id: location.country, tabindex: -1, value: location.country, "data-continent": region, onChange: (e) => this.updateCheckboxStatus(region.replace(/\s+/g, ""), e) }), h("span", { class: "checkmark" })))))));
+    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", { id: 'all-regions-id-' + region.replace(/\s+/g, ''), class: "mf-listen" }, h("label", { htmlFor: 'all-regions-' + region.replace(/\s+/g, ''), "data-id": 'all-regions-' + region.replace(/\s+/g, ''), onKeyDown: (e) => this.updateCheckboxStatusOnenter(region.replace(/\s+/g, ''), e), tabindex: this.isMobile ? 0 : -1 }, this.allRegionsText, h("input", { type: "checkbox", class: 'all-region-label', tabindex: -1, 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, id: location.id + 'id', class: "mf-listen" }, h("label", { htmlFor: location.country, tabindex: this.isMobile ? 0 : -1, "data-id": location.country, onKeyDown: (e) => this.updateCheckboxStatusOnenter(region.replace(/\s+/g, ''), e) }, location.country, h("input", { type: "checkbox", id: location.country, tabindex: -1, value: location.country, "data-continent": region, onChange: (e) => this.updateCheckboxStatus(region.replace(/\s+/g, ''), e) }), h("span", { class: 'checkmark' })))))));
   }
   toggleMap() {
     this.showMap = !this.showMap;
     this.cardScroll = this.showMap;
   }
   showFirstMap() {
-    const nodeList = document.querySelectorAll("ptc-office-location-card");
+    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 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");
+    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 mf-listen ${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, ""));
-      }, onKeyPress: () => {
-        this.updateSelectedClass(region.replace(/\s+/g, ""));
-      }, tabindex: "0" }, region), h("span", { class: "continent-arrow", onClick: () => this.toggleCountryList(region), onKeyPress: () => this.toggleCountryList(region), tabindex: "0" }, 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", { "tracker-id": "clearBtnID", color: "ptc-tertiary", tabIndex: -1, "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", { "tracker-id": "applyBtnID", color: "ptc-secondary", tabIndex: -1, "link-title": "Apply", type: "button", size: "small", onClick: () => this.applyFilter(region) }, this.applyText)))))), h("span", { class: "map-btn mf-listen", id: "mapBtnID", onClick: () => {
-        this.toggleMap();
-      }, onKeyPress: () => {
-        this.toggleMap();
-      }, tabindex: 0 }, 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", { "tracker-id": "mobileClearBtnID", 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", { "tracker-id": "mobileApplyBtnID", 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 mf-listen", 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}` }))))));
+    return (h(Host, null, !this.isMobile &&
+      h("div", { class: "region-list" }, this.regions.map(region => (h("div", { class: `region mf-listen ${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, '')); }, onKeyPress: () => { this.updateSelectedClass(region.replace(/\s+/g, '')); }, tabindex: "0" }, region), h("span", { class: "continent-arrow", onClick: () => this.toggleCountryList(region), onKeyPress: () => this.toggleCountryList(region), tabindex: "0" }, 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", { "tracker-id": "clearBtnID", color: "ptc-tertiary", tabIndex: -1, "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", { "tracker-id": "applyBtnID", color: "ptc-secondary", tabIndex: -1, "link-title": "Apply", type: "button", size: "small", onClick: () => this.applyFilter(region) }, this.applyText)))))), h("span", { class: "map-btn mf-listen", id: "mapBtnID", onClick: () => { this.toggleMap(); }, onKeyPress: () => { this.toggleMap(); }, tabindex: 0 }, 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", { "tracker-id": "mobileClearBtnID", 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", { "tracker-id": "mobileApplyBtnID", 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 mf-listen", 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,
+      ['office-location-list-wrapper']: true,
+      ['showing-map']: this.showMap
     };
   }
   static get is() { return "ptc-office-locations"; }
@@ -354,7 +321,7 @@ export class PtcOfficeLocations {
         },
         "attribute": "show-map-text",
         "reflect": false,
-        "defaultValue": "\"Show Map\""
+        "defaultValue": "'Show Map'"
       },
       "hideMapText": {
         "type": "string",
@@ -372,7 +339,7 @@ export class PtcOfficeLocations {
         },
         "attribute": "hide-map-text",
         "reflect": false,
-        "defaultValue": "\"Hide Map\""
+        "defaultValue": "'Hide Map'"
       },
       "filtersText": {
         "type": "string",
@@ -390,7 +357,7 @@ export class PtcOfficeLocations {
         },
         "attribute": "filters-text",
         "reflect": false,
-        "defaultValue": "\"Filters\""
+        "defaultValue": "'Filters'"
       },
       "allRegionsText": {
         "type": "string",
@@ -408,7 +375,7 @@ export class PtcOfficeLocations {
         },
         "attribute": "all-regions-text",
         "reflect": false,
-        "defaultValue": "\"All Regions\""
+        "defaultValue": "'All Regions'"
       },
       "applyText": {
         "type": "string",
@@ -426,7 +393,7 @@ export class PtcOfficeLocations {
         },
         "attribute": "apply-text",
         "reflect": false,
-        "defaultValue": "\"Apply\""
+        "defaultValue": "'Apply'"
       },
       "clearText": {
         "type": "string",
@@ -444,7 +411,7 @@ export class PtcOfficeLocations {
         },
         "attribute": "clear-text",
         "reflect": false,
-        "defaultValue": "\"Clear\""
+        "defaultValue": "'Clear'"
       }
     };
   }

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

@@ -9,10 +9,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -31,10 +29,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -146,15 +142,15 @@ ptc-footer {
 }
 
 :host(.hp-blue) {
-  background: linear-gradient(180deg, #197bc0 0%, #4795cd 100%);
+  background: linear-gradient(180deg, #197BC0 0%, #4795CD 100%);
 }
 
 :host(.hp-green) {
-  background: linear-gradient(180deg, #00890b 0%, #33a13c 100%);
+  background: linear-gradient(180deg, #00890B 0%, #33A13C 100%);
 }
 
 :host(.hp-red) {
-  background: linear-gradient(180deg, #d33e3e 0%, #dc6565 100%);
+  background: linear-gradient(180deg, #D33E3E 0%, #DC6565 100%);
 }
 
 :host(.hp-gray) {
@@ -162,7 +158,7 @@ ptc-footer {
 }
 
 :host(.hp-orange) {
-  background: linear-gradient(180deg, #c37729 0%, #cf9254 100%);
+  background: linear-gradient(180deg, #C37729 0%, #CF9254 100%);
 }
 
 :host(.transparent) {

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

@@ -1,9 +1,9 @@
-import { Host, h } from "@stencil/core";
+import { Host, h } from '@stencil/core';
 export class PtcOverlay {
   constructor() {
     this.filterColor = undefined;
     this.borderRadius = undefined;
-    this.overlayZIndex = "z-index-auto";
+    this.overlayZIndex = 'z-index-auto';
     this.styles = undefined;
   }
   async setOverlay(overlayName) {
@@ -38,7 +38,7 @@ export class PtcOverlay {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| \"blue\"\r\n\t\t| \"red\"\r\n\t\t| \"orange\"\r\n\t\t| \"green\"\r\n\t\t| \"black-1\"\r\n\t\t| \"black-2\"\r\n\t\t| \"black-3\"\r\n\t\t| \"black-4\"\r\n\t\t| \"black-5\"\r\n\t\t| \"slate-grey\"\r\n\t\t| \"bright-blue\"\r\n\t\t| \"bright-red\"\r\n\t\t| \"bright-orange\"\r\n\t\t| \"bright-green\"\r\n\t\t| \"bright-slate-grey\"\r\n\t\t| \"solid-black-1\"\r\n\t\t| \"solid-black-2\"\r\n\t\t| \"hp-blue\"\r\n\t\t| \"hp-green\"\r\n\t\t| \"hp-red\"\r\n\t\t| \"hp-gray\"\r\n\t\t| \"hp-orange\"\r\n\t\t| \"transparent\"\r\n\t\t| string",
+          "original": "| 'blue'\r\n    | 'red'\r\n    | 'orange'\r\n    | 'green'\r\n    | 'black-1'\r\n    | 'black-2'\r\n    | 'black-3'\r\n    | 'black-4'\r\n    | 'black-5'\r\n    | 'slate-grey'\r\n    | 'bright-blue'\r\n    | 'bright-red'\r\n    | 'bright-orange'\r\n    | 'bright-green'\r\n    | 'bright-slate-grey'\r\n    | 'solid-black-1'\r\n    | 'solid-black-2'\r\n    | 'hp-blue'\r\n    | 'hp-green'\r\n    | 'hp-red'\r\n    | 'hp-gray'\r\n    | 'hp-orange'\r\n    | 'transparent'\r\n    | string",
           "resolved": "string",
           "references": {}
         },
@@ -55,7 +55,7 @@ export class PtcOverlay {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| \"radius-standard\"\r\n\t\t| \"radius-large\"\r\n\t\t| \"radius-pill\"\r\n\t\t| \"radius-circle\"",
+          "original": "'radius-standard' | 'radius-large'| 'radius-pill' | 'radius-circle'",
           "resolved": "\"radius-circle\" | \"radius-large\" | \"radius-pill\" | \"radius-standard\"",
           "references": {}
         },
@@ -72,7 +72,7 @@ export class PtcOverlay {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| \"z-index-auto\"\r\n\t\t| \"z-index-n-2\"\r\n\t\t| \"z-index-n-1\"\r\n\t\t| \"z-index-p-1\"\r\n\t\t| \"z-index-p-2\"",
+          "original": "'z-index-auto' | 'z-index-n-2' | 'z-index-n-1' | 'z-index-p-1' | 'z-index-p-2'",
           "resolved": "\"z-index-auto\" | \"z-index-n-1\" | \"z-index-n-2\" | \"z-index-p-1\" | \"z-index-p-2\"",
           "references": {}
         },
@@ -84,7 +84,7 @@ export class PtcOverlay {
         },
         "attribute": "overlay-z-index",
         "reflect": false,
-        "defaultValue": "\"z-index-auto\""
+        "defaultValue": "'z-index-auto'"
       },
       "styles": {
         "type": "string",

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

@@ -9,10 +9,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -31,10 +29,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -123,8 +119,7 @@ ptc-footer {
 .standard-filter .standard-filter-item[data-url=last] {
   margin-right: 1.25rem;
 }
-.standard-filter .next-button,
-.standard-filter .previous-button {
+.standard-filter .next-button, .standard-filter .previous-button {
   font-size: var(--ptc-font-size-x-small);
   font-weight: normal;
   display: inline-flex;
@@ -136,33 +131,27 @@ ptc-footer {
   border-radius: calc(var(--ptc-border-radius-standard) / 2);
   transition: background-color var(--ptc-ease-out) var(--ptc-transition-medium), fill var(--ptc-ease-out) var(--ptc-transition-medium), border-color var(--ptc-ease-out) var(--ptc-transition-medium);
 }
-.standard-filter .next-button:hover,
-.standard-filter .previous-button:hover {
+.standard-filter .next-button:hover, .standard-filter .previous-button:hover {
   background-color: var(--color-gray-02);
   text-decoration: none;
 }
-.standard-filter .next-button:active,
-.standard-filter .previous-button:active {
+.standard-filter .next-button:active, .standard-filter .previous-button:active {
   transition: none;
   background-color: var(--color-gray-05);
   text-decoration: none;
 }
-.standard-filter .next-button:focus,
-.standard-filter .previous-button:focus {
+.standard-filter .next-button:focus, .standard-filter .previous-button:focus {
   text-decoration: none;
   border-radius: var(--ptc-border-radius-standard);
   outline: 5px solid var(--keyboard-nav-outline);
 }
-.standard-filter .next-button.disabled,
-.standard-filter .previous-button.disabled {
+.standard-filter .next-button.disabled, .standard-filter .previous-button.disabled {
   cursor: default;
   border-color: var(--color-gray-04);
   color: var(--color-gray-04);
   fill: var(--color-gray-04);
 }
-.standard-filter .next-button.disabled:hover, .standard-filter .next-button.disabled:active,
-.standard-filter .previous-button.disabled:hover,
-.standard-filter .previous-button.disabled:active {
+.standard-filter .next-button.disabled:hover, .standard-filter .next-button.disabled:active, .standard-filter .previous-button.disabled:hover, .standard-filter .previous-button.disabled:active {
   background-color: transparent;
 }
 .standard-filter .previous-button {
@@ -232,15 +221,13 @@ ptc-footer {
   font-weight: var(--ptc-font-weight-semibold);
 }
 
-.events-filter-item:hover,
-.events-filter-item:focus {
+.events-filter-item:hover, .events-filter-item:focus {
   text-decoration: none;
   outline: 0;
   color: var(--color-green-14);
 }
 
-span.events-filter-item:hover,
-span.events-filter-item:focus {
+span.events-filter-item:hover, span.events-filter-item:focus {
   text-decoration: none;
   outline: 0;
   color: var(--color-gray-10);