@ptcwebops/ptcw-design 6.3.66-beta → 6.3.68-beta

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

@@ -1,5 +1,5 @@
-import { Host, h } from '@stencil/core';
-import { createFocusTrap } from 'focus-trap';
+import { Host, h, } from "@stencil/core";
+import { createFocusTrap } from "focus-trap";
 export class PtcTheaterVideoModal {
   constructor() {
     this.cards = undefined;
@@ -17,13 +17,13 @@ export class PtcTheaterVideoModal {
     this.modalType = this.cards[this.currentCardIndex].modalType;
     this.showModal = true;
     setTimeout(() => {
-      const closebtn = this.hostEl.querySelector('.vm-close');
+      const closebtn = this.hostEl.querySelector(".vm-close");
       closebtn === null || closebtn === void 0 ? void 0 : closebtn.focus();
-      const modalDescWrap = this.hostEl.querySelector('.video-modal-description');
+      const modalDescWrap = this.hostEl.querySelector(".video-modal-description");
       if (modalDescWrap) {
         modalDescWrap.scrollHeight > modalDescWrap.clientHeight
-          ? modalDescWrap.setAttribute('tabindex', '0')
-          : modalDescWrap.removeAttribute('tabindex');
+          ? modalDescWrap.setAttribute("tabindex", "0")
+          : modalDescWrap.removeAttribute("tabindex");
       }
     }, 200);
     setTimeout(() => {
@@ -37,7 +37,7 @@ export class PtcTheaterVideoModal {
         onDeactivate: () => {
           this.closeCardModal();
           this.trap.deactivate();
-        }
+        },
       });
       this.trap.activate();
     }, 200);
@@ -46,7 +46,7 @@ export class PtcTheaterVideoModal {
     this.showModal = false;
     this.cards = [];
     setTimeout(() => {
-      let focusDiv = this.focusCardElement.querySelector('.img-wrap');
+      let focusDiv = this.focusCardElement.querySelector(".img-wrap");
       focusDiv === null || focusDiv === void 0 ? void 0 : focusDiv.focus();
     }, 200);
   }
@@ -77,25 +77,33 @@ export class PtcTheaterVideoModal {
   }
   updateVideoPlayer(vId) {
     // debugger
-    globalThis.videojs.getPlayer('bcPlayer').ready(function () {
+    globalThis.videojs.getPlayer("bcPlayer").ready(function () {
       const myPlayer = this;
       if (vId) {
         myPlayer.catalog.getVideo(vId, function (error, video) {
           myPlayer.catalog.load(video);
-          console.log('Video Modal' + error);
+          console.log("Video Modal" + error);
         });
       }
     });
   }
   render() {
     return (h(Host, null, h("slot", null), this.showModal &&
-      (this.modalType != 'only-video' ? (h("div", { class: "modal", ref: el => (this.modalPopUpRef = el) }, h("div", { class: "modal-container ptc-container" }, h("div", { class: "vm-close-container" }, h("div", { onClick: () => this.closeCardModal(), class: 'vm-close mf-listen', tabIndex: 0, onKeyDown: (e) => {
-          if (e.key === 'Enter')
+      (this.modalType != "only-video" ? (h("div", { class: "modal", ref: (el) => (this.modalPopUpRef = el) }, h("div", { class: "modal-container ptc-container" }, h("div", { class: "vm-close-container" }, h("div", { onClick: () => this.closeCardModal(), class: "vm-close mf-listen", tabIndex: 0, onKeyDown: (e) => {
+          if (e.key === "Enter")
             this.closeCardModal();
-        } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, h("g", { "clip-path": "url(#clip0_214_927)" }, h("path", { d: "M18 2.8125L15.1875 0L9 6.1875L2.8125 0L0 2.8125L6.1875 9L0 15.1875L2.8125 18L9 11.8125L15.1875 18L18 15.1875L11.8125 9L18 2.8125Z", fill: "white" })), h("defs", null, h("clipPath", { id: "clip0_214_927" }, h("rect", { width: "18", height: "18", fill: "white" })))))), h("div", { class: "is-grid has-col-gap-xl has-row-gap-lg" }, h("div", { class: 'is-col is-col-7-lg' }, h("div", { class: "v-modal-left" }, h("div", { class: 'v-nav' }, h("button", { onClick: () => this.showPrevCard(), disabled: this.currentCardIndex === 0 }, "Previous Video"), h("div", { class: 'v-number' }, ' ', this.currentCardIndex + 1, " of ", this.cards.length), h("button", { onClick: () => this.showNextCard(), disabled: this.currentCardIndex === this.cards.length - 1 }, "Next Video")), h("div", { class: 'aspect-ratio-container ' }, h("div", { class: 'video-container' }, h("video-js", { id: "bcPlayer", "data-account": "1532789042001", "data-player": "HknUe20R", "data-embed": "default", "data-video-id": this.cards[this.currentCardIndex].videoId, controls: "", "data-application-id": "", class: `dpm-vj-${this.currentCardIndex}   video-js    vjs-fills` }))), h("div", { class: "card-description-content" }, h("ptc-title", { type: "h3", "title-size": "large", "title-color": "white", upperline: "no-upperline", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", styles: ".is-standard{margin-top:14px !important}" }, this.cards[this.currentCardIndex].title), h("ptc-para", { "font-size": "medium", "font-weight": "w-4", "para-color": "white", "para-margin": "margin-3", "para-line-h": "line-height-p", innerHTML: this.cards[this.currentCardIndex].cardDescription })))), h("div", { class: 'is-col is-col-5-lg' }, h("div", { class: "video-modal-description" }, h("div", { innerHTML: this.cards[this.currentCardIndex].descriptionModal }))))))) : (h("div", { class: "modal modal-only-video", ref: el => (this.modalPopUpRef = el) }, h("div", { class: "modal-wrapper" }, h("div", { onClick: () => this.closeCardModal(), class: 'vm-close mf-listen', tabIndex: 0, onKeyDown: (e) => {
-          if (e.key === 'Enter')
+        } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, h("g", { "clip-path": "url(#clip0_214_927)" }, h("path", { d: "M18 2.8125L15.1875 0L9 6.1875L2.8125 0L0 2.8125L6.1875 9L0 15.1875L2.8125 18L9 11.8125L15.1875 18L18 15.1875L11.8125 9L18 2.8125Z", fill: "white" })), h("defs", null, h("clipPath", { id: "clip0_214_927" }, h("rect", { width: "18", height: "18", fill: "white" })))))), h("div", { class: "is-grid has-col-gap-xl has-row-gap-lg" }, h("div", { class: "is-col is-col-7-lg" }, h("div", { class: "v-modal-left" }, h("div", { class: "v-nav" }, h("button", { onClick: () => this.showPrevCard(), disabled: this
+          .currentCardIndex ===
+          0 }, "Previous Video"), h("div", { class: "v-number" }, " ", this.currentCardIndex +
+        1, " ", "of ", this.cards.length), h("button", { onClick: () => this.showNextCard(), disabled: this
+          .currentCardIndex ===
+          this.cards.length - 1 }, "Next Video")), h("div", { class: "aspect-ratio-container " }, h("div", { class: "video-container" }, h("video-js", { id: "bcPlayer", "data-account": "1532789042001", "data-player": "HknUe20R", "data-embed": "default", "data-video-id": this.cards[this
+          .currentCardIndex].videoId, controls: "", "data-application-id": "", class: `dpm-vj-${this.currentCardIndex}   video-js    vjs-fills` }))), h("div", { class: "card-description-content" }, h("ptc-title", { type: "h3", "title-size": "large", "title-color": "white", upperline: "no-upperline", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", styles: ".is-standard{margin-top:14px !important}" }, this.cards[this
+        .currentCardIndex].title), h("ptc-para", { "font-size": "medium", "font-weight": "w-4", "para-color": "white", "para-margin": "margin-3", "para-line-h": "line-height-p", innerHTML: this.cards[this
+          .currentCardIndex].cardDescription })))), h("div", { class: "is-col is-col-5-lg" }, h("div", { class: "video-modal-description" }, h("div", { innerHTML: this.cards[this.currentCardIndex].descriptionModal }))))))) : (h("div", { class: "modal modal-only-video", ref: (el) => (this.modalPopUpRef = el) }, h("div", { class: "modal-wrapper" }, h("div", { onClick: () => this.closeCardModal(), class: "vm-close mf-listen", tabIndex: 0, onKeyDown: (e) => {
+          if (e.key === "Enter")
             this.closeCardModal();
-        } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, h("g", { "clip-path": "url(#clip0_214_927)" }, h("path", { d: "M18 2.8125L15.1875 0L9 6.1875L2.8125 0L0 2.8125L6.1875 9L0 15.1875L2.8125 18L9 11.8125L15.1875 18L18 15.1875L11.8125 9L18 2.8125Z", fill: "white" })), h("defs", null, h("clipPath", { id: "clip0_214_927" }, h("rect", { width: "18", height: "18", fill: "white" }))))), h("div", { class: 'aspect-ratio-container ' }, h("div", { class: 'video-container' }, h("video-js", { id: "bcPlayer", "data-account": "1532789042001", "data-player": "HknUe20R", "data-embed": "default", "data-video-id": this.cards[this.currentCardIndex].videoId, controls: "", "data-application-id": "", class: `dpm-vj-${this.currentCardIndex}   video-js    vjs-fills` })))))))));
+        } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, h("g", { "clip-path": "url(#clip0_214_927)" }, h("path", { d: "M18 2.8125L15.1875 0L9 6.1875L2.8125 0L0 2.8125L6.1875 9L0 15.1875L2.8125 18L9 11.8125L15.1875 18L18 15.1875L11.8125 9L18 2.8125Z", fill: "white" })), h("defs", null, h("clipPath", { id: "clip0_214_927" }, h("rect", { width: "18", height: "18", fill: "white" }))))), h("div", { class: "aspect-ratio-container " }, h("div", { class: "video-container" }, h("video-js", { id: "bcPlayer", "data-account": "1532789042001", "data-player": "HknUe20R", "data-embed": "default", "data-video-id": this.cards[this.currentCardIndex].videoId, controls: "", "data-application-id": "", class: `dpm-vj-${this.currentCardIndex}   video-js    vjs-fills` })))))))));
   }
   static get is() { return "ptc-theater-video-modal"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/ptc-theater-video-playlist/ptc-theater-video-playlist.css

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export class PtcTheaterVideoPlaylist {
   constructor() {
     this.cards = [];
@@ -7,15 +7,15 @@ export class PtcTheaterVideoPlaylist {
     this.cardElements = undefined;
   }
   componentWillLoad() {
-    this.cardElements = this.host.querySelectorAll('ptc-theater-video');
+    this.cardElements = this.host.querySelectorAll("ptc-theater-video");
   }
   componentDidLoad() {
     this.setupCards();
-    this.sortCards('');
+    this.sortCards("");
   }
   handleFilterClick(event) {
     const filters = event.detail;
-    this.filteredTagName = filters['selected-tag'];
+    this.filteredTagName = filters["selected-tag"];
     this.sortCards(this.filteredTagName);
     //this.updateCardData(filters.cardNumber)
   }
@@ -26,36 +26,39 @@ export class PtcTheaterVideoPlaylist {
   sortCards(filterVideo) {
     this.cardElements.forEach((cardElement) => {
       let tagNames;
-      if (cardElement.getAttribute('vtag-name')) {
-        tagNames = cardElement.getAttribute('vtag-name').split(",").map((item) => {
+      if (cardElement.getAttribute("vtag-name")) {
+        tagNames = cardElement
+          .getAttribute("vtag-name")
+          .split(",")
+          .map((item) => {
           return item.trim();
         });
       }
       const trimFilterVideo = filterVideo.trim();
-      if (trimFilterVideo !== "" && trimFilterVideo !== 'reset') {
+      if (trimFilterVideo !== "" && trimFilterVideo !== "reset") {
         if (tagNames.includes(trimFilterVideo)) {
-          cardElement.classList.add('show');
-          cardElement.classList.remove('hide');
+          cardElement.classList.add("show");
+          cardElement.classList.remove("hide");
         }
         else {
-          cardElement.classList.add('hide');
-          cardElement.classList.remove('show');
+          cardElement.classList.add("hide");
+          cardElement.classList.remove("show");
         }
       }
       else {
-        cardElement.classList.add('show');
-        cardElement.classList.remove('hide');
+        cardElement.classList.add("show");
+        cardElement.classList.remove("hide");
       }
     });
   }
   setupCards() {
     this.cardElements.forEach((cardElement, index) => {
       this.cards.push(this.setCardData(cardElement, index));
-      cardElement.addEventListener('click', () => {
+      cardElement.addEventListener("click", () => {
         this.showCardDetails(index, cardElement);
       });
-      cardElement.addEventListener('keydown', (e) => {
-        if (e.key === 'Enter') {
+      cardElement.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
           this.showCardDetails(index, cardElement);
         }
       });
@@ -65,37 +68,43 @@ export class PtcTheaterVideoPlaylist {
     // debugger
     this.cards = [];
     this.cardElements.forEach((cardElement, index) => {
-      const tagNames = cardElement.getAttribute('vtag-name').split(",").map((item) => {
+      const tagNames = cardElement
+        .getAttribute("vtag-name")
+        .split(",")
+        .map((item) => {
         return item.trim();
       });
-      if (this.filteredTagName !== "" && this.filteredTagName !== 'reset' && this.filteredTagName !== undefined && tagNames.includes(this.filteredTagName)) {
+      if (this.filteredTagName !== "" &&
+        this.filteredTagName !== "reset" &&
+        this.filteredTagName !== undefined &&
+        tagNames.includes(this.filteredTagName)) {
         this.cards.push(this.setCardData(cardElement, index));
-        cardElement.addEventListener('click', () => {
+        cardElement.addEventListener("click", () => {
           this.showCardDetails(cardNumber);
         });
       }
-      else if (this.filteredTagName === 'reset') {
+      else if (this.filteredTagName === "reset") {
         this.cards.push(this.setCardData(cardElement, index));
       }
     });
   }
   setCardData(cardElement, index) {
     const cardData = {
-      title: cardElement.querySelector('.vcard-title').textContent,
+      title: cardElement.querySelector(".vcard-title").textContent,
       cardDescription: cardElement.cardDescription,
-      descriptionModal: cardElement.querySelector('.description').innerHTML,
-      videoId: cardElement.getAttribute('video-id'),
-      vtagName: cardElement.getAttribute('vtag-name'),
-      cardNumber: cardElement.getAttribute('card-number'),
+      descriptionModal: cardElement.querySelector(".description").innerHTML,
+      videoId: cardElement.getAttribute("video-id"),
+      vtagName: cardElement.getAttribute("vtag-name"),
+      cardNumber: cardElement.getAttribute("card-number"),
       index: index,
-      modalType: cardElement.getAttribute('modal-type')
+      modalType: cardElement.getAttribute("modal-type"),
     };
     return cardData;
   }
   showCardDetails(index, cardElement) {
     this.currentCardIndex = index;
     // this.showModal = true;
-    const modalElement = document.querySelector('ptc-theater-video-modal');
+    const modalElement = document.querySelector("ptc-theater-video-modal");
     if (modalElement) {
       modalElement.updateData(this.cards, this.currentCardIndex, cardElement);
     }

package/dist/collection/components/ptc-title/ptc-title.css

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */