@ptcwebops/ptcw-design 6.2.16-beta → 6.2.17-beta

package/dist/collection/components/organism-bundles/event-podcast-slider-example/event-podcast-slider-example.js

@@ -0,0 +1,80 @@
+import { Host, h } from '@stencil/core';
+import Swiper, { Navigation, Pagination, Scrollbar, Mousewheel } from 'swiper';
+export class EventPodcastSliderExample {
+  constructor() {
+    this.sliderType = 'event-slider-cards';
+  }
+  componentDidLoad() {
+    setTimeout(() => {
+      let list = this.el.querySelector('.event-slider-cards');
+      this.listSwp = new Swiper(list, {
+        // Customize options here
+        modules: [Navigation, Pagination, Scrollbar, Mousewheel],
+        slidesPerView: 'auto',
+        spaceBetween: 24,
+        centeredSlides: true,
+        centeredSlidesBounds: true,
+        initialSlide: 0,
+        centerInsufficientSlides: true,
+        freeMode: true,
+        scrollbar: {
+          el: this.swiperPaginationRef,
+          draggable: true,
+        },
+        navigation: {
+          nextEl: this.swiperButtonNextRef,
+          prevEl: this.swiperButtonPrevRef,
+        },
+        mousewheel: {
+          forceToAxis: true,
+          sensitivity: 100,
+        },
+        breakpoints: {
+          1200: {
+            spaceBetween: 32,
+          },
+          1400: {
+            spaceBetween: 40,
+          }
+        }
+      });
+    }, 100);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "event-slider-cards" }, h("div", { class: "swiper-wrapper" }, h("slot", null)), h("div", { class: "swiper-scrollbar", ref: el => (this.swiperPaginationRef = el) }), h("div", { class: "swiper-button-next", ref: el => (this.swiperButtonNextRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { class: "swiper-button-prev", ref: el => (this.swiperButtonPrevRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))))));
+  }
+  static get is() { return "event-podcast-slider-example"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["event-podcast-slider-example.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["event-podcast-slider-example.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "sliderType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'homepage-case-study-cards' | 'event-slider-cards'",
+          "resolved": "\"event-slider-cards\" | \"homepage-case-study-cards\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "slider-type",
+        "reflect": false,
+        "defaultValue": "'event-slider-cards'"
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}

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

@@ -11,6 +11,9 @@ export class PtcCardBottom {
       this.el.previousElementSibling.classList.add('mouse-hover');
       this.el.classList.add('mouse-hover-card-bottom');
     }
+    if (this.el.classList.contains('event-podcast')) {
+      this.addClassOnDefaultSlot();
+    }
   }
   leaveEventHandler() {
     this.hoverEvent.emit();
@@ -19,6 +22,24 @@ export class PtcCardBottom {
       this.el.previousElementSibling.classList.remove('mouse-hover');
       this.el.classList.remove('mouse-hover-card-bottom');
     }
+    if (this.el.classList.contains('event-podcast')) {
+      this.removeClassOnDefaultSlot();
+    }
+  }
+  async addClassOnDefaultSlot() {
+    const slot = this.el.shadowRoot.querySelector('slot:not([name])');
+    console.log('slot: ' + slot);
+    const assignedElements = slot.assignedElements();
+    assignedElements.forEach((ele) => {
+      !ele.classList.contains('event-podcast') && ele.classList.add('event-podcast');
+    });
+  }
+  async removeClassOnDefaultSlot() {
+    const slot = this.el.shadowRoot.querySelector('slot:not([name])');
+    const assignedElements = slot.assignedElements();
+    assignedElements.forEach((ele) => {
+      ele.classList.contains('event-podcast') && ele.classList.remove('event-podcast');
+    });
   }
   render() {
     const classMap = this.getCssClassMap();
@@ -47,8 +68,8 @@ export class PtcCardBottom {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'card-video' | 'card-tall' | 'card-2up' | 'card-wide' | 'card-playlist' | 'extra-tall' | 'color-outlined'| 'most-popular'",
-          "resolved": "\"card-2up\" | \"card-playlist\" | \"card-tall\" | \"card-video\" | \"card-wide\" | \"color-outlined\" | \"extra-tall\" | \"most-popular\"",
+          "original": "'card-video' | 'card-tall' | 'card-2up' | 'card-wide' | 'card-playlist' | 'extra-tall' | 'color-outlined'| 'most-popular'| 'event-podcast'",
+          "resolved": "\"card-2up\" | \"card-playlist\" | \"card-tall\" | \"card-video\" | \"card-wide\" | \"color-outlined\" | \"event-podcast\" | \"extra-tall\" | \"most-popular\"",
           "references": {}
         },
         "required": false,
@@ -112,5 +133,47 @@ export class PtcCardBottom {
         }
       }];
   }
+  static get methods() {
+    return {
+      "addClassOnDefaultSlot": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLSlotElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "removeClassOnDefaultSlot": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLSlotElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "el"; }
 }

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

@@ -17,6 +17,10 @@ export class PtcCardContent {
         this.el.nextElementSibling.classList.add('mouse-hover-card-bottom');
       }
     }
