@ptcwebops/ptcw-design 1.2.7 → 1.2.8

package/dist/cjs/ptc-social-share.cjs.entry.js

@@ -6,65 +6,65 @@ const index = require('./index-88135a6b.js');
 
 const ptcSocialShareCss = ":host(.inline-block){display:inline-block}:host(.block){display:block}:host(.inline){display:inline}:host(.flex){display:flex}:host(.ptc-social-share){cursor:pointer}@media only screen and (min-width: 1200px){:host(.ptc-social-m-left){margin-left:var(--ptc-element-spacing-04)}}";
 
-const PtcSocialShare = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.display = 'inline-block';
-    this.shareType = 'twitter';
-    this.shareTitle = undefined;
-    this.text = undefined;
-    this.url = undefined;
-    this.source = '';
-    this.recipient = '';
-    this.iconColor = 'white';
-    this.iconHoverColor = 'gray';
-    this.isHover = false;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h(index.Host, { class: classMap }, index.h("div", { onClick: () => this.share(), onMouseEnter: () => this.hoverToggle(), onMouseLeave: () => this.hoverToggle() }, this.shareType == 'mail' ? index.h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-mail" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'linkedin' ? index.h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-linkedin" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'twitter' ? index.h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-twitter" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'facebook' ? index.h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-fb" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'share-api' ? index.h("icon-asset", Object.assign({ type: "solid", size: "large", name: "share-square" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null)));
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-social-share']: true,
-      [this.display]: true,
-    };
-  }
-  hoverToggle() {
-    this.isHover = !this.isHover;
-  }
-  share() {
-    if (this.shareType == 'twitter') {
-      window.open(`https://twitter.com/share?text=${this.text}&url=${this.url}`);
-    }
-    if (this.shareType == 'facebook') {
-      window.open(`https://www.facebook.com/sharer/sharer.php?u=${this.url}`);
-    }
-    if (this.shareType == 'linkedin') {
-      window.open(`https://www.linkedin.com/shareArticle?mini=true&url=${this.url}&title=${this.shareTitle}&summary=${this.text}&source=${this.source}`);
-    }
-    if (this.shareType == 'mail') {
-      window.open(`mailto:${this.recipient}?subject=${this.text}&body=${this.url}`);
-    }
-    if (this.shareType == 'share-api') {
-      if (navigator.share) {
-        navigator
-          .share({
-          title: this.shareTitle,
-          text: this.text,
-          url: this.url,
-        })
-          .then(() => console.log('Successful share'))
-          .catch(error => console.log('Error sharing', error));
-      }
-      else {
-        // fallback to sharing to twitter
-        window.open(`http://twitter.com/share?text=${this.text}&url=${this.url}`);
-      }
-    }
-  }
-  get el() { return index.getElement(this); }
-};
+const PtcSocialShare = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.display = 'inline-block';
+    this.shareType = 'twitter';
+    this.shareTitle = undefined;
+    this.text = undefined;
+    this.url = undefined;
+    this.source = '';
+    this.recipient = '';
+    this.iconColor = 'white';
+    this.iconHoverColor = 'gray';
+    this.isHover = false;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, { class: classMap }, index.h("div", { onClick: () => this.share(), onMouseEnter: () => this.hoverToggle(), onMouseLeave: () => this.hoverToggle() }, this.shareType == 'mail' ? index.h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-mail" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'linkedin' ? index.h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-linkedin" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'twitter' ? index.h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-twitter" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'facebook' ? index.h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-fb" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'share-api' ? index.h("icon-asset", Object.assign({ type: "solid", size: "large", name: "share-square" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null)));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-social-share']: true,
+      [this.display]: true,
+    };
+  }
+  hoverToggle() {
+    this.isHover = !this.isHover;
+  }
+  share() {
+    if (this.shareType == 'twitter') {
+      window.open(`https://twitter.com/share?text=${this.text}&url=${this.url}`);
+    }
+    if (this.shareType == 'facebook') {
+      window.open(`https://www.facebook.com/sharer/sharer.php?u=${this.url}`);
+    }
+    if (this.shareType == 'linkedin') {
+      window.open(`https://www.linkedin.com/shareArticle?mini=true&url=${this.url}&title=${this.shareTitle}&summary=${this.text}&source=${this.source}`);
+    }
+    if (this.shareType == 'mail') {
+      window.open(`mailto:${this.recipient}?subject=${this.text}&body=${this.url}`);
+    }
+    if (this.shareType == 'share-api') {
+      if (navigator.share) {
+        navigator
+          .share({
+          title: this.shareTitle,
+          text: this.text,
+          url: this.url,
+        })
+          .then(() => console.log('Successful share'))
+          .catch(error => console.log('Error sharing', error));
+      }
+      else {
+        // fallback to sharing to twitter
+        window.open(`http://twitter.com/share?text=${this.text}&url=${this.url}`);
+      }
+    }
+  }
+  get el() { return index.getElement(this); }
+};
 PtcSocialShare.style = ptcSocialShareCss;
 
 exports.ptc_social_share = PtcSocialShare;

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

