@ptcwebops/ptcw-design 1.8.2 → 1.8.4

package/dist/cjs/{ptc-progress-bar_2.cjs.entry.js → ptc-social-share.cjs.entry.js}

@@ -2,100 +2,79 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-266d5edd.js');
-
-const ptcProgressBarCss = ":host{display:block}:host .progress-bar-container{height:5px;background-color:linear-gradient(272deg, #3b4550, #1a1a1a);width:100%}:host .progress-bar{height:100%;background-image:linear-gradient(270deg, #4795cd, #33a13c);transition:width 0.3s ease-in-out}";
-
-const PtcProgressBar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.scrollPercentage = 0;
-  }
-  handleScroll() {
-    const scrollTop = document.documentElement.scrollTop;
-    const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
-    console.log('scrollTop: ' + scrollTop + '; scorllHeight: ' + scrollHeight);
-    const percentage = (scrollTop / scrollHeight) * 100;
-    this.scrollPercentage = percentage;
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "progress-bar-container" }, index.h("div", { class: "progress-bar", style: { width: `${this.scrollPercentage}%` } }))));
-  }
-};
-PtcProgressBar.style = ptcProgressBarCss;
+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;
-    this.iconSize = 'large';
-  }
-  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: this.iconSize, name: "plm-mail" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'linkedin' ? index.h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-linkedin" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'twitter' ? index.h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-twitter" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'facebook' ? index.h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-fb" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-mail' ? index.h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "mail-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-linkedin' ? index.h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "linkedin-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-twitter' ? index.h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "twitter-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-facebook' ? index.h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "facebook-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'share-api' ? index.h("icon-asset", Object.assign({ type: "solid", size: this.iconSize, name: "share-square" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'download' ? index.h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "download-arrow-news", color: "inherit" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null), this.shareType == 'download' &&
-      index.h("ptc-modal", { id: "download-modal", show: false, size: "lg", fixed: true, "is-bio-modal": true }, index.h("ptc-title", { type: 'h2', "text-align": 'center', "title-weight": "w-5", upperline: "no-upperline" }, "Thanks For Downloading"))));
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-social-share']: true,
-      [this.display]: true,
-    };
-  }
-  hoverToggle() {
-    this.isHover = !this.isHover;
-  }
-  share() {
-    if (this.shareType == 'twitter' || this.shareType == "blog-twitter") {
-      window.open(`https://twitter.com/share?text=${this.text}&url=${this.url}`);
-    }
-    if (this.shareType == 'facebook' || this.shareType == "blog-facebook") {
-      window.open(`https://www.facebook.com/sharer/sharer.php?u=${this.url}`);
-    }
-    if (this.shareType == 'linkedin' || this.shareType == "blog-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' || this.shareType == "blog-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}`);
-      }
-    }
-    if (this.shareType == 'download') {
-      let modal = this.el.shadowRoot.querySelector('#download-modal');
-      modal.setAttribute('show', 'true');
-      setTimeout(() => {
-        modal.setAttribute('show', 'false');
-        window.open(`${this.url}`, "_self");
-      }, 1000);
-    }
-  }
-  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;
+    this.iconSize = 'large';
+  }
+  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: this.iconSize, name: "plm-mail" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'linkedin' ? index.h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-linkedin" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'twitter' ? index.h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-twitter" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'facebook' ? index.h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-fb" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-mail' ? index.h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "mail-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-linkedin' ? index.h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "linkedin-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-twitter' ? index.h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "twitter-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-facebook' ? index.h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "facebook-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'share-api' ? index.h("icon-asset", Object.assign({ type: "solid", size: this.iconSize, name: "share-square" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'download' ? index.h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "download-arrow-news", color: "inherit" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null), this.shareType == 'download' &&
+      index.h("ptc-modal", { id: "download-modal", show: false, size: "lg", fixed: true, "is-bio-modal": true }, index.h("ptc-title", { type: 'h2', "text-align": 'center', "title-weight": "w-5", upperline: "no-upperline" }, "Thanks For Downloading"))));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-social-share']: true,
+      [this.display]: true,
+    };
+  }
+  hoverToggle() {
+    this.isHover = !this.isHover;
+  }
+  share() {
+    if (this.shareType == 'twitter' || this.shareType == "blog-twitter") {
+      window.open(`https://twitter.com/share?text=${this.text}&url=${this.url}`);
+    }
+    if (this.shareType == 'facebook' || this.shareType == "blog-facebook") {
+      window.open(`https://www.facebook.com/sharer/sharer.php?u=${this.url}`);
+    }
+    if (this.shareType == 'linkedin' || this.shareType == "blog-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' || this.shareType == "blog-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}`);
+      }
+    }
+    if (this.shareType == 'download') {
+      let modal = this.el.shadowRoot.querySelector('#download-modal');
+      modal.setAttribute('show', 'true');
+      setTimeout(() => {
+        modal.setAttribute('show', 'false');
+        window.open(`${this.url}`, "_self");
+      }, 1000);
+    }
+  }
+  get el() { return index.getElement(this); }
+};
 PtcSocialShare.style = ptcSocialShareCss;
 
-exports.ptc_progress_bar = PtcProgressBar;
 exports.ptc_social_share = PtcSocialShare;

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

@@ -2,30 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-266d5edd.js');
+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(.blog-tag) span{font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-densest);color:var(--color-gray-10)}: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)}:host(.w-3) span{font-weight:var(--ptc-font-weight-thin)}:host(.w-4) span{font-weight:var(--ptc-font-weight-regular)}:host(.w-5) span{font-weight:var(--ptc-font-weight-medium)}:host(.w-6) span{font-weight:var(--ptc-font-weight-semibold)}:host(.w-7) span{font-weight:var(--ptc-font-weight-bold)}:host(.w-8) span{font-weight:var(--ptc-font-weight-extrabold)}:host(.w-9) span{font-weight:var(--ptc-font-weight-black)}";
 
-const PtcSpan = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.spanStyle = 'tag-style';
-    this.display = 'inline';
-    this.fontWeight = 'w-4';
-    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.fontWeight]: true,
-      [this.display]: true,
-    };
-  }
-};
+const PtcSpan = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.spanStyle = 'tag-style';
+    this.display = 'inline';
+    this.fontWeight = 'w-4';
+    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.fontWeight]: true,
+      [this.display]: true,
+    };
+  }
+};
 PtcSpan.style = ptcSpanCss;
 
 exports.ptc_span = PtcSpan;

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

@@ -2,42 +2,42 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-266d5edd.js');
+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

@@ -2,40 +2,40 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-266d5edd.js');
+const index = require('./index-88135a6b.js');
 
 const ptcStickySectionCss = ":host{display:block}:host .stickyEl.sticky{top:0;position:fixed;width:100%;z-index:2000;transition:top 0.5s}";
 
-const PtcStickySection = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  componentDidLoad() {
-    let that = this;
-    setTimeout(() => {
-      that.stickyEl = that.el.shadowRoot.querySelector('.stickyEl');
-      that.originalPosition = that.stickyEl.offsetTop;
-      window.addEventListener('scroll', that.handleScroll);
-    }, 1500);
-  }
-  disconnectedCallback() {
-    window.removeEventListener('scroll', this.handleScroll);
-  }
-  handleScroll() {
-    if (this.stickyEl) {
-      if (window.scrollY > 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); }
-};
+const PtcStickySection = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  componentDidLoad() {
+    let that = this;
+    setTimeout(() => {
+      that.stickyEl = that.el.shadowRoot.querySelector('.stickyEl');
+      that.originalPosition = that.stickyEl.offsetTop;
+      window.addEventListener('scroll', that.handleScroll);
+    }, 1500);
+  }
+  disconnectedCallback() {
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+  handleScroll() {
+    if (this.stickyEl) {
+      if (window.scrollY > 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-sticky-title.cjs.entry.js

@@ -2,33 +2,33 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-266d5edd.js');
+const index = require('./index-88135a6b.js');
 
-const ptcStickyTitleCss = ":host{display:block;position:relative;z-index:3}.sticky-header-container{position:absolute;top:0;left:0;width:100%;height:0;padding:0 24px;background-color:transparent;transition:visibility 0.3s ease-in-out, opacity 0.3s ease-in-out, height 0.3s ease-in-out;display:flex;opacity:0;visibility:hidden;align-items:flex-end;box-sizing:border-box}@media only screen and (min-width: 768px){.sticky-header-container{align-items:center}}.sticky-header-container.sticky{position:fixed;height:74px;background-image:linear-gradient(272deg, #3b4550, #1a1a1a);z-index:1;visibility:visible;opacity:1}.sticky-header-title{width:100%;display:flex;justify-content:flex-start;align-items:center;position:relative}@media only screen and (min-width: 768px){.sticky-header-title{justify-content:center}}.sticky-header-title .logo-image{position:absolute;left:0px;visibility:hidden;transform:translateY(-25px)}@media only screen and (min-width: 768px){.sticky-header-title .logo-image{transform:translateY(0px)}}.sticky-header-title .logo-image.is-visible{visibility:visible}.sticky-header-title .logo-image img{max-height:24px;width:auto}@media only screen and (min-width: 768px){.sticky-header-title .logo-image img{max-height:100%;width:60px}}@media only screen and (min-width: 992px){.sticky-header-title .logo-image img{width:90px}}.sticky-header-title .share-icons{position:absolute;right:0px;visibility:visible;transform:translateY(-25px);transition:visibility 0.3s ease-in-out}@media only screen and (min-width: 768px){.sticky-header-title .share-icons{visibility:hidden}}.sticky-header-title .share-icons ptc-social-share{margin-left:var(--ptc-element-spacing-03)}.sticky-header-title h1{color:#ffffff;font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-bold);margin-top:var(--ptc-element-spacing-05);margin-bottom:var(--ptc-element-spacing-05)}@media only screen and (min-width: 768px){.sticky-header-title h1{margin-top:0.67em;margin-bottom:0.67em;font-size:var(--ptc-font-size-large)}}ptc-progress-bar{display:none;width:100%}.sticky ptc-progress-bar{position:absolute;bottom:0;left:0;width:100%;display:block}";
+const ptcStickyTitleCss = ":host{display:block;position:relative;z-index:3}.sticky-header-container{position:absolute;top:0;left:0;width:100%;height:0;padding:0 24px;background-color:transparent;transition:visibility 0.3s ease-in-out, opacity 0.3s ease-in-out, height 0.3s ease-in-out;display:flex;opacity:0;visibility:hidden;align-items:flex-end;box-sizing:border-box}@media only screen and (min-width: 768px){.sticky-header-container{align-items:center}}.sticky-header-container.sticky{position:fixed;height:74px;background-image:linear-gradient(272deg, #3b4550, #1a1a1a);z-index:1;visibility:visible;opacity:1}.sticky-header-title{width:100%;display:flex;justify-content:flex-start;align-items:center;position:relative;padding:0}@media only screen and (min-width: 768px){.sticky-header-title{justify-content:center;padding:0 80px}}@media only screen and (min-width: 992px){.sticky-header-title{padding:0 100px}}.sticky-header-title .logo-image{position:absolute;left:0px;visibility:hidden;transform:translateY(-25px)}@media only screen and (min-width: 768px){.sticky-header-title .logo-image{transform:translateY(0px)}}.sticky-header-title .logo-image.is-visible{visibility:visible}.sticky-header-title .logo-image img{max-height:24px;width:auto}@media only screen and (min-width: 768px){.sticky-header-title .logo-image img{max-height:100%;width:60px}}@media only screen and (min-width: 992px){.sticky-header-title .logo-image img{width:90px}}.sticky-header-title .share-icons{position:absolute;right:0px;visibility:visible;transform:translateY(-25px);transition:visibility 0.3s ease-in-out}@media only screen and (min-width: 768px){.sticky-header-title .share-icons{visibility:hidden}}.sticky-header-title h1{color:#ffffff;font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-bold);margin-top:var(--ptc-element-spacing-05);margin-bottom:var(--ptc-element-spacing-05)}@media only screen and (min-width: 768px){.sticky-header-title h1{margin-top:0.67em;margin-bottom:0.67em;font-size:var(--ptc-font-size-large)}}ptc-progress-bar{display:none;width:100%}.sticky ptc-progress-bar{position:absolute;bottom:0;left:0;width:100%;display:block}";
 
-const PtcStickyTitle = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.barTitle = 'Bar Title';
-    this.isSticky = false;
-    this.logo = 'logo.png';
-  }
-  handleScroll() {
-    const scrollTop = document.documentElement.scrollTop;
-    const threshold = 260;
-    if (scrollTop > threshold) {
-      this.isSticky = true;
-    }
-    else {
-      this.isSticky = false;
-    }
-  }
-  render() {
-    const logoImg = index.getAssetPath(`./media/${this.logo}`);
-    return (index.h(index.Host, null, index.h("div", { class: `sticky-header-container ${this.isSticky ? 'sticky' : ''}` }, index.h("div", { class: "sticky-header-title" }, index.h("div", { class: `logo-image ${this.isSticky ? 'is-visible' : ''}` }, index.h("img", { src: logoImg })), index.h("h1", null, this.barTitle), index.h("div", { class: `share-icons is-flex ${this.isSticky ? 'is-visible' : ''}` }, index.h("ptc-social-share", { class: "icon", display: "inline-block", "share-type": "blog-facebook", text: "summary", url: "https://www.ptc.com", "share-title": "title goes here", source: "linkedin source", recipient: "yqiantest@ptc.com" }), index.h("ptc-social-share", { class: "icon", display: "inline-block", "share-type": "blog-twitter", text: "summary", url: "https://www.ptc.com", "share-title": "title goes here", source: "linkedin source", recipient: "yqiantest@ptc.com" }), index.h("ptc-social-share", { class: "icon", display: "inline-block", "share-type": "blog-linkedin", text: "summary", url: "https://www.ptc.com", "share-title": "title goes here", source: "linkedin source", recipient: "yqiantest@ptc.com" }), index.h("ptc-social-share", { class: "icon", display: "inline-block", "share-type": "blog-mail", text: "summary", url: "https://www.ptc.com", "share-title": "title goes here", source: "linkedin source", recipient: "yqiantest@ptc.com" }))), index.h("ptc-progress-bar", null))));
-  }
-  static get assetsDirs() { return ["media"]; }
-};
+const PtcStickyTitle = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.barTitle = 'Bar Title';
+    this.isSticky = false;
+    this.logo = 'logo.png';
+  }
+  handleScroll() {
+    const scrollTop = document.documentElement.scrollTop;
+    const threshold = 260;
+    if (scrollTop > threshold) {
+      this.isSticky = true;
+    }
+    else {
+      this.isSticky = false;
+    }
+  }
+  render() {
+    const logoImg = index.getAssetPath(`./media/${this.logo}`);
+    return (index.h(index.Host, null, index.h("div", { class: `sticky-header-container ${this.isSticky ? 'sticky' : ''}` }, index.h("div", { class: "sticky-header-title" }, index.h("div", { class: `logo-image ${this.isSticky ? 'is-visible' : ''}` }, index.h("img", { src: logoImg })), index.h("h1", null, index.h("ptc-tooltip", { "text-lines": "1", description: this.barTitle })), index.h("div", { class: `share-icons is-flex ${this.isSticky ? 'is-visible' : ''}` }, index.h("slot", { name: 'social-share-slot' }))), index.h("ptc-progress-bar", null))));
+  }
+  static get assetsDirs() { return ["media"]; }
+};
 PtcStickyTitle.style = ptcStickyTitleCss;
 
 exports.ptc_sticky_title = PtcStickyTitle;

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

@@ -2,25 +2,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-266d5edd.js');
+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" })))));
-  }
-};
+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

@@ -2,32 +2,32 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-266d5edd.js');
+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{width:100%;margin:auto;padding:0px;display:none}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner{width:1170px}}@media only screen and (min-width: 1440px){:host .navbar .navbar-inner{width:87.5rem}}@media only screen and (min-width: 1600px){:host .navbar .navbar-inner{width:97.5rem}}@media only screen and (min-width: 1980px){:host .navbar .navbar-inner{width:117.5rem}}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner{padding:10px 16px;height:auto;display:block}}:host .navbar .navbar-inner .nav-wrapper{width:auto;margin:auto 32px;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.mobileTitle = "See page topics";
-    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() }, this.mobileTitle, 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); }
-};
+const PtcSubnav = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.mobileTitle = "See page topics";
+    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() }, this.mobileTitle, 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;