@ptcwebops/ptcw-design 2.6.1 → 2.6.2

package/dist/esm/ptc-mobile-select.entry.js

@@ -422,68 +422,68 @@ h(y, "defaultConfig", {
 
 const ptcMobileSelectCss = ".ms-mobile-select{position:relative;z-index:0;opacity:0;visibility:hidden;-webkit-transition:opacity 0.4s, z-index 0.4s;transition:opacity 0.4s, z-index 0.4s}.ms-mobile-select *{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.ms-mobile-select .ms-gray-layer{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0, 0, 0, 0.7);z-index:888;display:block}.ms-mobile-select .ms-content{width:100%;display:block;position:fixed;z-index:889;color:black;-webkit-transition:all 0.4s;transition:all 0.4s;bottom:-350px;left:0;background:white}.ms-mobile-select .ms-fix-width{width:90%;margin:0 auto;position:relative}.ms-mobile-select .ms-fix-width:after{content:\".\";display:block;height:0;clear:both;visibility:hidden}.ms-mobile-select .ms-btn-bar{border-bottom:1px solid #dcdcdc;font-size:15px;height:45px;position:relative;text-align:center;line-height:45px}.ms-mobile-select .ms-cancel,.ms-mobile-select .ms-ensure{height:45px;width:55px;cursor:pointer;position:absolute;top:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.ms-mobile-select .ms-cancel{left:0;color:#666}.ms-mobile-select .ms-ensure{right:0;color:#1e83d3}.ms-mobile-select .ms-title{font-size:15px;padding:0 15%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ms-mobile-select .ms-panel:after{content:\".\";display:block;height:0;clear:both;visibility:hidden}.ms-mobile-select .ms-wheels{width:100%;height:200px;overflow:hidden}.ms-mobile-select .ms-wheel{position:relative;z-index:0;float:left;width:50%;height:200px;overflow:hidden;-webkit-transition:width 0.3s ease;transition:width 0.3s ease}.ms-mobile-select .ms-select-container{display:block;text-align:center}.ms-mobile-select .ms-select-container li{font-size:15px;display:block;height:40px;line-height:40px;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.ms-mobile-select .ms-select-line{height:40px;width:100%;position:absolute;top:80px;pointer-events:none;-webkit-box-sizing:border-box;box-sizing:border-box;border-top:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc}.ms-mobile-select .ms-shadow-mask{position:absolute;top:0;width:100%;height:200px;background:linear-gradient(to bottom, #fffffff5, #ffffffcc 25%, #ffffff00 49%, #ffffff00 51%, #ffffffcc 75%, #fffffff5);opacity:0.9;pointer-events:none}.ms-mobile-select.ms-show{opacity:1;z-index:10000;visibility:visible}.ms-mobile-select.ms-show .ms-content{bottom:0}.ms-default-trigger{min-height:1em;color:#888}body.ms-show{overflow-y:hidden}.mobile-select-wrapper{display:block}.mobile-select-wrapper div{display:inline;margin-right:var(--ptc-element-spacing-03);width:100%;font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-regular);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest);color:var(--color-white);height:18px}.mobileSelect .content{top:auto}.mobileSelect .content .btnBar{border-color:var(--color-gray-10)}.mobileSelect .content .btnBar .cancel,.mobileSelect .content .btnBar .ensure,.mobileSelect .content .btnBar .title{font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest)}.mobileSelect .content .btnBar .ensure,.mobileSelect .content .btnBar .cancel{transform:translateY(12.5px);width:125px}.mobileSelect .content .panel .wheel .selectContainer li{font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest);height:45px}ptc-responsive-wrapper.xsmall .mobile-select-wrapper,ptc-responsive-wrapper.small .mobile-select-wrapper{display:block}ptc-responsive-wrapper.medium .mobile-select-wrapper,ptc-responsive-wrapper.large .mobile-select-wrapper,ptc-responsive-wrapper.xlarge .mobile-select-wrapper,ptc-responsive-wrapper.xxlarge .mobile-select-wrapper,ptc-responsive-wrapper.large2k .mobile-select-wrapper,ptc-responsive-wrapper.large4k .mobile-select-wrapper{display:none}";
 
-const PtcMobileSelect = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.triggerName = undefined;
-    this.selectedText = undefined;
-    this.wheelData = undefined;
-    this.selectedId = '';
-    this.ensureBtnText = 'Confirm';
-    this.cancelBtnText = 'Cancel';
-    this.listTitle = undefined;
-  }
-  render() {
-    return (h$1("div", { class: "mobile-select-wrapper" }, h$1("div", { id: this.triggerName }, this.selectedText, h$1("icon-asset", { type: "ptc", size: "x-small", name: "chevron-down", color: "white", "is-mobile-select": "true", "injected-style": "svg.ismobileselect{transform:translateX(10px);}" }))));
-  }
-  componentDidRender() {
-    let currentId = this.selectedId; //input current lang
-    let storeIndex = 0;
-    let mySelect = new y({
-      trigger: `#${this.triggerName}`,
-      title: `${this.listTitle ? this.listTitle : ''}`,
-      wheels: this.wheelData ? [{ data: this.wheelData }] : [{ data: ['test1', 'test2'] }],
-      position: [0],
-      ensureBtnText: this.ensureBtnText,
-      cancelBtnText: this.cancelBtnText,
-      ensureBtnColor: 'var(--color-gray-12)',
-      cancelBtnColor: 'var(--color-gray-12)',
-      titleColor: 'var(--color-gray-12)',
-      onShow: function (e) {
-        if (currentId) {
-          let liEle = document.querySelectorAll('.selectContainer li');
-          liEle.forEach((currentValue, currentIndex) => {
-            if (currentValue.getAttribute('data-id') == currentId) {
-              storeIndex = currentIndex;
-              return;
-            }
-          });
-          try {
-            e.locatePosition(0, storeIndex);
-            console.log("storeIndex: " + storeIndex);
-          }
-          catch (error) {
-            console.log(error);
-            // debugger
-          }
-          //e.locatePosition(0, storeIndex);
-        }
-        else {
-          return;
-        }
-      },
-      callback: function (indexArr, data) {
-        if (data[0].id) {
-          window.location.href = data[0].id;
-        }
-        else {
-          console.log('href: ' + data[0].id + '; indexArr: ' + indexArr);
-        }
-      }.bind(this),
-    });
-    mySelect.locatePosition(0, storeIndex);
-  }
-};
+const PtcMobileSelect = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.triggerName = undefined;
+    this.selectedText = undefined;
+    this.wheelData = undefined;
+    this.selectedId = '';
+    this.ensureBtnText = 'Confirm';
+    this.cancelBtnText = 'Cancel';
+    this.listTitle = undefined;
+  }
+  render() {
+    return (h$1("div", { class: "mobile-select-wrapper" }, h$1("div", { id: this.triggerName }, this.selectedText, h$1("icon-asset", { type: "ptc", size: "x-small", name: "chevron-down", color: "white", "is-mobile-select": "true", "injected-style": "svg.ismobileselect{transform:translateX(10px);}" }))));
+  }
+  componentDidRender() {
+    let currentId = this.selectedId; //input current lang
+    let storeIndex = 0;
+    let mySelect = new y({
+      trigger: `#${this.triggerName}`,
+      title: `${this.listTitle ? this.listTitle : ''}`,
+      wheels: this.wheelData ? [{ data: this.wheelData }] : [{ data: ['test1', 'test2'] }],
+      position: [0],
+      ensureBtnText: this.ensureBtnText,
+      cancelBtnText: this.cancelBtnText,
+      ensureBtnColor: 'var(--color-gray-12)',
+      cancelBtnColor: 'var(--color-gray-12)',
+      titleColor: 'var(--color-gray-12)',
+      onShow: function (e) {
+        if (currentId) {
+          let liEle = document.querySelectorAll('.selectContainer li');
+          liEle.forEach((currentValue, currentIndex) => {
+            if (currentValue.getAttribute('data-id') == currentId) {
+              storeIndex = currentIndex;
+              return;
+            }
+          });
+          try {
+            e.locatePosition(0, storeIndex);
+            console.log("storeIndex: " + storeIndex);
+          }
+          catch (error) {
+            console.log(error);
+            // debugger
+          }
+          //e.locatePosition(0, storeIndex);
+        }
+        else {
+          return;
+        }
+      },
+      callback: function (indexArr, data) {
+        if (data[0].id) {
+          window.location.href = data[0].id;
+        }
+        else {
+          console.log('href: ' + data[0].id + '; indexArr: ' + indexArr);
+        }
+      }.bind(this),
+    });
+    mySelect.locatePosition(0, storeIndex);
+  }
+};
 PtcMobileSelect.style = ptcMobileSelectCss;
 
 export { PtcMobileSelect as ptc_mobile_select };

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

