@ptcwebops/ptcw-design 0.5.5 → 0.5.7

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

@@ -6,29 +6,29 @@ const index = require('./index-3adcf9f4.js');
 
 const ptcListCss = ":host{display:block}:host(.list-primary) li{font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-normal);letter-spacing:var(--ptc-letter-spacing-normal);list-style:none}:host(.list-primary) li:not(:last-child){margin-bottom:0.625rem}:host(.list-primary) li a{color:var(--color-white);outline:none;text-decoration:none;font-family:Rajdhani;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-normal);text-transform:uppercase;letter-spacing:var(--ptc-letter-spacing-normal)}:host(.list-primary) li a:hover{color:var(--color-white);border-bottom:1.5px solid var(--color-green-07)}";
 
-let PtcList = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.listType = 'list-primary';
-    this.listItems = [];
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    const listItems = this.listItems;
-    //console.log(this.listItems.length);
-    if (!listItems || listItems.length === 0) {
-      return null;
-    }
-    return (index.h(index.Host, { class: classMap }, index.h("ul", null, listItems.map(listItem => {
-      index.h("li", null, listItem);
-    }))));
-  }
-  getCssClassMap() {
-    return {
-      [this.listType]: this.listItems ? true : false,
-    };
-  }
-};
+let PtcList = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.listType = 'list-primary';
+    this.listItems = [];
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    const listItems = this.listItems;
+    //console.log(this.listItems.length);
+    if (!listItems || listItems.length === 0) {
+      return null;
+    }
+    return (index.h(index.Host, { class: classMap }, index.h("ul", null, listItems.map(listItem => {
+      index.h("li", null, listItem);
+    }))));
+  }
+  getCssClassMap() {
+    return {
+      [this.listType]: this.listItems ? true : false,
+    };
+  }
+};
 PtcList.style = ptcListCss;
 
 exports.ptc_list = PtcList;

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

@@ -6,18 +6,18 @@ const index = require('./index-3adcf9f4.js');
 
 const ptcLottieCss = ":host{display:block;width:100%;height:auto}";
 
-let PtcLottie = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Animation speed
-     */
-    this.speed = 1;
-  }
-  render() {
-    return (index.h("lottie-player", { autoplay: true, loop: true, src: this.jsonSrc, speed: this.speed }));
-  }
-};
+let PtcLottie = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Animation speed
+     */
+    this.speed = 1;
+  }
+  render() {
+    return (index.h("lottie-player", { autoplay: true, loop: true, src: this.jsonSrc, speed: this.speed }));
+  }
+};
 PtcLottie.style = ptcLottieCss;
 
 exports.ptc_lottie = PtcLottie;

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

@@ -6,14 +6,14 @@ const index = require('./index-3adcf9f4.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) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, { class: "ptc-min-footer mini-footer" }, index.h("div", { class: "min-footer-copyright-wrapper" }, index.h("ul", { class: "min-footer-nav-list min-footer-copyright-list" }, index.h("slot", null)))));
-  }
-};
+let PtcMinimizedFooter = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, { class: "ptc-min-footer mini-footer" }, index.h("div", { class: "min-footer-copyright-wrapper" }, index.h("ul", { class: "min-footer-nav-list min-footer-copyright-list" }, index.h("slot", null)))));
+  }
+};
 PtcMinimizedFooter.style = ptcMinimizedFooterCss;
 
 exports.ptc_minimized_footer = PtcMinimizedFooter;

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

@@ -6,17 +6,17 @@ const index = require('./index-3adcf9f4.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) {
-    index.registerInstance(this, hostRef);
-    this.linkUrl = '#';
-    this.imgSrc = '';
-    this.imgAlt = 'PTC';
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "minimized-header" }, index.h("div", { class: "header" }, index.h("div", { class: "temp-container" }, index.h("a", { class: "mini-navbar-logo", href: this.linkUrl }, index.h("img", { src: this.imgSrc, alt: this.imgAlt })))))));
-  }
-};
+let PtcMinimizedHeader = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.linkUrl = '#';
+    this.imgSrc = '';
+    this.imgAlt = 'PTC';
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "minimized-header" }, index.h("div", { class: "header" }, index.h("div", { class: "temp-container" }, index.h("a", { class: "mini-navbar-logo", href: this.linkUrl }, index.h("img", { src: this.imgSrc, alt: this.imgAlt })))))));
+  }
+};
 PtcMinimizedHeader.style = ptcMinimizedHeaderCss;
 
 exports.ptc_minimized_header = PtcMinimizedHeader;

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

@@ -721,75 +721,75 @@ var mobileSelect = _commonjsHelpers.createCommonjsModule(function (module, expor
 
 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) {
-    index.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 (index.h("div", { class: "mobile-select-wrapper" }, index.h("div", { id: this.triggerName }, this.selectedText, index.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) {
+    index.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 (index.h("div", { class: "mobile-select-wrapper" }, index.h("div", { id: this.triggerName }, this.selectedText, index.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;
 
 exports.ptc_mobile_select = PtcMobileSelect;

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

@@ -6,89 +6,89 @@ const index = require('./index-3adcf9f4.js');
 
 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) {
-    index.registerInstance(this, hostRef);
-    this.menuItemToggled = index.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 (index.h(index.Host, { role: "none" }, index.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 }, index.h("span", null, this.label)), this.hasChildren && (index.h("div", { class: "ptc-nav-children", role: "menu", part: this.navType, "aria-label": this.label }, index.h("slot", null)))));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "ariaExpanded": ["expandedHandler"]
-  }; }
-};
+let PtcNavItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.menuItemToggled = index.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 (index.h(index.Host, { role: "none" }, index.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 }, index.h("span", null, this.label)), this.hasChildren && (index.h("div", { class: "ptc-nav-children", role: "menu", part: this.navType, "aria-label": this.label }, index.h("slot", null)))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "ariaExpanded": ["expandedHandler"]
+  }; }
+};
 PtcNavItem.style = ptcNavItemCss;
 
 exports.ptc_nav_item = PtcNavItem;

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

@@ -6,14 +6,14 @@ const index = require('./index-3adcf9f4.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) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("nav", { class: "nav-style" }, index.h("div", { class: "primary-nav", part: "primary-nav-part" }, index.h("slot", { name: "primary-nav-content" })), index.h("div", { class: "secondary-nav", part: "secondary-nav-part" }, index.h("slot", { name: "secondary-nav-content" })), index.h("div", { class: "language-nav", part: "language-nav-part" }, index.h("slot", { name: "language-nav-content" })))));
-  }
-};
+let PtcNav = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("nav", { class: "nav-style" }, index.h("div", { class: "primary-nav", part: "primary-nav-part" }, index.h("slot", { name: "primary-nav-content" })), index.h("div", { class: "secondary-nav", part: "secondary-nav-part" }, index.h("slot", { name: "secondary-nav-content" })), index.h("div", { class: "language-nav", part: "language-nav-part" }, index.h("slot", { name: "language-nav-content" })))));
+  }
+};
 PtcNav.style = ptcNavCss;
 
 exports.ptc_nav = PtcNav;