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

package/dist/esm/ptc-tab-list.entry.js

@@ -18,87 +18,90 @@ const PtcTabList = class {
   }
   componentWillLoad() {
     this.isMobile = window.innerWidth < 768;
-    this.isMobileTabWithBanner = window.innerWidth < 992 || screen.width < 992;
+    this.isMobileTabWithBanner =
+      window.innerWidth < 992 || screen.width < 992;
   }
   componentDidLoad() {
     this.createGroup();
     this.calculateHeaderTabsRendering();
     /*const [group] = this.tabGroup;
     this.selectGroup(group);*/
-    this.ellipsisDropdown = this.host.querySelector('ptc-ellipsis-dropdown');
-    this.ellipsisDropdown.addEventListener('keydown', this.onKeydown.bind(this));
-    const tabsHeaderEl = Array.from(this.host.querySelectorAll('tab-header'));
+    this.ellipsisDropdown = this.host.querySelector("ptc-ellipsis-dropdown");
+    this.ellipsisDropdown.addEventListener("keydown", this.onKeydown.bind(this));
+    const tabsHeaderEl = Array.from(this.host.querySelectorAll("tab-header"));
     tabsHeaderEl.forEach((tab, i) => {
-      if ((tabsHeaderEl.length - this.dropdownItemsCount) == (i + 1)) {
+      if (tabsHeaderEl.length - this.dropdownItemsCount == i + 1) {
         this.lastVisibleTab = tab;
       }
     });
   }
   onSelectedTab(event) {
     let self = this;
-    this.tabGroup.forEach(group => {
-      event.detail.then(res => {
+    this.tabGroup.forEach((group) => {
+      event.detail.then((res) => {
         if (group.header.name === res.name) {
           self.selectGroup(group);
           // Set the selected tab's tabindex to 0
-          group.header.el.setAttribute('tabindex', '0');
+          group.header.el.setAttribute("tabindex", "0");
           // Focus the selected tab
           group.header.el.focus();
         }
         else {
           // Set other tabs' tabindex to -1
-          group.header.el.setAttribute('tabindex', '-1');
+          group.header.el.setAttribute("tabindex", "-1");
         }
       });
     });
   }
   calculateHeaderTabsRendering() {
-    let header = this.host.querySelector('.tabs-header');
-    let dropdown = this.host.querySelector('.ellipsis-btn');
+    let header = this.host.querySelector(".tabs-header");
+    let dropdown = this.host.querySelector(".ellipsis-btn");
     let tabs = header.children;
     let activateDropDown = false;
     let hiddenTabs = [];
     this.isMobile = window.innerWidth < 768;
-    this.isMobileTabWithBanner = window.innerWidth < 992 || screen.width < 992;
-    header.classList.remove('active');
+    this.isMobileTabWithBanner =
+      window.innerWidth < 992 || screen.width < 992;
+    header.classList.remove("active");
     for (let index = 0; index < tabs.length; index++) {
-      tabs[index].style.removeProperty('display');
+      tabs[index].style.removeProperty("display");
     }
     for (let index = tabs.length - 1; index >= 0; index--) {
       let tab = tabs[index];
-      let isSelectedTab = tab.getAttribute('name') === this.selectedValue;
-      if ((this.isMobile && this.type != 'tab-with-banner') || (this.isMobileTabWithBanner && this.type === 'tab-with-banner')) {
-        let text = tab.querySelector('.text-cont').textContent;
-        header.style.display = 'none';
+      let isSelectedTab = tab.getAttribute("name") === this.selectedValue;
+      if ((this.isMobile && this.type != "tab-with-banner") ||
+        (this.isMobileTabWithBanner && this.type === "tab-with-banner")) {
+        let text = tab.querySelector(".text-cont").textContent;
+        header.style.display = "none";
         activateDropDown = true;
         hiddenTabs.push({
-          value: tab.getAttribute('name'),
+          value: tab.getAttribute("name"),
           text: text,
-          isSelected: isSelectedTab
+          isSelected: isSelectedTab,
         });
       }
       else {
-        header.style.display = 'flex';
+        header.style.display = "flex";
         if (header.scrollWidth > header.clientWidth) {
-          tab.style.display = 'none';
-          let text = tab.querySelector('.text-cont').textContent;
+          tab.style.display = "none";
+          let text = tab.querySelector(".text-cont").textContent;
           activateDropDown = true;
           hiddenTabs.push({
-            value: tab.getAttribute('name'),
+            value: tab.getAttribute("name"),
             text: text,
-            isSelected: isSelectedTab
+            isSelected: isSelectedTab,
           });
         }
       }
     }
-    header.classList.add('active');
+    header.classList.add("active");
     if (activateDropDown) {
-      dropdown.classList.add('active');
+      dropdown.classList.add("active");
       dropdown.dataItems = hiddenTabs.reverse();
       this.dropdownItemsCount = dropdown.dataItems.length;
     }
     else {
-      dropdown.classList.remove('active');
+      dropdown.classList.remove("active");
       dropdown.dataItems = [];
     }
   }
@@ -110,8 +113,8 @@ const PtcTabList = class {
     let contentCount = 0;
     let headerData = [];
     let contentData = [];
-    const tabsHeaderEl = Array.from(this.host.querySelectorAll('tab-header'));
-    this.tabsHeader = tabsHeaderEl.map(el => el.getChild().then(res => {
+    const tabsHeaderEl = Array.from(this.host.querySelectorAll("tab-header"));
+    this.tabsHeader = tabsHeaderEl.map((el) => el.getChild().then((res) => {
       headerCount++;
       if (headerCount === tabsHeaderEl.length) {
         headerComplete = true;
@@ -119,8 +122,8 @@ const PtcTabList = class {
       headerData.push(Object.assign(Object.assign({}, res), { el }));
     }));
     this.tabsHeader = headerData;
-    const tabsContentEl = Array.from(this.host.querySelectorAll('tab-content'));
-    this.tabsContent = tabsContentEl.map(el => el.getChild().then(res => {
+    const tabsContentEl = Array.from(this.host.querySelectorAll("tab-content"));
+    this.tabsContent = tabsContentEl.map((el) => el.getChild().then((res) => {
       contentCount++;
       if (contentCount === tabsContentEl.length) {
         contentComplete = true;
@@ -131,11 +134,11 @@ const PtcTabList = class {
     let myInterval = setInterval(() => {
       if (headerComplete && contentComplete) {
         clearInterval(myInterval);
-        self.tabGroup = self.tabsHeader.map(header => {
-          const content = self.tabsContent.find(content => content.name === header.name);
+        self.tabGroup = self.tabsHeader.map((header) => {
+          const content = self.tabsContent.find((content) => content.name === header.name);
           return {
             header: header,
-            content: content
+            content: content,
           };
         });
         const group = self.tabGroup[0];
@@ -143,29 +146,30 @@ const PtcTabList = class {
       }
     }, 3100); // Increased time interval from 100 to 3100 to fix the preload skeleton issue
     tabsHeaderEl.forEach((header, index) => {
-      header.setAttribute('id', 'tab-' + (index + 1));
-      header.setAttribute('role', 'tab');
-      header.setAttribute('aria-selected', index === 0 ? 'true' : 'false');
-      header.setAttribute('tabindex', index === 0 ? '0' : '-1'); // Set tabindex based on index
-      header.setAttribute('aria-controls', 'tab-panel-' + (index + 1));
-      header.addEventListener('keydown', this.onKeydown.bind(this));
+      header.setAttribute("id", "tab-" + (index + 1));
+      header.setAttribute("role", "tab");
+      header.setAttribute("aria-selected", index === 0 ? "true" : "false");
+      header.setAttribute("tabindex", index === 0 ? "0" : "-1"); // Set tabindex based on index
+      header.setAttribute("aria-controls", "tab-panel-" + (index + 1));
+      header.addEventListener("keydown", this.onKeydown.bind(this));
       if (!this.firstTab) {
         this.firstTab = header;
       }
       this.lastTab = header;
     });
     tabsContentEl.forEach((panel, index) => {
-      panel.setAttribute('id', 'tabpanel-' + (index + 1));
-      panel.setAttribute('role', 'tabpanel');
-      panel.setAttribute('aria-labelledby', 'tab-' + (index + 1));
+      panel.setAttribute("id", "tabpanel-" + (index + 1));
+      panel.setAttribute("role", "tabpanel");
+      panel.setAttribute("aria-labelledby", "tab-" + (index + 1));
     });
   }
   moveFocusToTab(currentTab) {
     currentTab.focus();
   }
   moveFocusToPreviousTab(currentTab) {
-    if (currentTab === this.firstTab || currentTab == this.ellipsisDropdown) {
-      this.ellipsisDropdown.setAttribute('tabindex', '-1');
+    if (currentTab === this.firstTab ||
+      currentTab == this.ellipsisDropdown) {
+      this.ellipsisDropdown.setAttribute("tabindex", "-1");
       if (this.dropdownItemsCount == 0) {
         this.moveFocusToTab(this.lastTab);
       }
@@ -173,28 +177,28 @@ const PtcTabList = class {
         this.moveFocusToTab(this.lastVisibleTab);
       }
       else {
-        this.ellipsisDropdown.setAttribute('tabindex', '0');
+        this.ellipsisDropdown.setAttribute("tabindex", "0");
         this.ellipsisDropdown.focus();
       }
     }
     else {
-      const index = this.tabsHeader.findIndex(tab => tab.el === currentTab);
+      const index = this.tabsHeader.findIndex((tab) => tab.el === currentTab);
       this.moveFocusToTab(this.tabsHeader[index - 1].el);
     }
   }
   moveFocusToNextTab(currentTab) {
-    this.ellipsisDropdown.setAttribute('tabindex', '-1');
+    this.ellipsisDropdown.setAttribute("tabindex", "-1");
     if (currentTab === this.lastTab || currentTab === this.lastVisibleTab) {
       if (this.dropdownItemsCount == 0) {
         this.moveFocusToTab(this.firstTab);
       }
       else {
-        this.ellipsisDropdown.setAttribute('tabindex', '0');
+        this.ellipsisDropdown.setAttribute("tabindex", "0");
         this.ellipsisDropdown.focus();
       }
     }
     else {
-      const index = this.tabsHeader.findIndex(tab => tab.el === currentTab);
+      const index = this.tabsHeader.findIndex((tab) => tab.el === currentTab);
       this.moveFocusToTab(this.tabsHeader[index + 1].el);
     }
   }
@@ -202,15 +206,15 @@ const PtcTabList = class {
     const currentTab = event.currentTarget;
     let flag = false;
     switch (event.key) {
-      case 'ArrowLeft':
+      case "ArrowLeft":
         this.moveFocusToPreviousTab(currentTab);
         flag = true;
         break;
-      case 'ArrowRight':
+      case "ArrowRight":
         this.moveFocusToNextTab(currentTab);
         flag = true;
         break;
-      case 'Escape':
+      case "Escape":
         this.closeDropdown();
         flag = true;
         break;
@@ -222,7 +226,7 @@ const PtcTabList = class {
   }
   async toggleTabGroup(name) {
     let self = this;
-    this.tabGroup.forEach(group => {
+    this.tabGroup.forEach((group) => {
       if (group.header.name === name) {
         self.selectGroup(group);
       }
@@ -230,7 +234,7 @@ const PtcTabList = class {
   }
   selectGroup(group) {
     let self = this;
-    self.tabGroup.forEach(_ => {
+    self.tabGroup.forEach((_) => {
       _.header.unselect();
       _.content.unselect();
     });
@@ -251,7 +255,11 @@ const PtcTabList = class {
     }
   }
   render() {
-    return (h(Host, { class: this.type }, h("div", { class: "tabs-header-container" }, h("div", { class: "tabs-header" }, h("slot", { name: "header" })), h("ptc-ellipsis-dropdown", { "dropdown-type": this.type, class: this.type == 'tab-with-banner' ? "ellipsis-btn tab-with-banner" : "ellipsis-btn default", onItemSelected: (e) => { this.onDropdownItemSelected(e.detail); } })), h("div", { class: "tabs-content" }, h("slot", { name: "content" }))));
+    return (h(Host, { class: this.type }, h("div", { class: "tabs-header-container" }, h("div", { class: "tabs-header" }, h("slot", { name: "header" })), h("ptc-ellipsis-dropdown", { "dropdown-type": this.type, class: this.type == "tab-with-banner"
+        ? "ellipsis-btn tab-with-banner"
+        : "ellipsis-btn default", onItemSelected: (e) => {
+        this.onDropdownItemSelected(e.detail);
+      } })), h("div", { class: "tabs-content" }, h("slot", { name: "content" }))));
   }
   get host() { return getElement(this); }
 };

package/dist/esm/ptc-tab.entry.js

@@ -17,8 +17,8 @@ const Tab = class {
   }
   getCssClassMap() {
     return {
-      ['ptc-pricing-block']: true,
-      ['active']: this.active ? true : false
+      ["ptc-pricing-block"]: true,
+      ["active"]: this.active ? true : false,
     };
   }
 };

package/dist/esm/ptc-tabs.entry.js

@@ -10,9 +10,9 @@ const Tabs = class {
   }
   componentWillLoad() {
     // Grab tabs from this component
-    this.tabs = Array.from(this.el.querySelectorAll('ptc-tab'));
+    this.tabs = Array.from(this.el.querySelectorAll("ptc-tab"));
     if (this.tabs.length === 0) {
-      throw new Error('[ptc-tabs] Must have at least one tab');
+      throw new Error("[ptc-tabs] Must have at least one tab");
     }
   }
   async openTab(index) {
@@ -33,18 +33,18 @@ const Tabs = class {
     const classMap = this.getCssClassMap();
     return (h("div", { class: classMap }, this.tabs.map((tab, index) => {
       const tabClassMap = {
-        'tab-button': true,
-        active: tab.active
+        "tab-button": true,
+        active: tab.active,
       };
       return [
         // assigned properties
-        h("div", { role: "tab", class: tabClassMap, onClick: () => this.openTab(index) }, tab.label, tab.price, h("div", { class: classMap }, h("span", { class: "left-text" }, h("slot", { name: "right-text" })), h("span", { class: "right-text" }, h("slot", { name: "right-text" }))))
+        h("div", { role: "tab", class: tabClassMap, onClick: () => this.openTab(index) }, tab.label, tab.price, h("div", { class: classMap }, h("span", { class: "left-text" }, h("slot", { name: "right-text" })), h("span", { class: "right-text" }, h("slot", { name: "right-text" })))),
       ];
     })));
   }
   getCssClassMap() {
     return {
-      'tabs-list': true
+      "tabs-list": true,
     };
   }
   get el() { return getElement(this); }

package/dist/esm/ptc-text-copy-with-background.entry.js

@@ -5,11 +5,11 @@ const ptcTextCopyWithBackgroundCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-t
 const PtcTextCopyWithBackground = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.type = 'text-copy-with-background';
+    this.type = "text-copy-with-background";
     this.backgroundImage = undefined;
     this.ImageAltText = undefined;
     this.topSlitBackgroundColor = undefined;
-    this.slitPosition = 'top-right';
+    this.slitPosition = "top-right";
     this.isBackgroundBlur = false;
     this.overlay = true;
     this.disableLightLinks = false;
@@ -18,13 +18,13 @@ const PtcTextCopyWithBackground = class {
   componentDidLoad() {
     var _a;
     // Run logic only if type is 'hero-footer-cta'
-    if (this.hostEle.getAttribute('type') === 'hero-footer-cta') {
-      const centerWell = document.querySelector('.center-well');
+    if (this.hostEle.getAttribute("type") === "hero-footer-cta") {
+      const centerWell = document.querySelector(".center-well");
       if (centerWell) {
-        const sectionCount = centerWell.querySelectorAll(':scope > section').length;
+        const sectionCount = centerWell.querySelectorAll(":scope > section").length;
         // Add class only if more than one <section> inside .center-well
         if (sectionCount > 1) {
-          (_a = this.hostEle.parentElement) === null || _a === void 0 ? void 0 : _a.classList.add('text-copy-footer-cta');
+          (_a = this.hostEle.parentElement) === null || _a === void 0 ? void 0 : _a.classList.add("text-copy-footer-cta");
         }
       }
     }
@@ -32,15 +32,10 @@ const PtcTextCopyWithBackground = class {
   render() {
     const classMap = this.getCssClassMap();
     const slitFill = this.getSlitFillColor();
-    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "tcb-top-slit", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179", style: { fill: slitFill } }, h("path", { id: "Path_8770", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "tcb-top-slit-cls-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" })), this.backgroundImage ?
-      h("div", { class: "" }, h("img", { class: "copy-bg-image", alt: this.ImageAltText, src: this.backgroundImage }), this.isBackgroundBlur &&
-        h("img", { class: "copy-bg-image bg-img-filter", alt: this.ImageAltText, src: this.backgroundImage }))
-      : null, this.overlay &&
-      h("div", { class: "copy-bg-overlay-layer" }), h("div", { class: "content-wrap" }, this.type == "case-studies" &&
-      h("div", { class: "ptc-container" }, h("div", { class: "card-wrap" }, h("div", { class: "card-animated-border" }), h("div", { class: "card-content" }, h("div", { class: "card-layout" }, h("slot", { name: 'card-content' }))))), h("slot", null))));
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "tcb-top-slit", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179", style: { fill: slitFill } }, h("path", { id: "Path_8770", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "tcb-top-slit-cls-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" })), this.backgroundImage ? (h("div", { class: "" }, h("img", { class: "copy-bg-image", alt: this.ImageAltText, src: this.backgroundImage }), this.isBackgroundBlur && (h("img", { class: "copy-bg-image bg-img-filter", alt: this.ImageAltText, src: this.backgroundImage })))) : null, this.overlay && h("div", { class: "copy-bg-overlay-layer" }), h("div", { class: "content-wrap" }, this.type == "case-studies" && (h("div", { class: "ptc-container" }, h("div", { class: "card-wrap" }, h("div", { class: "card-animated-border" }), h("div", { class: "card-content" }, h("div", { class: "card-layout" }, h("slot", { name: "card-content" })))))), h("slot", null))));
   }
   getSlitFillColor() {
-    let slitFill = '#fff';
+    let slitFill = "#fff";
     if (this.topSlitBackgroundColor == "auto") {
       let style = getComputedStyle(document.body);
       if (style && style.backgroundColor) {
@@ -56,8 +51,9 @@ const PtcTextCopyWithBackground = class {
     return {
       [this.type]: true,
       [this.slitPosition]: true,
-      ['light-links']: this.overlay && !this.disableLightLinks,
-      ['bg-image-absent']: !this.backgroundImage && this.type == "text-copy-with-background"
+      ["light-links"]: this.overlay && !this.disableLightLinks,
+      ["bg-image-absent"]: !this.backgroundImage &&
+        this.type == "text-copy-with-background",
     };
   }
   get hostEle() { return getElement(this); }

package/dist/esm/ptc-theater-video-modal.entry.js

@@ -22,13 +22,13 @@ const PtcTheaterVideoModal = class {
     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(() => {
@@ -42,7 +42,7 @@ const PtcTheaterVideoModal = class {
         onDeactivate: () => {
           this.closeCardModal();
           this.trap.deactivate();
-        }
+        },
       });
       this.trap.activate();
     }, 200);
@@ -51,7 +51,7 @@ const PtcTheaterVideoModal = class {
     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);
   }
@@ -82,25 +82,33 @@ const PtcTheaterVideoModal = class {
   }
   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` })))))))));
   }
   get hostEl() { return getElement(this); }
 };