@ptcwebops/ptcw-design 3.4.0 → 3.4.2

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

@@ -1,99 +1,99 @@
-import { Host, h } from '@stencil/core';
-class ListItem {
-}
-export class PtcList {
-  constructor() {
-    this.listType = 'list-primary';
-    this.listItems = [];
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    const listItems = this.getListItems();
-    if (!listItems || listItems.length === 0) {
-      return null;
-    }
-    return (h(Host, { class: classMap }, h("ul", null, listItems.map(listItem => {
-      return (h("list-item", { "link-type": listItem.type, "link-href": listItem.href, "link-target": listItem.target, "flush-before": listItem.flushBefore }, listItem.value));
-    }))));
-  }
-  getListItems() {
-    let result = new Array();
-    if (this.listItems && this.listItems.length > 0) {
-      this.listItems.map(listItem => {
-        let i = new ListItem();
-        i.value = listItem;
-        result.push(i);
-      });
-    }
-    else {
-      let items = Array.from(this.el.querySelectorAll('list-item'));
-      items.map(el => {
-        let i = new ListItem();
-        let item = el;
-        i.value = item.innerText;
-        i.href = item.getAttribute('link-href');
-        i.target = item.getAttribute('link-target');
-        i.flushBefore = item.getAttribute('flush-before') == 'true';
-        i.type = item.getAttribute('link-type');
-        result.push(i);
-      });
-    }
-    return result;
-  }
-  getCssClassMap() {
-    return {
-      [this.listType]: this.listItems ? true : false,
-    };
-  }
-  static get is() { return "ptc-list"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-list.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-list.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "listType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'list-primary'",
-          "resolved": "\"list-primary\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "list-type",
-        "reflect": false,
-        "defaultValue": "'list-primary'"
-      },
-      "listItems": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "defaultValue": "[]"
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-}
+import { Host, h } from '@stencil/core';
+class ListItem {
+}
+export class PtcList {
+  constructor() {
+    this.listType = 'list-primary';
+    this.listItems = [];
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    const listItems = this.getListItems();
+    if (!listItems || listItems.length === 0) {
+      return null;
+    }
+    return (h(Host, { class: classMap }, h("ul", null, listItems.map(listItem => {
+      return (h("list-item", { "link-type": listItem.type, "link-href": listItem.href, "link-target": listItem.target, "flush-before": listItem.flushBefore }, listItem.value));
+    }))));
+  }
+  getListItems() {
+    let result = new Array();
+    if (this.listItems && this.listItems.length > 0) {
+      this.listItems.map(listItem => {
+        let i = new ListItem();
+        i.value = listItem;
+        result.push(i);
+      });
+    }
+    else {
+      let items = Array.from(this.el.querySelectorAll('list-item'));
+      items.map(el => {
+        let i = new ListItem();
+        let item = el;
+        i.value = item.innerText;
+        i.href = item.getAttribute('link-href');
+        i.target = item.getAttribute('link-target');
+        i.flushBefore = item.getAttribute('flush-before') == 'true';
+        i.type = item.getAttribute('link-type');
+        result.push(i);
+      });
+    }
+    return result;
+  }
+  getCssClassMap() {
+    return {
+      [this.listType]: this.listItems ? true : false,
+    };
+  }
+  static get is() { return "ptc-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "listType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'list-primary'",
+          "resolved": "\"list-primary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "list-type",
+        "reflect": false,
+        "defaultValue": "'list-primary'"
+      },
+      "listItems": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}

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

