@ptcwebops/ptcw-design 0.5.5 → 0.5.6

package/dist/esm/ptc-minimized-footer.entry.js

@@ -2,14 +2,14 @@ import { r as registerInstance, h, H as Host } from './index-f64012bd.js';
 
 const ptcMinimizedFooterCss = ":host{box-shadow:var(--ptc-shadow-medium);color:var(--color-white);position:relative;overflow:hidden;position:relative;z-index:1000;padding:0;height:60px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--color-gray-10)}.min-footer-nav-list{margin:0;padding:0;list-style:none}.min-footer-copyright-wrapper{text-align:center;position:relative;z-index:20}.min-footer-copyright-wrapper .min-footer-copyright-list{padding:var(--ptc-element-spacing-04) 0;display:flex;flex-direction:row}@media screen-sm{.min-footer-copyright-wrapper .min-footer-copyright-list{padding:var(--ptc-element-spacing-04) 0}}";
 
-let PtcMinimizedFooter = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, { class: "ptc-min-footer mini-footer" }, h("div", { class: "min-footer-copyright-wrapper" }, h("ul", { class: "min-footer-nav-list min-footer-copyright-list" }, h("slot", null)))));
-  }
-};
+let PtcMinimizedFooter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { class: "ptc-min-footer mini-footer" }, h("div", { class: "min-footer-copyright-wrapper" }, h("ul", { class: "min-footer-nav-list min-footer-copyright-list" }, h("slot", null)))));
+  }
+};
 PtcMinimizedFooter.style = ptcMinimizedFooterCss;
 
 export { PtcMinimizedFooter as ptc_minimized_footer };

package/dist/esm/ptc-minimized-header.entry.js

@@ -2,17 +2,17 @@ import { r as registerInstance, h, H as Host } from './index-f64012bd.js';
 
 const ptcMinimizedHeaderCss = ":host{display:block}.minimized-header .header{overflow:hidden;height:48px;background-color:var(--color-gray-10);display:flex;align-items:center;justify-content:center}.minimized-header .header a{float:left;color:var(--color-black);text-align:center;padding:0px 0;text-decoration:none;font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-p);border-radius:var(--ptc-border-radius-standard)}.minimized-header .header a.mini-navbar-logo{font-size:var(--ptc-font-size-large);font-weight:var(--ptc-font-weight-bold)}.minimized-header .header a.mini-navbar-logo img{width:65px;vertical-align:middle;border:0;height:auto}.mini-navbar-logo{outline:3px solid transparent}.mini-navbar-logo:focus{outline:3px solid var(--color-blue-07);outline-offset:2px;border-radius:var(--ptc-border-radius-standard);text-decoration:none;border-color:transparent !important}@media only screen and (min-width: 768px){.temp-container{width:750px}}@media only screen and (min-width: 992px){.temp-container{width:970px}}@media only screen and (min-width: 1200px){.temp-container{width:1170px}}@media only screen and (min-width: 1440px){.temp-container{width:1400px}}@media only screen and (min-width: 1600px){.temp-container{width:1560px}}@media screen-xs{.minimized-header .header a{float:none;display:block;text-align:left}}";
 
-let PtcMinimizedHeader = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.linkUrl = '#';
-    this.imgSrc = '';
-    this.imgAlt = 'PTC';
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "minimized-header" }, h("div", { class: "header" }, h("div", { class: "temp-container" }, h("a", { class: "mini-navbar-logo", href: this.linkUrl }, h("img", { src: this.imgSrc, alt: this.imgAlt })))))));
-  }
-};
+let PtcMinimizedHeader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.linkUrl = '#';
+    this.imgSrc = '';
+    this.imgAlt = 'PTC';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "minimized-header" }, h("div", { class: "header" }, h("div", { class: "temp-container" }, h("a", { class: "mini-navbar-logo", href: this.linkUrl }, h("img", { src: this.imgSrc, alt: this.imgAlt })))))));
+  }
+};
 PtcMinimizedHeader.style = ptcMinimizedHeaderCss;
 
 export { PtcMinimizedHeader as ptc_minimized_header };

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