@@ -2,156 +2,156 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 
 const ptcModalCss = ":host{display:block}.wrapper{position:absolute;width:100vw;height:100%;top:0;left:0;z-index:3000;display:none}.wrapper.fixed{position:fixed}.wrapper .modal-popup{margin:7.5rem auto 1rem;background-color:var(--color-white);box-shadow:var(--ptc-shadow-large);max-width:22.5625rem;width:80%;display:flex;flex-direction:column;align-items:flex-end;align-content:flex-end;z-index:3020;transform:translateY(-100%)}@media only screen and (min-width: 992px){.wrapper .modal-popup{max-width:29.125rem}}.wrapper .modal-popup.md{max-width:44.125rem}.wrapper .modal-popup.lg{max-width:56.25rem}.wrapper .modal-popup.xl{max-width:64.0625rem}.wrapper .modal-popup .modal-body{width:100%}.wrapper .modal-popup .modal-body iframe{opacity:0;overflow:hidden;width:100%;border:0;transition:opacity var(--ptc-ease-inout) var(--ptc-transition-medium)}.wrapper .modal-popup .modal-body iframe.ready{opacity:1}.wrapper .modal-popup .modal-body.frame{overflow:hidden}.wrapper .modal-popup .modal-body.html{overflow:hidden}.wrapper .modal-popup .close{margin-right:var(--ptc-element-spacing-03);margin-top:var(--ptc-element-spacing-03)}.wrapper .modal-popup.shadow-scroller{max-height:calc(100vh - 220px)}@media only screen and (min-width: 992px){.wrapper .modal-popup.shadow-scroller{max-height:756px}}.wrapper .modal-popup.shadow-scroller .modal-header{transition:box-shadow ease-in-out 250ms;position:relative;min-height:57px;border-bottom:1px solid var(--color-gray-02);width:100%}.wrapper .modal-popup.shadow-scroller .modal-header .close{position:absolute;top:var(--spacing-md);right:var(--spacing-md);margin:0}.wrapper .modal-popup.shadow-scroller .modal-body{min-height:200px;overflow-x:hidden;overflow-y:auto}.wrapper .modal-popup.shadow-scroller .modal-footer{transition:box-shadow ease-in-out 250ms;width:100%;min-height:60px;border-top:1px solid var(--color-gray-02);padding-top:1rem}.wrapper .modal-popup.shadow-scroller.scroll-top .modal-header{box-shadow:0px 4px 12px rgba(0, 0, 0, 0.12)}.wrapper .modal-popup.shadow-scroller.scroll-bottom .modal-footer{box-shadow:0px -8px 12px rgba(0, 0, 0, 0.12)}.wrapper.show{display:flex;align-items:flex-start}.wrapper.show .modal-popup{transform:translateY(0)}.wrapper.show .modal-popup.rounded{border-radius:var(--ptc-border-radius-standard)}.overlay{width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:3010;display:block;background-color:rgba(0, 0, 0, 0.6)}:host(.standard) .modal-popup{border-radius:var(--ptc-border-radius-standard)}:host(.large) .modal-popup{border-radius:var(--ptc-border-radius-large)}:host(.pill) .modal-popup{border-radius:var(--ptc-border-radius-pill)}:host(.circle) .modal-popup{border-radius:var(--ptc-border-radius-circle)}:host(.bio-modal) .wrapper{z-index:50001}:host(.bio-modal) .wrapper.show{align-items:flex-start}@media only screen and (min-width: 768px){:host(.bio-modal) .wrapper.show{align-items:center}}:host(.bio-modal) .modal-popup{padding:30px 15px 30px 0;max-width:1200px;margin:20px auto 0 auto;max-height:calc(100vh - 180px);width:90%;height:100%}:host(.bio-modal) .modal-popup .modal-body{height:100%}@media only screen and (min-width: 768px){:host(.bio-modal) .modal-popup .modal-body{height:auto}}@media (max-height: 450px){:host(.bio-modal) .modal-popup .modal-body{height:100%}}@media only screen and (min-width: 768px){:host(.bio-modal) .modal-popup{max-height:none;width:80%;margin-top:0px;height:auto}}@media only screen and (min-width: 1440px){:host(.bio-modal) .modal-popup{max-width:1400px}}@media (max-height: 450px){:host(.bio-modal) .modal-popup{max-height:calc(100vh - 180px);height:100%}}:host(.bio-modal) .close{position:absolute;margin:0;right:15px;top:30px}:host(.bio-modal) .close svg .cls-1,:host(.bio-modal) .close svg .cls-2{fill:none;stroke-width:2px}:host(.bio-modal) .close svg .cls-1{stroke:#1c2439;stroke-linecap:square}:host(.bio-modal) .close svg .cls-2{stroke:#74c34d}:host(.bio-modal) .close svg path{transition:all ease-in-out 250ms}:host(.bio-modal) .close svg .cls-1:nth-child(1){transform:translate(175.5px, 135.5px)}:host(.bio-modal) .close svg .cls-1:nth-child(2){transform:translate(175.5px, 174.985px)}:host(.bio-modal) .close svg .cls-1:nth-child(3){transform:translate(215.5px, 141.393px)}:host(.bio-modal) .close svg .cls-1:nth-child(4){transform:translate(175.5px, 135.5px)}:host(.bio-modal) .close:hover svg .cls-1:nth-child(1){transform:translate(175.5px, 162px)}:host(.bio-modal) .close:hover svg .cls-1:nth-child(2){transform:translate(149px, 174.985px)}:host(.bio-modal) .close:hover svg .cls-1:nth-child(3){transform:translate(215.5px, 174px)}:host(.bio-modal) .close:hover svg .cls-1:nth-child(4){transform:translate(152.5px, 135.5px)}";
 
