@ptcwebops/ptcw-design 2.2.0 → 2.2.2

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

@@ -1,34 +1,34 @@
-import { r as registerInstance, h, H as Host } from './index-8db28d54.js';
+import { r as registerInstance, h, H as Host } from './index-22a84644.js';
 
 const ptcSpacerCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:12px;min-width:12px;height:12px}@media (min-width: 36em){:host{width:16px;min-width:16px;height:16px}}:host(.ptc-spacer-horizontal){display:inline-block;height:100% !important}:host(.ptc-spacer-horizontal.xx-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xx-small){width:4px;min-width:4px}}:host(.ptc-spacer-horizontal.x-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.x-small){width:8px;min-width:8px}}:host(.ptc-spacer-horizontal.small){width:8px;min-width:8px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.small){width:12px;min-width:12px}}:host(.ptc-spacer-horizontal.medium){height:100%}:host(.ptc-spacer-horizontal.large){width:16px;min-width:16px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.large){width:20px;min-width:20px}}:host(.ptc-spacer-horizontal.x-large){width:20px;min-width:20px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.x-large){width:28px;min-width:28px}}:host(.ptc-spacer-horizontal.xx-large){width:28px;min-width:28px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xx-large){width:36px;min-width:36px}}:host(.ptc-spacer-horizontal.xxx-large){width:36px;min-width:36px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xxx-large){width:48px;min-width:48px}}:host(.ptc-spacer-horizontal.xxxx-large){width:48px;min-width:48px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xxxx-large){width:72px;min-width:72px}}:host(.ptc-spacer-vertical.xx-small){width:100%;height:4px;min-height:4px}:host(.ptc-spacer-vertical.x-small){width:100%;height:4px;min-height:4px}@media (min-width: 36em){:host(.ptc-spacer-vertical.x-small){height:8px;min-height:8px}}:host(.ptc-spacer-vertical.small){width:100%;height:8px;min-height:8px}@media (min-width: 36em){:host(.ptc-spacer-vertical.small){height:12px;min-height:12px}}:host(.ptc-spacer-vertical.medium){width:100%}:host(.ptc-spacer-vertical.large){width:100%;height:16px;min-height:16px}@media (min-width: 36em){:host(.ptc-spacer-vertical.large){height:20px;min-height:20px}}:host(.ptc-spacer-vertical.x-large){width:100%;height:20px;min-height:20px}@media (min-width: 36em){:host(.ptc-spacer-vertical.x-large){height:28px;min-height:28px}}:host(.ptc-spacer-vertical.xx-large){width:100%;height:28px;min-height:28px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xx-large){height:36px;min-height:36px}}:host(.ptc-spacer-vertical.xxx-large){width:100%;height:36px;min-height:36px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xxx-large){height:48px;min-height:48px}}:host(.ptc-spacer-vertical.xxxx-large){width:100%;height:48px;min-height:48px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xxxx-large){height:72px;min-height:72px}}:host(.ptc-spacer-vertical.space-144){width:100%;height:144px;min-height:144px}:host(.ptc-spacer-vertical.space-120){width:100%;height:120px;min-height:120px}:host(.ptc-spacer-vertical.space-128){width:100%;height:128px;min-height:128px}:host(.ptc-spacer-xx-small){display:none}@media (max-width: 22.5em){:host(.ptc-spacer-xx-small){display:block}}:host(.ptc-spacer-x-small){display:none}@media (max-width: 35.99em){:host(.ptc-spacer-x-small){display:block}}:host(.ptc-spacer-small){display:none}@media (min-width: 36em){:host(.ptc-spacer-small){display:block}}:host(.ptc-spacer-medium){display:none}@media (min-width: 48em){:host(.ptc-spacer-medium){display:block}}:host(.ptc-spacer-large){display:none}@media (min-width: 62em){:host(.ptc-spacer-large){display:block}}:host(.ptc-spacer-x-large){display:none}@media (min-width: 64.0625em){:host(.ptc-spacer-x-large){display:block}}:host(.ptc-spacer-xx-large){display:none}@media (min-width: 75em){:host(.ptc-spacer-xx-large){display:block}}:host(.ptc-spacer-xxx-large){display:none}@media (min-width: 90em){:host(.ptc-spacer-xxx-large){display:block}}";
 
