npm - @ptcwebops/ptcw-design - Versions diffs - 3.3.9 → 3.4.0 - Mend

@@ -82,7 +82,7 @@ export class PtcEmbeddedQuiz {
         default: return null;
       }
     };
-    return (h(Host, null, this.quiz && h("div", { class: "quiz-slide-container" }, h("div", { class: "quiz-slide-background" }), getQuizSlide())));
+    return (h(Host, null, this.quiz && h("div", { class: "quiz-slide-container" }, h("div", { class: "quiz-slide-background" }), h("slot", { name: "seo-content" }), getQuizSlide())));
   }
   static get is() { return "ptc-embedded-quiz"; }
   static get encapsulation() { return "shadow"; }

@@ -1111,8 +1111,8 @@ a.disabled {
   grid-template-rows: auto 1fr;
   grid-column-gap: 0px;
   grid-row-gap: 0px;
-  position: unset;
-  z-index: 999;
+  position: relative;
+  z-index: 1;
 }
 .div1 {

@@ -26,6 +26,9 @@
   display: none;
 }
+:host(.media-card) ::slotted([slot=seo-content]) {
+  display: none;
+}
 :host(.media-card) .card-wrap {
   display: flex;
   height: 100%;

@@ -28,13 +28,6 @@ export class PtcMediaCard {
         h("div", { class: "card-wrap" }, h("div", { class: "car-content" }, h("h4", null, this.category, " "), h("h3", null, this.heading))),
       ];
     }
-    // else if (this.cardType === 'bureau-card') {
-    //   return (
-    //     <div class="card-content">
-    //       <slot name="bureau-description"></slot>
-    //     </div>
-    //   );
-    // }
   }
   render() {
     const Tag = !!this.cardHref ? 'a' : 'div';
@@ -45,7 +38,7 @@ export class PtcMediaCard {
       // {...(!isVideoUrl
       //   ? { ...{ style: this.isHovered ? { backgroundImage: `url(${this.hoverBackgroundImage})` } : { backgroundImage: `url(${this.activeBackgroundImage})` } } }
       //   : null)}
-      style: this.isHovered ? { backgroundImage: `url(${this.hoverBackgroundImage})` } : { backgroundImage: `url(${this.activeBackgroundImage})` } }, h(Tag, { class: 'anchor-wrap', target: this.target, href: this.cardHref, rel: this.rel }, isVideoUrl && (h("video", { muted: true, loop: true, playsinline: true, poster: this.activeBackgroundImage, ref: el => (this.videoEle = el), style: this.isHovered ? { display: 'block' } : { display: 'none' } }, h("source", { src: this.hoverBackgroundImage, type: "video/mp4" }, "Your browser does not support the video tag."))), this.cardType === "media-card" && h("ptc-overlay", { "filter-color": "black-2" }), this.cardType === "media-card" && this.getCardText())));
+      style: this.isHovered ? { backgroundImage: `url(${this.hoverBackgroundImage})` } : { backgroundImage: `url(${this.activeBackgroundImage})` } }, h("slot", { name: "seo-content" }), h(Tag, { class: 'anchor-wrap', target: this.target, href: this.cardHref, rel: this.rel }, isVideoUrl && (h("video", { muted: true, loop: true, playsinline: true, poster: this.activeBackgroundImage, ref: el => (this.videoEle = el), style: this.isHovered ? { display: 'block' } : { display: 'none' } }, h("source", { src: this.hoverBackgroundImage, type: "video/mp4" }, "Your browser does not support the video tag."))), this.cardType === "media-card" && h("ptc-overlay", { "filter-color": "black-2" }), this.cardType === "media-card" && this.getCardText())));
   }
   getCssClassMap() {
     return {

@@ -5522,6 +5522,9 @@ Credits to Dave Berning
   display: block;
   padding: 2rem 0;
 }
+:host ::slotted([slot=seo-content]) {
+  display: none;
+}
 :host .flex-col {
   display: flex;
   align-items: center;

@@ -6,7 +6,7 @@ export class PtcPodcastCard {
     this.altText = undefined;
   }
   render() {
-    return (h(Host, null, h("div", { class: "is-grid has-col-gap-lg" }, h("div", { class: "is-col is-col-4-md flex-col" }, h("div", { class: 'img-wrap' }, h("img", { src: this.imageSrc, class: "first-img", alt: this.altText }), h("span", { class: "second" }, h("img", { src: this.imageSrc, class: "second-img", alt: this.altText })), h("span", { class: "third" }, h("img", { src: this.imageSrc, class: "third-img", alt: this.altText })))), h("div", { class: "is-col is-col-8-md flex-col" }, h("div", { class: 'content-wrap' }, h("ptc-title", { type: "h3", "text-align": "left", "title-size": "large", "title-color": "gray", upperline: "no-upperline", "title-display": "block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7" }, this.heading), h("slot", null))))));
+    return (h(Host, null, h("div", { class: "is-grid has-col-gap-lg" }, h("div", { class: "is-col is-col-4-md flex-col" }, h("div", { class: 'img-wrap' }, h("img", { src: this.imageSrc, class: "first-img", alt: this.altText }), h("span", { class: "second" }, h("img", { src: this.imageSrc, class: "second-img", alt: this.altText })), h("span", { class: "third" }, h("img", { src: this.imageSrc, class: "third-img", alt: this.altText })))), h("div", { class: "is-col is-col-8-md flex-col" }, h("div", { class: 'content-wrap' }, h("ptc-title", { type: "h3", "text-align": "left", "title-size": "large", "title-color": "gray", upperline: "no-upperline", "title-display": "block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7" }, this.heading), h("slot", { name: "seo-content" }), h("slot", null))))));
   }
   static get is() { return "ptc-podcast-card"; }
   static get encapsulation() { return "shadow"; }

@@ -2,6 +2,9 @@
   display: block;
   background-color: transparent;
 }
+:host ::slotted([slot=seo-content]) {
+  display: none;
+}
 :host .card-border {
   height: auto;
   width: 200px;

@@ -5,7 +5,7 @@ export class PtcSquareCard {
     this.arrowDirection = undefined;
   }
   render() {
-    return (h(Host, null, h("div", { class: "card-border square-padding card-layout" }, h("slot", { name: "before-icon" }), h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "icon-block" }, !!this.arrowDirection ? (h("icon-asset", Object.assign({ class: "icon" }, (this.arrowDirection === 'up' ? { name: 'arrow_ascending' } : { name: 'arrow_descending' }), { type: "ptc" }, !this.number ? { size: 'xxx-large' } : { size: 'xx-large' }, { color: "ptc-green" }))) : null, !!this.number ? h("div", { class: "number" }, this.number) : null), h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("slot", { name: "after-icon" }))));
+    return (h(Host, null, h("div", { class: "card-border square-padding card-layout" }, h("slot", { name: "seo-content" }), h("slot", { name: "before-icon" }), h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "icon-block" }, !!this.arrowDirection ? (h("icon-asset", Object.assign({ class: "icon" }, (this.arrowDirection === 'up' ? { name: 'arrow_ascending' } : { name: 'arrow_descending' }), { type: "ptc" }, !this.number ? { size: 'xxx-large' } : { size: 'xx-large' }, { color: "ptc-green" }))) : null, !!this.number ? h("div", { class: "number" }, this.number) : null), h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("slot", { name: "after-icon" }))));
   }
   static get is() { return "ptc-square-card"; }
   static get encapsulation() { return "shadow"; }

@@ -582,4 +582,12 @@ div.block h4,
 div.block h5,
 div.block h6 {
   display: block;
+}
+:host {
+  word-break: break-word;
+  -webkit-hyphens: manual;
+  -moz-hyphens: manual;
+  -ms-hyphens: manual;
+  hyphens: manual;
 }

@@ -39,4 +39,8 @@
 }
 .tab-header-selected::after {
   background-color: var(--color-green-07);
+}
+.tab-header ::slotted([slot=seo-content]), .tab-header-selected ::slotted([slot=seo-content]) {
+  display: none;
 }

@@ -58,7 +58,7 @@ export class TabHeader {
       'tab-header-selected': this.isSelected
     };
     return [
-      h("h2", { class: classes, onClick: this.onClick.bind(this) }, h("span", { class: "header-content" }, h("span", { class: "text-cont" }, this.tabHeaderText))),
+      h("h2", { class: classes, onClick: this.onClick.bind(this) }, h("slot", { name: "seo-content" }), h("span", { class: "header-content" }, h("span", { class: "text-cont" }, this.tabHeaderText))),
     ];
   }
   static get is() { return "tab-header"; }

@ptcwebops/ptcw-design 3.3.9 → 3.4.0