@@ -1,233 +1,233 @@
-import { Host, h } from '@stencil/core';
-import { getFileExtension } from '../../utils/utils';
-export class PtcMediaCard {
-  constructor() {
-    /**
-     * ref video element
-     */
-    this.videoEle = undefined;
-    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;
-  }
-  WatchStateHandler(newValue) {
-    if (this.videoEle) {
-      newValue ? this.videoEle.play() : this.videoEle.pause();
-    }
-  }
-  getCardText() {
-    if (this.cardType === 'media-card') {
-      return [
-        h("div", { class: "card-wrap" }, h("div", { class: "car-content" }, h("h4", null, this.category, " "), h("h3", null, this.heading))),
-      ];
-    }
-  }
-  render() {
-    const Tag = !!this.cardHref ? 'a' : 'div';
-    const isVideoUrl = getFileExtension(this.hoverBackgroundImage) === '.mp4' ? true : false;
-    //console.log("isVideoUrl: " + isVideoUrl + " hoverBackgroundImage: " + this.hoverBackgroundImage);
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap, onmouseenter: () => (this.isHovered = true), onmouseleave: () => (this.isHovered = false),
-      // {...(!isVideoUrl
-      //   ? { ...{ style: this.isHovered ? { backgroundImage: `url(${this.hoverBackgroundImage})` } : { backgroundImage: `url(${this.activeBackgroundImage})` } } }
-      //   : null)}
-      style: this.isHovered ? { backgroundImage: `url(${this.hoverBackgroundImage})` } : { backgroundImage: `url(${this.activeBackgroundImage})` } }, h("slot", { name: "seo-content" }), h(Tag, { class: 'anchor-wrap', target: this.target, href: this.cardHref, rel: this.rel }, isVideoUrl && (h("video", { muted: true, loop: true, playsinline: true, poster: this.activeBackgroundImage, ref: el => (this.videoEle = el), style: this.isHovered ? { display: 'block' } : { display: 'none' } }, h("source", { src: this.hoverBackgroundImage, type: "video/mp4" }, "Your browser does not support the video tag."))), this.cardType === "media-card" && h("ptc-overlay", { "filter-color": "black-2" }), this.cardType === "media-card" && this.getCardText())));
-  }
-  getCssClassMap() {
-    return {
-      [this.cardType]: true,
-    };
-  }
-  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' | 'bureau-card'",
-          "resolved": "\"bureau-card\" | \"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": 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
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isHovered": {}
-    };
-  }
-  static get watchers() {
-    return [{
-        "propName": "isHovered",
-        "methodName": "WatchStateHandler"
-      }];
-  }
-}
+import { Host, h } from '@stencil/core';
+import { getFileExtension } from '../../utils/utils';
+export class PtcMediaCard {
+  constructor() {
+    /**
+     * ref video element
+     */
+    this.videoEle = undefined;
+    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;
+  }
+  WatchStateHandler(newValue) {
+    if (this.videoEle) {
+      newValue ? this.videoEle.play() : this.videoEle.pause();
+    }
+  }
+  getCardText() {
+    if (this.cardType === 'media-card') {
+      return [
+        h("div", { class: "card-wrap" }, h("div", { class: "car-content" }, h("h4", null, this.category, " "), h("h3", null, this.heading))),
+      ];
+    }
+  }
+  render() {
+    const Tag = !!this.cardHref ? 'a' : 'div';
+    const isVideoUrl = getFileExtension(this.hoverBackgroundImage) === '.mp4' ? true : false;
+    //console.log("isVideoUrl: " + isVideoUrl + " hoverBackgroundImage: " + this.hoverBackgroundImage);
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap, onmouseenter: () => (this.isHovered = true), onmouseleave: () => (this.isHovered = false),
+      // {...(!isVideoUrl
+      //   ? { ...{ style: this.isHovered ? { backgroundImage: `url(${this.hoverBackgroundImage})` } : { backgroundImage: `url(${this.activeBackgroundImage})` } } }
+      //   : null)}
+      style: this.isHovered ? { backgroundImage: `url(${this.hoverBackgroundImage})` } : { backgroundImage: `url(${this.activeBackgroundImage})` } }, h("slot", { name: "seo-content" }), h(Tag, { class: 'anchor-wrap', target: this.target, href: this.cardHref, rel: this.rel }, isVideoUrl && (h("video", { muted: true, loop: true, playsinline: true, poster: this.activeBackgroundImage, ref: el => (this.videoEle = el), style: this.isHovered ? { display: 'block' } : { display: 'none' } }, h("source", { src: this.hoverBackgroundImage, type: "video/mp4" }, "Your browser does not support the video tag."))), this.cardType === "media-card" && h("ptc-overlay", { "filter-color": "black-2" }), this.cardType === "media-card" && this.getCardText())));
+  }
+  getCssClassMap() {
+    return {
+      [this.cardType]: true,
+    };
+  }
+  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' | 'bureau-card'",
+          "resolved": "\"bureau-card\" | \"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
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isHovered": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "isHovered",
+        "methodName": "WatchStateHandler"
+      }];
+  }
+}