@ptcwebops/ptcw-design 6.2.14 → 6.2.15

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

@@ -253,4 +253,17 @@ ptc-link, ptc-square-card,
   border-radius: var(--ptc-border-radius-standard) !important;
   display: block;
   outline: none;
+}
+
+:host(.disabled) a {
+  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

@@ -7,6 +7,7 @@ export class PtcCardPlm {
     this.linkTarget = '_self';
     this.isLoading = false;
     this.trackerId = undefined;
+    this.disabled = false;
     this.styles = undefined;
     this.darkFocusState = false;
   }
@@ -48,6 +49,7 @@ export class PtcCardPlm {
   getCssClassMap() {
     return {
       [this.cardType]: this.cardType ? true : false,
+      ['disabled']: this.disabled,
     };
   }
   emitHeight() {
@@ -92,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,
@@ -192,6 +194,24 @@ export class PtcCardPlm {
         "attribute": "tracker-id",
         "reflect": false
       },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Disable links"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "styles": {
         "type": "string",
         "mutable": false,

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

@@ -484,4 +484,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-modal/ptc-modal.css

@@ -414,4 +414,66 @@ ptc-link, ptc-square-card,
   :host(.thank-you) .wrapper .modal-popup .modal-body {
     padding: 2px 48px 48px 48px;
   }
+}
+
+:host .wrapper .event-list-header {
+  display: flex;
+  position: absolute;
+  width: 100%;
+  height: 118px;
+  left: 0;
+  transform: translateY(-100%);
+  border-radius: var(--ptc-border-radius-standard) var(--ptc-border-radius-standard) 0px 0px;
+  align-items: center;
+}
+:host .wrapper .event-list-header::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px 4px 0px 0px;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%);
+  z-index: 1;
+}
+:host .wrapper .event-list-header .text-wrapper {
+  display: flex;
+  padding: var(--ptc-element-spacing-06);
+  gap: 0.5em;
+}
+:host .wrapper .event-list-header .text-wrapper span {
+  display: inline-block;
+  color: var(--color-white);
+  font-family: var(--ptc-font-latin);
+  font-size: var(--ptc-font-size-x-large);
+  font-weight: var(--ptc-font-weight-medium);
+  line-height: var(--ptc-line-height-densest);
+  position: relative;
+  z-index: 2;
+}
+:host .wrapper .event-list-header .text-wrapper span:first-of-type {
+  font-weight: var(--ptc-font-weight-extrabold);
+}
+:host .wrapper .event-mobile-modal {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+:host .wrapper .bottom-close {
+  text-align: center;
+  margin: 0 auto 40px auto;
+}
+:host .wrapper .bottom-close span {
+  cursor: pointer;
+  color: var(--color-hyperlink);
+  font-size: var(--ptc-font-size-small);
+  font-weight: var(--ptc-font-weight-bold);
+  text-decoration-line: underline;
+  line-height: var(--ptc-line-height-densest);
+}
+:host .wrapper .bottom-close span:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
+:host .wrapper .bottom-close span:hover {
+  color: var(--color-blue-08);
 }

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

@@ -18,6 +18,10 @@ export class PtcModal {
     this.styles = undefined;
     this.modalType = 'default-modal';
     this.vhCenter = false;
+    this.headerOnlyBg = undefined;
+    this.headerOnlyText1 = undefined;
+    this.headerOnlyText2 = undefined;
+    this.bottomCloseBtn = undefined;
     this.bodyOverflowSetting = undefined;
   }
   fireOnClosed(modal) {
@@ -128,6 +132,7 @@ export class PtcModal {
     let overlay;
     let type = this.iframeUrl ? 'frame' : 'html';
     let closebtn = (h("div", { class: "close", id: "modal-close" }, h("ptc-close-icon", { onClick: (e) => { e.preventDefault(); this.close(); }, onKeyPress: (e) => { e.preventDefault(); this.close(); } })));
+    let bottomCloseBtnEle = (h("div", { class: "bottom-close", id: "modal-bottom-close", onClick: (e) => { e.preventDefault(); this.close(); }, onKeyPress: (e) => { e.preventDefault(); this.close(); } }, h("span", null, this.bottomCloseBtn)));
     if (this.iframeUrl) {
       content = (h("iframe", { src: this.iframeUrl, frameBorder: 0, allowFullScreen: false, height: "100%", width: "100%", scrolling: "no", onLoad: this.resizeIframe }));
     }
@@ -147,14 +152,18 @@ export class PtcModal {
         overlay = h("div", { class: "overlay" });
       }
     }
-    return (h(Host, { class: this.getCssClassMap() }, this.styles && h("style", null, this.styles), h("div", { class: `wrapper ${this.show ? "show" : "hide"} ${this.fixed ? 'fixed' : ''} ` }, overlay, h("div", { class: `modal-popup ${this.customClass ? this.customClass : ''} ${this.size} ${type} ${this.rounded ? 'rounded' : ''} ${this.showHeaderFooter ? 'shadow-scroller' : ''} ` }, this.showHeaderFooter ? [
+    return (h(Host, { class: this.getCssClassMap() }, this.styles && h("style", null, this.styles), h("div", { class: `wrapper ${this.show ? "show" : "hide"} ${this.fixed ? 'fixed' : ''} ` }, overlay, h("div", { class: `modal-popup ${this.customClass ? this.customClass : ''} ${this.size} ${type} ${this.rounded ? 'rounded' : ''} ${this.showHeaderFooter ? 'shadow-scroller' : ''} ` }, this.modalType === "event-listing" && this.headerOnlyBg ? [
+      h("div", { class: "event-list-header" }, h("ptc-img", { "img-url": this.headerOnlyBg, "image-type": 'smart-img', styles: ".ptc-img{border-radius: var(--ptc-border-radius-standard) var(--ptc-border-radius-standard) 0px 0px;}" }), h("div", { class: "text-wrapper" }, h("span", null, this.headerOnlyText1 ? this.headerOnlyText1 : ""), h("span", null, this.headerOnlyText2 ? this.headerOnlyText2 : "")))
+    ] : null, this.showHeaderFooter ? [
       h("div", { class: "modal-header" }, h("slot", { name: "header" }), closebtn),
       h("div", { class: "modal-body", onScroll: () => this.handleScroll() }, content),
       h("div", { class: "modal-footer" }, h("slot", { name: "footer" }))
     ] : [
       closebtn,
       h("div", { class: "modal-body" }, content)
-    ]))));
+    ], this.modalType === "event-listing" && this.bottomCloseBtn ? [
+      bottomCloseBtnEle
+    ] : null))));
   }
   getCssClassMap() {
     return {
@@ -481,6 +490,74 @@ export class PtcModal {
         "attribute": "vh-center",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "headerOnlyBg": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "header-only-bg",
+        "reflect": false
+      },
+      "headerOnlyText1": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "header-only-text-1",
+        "reflect": false
+      },
+      "headerOnlyText2": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "header-only-text-2",
+        "reflect": false
+      },
+      "bottomCloseBtn": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "bottom-close-btn",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/ptc-scroll-button/ptc-scroll-button.js

@@ -1,6 +1,35 @@
 import { Host, h } from '@stencil/core';
 export class PtcScrollButton {
   constructor() {
+    //slider!: HTMLElement;
+    this.startX = 0;
+    this.scrollLeft = 0;
+    this.startDragging = (e) => {
+      this.isMouseDown = true;
+      this.isDragging = false;
+      this.containerCards.forEach((card) => {
+        card.disabled = false;
+      });
+      this.startX = e.pageX;
+      this.scrollLeft = this.scrollContainer.scrollLeft;
+    };
+    this.performDragging = (e) => {
+      if (!this.isMouseDown)
+        return;
+      const x = e.pageX - this.scrollContainer.offsetLeft;
+      const walk = x - this.startX;
+      this.isDragging = Math.abs(walk) > 5;
+      this.scrollContainer.scrollLeft = this.scrollLeft - walk;
+      this.containerCards.forEach((card) => {
+        card.disabled = true;
+      });
+    };
+    this.stopDragging = () => {
+      this.isMouseDown = false;
+      this.containerCards.forEach((card) => {
+        card.disabled = false;
+      });
+    };
     this.handleScroll = () => {
       this.updateVisibility();
     };
@@ -29,6 +58,8 @@ export class PtcScrollButton {
     this.trackerId = undefined;
     this.styles = undefined;
     this.isVisible = true;
+    this.isDragging = false;
+    this.isMouseDown = false;
   }
   componentWillLoad() {
     this.scrollContainer = document.querySelector(`.${this.scrollContainerClass}`);
@@ -41,11 +72,31 @@ export class PtcScrollButton {
       console.error('scrollContainer ele not found');
     }
   }
+  componentDidLoad() {
+    this.containerCards = document.querySelectorAll(`.${this.scrollContainerClass} ptc-card-wrapper`);
+    if (this.scrollContainer) {
+      this.enableDragging();
+    }
+  }
   disconnectedCallback() {
     if (this.scrollContainer) {
       this.scrollContainer.removeEventListener('scroll', this.handleScroll);
+      this.disableDragging();
     }
   }
+  async initVisibility() {
+    this.updateVisibility();
+  }
+  enableDragging() {
+    this.scrollContainer.addEventListener('mousedown', this.startDragging);
+    this.scrollContainer.addEventListener('mousemove', this.performDragging);
+    ['mouseup', 'mouseleave'].forEach(event => this.scrollContainer.addEventListener(event, this.stopDragging));
+  }
+  disableDragging() {
+    this.scrollContainer.removeEventListener('mousedown', this.startDragging);
+    this.scrollContainer.removeEventListener('mousemove', this.performDragging);
+    ['mouseup', 'mouseleave'].forEach(event => this.scrollContainer.removeEventListener(event, this.stopDragging));
+  }
   updateVisibility() {
     if (!this.scrollContainer)
       return;
@@ -55,7 +106,8 @@ export class PtcScrollButton {
         this.isVisible = scrollLeft > 0;
       }
       else if (this.direction === 'right') {
-        this.isVisible = scrollLeft + clientWidth < scrollWidth;
+        this.isVisible = scrollLeft + clientWidth + 1 < scrollWidth; // "+1" adjustments after adding margin-right 40px
+        // console.log('scorllLeft: ' + scrollLeft + ", scrollWidth: " + scrollWidth + ", clientWidth: " + clientWidth);
       }
     }
     else if (this.orientation === 'vertical') {
@@ -68,7 +120,7 @@ export class PtcScrollButton {
     }
   }
   render() {
-    return (h(Host, null, this.styles && h("style", null, this.styles), this.isVisible && (h("button", { id: this.trackerId, onClick: this.handleClick, class: `scroll-btn ${this.direction}`, "aria-label": this.direction, tabindex: "0" }, this.direction === 'left' && h("icon-asset", { name: "left-scroll-arrow", size: "small", color: "white", type: "ptc", "injected-style": "svg:focus{outline:none;}" }), this.direction === 'right' && h("icon-asset", { name: "right-scroll-arrow", size: "small", color: "white", type: "ptc", "injected-style": "svg:focus{outline:none;}" }), this.direction === 'up' && '▲', this.direction === 'down' && '▼'))));
+    return (h(Host, { "is-dragging": this.isDragging }, this.styles && h("style", null, this.styles), this.isVisible && (h("button", { id: this.trackerId, onClick: this.handleClick, class: `scroll-btn ${this.direction}`, "aria-label": this.direction, tabindex: "0" }, this.direction === 'left' && h("icon-asset", { name: "left-scroll-arrow", size: "small", color: "white", type: "ptc", "injected-style": "svg:focus{outline:none;}" }), this.direction === 'right' && h("icon-asset", { name: "right-scroll-arrow", size: "small", color: "white", type: "ptc", "injected-style": "svg:focus{outline:none;}" }), this.direction === 'up' && '▲', this.direction === 'down' && '▼'))));
   }
   static get is() { return "ptc-scroll-button"; }
   static get encapsulation() { return "shadow"; }
@@ -187,12 +239,51 @@ export class PtcScrollButton {
         },
         "attribute": "styles",
         "reflect": false
+      },
+      "isDragging": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-dragging",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
   static get states() {
     return {
-      "isVisible": {}
+      "isVisible": {},
+      "isMouseDown": {}
+    };
+  }
+  static get methods() {
+    return {
+      "initVisibility": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
     };
   }
 }

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;