@ptcwebops/ptcw-design 6.3.38 → 6.3.39-beta

package/dist/cjs/ptc-data-lookup.cjs.entry.js

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-63ddc79c.js');
-const component = require('./component-35540bfb.js');
-require('./component-1b8ad4d2.js');
+const component = require('./component-6a178a16.js');
 
 // Define the ElqLib class
 class ElqLib {
@@ -541,11 +540,11 @@ const PtcDataLookup = class {
     this.elqRecipientIdLookupKey = undefined;
     this.elqContactLookupKey = undefined;
     this.elqSubscriptionLookupKey = undefined;
-    this.elqFieldEmailRecId = "V_EmailRecipientID";
-    this.elqFieldContactEmail = "C_EmailAddress";
-    this.elqFieldVisitorEmail = "V_Email_Address";
-    this.elqFieldVisitorFirstname = "C_FirstName";
-    this.elqFieldVisitorLastname = "C_LastName";
+    this.elqFieldEmailRecId = 'V_EmailRecipientID';
+    this.elqFieldContactEmail = 'C_EmailAddress';
+    this.elqFieldVisitorEmail = 'V_Email_Address';
+    this.elqFieldVisitorFirstname = 'C_FirstName';
+    this.elqFieldVisitorLastname = 'C_LastName';
     this.notmeLinkId = undefined;
     this.notmeFieldsClass = undefined;
     this.notmeMessage = undefined;
@@ -582,61 +581,25 @@ const PtcDataLookup = class {
     this.isInitialized = true;
   }
   populateBlindField() {
-    this.elqLib.add_field_mapping({
-      elementId: "contact-phone",
-      elqFieldName: "C_BusPhone",
-    });
-    this.elqLib.add_field_mapping({
-      elementId: "contact-email",
-      elqFieldName: "C_EmailAddress",
-    });
-    this.elqLib.add_field_mapping({
-      elementId: "contact-firstname",
-      elqFieldName: "C_FirstName",
-    });
-    this.elqLib.add_field_mapping({
-      elementId: "contact-lastname",
-      elqFieldName: "C_LastName",
-    });
-    this.elqLib.add_field_mapping({
-      elementId: "contact-country",
-      elqFieldName: "C_Country",
-    });
-    this.elqLib.add_field_mapping({
-      elementId: "contact-phone",
-      elqFieldName: "C_BusPhone",
-    });
-    this.elqLib.add_field_mapping({
-      elementId: "company",
-      elqFieldName: "C_Company",
-    });
-    this.elqLib.add_field_mapping({
-      elementId: "contact-state",
-      elqFieldName: "C_State_Prov",
-    });
-    this.elqLib.add_field_mapping({
-      elementId: "contact-zipcode",
-      elqFieldName: "C_Zip_Postal",
-    });
-    this.elqLib.add_field_mapping({
-      elementId: "contact-job-category",
-      elqFieldName: "C_Job_Role1",
-    });
-    this.elqLib.add_field_mapping({
-      elementId: "contact-job-function",
-      elqFieldName: "C_Job_Function1",
-    });
-    this.elqLib.add_field_mapping({
-      elementId: "contact-jp-job-title",
-      elqFieldName: "C_Title",
-    });
+    this.elqLib.add_field_mapping({ elementId: 'contact-phone', elqFieldName: 'C_BusPhone' });
+    this.elqLib.add_field_mapping({ elementId: 'contact-email', elqFieldName: 'C_EmailAddress' });
+    this.elqLib.add_field_mapping({ elementId: 'contact-firstname', elqFieldName: 'C_FirstName' });
+    this.elqLib.add_field_mapping({ elementId: 'contact-lastname', elqFieldName: 'C_LastName' });
+    this.elqLib.add_field_mapping({ elementId: 'contact-country', elqFieldName: 'C_Country' });
+    this.elqLib.add_field_mapping({ elementId: 'contact-phone', elqFieldName: 'C_BusPhone' });
+    this.elqLib.add_field_mapping({ elementId: 'company', elqFieldName: 'C_Company' });
+    this.elqLib.add_field_mapping({ elementId: 'contact-state', elqFieldName: 'C_State_Prov' });
+    this.elqLib.add_field_mapping({ elementId: 'contact-zipcode', elqFieldName: 'C_Zip_Postal' });
+    this.elqLib.add_field_mapping({ elementId: 'contact-job-category', elqFieldName: 'C_Job_Role1' });
+    this.elqLib.add_field_mapping({ elementId: 'contact-job-function', elqFieldName: 'C_Job_Function1' });
+    this.elqLib.add_field_mapping({ elementId: 'contact-jp-job-title', elqFieldName: 'C_Title' });
   }
   getCookie(name) {
     let cookieValue = null;
     if (document.cookie) {
-      const cookies = document.cookie.split(";");
+      const cookies = document.cookie.split(';');
       for (let cookie of cookies) {
-        const [key, value] = cookie.trim().split("=");
+        const [key, value] = cookie.trim().split('=');
         if (key === name) {
           cookieValue = decodeURIComponent(value);
           break;
@@ -646,22 +609,22 @@ const PtcDataLookup = class {
     return cookieValue;
   }
   init_notme() {
-    const topAdditional = document.getElementById("not-me-additional-top");
-    const bottomAdditional = document.getElementById("not-me-additional-bottom");
+    const topAdditional = document.getElementById('not-me-additional-top');
+    const bottomAdditional = document.getElementById('not-me-additional-bottom');
     if (topAdditional)
-      topAdditional.style.display = "none";
+      topAdditional.style.display = 'none';
     if (bottomAdditional)
-      bottomAdditional.style.display = "none";
+      bottomAdditional.style.display = 'none';
   }
   async performDataLookup() {
     if (this.isInitialized) {
-      this.elqLib.user_elq_email = this.getCookie("elq-uid");
+      this.elqLib.user_elq_email = this.getCookie('elq-uid');
       this.elqLib.find_eloqua_contact();
     }
   }
   async performSubscriptionLookup() {
     if (this.isInitialized) {
-      this.elqLib.user_elq_email = this.getCookie("elq-uid");
+      this.elqLib.user_elq_email = this.getCookie('elq-uid');
       this.elqLib.find_eloqua_subscription_info();
     }
   }

package/dist/cjs/ptc-date.cjs.entry.js

@@ -12,11 +12,11 @@ const PtcDate = class {
     this.year = 1900;
     this.month = 0;
     this.day = 1;
-    this.country = "en-US";
+    this.country = 'en-US';
     this.dateString = undefined;
     this.dateColor = undefined;
     this.dateStyles = undefined;
-    this.dataSize = "small";
+    this.dataSize = 'small';
     this.formatOptions = undefined;
   }
   render() {
@@ -31,7 +31,7 @@ const PtcDate = class {
     };
   }
   getOptions() {
-    let result = { year: "numeric", month: "short", day: "numeric" };
+    let result = { year: 'numeric', month: 'short', day: 'numeric' };
     if (this.formatOptions) {
       try {
         var json = JSON.parse(this.formatOptions);
@@ -48,7 +48,7 @@ const PtcDate = class {
   }
   getDate() {
     if (this.dateString) {
-      let newDate = new Date(this.dateString.replace(/-/g, "/"));
+      let newDate = new Date(this.dateString.replace(/-/g, '/'));
       return newDate;
     }
     else {

package/dist/cjs/ptc-dropdown.cjs.entry.js

@@ -11,7 +11,7 @@ const PtcDropdown = class {
     index.registerInstance(this, hostRef);
     this.clickedItem = index.createEvent(this, "clickedItem", 7);
     this.handleClick = (item) => {
-      this.listItems.forEach((item) => (item.selected = undefined));
+      this.listItems.forEach((item) => item.selected = undefined);
       item.selected = true;
       this.selectedItem = item;
       this.toggle = !this.toggle;
@@ -20,7 +20,7 @@ const PtcDropdown = class {
     this.toggleList = () => {
       this.toggle = !this.toggle;
     };
-    this.theme = "sort";
+    this.theme = 'sort';
     this.label = undefined;
     this.listItems = undefined;
     this.toggle = false;
@@ -33,20 +33,20 @@ const PtcDropdown = class {
     }
   }
   componentWillLoad() {
-    let items = this.host.querySelectorAll("item");
+    let items = this.host.querySelectorAll('item');
     if (!this.listItems) {
       this.listItems = [];
     }
-    items.forEach((item) => {
-      if (item && item.getAttribute("label")) {
+    items.forEach(item => {
+      if (item && item.getAttribute('label')) {
         let listItem = {
           element: item,
-          label: item.getAttribute("label"),
-          value: item.getAttribute("value"),
-          selected: item.hasAttribute("selected"),
+          label: item.getAttribute('label'),
+          value: item.getAttribute('value'),
+          selected: item.hasAttribute('selected')
         };
         this.listItems.push(listItem);
-        if (item.hasAttribute("selected")) {
+        if (item.hasAttribute('selected')) {
           this.selectedItem = listItem;
         }
       }
@@ -54,22 +54,19 @@ const PtcDropdown = class {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (index.h("div", { class: classMap }, index.h("header", { id: this.trackerId, class: "dropdown__header mf-listen", onClick: this.toggleList, tabindex: "0", onKeyPress: this.toggleList }, index.h("label", null, index.h("b", null, this.label), " ", this.selectedItem
-      ? this.selectedItem.label
-      : "Select Option"), index.h("icon-asset", { type: "solid", size: "x-small", name: "chevron-down" })), this.toggle && (index.h("ul", { id: this.trackerId + `ul`, tabIndex: -1, class: "dropdown__list mf-listen", onBlur: () => {
-        this.toggle = false;
-      } }, this.listItems.map((item) => {
-      let cssClass = "dropdown__item mf-listen";
-      if (item.selected) {
-        cssClass += " selected";
-      }
-      return (index.h("li", { class: cssClass, id: item.label + this.trackerId, onClick: () => this.handleClick(item), tabindex: "0", onKeyPress: () => this.handleClick(item) }, item.label));
-    })))));
+    return (index.h("div", { class: classMap }, index.h("header", { id: this.trackerId, class: "dropdown__header mf-listen", onClick: this.toggleList, tabindex: "0", onKeyPress: this.toggleList }, index.h("label", null, index.h("b", null, this.label), " ", this.selectedItem ? this.selectedItem.label : "Select Option"), index.h("icon-asset", { type: "solid", size: "x-small", name: "chevron-down" })), this.toggle &&
+      index.h("ul", { id: this.trackerId + `ul`, tabIndex: -1, class: "dropdown__list mf-listen", onBlur: () => { this.toggle = false; } }, this.listItems.map((item) => {
+        let cssClass = "dropdown__item mf-listen";
+        if (item.selected) {
+          cssClass += " selected";
+        }
+        return (index.h("li", { class: cssClass, id: item.label + this.trackerId, onClick: () => this.handleClick(item), tabindex: "0", onKeyPress: () => this.handleClick(item) }, item.label));
+      }))));
   }
   getCssClassMap() {
     return {
-      ["ptc-dropdown"]: true,
-      [this.theme]: true,
+      ['ptc-dropdown']: true,
+      [this.theme]: true
     };
   }
   get host() { return index.getElement(this); }

package/dist/cjs/ptc-dynamic-card.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-63ddc79c.js');
 
-const ptcDynamicCardCss = "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}:host(.sequential) .card-wrapper{position:relative;cursor:pointer;outline:none}:host(.sequential) .card-wrapper:focus-visible{transition:none;border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline);z-index:1}:host(.sequential) .card{background-color:var(--color-gray-12);overflow:hidden}:host(.sequential) .card.hide{display:none}:host(.sequential) .card.show{display:block}:host(.sequential) .card-mobile,:host(.sequential) .card-dt-open{display:block}:host(.sequential) .card-mobile ptc-card-content,:host(.sequential) .card-dt-open ptc-card-content{display:flex;flex-basis:38%;justify-content:flex-start;align-items:center;padding:var(--ptc-element-spacing-06)}@media only screen and (min-width: 1200px){:host(.sequential) .card-mobile ptc-card-content,:host(.sequential) .card-dt-open ptc-card-content{height:unset;flex:0 0 310px}}:host(.sequential) .card-mobile ptc-picture,:host(.sequential) .card-dt-open ptc-picture{flex:1 1 auto}:host(.sequential) .card-mobile .card-title h3,:host(.sequential) .card-dt-open .card-title h3{color:var(--color-white);font-size:var(--ptc-font-size-medium);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);margin-bottom:0rem;margin-block-start:0rem;letter-spacing:var(--ptc-letter-spacing-normal)}@media only screen and (min-width: 768px){:host(.sequential) .card-mobile .card-title h3,:host(.sequential) .card-dt-open .card-title h3{font-size:var(--ptc-font-size-large)}}:host(.sequential) .card-mobile .card-content,:host(.sequential) .card-dt-open .card-content{margin-top:var(--ptc-element-spacing-03)}:host(.sequential) .card-mobile{max-width:320px;min-width:226px;position:relative}@media only screen and (min-width: 480px){:host(.sequential) .card-mobile{max-width:350px}}:host(.sequential) .card-mobile::before{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:5px;transition:background-color var(--ptc-transition-medium) var(--ptc-ease-out);background-color:transparent}:host(.sequential) .card-mobile ptc-card-content{align-items:flex-start}:host(.sequential) .card-dt-closed{width:135px;height:424px;position:relative}:host(.sequential) .card-dt-closed .closed-content{position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center}:host(.sequential) .card-dt-closed .card-title{text-align:center}:host(.sequential) .card-dt-closed .card-title h2{color:var(--color-white);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);margin-bottom:0rem;margin-block-start:0rem;letter-spacing:var(--ptc-letter-spacing-normal);padding-left:var(--ptc-element-spacing-02);padding-right:var(--ptc-element-spacing-02)}@media only screen and (min-width: 1440px){:host(.sequential) .card-dt-closed .card-title h2{font-size:var(--ptc-font-size-small)}}:host(.sequential) .card-dt-open{border-top:5px solid var(--color-green-05);display:flex;max-width:790px;transition:width var(--ptc-transition-x-fast) var(--ptc-ease-out)}@media only screen and (min-width: 1440px){:host(.sequential) .card-dt-open{max-width:825px}}:host(.sequential) .card-dt-open:not([hidden]){height:480px}@media only screen and (min-width: 1200px){:host(.sequential) .card-dt-open:not([hidden]){min-width:600px}}:host(.sequential):host(.active) .card-mobile::before{background-color:var(--color-green-05)}";
+const ptcDynamicCardCss = "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}:host(.sequential) .card-wrapper{position:relative;cursor:pointer;outline:none}:host(.sequential) .card-wrapper:focus-visible{transition:none;border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline);z-index:1}:host(.sequential) .card{background-color:var(--color-gray-12);overflow:hidden}:host(.sequential) .card.hide{display:none}:host(.sequential) .card.show{display:block}:host(.sequential) .card-mobile,:host(.sequential) .card-dt-open{display:block}:host(.sequential) .card-mobile ptc-card-content,:host(.sequential) .card-dt-open ptc-card-content{display:flex;flex-basis:38%;justify-content:flex-start;align-items:center;padding:var(--ptc-element-spacing-06)}@media only screen and (min-width: 1200px){:host(.sequential) .card-mobile ptc-card-content,:host(.sequential) .card-dt-open ptc-card-content{height:unset;flex:0 0 310px}}:host(.sequential) .card-mobile ptc-picture,:host(.sequential) .card-dt-open ptc-picture{flex:1 1 auto}:host(.sequential) .card-mobile .card-title h3,:host(.sequential) .card-dt-open .card-title h3{color:var(--color-white);font-size:var(--ptc-font-size-medium);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);margin-bottom:0rem;margin-block-start:0rem;letter-spacing:var(--ptc-letter-spacing-normal)}@media only screen and (min-width: 768px){:host(.sequential) .card-mobile .card-title h3,:host(.sequential) .card-dt-open .card-title h3{font-size:var(--ptc-font-size-large)}}:host(.sequential) .card-mobile .card-content,:host(.sequential) .card-dt-open .card-content{margin-top:var(--ptc-element-spacing-03)}:host(.sequential) .card-mobile{max-width:320px;min-width:226px;position:relative}@media only screen and (min-width: 480px){:host(.sequential) .card-mobile{max-width:350px}}:host(.sequential) .card-mobile::before{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:5px;transition:background-color var(--ptc-transition-medium) var(--ptc-ease-out);background-color:transparent}:host(.sequential) .card-mobile ptc-card-content{align-items:flex-start}:host(.sequential) .card-dt-closed{width:135px;height:424px;position:relative}:host(.sequential) .card-dt-closed .closed-content{position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center}:host(.sequential) .card-dt-closed .card-title{text-align:center}:host(.sequential) .card-dt-closed .card-title h2{color:var(--color-white);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);margin-bottom:0rem;margin-block-start:0rem;letter-spacing:var(--ptc-letter-spacing-normal);padding-left:var(--ptc-element-spacing-02);padding-right:var(--ptc-element-spacing-02)}@media only screen and (min-width: 1440px){:host(.sequential) .card-dt-closed .card-title h2{font-size:var(--ptc-font-size-small)}}:host(.sequential) .card-dt-open{border-top:5px solid var(--color-green-05);display:flex;max-width:790px;transition:width var(--ptc-transition-x-fast) var(--ptc-ease-out)}@media only screen and (min-width: 1440px){:host(.sequential) .card-dt-open{max-width:825px}}:host(.sequential) .card-dt-open:not([hidden]){height:480px}@media only screen and (min-width: 1200px){:host(.sequential) .card-dt-open:not([hidden]){min-width:675px}}:host(.sequential):host(.active) .card-mobile::before{background-color:var(--color-green-05)}";
 
 const PtcDynamicCard = class {
   constructor(hostRef) {
@@ -25,18 +25,18 @@ const PtcDynamicCard = class {
      */
     this.handleKeyDown = (event) => {
       switch (event.key) {
-        case "Enter":
+        case 'Enter':
           //event.preventDefault();
           this.openCard();
           break;
       }
     };
-    this.dotSvg = index.getAssetPath("./media/nav-active-dotslick.svg");
-    this.cardType = "sequential";
-    this.cardTitle = "Card Title Goes Here";
+    this.dotSvg = index.getAssetPath('./media/nav-active-dotslick.svg');
+    this.cardType = 'sequential';
+    this.cardTitle = 'Card Title Goes Here';
     this.cardImgSrc = undefined;
     this.cardImgAlt = undefined;
-    this.cardScreen = "desktop";
+    this.cardScreen = 'desktop';
     this.isExpanded = false;
     this.overlayExists = true;
     this.styles = undefined;
@@ -44,8 +44,8 @@ const PtcDynamicCard = class {
   }
   componentDidLoad() {
     // Handle mouse enter and leave for overlay
-    this.el.addEventListener("mouseenter", () => (this.overlayExists = false));
-    this.el.addEventListener("mouseleave", () => (this.overlayExists = true));
+    this.el.addEventListener('mouseenter', () => (this.overlayExists = false));
+    this.el.addEventListener('mouseleave', () => (this.overlayExists = true));
   }
   /**
    * Listen for 'cardOpened' events on the document to close other cards
@@ -60,7 +60,7 @@ const PtcDynamicCard = class {
    * Focus the card-wrapper element
    */
   async focusCardWrapper() {
-    const cardWrapper = this.el.querySelector(".card-wrapper");
+    const cardWrapper = this.el.querySelector('.card-wrapper');
     if (cardWrapper) {
       cardWrapper.focus();
     }
@@ -126,12 +126,7 @@ const PtcDynamicCard = class {
   // }
   render() {
     const classMap = this.getCssClassMap();
-    return (index.h(index.Host, { class: classMap }, this.styles && index.h("style", null, this.styles), index.h("div", { class: "card-wrapper mf-listen", role: "button", tabindex: "0", "aria-expanded": this.isExpanded, onClick: this.openCard, onKeyDown: this.handleKeyDown }, this.cardScreen === "mobile" ? (index.h("div", { class: "card card-mobile mf-listen", id: this.trackerId }, index.h("ptc-picture", { height: "287", "is-full-width": true, alt: this.cardImgAlt, src: this.cardImgSrc }), index.h("ptc-card-content", { "card-type": "card-dynamic", styles: ":host(.card-dynamic){height: auto;}" }, index.h("div", { class: "card-title" }, index.h("h3", null, this.cardTitle)), index.h("div", { class: "card-content" }, index.h("slot", null))))) : (index.h("div", null, index.h("div", Object.assign({}, (!this.isExpanded && {
-      hidden: "until-found",
-    }), {
-      /* @ts-ignore */
-      onBeforeMatch: this.openCard.bind(this), class: `card mf-listen ${this.isExpanded && "card-dt-open"}`, id: this.trackerId
-    }), index.h("ptc-card-content", { "card-type": "card-dynamic" }, index.h("div", { class: "card-title" }, index.h("h3", null, this.cardTitle)), index.h("div", { class: "card-content" }, index.h("slot", null))), index.h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "is-full-width": "true", "is-full-height": "true", "image-alignment": "center" })), index.h("div", { class: `card card-dt-closed mf-listen ${this.isExpanded ? "hide" : "show"}`, id: this.trackerId }, index.h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "image-position": "relative", "is-full-width": true, height: "424" }, this.overlayExists ? (index.h("ptc-overlay", { "filter-color": "solid-black-1" })) : (index.h("ptc-overlay", { "filter-color": "solid-black-2" }))), index.h("div", { class: "closed-content", "card-type": "card-dynamic" }, index.h("div", { class: "card-title" }, index.h("h2", null, this.cardTitle))))))), this.cardScreen === "desktop" && (index.h("div", { hidden: true }, index.h("svg", null, index.h("use", { href: `${this.dotSvg}` }))))));
+    return (index.h(index.Host, { class: classMap }, this.styles && index.h("style", null, this.styles), index.h("div", { class: "card-wrapper mf-listen", role: "button", tabindex: "0", "aria-expanded": this.isExpanded, onClick: this.openCard, onKeyDown: this.handleKeyDown }, this.cardScreen === 'mobile' ? (index.h("div", { class: "card card-mobile mf-listen", id: this.trackerId }, index.h("ptc-picture", { height: "287", "is-full-width": true, alt: this.cardImgAlt, src: this.cardImgSrc }), index.h("ptc-card-content", { "card-type": "card-dynamic", styles: ":host(.card-dynamic){height: auto;}" }, index.h("div", { class: "card-title" }, index.h("h3", null, this.cardTitle)), index.h("div", { class: "card-content" }, index.h("slot", null))))) : (index.h("div", null, index.h("div", Object.assign({}, !this.isExpanded && { hidden: 'until-found' }, { onBeforeMatch: this.openCard.bind(this), class: `card mf-listen ${this.isExpanded && 'card-dt-open'}`, id: this.trackerId }), index.h("ptc-card-content", { "card-type": "card-dynamic" }, index.h("div", { class: "card-title" }, index.h("h3", null, this.cardTitle)), index.h("div", { class: "card-content" }, index.h("slot", null))), index.h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "is-full-width": "true", "is-full-height": "true", "image-alignment": "center" })), index.h("div", { class: `card card-dt-closed mf-listen ${this.isExpanded ? 'hide' : 'show'}`, id: this.trackerId }, index.h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "image-position": "relative", "is-full-width": true, height: "424" }, this.overlayExists ? (index.h("ptc-overlay", { "filter-color": "solid-black-1" })) : (index.h("ptc-overlay", { "filter-color": "solid-black-2" }))), index.h("div", { class: "closed-content", "card-type": "card-dynamic" }, index.h("div", { class: "card-title" }, index.h("h2", null, this.cardTitle))))))), this.cardScreen === 'desktop' && (index.h("div", { hidden: true }, index.h("svg", null, index.h("use", { href: `${this.dotSvg}` }))))));
   }
   static get assetsDirs() { return ["media"]; }
   get el() { return index.getElement(this); }

package/dist/cjs/ptc-ellipsis-dropdown.cjs.entry.js

@@ -29,7 +29,7 @@ const PtcEllipsisDropdown = class {
     this.itemSelected.emit(e);
   }
   offClick(e) {
-    let container = this.host.shadowRoot.querySelector(".ptc-ellipsis-dropdown");
+    let container = this.host.shadowRoot.querySelector('.ptc-ellipsis-dropdown');
     if (e && !this.host.contains(e.target) && this.isDropdownOpen) {
       container.classList.remove("show");
       this.isDropdownOpen = false;
@@ -41,10 +41,10 @@ const PtcEllipsisDropdown = class {
   }
   onEscClicked() {
     var _a;
-    let container = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".ptc-ellipsis-dropdown");
+    let container = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ptc-ellipsis-dropdown');
     //this.host.focus();
     if (container) {
-      container.classList.remove("show");
+      container.classList.remove('show');
       this.isDropdownOpen = false;
     }
   }
@@ -60,27 +60,27 @@ const PtcEllipsisDropdown = class {
     if (event.shiftKey) ;
     else {
       switch (key) {
-        case "Up":
-        case "ArrowUp":
+        case 'Up':
+        case 'ArrowUp':
           this.setFocusToPreviousMenuitem(tgt);
           flag = true;
           break;
-        case "ArrowDown":
-        case "Down":
+        case 'ArrowDown':
+        case 'Down':
           this.setFocusToNextMenuitem(tgt);
           flag = true;
           break;
-        case "Home":
-        case "PageUp":
+        case 'Home':
+        case 'PageUp':
           this.setFocusToFirstMenuitem();
           flag = true;
           break;
-        case "End":
-        case "PageDown":
+        case 'End':
+        case 'PageDown':
           this.setFocusToLastMenuitem();
           flag = true;
           break;
-        case "Tab":
+        case 'Tab':
           this.onEscClicked();
           break;
       }
@@ -135,56 +135,43 @@ const PtcEllipsisDropdown = class {
     this.isMobile = window.innerWidth < 768 || screen.width < 768;
     this.isIPad = window.innerWidth < 992 || screen.width < 992;
     setTimeout(() => {
-      this.menuitems =
-        this.host.shadowRoot.querySelectorAll("dropdown-item");
+      this.menuitems = this.host.shadowRoot.querySelectorAll('dropdown-item');
       for (var i = 0; i < this.menuitems.length; i++) {
         var menuitem = this.menuitems[i];
         this.menuitemNodes.push(menuitem);
         menuitem.tabIndex = -1;
-        menuitem.addEventListener("keydown", this.onMenuitemKeydown.bind(this));
+        menuitem.addEventListener('keydown', this.onMenuitemKeydown.bind(this));
         if (!this.firstMenuitem) {
           this.firstMenuitem = menuitem;
         }
         this.lastMenuitem = menuitem;
       }
     }, 100);
-    const ellp = this.host.shadowRoot.querySelector(".ptc-ellipsis-dropdown");
-    this.host.addEventListener("keydown", (event) => {
+    const ellp = this.host.shadowRoot.querySelector('.ptc-ellipsis-dropdown');
+    this.host.addEventListener('keydown', (event) => {
       // Open dropdown on 'Enter' key press
-      if (event.key === "Enter") {
+      if (event.key === 'Enter') {
         ellp.click();
       }
-      if (event.key === "ArrowDown") {
-        this.host.shadowRoot
-          .querySelectorAll("dropdown-item")[0]
-          .focus();
+      if (event.key === 'ArrowDown') {
+        this.host.shadowRoot.querySelectorAll('dropdown-item')[0].focus();
       }
     });
-    if (this.isMobile ||
-      (this.isIPad && this.dropdownType === "tab-with-banner")) {
-      this.host.setAttribute("tabindex", "0");
+    if (this.isMobile || (this.isIPad && this.dropdownType === 'tab-with-banner')) {
+      this.host.setAttribute('tabindex', '0');
     }
   }
   render() {
-    let activeTab = this.dataItems.find((z) => z.isSelected == true);
+    let activeTab = this.dataItems.find(z => z.isSelected == true);
     let isActive = false;
     if (activeTab) {
       isActive = true;
     }
-    return (index.h("div", { class: this.dropdownType == "tab-with-banner"
-        ? "ptc-ellipsis-dropdown tab-with-banner"
-        : "ptc-ellipsis-dropdown default", onClick: (e) => this.dropdownToggle(e) }, this.isMobile ||
-      (this.isIPad && this.dropdownType === "tab-with-banner") ? (index.h("div", { class: "mob-drop" }, index.h("span", { class: "opt-name" }, this.dataItems.map((item) => item.isSelected ? item.text : "")), index.h("svg", { width: "12", height: "9", viewBox: "0 0 12 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M1 1.65723L5.94975 6.60697L10.8995 1.65723", stroke: "#00890B", "stroke-width": "2", "stroke-linecap": "round" })))) : (index.h("div", { class: isActive || this.isDropdownOpen
-        ? "ellipsis-icon active"
-        : "ellipsis-icon" }, index.h("icon-asset", { type: "ptc", size: "xxx-small", name: "ellipsis", color: isActive || this.isDropdownOpen
-        ? "white"
-        : "black" }))), index.h("div", { class: "dropdown-container", role: "menu", "aria-labelledby": "menubutton1" }, index.h("slot", { name: "dropdown" }), this.dataItems.map((dataItem) => {
-      let activeClass = dataItem.value == this.selectedTab ? "active" : "";
-      let activeDropdown = dataItem.isSelected
-        ? "selected-drop"
-        : "";
-      return (index.h("dropdown-item", { role: "menuitem", class: activeClass + activeDropdown + "mf-listen", onKeyDown: (e) => {
-          if (e.key === "Enter") {
+    return (index.h("div", { class: this.dropdownType == 'tab-with-banner' ? "ptc-ellipsis-dropdown tab-with-banner" : "ptc-ellipsis-dropdown default", onClick: (e) => this.dropdownToggle(e) }, (this.isMobile || (this.isIPad && this.dropdownType === 'tab-with-banner')) ? (index.h("div", { class: 'mob-drop' }, index.h("span", { class: 'opt-name' }, this.dataItems.map((item) => item.isSelected ? item.text : '')), index.h("svg", { width: "12", height: "9", viewBox: "0 0 12 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M1 1.65723L5.94975 6.60697L10.8995 1.65723", stroke: "#00890B", "stroke-width": "2", "stroke-linecap": "round" })))) : (index.h("div", { class: isActive || this.isDropdownOpen ? "ellipsis-icon active" : "ellipsis-icon" }, index.h("icon-asset", { type: "ptc", size: "xxx-small", name: "ellipsis", color: isActive || this.isDropdownOpen ? 'white' : 'black' }))), index.h("div", { class: "dropdown-container", role: "menu", "aria-labelledby": "menubutton1" }, index.h("slot", { name: "dropdown" }), this.dataItems.map((dataItem) => {
+      let activeClass = dataItem.value == this.selectedTab ? 'active' : '';
+      let activeDropdown = dataItem.isSelected ? 'selected-drop' : '';
+      return (index.h("dropdown-item", { role: "menuitem", class: activeClass + activeDropdown + 'mf-listen', onKeyDown: (e) => {
+          if (e.key === 'Enter') {
             e.preventDefault();
             this.onItemSelected(dataItem);
           }