@ptcwebops/ptcw-design 6.3.38 → 6.3.40-beta

package/dist/esm/ptc-nav-submenu.entry.js

@@ -14,8 +14,8 @@ const PtcNavSubmenu = class {
     this.backBtnTrackerId = undefined;
   }
   calculateOffset() {
-    var dropdown = this.el.shadowRoot.querySelector(".submenu-container");
-    var container = this.el.closest("ptc-subnav");
+    var dropdown = this.el.shadowRoot.querySelector('.submenu-container');
+    var container = this.el.closest('ptc-subnav');
     if (dropdown && container) {
       if (window.innerWidth >= 1200) {
         let height = container.clientHeight;
@@ -24,7 +24,7 @@ const PtcNavSubmenu = class {
         }
       }
       else {
-        dropdown.style.top = "";
+        dropdown.style.top = '';
       }
     }
   }
@@ -35,7 +35,10 @@ const PtcNavSubmenu = class {
     }, 100);
   }
   render() {
-    return (h(Host, { class: `dropdown` }, h("div", { id: this.backBtnTrackerId, class: "tracker-div" }, h("span", { class: `back-btn` }, h("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.97852 14.12L3.82515 8L9.97852 1.88L8.08414 -8.28059e-08L0.0229606 8L8.08414 16L9.97852 14.12Z", fill: "white" })), "Back")), h("span", { class: `submenu-toggle`, onClick: () => this.handleClick(this), onMouseOver: () => this.handleClick(this) }, this.iconAssetName && (h("icon-asset", { type: "ptc", size: "xx-small", name: this.iconAssetName, color: "white" })), h("div", { id: this.labelTrackerId, class: "tracker-div" }, this.label), h("div", { id: this.dropdownTrackerId, class: "tracker-div" }, this.iconSrc && (h("img", { src: this.iconSrc, alt: this.label, class: "custom-icon" })), !this.iconSrc && (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15", fill: "white", class: "" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.2375 2.83325L7.5 8.60203L1.7625 2.83325L-7.76305e-08 4.60923L7.5 12.1666L15 4.60923L13.2375 2.83325Z", fill: "white" }))))), h("div", { class: `submenu-container` }, h("div", { class: "submenu-container-lg" }, h("slot", null)))));
+    return (h(Host, { class: `dropdown` }, h("div", { id: this.backBtnTrackerId, class: "tracker-div" }, h("span", { class: `back-btn` }, h("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.97852 14.12L3.82515 8L9.97852 1.88L8.08414 -8.28059e-08L0.0229606 8L8.08414 16L9.97852 14.12Z", fill: "white" })), "Back")), h("span", { class: `submenu-toggle`, onClick: () => this.handleClick(this), onMouseOver: () => this.handleClick(this) }, this.iconAssetName &&
+      h("icon-asset", { type: "ptc", size: "xx-small", name: this.iconAssetName, color: "white" }), h("div", { id: this.labelTrackerId, class: "tracker-div" }, this.label), h("div", { id: this.dropdownTrackerId, class: "tracker-div" }, this.iconSrc &&
+      h("img", { src: this.iconSrc, alt: this.label, class: "custom-icon" }), !this.iconSrc &&
+      h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15", fill: "white", class: "" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.2375 2.83325L7.5 8.60203L1.7625 2.83325L-7.76305e-08 4.60923L7.5 12.1666L15 4.60923L13.2375 2.83325Z", fill: "white" })))), h("div", { class: `submenu-container` }, h("div", { class: "submenu-container-lg" }, h("slot", null)))));
   }
   get el() { return getElement(this); }
 };

package/dist/esm/ptc-news.entry.js

@@ -11,7 +11,7 @@ const PtcNews = class {
     this.newsDownloadUrl = undefined;
   }
   render() {
-    return (h(Host, null, h("div", { class: "news-container" }, this.newsTag && (h("span", { class: "news-tag" }, this.newsTag)), h("slot", { name: "news-title" }), h("slot", { name: "news-secondary-title" }), h("slot", { name: "news-date" }), h("slot", { name: "news-summary" }), this.getArticleImage(), h("div", { class: "news-content" }, h("slot", { name: "share-icons" }), h("slot", null)))));
+    return (h(Host, null, h("div", { class: "news-container" }, this.newsTag && h("span", { class: "news-tag" }, this.newsTag), h("slot", { name: "news-title" }), h("slot", { name: "news-secondary-title" }), h("slot", { name: "news-date" }), h("slot", { name: "news-summary" }), this.getArticleImage(), h("div", { class: "news-content" }, h("slot", { name: "share-icons" }), h("slot", null)))));
   }
   getArticleImage() {
     if (this.newsImage && this.newsDownloadUrl) {

package/dist/esm/ptc-office-location-card.entry.js

@@ -35,7 +35,7 @@ const PtcOfficeLocationCard = class {
     this.isContactEmpty = false;
     this.officeName = undefined;
     this.showFullAddressModal = false;
-    this.showFullAddressText = "Show Full Address";
+    this.showFullAddressText = 'Show Full Address';
   }
   handleClick(e) {
     e.preventDefault();
@@ -44,15 +44,15 @@ const PtcOfficeLocationCard = class {
   }
   showFullAddress(event) {
     event.stopPropagation();
-    const modal = this.hostElement.shadowRoot.querySelector("#show-full-add");
+    const modal = this.hostElement.shadowRoot.querySelector('#show-full-add');
     modal.show = true;
   }
   render() {
-    return (h(Host, null, h("div", { class: "ofc-card-wrapper", onClick: (e) => this.handleClick(e), onKeyPress: (e) => this.handleClick(e), tabindex: 0 }, this.showFullAddressModal && (h("div", { class: "show-full-cta", onClick: (e) => {
-        this.showFullAddress(e);
-      }, tabindex: 0, onKeyPress: (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" }))))));
+    return (h(Host, null, h("div", { class: 'ofc-card-wrapper', onClick: (e) => this.handleClick(e), onKeyPress: (e) => this.handleClick(e), tabindex: 0 }, this.showFullAddressModal &&
+      h("div", { class: 'show-full-cta', onClick: (e) => { this.showFullAddress(e); }, tabindex: 0, onKeyPress: (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' })))));
   }
   get hostElement() { return getElement(this); }
 };

package/dist/esm/ptc-office-locations.entry.js

@@ -31,16 +31,16 @@ const PtcOfficeLocations = class {
     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;
   }
@@ -59,42 +59,31 @@ const PtcOfficeLocations = class {
       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;
@@ -104,40 +93,38 @@ const PtcOfficeLocations = class {
   }
   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;
         });
@@ -147,11 +134,11 @@ const PtcOfficeLocations = class {
       // 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");
         });
@@ -159,22 +146,22 @@ const PtcOfficeLocations = class {
     }
   }
   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 {
@@ -193,11 +180,11 @@ const PtcOfficeLocations = class {
   }
   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);
   }
@@ -207,15 +194,13 @@ const PtcOfficeLocations = class {
     }
   }
   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;
@@ -224,48 +209,46 @@ const PtcOfficeLocations = class {
     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() {
@@ -274,61 +257,45 @@ const PtcOfficeLocations = class {
       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
     };
   }
   get hostEl() { return getElement(this); }

package/dist/esm/ptc-overlay.entry.js

@@ -1,13 +1,13 @@
 import { r as registerInstance, h, H as Host } from './index-c83db688.js';
 
-const ptcOverlayCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{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,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;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:absolute;top:0;left:0;width:100%;height:100%;transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.blue){background:linear-gradient(180deg, rgba(25, 123, 192, 0.2) 0%, var(--color-blue-07) 100%)}:host(.red){background:linear-gradient(180deg, rgba(209, 44, 58, 0.2) 0%, var(--color-red-07) 100%)}:host(.orange){background:linear-gradient(180deg, rgba(195, 119, 41, 0.2) 0%, var(--color-orange-07) 100%)}:host(.green){background:linear-gradient(180deg, rgba(0, 137, 11, 0.2) 0%, var(--color-green-07) 100%)}:host(.black-1){background:linear-gradient(270deg, rgba(32, 38, 42, 0.32) 33.33%, var(--color-gray-12) 100%)}:host(.black-2){background:linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, var(--color-gray-12) 100%)}:host(.black-4){background:rgba(0, 0, 0, 0.66)}:host(.black-5){background:rgba(0, 0, 0, 0.76)}@media only screen and (min-width: 768px){:host(.black-1){background:linear-gradient(270deg, rgba(32, 38, 42, 0) 33.33%, var(--color-gray-12) 100%)}:host(.black-2){background:linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, var(--color-gray-12) 100%)}}:host(.black-3){background:linear-gradient(180deg, var(--color-gray-12) 0%, rgba(32, 38, 42, 0.55) 100%)}:host(.slate-grey){background:linear-gradient(180deg, rgba(97, 116, 128, 0.2) 0%, var(--color-gray-07) 100%)}:host(.bright-blue){background:linear-gradient(180deg, rgba(25, 123, 192, 0.72) 0%, rgba(25, 123, 192, 0.85) 69.27%, rgba(25, 123, 192, 0.4) 100%)}:host(.bright-red){background:linear-gradient(180deg, rgba(211, 62, 62, 0.72) 0%, rgba(211, 62, 62, 0.85) 69.27%, rgba(211, 62, 62, 0.4) 100%)}:host(.bright-orange){background:linear-gradient(180deg, rgba(195, 119, 41, 0.72) 0%, rgba(195, 119, 41, 0.85) 69.27%, rgba(195, 119, 41, 0.4) 100%)}:host(.bright-green){background:linear-gradient(180deg, rgba(0, 137, 11, 0.72) 0%, rgba(0, 137, 11, 0.85) 69.27%, rgba(0, 137, 11, 0.4) 100%)}:host(.bright-slate-grey){background:linear-gradient(180deg, rgba(97, 116, 128, 0.72) 0%, rgba(97, 116, 128, 0.85) 69.27%, rgba(97, 116, 128, 0.4) 100%)}:host(.solid-black-1){background:rgba(16, 19, 20, 0.85)}:host(.solid-black-2){background:rgba(16, 19, 20, 0.7)}:host(.hp-blue){background:linear-gradient(180deg, #197bc0 0%, #4795cd 100%)}:host(.hp-green){background:linear-gradient(180deg, #00890b 0%, #33a13c 100%)}:host(.hp-red){background:linear-gradient(180deg, #d33e3e 0%, #dc6565 100%)}:host(.hp-gray){background:linear-gradient(180deg, #617480 0%, #819099 100%)}:host(.hp-orange){background:linear-gradient(180deg, #c37729 0%, #cf9254 100%)}:host(.transparent){background:linear-gradient(180deg, transparent 0%, transparent 100%)}:host(.radius-standard){border-radius:var(--ptc-border-radius-standard)}:host(.radius-large){border-radius:var(--ptc-border-radius-large)}:host(.radius-pill){border-radius:var(--ptc-border-radius-pill)}:host(.radius-circle){border-radius:var(--ptc-border-radius-circle)}:host(.z-index-auto){z-index:auto}:host(.z-index-n-1){z-index:-1}:host(.z-index-n-2){z-index:-2}:host(.z-index-p-1){z-index:1}:host(.z-index-p-2){z-index:2}";
+const ptcOverlayCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{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,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;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:absolute;top:0;left:0;width:100%;height:100%;transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.blue){background:linear-gradient(180deg, rgba(25, 123, 192, 0.2) 0%, var(--color-blue-07) 100%)}:host(.red){background:linear-gradient(180deg, rgba(209, 44, 58, 0.2) 0%, var(--color-red-07) 100%)}:host(.orange){background:linear-gradient(180deg, rgba(195, 119, 41, 0.2) 0%, var(--color-orange-07) 100%)}:host(.green){background:linear-gradient(180deg, rgba(0, 137, 11, 0.2) 0%, var(--color-green-07) 100%)}:host(.black-1){background:linear-gradient(270deg, rgba(32, 38, 42, 0.32) 33.33%, var(--color-gray-12) 100%)}:host(.black-2){background:linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, var(--color-gray-12) 100%)}:host(.black-4){background:rgba(0, 0, 0, 0.66)}:host(.black-5){background:rgba(0, 0, 0, 0.76)}@media only screen and (min-width: 768px){:host(.black-1){background:linear-gradient(270deg, rgba(32, 38, 42, 0) 33.33%, var(--color-gray-12) 100%)}:host(.black-2){background:linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, var(--color-gray-12) 100%)}}:host(.black-3){background:linear-gradient(180deg, var(--color-gray-12) 0%, rgba(32, 38, 42, 0.55) 100%)}:host(.slate-grey){background:linear-gradient(180deg, rgba(97, 116, 128, 0.2) 0%, var(--color-gray-07) 100%)}:host(.bright-blue){background:linear-gradient(180deg, rgba(25, 123, 192, 0.72) 0%, rgba(25, 123, 192, 0.85) 69.27%, rgba(25, 123, 192, 0.4) 100%)}:host(.bright-red){background:linear-gradient(180deg, rgba(211, 62, 62, 0.72) 0%, rgba(211, 62, 62, 0.85) 69.27%, rgba(211, 62, 62, 0.4) 100%)}:host(.bright-orange){background:linear-gradient(180deg, rgba(195, 119, 41, 0.72) 0%, rgba(195, 119, 41, 0.85) 69.27%, rgba(195, 119, 41, 0.4) 100%)}:host(.bright-green){background:linear-gradient(180deg, rgba(0, 137, 11, 0.72) 0%, rgba(0, 137, 11, 0.85) 69.27%, rgba(0, 137, 11, 0.4) 100%)}:host(.bright-slate-grey){background:linear-gradient(180deg, rgba(97, 116, 128, 0.72) 0%, rgba(97, 116, 128, 0.85) 69.27%, rgba(97, 116, 128, 0.4) 100%)}:host(.solid-black-1){background:rgba(16, 19, 20, 0.85)}:host(.solid-black-2){background:rgba(16, 19, 20, 0.7)}:host(.hp-blue){background:linear-gradient(180deg, #197BC0 0%, #4795CD 100%)}:host(.hp-green){background:linear-gradient(180deg, #00890B 0%, #33A13C 100%)}:host(.hp-red){background:linear-gradient(180deg, #D33E3E 0%, #DC6565 100%)}:host(.hp-gray){background:linear-gradient(180deg, #617480 0%, #819099 100%)}:host(.hp-orange){background:linear-gradient(180deg, #C37729 0%, #CF9254 100%)}:host(.transparent){background:linear-gradient(180deg, transparent 0%, transparent 100%)}:host(.radius-standard){border-radius:var(--ptc-border-radius-standard)}:host(.radius-large){border-radius:var(--ptc-border-radius-large)}:host(.radius-pill){border-radius:var(--ptc-border-radius-pill)}:host(.radius-circle){border-radius:var(--ptc-border-radius-circle)}:host(.z-index-auto){z-index:auto}:host(.z-index-n-1){z-index:-1}:host(.z-index-n-2){z-index:-2}:host(.z-index-p-1){z-index:1}:host(.z-index-p-2){z-index:2}";
 
 const PtcOverlay = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.filterColor = undefined;
     this.borderRadius = undefined;
-    this.overlayZIndex = "z-index-auto";
+    this.overlayZIndex = 'z-index-auto';
     this.styles = undefined;
   }
   async setOverlay(overlayName) {

package/dist/esm/ptc-para.entry.js

@@ -0,0 +1,123 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-c83db688.js';
+import { s as seoSlotReset } from './utils-2f12c081.js';
+
+const ptcParaCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{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,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;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{position:relative;z-index:1}:host .tooltip-enabled{position:relative}:host(.white){color:var(--color-white)}:host(.z-1){z-index:1}:host(.z-2){z-index:2}:host(.z-3){z-index:3}:host(.z-99){z-index:99}:host(.z-999){z-index:999}:host(.z-auto){z-index:auto}p.default{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;}p.main{text-shadow:0 3px 6px var(--color-white);line-height:var(--ptc-line-height-dense);color:var(--color-gray-10)}p.primary-grey{color:var(--color-gray-10)}p.primary-green{color:var(--color-green-06)}p.gray-darker{color:var(--color-gray-11)}p.white{color:var(--color-white)}p.xxx-small{font-size:var(--ptc-font-size-xxx-small)}p.xx-small{font-size:var(--ptc-font-size-xx-small)}p.x-small{font-size:var(--ptc-font-size-x-small)}p.small{font-size:var(--ptc-font-size-small)}p.medium{font-size:var(--ptc-font-size-medium)}p.large{font-size:var(--ptc-font-size-large)}p.x-large{font-size:var(--ptc-font-size-x-large)}p.xx-large{font-size:var(--ptc-font-size-xx-large)}p.xxx-large{font-size:var(--ptc-font-size-xxx-large)}p.xxxx-large{font-size:var(--ptc-font-size-xxxx-large)}p.htmlquote-para{font-size:var(--ptc-font-size-small)}@media only screen and (min-width: 992px){p.htmlquote-para{font-size:var(--ptc-font-size-large)}}p.w-3{font-weight:var(--ptc-font-weight-thin)}p.w-4{font-weight:var(--ptc-font-weight-regular)}p.w-5{font-weight:var(--ptc-font-weight-medium)}p.w-6{font-weight:var(--ptc-font-weight-semibold)}p.w-7{font-weight:var(--ptc-font-weight-bold)}p.w-8{font-weight:var(--ptc-font-weight-extrabold)}p.w-8 ::slotted(a){font-weight:var(--ptc-font-weight-extrabold) !important}p.w-9{font-weight:var(--ptc-font-weight-black)}p.w-9 ::slotted(a){font-weight:var(--ptc-font-weight-black) !important}p.margin-flush{margin-top:0;margin-bottom:0}p.margin-top-1{margin-top:var(--ptc-element-spacing-01);margin-bottom:0}p.margin-top-2{margin-top:var(--ptc-element-spacing-02);margin-bottom:0}p.margin-top-3{margin-top:var(--ptc-element-spacing-03);margin-bottom:0}p.margin-top-4{margin-top:var(--ptc-element-spacing-04);margin-bottom:0}p.margin-top-5{margin-top:var(--ptc-element-spacing-05);margin-bottom:0}p.margin-top-6{margin-top:var(--ptc-element-spacing-06);margin-bottom:0}p.margin-bottom-1{margin-bottom:var(--ptc-element-spacing-01);margin-top:0}p.margin-bottom-2{margin-bottom:var(--ptc-element-spacing-02);margin-top:0}p.margin-bottom-3{margin-bottom:var(--ptc-element-spacing-03);margin-top:0}p.margin-bottom-4{margin-bottom:var(--ptc-element-spacing-04);margin-top:0}p.margin-bottom-5{margin-bottom:var(--ptc-element-spacing-05);margin-top:0}p.margin-bottom-6{margin-bottom:var(--ptc-element-spacing-06);margin-top:0}p.margin-1{margin-top:var(--ptc-element-spacing-01);margin-bottom:var(--ptc-element-spacing-01)}p.margin-2{margin-top:var(--ptc-element-spacing-02);margin-bottom:var(--ptc-element-spacing-02)}p.margin-3{margin-top:var(--ptc-element-spacing-03);margin-bottom:var(--ptc-element-spacing-03)}p.margin-4{margin-top:var(--ptc-element-spacing-04);margin-bottom:var(--ptc-element-spacing-04)}p.margin-5{margin-top:var(--ptc-element-spacing-05);margin-bottom:var(--ptc-element-spacing-05)}p.margin-6{margin-top:var(--ptc-element-spacing-06);margin-bottom:var(--ptc-element-spacing-06)}p.line-height-densest{line-height:var(--ptc-line-height-densest)}p.line-height-denser{line-height:var(--ptc-line-height-denser)}p.line-height-p{line-height:var(--ptc-line-height-p)}p.line-height-dense{line-height:var(--ptc-line-height-dense)}p.line-height-normal{line-height:var(--ptc-line-height-normal)}p.line-height-loose{line-height:var(--ptc-line-height-loose)}p.line-height-looser{line-height:var(--ptc-line-height-looser)}p.left{text-align:left}p.right{text-align:right}p.center{text-align:center}p.justify{text-align:justify}p.right-768above{text-align:left}@media (min-width: 768px){p.right-768above{text-align:right}}p.announcement{text-transform:uppercase;font-size:var(--ptc-font-size-small);color:var(--color-gray-07);line-height:var(--ptc-line-height-looser);letter-spacing:var(--ptc-letter-spacing-loose)}p.ellipsis-boxing{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word}p.line-clamp-title{display:-webkit-box !important;-webkit-box-orient:vertical;overflow:hidden}@media (max-width: 768px){:host(.hide-tooltip-on-mobile) .line-clamp-title{-webkit-line-clamp:initial !important}}";
+
+const PtcPara = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.fontSize = 'x-small';
+    this.fontWeight = 'w-4';
+    this.paraStyle = 'default';
+    this.paraColor = 'primary-grey';
+    this.paraLineH = 'line-height-normal';
+    this.paraMargin = undefined;
+    this.paraAlign = undefined;
+    this.ellipsisLineCutoff = undefined;
+    this.paraZIndex = undefined;
+    this.styles = undefined;
+    this.seoCompatibilityMode = false;
+    this.tooltipZIndex = 'auto';
+    this.tooltipPosition = 'bottom';
+    this.tooltipTheme = 'standard';
+    this.enableTooltip = false;
+    this.maxChars = undefined;
+    this.maxLines = undefined;
+    this.hideTooltipOnMobile = false;
+    this.ismob = undefined;
+    this.noOverflow = false;
+    this.tooltipWidth = 'default';
+  }
+  // Tooltip Properties ends
+  render() {
+    if (this.seoCompatibilityMode) {
+      seoSlotReset(this.el);
+    }
+    return this.standardRender();
+  }
+  //tooltip code
+  getSortedText(content) {
+    if (!this.enableTooltip)
+      return;
+    const trimmedContent = content.trim();
+    const shouldTruncate = (trimmedContent.length > this.maxChars) && !this.maxLines;
+    return shouldTruncate ? `${trimmedContent.slice(0, this.maxChars).trimEnd()}\u00A0\u2026` : trimmedContent;
+  }
+  componentDidLoad() {
+    if (this.hideTooltipOnMobile) {
+      this.el.classList.add('hide-tooltip-on-mobile');
+    }
+    this.el.addEventListener('mouseenter', () => { this.toggleTitleTooltip(true); });
+    this.el.addEventListener('mouseleave', () => { this.toggleTitleTooltip(false); });
+    if (this.enableTooltip) {
+      let paraContent = this.el.innerText || this.el.textContent;
+      this.tooltipText = paraContent.trim();
+      this.el.innerText = this.getSortedText(paraContent);
+    }
+  }
+  toggleTitleTooltip(show) {
+    const tooltipClass = 'tooltip-box';
+    const existingTooltip = this.el.querySelector(`.${tooltipClass}`);
+    const text = this.el.shadowRoot.querySelectorAll('.line-clamp-title');
+    let maxLinesShowCheck = false;
+    if (text) {
+      text.forEach(t => {
+        maxLinesShowCheck = t.scrollHeight > t.clientHeight;
+      });
+    }
+    const ifCharExceeds = this.maxChars ? (this.tooltipText.length > this.maxChars) && !this.maxLines : false;
+    const ifLinesExceeds = this.maxLines && maxLinesShowCheck;
+    if (show && this.enableTooltip) {
+      if (((!existingTooltip && ifCharExceeds) || (!existingTooltip && ifLinesExceeds)) && !this.noOverflow) {
+        const tooltipMarkup = document.createElement('div');
+        tooltipMarkup.className = tooltipClass;
+        tooltipMarkup.innerText = this.tooltipText;
+        tooltipMarkup.style.zIndex = String(this.tooltipZIndex); // Ensures zIndex is a string
+        tooltipMarkup.classList.add(this.tooltipPosition, this.tooltipTheme, this.tooltipWidth);
+        if (this.hideTooltipOnMobile) {
+          tooltipMarkup.classList.add('hide-tooltip-mobile');
+        }
+        this.el.appendChild(tooltipMarkup);
+      }
+    }
+    else {
+      existingTooltip === null || existingTooltip === void 0 ? void 0 : existingTooltip.remove();
+    }
+  }
+  //tooltip code ends
+  standardRender() {
+    const classMap = this.getCssClassMap();
+    const colorClass = this.addWhiteClass();
+    const cutOff = this.getLineCuttoff();
+    return (h(Host, { class: `${colorClass} ${this.paraZIndex} trunc-text` }, this.styles && h("style", null, this.styles), h("p", { class: classMap, part: "part-para", style: cutOff }, h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.fontSize]: true,
+      [this.fontWeight]: true,
+      [this.paraStyle]: true,
+      [this.paraMargin]: !!this.paraMargin ? true : false,
+      [this.paraColor]: true,
+      [this.paraLineH]: true,
+      [this.paraAlign]: !!this.paraAlign ? true : false,
+      ['ellipsis-boxing']: this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0,
+      ['line-clamp-title']: this.maxLines && this.maxLines > 0, //tooltip code,
+    };
+  }
+  //WEB-2392
+  addWhiteClass() {
+    if (this.paraColor == 'white') {
+      return {
+        [this.paraColor]: true,
+      };
+    }
+  }
+  getLineCuttoff() {
+    const lineClamp = this.ellipsisLineCutoff > 0 ? this.ellipsisLineCutoff : this.maxLines;
+    return lineClamp > 0 ? { '-webkit-line-clamp': `${lineClamp}` } : {};
+  }
+  get el() { return getElement(this); }
+};
+PtcPara.style = ptcParaCss;
+
+export { PtcPara as ptc_para };