@ptcwebops/ptcw-design 2.7.4 → 2.7.6

package/dist/collection/components/ptc-theater-video/ptc-theater-video.js

@@ -0,0 +1,140 @@
+import { h, Host } from '@stencil/core';
+export class PtcTheaterVideo {
+  constructor() {
+    this.cardTitle = undefined;
+    this.cardDescription = undefined;
+    this.thumbImg = undefined;
+    this.cardNumber = undefined;
+    this.videoId = undefined;
+    this.vtagName = undefined;
+  }
+  render() {
+    return (h(Host, { "video-id": this.videoId, "vtag-name": this.vtagName }, h("div", { class: "img-wrap", onClick: () => this.showCardDetails() }, h("img", { src: this.thumbImg, alt: "" }), h("span", { class: 'card-number' }, this.cardNumber + 1), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "54", height: "56", viewBox: "0 0 54 56", fill: "none" }, h("g", { filter: "url(#filter0_d_214_969)" }, h("path", { d: "M42 20L12 36V4L42 20Z", fill: "white" })), h("defs", null, h("filter", { id: "filter0_d_214_969", x: "0", y: "0", width: "54", height: "56", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "s-rGB" }, h("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feOffset", { dy: "8" }), h("feGaussianBlur", { stdDeviation: "6" }), h("feComposite", { in2: "hardAlpha", operator: "out" }), h("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" }), h("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_214_969" }), h("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_214_969", result: "shape" }))))), h("h4", { class: 'vcard-title' }, this.cardTitle), h("div", { class: "hidden description" }, h("slot", null))));
+  }
+  showCardDetails() {
+    // Emit a custom event to signal that the card was clicked
+    const cardClickEvent = new CustomEvent('cardClicked', {
+      detail: this.cardTitle,
+    });
+    this.ele.dispatchEvent(cardClickEvent);
+  }
+  static get is() { return "ptc-theater-video"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-theater-video.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-theater-video.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cardTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "card-title",
+        "reflect": false
+      },
+      "cardDescription": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "card-description",
+        "reflect": false
+      },
+      "thumbImg": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "thumb-img",
+        "reflect": false
+      },
+      "cardNumber": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "card-number",
+        "reflect": false
+      },
+      "videoId": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "video-id",
+        "reflect": false
+      },
+      "vtagName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "vtag-name",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "ele"; }
+}