@ptcwebops/ptcw-design 0.5.1 → 0.5.3

package/dist/collection/components/ptc-nav-item/ptc-nav-item.js

@@ -1,252 +1,252 @@
-import { Component, Host, h, Element, Prop, Listen, Watch, Event } from '@stencil/core';
-export class PtcNavItem {
-  constructor() {
-    /**
-     * 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)))));
-  }
-  static get is() { return "ptc-nav-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-nav-item.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-nav-item.css"]
-  }; }
-  static get properties() { return {
-    "url": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Link URL"
-      },
-      "attribute": "url",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "label": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Nav Description"
-      },
-      "attribute": "label",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "ariaExpanded": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If the current nav item is expanded"
-      },
-      "attribute": "aria-expanded",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "depth": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Depth of the current nav item"
-      },
-      "attribute": "depth",
-      "reflect": true,
-      "defaultValue": "0"
-    },
-    "hasChildren": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If the current nav item has children nav items"
-      },
-      "attribute": "has-children",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "parentExpanded": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If the parent nav item of the current one is expanded"
-      },
-      "attribute": "parent-expanded",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "navType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'primary-nav' | 'secondary-nav' | 'primary-footer' | 'secondary-footer' | 'language-nav'",
-        "resolved": "\"language-nav\" | \"primary-footer\" | \"primary-nav\" | \"secondary-footer\" | \"secondary-nav\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Nav Item Type"
-      },
-      "attribute": "nav-type",
-      "reflect": false,
-      "defaultValue": "undefined"
-    }
-  }; }
-  static get events() { return [{
-      "method": "menuItemToggled",
-      "name": "menuItemToggled",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Menu Toggle Event"
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "ariaExpanded",
-      "methodName": "expandedHandler"
-    }]; }
-  static get listeners() { return [{
-      "name": "handleClick",
-      "method": "handleClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "resize",
-      "method": "handleResize",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }]; }
-}
+import { Component, Host, h, Element, Prop, Listen, Watch, Event } from '@stencil/core';
+export class PtcNavItem {
+  constructor() {
+    /**
+     * 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)))));
+  }
+  static get is() { return "ptc-nav-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-nav-item.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-nav-item.css"]
+  }; }
+  static get properties() { return {
+    "url": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Link URL"
+      },
+      "attribute": "url",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "label": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Nav Description"
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "ariaExpanded": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If the current nav item is expanded"
+      },
+      "attribute": "aria-expanded",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "depth": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Depth of the current nav item"
+      },
+      "attribute": "depth",
+      "reflect": true,
+      "defaultValue": "0"
+    },
+    "hasChildren": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If the current nav item has children nav items"
+      },
+      "attribute": "has-children",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "parentExpanded": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If the parent nav item of the current one is expanded"
+      },
+      "attribute": "parent-expanded",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "navType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'primary-nav' | 'secondary-nav' | 'primary-footer' | 'secondary-footer' | 'language-nav'",
+        "resolved": "\"language-nav\" | \"primary-footer\" | \"primary-nav\" | \"secondary-footer\" | \"secondary-nav\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Nav Item Type"
+      },
+      "attribute": "nav-type",
+      "reflect": false,
+      "defaultValue": "undefined"
+    }
+  }; }
+  static get events() { return [{
+      "method": "menuItemToggled",
+      "name": "menuItemToggled",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Menu Toggle Event"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "ariaExpanded",
+      "methodName": "expandedHandler"
+    }]; }
+  static get listeners() { return [{
+      "name": "handleClick",
+      "method": "handleClick",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "resize",
+      "method": "handleResize",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
+}