+    if (this.el.classList.contains('event-podcast')) {
+      const bottomComponent = this.el.nextElementSibling;
+      bottomComponent.addClassOnDefaultSlot();
+    }
   }
   leaveEventHandler() {
     if (!this.el.classList.contains('speed-bump') &&
@@ -29,6 +33,10 @@ export class PtcCardContent {
         this.el.nextElementSibling.classList.remove('mouse-hover-card-bottom');
       }
     }
+    if (this.el.classList.contains('event-podcast')) {
+      const bottomComponent = this.el.nextElementSibling;
+      bottomComponent.removeClassOnDefaultSlot();
+    }
   }
   async setHeight(height) {
     this.el.style.height = height + 'px';
@@ -69,8 +77,8 @@ export class PtcCardContent {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| 'card-video'\r\n    | 'card-tall'\r\n    | 'card-2up'\r\n    | 'card-wide'\r\n    | 'speed-bump'\r\n    | 'card-playlist'\r\n    | 'card-video-intro'\r\n    | 'card-dynamic'\r\n    | 'extra-tall'\r\n    | 'color-outlined'\r\n    | 'thumbnail-video-preview'\r\n    | 'event-jumbotron-sub-card'",
-          "resolved": "\"card-2up\" | \"card-dynamic\" | \"card-playlist\" | \"card-tall\" | \"card-video\" | \"card-video-intro\" | \"card-wide\" | \"color-outlined\" | \"event-jumbotron-sub-card\" | \"extra-tall\" | \"speed-bump\" | \"thumbnail-video-preview\"",
+          "original": "| 'card-video'\r\n    | 'card-tall'\r\n    | 'card-2up'\r\n    | 'card-wide'\r\n    | 'speed-bump'\r\n    | 'card-playlist'\r\n    | 'card-video-intro'\r\n    | 'card-dynamic'\r\n    | 'extra-tall'\r\n    | 'color-outlined'\r\n    | 'thumbnail-video-preview'\r\n    | 'event-jumbotron-sub-card'\r\n    | 'event-podcast'",
+          "resolved": "\"card-2up\" | \"card-dynamic\" | \"card-playlist\" | \"card-tall\" | \"card-video\" | \"card-video-intro\" | \"card-wide\" | \"color-outlined\" | \"event-jumbotron-sub-card\" | \"event-podcast\" | \"extra-tall\" | \"speed-bump\" | \"thumbnail-video-preview\"",
           "references": {}
         },
         "required": false,

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

@@ -269,4 +269,11 @@ ptc-link, ptc-square-card,
   pointer-events: none;
   cursor: default;
   text-decoration: none;
+}
+
+:host(.event-podcast) a:focus-visible {
+  box-shadow: 0 0 0 5px var(--keyboard-nav-outline);
+  border-radius: var(--ptc-border-radius-standard) !important;
+  display: block;
+  outline: none;
 }

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

@@ -94,8 +94,8 @@ export class PtcCardPlm {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| 'card-video'\r\n    | 'card-tall'\r\n    | 'card-wide'\r\n    | 'speed-bump'\r\n    | 'card-playlist'\r\n    | 'card-video-intro'\r\n    | 'card-2up'\r\n    | 'extra-tall'\r\n    | 'color-outlined'\r\n    | 'result-box'\r\n    | 'most-popular'\r\n    | 'simple-card'",
-          "resolved": "\"card-2up\" | \"card-playlist\" | \"card-tall\" | \"card-video\" | \"card-video-intro\" | \"card-wide\" | \"color-outlined\" | \"extra-tall\" | \"most-popular\" | \"result-box\" | \"simple-card\" | \"speed-bump\"",
+          "original": "| 'card-video'\r\n    | 'card-tall'\r\n    | 'card-wide'\r\n    | 'speed-bump'\r\n    | 'card-playlist'\r\n    | 'card-video-intro'\r\n    | 'card-2up'\r\n    | 'extra-tall'\r\n    | 'color-outlined'\r\n    | 'result-box'\r\n    | 'most-popular'\r\n    | 'simple-card'\r\n    | 'event-podcast'",
+          "resolved": "\"card-2up\" | \"card-playlist\" | \"card-tall\" | \"card-video\" | \"card-video-intro\" | \"card-wide\" | \"color-outlined\" | \"event-podcast\" | \"extra-tall\" | \"most-popular\" | \"result-box\" | \"simple-card\" | \"speed-bump\"",
           "references": {}
         },
         "required": false,

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

@@ -492,4 +492,9 @@ ptc-link, ptc-square-card,
 
 .tracker-div {
   display: inline;
+}
+
+:host(.event-podcast) a {
+  color: var(--color-green-06);
+  transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);
 }

package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.css

@@ -2205,6 +2205,35 @@ ptc-link, ptc-square-card,
   }
 }
 