-const PtcModal = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.closed = createEvent(this, "closed", 7);
-    this.opened = createEvent(this, "opened", 7);
-    this.iframeUrl = undefined;
-    this.size = 'sm';
-    this.show = false;
-    this.overlay = true;
-    this.fixed = false;
-    this.closeOnBlur = false;
-    this.rounded = false;
-    this.showHeaderFooter = false;
-    this.overlayHeight = undefined;
-    this.borderRadius = 'standard';
-    this.isBioModal = false;
-    this.styles = undefined;
-    this.bodyOverflowSetting = undefined;
-  }
-  fireOnClosed(modal) {
-    this.closed.emit(modal);
-  }
-  fireOnOpened(modal) {
-    this.opened.emit(modal);
-  }
-  componentWillLoad() {
-    let body = document.querySelector('body');
-    this.bodyOverflowSetting = {
-      //overflow: body.style['overflow'],
-      overflowY: body.style['overflowY'],
-      overflowX: body.style['overflowX'],
-    };
-  }
-  componentWillRender() {
-    let body = document.querySelector('body');
-    if (body) {
-      if (this.show) {
-        //body.style['overflow'] = 'hidden';
-        body.style['overflowY'] = 'scroll';
-        body.style['overflowX'] = 'hidden';
-      }
-      else {
-        //body.style['overflow'] = this.bodyOverflowSetting.overflow;
-        body.style['overflowY'] = this.bodyOverflowSetting.overflowY;
-        body.style['overflowX'] = this.bodyOverflowSetting.overflowX;
-      }
-    }
-  }
-  componentDidLoad() {
-    if (this.show) {
-      this.fireOnOpened(this);
-    }
-    if (this.showHeaderFooter) {
-      this.handleScroll();
-    }
-  }
-  componentDidUpdate() {
-    if (this.show) {
-      this.fireOnOpened(this);
-    }
-    else {
-      this.fireOnClosed(this);
-    }
-  }
-  resizeIframe(e) {
-    let iFrame = e.target;
-    setTimeout(() => {
-      try {
-        if (iFrame.contentDocument) {
-          iFrame.height = `${iFrame.contentDocument.body.scrollHeight}px`;
-        }
-        else {
-          iFrame.height = '616px'; //default
-          iFrame.removeAttribute('scrolling');
-        }
-      }
-      catch (error) {
-        console.log(error);
-        iFrame.height = '616px'; //default
-        iFrame.removeAttribute('scrolling');
-      }
-      iFrame.classList.add('ready');
-    }, 50);
-  }
-  handleScroll() {
-    let modal = this.el.shadowRoot.querySelector('.shadow-scroller');
-    if (modal) {
-      let body = modal.querySelector('.modal-body');
-      var height = body.clientHeight;
-      var scrollHeight = body.scrollHeight;
-      var scrollTop = body.scrollTop;
-      var offset = body.offsetHeight;
-      if (height < scrollHeight) { //has scrollbar
-        if (scrollTop > 0) { //can scroll up
-          modal.classList.add('scroll-top');
-        }
-        else {
-          modal.classList.remove('scroll-top');
-        }
-        if (offset + scrollTop < scrollHeight) { //can scroll down
-          modal.classList.add('scroll-bottom');
-        }
-        else {
-          modal.classList.remove('scroll-bottom');
-        }
-      }
-    }
-  }
-  close() {
-    this.show = false;
-  }
-  render() {
-    let content;
-    let overlay;
-    let type = this.iframeUrl ? 'frame' : 'html';
-    let closebtn = (h("div", { class: "close" }, h("a", { href: "#", onClick: (e) => { e.preventDefault(); this.close(); } }, this.isBioModal
-      ?
-        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "42", height: "41.485", viewBox: "0 0 42 41.485" }, h("g", { "data-name": "Group 1042", transform: "rotate(180 108.25 87.993)" }, h("path", { d: "M0 0v39.486", class: "cls-1", "data-name": "Line 446" }), h("path", { d: "M0 0h40", class: "cls-1", "data-name": "Line 447" }), h("path", { d: "M0 33.592V0", class: "cls-1", "data-name": "Line 448" }), h("path", { d: "M23.994 0H0", class: "cls-1", "data-name": "Line 449" }), h("path", { d: "M0 0l17.596 17.596", class: "cls-2", "data-name": "Line 450", transform: "translate(187.229 147.226)" }), h("path", { d: "M0 7.198L7.199 0", class: "cls-2", "data-name": "Line 451", transform: "translate(197.55 147.312)" }), h("path", { d: "M0 7.2L7.2 0", class: "cls-2", "data-name": "Path 114", transform: "translate(187.313 157.549)" })))
-      :
-        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, h("path", { d: "M1 1L13 13", stroke: "black" }), h("path", { d: "M13 1L1 13", stroke: "black" })))));
-    if (this.iframeUrl) {
-      content = (h("iframe", { src: this.iframeUrl, frameBorder: 0, allowFullScreen: false, height: "100%", width: "100%", scrolling: "no", onLoad: this.resizeIframe }));
-    }
-    else {
-      if (this.showHeaderFooter) {
-        content = (h("slot", { name: "body" }));
-      }
-      else {
-        content = (h("slot", null));
-      }
-    }
-    if (this.overlay) {
-      if (this.closeOnBlur) {
-        overlay = h("div", { class: "overlay", onClick: (_) => this.close() });
-      }
-      else {
-        overlay = h("div", { class: "overlay" });
-      }
-    }
-    return (h(Host, { class: `${this.isBioModal ? "bio-modal" : ""} ${this.borderRadius}` }, this.styles && h("style", null, this.styles), h("div", { class: `wrapper ${this.show ? "show" : "hide"} ${this.fixed ? 'fixed' : ''} ` }, overlay, h("div", { class: `modal-popup ${this.size} ${type} ${this.rounded ? 'rounded' : ''} ${this.showHeaderFooter ? 'shadow-scroller' : ''} ` }, this.showHeaderFooter ? [
-      h("div", { class: "modal-header" }, h("slot", { name: "header" }), closebtn),
-      h("div", { class: "modal-body", onScroll: () => this.handleScroll() }, content),
-      h("div", { class: "modal-footer" }, h("slot", { name: "footer" }))
-    ] : [
-      closebtn,
-      h("div", { class: "modal-body" }, content)
-    ]))));
-  }
-  get el() { return getElement(this); }
-};
+const PtcModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.closed = createEvent(this, "closed", 7);
+    this.opened = createEvent(this, "opened", 7);
+    this.iframeUrl = undefined;
+    this.size = 'sm';
+    this.show = false;
+    this.overlay = true;
+    this.fixed = false;
+    this.closeOnBlur = false;
+    this.rounded = false;
+    this.showHeaderFooter = false;
+    this.overlayHeight = undefined;
+    this.borderRadius = 'standard';
+    this.isBioModal = false;
+    this.styles = undefined;
+    this.bodyOverflowSetting = undefined;
+  }
+  fireOnClosed(modal) {
+    this.closed.emit(modal);
+  }
+  fireOnOpened(modal) {
+    this.opened.emit(modal);
+  }
+  componentWillLoad() {
+    let body = document.querySelector('body');
+    this.bodyOverflowSetting = {
+      //overflow: body.style['overflow'],
+      overflowY: body.style['overflowY'],
+      overflowX: body.style['overflowX'],
+    };
+  }
+  componentWillRender() {
+    let body = document.querySelector('body');
+    if (body) {
+      if (this.show) {
+        //body.style['overflow'] = 'hidden';
+        body.style['overflowY'] = 'scroll';
+        body.style['overflowX'] = 'hidden';
+      }
+      else {
+        //body.style['overflow'] = this.bodyOverflowSetting.overflow;
+        body.style['overflowY'] = this.bodyOverflowSetting.overflowY;
+        body.style['overflowX'] = this.bodyOverflowSetting.overflowX;
+      }
+    }
+  }
+  componentDidLoad() {
+    if (this.show) {
+      this.fireOnOpened(this);
+    }
+    if (this.showHeaderFooter) {
+      this.handleScroll();
+    }
+  }
+  componentDidUpdate() {
+    if (this.show) {
+      this.fireOnOpened(this);
+    }
+    else {
+      this.fireOnClosed(this);
+    }
+  }
+  resizeIframe(e) {
+    let iFrame = e.target;
+    setTimeout(() => {
+      try {
+        if (iFrame.contentDocument) {
+          iFrame.height = `${iFrame.contentDocument.body.scrollHeight}px`;
+        }
+        else {
+          iFrame.height = '616px'; //default
+          iFrame.removeAttribute('scrolling');
+        }
+      }
+      catch (error) {
+        console.log(error);
+        iFrame.height = '616px'; //default
+        iFrame.removeAttribute('scrolling');
+      }
+      iFrame.classList.add('ready');
+    }, 50);
+  }
+  handleScroll() {
+    let modal = this.el.shadowRoot.querySelector('.shadow-scroller');
+    if (modal) {
+      let body = modal.querySelector('.modal-body');
+      var height = body.clientHeight;
+      var scrollHeight = body.scrollHeight;
+      var scrollTop = body.scrollTop;
+      var offset = body.offsetHeight;
+      if (height < scrollHeight) { //has scrollbar
+        if (scrollTop > 0) { //can scroll up
+          modal.classList.add('scroll-top');
+        }
+        else {
+          modal.classList.remove('scroll-top');
+        }
+        if (offset + scrollTop < scrollHeight) { //can scroll down
+          modal.classList.add('scroll-bottom');
+        }
+        else {
+          modal.classList.remove('scroll-bottom');
+        }
+      }
+    }
+  }
+  close() {
+    this.show = false;
+  }
+  render() {
+    let content;
+    let overlay;
+    let type = this.iframeUrl ? 'frame' : 'html';
+    let closebtn = (h("div", { class: "close" }, h("a", { href: "#", onClick: (e) => { e.preventDefault(); this.close(); } }, this.isBioModal
+      ?
+        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "42", height: "41.485", viewBox: "0 0 42 41.485" }, h("g", { "data-name": "Group 1042", transform: "rotate(180 108.25 87.993)" }, h("path", { d: "M0 0v39.486", class: "cls-1", "data-name": "Line 446" }), h("path", { d: "M0 0h40", class: "cls-1", "data-name": "Line 447" }), h("path", { d: "M0 33.592V0", class: "cls-1", "data-name": "Line 448" }), h("path", { d: "M23.994 0H0", class: "cls-1", "data-name": "Line 449" }), h("path", { d: "M0 0l17.596 17.596", class: "cls-2", "data-name": "Line 450", transform: "translate(187.229 147.226)" }), h("path", { d: "M0 7.198L7.199 0", class: "cls-2", "data-name": "Line 451", transform: "translate(197.55 147.312)" }), h("path", { d: "M0 7.2L7.2 0", class: "cls-2", "data-name": "Path 114", transform: "translate(187.313 157.549)" })))
+      :
+        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, h("path", { d: "M1 1L13 13", stroke: "black" }), h("path", { d: "M13 1L1 13", stroke: "black" })))));
+    if (this.iframeUrl) {
+      content = (h("iframe", { src: this.iframeUrl, frameBorder: 0, allowFullScreen: false, height: "100%", width: "100%", scrolling: "no", onLoad: this.resizeIframe }));
+    }
+    else {
+      if (this.showHeaderFooter) {
+        content = (h("slot", { name: "body" }));
+      }
+      else {
+        content = (h("slot", null));
+      }
+    }
+    if (this.overlay) {
+      if (this.closeOnBlur) {
+        overlay = h("div", { class: "overlay", onClick: (_) => this.close() });
+      }
+      else {
+        overlay = h("div", { class: "overlay" });
+      }
+    }
+    return (h(Host, { class: `${this.isBioModal ? "bio-modal" : ""} ${this.borderRadius}` }, this.styles && h("style", null, this.styles), h("div", { class: `wrapper ${this.show ? "show" : "hide"} ${this.fixed ? 'fixed' : ''} ` }, overlay, h("div", { class: `modal-popup ${this.size} ${type} ${this.rounded ? 'rounded' : ''} ${this.showHeaderFooter ? 'shadow-scroller' : ''} ` }, this.showHeaderFooter ? [
+      h("div", { class: "modal-header" }, h("slot", { name: "header" }), closebtn),
+      h("div", { class: "modal-body", onScroll: () => this.handleScroll() }, content),
+      h("div", { class: "modal-footer" }, h("slot", { name: "footer" }))
+    ] : [
+      closebtn,
+      h("div", { class: "modal-body" }, content)
+    ]))));
+  }
+  get el() { return getElement(this); }
+};
 PtcModal.style = ptcModalCss;
 
 export { PtcModal as ptc_modal };

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

