@ptcwebops/ptcw-design 1.2.7 → 1.2.8

package/dist/collection/components/subnav/ptc-subnav/ptc-subnav.js

@@ -0,0 +1,47 @@
+import { Host, h } from '@stencil/core';
+export class PtcSubnav {
+  constructor() {
+    this.navOpen = false;
+  }
+  toggleNav() {
+    this.navOpen = !this.navOpen;
+  }
+  handleScroll() {
+    const navbar = this.el.shadowRoot.querySelector('.navbar');
+    if (navbar) {
+      if (navbar.getBoundingClientRect().top <= 0) {
+        this.navOpen = false;
+      }
+    }
+  }
+  render() {
+    return (h(Host, null, h("nav", { class: `navbar ${this.navOpen ? 'navOpen' : ''}` }, h("button", { class: "navbar-toggle", onClick: () => this.toggleNav() }, "See page topics", ' ', h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15", fill: "white", class: "" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.2375 2.83325L7.5 8.60203L1.7625 2.83325L-7.76305e-08 4.60923L7.5 12.1666L15 4.60923L13.2375 2.83325Z", fill: "white" }))), h("div", { class: "navbar-inner" }, h("div", { class: "nav-wrapper" }, h("slot", { name: "subnav-menu-left" }), h("slot", { name: "subnav-menu-right" }))))));
+  }
+  static get is() { return "ptc-subnav"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-subnav.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-subnav.css"]
+    };
+  }
+  static get states() {
+    return {
+      "navOpen": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "scroll",
+        "method": "handleScroll",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

package/dist/collection/components/subnav/ptc-subnav-card/ptc-subnav-card.css

@@ -0,0 +1,25 @@
+:host {
+  display: block;
+  text-align: center;
+  padding: 0 var(--ptc-layout-spacing-02);
+}
+:host a {
+  text-decoration: none;
+}
+:host a:hover {
+  text-decoration: none;
+}
+:host h4 {
+  font-size: var(--ptc-font-size-x-small);
+  font-weight: var(--ptc-font-weight-semibold);
+  color: var(--color-white);
+  margin: 0;
+}
+:host .cta icon-asset {
+  margin-left: 4px;
+  vertical-align: middle;
+}
+:host img {
+  max-width: 75px;
+  margin: var(--ptc-layout-spacing-03) 0;
+}

package/dist/collection/components/subnav/ptc-subnav-card/ptc-subnav-card.js

@@ -0,0 +1,133 @@
+import { Host, h } from '@stencil/core';
+export class PtcSubnavCard {
+  constructor() {
+    this.cardTitle = undefined;
+    this.cardHref = undefined;
+    this.cardImageSrc = undefined;
+    this.cardImageAlt = undefined;
+    this.ctaText = undefined;
+    this.ctaIconAssetName = undefined;
+  }
+  render() {
+    const Tag = !!this.cardHref ? 'a' : 'div';
+    return (h(Host, null, h(Tag, Object.assign({}, (!!this.cardHref ? { href: this.cardHref } : {})), h("h4", null, this.cardTitle), h("img", { src: this.cardImageSrc, alt: this.cardImageAlt }), h("slot", null), h("h4", { class: "cta" }, this.ctaText, h("icon-asset", { type: "ptc", size: "x-small", name: this.ctaIconAssetName, color: "white" })))));
+  }
+  static get is() { return "ptc-subnav-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-subnav-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-subnav-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cardTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "card title"
+        },
+        "attribute": "card-title",
+        "reflect": false
+      },
+      "cardHref": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "card title"
+        },
+        "attribute": "card-href",
+        "reflect": false
+      },
+      "cardImageSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "card image src"
+        },
+        "attribute": "card-image-src",
+        "reflect": false
+      },
+      "cardImageAlt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "card image alt"
+        },
+        "attribute": "card-image-alt",
+        "reflect": false
+      },
+      "ctaText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Cta Text Ex: Download Asset"
+        },
+        "attribute": "cta-text",
+        "reflect": false
+      },
+      "ctaIconAssetName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Cta Icon name Ex: download"
+        },
+        "attribute": "cta-icon-asset-name",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/tab-content/tab-content.js

@@ -1,84 +1,84 @@
-import { h } from '@stencil/core';
-export class TabContent {
-  constructor() {
-    this.name = undefined;
-    this.isSelected = false;
-  }
-  async getChild() {
-    return {
-      select: this.select.bind(this),
-      unselect: this.unselect.bind(this),
-      name: this.name
-    };
-  }
-  unselect() {
-    this.isSelected = false;
-  }
-  select() {
-    this.isSelected = true;
-  }
-  render() {
-    const classes = {
-      'tab-content': true,
-      'tab-content-selected': this.isSelected
-    };
-    return (h("div", { class: classes }, h("slot", null)));
-  }
-  static get is() { return "tab-content"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tab-content.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tab-content.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "name",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isSelected": {}
-    };
-  }
-  static get methods() {
-    return {
-      "getChild": {
-        "complexType": {
-          "signature": "() => Promise<{ select: any; unselect: any; name: string; }>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<{ select: any; unselect: any; name: string; }>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-}
+import { h } from '@stencil/core';
+export class TabContent {
+  constructor() {
+    this.name = undefined;
+    this.isSelected = false;
+  }
+  async getChild() {
+    return {
+      select: this.select.bind(this),
+      unselect: this.unselect.bind(this),
+      name: this.name
+    };
+  }
+  unselect() {
+    this.isSelected = false;
+  }
+  select() {
+    this.isSelected = true;
+  }
+  render() {
+    const classes = {
+      'tab-content': true,
+      'tab-content-selected': this.isSelected
+    };
+    return (h("div", { class: classes }, h("slot", null)));
+  }
+  static get is() { return "tab-content"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tab-content.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tab-content.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isSelected": {}
+    };
+  }
+  static get methods() {
+    return {
+      "getChild": {
+        "complexType": {
+          "signature": "() => Promise<{ select: any; unselect: any; name: string; }>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<{ select: any; unselect: any; name: string; }>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+}