@@ -6,24 +6,24 @@ const index = require('./index-88135a6b.js');
 
 const ptcSpanCss = ":host{z-index:1}:host span{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;}:host(.link-style) span{color:var(--color-gray-10);font-weight:var(--ptc-font-weight-black);position:relative;line-height:var(--ptc-line-height-normal)}:host(.nav-style) span{display:block;color:var(--color-gray-03);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense);text-transform:capitalize;padding-left:var(--ptc-element-spacing-06);font-size:var(--ptc-font-size-small);padding-bottom:var(--ptc-element-spacing-03)}:host(.tag-style) span{font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-dense);font-weight:var(--ptc-font-weight-regular);color:var(--color-gray-10)}:host(.plm-hub-style) span{font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest);font-weight:var(--ptc-font-weight-medium);color:var(--color-white)}:host(.plm-hub-style-smaller) span{font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-densest);font-weight:var(--ptc-font-weight-semibold);color:var(--color-white)}:host(.inline) span{display:inline}:host(.block) span{display:block}:host(.inline-block) span{display:inline-block}:host(.white) span{color:var(--color-white)}:host(.primary-grey) span{color:var(--color-gray-10)}";
 
-const PtcSpan = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.spanStyle = 'tag-style';
-    this.display = 'inline';
-    this.styles = undefined;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h(index.Host, { class: classMap }, this.styles && index.h("style", null, this.styles), index.h("span", { part: "part-ptc-span" }, index.h("slot", null))));
-  }
-  getCssClassMap() {
-    return {
-      [this.spanStyle]: true,
-      [this.display]: true,
-    };
-  }
-};
+const PtcSpan = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.spanStyle = 'tag-style';
+    this.display = 'inline';
+    this.styles = undefined;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, { class: classMap }, this.styles && index.h("style", null, this.styles), index.h("span", { part: "part-ptc-span" }, index.h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.spanStyle]: true,
+      [this.display]: true,
+    };
+  }
+};
 PtcSpan.style = ptcSpanCss;
 
 exports.ptc_span = PtcSpan;

package/dist/cjs/ptc-sticky-icons.cjs.entry.js

@@ -6,38 +6,38 @@ const index = require('./index-88135a6b.js');
 
 const ptcStickyIconsCss = "@media only screen and (min-width: 992px){:host{z-index:105;margin:auto;position:sticky;top:10%;right:0;float:right;margin-right:-40px}}:host .icon-container{padding:var(--ptc-element-spacing-03) 0}@media only screen and (min-width: 992px){:host .icon-container{padding:0 0 0 var(--ptc-element-spacing-03);display:flex;flex-direction:column}}:host ::slotted(ptc-social-share){margin:0 var(--ptc-element-spacing-03) 0 0}@media only screen and (min-width: 992px){:host ::slotted(ptc-social-share){margin:0 0 var(--ptc-element-spacing-03) 0;display:flex;align-items:center;justify-content:center}}";
 
-const PtcStickyIcons = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  handleResize() {
-    this.setHostLocation();
-  }
-  componentWillLoad() {
-    this.setHostLocation();
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "icon-container" }, index.h("slot", null))));
-  }
-  setHostLocation() {
-    let width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
-    let currEle = this.el;
-    // get the element
-    const element = document.querySelector("ptc-sticky-icons");
-    if (element) {
-      currEle.parentElement.style.position = "relative";
-      if (width < 992) {
-        currEle.parentElement.appendChild(currEle);
-        currEle.parentElement.style.paddingRight = "0px";
-      }
-      else {
-        currEle.parentElement.prepend(currEle);
-        currEle.parentElement.style.paddingRight = "40px";
-      }
-    }
-  }
-  get el() { return index.getElement(this); }
-};
+const PtcStickyIcons = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  handleResize() {
+    this.setHostLocation();
+  }
+  componentWillLoad() {
+    this.setHostLocation();
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "icon-container" }, index.h("slot", null))));
+  }
+  setHostLocation() {
+    let width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
+    let currEle = this.el;
+    // get the element
+    const element = document.querySelector("ptc-sticky-icons");
+    if (element) {
+      currEle.parentElement.style.position = "relative";
+      if (width < 992) {
+        currEle.parentElement.appendChild(currEle);
+        currEle.parentElement.style.paddingRight = "0px";
+      }
+      else {
+        currEle.parentElement.prepend(currEle);
+        currEle.parentElement.style.paddingRight = "40px";
+      }
+    }
+  }
+  get el() { return index.getElement(this); }
+};
 PtcStickyIcons.style = ptcStickyIconsCss;
 
 exports.ptc_sticky_icons = PtcStickyIcons;

package/dist/cjs/ptc-sticky-section.cjs.entry.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-88135a6b.js');
+
+const ptcStickySectionCss = ":host{display:block}:host .stickyEl.sticky{top:0;position:fixed;width:100%;z-index:1;transition:top 0.5s}";
+
+const PtcStickySection = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  componentDidLoad() {
+    this.stickyEl = this.el.shadowRoot.querySelector('.stickyEl');
+    this.originalPosition = this.stickyEl.offsetTop;
+    window.addEventListener('scroll', this.handleScroll);
+  }
+  disconnectedCallback() {
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+  handleScroll() {
+    if (this.stickyEl) {
+      if (window.pageYOffset > this.originalPosition) {
+        this.stickyEl.classList.add('sticky');
+      }
+      else {
+        this.stickyEl.classList.remove('sticky');
+      }
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "stickyEl", ref: el => this.stickyEl = el }, index.h("slot", null))));
+  }
+  get el() { return index.getElement(this); }
+};
+PtcStickySection.style = ptcStickySectionCss;
+
+exports.ptc_sticky_section = PtcStickySection;

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

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-88135a6b.js');
+
+const ptcSubnavCardCss = ":host{display:block;text-align:center;padding:0 var(--ptc-layout-spacing-02)}:host a{text-decoration:none}:host a:hover{text-decoration:none}:host h4{font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-semibold);color:var(--color-white);margin:0}:host .cta icon-asset{margin-left:4px;vertical-align:middle}:host img{max-width:75px;margin:var(--ptc-layout-spacing-03) 0}";
+
+const PtcSubnavCard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.cardTitle = undefined;
+    this.cardHref = undefined;
+    this.cardImageSrc = undefined;
+    this.cardImageAlt = undefined;
+    this.ctaText = undefined;
+    this.ctaIconAssetName = undefined;
+  }
+  render() {
+    const Tag = !!this.cardHref ? 'a' : 'div';
+    return (index.h(index.Host, null, index.h(Tag, Object.assign({}, (!!this.cardHref ? { href: this.cardHref } : {})), index.h("h4", null, this.cardTitle), index.h("img", { src: this.cardImageSrc, alt: this.cardImageAlt }), index.h("slot", null), index.h("h4", { class: "cta" }, this.ctaText, index.h("icon-asset", { type: "ptc", size: "x-small", name: this.ctaIconAssetName, color: "white" })))));
+  }
+};
+PtcSubnavCard.style = ptcSubnavCardCss;
+
+exports.ptc_subnav_card = PtcSubnavCard;

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

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-88135a6b.js');
+
+const ptcSubnavCss = ":host{display:block;width:100%;background-color:var(--color-gray-10);position:relative}:host .navbar .navbar-inner{padding:0px;display:none}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner{padding:10px 32px;height:auto;display:block}}@media only screen and (min-width: 1440px){:host .navbar .navbar-inner{padding:10px 64px}}:host .navbar .navbar-inner .nav-wrapper{width:auto;margin:auto;min-width:163px}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner .nav-wrapper{width:auto;display:flex;justify-content:space-between}}:host .navbar.navOpen .navbar-inner{background-color:var(--color-gray-12);display:block}:host .navbar .navbar-toggle{display:block;width:100%;text-align:center;color:var(--color-white);background-color:var(--color-gray-10);border:none;padding:16px;font-size:15px;line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}:host .navbar .navbar-toggle svg{vertical-align:middle;margin-left:4px}@media only screen and (min-width: 1200px){:host .navbar .navbar-toggle{display:none}}";
+
+const PtcSubnav = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.navOpen = false;
+  }
+  toggleNav() {
+    this.navOpen = !this.navOpen;
+  }
+  handleScroll() {
+    const navbar = this.el.shadowRoot.querySelector('.navbar');
+    if (navbar) {
+      if (navbar.getBoundingClientRect().top <= 0) {
+        this.navOpen = false;
+      }
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("nav", { class: `navbar ${this.navOpen ? 'navOpen' : ''}` }, index.h("button", { class: "navbar-toggle", onClick: () => this.toggleNav() }, "See page topics", ' ', index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15", fill: "white", class: "" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.2375 2.83325L7.5 8.60203L1.7625 2.83325L-7.76305e-08 4.60923L7.5 12.1666L15 4.60923L13.2375 2.83325Z", fill: "white" }))), index.h("div", { class: "navbar-inner" }, index.h("div", { class: "nav-wrapper" }, index.h("slot", { name: "subnav-menu-left" }), index.h("slot", { name: "subnav-menu-right" }))))));
+  }
+  get el() { return index.getElement(this); }
+};
+PtcSubnav.style = ptcSubnavCss;
+
+exports.ptc_subnav = PtcSubnav;

package/dist/cjs/ptc-tab-list.cjs.entry.js

@@ -6,131 +6,131 @@ const index = require('./index-88135a6b.js');
 
 const ptcTabListCss = "ptc-tab-list{display:block;position:relative;color:var(--color-gray-12)}ptc-tab-list.tab-with-banner{background-color:#fff;padding:20px 10px}@media only screen and (min-width: 480px){ptc-tab-list.tab-with-banner{padding:30px}}ptc-tab-list.tab-with-banner .tabs-content{padding:30px 0 0 0}ptc-tab-list.tab-with-banner .tabs-content p,ptc-tab-list.tab-with-banner .tabs-content span,ptc-tab-list.tab-with-banner .tabs-content h1,ptc-tab-list.tab-with-banner .tabs-content h2,ptc-tab-list.tab-with-banner .tabs-content h3,ptc-tab-list.tab-with-banner .tabs-content h4,ptc-tab-list.tab-with-banner .tabs-content h5,ptc-tab-list.tab-with-banner .tabs-content h6,ptc-tab-list.tab-with-banner .tabs-content ul,ptc-tab-list.tab-with-banner .tabs-content li,ptc-tab-list.tab-with-banner .tabs-content table{color:var(--color-gray-12)}.tabs-header-container{width:100%;border-bottom:2px solid var(--color-gray-02);position:relative}.tabs-header{display:flex;padding-left:1.5rem;padding-right:1.5rem;transition:opacity ease-out 250ms;opacity:0;width:90%}.tabs-header.active{opacity:1}.tabs-content{padding:40px 28px 28px}.ellipsis-btn{position:absolute;top:var(--ptc-element-spacing-01);right:1rem;display:none}.ellipsis-btn.active{display:block}tab-header{padding-right:48px}";
 
-const PtcTabList = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.type = undefined;
-    this.selectedValue = undefined;
-  }
-  componentDidLoad() {
-    this.createGroup();
-    this.calculateHeaderTabsRendering();
-    /*const [group] = this.tabGroup;
-    this.selectGroup(group);*/
-  }
-  onSelectedTab(event) {
-    let self = this;
-    this.tabGroup.forEach(group => {
-      event.detail.then(res => {
-        if (group.header.name === res.name) {
-          self.selectGroup(group);
-        }
-      });
-    });
-  }
-  calculateHeaderTabsRendering() {
-    let header = this.host.querySelector('.tabs-header');
-    let dropdown = this.host.querySelector('.ellipsis-btn');
-    let tabs = header.children;
-    let activateDropDown = false;
-    let hiddenTabs = [];
-    header.classList.remove('active');
-    for (let index = 0; index < tabs.length; index++) {
-      tabs[index].style.removeProperty('display');
-    }
-    for (let index = tabs.length - 1; index >= 0; index--) {
-      let tab = tabs[index];
-      if (header.scrollWidth > header.clientWidth) {
-        let isSelectedTab = tab.getAttribute('name') === this.selectedValue;
-        if (!isSelectedTab) {
-          tab.style.display = 'none';
-          let text = tab.querySelector('.header-content').textContent;
-          activateDropDown = true;
-          hiddenTabs.push({
-            value: tab.getAttribute('name'),
-            text: text,
-            isSelected: isSelectedTab
-          });
-        }
-      }
-    }
-    header.classList.add('active');
-    if (activateDropDown) {
-      dropdown.classList.add('active');
-      dropdown.dataItems = hiddenTabs.reverse();
-    }
-    else {
-      dropdown.classList.remove('active');
-      dropdown.dataItems = [];
-    }
-  }
-  createGroup() {
-    let self = this;
-    let headerComplete = false;
-    let contentComplete = false;
-    let headerCount = 0;
-    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 => {
-      headerCount++;
-      if (headerCount === tabsHeaderEl.length) {
-        headerComplete = true;
-      }
-      headerData.push(res);
-    }));
-    this.tabsHeader = headerData;
-    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;
-      }
-      contentData.push(res);
-    }));
-    this.tabsContent = contentData;
-    let myInterval = setInterval(() => {
-      if (headerComplete && contentComplete) {
-        clearInterval(myInterval);
-        self.tabGroup = self.tabsHeader.map(header => {
-          const content = self.tabsContent.find(content => content.name === header.name);
-          return {
-            header: header,
-            content: content
-          };
-        });
-        const group = self.tabGroup[0];
-        self.selectGroup(group);
-      }
-    }, 100);
-  }
-  selectGroup(group) {
-    let self = this;
-    self.tabGroup.forEach(_ => {
-      _.header.unselect();
-      _.content.unselect();
-    });
-    group.header.select();
-    group.content.select();
-    self.selectedValue = group.header.name;
-    this.calculateHeaderTabsRendering();
-  }
-  onDropdownItemSelected(selectedItem) {
-    if (selectedItem) {
-      let selectedTabGroub = this.tabGroup.find((group) => {
-        return group.header.name == selectedItem.value;
-      });
-      if (selectedTabGroub) {
-        this.selectGroup(selectedTabGroub);
-      }
-    }
-  }
-  render() {
-    return (index.h(index.Host, { class: this.type }, index.h("div", { class: "tabs-header-container" }, index.h("div", { class: "tabs-header" }, index.h("slot", { name: "header" })), index.h("ptc-ellipsis-dropdown", { class: "ellipsis-btn", onItemSelected: (e) => { this.onDropdownItemSelected(e.detail); } })), index.h("div", { class: "tabs-content" }, index.h("slot", { name: "content" }))));
-  }
-  get host() { return index.getElement(this); }
-};
+const PtcTabList = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.type = undefined;
+    this.selectedValue = undefined;
+  }
+  componentDidLoad() {
+    this.createGroup();
+    this.calculateHeaderTabsRendering();
+    /*const [group] = this.tabGroup;
+    this.selectGroup(group);*/
+  }
+  onSelectedTab(event) {
+    let self = this;
+    this.tabGroup.forEach(group => {
+      event.detail.then(res => {
+        if (group.header.name === res.name) {
+          self.selectGroup(group);
+        }
+      });
+    });
+  }
+  calculateHeaderTabsRendering() {
+    let header = this.host.querySelector('.tabs-header');
+    let dropdown = this.host.querySelector('.ellipsis-btn');
+    let tabs = header.children;
+    let activateDropDown = false;
+    let hiddenTabs = [];
+    header.classList.remove('active');
+    for (let index = 0; index < tabs.length; index++) {
+      tabs[index].style.removeProperty('display');
+    }
+    for (let index = tabs.length - 1; index >= 0; index--) {
+      let tab = tabs[index];
+      if (header.scrollWidth > header.clientWidth) {
+        let isSelectedTab = tab.getAttribute('name') === this.selectedValue;
+        if (!isSelectedTab) {
+          tab.style.display = 'none';
+          let text = tab.querySelector('.header-content').textContent;
+          activateDropDown = true;
+          hiddenTabs.push({
+            value: tab.getAttribute('name'),
+            text: text,
+            isSelected: isSelectedTab
+          });
+        }
+      }
+    }
+    header.classList.add('active');
+    if (activateDropDown) {
+      dropdown.classList.add('active');
+      dropdown.dataItems = hiddenTabs.reverse();
+    }
+    else {
+      dropdown.classList.remove('active');
+      dropdown.dataItems = [];
+    }
+  }
+  createGroup() {
+    let self = this;
+    let headerComplete = false;
+    let contentComplete = false;
+    let headerCount = 0;
+    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 => {
+      headerCount++;
+      if (headerCount === tabsHeaderEl.length) {
+        headerComplete = true;
+      }
+      headerData.push(res);
+    }));
+    this.tabsHeader = headerData;
+    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;
+      }
+      contentData.push(res);
+    }));
+    this.tabsContent = contentData;
+    let myInterval = setInterval(() => {
+      if (headerComplete && contentComplete) {
+        clearInterval(myInterval);
+        self.tabGroup = self.tabsHeader.map(header => {
+          const content = self.tabsContent.find(content => content.name === header.name);
+          return {
+            header: header,
+            content: content
+          };
+        });
+        const group = self.tabGroup[0];
+        self.selectGroup(group);
+      }
+    }, 100);
+  }
+  selectGroup(group) {
+    let self = this;
+    self.tabGroup.forEach(_ => {
+      _.header.unselect();
+      _.content.unselect();
+    });
+    group.header.select();
+    group.content.select();
+    self.selectedValue = group.header.name;
+    this.calculateHeaderTabsRendering();
+  }
+  onDropdownItemSelected(selectedItem) {
+    if (selectedItem) {
+      let selectedTabGroub = this.tabGroup.find((group) => {
+        return group.header.name == selectedItem.value;
+      });
+      if (selectedTabGroub) {
+        this.selectGroup(selectedTabGroub);
+      }
+    }
+  }
+  render() {
+    return (index.h(index.Host, { class: this.type }, index.h("div", { class: "tabs-header-container" }, index.h("div", { class: "tabs-header" }, index.h("slot", { name: "header" })), index.h("ptc-ellipsis-dropdown", { class: "ellipsis-btn", onItemSelected: (e) => { this.onDropdownItemSelected(e.detail); } })), index.h("div", { class: "tabs-content" }, index.h("slot", { name: "content" }))));
+  }
+  get host() { return index.getElement(this); }
+};
 PtcTabList.style = ptcTabListCss;
 
 exports.ptc_tab_list = PtcTabList;

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