-const PtcSpacer = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.breakpoint = '';
-    this.size = 'medium';
-    this.direction = 'vertical';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }));
-  }
-  getCssClassMap() {
-    return {
-      [this.size]: true,
-      ['ptc-spacer-horizontal']: this.direction === 'horizontal',
-      ['ptc-spacer-vertical']: this.direction === 'vertical',
-      ['ptc-spacer-xx-small']: this.breakpoint === 'xx-small',
-      ['ptc-spacer-x-small']: this.breakpoint === 'x-small',
-      ['ptc-spacer-small']: this.breakpoint === 'small',
-      ['ptc-spacer-medium']: this.breakpoint === 'medium',
-      ['ptc-spacer-large']: this.breakpoint === 'large',
-      ['ptc-spacer-x-large']: this.breakpoint === 'x-large',
-      ['ptc-spacer-xx-large']: this.breakpoint === 'xx-large',
-      ['ptc-spacer-xxx-large']: this.breakpoint === 'xxx-large',
-    };
-  }
-};
+const PtcSpacer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.breakpoint = '';
+    this.size = 'medium';
+    this.direction = 'vertical';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }));
+  }
+  getCssClassMap() {
+    return {
+      [this.size]: true,
+      ['ptc-spacer-horizontal']: this.direction === 'horizontal',
+      ['ptc-spacer-vertical']: this.direction === 'vertical',
+      ['ptc-spacer-xx-small']: this.breakpoint === 'xx-small',
+      ['ptc-spacer-x-small']: this.breakpoint === 'x-small',
+      ['ptc-spacer-small']: this.breakpoint === 'small',
+      ['ptc-spacer-medium']: this.breakpoint === 'medium',
+      ['ptc-spacer-large']: this.breakpoint === 'large',
+      ['ptc-spacer-x-large']: this.breakpoint === 'x-large',
+      ['ptc-spacer-xx-large']: this.breakpoint === 'xx-large',
+      ['ptc-spacer-xxx-large']: this.breakpoint === 'xxx-large',
+    };
+  }
+};
 PtcSpacer.style = ptcSpacerCss;
 
 export { PtcSpacer as ptc_spacer };

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

@@ -1,27 +1,27 @@
-import { r as registerInstance, h, H as Host } from './index-8db28d54.js';
+import { r as registerInstance, h, H as Host } from './index-22a84644.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(.three-column-report) span{font-size:var(--ptc-font-size-medium);line-height:var(--ptc-line-height-densest)}: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)}@media only screen and (min-width: 360px){:host(.three-column-report) span{font-size:var(--ptc-font-size-large);line-height:var(--ptc-line-height-densest)}}@media only screen and (min-width: 480px){:host(.three-column-report) span{font-size:var(--ptc-font-size-x-large);line-height:var(--ptc-line-height-densest)}}@media only screen and (min-width: 768px){:host(.three-column-report) span{font-size:var(--ptc-font-size-xx-large);line-height:var(--ptc-line-height-densest)}}";
 
-const PtcSpan = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.spanStyle = 'tag-style';
-    this.display = 'inline';
-    this.fontWeight = 'w-4';
-    this.styles = undefined;
-  }
-  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.fontWeight]: true,
-      [this.display]: true,
-    };
-  }
-};
+const PtcSpan = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.spanStyle = 'tag-style';
+    this.display = 'inline';
+    this.fontWeight = 'w-4';
+    this.styles = undefined;
+  }
+  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.fontWeight]: true,
+      [this.display]: true,
+    };
+  }
+};
 PtcSpan.style = ptcSpanCss;
 
 export { PtcSpan as ptc_span };

package/dist/esm/ptc-square-card.entry.js

@@ -1,17 +1,17 @@
-import { r as registerInstance, h, H as Host } from './index-8db28d54.js';
+import { r as registerInstance, h, H as Host } from './index-22a84644.js';
 
 const ptcSquareCardCss = ":host{display:block;background-color:transparent}:host .card-border{height:auto;width:200px}@media only screen and (min-width: 480px){:host .card-border{height:200px}}:host .square-padding{margin:var(--ptc-element-spacing-02)}@media only screen and (min-width: 480px){:host .square-padding{margin:var(--ptc-element-spacing-03) var(--ptc-element-spacing-01)}}@media screen and (min-width: 512px){:host .square-padding{margin:var(--ptc-element-spacing-03)}}:host .card-layout{display:flex;flex-direction:column;justify-content:center;align-items:center}:host .icon{display:inline;vertical-align:middle}:host .number{display:inline-block;line-height:var(--ptc-line-height-denser);font-size:var(--ptc-font-size-xx-large);font-weight:var(--ptc-font-weight-semibold);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}:host slot[name=before-icon],:host slot[name=after-icon]{text-align:center;line-height:var(--ptc-line-height-densest);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-semibold)}:host slot[name=before-icon]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis}:host slot[name=after-icon]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;text-overflow:ellipsis}";
 