@@ -2,42 +2,42 @@ import { r as registerInstance, h, H as Host } from './index-22a84644.js';
 
 const ptcNavCardCss = ":host{display:flex;height:100%;width:100%;position:relative}:host .nav-card-wrap{display:flex;align-items:center;width:100%;border-radius:var(--ptc-border-radius-standard);background-color:var(--color-gray-12)}:host .nav-card-wrap:hover{background-color:var(--color-gray-08)}@media only screen and (min-width: 1200px){:host .nav-card-wrap{background-color:var(--color-gray-10)}:host .nav-card-wrap:hover{background-color:var(--color-gray-08)}}:host .nav-card-wrap h4,:host .nav-card-wrap p,:host .nav-card-wrap a{color:var(--color-white);margin:0;text-decoration:none}:host .nav-card-wrap .media-card-wrap{padding:1rem 1.5rem 1.125rem 1.5rem;width:100%;height:100%;display:flex;align-items:center}@media only screen and (min-width: 1200px){:host .nav-card-wrap .media-card-wrap{padding:1rem}}:host .nav-card-wrap .media-card-wrap h4{margin-bottom:0.25rem;font-weight:800;display:flex;align-items:center;font-size:var(--ptc-font-size-medium);word-break:break-word}@media only screen and (min-width: 1200px){:host .nav-card-wrap .media-card-wrap h4{font-size:var(--ptc-font-size-xxx-small)}}:host .nav-card-wrap .media-card-wrap p{font-size:var(--ptc-font-size-x-small)}@media only screen and (min-width: 1200px){:host .nav-card-wrap .media-card-wrap p{font-size:var(--ptc-font-size-xxx-small)}}:host .nav-card-wrap .media-card-wrap .card-logo{padding-right:1.5rem}@media only screen and (min-width: 1200px){:host .nav-card-wrap .media-card-wrap .card-logo{padding-right:1rem}}:host .nav-card-wrap .media-card-wrap .card-logo img{width:100%;max-width:2rem;min-width:2rem}@media only screen and (min-width: 1200px){:host .nav-card-wrap .media-card-wrap .card-logo img{max-width:1.5rem;min-width:1.5rem}}:host(.media-card) .nav-card-wrap{min-height:99px;box-sizing:border-box}@media only screen and (min-width: 1200px){:host(.media-card) .nav-card-wrap{min-height:80px}}:host(.cta-card) .nav-card-wrap{border:1px solid var(--color-gray-10);border-radius:var(--ptc-border-radius-standard);background-color:var(--color-gray-09);min-height:99px;box-sizing:border-box}@media only screen and (min-width: 1200px){:host(.cta-card) .nav-card-wrap{min-height:80px;background-color:transparent}}:host(.cta-card) .nav-card-wrap:hover{background-color:var(--color-gray-08)}:host(.cta-card) .nav-card-wrap .card-content{margin:auto}:host(.cta-card) .nav-card-wrap .card-content h4{margin:0}:host(.cta-card) .nav-card-wrap .card-content svg{vertical-align:middle;margin-left:0.375rem}:host(.links-card) .nav-card-wrap{background-color:transparent;align-items:flex-start;padding:1rem 1.5rem 1.5rem 1.5rem;border-bottom:1px solid var(--color-gray-07);border-radius:0;margin:0 -1.5rem}@media only screen and (min-width: 1200px){:host(.links-card) .nav-card-wrap{margin:0;padding:1.5rem;border:1px solid var(--color-gray-10);border-radius:var(--ptc-border-radius-standard)}}:host(.links-card) .nav-card-wrap:hover{background-color:transparent}:host(.links-card) .nav-card-wrap h3{margin:0 0 8px 0;display:inline-block;font-weight:800;font-size:20px;color:var(--color-white)}@media only screen and (min-width: 1200px){:host(.links-card) .nav-card-wrap h3{font-size:15px;margin:0 0 10px 0}}:host(.links-card) .nav-card-wrap h3 svg{margin-left:0.375rem;vertical-align:middle}:host(.links-card) .nav-card-wrap h3 a{border-bottom:1.5px solid transparent}:host(.links-card) .nav-card-wrap h3 a:hover{border-color:var(--color-green-06)}:host(.links-card) ::slotted(ptc-link){padding:8px 0;line-height:14px}@media only screen and (min-width: 1200px){:host(.links-card) ::slotted(ptc-link){padding:6px 0}}";
 
