@ptcwebops/ptcw-design 6.3.37 → 6.3.38

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

@@ -1,14 +1,14 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class PtcDate {
   constructor() {
     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() {
@@ -23,7 +23,7 @@ export class PtcDate {
     };
   }
   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);
@@ -40,7 +40,7 @@ export class PtcDate {
   }
   getDate() {
     if (this.dateString) {
-      let newDate = new Date(this.dateString.replace(/-/g, '/'));
+      let newDate = new Date(this.dateString.replace(/-/g, "/"));
       return newDate;
     }
     else {
@@ -131,7 +131,7 @@ export class PtcDate {
         },
         "attribute": "country",
         "reflect": false,
-        "defaultValue": "'en-US'"
+        "defaultValue": "\"en-US\""
       },
       "dateString": {
         "type": "string",
@@ -154,7 +154,7 @@ export class PtcDate {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'white' | 'primary-grey'",
+          "original": "\"white\" | \"primary-grey\"",
           "resolved": "\"primary-grey\" | \"white\"",
           "references": {}
         },
@@ -188,7 +188,7 @@ export class PtcDate {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'medium' | 'small'",
+          "original": "\"medium\" | \"small\"",
           "resolved": "\"medium\" | \"small\"",
           "references": {}
         },
@@ -200,7 +200,7 @@ export class PtcDate {
         },
         "attribute": "data-size",
         "reflect": false,
-        "defaultValue": "'small'"
+        "defaultValue": "\"small\""
       },
       "formatOptions": {
         "type": "string",

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

@@ -10,8 +10,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -30,8 +32,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

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

@@ -1,8 +1,8 @@
-import { h } from '@stencil/core';
+import { h, } from "@stencil/core";
 export class PtcDropdown {
   constructor() {
     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;
@@ -11,7 +11,7 @@ export class PtcDropdown {
     this.toggleList = () => {
       this.toggle = !this.toggle;
     };
-    this.theme = 'sort';
+    this.theme = "sort";
     this.label = undefined;
     this.listItems = undefined;
     this.toggle = false;
@@ -24,20 +24,20 @@ export class PtcDropdown {
     }
   }
   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;
         }
       }
@@ -45,19 +45,22 @@ export class PtcDropdown {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h("div", { class: classMap }, h("header", { id: this.trackerId, class: "dropdown__header mf-listen", onClick: this.toggleList, tabindex: "0", onKeyPress: this.toggleList }, h("label", null, h("b", null, this.label), " ", this.selectedItem ? this.selectedItem.label : "Select Option"), h("icon-asset", { type: "solid", size: "x-small", name: "chevron-down" })), this.toggle &&
-      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 (h("li", { class: cssClass, id: item.label + this.trackerId, onClick: () => this.handleClick(item), tabindex: "0", onKeyPress: () => this.handleClick(item) }, item.label));
-      }))));
+    return (h("div", { class: classMap }, h("header", { id: this.trackerId, class: "dropdown__header mf-listen", onClick: this.toggleList, tabindex: "0", onKeyPress: this.toggleList }, h("label", null, h("b", null, this.label), " ", this.selectedItem
+      ? this.selectedItem.label
+      : "Select Option"), h("icon-asset", { type: "solid", size: "x-small", name: "chevron-down" })), this.toggle && (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 (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,
     };
   }
   static get is() { return "ptc-dropdown"; }
@@ -78,7 +81,7 @@ export class PtcDropdown {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'sort' | 'support'",
+          "original": "\"sort\" | \"support\"",
           "resolved": "\"sort\" | \"support\"",
           "references": {}
         },
@@ -90,7 +93,7 @@ export class PtcDropdown {
         },
         "attribute": "theme",
         "reflect": false,
-        "defaultValue": "'sort'"
+        "defaultValue": "\"sort\""
       },
       "label": {
         "type": "string",

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

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -79,10 +83,12 @@ ptc-link, ptc-square-card,
 :host(.sequential) .card.show {
   display: block;
 }
-:host(.sequential) .card-mobile, :host(.sequential) .card-dt-open {
+: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 {
+:host(.sequential) .card-mobile ptc-card-content,
+:host(.sequential) .card-dt-open ptc-card-content {
   display: flex;
   flex-basis: 38%;
   justify-content: flex-start;
@@ -90,15 +96,18 @@ ptc-link, ptc-square-card,
   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 {
+  :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 {
+: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 {
+: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);
@@ -108,11 +117,13 @@ ptc-link, ptc-square-card,
   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 {
+  :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 {
+:host(.sequential) .card-mobile .card-content,
+:host(.sequential) .card-dt-open .card-content {
   margin-top: var(--ptc-element-spacing-03);
 }
 :host(.sequential) .card-mobile {

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

@@ -1,4 +1,4 @@
-import { Host, h, getAssetPath } from '@stencil/core';
+import { Host, h, getAssetPath, } from "@stencil/core";
 //import navDotSlick from '../../media/svg-imgs/nav-active-dotslick.svg';
 export class PtcDynamicCard {
   constructor() {
@@ -17,7 +17,7 @@ export class PtcDynamicCard {
      */
     this.handleKeyDown = (event) => {
       switch (event.key) {
-        case 'Enter':
+        case "Enter":
           //event.preventDefault();
           this.openCard();
           break;
@@ -25,12 +25,12 @@ export class PtcDynamicCard {
           break;
       }
     };
-    this.dotSvg = getAssetPath('./media/nav-active-dotslick.svg');
-    this.cardType = 'sequential';
-    this.cardTitle = 'Card Title Goes Here';
+    this.dotSvg = 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;
@@ -38,8 +38,8 @@ export class PtcDynamicCard {
   }
   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
@@ -54,7 +54,7 @@ export class PtcDynamicCard {
    * 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();
     }
@@ -120,7 +120,12 @@ export class PtcDynamicCard {
   // }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: "card-wrapper mf-listen", role: "button", tabindex: "0", "aria-expanded": this.isExpanded, onClick: this.openCard, onKeyDown: this.handleKeyDown }, this.cardScreen === 'mobile' ? (h("div", { class: "card card-mobile mf-listen", id: this.trackerId }, h("ptc-picture", { height: "287", "is-full-width": true, alt: this.cardImgAlt, src: this.cardImgSrc }), h("ptc-card-content", { "card-type": "card-dynamic", styles: ":host(.card-dynamic){height: auto;}" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))))) : (h("div", null, 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 }), h("ptc-card-content", { "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))), h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "is-full-width": "true", "is-full-height": "true", "image-alignment": "center" })), h("div", { class: `card card-dt-closed mf-listen ${this.isExpanded ? 'hide' : 'show'}`, id: this.trackerId }, h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "image-position": "relative", "is-full-width": true, height: "424" }, this.overlayExists ? (h("ptc-overlay", { "filter-color": "solid-black-1" })) : (h("ptc-overlay", { "filter-color": "solid-black-2" }))), h("div", { class: "closed-content", "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h2", null, this.cardTitle))))))), this.cardScreen === 'desktop' && (h("div", { hidden: true }, h("svg", null, h("use", { href: `${this.dotSvg}` }))))));
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: "card-wrapper mf-listen", role: "button", tabindex: "0", "aria-expanded": this.isExpanded, onClick: this.openCard, onKeyDown: this.handleKeyDown }, this.cardScreen === "mobile" ? (h("div", { class: "card card-mobile mf-listen", id: this.trackerId }, h("ptc-picture", { height: "287", "is-full-width": true, alt: this.cardImgAlt, src: this.cardImgSrc }), h("ptc-card-content", { "card-type": "card-dynamic", styles: ":host(.card-dynamic){height: auto;}" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))))) : (h("div", null, 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
+    }), h("ptc-card-content", { "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))), h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "is-full-width": "true", "is-full-height": "true", "image-alignment": "center" })), h("div", { class: `card card-dt-closed mf-listen ${this.isExpanded ? "hide" : "show"}`, id: this.trackerId }, h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "image-position": "relative", "is-full-width": true, height: "424" }, this.overlayExists ? (h("ptc-overlay", { "filter-color": "solid-black-1" })) : (h("ptc-overlay", { "filter-color": "solid-black-2" }))), h("div", { class: "closed-content", "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h2", null, this.cardTitle))))))), this.cardScreen === "desktop" && (h("div", { hidden: true }, h("svg", null, h("use", { href: `${this.dotSvg}` }))))));
   }
   static get is() { return "ptc-dynamic-card"; }
   static get encapsulation() { return "shadow"; }
@@ -141,7 +146,7 @@ export class PtcDynamicCard {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'sequential'",
+          "original": "\"sequential\"",
           "resolved": "\"sequential\"",
           "references": {}
         },
@@ -153,7 +158,7 @@ export class PtcDynamicCard {
         },
         "attribute": "card-type",
         "reflect": false,
-        "defaultValue": "'sequential'"
+        "defaultValue": "\"sequential\""
       },
       "cardTitle": {
         "type": "string",
@@ -171,7 +176,7 @@ export class PtcDynamicCard {
         },
         "attribute": "card-title",
         "reflect": false,
-        "defaultValue": "'Card Title Goes Here'"
+        "defaultValue": "\"Card Title Goes Here\""
       },
       "cardImgSrc": {
         "type": "string",
@@ -211,7 +216,7 @@ export class PtcDynamicCard {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'mobile' | 'desktop'",
+          "original": "\"mobile\" | \"desktop\"",
           "resolved": "\"desktop\" | \"mobile\"",
           "references": {}
         },
@@ -223,7 +228,7 @@ export class PtcDynamicCard {
         },
         "attribute": "card-screen",
         "reflect": false,
-        "defaultValue": "'desktop'"
+        "defaultValue": "\"desktop\""
       },
       "isExpanded": {
         "type": "boolean",

package/dist/collection/components/ptc-ellipsis-dropdown/ptc-ellipsis-dropdown.css

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/ptc-ellipsis-dropdown/ptc-ellipsis-dropdown.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h, } from "@stencil/core";
 export class PtcEllipsisDropdown {
   constructor() {
     this.menuitemNodes = [];
@@ -20,7 +20,7 @@ export class PtcEllipsisDropdown {
     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;
@@ -32,10 +32,10 @@ export class PtcEllipsisDropdown {
   }
   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;
     }
   }
@@ -49,32 +49,32 @@ export class PtcEllipsisDropdown {
       return;
     }
     if (event.shiftKey) {
-      if (event.key === 'Tab') {
+      if (event.key === "Tab") {
       }
     }
     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;
         default:
@@ -131,43 +131,56 @@ export class PtcEllipsisDropdown {
     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 (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')) ? (h("div", { class: 'mob-drop' }, h("span", { class: 'opt-name' }, this.dataItems.map((item) => item.isSelected ? item.text : '')), h("svg", { width: "12", height: "9", viewBox: "0 0 12 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 1.65723L5.94975 6.60697L10.8995 1.65723", stroke: "#00890B", "stroke-width": "2", "stroke-linecap": "round" })))) : (h("div", { class: isActive || this.isDropdownOpen ? "ellipsis-icon active" : "ellipsis-icon" }, h("icon-asset", { type: "ptc", size: "xxx-small", name: "ellipsis", color: isActive || this.isDropdownOpen ? 'white' : 'black' }))), h("div", { class: "dropdown-container", role: "menu", "aria-labelledby": "menubutton1" }, h("slot", { name: "dropdown" }), this.dataItems.map((dataItem) => {
-      let activeClass = dataItem.value == this.selectedTab ? 'active' : '';
-      let activeDropdown = dataItem.isSelected ? 'selected-drop' : '';
-      return (h("dropdown-item", { role: "menuitem", class: activeClass + activeDropdown + 'mf-listen', onKeyDown: (e) => {
-          if (e.key === 'Enter') {
+    return (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") ? (h("div", { class: "mob-drop" }, h("span", { class: "opt-name" }, this.dataItems.map((item) => item.isSelected ? item.text : "")), h("svg", { width: "12", height: "9", viewBox: "0 0 12 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 1.65723L5.94975 6.60697L10.8995 1.65723", stroke: "#00890B", "stroke-width": "2", "stroke-linecap": "round" })))) : (h("div", { class: isActive || this.isDropdownOpen
+        ? "ellipsis-icon active"
+        : "ellipsis-icon" }, h("icon-asset", { type: "ptc", size: "xxx-small", name: "ellipsis", color: isActive || this.isDropdownOpen
+        ? "white"
+        : "black" }))), h("div", { class: "dropdown-container", role: "menu", "aria-labelledby": "menubutton1" }, h("slot", { name: "dropdown" }), this.dataItems.map((dataItem) => {
+      let activeClass = dataItem.value == this.selectedTab ? "active" : "";
+      let activeDropdown = dataItem.isSelected
+        ? "selected-drop"
+        : "";
+      return (h("dropdown-item", { role: "menuitem", class: activeClass + activeDropdown + "mf-listen", onKeyDown: (e) => {
+          if (e.key === "Enter") {
             e.preventDefault();
             this.onItemSelected(dataItem);
           }

package/dist/collection/components/ptc-embedded-quiz/ptc-embedded-quiz.css

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */