@ptcwebops/ptcw-design 0.8.2 → 0.8.3

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

@@ -2,38 +2,38 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-0c
 
 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) {
-    registerInstance(this, hostRef);
-  }
-  handleResize() {
-    this.setHostLocation();
-  }
-  componentWillLoad() {
-    this.setHostLocation();
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "icon-container" }, 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 getElement(this); }
-};
+const PtcStickyIcons = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  handleResize() {
+    this.setHostLocation();
+  }
+  componentWillLoad() {
+    this.setHostLocation();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "icon-container" }, 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 getElement(this); }
+};
 PtcStickyIcons.style = ptcStickyIconsCss;
 
 export { PtcStickyIcons as ptc_sticky_icons };

package/dist/esm/ptc-svg-btn.entry.js

@@ -1,88 +1,88 @@
 import { r as registerInstance, h, H as Host } from './index-0c73b51e.js';
 
-const closeSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 42 41.485">
-    <g id="Group_1042" data-name="Group 1042" transform="rotate(180 108.25 87.993)">
-        <path id="Line_446" d="M0 0v39.486" class="cls-1" data-name="Line 446"></path>
-        <path id="Line_447" d="M0 0h40" class="cls-1" data-name="Line 447"></path>
-        <path id="Line_448" d="M0 33.592V0" class="cls-1" data-name="Line 448"></path>
-        <path id="Line_449" d="M23.994 0H0" class="cls-1" data-name="Line 449"></path>
-        <path id="Line_450" d="M0 0l17.596 17.596" class="cls-2" data-name="Line 450" transform="translate(187.229 147.226)"></path>
-        <path id="Line_451" d="M0 7.198L7.199 0" class="cls-2" data-name="Line 451" transform="translate(197.55 147.312)"></path>
-        <path id="Path_114" d="M0 7.2L7.2 0" class="cls-2" data-name="Path 114" transform="translate(187.313 157.549)"></path>
-    </g>
+const closeSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 42 41.485">
+    <g id="Group_1042" data-name="Group 1042" transform="rotate(180 108.25 87.993)">
+        <path id="Line_446" d="M0 0v39.486" class="cls-1" data-name="Line 446"></path>
+        <path id="Line_447" d="M0 0h40" class="cls-1" data-name="Line 447"></path>
+        <path id="Line_448" d="M0 33.592V0" class="cls-1" data-name="Line 448"></path>
+        <path id="Line_449" d="M23.994 0H0" class="cls-1" data-name="Line 449"></path>
+        <path id="Line_450" d="M0 0l17.596 17.596" class="cls-2" data-name="Line 450" transform="translate(187.229 147.226)"></path>
+        <path id="Line_451" d="M0 7.198L7.199 0" class="cls-2" data-name="Line 451" transform="translate(197.55 147.312)"></path>
+        <path id="Path_114" d="M0 7.2L7.2 0" class="cls-2" data-name="Path 114" transform="translate(187.313 157.549)"></path>
+    </g>
 </svg>`;
 
-const arrowSvgLeft = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_494_37)">
-<circle cx="24" cy="22" r="20" fill="white"/>
-<path d="M23.1444 16L23.1444 20.5762L31 20.5762L31 23.4239L23.1444 23.4239L23.1444 28L17 21.9669L23.1444 16Z" class="arrow"/>
-</g>
-<defs>
-<filter id="filter0_d_494_37" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="2"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_494_37"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_494_37" result="shape"/>
-</filter>
-</defs>
-</svg>
+const arrowSvgLeft = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_494_37)">
+<circle cx="24" cy="22" r="20" fill="white"/>
+<path d="M23.1444 16L23.1444 20.5762L31 20.5762L31 23.4239L23.1444 23.4239L23.1444 28L17 21.9669L23.1444 16Z" class="arrow"/>
+</g>
+<defs>
+<filter id="filter0_d_494_37" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_494_37"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_494_37" result="shape"/>
+</filter>
+</defs>
+</svg>
 `;
 