@@ -6,26 +6,26 @@ const index = require('./index-88135a6b.js');
 
 const ptcTabsCss = ":host{display:block;margin-top:var(--ptc-element-spacing-03);color:var(--color-gray-12);box-sizing:border-box}:host .ptc-pricing-block{width:100%;background-color:var(--color-gray-02);border-radius:var(--ptc-border-radius-standard);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense);display:block;transition:background-color var(--ptc-ease-inout) var(--ptc-transition-medium)}:host .ptc-pricing-block.active{background-color:var(--color-gray-12);color:var(--color-white)}:host .ptc-pricing-block:hover:not(.active){background-color:var(--color-gray-03)}:host .right-text{font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-extrabold);line-height:var(--ptc-line-height-dense);text-align:right;float:right;margin:15px 20px 15px 15px;display:block}:host .left-text{font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense);text-align:left;margin:15px 15px 15px 20px;display:inline-block}.tabs-list{border-bottom:1px solid #dddddd;padding:0 5px}.tab-button{border:0;font-size:14px;padding:8px;outline:none;cursor:pointer}.tab-button:hover:not(:disabled):not(.active){border-bottom:3px solid grey}.tab-button:disabled{opacity:0.4}.tab-button.active{border-bottom:3px solid blue;font-weight:600}";
 
-const Tab = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.optionClicked = undefined;
-    this.label = undefined;
-    this.price = undefined;
-    this.active = undefined;
-    this.disabled = undefined;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h(index.Host, null, index.h("div", { class: classMap }, index.h("span", { class: "left-text" }, index.h("slot", { name: "right-text" })), index.h("span", { class: "right-text" }, index.h("slot", { name: "right-text" })))));
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-pricing-block']: true,
-      ['active']: this.active ? true : false
-    };
-  }
-};
+const Tab = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.optionClicked = undefined;
+    this.label = undefined;
+    this.price = undefined;
+    this.active = undefined;
+    this.disabled = undefined;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, null, index.h("div", { class: classMap }, index.h("span", { class: "left-text" }, index.h("slot", { name: "right-text" })), index.h("span", { class: "right-text" }, index.h("slot", { name: "right-text" })))));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-pricing-block']: true,
+      ['active']: this.active ? true : false
+    };
+  }
+};
 Tab.style = ptcTabsCss;
 
 exports.ptc_tab = Tab;