-const PtcSquareCard = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.number = undefined;
-    this.arrowDirection = undefined;
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "card-border square-padding card-layout" }, h("slot", { name: "before-icon" }), h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "icon-block" }, !!this.arrowDirection ? (h("icon-asset", Object.assign({ class: "icon" }, (this.arrowDirection === 'up' ? { name: 'arrow_ascending' } : { name: 'arrow_descending' }), { type: "ptc" }, !this.number ? { size: 'xxx-large' } : { size: 'xx-large' }, { color: "ptc-green" }))) : null, !!this.number ? h("div", { class: "number" }, this.number) : null), h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("slot", { name: "after-icon" }))));
-  }
-};
+const PtcSquareCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.number = undefined;
+    this.arrowDirection = undefined;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "card-border square-padding card-layout" }, h("slot", { name: "before-icon" }), h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "icon-block" }, !!this.arrowDirection ? (h("icon-asset", Object.assign({ class: "icon" }, (this.arrowDirection === 'up' ? { name: 'arrow_ascending' } : { name: 'arrow_descending' }), { type: "ptc" }, !this.number ? { size: 'xxx-large' } : { size: 'xx-large' }, { color: "ptc-green" }))) : null, !!this.number ? h("div", { class: "number" }, this.number) : null), h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("slot", { name: "after-icon" }))));
+  }
+};
 PtcSquareCard.style = ptcSquareCardCss;
 
 export { PtcSquareCard as ptc_square_card };

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

@@ -1,39 +1,39 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-8db28d54.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-22a84644.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) {
-    registerInstance(this, hostRef);
-  }
-  handleResize() {
-    this.setHostLocation();
-  }
-  componentWillLoad() {
-    this.setHostLocation();
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "icon-container" }, h("slot", null))));
-  }
-  setHostLocation() {
-    let width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
-    let currEle = this.el;
-    // get the element
-    const element = document.querySelector("ptc-sticky-icons");
-    if (element) {
-      currEle.parentElement.style.position = "relative";
-      if (width < 992) {
-        currEle.parentElement.appendChild(currEle);
-        currEle.parentElement.style.paddingRight = "0px";
-      }
-      else {
-        currEle.parentElement.prepend(currEle);
-        currEle.parentElement.style.paddingRight = "40px";
-      }
-    }
-  }
-  get el() { return getElement(this); }
-};
+const PtcStickyIcons = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  handleResize() {
+    this.setHostLocation();
+  }
+  componentWillLoad() {
+    this.setHostLocation();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "icon-container" }, h("slot", null))));
+  }
+  setHostLocation() {
+    let width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
+    let currEle = this.el;
+    // get the element
+    const element = document.querySelector("ptc-sticky-icons");
+    if (element) {
+      currEle.parentElement.style.position = "relative";
+      if (width < 992) {
+        currEle.parentElement.appendChild(currEle);
+        currEle.parentElement.style.paddingRight = "0px";
+      }
+      else {
+        currEle.parentElement.prepend(currEle);
+        currEle.parentElement.style.paddingRight = "40px";
+      }
+    }
+  }
+  get el() { return getElement(this); }
+};
 PtcStickyIcons.style = ptcStickyIconsCss;
 
 export { PtcStickyIcons as ptc_sticky_icons };

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