@@ -717,75 +717,75 @@ var mobileSelect = createCommonjsModule(function (module, exports) {
 
 const ptcMobileSelectCss = ".mobileSelect{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}.mobileSelect *{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.mobileSelect .grayLayer{position:fixed;top:0;left:0;bottom:0;right:0;background:#eee;background:rgba(0, 0, 0, 0.7);z-index:888;display:block}.mobileSelect .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}.mobileSelect .content .fixWidth{width:90%;margin:0 auto;position:relative}.mobileSelect .content .fixWidth:after{content:\".\";display:block;height:0;clear:both;visibility:hidden}.mobileSelect .content .btnBar{border-bottom:1px solid #DCDCDC;font-size:15px;height:45px;position:relative;text-align:center;line-height:45px}.mobileSelect .content .btnBar .cancel,.mobileSelect .content .btnBar .ensure{height:45px;width:55px;cursor:pointer;position:absolute;top:0}.mobileSelect .content .btnBar .cancel{left:0;color:#666}.mobileSelect .content .btnBar .ensure{right:0;color:#1e83d3}.mobileSelect .content .btnBar .title{font-size:15px;padding:0 15%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mobileSelect .content .panel:after{content:\".\";display:block;height:0;clear:both;visibility:hidden}.mobileSelect .content .panel .wheels{width:100%;height:200px;overflow:hidden}.mobileSelect .content .panel .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}.mobileSelect .content .panel .wheel .selectContainer{display:block;text-align:center;-webkit-transition:-webkit-transform 0.18s ease-out;transition:-webkit-transform 0.18s ease-out;transition:transform 0.18s ease-out;transition:transform 0.18s ease-out, -webkit-transform 0.18s ease-out}.mobileSelect .content .panel .wheel .selectContainer li{font-size:15px;display:block;height:40px;line-height:40px;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mobileSelect .content .panel .selectLine{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}.mobileSelect .content .panel .shadowMask{position:absolute;top:0;width:100%;height:200px;background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(rgba(255, 255, 255, 0)), to(#ffffff));background:-webkit-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0), #ffffff);background:linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0), #ffffff);opacity:0.9;pointer-events:none}.mobileSelect-show{opacity:1;z-index:10000;visibility:visible}.mobileSelect-show .content{bottom:0}.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}";
 
-let PtcMobileSelect = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Selected Id
-     * - initialize the id(string) of default wheel
-     */
-    this.selectedId = '';
-    /**
-     * Confirm Text
-     * - translation goes here
-     */
-    this.ensureBtnText = 'Confirm';
-    /**
-     * Cancel Text
-     * - translation goes here
-     */
-    this.cancelBtnText = 'Cancel';
-    /**
-     * Mobile select list title (Optional)
-     */
-    this.listTitle = undefined;
-    /**
-     * link url
-     */
-    this.linkUrl = undefined;
-  }
-  render() {
-    return (h("div", { class: "mobile-select-wrapper" }, h("div", { id: this.triggerName }, this.selectedText, h("icon-asset", { "injected-style": "svg.sc-icon-asset{transform:translateX(10px);}", type: "ptc", size: "x-small", name: "chevron-down", color: "white" }))));
-  }
-  componentDidRender() {
-    let currentId = this.selectedId; //input current lang
-    let storeIndex = 0;
-    new mobileSelect({
-      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;
-            }
-          });
-          e.locatePosition(0, storeIndex);
-        }
-        else {
-          return;
-        }
-      },
-      callback: function (indexArr, data) {
-        if (this.linkUrl !== undefined) {
-          window.location.href = this.linkUrl + '/' + data[0].id;
-        }
-        else {
-          console.log('index: ' + indexArr + ', id: ' + data[0].id + '; No link url founded!');
-        }
-      }.bind(this),
-    });
-  }
-};
+let PtcMobileSelect = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Selected Id
+     * - initialize the id(string) of default wheel
+     */
+    this.selectedId = '';
+    /**
+     * Confirm Text
+     * - translation goes here
+     */
+    this.ensureBtnText = 'Confirm';
+    /**
+     * Cancel Text
+     * - translation goes here
+     */
+    this.cancelBtnText = 'Cancel';
+    /**
+     * Mobile select list title (Optional)
+     */
+    this.listTitle = undefined;
+    /**
+     * link url
+     */
+    this.linkUrl = undefined;
+  }
+  render() {
+    return (h("div", { class: "mobile-select-wrapper" }, h("div", { id: this.triggerName }, this.selectedText, h("icon-asset", { "injected-style": "svg.sc-icon-asset{transform:translateX(10px);}", type: "ptc", size: "x-small", name: "chevron-down", color: "white" }))));
+  }
+  componentDidRender() {
+    let currentId = this.selectedId; //input current lang
+    let storeIndex = 0;
+    new mobileSelect({
+      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;
+            }
+          });
+          e.locatePosition(0, storeIndex);
+        }
+        else {
+          return;
+        }
+      },
+      callback: function (indexArr, data) {
+        if (this.linkUrl !== undefined) {
+          window.location.href = this.linkUrl + '/' + data[0].id;
+        }
+        else {
+          console.log('index: ' + indexArr + ', id: ' + data[0].id + '; No link url founded!');
+        }
+      }.bind(this),
+    });
+  }
+};
 PtcMobileSelect.style = ptcMobileSelectCss;
 
 export { PtcMobileSelect as ptc_mobile_select };

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

