@ptcwebops/ptcw-design 4.3.6 → 4.3.8

package/dist/collection/components/ptc-homepage-video-background/ptc-homepage-video-background.css

@@ -166,10 +166,13 @@ ptc-link, ptc-square-card {
   left: 0;
   right: 0;
   bottom: 0;
-  transition: opacity var(--ptc-transition-medium) var(--ptc-ease-out);
   z-index: 8;
   opacity: 0;
 }
+.card-links .card-section .card-link .bgb,
+.card-links .card-section .card-link .bgh {
+  transition: opacity var(--ptc-transition-medium) var(--ptc-ease-out);
+}
 .card-links .card-section .card-link .bgb {
   background: linear-gradient(85deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.07) 100.13%);
   opacity: 1;
@@ -189,6 +192,7 @@ ptc-link, ptc-square-card {
 }
 .card-links .card-section .card-link:active .bgb,
 .card-links .card-section .card-link:active .bgh {
+  display: none;
   opacity: 0;
 }
 .card-links .card-section .card-link:active .bgp {

package/dist/collection/components/ptc-homepage-video-background/ptc-homepage-video-background.js

@@ -90,10 +90,10 @@ export class PtcHomepageVideoBackground {
     }
   }
   render() {
-    return (h(Host, null, h("ptc-preloader-section", { "section-type": 'home-video-background' }, h("ptc-background-video", Object.assign({}, this.getBackgroundVideoSettings(), { "overlay-type": 'dark' }), h("div", { class: "container" }, h("div", { class: "primary-content-wrapper" }, h("slot", { name: "primary-content" })), h("div", { class: "card-links" }, h("div", { class: "secondary-content-wrapper" }, h("slot", { name: "secondary-content" })), h("div", Object.assign({ class: "card-section" }, this.getSliderBindings()), this.links && this.links.map((link, i) => {
+    return (h(Host, null, h("ptc-background-video", Object.assign({}, this.getBackgroundVideoSettings(), { "overlay-type": 'dark' }), h("div", { class: "container" }, h("div", { class: "primary-content-wrapper" }, h("slot", { name: "primary-content" })), h("div", { class: "card-links" }, h("div", { class: "secondary-content-wrapper" }, h("slot", { name: "secondary-content" })), h("div", Object.assign({ class: "card-section" }, this.getSliderBindings()), this.links && this.links.map((link, i) => {
       const icon = link.getAttribute('data-icon');
       return (h("a", { class: `card-link card-link-${i + 1}`, "tab-index": i + 1, href: link.href, onClick: (e) => this.onLinkClick(e) }, h("div", { class: "bgb" }), h("div", { class: "bgh" }), h("div", { class: "bgp" }), icon && h("icon-asset", { type: "ptc", size: "large", color: 'white', name: icon }), h("span", { class: "link-text" }, link.textContent)));
-    }))))))));
+    })))))));
   }
   getBackgroundVideoSettings() {
     return {

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

@@ -95,7 +95,7 @@ ptc-link, ptc-square-card {
 :host(.media-card) .card-wrap .car-content {
   padding: 20px 30px 30px 30px;
 }
-:host(.media-card) .card-wrap .car-content h4,
+:host(.media-card) .card-wrap .car-content p,
 :host(.media-card) .card-wrap .car-content h3 {
   color: #fff;
 }
@@ -122,7 +122,7 @@ ptc-link, ptc-square-card {
   background-size: initial;
   top: -10px;
 }
-:host(.media-card) .card-wrap .car-content h4 {
+:host(.media-card) .card-wrap .car-content p {
   text-shadow: 1px 3px 30px var(--color-black);
   font-weight: var(--ptc-font-weight-semibold);
   display: block;

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

@@ -27,7 +27,7 @@ export class PtcMediaCard {
   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))),
+        h("div", { class: "card-wrap" }, h("div", { class: "car-content" }, h("p", null, this.category, " "), h("h3", null, this.heading))),
       ];
     }
   }

package/dist/collection/components/ptc-square-card/ptc-square-card.css

@@ -63,6 +63,20 @@ ptc-link, ptc-square-card {
   height: auto;
   width: 200px;
 }
