@ptcwebops/ptcw-design 0.6.0 → 0.6.1

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

@@ -1,301 +1,301 @@
-import { Component, Prop, Host, h } from '@stencil/core';
-export class PtcCard {
-  constructor() {
-    /**
-     * Card Type
-     * Specify Card Type, default to simple card
-     */
-    this.cardType = 'custom-card';
-    /**
-     * Card Link URL (Optional)
-     */
-    this.cardHref = undefined;
-    /**
-     * (optional) Link card target
-     * */
-    this.target = '_self';
-    /**
-     *  (optional) Link card rel
-     * */
-    this.rel = undefined;
-    /**
-     * If this card has Image
-     */
-    this.hasImage = false;
-    /**
-     * If this card has Video
-     */
-    this.hasVideo = false;
-    /**
-     * If this card has Lottie Image
-     */
-    this.hasLottie = false;
-    /**
-     * Card heading text transform
-     */
-    this.headingTransform = 'none';
-  }
-  render() {
-    const Tag = !!this.cardHref ? 'a' : 'div';
-    const classMap = this.getCssClassMap();
-    return (h(Host, Object.assign({}, (!!this.cardType ? { class: this.cardType } : {})),
-      this.styles && h("style", null, this.styles),
-      h("div", { class: "card-border", part: "border-wrapper" },
-        h(Tag, Object.assign({ class: classMap, part: "card-layout" }, (!!this.cardHref ? { href: this.cardHref } : {}), (!!this.target && !!this.cardHref ? { target: this.target } : {}), (!!this.rel && !!this.cardHref ? { rel: this.rel } : {}), (!!this.ribbonText ? { rel: this.ribbonText } : {})),
-          this.hasImage || this.hasLottie || this.hasVideo ? (h("div", { class: "card-media", part: "media-wrapper" }, this.getMediaSlot ? h("slot", { name: this.getMediaSlot() }) : null)) : null,
-          !!this.ribbonText && this.cardType == 'listing-card' ? h("div", { class: "ribbon-text" }, `${this.ribbonText}`) : null,
-          h("div", { class: "card-body", part: "body-wrapper" },
-            !!this.cardDate && this.cardType == 'listing-card' ? h("ptc-date", { "date-string": `${this.cardDate}`, "date-styles": "span{font-weight: 400;font-size: 16px;line-height: 19px;color: #282F35;margin-bottom:24px;display:inline-block;}" }) : null,
-            h("slot", { name: "slot-before-heading" }),
-            !!this.heading
-              ? [
-                h("h3", { class: `ptc-h3 ${this.headingTransform}`, part: "card-heading" }, this.heading),
-                h("slot", { name: "slot-after-heading" }),
-              ]
-              : null,
-            h("slot", { name: "slot-description" }),
-            !!this.cardDate && this.cardType != 'listing-card' ? h("ptc-date", { "date-string": `${this.cardDate}`, "date-styles": "span{color:#40434a;font-size:var(--ptc-font-size-x-small);margin-top:var(--ptc-element-spacing-06);display:inline-block;}" }) : null)))));
-  }
-  getCssClassMap() {
-    return {
-      ['card-layout']: true,
-      ['link-wrapper']: !!this.cardType ? true : false,
-    };
-  }
-  getMediaSlot() {
-    if (this.hasLottie) {
-      return 'slot-lottie';
-    }
-    else if (this.hasVideo) {
-      return 'slot-video';
-    }
-    else if (this.hasImage) {
-      return 'slot-image';
-    }
-    else {
-      return null;
-    }
-  }
-  static get is() { return "ptc-card"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-card.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-card.css"]
-  }; }
-  static get properties() { return {
-    "cardType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'simple-card' | 'lottie-card' | 'custom-card' | 'clip-edge-card' | 'hightlight-card' | 'listing-card'",
-        "resolved": "\"clip-edge-card\" | \"custom-card\" | \"hightlight-card\" | \"listing-card\" | \"lottie-card\" | \"simple-card\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Card Type\nSpecify Card Type, default to simple card"
-      },
-      "attribute": "card-type",
-      "reflect": false,
-      "defaultValue": "'custom-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"
-    },
-    "hasImage": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If this card has Image"
-      },
-      "attribute": "has-image",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "hasVideo": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If this card has Video"
-      },
-      "attribute": "has-video",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "hasLottie": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If this card has Lottie Image"
-      },
-      "attribute": "has-lottie",
-      "reflect": false,
-      "defaultValue": "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": false,
-      "docs": {
-        "tags": [],
-        "text": "Card heading text transform"
-      },
-      "attribute": "heading-transform",
-      "reflect": false,
-      "defaultValue": "'none'"
-    },
-    "cardDate": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Card Date"
-      },
-      "attribute": "card-date",
-      "reflect": false
-    },
-    "styles": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "(optional) Injected CSS styles"
-      },
-      "attribute": "styles",
-      "reflect": false
-    },
-    "ribbonText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Ribbon will show on listing card if this field has any value"
-      },
-      "attribute": "ribbon-text",
-      "reflect": false
-    }
-  }; }
-}
+import { Component, Prop, Host, h } from '@stencil/core';
+export class PtcCard {
+  constructor() {
+    /**
+     * Card Type
+     * Specify Card Type, default to simple card
+     */
+    this.cardType = 'custom-card';
+    /**
+     * Card Link URL (Optional)
+     */
+    this.cardHref = undefined;
+    /**
+     * (optional) Link card target
+     * */
+    this.target = '_self';
+    /**
+     *  (optional) Link card rel
+     * */
+    this.rel = undefined;
+    /**
+     * If this card has Image
+     */
+    this.hasImage = false;
+    /**
+     * If this card has Video
+     */
+    this.hasVideo = false;
+    /**
+     * If this card has Lottie Image
+     */
+    this.hasLottie = false;
+    /**
+     * Card heading text transform
+     */
+    this.headingTransform = 'none';
+  }
+  render() {
+    const Tag = !!this.cardHref ? 'a' : 'div';
+    const classMap = this.getCssClassMap();
+    return (h(Host, Object.assign({}, (!!this.cardType ? { class: this.cardType } : {})),
+      this.styles && h("style", null, this.styles),
+      h("div", { class: "card-border", part: "border-wrapper" },
+        h(Tag, Object.assign({ class: classMap, part: "card-layout" }, (!!this.cardHref ? { href: this.cardHref } : {}), (!!this.target && !!this.cardHref ? { target: this.target } : {}), (!!this.rel && !!this.cardHref ? { rel: this.rel } : {}), (!!this.ribbonText ? { rel: this.ribbonText } : {})),
+          this.hasImage || this.hasLottie || this.hasVideo ? (h("div", { class: "card-media", part: "media-wrapper" }, this.getMediaSlot ? h("slot", { name: this.getMediaSlot() }) : null)) : null,
+          !!this.ribbonText && this.cardType == 'listing-card' ? h("div", { class: "ribbon-text" }, `${this.ribbonText}`) : null,
+          h("div", { class: "card-body", part: "body-wrapper" },
+            !!this.cardDate && this.cardType === 'listing-card' ? h("ptc-date", { "date-string": `${this.cardDate}`, "date-styles": "span{font-weight: 400;font-size: 16px;line-height: 19px;color: #282F35;margin-bottom:24px;display:inline-block;}" }) : null,
+            h("slot", { name: "slot-before-heading" }),
+            !!this.heading
+              ? [
+                h("h3", { class: `ptc-h3 ${this.headingTransform}`, part: "card-heading" }, this.heading),
+                h("slot", { name: "slot-after-heading" }),
+              ]
+              : null,
+            h("slot", { name: "slot-description" }),
+            !!this.cardDate && this.cardType !== 'listing-card' && this.cardType !== 'hightlight-card' ? h("ptc-date", { "date-string": `${this.cardDate}`, "date-styles": "span{color:#40434a;font-size:var(--ptc-font-size-x-small);margin-top:var(--ptc-element-spacing-06);display:inline-block;}" }) : null)))));
+  }
+  getCssClassMap() {
+    return {
+      ['card-layout']: true,
+      ['link-wrapper']: !!this.cardType ? true : false,
+    };
+  }
+  getMediaSlot() {
+    if (this.hasLottie) {
+      return 'slot-lottie';
+    }
+    else if (this.hasVideo) {
+      return 'slot-video';
+    }
+    else if (this.hasImage) {
+      return 'slot-image';
+    }
+    else {
+      return null;
+    }
+  }
+  static get is() { return "ptc-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-card.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-card.css"]
+  }; }
+  static get properties() { return {
+    "cardType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'simple-card' | 'lottie-card' | 'custom-card' | 'clip-edge-card' | 'hightlight-card' | 'listing-card'",
+        "resolved": "\"clip-edge-card\" | \"custom-card\" | \"hightlight-card\" | \"listing-card\" | \"lottie-card\" | \"simple-card\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Card Type\r\nSpecify Card Type, default to simple card"
+      },
+      "attribute": "card-type",
+      "reflect": false,
+      "defaultValue": "'custom-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"
+    },
+    "hasImage": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If this card has Image"
+      },
+      "attribute": "has-image",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "hasVideo": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If this card has Video"
+      },
+      "attribute": "has-video",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "hasLottie": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If this card has Lottie Image"
+      },
+      "attribute": "has-lottie",
+      "reflect": false,
+      "defaultValue": "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": false,
+      "docs": {
+        "tags": [],
+        "text": "Card heading text transform"
+      },
+      "attribute": "heading-transform",
+      "reflect": false,
+      "defaultValue": "'none'"
+    },
+    "cardDate": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Card Date"
+      },
+      "attribute": "card-date",
+      "reflect": false
+    },
+    "styles": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "(optional) Injected CSS styles"
+      },
+      "attribute": "styles",
+      "reflect": false
+    },
+    "ribbonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Ribbon will show on listing card if this field has any value"
+      },
+      "attribute": "ribbon-text",
+      "reflect": false
+    }
+  }; }
+}