+.ppc-skeleton-preloader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background: #F3F3F3;
+}
+.ppc-skeleton-preloader .dots-loader {
+  color: var(--Green-6, #33A13C);
+  width: 4px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  box-shadow: 19px 0 0 7px, 38px 0 0 3px, 57px 0 0 0;
+  transform: translateX(-38px);
+  animation: dotsAnimation 0.5s infinite alternate linear;
+}
+@keyframes dotsAnimation {
+  50% {
+    box-shadow: 19px 0 0 3px, 38px 0 0 7px, 57px 0 0 3px;
+  }
+  100% {
+    box-shadow: 19px 0 0 0, 38px 0 0 3px, 57px 0 0 7px;
+  }
+}
+
 @keyframes pulse {
   0% {
     opacity: 0.5;

package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.js

@@ -69,6 +69,9 @@ export class PtcPreloaderSection {
       case 'pdf-skeleton': {
         return (h("div", { class: "preloader-wrapper pdf-skeleton-preloader" }, h("div", { class: "jumbotron-sec" }, h("div", { class: "ptc-container skeleton-jumbotron" }, h("div", { class: "is-grid has-no-row-gap has-col-gap-lg" }, h("div", { class: "is-col-12 is-col-8-lg" }, h("div", { class: "sekleton" }, h("div", { class: "skeleton-block thin short" }), h("div", { class: "skeleton-block thick" }), h("div", { class: "skeleton-block thick" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin medium" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "cta-wrap" }, h("div", { class: "skeleton-block cta" }))))))), h("div", { class: "ptc-container" }, h("div", { class: "section-1" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block line-1" }), h("div", { class: "skeleton-block line-2 thin" }), h("div", { class: "skeleton-block line-3 thin" }), h("div", { class: "skeleton-block line-4 thin" }))), h("div", { class: "pdf-area" }, h("div", { class: "pdf-section" }, h("div", { class: "top-border" }), h("div", { class: "pdf-body" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick" }), h("div", { class: "skeleton-block thick" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin medium" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block thick-block" }), h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin medium" }))))))));
       }
+      case 'ppc-skeleton': {
+        return (h("div", { class: "preloader-wrapper" }, h("div", { class: "ppc-skeleton-preloader" }, h("div", { class: "ptc-container " }, h("div", { class: "dots-loader" })))));
+      }
       default:
         return (h("div", { class: "ptc-section-standard preload-min-height" }, h("div", { class: "ptc-container" }, h("max-width-container", { "max-width": "960", breakpoint: 1200 }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-header" }, h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block wide bold" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block medium" }), h("div", { class: "skeleton-block narrow" }), h("div", { class: "skeleton-block short" })), h("div", { class: "skeleton-image" }), h("div", { class: "skeleton-text" }, h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block narrow" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block wide" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block short bold" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block wide" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" })))))));
     }

package/dist/collection/components/ptc-textfield/ptc-textfield.js

@@ -264,7 +264,7 @@ export class PtcTextfield {
                    ${!!this.ptcMaxLength ? 'field-with-counter' : ''}` }, h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg", id: this.fieldName }, h("svg", { class: "input-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_12_1424)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", null, h("clipPath", { id: "clip0_12_1424" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext), this.infoText ? h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--info-msg" }, this.infoText) : null, this.ptcMaxLength ? (h("div", { class: "mdc-text-field-character-counter" }, this.inputValue.length, " / ", this.ptcMaxLength)) : null),
       /* Alert message */
       h("div", { class: "ptc-text-field-alert-line" }, !!this.alertText ? (h("div", { class: "mdc-text-field-helper-text--alert-msg" }, h("svg", { class: "alert-msg-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { id: "Info", "clip-path": "url(#clip0_227_7670)" }, h("path", { id: "Vector", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM9 6V13H7V6H9ZM8 5C8.55229 5 9 4.55228 9 4C9 3.44772 8.55229 3 8 3C7.44772 3 7 3.44772 7 4C7 4.55228 7.44772 5 8 5Z", fill: "#197BC0" })), h("defs", null, h("clipPath", { id: "clip0_227_7670" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.alertText)) : null, !!this.alertText && this.alertTextContent ? h("div", { class: "mdc-text-field-helper-text--alert-content-msg" }, this.alertTextContent) : null),
-    ]) : (h("input", { id: this.fieldId, type: "hidden", "data-eloqua-name": this.ptcDataEloquaName, value: this.inputValue }))));
+    ]) : (h("input", { id: this.fieldId, name: this.fieldName, type: "hidden", "data-eloqua-name": this.ptcDataEloquaName, value: this.inputValue }))));
   }
   static get is() { return "ptc-textfield"; }
   static get originalStyleUrls() {

package/dist/custom-elements/index.d.ts

@@ -68,6 +68,12 @@ export const EventJumbotronExample: {
   new (): EventJumbotronExample;
 };
 
+interface EventPodcastSliderExample extends Components.EventPodcastSliderExample, HTMLElement {}
+export const EventPodcastSliderExample: {
+  prototype: EventPodcastSliderExample;
+  new (): EventPodcastSliderExample;
+};
+
 interface FeaturedEventsSliderExample extends Components.FeaturedEventsSliderExample, HTMLElement {}
 export const FeaturedEventsSliderExample: {
   prototype: FeaturedEventsSliderExample;