+:host .card-border .before-icon-h3 {
+  line-height: var(--ptc-line-height-densest);
+  font-size: var(--ptc-font-size-x-small);
+  font-weight: var(--ptc-font-weight-semibold);
+  color: var(--color-gray-10);
+}
+:host .card-border .after-icon-p {
+  color: var(--color-gray-10);
+  line-height: var(--ptc-line-height-densest);
+  font-size: var(--ptc-font-size-x-small);
+  font-weight: var(--ptc-font-weight-semibold);
+  margin-top: 0;
+  margin-bottom: var(--ptc-element-spacing-05);
+}
 :host .square-padding {
   margin: var(--ptc-element-spacing-02);
 }

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

@@ -5639,7 +5639,7 @@ Credits to Dave Berning
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--color-gray-12);
+  background-color: rgba(78, 93, 102, 0.6);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -5667,14 +5667,14 @@ Credits to Dave Berning
 }
 .modal .modal-container {
   position: relative;
-  padding-top: 100px;
-  padding-bottom: 100px;
+  padding: 24px;
   height: 100vh;
   overflow-y: auto;
   overflow-x: hidden;
   color: var(--color-white);
   font-size: var(--ptc-font-size-small);
   line-height: var(--ptc-line-height-p);
+  background-color: var(--color-gray-12);
 }
 @media only screen and (min-width: 992px) {
   .modal .modal-container {
@@ -5698,12 +5698,17 @@ Credits to Dave Berning
     background-color: transparent;
   }
 }
+.modal .modal-container .vm-close-container {
+  width: 100%;
+  display: flex;
+  justify-content: right;
+  margin-bottom: 8px;
+}
 .modal .modal-container .vm-close {
-  position: absolute;
-  right: 24px;
-  top: 24px;
+  width: max-content;
   cursor: pointer;
-  padding: 10px;
+  padding: 8px;
+  transform: translateX(8px);
 }
 @media only screen and (min-width: 1200px) {
   .modal .modal-container .vm-close {
@@ -5764,29 +5769,27 @@ Credits to Dave Berning
   border-radius: 4px;
 }
 .modal.modal-only-video .modal-wrapper {
-  max-height: 80vh;
-  width: 90vw;
+  width: 100vw;
   position: relative;
+  padding: 40px;
+  background-color: var(--color-gray-12);
 }
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 992px) {
   .modal.modal-only-video .modal-wrapper {
     width: 75vw;
-    padding: 40px;
   }
 }
 .modal.modal-only-video .modal-wrapper .vm-close {
   position: absolute;
   right: 0;
-  top: -40px;
+  top: 0;
+  padding: var(--ptc-element-spacing-02);
   cursor: pointer;
-}
-@media only screen and (min-width: 768px) {
-  .modal.modal-only-video .modal-wrapper .vm-close {
-    right: 0;
-    top: 10px;
-  }
+  margin-right: var(--ptc-element-spacing-04);
+  margin-top: var(--ptc-element-spacing-04);
 }
 .modal.modal-only-video .modal-wrapper .aspect-ratio-container {
   width: 100%;
   height: 100%;
+  margin-top: 16px;
 }

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

@@ -75,7 +75,7 @@ export class PtcTheaterVideoModal {
   }
   render() {
     return (h(Host, null, h("slot", null), this.showModal &&
-      (this.modalType != 'only-video' ? (h("div", { class: "modal" }, h("div", { class: "modal-container ptc-container" }, h("div", { onClick: () => this.closeCardModal(), class: 'vm-close' }, 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" }, h("div", { class: "modal-wrapper" }, h("div", { onClick: () => this.closeCardModal(), class: 'vm-close' }, 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` })))))))));
+      (this.modalType != 'only-video' ? (h("div", { class: "modal" }, h("div", { class: "modal-container ptc-container" }, h("div", { class: "vm-close-container" }, h("div", { onClick: () => this.closeCardModal(), class: 'vm-close' }, 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" }, h("div", { class: "modal-wrapper" }, h("div", { onClick: () => this.closeCardModal(), class: 'vm-close' }, 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"; }