@ptcwebops/ptcw-design 0.6.3 → 0.6.4

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

@@ -1,71 +1,71 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-f64012bd.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-a91c2367.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)}}";
 
-let PtcSocialShare = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.display = 'inline-block';
-    this.shareType = 'twitter';
-    /**
-     * Optional - source for linkedin
-     */
-    this.source = '';
-    /**
-     * Email recipient.
-     * If you want to use mail share, you need to use this property
-     */
-    this.recipient = '';
-    /**
-     * is hover or not
-     */
-    this.isHover = false;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, h("div", { onClick: () => this.share(), onMouseEnter: () => this.hoverToggle(), onMouseLeave: () => this.hoverToggle() }, this.shareType == 'mail' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-mail" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null, this.shareType == 'linkedin' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-linkedin" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null, this.shareType == 'twitter' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-twitter" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null, this.shareType == 'facebook' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-fb" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null, this.shareType == 'share-api' ? h("icon-asset", Object.assign({ type: "solid", size: "large", name: "share-square" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : 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 getElement(this); }
-};
+let PtcSocialShare = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.display = 'inline-block';
+    this.shareType = 'twitter';
+    /**
+     * Optional - source for linkedin
+     */
+    this.source = '';
+    /**
+     * Email recipient.
+     * If you want to use mail share, you need to use this property
+     */
+    this.recipient = '';
+    /**
+     * is hover or not
+     */
+    this.isHover = false;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, h("div", { onClick: () => this.share(), onMouseEnter: () => this.hoverToggle(), onMouseLeave: () => this.hoverToggle() }, this.shareType == 'mail' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-mail" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null, this.shareType == 'linkedin' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-linkedin" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null, this.shareType == 'twitter' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-twitter" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null, this.shareType == 'facebook' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-fb" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null, this.shareType == 'share-api' ? h("icon-asset", Object.assign({ type: "solid", size: "large", name: "share-square" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : 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 getElement(this); }
+};
 PtcSocialShare.style = ptcSocialShareCss;
 
 export { PtcSocialShare as ptc_social_share };

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

@@ -1,30 +1,30 @@
-import { r as registerInstance, h, H as Host } from './index-f64012bd.js';
+import { r as registerInstance, h, H as Host } from './index-a91c2367.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(.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)}";
 
-let PtcSpan = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Span Style
-     */
-    this.spanStyle = 'tag-style';
-    /**
-     * Display
-     */
-    this.display = 'inline';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("span", { part: "part-ptc-span" }, h("slot", null))));
-  }
-  getCssClassMap() {
-    return {
-      [this.spanStyle]: true,
-      [this.display]: true,
-    };
-  }
-};
+let PtcSpan = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Span Style
+     */
+    this.spanStyle = 'tag-style';
+    /**
+     * Display
+     */
+    this.display = 'inline';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("span", { part: "part-ptc-span" }, h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.spanStyle]: true,
+      [this.display]: true,
+    };
+  }
+};
 PtcSpan.style = ptcSpanCss;
 
 export { PtcSpan as ptc_span };

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

@@ -1,90 +1,90 @@
-import { r as registerInstance, h, H as Host } from './index-f64012bd.js';
+import { r as registerInstance, h, H as Host } from './index-a91c2367.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}}";
 
-let PtcSvgBtn = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Display
-     */
-    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
-    };
-  }
-};
+let PtcSvgBtn = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Display
+     */
+    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

@@ -1,123 +1,125 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-f64012bd.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-a91c2367.js';
 
 const ptcTabListCss = "ptc-tab-list{display:block;position:relative}.tabs-header-container{overflow:hidden;width:100%;border-bottom:2px solid #E4E7E9}.tabs-header{display:flex;padding-left:2rem;padding-right:2rem;transition:opacity ease-out 250ms;opacity:0;width:95%}.tabs-header.active{opacity:1}.tabs-content{padding:20px}.ellipsis-btn{position:absolute;top:1rem;right:1rem;display:none}.ellipsis-btn.active{display:block}";
 
-let PtcTabList = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  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) {
-        tab.style.display = 'none';
-        activateDropDown = true;
-        hiddenTabs.push({
-          value: tab.getAttribute('name'),
-          text: tab.textContent
-        });
-      }
-    }
-    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();
-  }
-  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("div", { class: "tabs-content" }, h("slot", { name: "content" })), h("ptc-ellipsis-dropdown", { class: "ellipsis-btn", onItemSelected: (e) => { this.onDropdownItemSelected(e.detail); } })));
-  }
-  get host() { return getElement(this); }
-};
+let PtcTabList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  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) {
+        tab.style.display = 'none';
+        activateDropDown = true;
+        hiddenTabs.push({
+          value: tab.getAttribute('name'),
+          text: tab.textContent,
+          isSelected: tab.isSelected
+        });
+      }
+    }
+    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;
+  }
+  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("div", { class: "tabs-content" }, h("slot", { name: "content" })), h("ptc-ellipsis-dropdown", { "selected-tab": this.selectedValue, class: "ellipsis-btn", onItemSelected: (e) => { this.onDropdownItemSelected(e.detail); } })));
+  }
+  get host() { return getElement(this); }
+};
 PtcTabList.style = ptcTabListCss;
 
 export { PtcTabList as ptc_tab_list };