@ptcwebops/ptcw-design 0.5.5 → 0.5.7

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

@@ -6,70 +6,70 @@ const index = require('./index-3adcf9f4.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) {
-    index.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 (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: 'gray' } : { color: 'white' }))) : null, this.shareType == 'linkedin' ? index.h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-linkedin" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null, this.shareType == 'twitter' ? index.h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-twitter" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null, this.shareType == 'facebook' ? index.h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-fb" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null, this.shareType == 'share-api' ? index.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 index.getElement(this); }
-};
+let PtcSocialShare = class {
+  constructor(hostRef) {
+    index.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 (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: 'gray' } : { color: 'white' }))) : null, this.shareType == 'linkedin' ? index.h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-linkedin" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null, this.shareType == 'twitter' ? index.h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-twitter" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null, this.shareType == 'facebook' ? index.h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-fb" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null, this.shareType == 'share-api' ? index.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 index.getElement(this); }
+};
 PtcSocialShare.style = ptcSocialShareCss;
 
 exports.ptc_social_share = PtcSocialShare;

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

@@ -6,29 +6,29 @@ const index = require('./index-3adcf9f4.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) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Span Style
-     */
-    this.spanStyle = 'tag-style';
-    /**
-     * Display
-     */
-    this.display = 'inline';
-  }
-  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,
-    };
-  }
-};
+let PtcSpan = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Span Style
+     */
+    this.spanStyle = 'tag-style';
+    /**
+     * Display
+     */
+    this.display = 'inline';
+  }
+  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-announcement_2.cjs.entry.js → ptc-svg-btn.cjs.entry.js}

@@ -4,133 +4,91 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3adcf9f4.js');
 