-const PtcNavCard = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.cardType = undefined;
-    this.cardHref = undefined;
-    this.logoAlt = undefined;
-    this.target = '_self';
-    this.rel = undefined;
-    this.linkTitle = undefined;
-    this.cardLogo = undefined;
-    this.heading = undefined;
-    this.description = undefined;
-    this.windowSize = 'mobile';
-  }
-  handleResize() {
-    if (window.innerWidth < 992) {
-      this.windowSize = 'mobile';
-    }
-    else {
-      this.windowSize = 'desktop';
-    }
-  }
-  componentWillLoad() {
-    this.handleResize();
-  }
-  render() {
-    return (h(Host, { class: this.cardType }, h("div", { class: "nav-card-wrap" }, this.cardType == 'links-card' ?
-      h("div", { class: "links-card-wrap" }, h("h3", null, (this.cardHref && !(this.cardHref.startsWith('#'))) ?
-        (h("a", { href: this.cardHref, title: this.linkTitle }, this.heading, h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" })))) : (this.heading)), h("slot", null))
-      :
-        h("a", { href: this.cardHref, title: this.linkTitle, class: "media-card-wrap" }, this.cardLogo &&
-          h("div", { class: "card-logo" }, h("img", { src: this.cardLogo, alt: this.logoAlt })), h("div", { class: "card-content" }, h("h4", null, this.heading, this.cardType == "cta-card" &&
-          h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" }))), this.description &&
-          h("p", null, this.description))))));
-  }
-};
+const PtcNavCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.cardType = undefined;
+    this.cardHref = undefined;
+    this.logoAlt = undefined;
+    this.target = '_self';
+    this.rel = undefined;
+    this.linkTitle = undefined;
+    this.cardLogo = undefined;
+    this.heading = undefined;
+    this.description = undefined;
+    this.windowSize = 'mobile';
+  }
+  handleResize() {
+    if (window.innerWidth < 992) {
+      this.windowSize = 'mobile';
+    }
+    else {
+      this.windowSize = 'desktop';
+    }
+  }
+  componentWillLoad() {
+    this.handleResize();
+  }
+  render() {
+    return (h(Host, { class: this.cardType }, h("div", { class: "nav-card-wrap" }, this.cardType == 'links-card' ?
+      h("div", { class: "links-card-wrap" }, h("h3", null, (this.cardHref && !(this.cardHref.startsWith('#'))) ?
+        (h("a", { href: this.cardHref, title: this.linkTitle }, this.heading, h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" })))) : (this.heading)), h("slot", null))
+      :
+        h("a", { href: this.cardHref, title: this.linkTitle, class: "media-card-wrap" }, this.cardLogo &&
+          h("div", { class: "card-logo" }, h("img", { src: this.cardLogo, alt: this.logoAlt })), h("div", { class: "card-content" }, h("h4", null, this.heading, this.cardType == "cta-card" &&
+          h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" }))), this.description &&
+          h("p", null, this.description))))));
+  }
+};
 PtcNavCard.style = ptcNavCardCss;
 
 export { PtcNavCard as ptc_nav_card };

package/dist/esm/ptc-nav-link.entry.js

@@ -2,42 +2,42 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-22
 
 const ptcNavLinkCss = ":host{display:block;position:relative}@media only screen and (min-width: 1200px){:host{display:inline-block}}:host::before,:host::after{content:\" \";width:1600px;height:1px;background-color:var(--color-gray-08);position:absolute;right:0;bottom:0}@media only screen and (min-width: 1200px){:host::before,:host::after{display:none}}:host::after{left:0;right:auto}:host a{color:var(--color-gray-03);text-decoration:none;display:inline-block;border-bottom:2px solid transparent;margin-left:34%;padding:22px 12px;font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}@media only screen and (min-width: 480px){:host a{margin-left:38%}}@media only screen and (min-width: 768px){:host a{margin-left:42%}}@media only screen and (min-width: 1200px){:host a{margin-left:0;display:flex;align-items:center;white-space:nowrap;position:relative}:host a::after{content:\"\";display:block;border-bottom:2px solid transparent;margin:auto;position:absolute;width:calc(100% - 20px);left:0;right:0;bottom:20px}}:host a svg{width:1rem;height:0.875rem;display:inline-block;background-size:cover;transition:margin-left 250ms ease-out;vertical-align:middle;margin-left:4px}:host a:hover,:host a:focus{color:var(--color-white)}@media only screen and (min-width: 1200px){:host a:hover::after,:host a:focus::after{border-color:var(--color-white)}}:host a:hover svg path,:host a:focus svg path{fill:var(--color-white)}:host ::slotted(icon-asset){margin-top:4px;margin-right:8px}";
 
-const PtcNavLink = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.href = undefined;
-    this.isOutsideLink = false;
-    this.titleText = "";
-  }
-  handleClick() {
-    // Check if the href starts with #   
-    if (this.href && this.href.startsWith('#')) {
-      // Find the corresponding section
-      const section = document.querySelector(this.href);
-      section.scrollIntoView({
-        behavior: 'smooth'
-      });
-    }
-  }
-  componentWillLoad() {
-    // Get the text content of the <slot> tag
-    const text = this.el.textContent;
-    // Set the maximum number of characters to display
-    const charLimit = 32;
-    // Check if the text content is longer than the character limit
-    if (text.length > charLimit) {
-      // Adding link text in title
-      this.titleText = text;
-      // Trim the text to the character limit and add "..."
-      this.el.textContent = text.substring(0, charLimit) + "...";
-    }
-  }
-  render() {
-    return (h(Host, null, h("a", { href: this.href, target: this.isOutsideLink ? '_blank' : '_self', title: this.titleText, onClick: () => { this.handleClick(); } }, h("slot", null), !(this.href.startsWith('#')) &&
-      h("svg", { class: "icon-arrow-right", xmlns: "http://www.w3.org/2000/svg", width: "14", height: "10", viewBox: "0 0 14 10", fill: "none" }, h("path", { d: "M8.84921 0.77792L8.81313 3.41153L0.51545 3.55584L0.515449 6.5863L8.81313 6.44199L8.81313 9.40029L13.1424 5.07107L8.84921 0.77792Z", fill: "#AEB8BD" })))));
-  }
-  get el() { return getElement(this); }
-};
+const PtcNavLink = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.href = undefined;
+    this.isOutsideLink = false;
+    this.titleText = "";
+  }
+  handleClick() {
+    // Check if the href starts with #   
+    if (this.href && this.href.startsWith('#')) {
+      // Find the corresponding section
+      const section = document.querySelector(this.href);
+      section.scrollIntoView({
+        behavior: 'smooth'
+      });
+    }
+  }
+  componentWillLoad() {
+    // Get the text content of the <slot> tag
+    const text = this.el.textContent;
+    // Set the maximum number of characters to display
+    const charLimit = 32;
+    // Check if the text content is longer than the character limit
+    if (text.length > charLimit) {
+      // Adding link text in title
+      this.titleText = text;
+      // Trim the text to the character limit and add "..."
+      this.el.textContent = text.substring(0, charLimit) + "...";
+    }
+  }
+  render() {
+    return (h(Host, null, h("a", { href: this.href, target: this.isOutsideLink ? '_blank' : '_self', title: this.titleText, onClick: () => { this.handleClick(); } }, h("slot", null), !(this.href.startsWith('#')) &&
+      h("svg", { class: "icon-arrow-right", xmlns: "http://www.w3.org/2000/svg", width: "14", height: "10", viewBox: "0 0 14 10", fill: "none" }, h("path", { d: "M8.84921 0.77792L8.81313 3.41153L0.51545 3.55584L0.515449 6.5863L8.81313 6.44199L8.81313 9.40029L13.1424 5.07107L8.84921 0.77792Z", fill: "#AEB8BD" })))));
+  }
+  get el() { return getElement(this); }
+};
 PtcNavLink.style = ptcNavLinkCss;
 
 export { PtcNavLink as ptc_nav_link };