@ptcwebops/ptcw-design 0.8.7 → 0.8.9

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

@@ -11,6 +11,19 @@
   width: 100%;
   display: block;
   text-decoration: none;
+  position: relative;
+}
+:host video {
+  object-fit: cover;
+  height: 100%;
+  width: 100%;
+  z-index: 0;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: none;
 }
 :host .card-wrap {
   display: flex;
@@ -31,10 +44,11 @@
 :host .card-wrap .car-content h3 {
   position: relative;
   margin-bottom: 0;
-  font-size: var(--ptc-font-size-medium);
+  font-size: var(--ptc-font-size-large);
   text-shadow: 1px 3px 30px #000;
-  line-height: var(--ptc-line-height-dense);
+  line-height: var(--ptc-line-height-denser);
   display: inline;
+  letter-spacing: 1.1px;
 }
 :host .card-wrap .car-content h3::before {
   content: "";
@@ -53,5 +67,5 @@
   font-size: var(--ptc-font-size-x-small);
   font-style: normal;
   font-stretch: normal;
-  letter-spacing: var(--ptc-line-height-dense);
+  letter-spacing: 0.6px;
 }

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

@@ -1,213 +1,216 @@
-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"
-      }
-    };
-  }
-}
+import { Host, h } from '@stencil/core';
+import { getFileExtension } from '../../utils/utils';
+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';
+    const isVideoUrl = getFileExtension(this.hoverBackgroundImage);
+    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 }, isVideoUrl == ".mp4" &&
+      h("video", { muted: true, autoPlay: true, loop: true, playsinline: true, poster: this.activeBackgroundImage, style: this.isHovered ? { display: 'block' } : { display: 'none' } }, h("source", { src: this.hoverBackgroundImage, type: "video/mp4" }, "Your browser does not support the video tag.")), 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\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": true,
+        "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": true,
+        "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": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Card heading"
+        },
+        "attribute": "heading",
+        "reflect": false
+      },
+      "headingTransform": {
+        "type": "string",
+        "mutable": true,
+        "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": true,
+        "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"]
+    };
+  }
+}