@ptcwebops/ptcw-design 5.9.1 → 5.9.3

package/dist/collection/components/ptc-case-studies-slider/ptc-case-studies-slider.js

@@ -5,57 +5,194 @@ export class PtcCaseStudiesSlider {
     // SLider List
     this.caseStudiesThumbs = null;
     this.caseStudiesSlides = null;
+    this.tabs = [];
+    this.tabPanels = [];
+    this.activeTabIndex = 0;
+    this.firstTab = null;
+    this.lastTab = null;
   }
   componentDidLoad() {
-    this.initSlider();
-    this.slideChangeHandler();
     this.renderSlides('swiper-slide-thumb', 'swiper-wrapper-thumbs');
     this.renderSlides('swiper-slide-content', 'swiper-wrapper-content');
+    this.initializeTabs();
+    this.initSlider();
+    this.slideChangeHandler();
     //Added for preloader skeleton issue
     setTimeout(() => { this.initSlider(); }, 3100);
   }
-  initSlider() {
-    this.caseStudiesThumbs = new Swiper(this.caeStudiesThumbRef, {
-      modules: [Navigation, Pagination, FreeMode, Grid],
-      loop: false,
-      slidesPerView: 'auto',
-      freeMode: true,
-      watchSlidesProgress: true,
-      centerInsufficientSlides: true,
-      breakpoints: {
-        992: {
-          slidesPerView: 7,
-        },
+  // Initialize Tabs
+  initializeTabs() {
+    var _a, _b;
+    const tablist = (_a = this.caeStudiesThumbRef) === null || _a === void 0 ? void 0 : _a.querySelector('.swiper-wrapper-thumbs');
+    if (!tablist)
+      return;
+    // Updated selector to match existing class names
+    this.tabs = Array.from(tablist.querySelectorAll('.swiper-slide-thumb'));
+    this.tabPanels = Array.from(((_b = this.caseStudiesSlidesRef) === null || _b === void 0 ? void 0 : _b.querySelectorAll('.swiper-slide-content')) || []);
+    this.tabs.forEach((tab, index) => {
+      tab.setAttribute('role', 'tab');
+      tab.setAttribute('aria-selected', 'false');
+      tab.setAttribute('aria-controls', `tabpanel-${index}`);
+      tab.setAttribute('tabindex', '-1');
+      tab.id = `tab-${index}`;
+      // Set first and last tab
+      if (index === 0) {
+        this.firstTab = tab;
       }
+      this.lastTab = tab;
     });
-    this.caseStudiesSlides = new Swiper(this.caseStudiesSlidesRef, {
-      modules: [Navigation, Pagination, Thumbs, Autoplay, EffectFade],
-      loop: false,
-      grabCursor: true,
-      effect: 'fade',
-      autoplay: {
-        delay: 10000,
-        disableOnInteraction: false,
-        waitForTransition: true,
-      },
-      thumbs: {
-        swiper: this.caseStudiesThumbs,
-      },
-      pagination: {
-        el: this.paginationRef,
-        clickable: true,
-      },
+    const tablistContainer = this.caeStudiesThumbRef;
+    if (tablistContainer) {
+      tablistContainer.setAttribute('role', 'tablist');
+      tablistContainer.setAttribute('aria-label', 'Case Studies Tabs');
+    }
+    // Select the first tab by default
+    if (this.tabs.length > 0) {
+      this.setSelectedTab(0);
+    }
+  }
+  // Set the selected tab by index
+  setSelectedTab(index) {
+    this.tabs.forEach((tab, i) => {
+      var _a;
+      if (i === index) {
+        tab.setAttribute('aria-selected', 'true');
+        tab.setAttribute('tabindex', '0');
+        this.tabPanels[i].classList.remove('is-hidden');
+        (_a = this.caseStudiesSlides) === null || _a === void 0 ? void 0 : _a.slideTo(i);
+        this.activeTabIndex = i;
+      }
+      else {
+        tab.setAttribute('aria-selected', 'false');
+        tab.setAttribute('tabindex', '-1');
+        this.tabPanels[i].classList.add('is-hidden');
+      }
     });
   }
+  // Handle keyboard navigation
+  handleKeyDown(event) {
+    const tgt = event.currentTarget;
+    let flag = false;
+    switch (event.key) {
+      case 'ArrowRight':
+        this.moveFocusToNextTab(tgt);
+        flag = true;
+        break;
+      case 'ArrowLeft':
+        this.moveFocusToPreviousTab(tgt);
+        flag = true;
+        break;
+      case 'Enter':
+      case ' ':
+        const index = this.tabs.indexOf(tgt);
+        if (index !== -1) {
+          this.setSelectedTab(index);
+          flag = true;
+        }
+        break;
+      default:
+        break;
+    }
+    if (flag) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+  // Move focus to a specific tab
+  moveFocusToTab(currentTab) {
+    currentTab.focus();
+  }
+  // Move focus to the previous tab
+  moveFocusToPreviousTab(currentTab) {
+    if (currentTab === this.firstTab) {
+      if (this.lastTab) {
+        this.moveFocusToTab(this.lastTab);
+      }
+    }
+    else {
+      const index = this.tabs.indexOf(currentTab);
+      if (index > 0) {
+        this.moveFocusToTab(this.tabs[index - 1]);
+      }
+    }
+  }
+  // Move focus to the next tab
+  moveFocusToNextTab(currentTab) {
+    if (currentTab === this.lastTab) {
+      if (this.firstTab) {
+        this.moveFocusToTab(this.firstTab);
+      }
+    }
+    else {
+      const index = this.tabs.indexOf(currentTab);
+      if (index < this.tabs.length - 1) {
+        this.moveFocusToTab(this.tabs[index + 1]);
+      }
+    }
+  }
+  // Handle tab click
+  onClick(index) {
+    this.setSelectedTab(index);
+    this.tabs[index].focus();
+  }
+  initSlider() {
+    if (this.caeStudiesThumbRef && !this.caseStudiesThumbs) {
+      this.caseStudiesThumbs = new Swiper(this.caeStudiesThumbRef, {
+        modules: [Navigation, Pagination, FreeMode, Grid],
+        loop: false,
+        slidesPerView: 'auto',
+        freeMode: true,
+        watchSlidesProgress: true,
+        centerInsufficientSlides: true,
+        breakpoints: {
+          992: {
+            slidesPerView: 7,
+          },
+        },
+      });
+    }
+    if (this.caseStudiesSlidesRef && !this.caseStudiesSlides) {
+      this.caseStudiesSlides = new Swiper(this.caseStudiesSlidesRef, {
+        modules: [Navigation, Pagination, Thumbs, Autoplay, EffectFade],
+        loop: false,
+        grabCursor: true,
+        effect: 'fade',
+        autoplay: {
+          delay: 10000,
+          disableOnInteraction: false,
+          waitForTransition: true,
+        },
+        thumbs: {
+          swiper: this.caseStudiesThumbs,
+        },
+        pagination: {
+          el: this.paginationRef,
+          clickable: true,
+        },
+        keyboard: {
+          enabled: false,
+        },
+      });
+    }
+  }
   slideChangeHandler() {
-    this.caseStudiesSlides.on('slideChange', () => {
-      const visibleSlide = this.caseStudiesSlides.slides[this.caseStudiesSlides.activeIndex];
-      const tagName = visibleSlide.querySelector('ptc-text-copy-with-background').shadowRoot;
-      const content = tagName.querySelector('.card-wrap');
-      const parent = tagName.querySelector('.card-wrap').parentNode;
-      parent.removeChild(content);
-      parent.appendChild(content);
-    });
+    if (this.caseStudiesSlides) {
+      this.caseStudiesSlides.on('slideChange', () => {
+        var _a;
+        const activeIndex = this.caseStudiesSlides.activeIndex;
+        this.setSelectedTab(activeIndex);
+        const visibleSlide = this.caseStudiesSlides.slides[activeIndex];
+        const tagName = (_a = visibleSlide.querySelector('ptc-text-copy-with-background')) === null || _a === void 0 ? void 0 : _a.shadowRoot;
+        if (tagName) {
+          const content = tagName.querySelector('.card-wrap');
+          const parent = content === null || content === void 0 ? void 0 : content.parentNode;
+          if (parent && content) {
+            parent.removeChild(content);
+            parent.appendChild(content);
+          }
+        }
+      });
+    }
   }
   renderSlides(slideName, wrapperName) {
     const slidesList = Array.from(this.hostElement.querySelectorAll('.' + slideName));
@@ -65,17 +202,20 @@ export class PtcCaseStudiesSlider {
         const cloneNode = node.cloneNode(true);
         swiperWrapper.appendChild(cloneNode);
         node.remove;
-        const imageElement = node.querySelector('img');
+        cloneNode.addEventListener('keydown', (event) => this.handleKeyDown(event));
+        cloneNode.addEventListener('click', () => this.onClick(index));
+        const imageElement = cloneNode.querySelector('img');
         if (imageElement) {
           imageElement.addEventListener('click', () => {
-            this.caseStudiesSlides.slideTo(index); // Change the slide to the corresponding index
+            var _a;
+            (_a = this.caseStudiesSlides) === null || _a === void 0 ? void 0 : _a.slideTo(index); // Change the slide to the corresponding index
           });
         }
       });
     }
   }
   render() {
-    return (h(Host, null, h("div", { class: "ptc-container" }, h("div", { class: "case-studies-thumbs", ref: el => this.caeStudiesThumbRef = el }, h("span", { class: "hide" }, h("slot", { name: 'thumb-slides' })), h("div", { class: 'swiper-wrapper swiper-wrapper-thumbs' }))), h("div", { class: "case-studies-slides", ref: el => this.caseStudiesSlidesRef = el }, h("span", { class: "hide" }, h("slot", { name: 'content-slides' })), h("div", { class: 'swiper-wrapper swiper-wrapper-content' }), h("div", { class: "swiper-pagination", ref: el => this.paginationRef = el }))));
+    return (h(Host, null, h("div", { class: "ptc-container" }, h("div", { class: "case-studies-thumbs swiper", ref: el => this.caeStudiesThumbRef = el }, h("span", { class: "hide" }, h("slot", { name: 'thumb-slides' })), h("div", { class: 'swiper-wrapper swiper-wrapper-thumbs' }))), h("div", { class: "case-studies-slides swiper", ref: el => this.caseStudiesSlidesRef = el }, h("span", { class: "hide" }, h("slot", { name: 'content-slides' })), h("div", { class: 'swiper-wrapper swiper-wrapper-content' }), h("div", { class: "swiper-pagination", ref: el => this.paginationRef = el }))));
   }
   static get is() { return "ptc-case-studies-slider"; }
   static get encapsulation() { return "shadow"; }
@@ -89,5 +229,14 @@ export class PtcCaseStudiesSlider {
       "$": ["ptc-case-studies-slider.css"]
     };
   }
+  static get states() {
+    return {
+      "tabs": {},
+      "tabPanels": {},
+      "activeTabIndex": {},
+      "firstTab": {},
+      "lastTab": {}
+    };
+  }
   static get elementRef() { return "hostElement"; }
 }

package/dist/collection/components/ptc-form-checkbox/ptc-form-checkbox.css

@@ -1133,29 +1133,29 @@ ptc-link, ptc-square-card,
 
 .mdc-checkbox {
   transform: translateX(-8px);
-  padding: calc((34px - 18px) / 2);
+  padding: 8px;
   /* @alternate */
   padding: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
-  margin: calc((34px - 34px) / 2);
+  margin: 0px;
   /* @alternate */
   margin: calc((var(--mdc-checkbox-touch-target-size, 34px) - 34px) / 2);
 }
 .mdc-checkbox .mdc-checkbox__background {
-  top: calc((34px - 18px) / 2);
+  top: 8px;
   /* @alternate */
   top: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
-  left: calc((34px - 18px) / 2);
+  left: 8px;
   /* @alternate */
   left: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
 }
 .mdc-checkbox .mdc-checkbox__native-control {
-  top: calc((34px - 34px) / 2);
+  top: 0px;
   /* @alternate */
   top: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
-  right: calc((34px - 34px) / 2);
+  right: 0px;
   /* @alternate */
   right: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
-  left: calc((34px - 34px) / 2);
+  left: 0px;
   /* @alternate */
   left: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
   width: 34px;

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

@@ -1101,7 +1101,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid .u-3-col {
-    width: calc(33.333333333333% - 10.66666666px);
+    width: calc(33.3333333333% - 10.66666666px);
   }
 }
 .u-3-col-grid.u-col-space-lg {
@@ -1118,7 +1118,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid.u-col-space-lg .u-3-col {
-    width: calc(33.333333333333% - 21.3333333px);
+    width: calc(33.3333333333% - 21.3333333px);
   }
 }
 

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

@@ -128,7 +128,7 @@ ptc-link, ptc-square-card,
   width: 1.125rem;
   height: 1.125rem;
   border: 1px solid var(--color-gray-10);
-  border-radius: calc(var(--ptc-border-radius-standard)/2);
+  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 {

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

@@ -1046,7 +1046,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid .u-3-col {
-    width: calc(33.333333333333% - 10.66666666px);
+    width: calc(33.3333333333% - 10.66666666px);
   }
 }
 .u-3-col-grid.u-col-space-lg {
@@ -1063,7 +1063,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid.u-col-space-lg .u-3-col {
-    width: calc(33.333333333333% - 21.3333333px);
+    width: calc(33.3333333333% - 21.3333333px);
   }
 }
 

package/dist/collection/components/ptc-related-card-rail/ptc-related-card-rail.css

@@ -87,6 +87,10 @@ ptc-link, ptc-square-card,
   padding: 15px;
   cursor: pointer;
 }
+:host .card-rail-close:focus-visible {
+  outline: 5px solid var(--keyboard-nav-outline) !important;
+  border-radius: var(--ptc-border-radius-standard) !important;
+}
 :host .card-rail-content {
   display: flex;
   align-items: center;

package/dist/collection/components/ptc-related-card-rail/ptc-related-card-rail.js

@@ -146,7 +146,7 @@ export class PtcRelatedCardRail {
   }
   render() {
     return (this.closed ? null :
-      h(Host, null, h("div", { class: "card-rail-container" }, h("div", { class: "card-rail-header" }, h("div", { class: "card-rail-heading" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-normal", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, this.railTitle)), h("div", { class: "card-rail-close", onClick: () => { this.closed = true; } }, h("icon-asset", { type: "ptc", size: "xx-small", name: "times", color: "gray" }))), h("div", { class: "card-rail-content" }, h("icon-asset", { id: "left-arrow", type: "ptc", size: "small", name: "previous_button_arrow", color: "gray", onClick: this.handlePrevClick }), h("icon-asset", { id: "right-arrow", type: "ptc", size: "small", name: "next_button_arrow", color: "gray", onClick: this.handleNextClick }), h("div", { class: "content-container" }, this.data.map(item => h("div", { class: "content", onClick: () => { window.open(item.href); } }, h("div", { class: "content-image" }, h("img", { alt: item.altText, src: item.image })), h("div", { class: "content-text" }, h("ptc-para", { "ellipsis-line-cutoff": "3", "font-size": this.screenBasedProps.parahFontSize, "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, item.text)))))))));
+      h(Host, null, h("div", { class: "card-rail-container" }, h("div", { class: "card-rail-header" }, h("div", { class: "card-rail-heading" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-normal", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, this.railTitle)), h("div", { id: "card-rail-close", class: "card-rail-close", onClick: () => { this.closed = true; } }, h("icon-asset", { type: "ptc", size: "xx-small", name: "times", color: "gray", tabindex: "0" }))), h("div", { class: "card-rail-content" }, h("icon-asset", { id: "left-arrow", type: "ptc", size: "small", name: "previous_button_arrow", color: "gray", onClick: this.handlePrevClick }), h("icon-asset", { id: "right-arrow", type: "ptc", size: "small", name: "next_button_arrow", color: "gray", onClick: this.handleNextClick }), h("div", { class: "content-container" }, this.data.map(item => h("div", { class: "content", id: "card-rail-content", onClick: () => { window.open(item.href); } }, h("div", { class: "content-image" }, h("img", { alt: item.altText, src: item.image })), h("div", { class: "content-text" }, h("ptc-para", { "ellipsis-line-cutoff": "3", "font-size": this.screenBasedProps.parahFontSize, "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, item.text)))))))));
   }
   static get is() { return "ptc-related-card-rail"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ptc-social-share/ptc-social-share.js

@@ -1,6 +1,7 @@
 import { Host, h } from '@stencil/core';
 export class PtcSocialShare {
   constructor() {
+    this.trackerID = undefined;
     this.display = 'inline-block';
     this.shareType = 'twitter';
     this.shareTitle = undefined;
@@ -15,7 +16,7 @@ export class PtcSocialShare {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, h("div", { onClick: () => this.share(), onMouseEnter: () => this.hoverToggle(), onMouseLeave: () => this.hoverToggle() }, this.shareType == 'mail' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-mail" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'linkedin' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-linkedin" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'twitter' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "twitter-x" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'facebook' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-fb" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-mail' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "mail-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-linkedin' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "linkedin-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-twitter' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "twitter-x-dark-circle" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-facebook' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "facebook-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'share-api' ? h("icon-asset", Object.assign({ type: "solid", size: this.iconSize, name: "share-square" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'download' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "download-arrow-news", color: "inherit" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null), this.shareType == 'download' &&
+    return (h(Host, { class: classMap, id: this.trackerID }, h("div", { onClick: () => this.share(), onMouseEnter: () => this.hoverToggle(), onMouseLeave: () => this.hoverToggle() }, this.shareType == 'mail' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-mail" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'linkedin' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-linkedin" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'twitter' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "twitter-x" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'facebook' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-fb" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-mail' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "mail-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-linkedin' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "linkedin-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-twitter' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "twitter-x-dark-circle" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-facebook' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "facebook-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'share-api' ? h("icon-asset", Object.assign({ type: "solid", size: this.iconSize, name: "share-square" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'download' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "download-arrow-news", color: "inherit" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null), this.shareType == 'download' &&
       h("ptc-modal", { id: "download-modal", show: false, size: "lg", fixed: true, "is-bio-modal": true }, h("ptc-title", { type: 'h2', "text-align": 'center', "title-weight": "w-5", upperline: "no-upperline" }, "Thanks For Downloading"))));
   }
   getCssClassMap() {
@@ -79,6 +80,23 @@ export class PtcSocialShare {
   }
   static get properties() {
     return {
+      "trackerID": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tracker-i-d",
+        "reflect": false
+      },
       "display": {
         "type": "string",
         "mutable": false,

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

@@ -2215,9 +2215,9 @@
 .iti__v-hide {
   visibility: hidden;
 }
-.iti input,
-.iti input[type=text],
-.iti input[type=tel] {
+.iti input.iti__tel-input,
+.iti input.iti__tel-input[type=text],
+.iti input.iti__tel-input[type=tel] {
   position: relative;
   z-index: 0;
   margin-top: 0 !important;
@@ -2256,26 +2256,35 @@
   border-top: none;
   border-bottom: 4px solid #555;
 }
-.iti__country-list {
+.iti__dropdown-content {
   position: absolute;
   z-index: 2;
-  list-style: none;
-  padding: 0;
-  margin: 0 0 0 -1px;
+  margin-left: -1px;
   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
   background-color: white;
   border: 1px solid #ccc;
-  white-space: nowrap;
   max-height: 200px;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
 }
-.iti__country-list--dropup {
+.iti__dropdown-content--dropup {
   bottom: 100%;
   margin-bottom: -1px;
 }
+.iti__search-input {
+  width: 100%;
+  border-width: 0;
+}
+.iti__country-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.iti--flexible-dropdown-width .iti__country-list {
+  white-space: nowrap;
+}
 @media (max-width: 500px) {
-  .iti__country-list {
+  .iti--flexible-dropdown-width .iti__country-list {
     white-space: normal;
   }
 }
@@ -2307,20 +2316,20 @@
   margin-right: 0;
   margin-left: 6px;
 }
-.iti--allow-dropdown input,
-.iti--allow-dropdown input[type=text],
-.iti--allow-dropdown input[type=tel], .iti--separate-dial-code input,
-.iti--separate-dial-code input[type=text],
-.iti--separate-dial-code input[type=tel] {
+.iti--allow-dropdown input.iti__tel-input,
+.iti--allow-dropdown input.iti__tel-input[type=text],
+.iti--allow-dropdown input.iti__tel-input[type=tel], .iti--separate-dial-code input.iti__tel-input,
+.iti--separate-dial-code input.iti__tel-input[type=text],
+.iti--separate-dial-code input.iti__tel-input[type=tel] {
   padding-right: 6px;
   padding-left: 52px;
   margin-left: 0;
 }
-[dir=rtl] .iti--allow-dropdown input,
-[dir=rtl] .iti--allow-dropdown input[type=text],
-[dir=rtl] .iti--allow-dropdown input[type=tel], [dir=rtl] .iti--separate-dial-code input,
-[dir=rtl] .iti--separate-dial-code input[type=text],
-[dir=rtl] .iti--separate-dial-code input[type=tel] {
+[dir=rtl] .iti--allow-dropdown input.iti__tel-input,
+[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text],
+[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel], [dir=rtl] .iti--separate-dial-code input.iti__tel-input,
+[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=text],
+[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=tel] {
   padding-right: 52px;
   padding-left: 6px;
   margin-right: 0;
@@ -2339,12 +2348,12 @@
 .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
   background-color: rgba(0, 0, 0, 0.05);
 }
-.iti--allow-dropdown input[disabled] + .iti__flag-container:hover,
-.iti--allow-dropdown input[readonly] + .iti__flag-container:hover {
+.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover,
+.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover {
   cursor: default;
 }
-.iti--allow-dropdown input[disabled] + .iti__flag-container:hover .iti__selected-flag,
-.iti--allow-dropdown input[readonly] + .iti__flag-container:hover .iti__selected-flag {
+.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover .iti__selected-flag,
+.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover .iti__selected-flag {
   background-color: transparent;
 }
 .iti--separate-dial-code .iti__selected-flag {
@@ -2368,18 +2377,26 @@
   cursor: pointer;
 }
 
-.iti-mobile .iti--container {
-  top: 30px;
-  bottom: 30px;
-  left: 30px;
-  right: 30px;
+.iti--fullscreen-popup.iti--container {
+  background-color: rgba(0, 0, 0, 0.5);
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
   position: fixed;
+  padding: 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.iti--fullscreen-popup.iti--container.iti--country-search {
+  justify-content: flex-start;
 }
-.iti-mobile .iti__country-list {
+.iti--fullscreen-popup .iti__dropdown-content {
   max-height: 100%;
-  width: 100%;
+  position: relative;
 }
-.iti-mobile .iti__country {
+.iti--fullscreen-popup .iti__country {
   padding: 10px 10px;
   line-height: 1.5em;
 }
@@ -2405,7 +2422,7 @@
 .iti__flag.iti__va {
   width: 15px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 2x) {
   .iti__flag {
     background-size: 5762px 15px;
   }
@@ -3471,7 +3488,7 @@
   background-color: #dbdbdb;
   background-position: 20px 0;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 2x) {
   .iti__flag {
     background-image: url("../img/flags@2x.png?1");
   }