@ptcwebops/ptcw-design 0.8.3 → 0.8.6

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

@@ -1,62 +1,62 @@
-import { h } from '@stencil/core';
-import '@teamhive/lottie-player';
-export class PtcLottie {
-  constructor() {
-    this.jsonSrc = undefined;
-    this.speed = 1;
-  }
-  render() {
-    return (h("lottie-player", { autoplay: true, loop: true, src: this.jsonSrc, speed: this.speed }));
-  }
-  static get is() { return "ptc-lottie"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-lottie.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-lottie.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "jsonSrc": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set Json file src"
-        },
-        "attribute": "json-src",
-        "reflect": false
-      },
-      "speed": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Animation speed"
-        },
-        "attribute": "speed",
-        "reflect": false,
-        "defaultValue": "1"
-      }
-    };
-  }
-}
+import { h } from '@stencil/core';
+import '@teamhive/lottie-player';
+export class PtcLottie {
+  constructor() {
+    this.jsonSrc = undefined;
+    this.speed = 1;
+  }
+  render() {
+    return (h("lottie-player", { autoplay: true, loop: true, src: this.jsonSrc, speed: this.speed }));
+  }
+  static get is() { return "ptc-lottie"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-lottie.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-lottie.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "jsonSrc": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set Json file src"
+        },
+        "attribute": "json-src",
+        "reflect": false
+      },
+      "speed": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Animation speed"
+        },
+        "attribute": "speed",
+        "reflect": false,
+        "defaultValue": "1"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,57 @@
+:host {
+  display: block;
+  position: relative;
+  width: 100%;
+  background-size: cover;
+  background-position: 50%;
+  background-repeat: no-repeat;
+}
+:host .anchor-wrap {
+  height: 100%;
+  width: 100%;
+  display: block;
+  text-decoration: none;
+}
+:host .card-wrap {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+  min-height: 329px;
+  align-items: end;
+}
+:host .card-wrap .car-content {
+  padding: 20px 30px 30px 30px;
+}
+:host .card-wrap .car-content h4,
+:host .card-wrap .car-content h3 {
+  color: #fff;
+}
+:host .card-wrap .car-content h3 {
+  position: relative;
+  margin-bottom: 0;
+  font-size: var(--ptc-font-size-medium);
+  text-shadow: 1px 3px 30px #000;
+  line-height: var(--ptc-line-height-dense);
+  display: inline;
+}
+:host .card-wrap .car-content h3::before {
+  content: "";
+  width: 100%;
+  height: 3px;
+  background-image: url("data:image/svg+xml,%3Csvg width='60' height='1' viewBox='0 0 60 1' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='1' fill='%2333A13C'/%3E%3C/svg%3E");
+  background-repeat: repeat;
+  position: absolute;
+  background-size: initial;
+  top: -10px;
+}
+:host .card-wrap .car-content h4 {
+  text-shadow: 1px 3px 30px var(--color-black);
+  font-weight: var(--ptc-font-weight-semibold);
+  display: block;
+  font-size: var(--ptc-font-size-x-small);
+  font-style: normal;
+  font-stretch: normal;
+  letter-spacing: var(--ptc-line-height-dense);
+}

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

@@ -0,0 +1,213 @@
+import { Host, h } from '@stencil/core';
+export class PtcMediaCard {
+  constructor() {
+    this.cardType = 'media-card';
+    this.cardHref = undefined;
+    this.target = '_self';
+    this.rel = undefined;
+    this.activeBackgroundImage = undefined;
+    this.hoverBackgroundImage = undefined;
+    this.heading = undefined;
+    this.headingTransform = 'none';
+    this.category = undefined;
+    this.isHovered = false;
+  }
+  render() {
+    const Tag = !!this.cardHref ? 'a' : 'div';
+    return (h(Host, { onmouseenter: () => (this.isHovered = true), onmouseleave: () => (this.isHovered = false), style: this.isHovered
+        ? { backgroundImage: `url(${this.hoverBackgroundImage})` }
+        : { backgroundImage: `url(${this.activeBackgroundImage})` } }, h(Tag, { class: "anchor-wrap", target: this.target, href: this.cardHref, rel: this.rel }, h("ptc-overlay", { "filter-color": "black-2" }), h("div", { class: "card-wrap" }, h("div", { class: "car-content" }, h("h4", null, this.category, " "), h("h3", null, this.heading))))));
+  }
+  static get is() { return "ptc-media-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-media-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-media-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cardType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'media-card'",
+          "resolved": "\"media-card\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Card Type\r\nSpecify Card Type, default to media card"
+        },
+        "attribute": "card-type",
+        "reflect": false,
+        "defaultValue": "'media-card'"
+      },
+      "cardHref": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Card Link URL (Optional)"
+        },
+        "attribute": "card-href",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) Link card target"
+        },
+        "attribute": "target",
+        "reflect": false,
+        "defaultValue": "'_self'"
+      },
+      "rel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) Link card rel"
+        },
+        "attribute": "rel",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "activeBackgroundImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Background Imgae"
+        },
+        "attribute": "active-background-image",
+        "reflect": false
+      },
+      "hoverBackgroundImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Background Imgae"
+        },
+        "attribute": "hover-background-image",
+        "reflect": false
+      },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Card heading"
+        },
+        "attribute": "heading",
+        "reflect": false
+      },
+      "headingTransform": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'uppercase' | 'lowercase' | 'capitalize' | 'none'",
+          "resolved": "\"capitalize\" | \"lowercase\" | \"none\" | \"uppercase\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Card heading text transform"
+        },
+        "attribute": "heading-transform",
+        "reflect": false,
+        "defaultValue": "'none'"
+      },
+      "category": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Card category"
+        },
+        "attribute": "category",
+        "reflect": false
+      },
+      "isHovered": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean variable for hover state"
+        },
+        "attribute": "is-hovered",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}

package/dist/collection/components/ptc-minimized-footer/ptc-minimized-footer.js

@@ -1,18 +1,18 @@
-import { Host, h } from '@stencil/core';
-export class PtcMinimizedFooter {
-  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)))));
-  }
-  static get is() { return "ptc-minimized-footer"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-minimized-footer.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-minimized-footer.css"]
-    };
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcMinimizedFooter {
+  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)))));
+  }
+  static get is() { return "ptc-minimized-footer"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-minimized-footer.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-minimized-footer.css"]
+    };
+  }
+}

package/dist/collection/components/ptc-minimized-header/ptc-minimized-header.js

@@ -1,81 +1,81 @@
-import { Host, h } from '@stencil/core';
-export class PtcMinimizedHeader {
-  constructor() {
-    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 })))))));
-  }
-  static get is() { return "ptc-minimized-header"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-minimized-header.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-minimized-header.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "linkUrl": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "link-url",
-        "reflect": true,
-        "defaultValue": "'#'"
-      },
-      "imgSrc": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "img-src",
-        "reflect": true,
-        "defaultValue": "''"
-      },
-      "imgAlt": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "img-alt",
-        "reflect": true,
-        "defaultValue": "'PTC'"
-      }
-    };
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcMinimizedHeader {
+  constructor() {
+    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 })))))));
+  }
+  static get is() { return "ptc-minimized-header"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-minimized-header.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-minimized-header.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "linkUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "link-url",
+        "reflect": true,
+        "defaultValue": "'#'"
+      },
+      "imgSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "img-src",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "imgAlt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "img-alt",
+        "reflect": true,
+        "defaultValue": "'PTC'"
+      }
+    };
+  }
+}