-const arrowSvgRight = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_494_34)">
-<circle cx="24" cy="22" r="20" fill="white"/>
-<path d="M24.8556 16L24.8556 20.5762L17 20.5762L17 23.4239L24.8556 23.4239L24.8556 28L31 21.9669L24.8556 16Z" class="arrow"/>
-</g>
-<defs>
-<filter id="filter0_d_494_34" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="2"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_494_34"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_494_34" result="shape"/>
-</filter>
-</defs>
-</svg>
+const arrowSvgRight = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_494_34)">
+<circle cx="24" cy="22" r="20" fill="white"/>
+<path d="M24.8556 16L24.8556 20.5762L17 20.5762L17 23.4239L24.8556 23.4239L24.8556 28L31 21.9669L24.8556 16Z" class="arrow"/>
+</g>
+<defs>
+<filter id="filter0_d_494_34" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_494_34"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_494_34" result="shape"/>
+</filter>
+</defs>
+</svg>
 `;
 
-const backarrow = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 311 512">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #fff;
-        fill-rule: evenodd;
-      }
-    </style>
-  </defs>
-  <path class="cls-1" d="M251.762,512L311,452.638,114.774,256,311,59.362,251.762,0,0,252.29Z"/>
-</svg>
+const backarrow = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 311 512">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M251.762,512L311,452.638,114.774,256,311,59.362,251.762,0,0,252.29Z"/>
+</svg>
 `;
 
 const ptcSvgBtnCss = ":host{cursor:pointer}:host(.block){display:block}:host(.inline){display:inline}:host(.inline-block){display:inline-block}:host(.flex){display:flex}:host(:focus-visible){outline:none}:host(.backarrow){margin:8px 8px 0px -2px}:focus-visible{outline:none}.svg-close svg .cls-1,.svg-close svg .cls-2{fill:none;stroke-width:2px}.svg-close svg .cls-1{stroke:var(--color-gray-10);stroke-linecap:square}.svg-close svg .cls-2{stroke:var(--color-gray-10)}.svg-close svg path{transition:all var(--ptc-transition-medium) var(--ptc-ease-inout)}.svg-close svg .cls-1:first-child{-webkit-transform:translate(175.5px, 135.5px);-ms-transform:translate(175.5px, 135.5px);transform:translate(175.5px, 135.5px)}.svg-close svg .cls-1:nth-child(2){-webkit-transform:translate(175.5px, 174.985px);-ms-transform:translate(175.5px, 174.985px);transform:translate(175.5px, 174.985px)}.svg-close svg .cls-1:nth-child(3){-webkit-transform:translate(215.5px, 141.393px);-ms-transform:translate(215.5px, 141.393px);transform:translate(215.5px, 141.393px)}.svg-close svg .cls-1:nth-child(4){-webkit-transform:translate(175.5px, 135.5px);-ms-transform:translate(175.5px, 135.5px);transform:translate(175.5px, 135.5px)}.svg-close:hover svg .cls-1:first-child{-webkit-transform:translate(175.5px, 162px);-ms-transform:translate(175.5px, 162px);transform:translate(175.5px, 162px)}.svg-close:hover svg .cls-1:nth-child(2){-webkit-transform:translate(149px, 174.985px);-ms-transform:translate(149px, 174.985px);transform:translate(149px, 174.985px)}.svg-close:hover svg .cls-1:nth-child(3){-webkit-transform:translate(215.5px, 174px);-ms-transform:translate(215.5px, 174px);transform:translate(215.5px, 174px)}.svg-close:hover svg .cls-1:nth-child(4){-webkit-transform:translate(152.5px, 135.5px);-ms-transform:translate(152.5px, 135.5px);transform:translate(152.5px, 135.5px)}.svg-close.svg-close-white .cls-1{stroke:var(--color-white)}.slider-left,.slider-right{transition:all var(--ptc-transition-medium) var(--ptc-ease-inout)}.slider-left svg .arrow,.slider-right svg .arrow{fill:var(--color-gray-10)}.slider-left:hover svg .arrow,.slider-right:hover svg .arrow{fill:var(--color-green-06)}.back-arrow{display:inline-block;fill:none;stroke-width:30px;stroke:var(--color-gray-10);stroke-linecap:square;height:10px;width:20px;position:relative;top:1px;text-align:center}@media only screen and (max-width: 1024px) and (min-width: 576px){:host(.back-arrow){margin:8px 8px 16px -2px}}";
 
-const PtcSvgBtn = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.svgName = 'close';
-    this.display = 'block';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, !!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));
-  }
-  getCssClassMap() {
-    return {
-      [this.display]: true
-    };
-  }
-};
+const PtcSvgBtn = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.svgName = 'close';
+    this.display = 'block';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, !!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));
+  }
+  getCssClassMap() {
+    return {
+      [this.display]: true
+    };
+  }
+};
 PtcSvgBtn.style = ptcSvgBtnCss;
 
 export { PtcSvgBtn as ptc_svg_btn };

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

@@ -2,130 +2,130 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-0c
 
 const ptcTabListCss = "ptc-tab-list{display:block;position:relative}.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:85%}.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) {
-    registerInstance(this, hostRef);
-    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 (h(Host, null, h("div", { class: "tabs-header-container" }, h("div", { class: "tabs-header" }, h("slot", { name: "header" })), h("ptc-ellipsis-dropdown", { class: "ellipsis-btn", onItemSelected: (e) => { this.onDropdownItemSelected(e.detail); } })), h("div", { class: "tabs-content" }, h("slot", { name: "content" }))));
-  }
-  get host() { return getElement(this); }
-};
+const PtcTabList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 (h(Host, null, h("div", { class: "tabs-header-container" }, h("div", { class: "tabs-header" }, h("slot", { name: "header" })), h("ptc-ellipsis-dropdown", { class: "ellipsis-btn", onItemSelected: (e) => { this.onDropdownItemSelected(e.detail); } })), h("div", { class: "tabs-content" }, h("slot", { name: "content" }))));
+  }
+  get host() { return getElement(this); }
+};
 PtcTabList.style = ptcTabListCss;
 
 export { PtcTabList as ptc_tab_list };

package/dist/esm/ptc-text-copy-with-background.entry.js

@@ -2,26 +2,26 @@ import { r as registerInstance, h, H as Host } from './index-0c73b51e.js';
 
 const ptcTextCopyWithBackgroundCss = ":host{display:block;position:relative;padding:var(--ptc-layout-spacing-05) var(--ptc-layout-spacing-01);color:var(--color-white)}@media only screen and (min-width: 768px){:host{padding:var(--ptc-layout-spacing-05) var(--ptc-layout-spacing-03)}}@media only screen and (min-width: 992px){:host{padding:var(--ptc-layout-spacing-06) 0}}@media only screen and (min-width: 1200px){:host{padding:var(--ptc-layout-spacing-06) var(--ptc-layout-spacing-03)}}:host .content-wrap{position:relative}:host .tcb-top-slit{fill:#f3f3f3;-webkit-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scale(1.5, -1);position:absolute;top:-1px;right:80px;z-index:99;display:none}@media only screen and (min-width: 992px){:host .tcb-top-slit{display:block}}:host .bg-img-filter{-webkit-filter:url(#blur);filter:url(#blur);-webkit-mask:-webkit-gradient(linear, left top, right top, color-stop(30%, var(--color-black)), to(rgba(0, 0, 0, 0)));-webkit-mask:linear-gradient(90deg, var(--color-black) 30%, rgba(0, 0, 0, 0));-webkit-filter:blur(7px)}:host .copy-bg-image{top:0;left:0;height:100%;width:100%;position:absolute;-o-object-fit:cover;object-fit:cover}@media only screen and (min-width: 992px){:host .copy-bg-image{display:block}}:host .copy-bg-overlay-layer{position:absolute;top:0;left:0;height:100%;width:100%;background:var(--color-black);opacity:0.55}@media only screen and (min-width: 1200px){:host(.hero-footer-cta){padding:calc(var(--ptc-layout-spacing-06) + var(--ptc-layout-spacing-03)) var(--ptc-layout-spacing-03)}}:host(.tab-cta-with-background){min-height:400px;padding:var(--ptc-layout-spacing-03) var(--ptc-layout-spacing-02)}@media only screen and (min-width: 992px){:host(.tab-cta-with-background){display:flex;align-items:center}}@media only screen and (min-width: 1200px){:host(.tab-cta-with-background){padding:var(--ptc-element-spacing-08)}}:host(.tab-cta-with-background) .copy-bg-overlay-layer{background:initial;opacity:1;background-image:linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, 0.9) 63%, rgba(176, 188, 194, 0) 95%)}@media only screen and (min-width: 992px){:host(.tab-cta-with-background) .copy-bg-overlay-layer{background-image:linear-gradient(90deg, rgba(255, 255, 255, 0.95) 43%, rgba(176, 188, 194, 0) 95%)}}";
 
-const PtcTextCopyWithBackground = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.type = 'text-copy-with-background';
-    this.backgroundImage = undefined;
-    this.ImageAltText = undefined;
-    this.topSlitBackgroundColor = undefined;
-    this.isBackgroundBlur = false;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "tcb-top-slit", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179", style: { fill: this.topSlitBackgroundColor } }, h("path", { id: "Path_8770", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "tcb-top-slit-cls-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" })), h("div", { class: "" }, h("img", { class: "copy-bg-image", alt: this.ImageAltText, src: this.backgroundImage }), this.isBackgroundBlur &&
-      h("img", { class: "copy-bg-image bg-img-filter", alt: this.ImageAltText, src: this.backgroundImage })), h("div", { class: "copy-bg-overlay-layer" }), h("div", { class: "content-wrap" }, h("slot", null))));
-  }
-  getCssClassMap() {
-    return {
-      [this.type]: true
-    };
-  }
-};
+const PtcTextCopyWithBackground = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.type = 'text-copy-with-background';
+    this.backgroundImage = undefined;
+    this.ImageAltText = undefined;
+    this.topSlitBackgroundColor = undefined;
+    this.isBackgroundBlur = false;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "tcb-top-slit", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179", style: { fill: this.topSlitBackgroundColor } }, h("path", { id: "Path_8770", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "tcb-top-slit-cls-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" })), h("div", { class: "" }, h("img", { class: "copy-bg-image", alt: this.ImageAltText, src: this.backgroundImage }), this.isBackgroundBlur &&
+      h("img", { class: "copy-bg-image bg-img-filter", alt: this.ImageAltText, src: this.backgroundImage })), h("div", { class: "copy-bg-overlay-layer" }), h("div", { class: "content-wrap" }, h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.type]: true
+    };
+  }
+};
 PtcTextCopyWithBackground.style = ptcTextCopyWithBackgroundCss;
 
 export { PtcTextCopyWithBackground as ptc_text_copy_with_background };