-const ptcAnnouncementCss = ":host{display:block}.announcement{width:100%;position:relative;background-color:var(--color-gray-02);z-index:860;background-size:cover;background-repeat:repeat-x;border:1px solid var(--color-green-06);box-shadow:var(--ptc-shadow-small);z-index:999;display:none}.visible{display:block}.content-wrapper{display:flex;padding:var(--ptc-element-spacing-02) var(--ptc-element-spacing-03);margin:0 auto;align-items:center;justify-content:space-between}@media only screen and (min-width: 768px){.content-wrapper{padding:var(--ptc-element-spacing-02) var(--ptc-element-spacing-04)}}@media only screen and (min-width: 768px){.temp-container{width:750px}}@media only screen and (min-width: 992px){.temp-container{width:970px}}@media only screen and (min-width: 1200px){.temp-container{width:1170px}}@media only screen and (min-width: 1440px){.temp-container{width:1400px}}@media only screen and (min-width: 1600px){.temp-container{width:1560px}}.left-content{display:flex;flex-basis:82%;flex-direction:column}@media only screen and (min-width: 768px){.left-content{align-items:flex-start;justify-content:flex-start}}.title{flex-basis:18%;font-family:Raleway;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-extrabold);font-stretch:normal;font-style:normal;line-height:var(--ptc-line-height-looser);letter-spacing:var(--ptc-letter-spacing-loose);text-align:left;color:var(--color-gray-10);text-transform:uppercase}.ptc-svg-btn{flex-basis:18%}.bar-close{padding-right:var(--ptc-element-spacing-04)}.description{flex-basis:82%;font-family:Raleway;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-medium);font-stretch:normal;font-style:normal;line-height:var(--ptc-line-height-denser);letter-spacing:normal;text-align:left;color:var(--color-gray-10)}a{color:var(--color-blue-07);-webkit-transition:color var(--ptc-transition-slow) var(--ptc-ease-inout);-o-transition:color var(--ptc-transition-slow) var(--ptc-ease-inout);transition:color var(--ptc-transition-slow) var(--ptc-ease-inout);font-weight:var(--ptc-font-weight-bold);text-decoration:underline;white-space:nowrap;margin-left:var(--ptc-element-spacing-04)}a:hover{color:var(--color-blue-08)}a:focus{outline:3px solid var(--color-blue-07);outline-offset:0.25rem;border-radius:var(--ptc-border-radius-standard)}a:visited{color:var(--color-blue-09)}@media only screen and (min-width: 768px){.bar-close{padding-right:0px}}@media only screen and (min-width: 992px){.left-content{flex-direction:row;align-items:center}.title{font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-extrabold);line-height:var(--ptc-line-height-dense);letter-spacing:var(--ptc-letter-spacing-loose)}.description{font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense)}}";
-
-let PtcAnnouncement = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.close = index.createEvent(this, "close", 7);
-    /**
-     * bar title
-     */
-    this.barTitle = "";
-    /**
-     * bar description
-     */
-    this.Description = "";
-    /**
-     * Link Url
-     */
-    this.linkUrl = '#';
-    /**
-    * Target
-    */
-    this.target = '_self';
-    this.closeClick = () => {
-      this.visible = false;
-      this.close.emit();
-    };
-  }
-  render() {
-    var _a;
-    const classMap = this.getCssClassMap();
-    return (index.h(index.Host, null, index.h("div", { class: classMap, part: "part-announcement" }, index.h("div", { class: this.tempContainer ? 'content-wrapper temp-container' : 'content-wrapper' }, index.h("div", { class: "left-content", part: "part-left-content" }, !!this.barTitle ? index.h("div", { class: "title" }, this.barTitle) : null, index.h("div", { class: "description" }, !!this.Description ? index.h("span", null, this.Description) : null, !!this.linkText ? (index.h("a", { href: this.linkUrl, title: (_a = this.linkTitle) !== null && _a !== void 0 ? _a : this.linkText, target: this.target }, this.linkText)) : null)), index.h("ptc-svg-btn", { class: "bar-close", "svg-name": "close", onClick: this.closeClick })))));
-  }
-  getCssClassMap() {
-    return {
-      ['announcement']: true,
-      [this.visible ? 'visible' : '']: true,
-    };
-  }
-};
-PtcAnnouncement.style = ptcAnnouncementCss;
-
-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) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Display
-     */
-    this.display = 'block';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h(index.Host, { class: classMap }, !!this.svgName && this.svgName === 'close' ? index.h("div", { class: 'svg-close', innerHTML: closeSvg }) : null, !!this.svgName && this.svgName === 'slider-left' ? index.h("div", { class: 'slider-left', innerHTML: arrowSvgLeft }) : null, !!this.svgName && this.svgName === 'slider-right' ? index.h("div", { class: 'slider-right', innerHTML: arrowSvgRight }) : null, !!this.svgName && this.svgName === 'back-arrow' ? index.h("div", { class: 'back-arrow', innerHTML: backarrow }) : null));
-  }
-  getCssClassMap() {
-    return {
-      [this.display]: true
-    };
-  }
-};
+let PtcSvgBtn = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Display
+     */
+    this.display = 'block';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, { class: classMap }, !!this.svgName && this.svgName === 'close' ? index.h("div", { class: 'svg-close', innerHTML: closeSvg }) : null, !!this.svgName && this.svgName === 'slider-left' ? index.h("div", { class: 'slider-left', innerHTML: arrowSvgLeft }) : null, !!this.svgName && this.svgName === 'slider-right' ? index.h("div", { class: 'slider-right', innerHTML: arrowSvgRight }) : null, !!this.svgName && this.svgName === 'back-arrow' ? index.h("div", { class: 'back-arrow', innerHTML: backarrow }) : null));
+  }
+  getCssClassMap() {
+    return {
+      [this.display]: true
+    };
+  }
+};
 PtcSvgBtn.style = ptcSvgBtnCss;
 
-exports.ptc_announcement = PtcAnnouncement;
 exports.ptc_svg_btn = PtcSvgBtn;

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

@@ -4,85 +4,124 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3adcf9f4.js');
 
-const ptcTabListCss = ".tabs-header{display:flex;border-bottom:2px solid #E4E7E9;padding-left:2rem;padding-right:2rem}.tabs-content{padding:10px}";
+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) {
-    index.registerInstance(this, hostRef);
-  }
-  componentDidLoad() {
-    this.createGroup();
-    /*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);
-        }
-      });
-    });
-  }
-  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();
-  }
-  render() {
-    return [
-      index.h("div", { class: "tabs-header" }, index.h("slot", { name: "header" })),
-      index.h("div", { class: "tabs-content" }, index.h("slot", { name: "content" }))
-    ];
-  }
-  get host() { return index.getElement(this); }
-};
+let PtcTabList = class {
+  constructor(hostRef) {
+    index.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 (index.h(index.Host, null, index.h("div", { class: "tabs-header-container" }, index.h("div", { class: "tabs-header" }, index.h("slot", { name: "header" }))), index.h("div", { class: "tabs-content" }, index.h("slot", { name: "content" })), index.h("ptc-ellipsis-dropdown", { class: "ellipsis-btn", onItemSelected: (e) => { this.onDropdownItemSelected(e.detail); } })));
+  }
+  get host() { return index.getElement(this); }
+};
 PtcTabList.style = ptcTabListCss;
 
 exports.ptc_tab_list = PtcTabList;