@@ -2,112 +2,112 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 
 const ptcModalCss = ":host{display:block}.wrapper{position:fixed;width:100vw;height:100%;top:0;left:0;z-index:3000;display:none}.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.show{display:flex;align-items:flex-start}.wrapper.show .modal-popup{transform:translateY(0)}.overlay{width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:3010;display:block;background-color:rgba(0, 0, 0, 0.6)}";
 
-let PtcModal = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.closed = createEvent(this, "closed", 7);
-    this.opened = createEvent(this, "opened", 7);
-    /**
-     * Sets if popup should close if click on outside
-     */
-    this.size = 'sm';
-    /**
-     * Set whether or not to display modal
-     */
-    this.show = false;
-    /**
-     * Sets if popup should overlay
-     */
-    this.overlay = true;
-    /**
-     * Sets if popup should close if click on outside
-     */
-    this.closeOnBlur = false;
-  }
-  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);
-    }
-  }
-  componentDidUpdate() {
-    if (this.show) {
-      this.fireOnOpened(this);
-    }
-    else {
-      this.fireOnClosed(this);
-    }
-  }
-  resizeIframe(e) {
-    let iFrame = e.target;
-    setTimeout(() => {
-      try {
-        iFrame.height = `${iFrame.contentDocument.body.scrollHeight}px`;
-      }
-      catch (error) {
-        console.log(error);
-        iFrame.height = '616px'; //default
-        iFrame.removeAttribute('scrolling');
-      }
-      iFrame.classList.add('ready');
-    }, 50);
-  }
-  close() {
-    this.show = false;
-  }
-  render() {
-    let content;
-    let overlay;
-    let type = this.iframeUrl ? 'frame' : 'html';
-    if (this.iframeUrl) {
-      content = (h("iframe", { src: this.iframeUrl, frameBorder: 0, allowFullScreen: false, height: "100%", width: "100%", scrolling: "no", onLoad: this.resizeIframe }));
-    }
-    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, null, h("div", { class: `wrapper ${this.show ? "show" : "hide"}` }, overlay, h("div", { class: `modal-popup ${this.size} ${type}` }, h("div", { class: "close" }, h("a", { href: "#", onClick: (e) => {
-        e.preventDefault();
-        this.close();
-      } }, 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" })))), h("div", { class: "modal-body" }, content)))));
-  }
-  get el() { return getElement(this); }
-};
+let PtcModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.closed = createEvent(this, "closed", 7);
+    this.opened = createEvent(this, "opened", 7);
+    /**
+     * Sets if popup should close if click on outside
+     */
+    this.size = 'sm';
+    /**
+     * Set whether or not to display modal
+     */
+    this.show = false;
+    /**
+     * Sets if popup should overlay
+     */
+    this.overlay = true;
+    /**
+     * Sets if popup should close if click on outside
+     */
+    this.closeOnBlur = false;
+  }
+  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);
+    }
+  }
+  componentDidUpdate() {
+    if (this.show) {
+      this.fireOnOpened(this);
+    }
+    else {
+      this.fireOnClosed(this);
+    }
+  }
+  resizeIframe(e) {
+    let iFrame = e.target;
+    setTimeout(() => {
+      try {
+        iFrame.height = `${iFrame.contentDocument.body.scrollHeight}px`;
+      }
+      catch (error) {
+        console.log(error);
+        iFrame.height = '616px'; //default
+        iFrame.removeAttribute('scrolling');
+      }
+      iFrame.classList.add('ready');
+    }, 50);
+  }
+  close() {
+    this.show = false;
+  }
+  render() {
+    let content;
+    let overlay;
+    let type = this.iframeUrl ? 'frame' : 'html';
+    if (this.iframeUrl) {
+      content = (h("iframe", { src: this.iframeUrl, frameBorder: 0, allowFullScreen: false, height: "100%", width: "100%", scrolling: "no", onLoad: this.resizeIframe }));
+    }
+    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, null, h("div", { class: `wrapper ${this.show ? "show" : "hide"}` }, overlay, h("div", { class: `modal-popup ${this.size} ${type}` }, h("div", { class: "close" }, h("a", { href: "#", onClick: (e) => {
+        e.preventDefault();
+        this.close();
+      } }, 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" })))), h("div", { class: "modal-body" }, content)))));
+  }
+  get el() { return getElement(this); }
+};
 PtcModal.style = ptcModalCss;
 
 export { PtcModal as ptc_modal };

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

@@ -2,89 +2,89 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 
 const ptcNavItemCss = ":host{display:block;width:100%}@media only screen and (min-width: 992px){:host{width:auto}}:host([depth=\"2\"]) a{font-family:var(--ptc-font-secondary-latin);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-dense);letter-spacing:var(--ptc-letter-spacing-dense);margin-bottom:var(--ptc-element-spacing-03);padding-left:50px}@media only screen and (min-width: 992px){:host([depth=\"2\"]) a{padding-left:0px}}:host([depth=\"1\"]) a{font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-dense);letter-spacing:var(--ptc-letter-spacing-dense);padding:20px 25px}:host([nav-type=secondary-nav]) a{font-size:var(--ptc-font-size-xxx-small);font-weight:var(--ptc-font-weight-thin)}:host([nav-type=language-nav]) a{font-size:var(--ptc-font-size-xxx-small);font-weight:var(--ptc-font-weight-thin)}@media only screen and (min-width: 992px){.primary-nav~.ptc-nav-children{position:absolute;left:0}.primary-nav~.ptc-nav-children ::slotted(.nav-tab){background-color:var(--color-gray-11);display:flex;width:100vw}.language-nav~.ptc-nav-children{position:absolute;background-color:var(--color-gray-11)}}a[aria-expanded=true]~.ptc-nav-children{padding-top:var(--ptc-element-spacing-04);max-height:2000px}@media only screen and (min-width: 992px){a[aria-expanded=true]~.ptc-nav-children{padding-top:0}}.ptc-nav-children{overflow:hidden;max-height:0;transition:max-height var(--ptc-transition-medium) var(--ptc-ease-inout), padding-top var(--ptc-transition-medium) var(--ptc-ease-inout)}a{color:var(--color-white);text-transform:uppercase;display:block;outline:none;text-decoration:none}";
 
-let PtcNavItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.menuItemToggled = createEvent(this, "menuItemToggled", 7);
-    /**
-     * Link URL
-     */
-    this.url = undefined;
-    /**
-     * Nav Description
-     */
-    this.label = '';
-    /**
-     * If the current nav item is expanded
-     */
-    this.ariaExpanded = false;
-    /**
-     * Depth of the current nav item
-     */
-    this.depth = 0;
-    /**
-     * If the current nav item has children nav items
-     */
-    this.hasChildren = false;
-    /**
-     * If the parent nav item of the current one is expanded
-     */
-    this.parentExpanded = false;
-    /**
-     * Nav Item Type
-     */
-    this.navType = undefined;
-  }
-  /**
-   * Watch
-   */
-  expandedHandler(newValue) {
-    const children = Array.prototype.slice.call(this.el.children);
-    children.forEach(child => {
-      child.parentExpanded = newValue;
-    });
-    this.menuItemToggled.emit({ expanded: this.ariaExpanded });
-  }
-  /**
-   * Event Listener
-   */
-  handleClick(e) {
-    if (this.hasChildren) {
-      e.preventDefault();
-      this.ariaExpanded = !this.ariaExpanded;
-    }
-  }
-  handleResize(ev) {
-    console.log('the body was scrolled', ev);
-  }
-  /**
-   * Lifecycle method
-   */
-  componentWillRender() {
-    this.hasChildren = !!this.el.hasChildNodes();
-    let parentMenu = this.el.closest('ptc-nav-item');
-    let nextParentMenu;
-    this.depth = 0;
-    while (parentMenu) {
-      nextParentMenu = parentMenu.parentElement.closest('ptc-nav-item');
-      if (nextParentMenu === parentMenu) {
-        break;
-      }
-      else {
-        parentMenu = nextParentMenu;
-        this.depth = this.depth + 1;
-      }
-    }
-  }
-  render() {
-    //const leftIndent = this.depth > 1 ? 25 * this.depth + 'px' : '25px';
-    return (h(Host, { role: "none" }, h("a", { role: "menuitem", href: this.url, tabIndex: this.parentExpanded || this.depth === 1 ? 0 : -1, "aria-depth": this.depth, "aria-haspopup": this.hasChildren.toString(), "aria-expanded": this.hasChildren ? this.ariaExpanded.toString() : this.ariaExpanded, onClick: e => this.handleClick(e), class: this.navType }, h("span", null, this.label)), this.hasChildren && (h("div", { class: "ptc-nav-children", role: "menu", part: this.navType, "aria-label": this.label }, h("slot", null)))));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "ariaExpanded": ["expandedHandler"]
-  }; }
-};
+let PtcNavItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.menuItemToggled = createEvent(this, "menuItemToggled", 7);
+    /**
+     * Link URL
+     */
+    this.url = undefined;
+    /**
+     * Nav Description
+     */
+    this.label = '';
+    /**
+     * If the current nav item is expanded
+     */
+    this.ariaExpanded = false;
+    /**
+     * Depth of the current nav item
+     */
+    this.depth = 0;
+    /**
+     * If the current nav item has children nav items
+     */
+    this.hasChildren = false;
+    /**
+     * If the parent nav item of the current one is expanded
+     */
+    this.parentExpanded = false;
+    /**
+     * Nav Item Type
+     */
+    this.navType = undefined;
+  }
+  /**
+   * Watch
+   */
+  expandedHandler(newValue) {
+    const children = Array.prototype.slice.call(this.el.children);
+    children.forEach(child => {
+      child.parentExpanded = newValue;
+    });
+    this.menuItemToggled.emit({ expanded: this.ariaExpanded });
+  }
+  /**
+   * Event Listener
+   */
+  handleClick(e) {
+    if (this.hasChildren) {
+      e.preventDefault();
+      this.ariaExpanded = !this.ariaExpanded;
+    }
+  }
+  handleResize(ev) {
+    console.log('the body was scrolled', ev);
+  }
+  /**
+   * Lifecycle method
+   */
+  componentWillRender() {
+    this.hasChildren = !!this.el.hasChildNodes();
+    let parentMenu = this.el.closest('ptc-nav-item');
+    let nextParentMenu;
+    this.depth = 0;
+    while (parentMenu) {
+      nextParentMenu = parentMenu.parentElement.closest('ptc-nav-item');
+      if (nextParentMenu === parentMenu) {
+        break;
+      }
+      else {
+        parentMenu = nextParentMenu;
+        this.depth = this.depth + 1;
+      }
+    }
+  }
+  render() {
+    //const leftIndent = this.depth > 1 ? 25 * this.depth + 'px' : '25px';
+    return (h(Host, { role: "none" }, h("a", { role: "menuitem", href: this.url, tabIndex: this.parentExpanded || this.depth === 1 ? 0 : -1, "aria-depth": this.depth, "aria-haspopup": this.hasChildren.toString(), "aria-expanded": this.hasChildren ? this.ariaExpanded.toString() : this.ariaExpanded, onClick: e => this.handleClick(e), class: this.navType }, h("span", null, this.label)), this.hasChildren && (h("div", { class: "ptc-nav-children", role: "menu", part: this.navType, "aria-label": this.label }, h("slot", null)))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "ariaExpanded": ["expandedHandler"]
+  }; }
+};
 PtcNavItem.style = ptcNavItemCss;
 
 export { PtcNavItem as ptc_nav_item };

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

