@ptcwebops/ptcw-design 6.3.38 → 6.3.40-beta

package/dist/collection/components/ptc-sticky-section/ptc-sticky-section.css

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

package/dist/collection/components/ptc-sticky-section/ptc-sticky-section.js

@@ -1,33 +1,33 @@
-import { h, Host } from "@stencil/core";
+import { h, Host } from '@stencil/core';
 export class PtcStickySection {
   constructor() {
     this.hasPreloader = false;
   }
   componentDidLoad() {
-    if (document.querySelector("ptc-preloader-section")) {
+    if (document.querySelector('ptc-preloader-section')) {
       this.hasPreloader = true;
-      this.el.setAttribute("has-preloader", "true");
+      this.el.setAttribute('has-preloader', 'true');
     }
     else {
       this.hasPreloader = false;
-      this.el.setAttribute("has-preloader", "false");
+      this.el.setAttribute('has-preloader', 'false');
     }
-    if (this.stickyEl.classList.contains("sticky")) {
-      this.stickyEl.classList.remove("sticky");
+    if (this.stickyEl.classList.contains('sticky')) {
+      this.stickyEl.classList.remove('sticky');
     }
     let that = this;
     if (this.hasPreloader) {
       setTimeout(() => {
-        that.stickyEl = that.el.shadowRoot.querySelector(".stickyEl");
+        that.stickyEl = that.el.shadowRoot.querySelector('.stickyEl');
         that.originalPosition = this.elPosition(that.stickyEl);
-        window.addEventListener("scroll", that.handleScroll);
+        window.addEventListener('scroll', that.handleScroll);
       }, 3100);
     }
     else {
       setTimeout(() => {
-        that.stickyEl = that.el.shadowRoot.querySelector(".stickyEl");
+        that.stickyEl = that.el.shadowRoot.querySelector('.stickyEl');
         that.originalPosition = that.stickyEl.offsetTop;
-        window.addEventListener("scroll", that.handleScroll);
+        window.addEventListener('scroll', that.handleScroll);
       }, 1500);
     }
   }
@@ -37,15 +37,15 @@ export class PtcStickySection {
     return rect.top + scrollTop;
   }
   disconnectedCallback() {
-    window.removeEventListener("scroll", this.handleScroll);
+    window.removeEventListener('scroll', this.handleScroll);
   }
   handleScroll() {
     if (this.stickyEl) {
       if (window.scrollY > this.originalPosition) {
-        this.stickyEl.classList.add("sticky");
+        this.stickyEl.classList.add('sticky');
       }
       else {
-        this.stickyEl.classList.remove("sticky");
+        this.stickyEl.classList.remove('sticky');
       }
     }
   }
@@ -53,7 +53,7 @@ export class PtcStickySection {
     this.handleScroll();
   }
   render() {
-    return (h(Host, null, h("div", { class: "stickyEl", ref: (el) => (this.stickyEl = el) }, h("slot", null))));
+    return (h(Host, null, h("div", { class: "stickyEl", ref: el => (this.stickyEl = el) }, h("slot", null))));
   }
   static get is() { return "ptc-sticky-section"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ptc-sticky-title/ptc-sticky-title.css

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

package/dist/collection/components/ptc-sticky-title/ptc-sticky-title.js

@@ -1,9 +1,9 @@
-import { Host, h, getAssetPath, } from "@stencil/core";
+import { Host, h, getAssetPath } from '@stencil/core';
 export class PtcStickyTitle {
   constructor() {
-    this.barTitle = "Bar Title";
+    this.barTitle = 'Bar Title';
     this.isSticky = false;
-    this.logo = "logo.png";
+    this.logo = 'logo.png';
   }
   handleScroll() {
     const scrollTop = document.documentElement.scrollTop;
@@ -16,23 +16,22 @@ export class PtcStickyTitle {
     }
   }
   componentDidLoad() {
-    const shareicon = this.hostEl.querySelectorAll("ptc-social-share");
+    const shareicon = this.hostEl.querySelectorAll('ptc-social-share');
     shareicon.forEach((icon, i) => {
-      icon.addEventListener("focus", () => {
-        if ((window.scrollY === 0 && i == 0) ||
-          i == shareicon.length - 1) {
+      icon.addEventListener('focus', () => {
+        if ((window.scrollY === 0 && i == 0) || (i == shareicon.length - 1)) {
           window.scrollBy(0, 262);
         }
         this.isSticky = true;
       });
-      icon.addEventListener("blur", () => {
+      icon.addEventListener('blur', () => {
         this.isSticky = false;
       });
     });
   }
   render() {
     const logoImg = getAssetPath(`./media/${this.logo}`);
-    return (h(Host, null, h("div", { class: `sticky-header-container ${this.isSticky ? "sticky" : ""}` }, h("div", { class: "sticky-header-title" }, h("div", { class: `logo-image ${this.isSticky ? "is-visible" : ""}` }, h("img", { src: logoImg })), h("div", { class: "sticky-text" }, h("ptc-tooltip", { "text-lines": "1", description: this.barTitle })), h("div", { class: `share-icons is-flex ${this.isSticky ? "is-visible" : ""}` }, h("slot", { name: "social-share-slot" }))), h("ptc-progress-bar", null))));
+    return (h(Host, null, h("div", { class: `sticky-header-container ${this.isSticky ? 'sticky' : ''}` }, h("div", { class: "sticky-header-title" }, h("div", { class: `logo-image ${this.isSticky ? 'is-visible' : ''}` }, h("img", { src: logoImg })), h("div", { class: "sticky-text" }, h("ptc-tooltip", { "text-lines": "1", description: this.barTitle })), h("div", { class: `share-icons is-flex ${this.isSticky ? 'is-visible' : ''}` }, h("slot", { name: 'social-share-slot' }))), h("ptc-progress-bar", null))));
   }
   static get is() { return "ptc-sticky-title"; }
   static get encapsulation() { return "shadow"; }
@@ -65,7 +64,7 @@ export class PtcStickyTitle {
         },
         "attribute": "bar-title",
         "reflect": false,
-        "defaultValue": "\"Bar Title\""
+        "defaultValue": "'Bar Title'"
       },
       "logo": {
         "type": "string",
@@ -83,7 +82,7 @@ export class PtcStickyTitle {
         },
         "attribute": "logo",
         "reflect": false,
-        "defaultValue": "\"logo.png\""
+        "defaultValue": "'logo.png'"
       }
     };
   }

package/dist/collection/components/ptc-svg-btn/ptc-svg-btn.css

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

package/dist/collection/components/ptc-svg-btn/ptc-svg-btn.js

@@ -1,21 +1,19 @@
-import { Host, h } from "@stencil/core";
-import closeSvg from "../../media/svg-imgs/close.svg";
-import arrowSvgLeft from "../../media/svg-imgs/slider-arrow-left.svg";
-import arrowSvgRight from "../../media/svg-imgs/slider-arrow-right.svg";
-import backarrow from "../../media/svg-imgs/Back-arrow.svg";
-import play from "../../media/svg-imgs/play-button-dark.svg";
+import { Host, h } from '@stencil/core';
+import closeSvg from '../../media/svg-imgs/close.svg';
+import arrowSvgLeft from '../../media/svg-imgs/slider-arrow-left.svg';
+import arrowSvgRight from '../../media/svg-imgs/slider-arrow-right.svg';
+import backarrow from '../../media/svg-imgs/Back-arrow.svg';
+import play from '../../media/svg-imgs/play-button-dark.svg';
 export class PtcSvgBtn {
   constructor() {
-    this.svgName = "close";
-    this.display = "block";
+    this.svgName = 'close';
+    this.display = 'block';
     this.zIndex = undefined;
     this.styles = undefined;
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, Object.assign({ class: classMap }, (this.zIndex !== undefined
-      ? { style: { zIndex: this.zIndex } }
-      : null)), this.styles && h("style", null, this.styles), !!this.svgName && this.svgName === "close" ? (h("div", { class: "svg-close", innerHTML: closeSvg })) : null, !!this.svgName && this.svgName === "slider-left" ? (h("div", { class: "slider-left", innerHTML: arrowSvgLeft })) : null, !!this.svgName && this.svgName === "slider-right" ? (h("div", { class: "slider-right", innerHTML: arrowSvgRight })) : null, !!this.svgName && this.svgName === "back-arrow" ? (h("div", { class: "back-arrow", innerHTML: backarrow })) : null, !!this.svgName && this.svgName === "play" ? (h("div", { class: "play", innerHTML: play })) : null));
+    return (h(Host, Object.assign({ class: classMap }, (this.zIndex !== undefined ? { style: { zIndex: this.zIndex } } : null)), this.styles && h("style", null, this.styles), !!this.svgName && this.svgName === 'close' ? h("div", { class: "svg-close", innerHTML: closeSvg }) : null, !!this.svgName && this.svgName === 'slider-left' ? h("div", { class: "slider-left", innerHTML: arrowSvgLeft }) : null, !!this.svgName && this.svgName === 'slider-right' ? h("div", { class: "slider-right", innerHTML: arrowSvgRight }) : null, !!this.svgName && this.svgName === 'back-arrow' ? h("div", { class: "back-arrow", innerHTML: backarrow }) : null, !!this.svgName && this.svgName === 'play' ? h("div", { class: "play", innerHTML: play }) : null));
   }
   getCssClassMap() {
     return {
@@ -52,13 +50,13 @@ export class PtcSvgBtn {
         },
         "attribute": "svg-name",
         "reflect": false,
-        "defaultValue": "\"close\""
+        "defaultValue": "'close'"
       },
       "display": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"block\" | \"inline\" | \"inline-block\" | \"flex\"",
+          "original": "'block' | 'inline' | 'inline-block' | 'flex'",
           "resolved": "\"block\" | \"flex\" | \"inline\" | \"inline-block\"",
           "references": {}
         },
@@ -70,7 +68,7 @@ export class PtcSvgBtn {
         },
         "attribute": "display",
         "reflect": false,
-        "defaultValue": "\"block\""
+        "defaultValue": "'block'"
       },
       "zIndex": {
         "type": "string",

package/dist/collection/components/ptc-tab-list/ptc-tab-list.css

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

package/dist/collection/components/ptc-tab-list/ptc-tab-list.js

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from '@stencil/core';
 //import { forEach } from 'lodash';
 export class PtcTabList {
   constructor() {
@@ -13,90 +13,87 @@ export class PtcTabList {
   }
   componentWillLoad() {
     this.isMobile = window.innerWidth < 768;
-    this.isMobileTabWithBanner =
-      window.innerWidth < 992 || screen.width < 992;
+    this.isMobileTabWithBanner = window.innerWidth < 992 || screen.width < 992;
   }
   componentDidLoad() {
     this.createGroup();
     this.calculateHeaderTabsRendering();
     /*const [group] = this.tabGroup;
     this.selectGroup(group);*/
-    this.ellipsisDropdown = this.host.querySelector("ptc-ellipsis-dropdown");
-    this.ellipsisDropdown.addEventListener("keydown", this.onKeydown.bind(this));
-    const tabsHeaderEl = Array.from(this.host.querySelectorAll("tab-header"));
+    this.ellipsisDropdown = this.host.querySelector('ptc-ellipsis-dropdown');
+    this.ellipsisDropdown.addEventListener('keydown', this.onKeydown.bind(this));
+    const tabsHeaderEl = Array.from(this.host.querySelectorAll('tab-header'));
     tabsHeaderEl.forEach((tab, i) => {
-      if (tabsHeaderEl.length - this.dropdownItemsCount == i + 1) {
+      if ((tabsHeaderEl.length - this.dropdownItemsCount) == (i + 1)) {
         this.lastVisibleTab = tab;
       }
     });
   }
   onSelectedTab(event) {
     let self = this;
-    this.tabGroup.forEach((group) => {
-      event.detail.then((res) => {
+    this.tabGroup.forEach(group => {
+      event.detail.then(res => {
         if (group.header.name === res.name) {
           self.selectGroup(group);
           // Set the selected tab's tabindex to 0
-          group.header.el.setAttribute("tabindex", "0");
+          group.header.el.setAttribute('tabindex', '0');
           // Focus the selected tab
           group.header.el.focus();
         }
         else {
           // Set other tabs' tabindex to -1
-          group.header.el.setAttribute("tabindex", "-1");
+          group.header.el.setAttribute('tabindex', '-1');
         }
       });
     });
   }
   calculateHeaderTabsRendering() {
-    let header = this.host.querySelector(".tabs-header");
-    let dropdown = this.host.querySelector(".ellipsis-btn");
+    let header = this.host.querySelector('.tabs-header');
+    let dropdown = this.host.querySelector('.ellipsis-btn');
     let tabs = header.children;
     let activateDropDown = false;
     let hiddenTabs = [];
     this.isMobile = window.innerWidth < 768;
-    this.isMobileTabWithBanner =
-      window.innerWidth < 992 || screen.width < 992;
-    header.classList.remove("active");
+    this.isMobileTabWithBanner = window.innerWidth < 992 || screen.width < 992;
+    header.classList.remove('active');
     for (let index = 0; index < tabs.length; index++) {
-      tabs[index].style.removeProperty("display");
+      tabs[index].style.removeProperty('display');
     }
     for (let index = tabs.length - 1; index >= 0; index--) {
       let tab = tabs[index];
-      let isSelectedTab = tab.getAttribute("name") === this.selectedValue;
-      if ((this.isMobile && this.type != "tab-with-banner") ||
-        (this.isMobileTabWithBanner && this.type === "tab-with-banner")) {
-        let text = tab.querySelector(".text-cont").textContent;
-        header.style.display = "none";
+      let isSelectedTab = tab.getAttribute('name') === this.selectedValue;
+      if ((this.isMobile && this.type != 'tab-with-banner') || (this.isMobileTabWithBanner && this.type === 'tab-with-banner')) {
+        let text = tab.querySelector('.text-cont').textContent;
+        header.style.display = 'none';
         activateDropDown = true;
         hiddenTabs.push({
-          value: tab.getAttribute("name"),
+          value: tab.getAttribute('name'),
           text: text,
-          isSelected: isSelectedTab,
+          isSelected: isSelectedTab
         });
       }
       else {
-        header.style.display = "flex";
+        header.style.display = 'flex';
         if (header.scrollWidth > header.clientWidth) {
-          tab.style.display = "none";
-          let text = tab.querySelector(".text-cont").textContent;
+          tab.style.display = 'none';
+          let text = tab.querySelector('.text-cont').textContent;
           activateDropDown = true;
           hiddenTabs.push({
-            value: tab.getAttribute("name"),
+            value: tab.getAttribute('name'),
             text: text,
-            isSelected: isSelectedTab,
+            isSelected: isSelectedTab
           });
         }
       }
     }
-    header.classList.add("active");
+    header.classList.add('active');
     if (activateDropDown) {
-      dropdown.classList.add("active");
+      dropdown.classList.add('active');
       dropdown.dataItems = hiddenTabs.reverse();
       this.dropdownItemsCount = dropdown.dataItems.length;
     }
     else {
-      dropdown.classList.remove("active");
+      dropdown.classList.remove('active');
       dropdown.dataItems = [];
     }
   }
@@ -108,8 +105,8 @@ export class PtcTabList {
     let contentCount = 0;
     let headerData = [];
     let contentData = [];
-    const tabsHeaderEl = Array.from(this.host.querySelectorAll("tab-header"));
-    this.tabsHeader = tabsHeaderEl.map((el) => el.getChild().then((res) => {
+    const tabsHeaderEl = Array.from(this.host.querySelectorAll('tab-header'));
+    this.tabsHeader = tabsHeaderEl.map(el => el.getChild().then(res => {
       headerCount++;
       if (headerCount === tabsHeaderEl.length) {
         headerComplete = true;
@@ -117,8 +114,8 @@ export class PtcTabList {
       headerData.push(Object.assign(Object.assign({}, res), { el }));
     }));
     this.tabsHeader = headerData;
-    const tabsContentEl = Array.from(this.host.querySelectorAll("tab-content"));
-    this.tabsContent = tabsContentEl.map((el) => el.getChild().then((res) => {
+    const tabsContentEl = Array.from(this.host.querySelectorAll('tab-content'));
+    this.tabsContent = tabsContentEl.map(el => el.getChild().then(res => {
       contentCount++;
       if (contentCount === tabsContentEl.length) {
         contentComplete = true;
@@ -129,11 +126,11 @@ export class PtcTabList {
     let myInterval = setInterval(() => {
       if (headerComplete && contentComplete) {
         clearInterval(myInterval);
-        self.tabGroup = self.tabsHeader.map((header) => {
-          const content = self.tabsContent.find((content) => content.name === header.name);
+        self.tabGroup = self.tabsHeader.map(header => {
+          const content = self.tabsContent.find(content => content.name === header.name);
           return {
             header: header,
-            content: content,
+            content: content
           };
         });
         const group = self.tabGroup[0];
@@ -141,30 +138,29 @@ export class PtcTabList {
       }
     }, 3100); // Increased time interval from 100 to 3100 to fix the preload skeleton issue
     tabsHeaderEl.forEach((header, index) => {
-      header.setAttribute("id", "tab-" + (index + 1));
-      header.setAttribute("role", "tab");
-      header.setAttribute("aria-selected", index === 0 ? "true" : "false");
-      header.setAttribute("tabindex", index === 0 ? "0" : "-1"); // Set tabindex based on index
-      header.setAttribute("aria-controls", "tab-panel-" + (index + 1));
-      header.addEventListener("keydown", this.onKeydown.bind(this));
+      header.setAttribute('id', 'tab-' + (index + 1));
+      header.setAttribute('role', 'tab');
+      header.setAttribute('aria-selected', index === 0 ? 'true' : 'false');
+      header.setAttribute('tabindex', index === 0 ? '0' : '-1'); // Set tabindex based on index
+      header.setAttribute('aria-controls', 'tab-panel-' + (index + 1));
+      header.addEventListener('keydown', this.onKeydown.bind(this));
       if (!this.firstTab) {
         this.firstTab = header;
       }
       this.lastTab = header;
     });
     tabsContentEl.forEach((panel, index) => {
-      panel.setAttribute("id", "tabpanel-" + (index + 1));
-      panel.setAttribute("role", "tabpanel");
-      panel.setAttribute("aria-labelledby", "tab-" + (index + 1));
+      panel.setAttribute('id', 'tabpanel-' + (index + 1));
+      panel.setAttribute('role', 'tabpanel');
+      panel.setAttribute('aria-labelledby', 'tab-' + (index + 1));
     });
   }
   moveFocusToTab(currentTab) {
     currentTab.focus();
   }
   moveFocusToPreviousTab(currentTab) {
-    if (currentTab === this.firstTab ||
-      currentTab == this.ellipsisDropdown) {
-      this.ellipsisDropdown.setAttribute("tabindex", "-1");
+    if (currentTab === this.firstTab || currentTab == this.ellipsisDropdown) {
+      this.ellipsisDropdown.setAttribute('tabindex', '-1');
       if (this.dropdownItemsCount == 0) {
         this.moveFocusToTab(this.lastTab);
       }
@@ -172,28 +168,28 @@ export class PtcTabList {
         this.moveFocusToTab(this.lastVisibleTab);
       }
       else {
-        this.ellipsisDropdown.setAttribute("tabindex", "0");
+        this.ellipsisDropdown.setAttribute('tabindex', '0');
         this.ellipsisDropdown.focus();
       }
     }
     else {
-      const index = this.tabsHeader.findIndex((tab) => tab.el === currentTab);
+      const index = this.tabsHeader.findIndex(tab => tab.el === currentTab);
       this.moveFocusToTab(this.tabsHeader[index - 1].el);
     }
   }
   moveFocusToNextTab(currentTab) {
-    this.ellipsisDropdown.setAttribute("tabindex", "-1");
+    this.ellipsisDropdown.setAttribute('tabindex', '-1');
     if (currentTab === this.lastTab || currentTab === this.lastVisibleTab) {
       if (this.dropdownItemsCount == 0) {
         this.moveFocusToTab(this.firstTab);
       }
       else {
-        this.ellipsisDropdown.setAttribute("tabindex", "0");
+        this.ellipsisDropdown.setAttribute('tabindex', '0');
         this.ellipsisDropdown.focus();
       }
     }
     else {
-      const index = this.tabsHeader.findIndex((tab) => tab.el === currentTab);
+      const index = this.tabsHeader.findIndex(tab => tab.el === currentTab);
       this.moveFocusToTab(this.tabsHeader[index + 1].el);
     }
   }
@@ -201,15 +197,15 @@ export class PtcTabList {
     const currentTab = event.currentTarget;
     let flag = false;
     switch (event.key) {
-      case "ArrowLeft":
+      case 'ArrowLeft':
         this.moveFocusToPreviousTab(currentTab);
         flag = true;
         break;
-      case "ArrowRight":
+      case 'ArrowRight':
         this.moveFocusToNextTab(currentTab);
         flag = true;
         break;
-      case "Escape":
+      case 'Escape':
         this.closeDropdown();
         flag = true;
         break;
@@ -221,7 +217,7 @@ export class PtcTabList {
   }
   async toggleTabGroup(name) {
     let self = this;
-    this.tabGroup.forEach((group) => {
+    this.tabGroup.forEach(group => {
       if (group.header.name === name) {
         self.selectGroup(group);
       }
@@ -229,7 +225,7 @@ export class PtcTabList {
   }
   selectGroup(group) {
     let self = this;
-    self.tabGroup.forEach((_) => {
+    self.tabGroup.forEach(_ => {
       _.header.unselect();
       _.content.unselect();
     });
@@ -250,11 +246,7 @@ export class PtcTabList {
     }
   }
   render() {
-    return (h(Host, { class: this.type }, h("div", { class: "tabs-header-container" }, h("div", { class: "tabs-header" }, h("slot", { name: "header" })), h("ptc-ellipsis-dropdown", { "dropdown-type": this.type, class: this.type == "tab-with-banner"
-        ? "ellipsis-btn tab-with-banner"
-        : "ellipsis-btn default", onItemSelected: (e) => {
-        this.onDropdownItemSelected(e.detail);
-      } })), h("div", { class: "tabs-content" }, h("slot", { name: "content" }))));
+    return (h(Host, { class: this.type }, h("div", { class: "tabs-header-container" }, h("div", { class: "tabs-header" }, h("slot", { name: "header" })), h("ptc-ellipsis-dropdown", { "dropdown-type": this.type, class: this.type == 'tab-with-banner' ? "ellipsis-btn tab-with-banner" : "ellipsis-btn default", onItemSelected: (e) => { this.onDropdownItemSelected(e.detail); } })), h("div", { class: "tabs-content" }, h("slot", { name: "content" }))));
   }
   static get is() { return "ptc-tab-list"; }
   static get originalStyleUrls() {
@@ -273,7 +265,7 @@ export class PtcTabList {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"default\" | \"tab-with-banner\"",
+          "original": "'default' | 'tab-with-banner'",
           "resolved": "\"default\" | \"tab-with-banner\"",
           "references": {}
         },

package/dist/collection/components/ptc-tabs/ptc-tab.js

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h, Host } from '@stencil/core';
 export class Tab {
   constructor() {
     this.optionClicked = undefined;
@@ -13,8 +13,8 @@ export class Tab {
   }
   getCssClassMap() {
     return {
-      ["ptc-pricing-block"]: true,
-      ["active"]: this.active ? true : false,
+      ['ptc-pricing-block']: true,
+      ['active']: this.active ? true : false
     };
   }
   static get is() { return "ptc-tab"; }

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

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