@@ -1,37 +1,37 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-8db28d54.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-22a84644.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) {
-    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 (h(Host, null, h("div", { class: "stickyEl", ref: el => this.stickyEl = el }, h("slot", null))));
-  }
-  get el() { return getElement(this); }
-};
+const PtcStickySection = class {
+  constructor(hostRef) {
+    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 (h(Host, null, h("div", { class: "stickyEl", ref: el => this.stickyEl = el }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
 PtcStickySection.style = ptcStickySectionCss;
 
 export { PtcStickySection as ptc_sticky_section };

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

@@ -1,30 +1,30 @@
-import { r as registerInstance, a as getAssetPath, h, H as Host } from './index-8db28d54.js';
+import { r as registerInstance, a as getAssetPath, h, H as Host } from './index-22a84644.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;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) {
-    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 = getAssetPath(`./media/${this.logo}`);
-    return (h(Host, null, h("div", { class: `sticky-header-container ${this.isSticky ? 'sticky' : ''}` }, h("div", { class: "sticky-header-title" }, h("div", { class: `logo-image ${this.isSticky ? 'is-visible' : ''}` }, h("img", { src: logoImg })), h("h1", null, h("ptc-tooltip", { "text-lines": "1", description: this.barTitle })), h("div", { class: `share-icons is-flex ${this.isSticky ? 'is-visible' : ''}` }, h("slot", { name: 'social-share-slot' }))), h("ptc-progress-bar", null))));
-  }
-  static get assetsDirs() { return ["media"]; }
-};
+const PtcStickyTitle = class {
+  constructor(hostRef) {
+    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 = getAssetPath(`./media/${this.logo}`);
+    return (h(Host, null, h("div", { class: `sticky-header-container ${this.isSticky ? 'sticky' : ''}` }, h("div", { class: "sticky-header-title" }, h("div", { class: `logo-image ${this.isSticky ? 'is-visible' : ''}` }, h("img", { src: logoImg })), h("h1", null, h("ptc-tooltip", { "text-lines": "1", description: this.barTitle })), h("div", { class: `share-icons is-flex ${this.isSticky ? 'is-visible' : ''}` }, h("slot", { name: 'social-share-slot' }))), h("ptc-progress-bar", null))));
+  }
+  static get assetsDirs() { return ["media"]; }
+};
 PtcStickyTitle.style = ptcStickyTitleCss;
 
 export { PtcStickyTitle as ptc_sticky_title };

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

@@ -1,22 +1,22 @@
-import { r as registerInstance, h, H as Host } from './index-8db28d54.js';
+import { r as registerInstance, h, H as Host } from './index-22a84644.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) {
-    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 (h(Host, null, h(Tag, Object.assign({}, (!!this.cardHref ? { href: this.cardHref } : {})), h("h4", null, this.cardTitle), h("img", { src: this.cardImageSrc, alt: this.cardImageAlt }), h("slot", null), h("h4", { class: "cta" }, this.ctaText, h("icon-asset", { type: "ptc", size: "x-small", name: this.ctaIconAssetName, color: "white" })))));
-  }
-};
+const PtcSubnavCard = class {
+  constructor(hostRef) {
+    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 (h(Host, null, h(Tag, Object.assign({}, (!!this.cardHref ? { href: this.cardHref } : {})), h("h4", null, this.cardTitle), h("img", { src: this.cardImageSrc, alt: this.cardImageAlt }), h("slot", null), h("h4", { class: "cta" }, this.ctaText, h("icon-asset", { type: "ptc", size: "x-small", name: this.ctaIconAssetName, color: "white" })))));
+  }
+};
 PtcSubnavCard.style = ptcSubnavCardCss;
 
 export { PtcSubnavCard as ptc_subnav_card };

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

@@ -1,29 +1,29 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-8db28d54.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-22a84644.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: 1256px){:host .navbar .navbar-inner{width:1256px}}@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) {
-    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 (h(Host, null, h("nav", { class: `navbar ${this.navOpen ? 'navOpen' : ''}` }, h("button", { class: "navbar-toggle", onClick: () => this.toggleNav() }, this.mobileTitle, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15", fill: "white", class: "" }, 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" }))), h("div", { class: "navbar-inner" }, h("div", { class: "nav-wrapper" }, h("slot", { name: "subnav-menu-left" }), h("slot", { name: "subnav-menu-right" }))))));
-  }
-  get el() { return getElement(this); }
-};
+const PtcSubnav = class {
+  constructor(hostRef) {
+    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 (h(Host, null, h("nav", { class: `navbar ${this.navOpen ? 'navOpen' : ''}` }, h("button", { class: "navbar-toggle", onClick: () => this.toggleNav() }, this.mobileTitle, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15", fill: "white", class: "" }, 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" }))), h("div", { class: "navbar-inner" }, h("div", { class: "nav-wrapper" }, h("slot", { name: "subnav-menu-left" }), h("slot", { name: "subnav-menu-right" }))))));
+  }
+  get el() { return getElement(this); }
+};
 PtcSubnav.style = ptcSubnavCss;
 
 export { PtcSubnav as ptc_subnav };