@ptcwebops/ptcw-design 2.2.9 → 2.3.2

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

@@ -2,30 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1662de74.js');
+const index = require('./index-dddc2aea.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) {
-    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-square-card.cjs.entry.js

@@ -2,20 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1662de74.js');
+const index = require('./index-dddc2aea.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);color:var(--color-gray-10);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);color:var(--color-gray-10)}: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) {
-    index.registerInstance(this, hostRef);
-    this.number = undefined;
-    this.arrowDirection = undefined;
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "card-border square-padding card-layout" }, index.h("slot", { name: "before-icon" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "small" }), index.h("ptc-spacer", { breakpoint: "small", size: "x-small" }), index.h("div", { class: "icon-block" }, !!this.arrowDirection ? (index.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 ? index.h("div", { class: "number" }, this.number) : null), index.h("ptc-spacer", { breakpoint: "x-small", size: "small" }), index.h("ptc-spacer", { breakpoint: "small", size: "x-small" }), index.h("slot", { name: "after-icon" }))));
-  }
-};
+const PtcSquareCard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.number = undefined;
+    this.arrowDirection = undefined;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "card-border square-padding card-layout" }, index.h("slot", { name: "before-icon" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "small" }), index.h("ptc-spacer", { breakpoint: "small", size: "x-small" }), index.h("div", { class: "icon-block" }, !!this.arrowDirection ? (index.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 ? index.h("div", { class: "number" }, this.number) : null), index.h("ptc-spacer", { breakpoint: "x-small", size: "small" }), index.h("ptc-spacer", { breakpoint: "small", size: "x-small" }), index.h("slot", { name: "after-icon" }))));
+  }
+};
 PtcSquareCard.style = ptcSquareCardCss;
 
 exports.ptc_square_card = PtcSquareCard;

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

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

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

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