@@ -2,14 +2,14 @@ import { r as registerInstance, h, H as Host } from './index-f64012bd.js';
 
 const ptcNavCss = ":host{display:block}.nav-style{background-color:var(--color-gray-11);display:block}@media only screen and (min-width: 992px){.nav-style{display:grid;grid-template-columns:auto fit-content(76px);grid-template-rows:fit-content(22px) 1fr;grid-template-areas:\"secondary secondary\" \"primary language\"}.primary-nav{grid-area:primary}.secondary-nav{grid-area:secondary}.language-nav{grid-area:language}}";
 
-let PtcNav = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, null, h("nav", { class: "nav-style" }, h("div", { class: "primary-nav", part: "primary-nav-part" }, h("slot", { name: "primary-nav-content" })), h("div", { class: "secondary-nav", part: "secondary-nav-part" }, h("slot", { name: "secondary-nav-content" })), h("div", { class: "language-nav", part: "language-nav-part" }, h("slot", { name: "language-nav-content" })))));
-  }
-};
+let PtcNav = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("nav", { class: "nav-style" }, h("div", { class: "primary-nav", part: "primary-nav-part" }, h("slot", { name: "primary-nav-content" })), h("div", { class: "secondary-nav", part: "secondary-nav-part" }, h("slot", { name: "secondary-nav-content" })), h("div", { class: "language-nav", part: "language-nav-part" }, h("slot", { name: "language-nav-content" })))));
+  }
+};
 PtcNav.style = ptcNavCss;
 
 export { PtcNav as ptc_nav };