@ptcwebops/ptcw-design 6.2.29-beta → 6.2.31-beta

package/dist/cjs/event-jumbotron-example.cjs.entry.js

@@ -0,0 +1,148 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-63ddc79c.js');
+
+const eventJumbotronExampleCss = "h1.sc-event-jumbotron-example,h2.sc-event-jumbotron-example,h3.sc-event-jumbotron-example,h4.sc-event-jumbotron-example,h5.sc-event-jumbotron-example,h6.sc-event-jumbotron-example,p.sc-event-jumbotron-example,ul.sc-event-jumbotron-example,li.sc-event-jumbotron-example,ptc-subnav.sc-event-jumbotron-example,ptc-tab-list.sc-event-jumbotron-example,ptc-link.sc-event-jumbotron-example,ptc-square-card.sc-event-jumbotron-example,.hyphenate-text.sc-event-jumbotron-example,ptc-footer.sc-event-jumbotron-example{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1.sc-event-jumbotron-example,h2.sc-event-jumbotron-example,h3.sc-event-jumbotron-example,h4.sc-event-jumbotron-example,h5.sc-event-jumbotron-example,h6.sc-event-jumbotron-example,p.sc-event-jumbotron-example,ul.sc-event-jumbotron-example,li.sc-event-jumbotron-example,ptc-subnav.sc-event-jumbotron-example,ptc-tab-list.sc-event-jumbotron-example,ptc-link.sc-event-jumbotron-example,ptc-square-card.sc-event-jumbotron-example,.hyphenate-text.sc-event-jumbotron-example,ptc-footer.sc-event-jumbotron-example{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}.sc-event-jumbotron-example-h{display:block;position:relative}.event-jumbotron.sc-event-jumbotron-example{margin-bottom:3rem;width:100%}.white-placeholder.sc-event-jumbotron-example{position:absolute;height:130px;width:100%;background-color:#F3f3f3;bottom:0px}.jumbotron-cards-wrapper.sc-event-jumbotron-example{z-index:1;position:relative;display:flex;flex-direction:column}.jumbotron-cards.sc-event-jumbotron-example{display:flex;gap:24px;overflow-x:auto;padding:0 24px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;cursor:grab}.jumbotron-cards.sc-event-jumbotron-example::-webkit-scrollbar{display:none}.jumbotron-cards.dragging.sc-event-jumbotron-example{cursor:grabbing}.card.sc-event-jumbotron-example{flex:1 0 auto;width:250px;height:414px;background:transparent;border-radius:var(--ptc-border-radius-standard);display:flex;justify-content:center;align-items:center;text-align:center;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);flex-direction:column;padding:24px;position:relative}.card.sc-event-jumbotron-example:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}.card.sc-event-jumbotron-example ptc-img.sc-event-jumbotron-example::after{content:\"\";top:0px;left:0px;position:absolute;width:100%;height:100%;border-radius:var(--ptc-border-radius-standard);background:linear-gradient(0deg, black 0%, black 100%);opacity:0.7;transition:opacity var(--ptc-transition-slow) ease-in-out}.card.sc-event-jumbotron-example:hover ptc-img.sc-event-jumbotron-example::after{opacity:0.8}.card.sc-event-jumbotron-example:focus ptc-img.sc-event-jumbotron-example::after,.card.sc-event-jumbotron-example:active ptc-img.sc-event-jumbotron-example::after{opacity:0.85}.text-wrapper.sc-event-jumbotron-example{align-self:flex-start;text-align:left}.card-title.sc-event-jumbotron-example{color:var(--color-white);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-x-large);font-weight:var(--ptc-font-weight-extrabold);line-height:var(--ptc-line-height-densest);position:relative;z-index:2;margin-top:0;margin-bottom:var(--ptc-element-spacing-06)}.card-title.sc-event-jumbotron-example span.sc-event-jumbotron-example{font-weight:var(--ptc-font-weight-medium);display:inline-block}.cta-all.sc-event-jumbotron-example{margin-right:20px}.panel.sc-event-jumbotron-example{display:none;visibility:hidden}@media only screen and (min-width: 768px){.card-title.sc-event-jumbotron-example{font-size:var(--ptc-font-size-xx-large)}.card-title.sc-event-jumbotron-example span.sc-event-jumbotron-example{font-size:var(--ptc-font-size-xx-large)}}@media only screen and (min-width: 992px){.card-title.sc-event-jumbotron-example{font-size:var(--ptc-font-size-x-large)}.card-title.sc-event-jumbotron-example span.sc-event-jumbotron-example{font-size:var(--ptc-font-size-x-large)}.cta-group.sc-event-jumbotron-example{margin-bottom:88px}.jumbotron-cards.sc-event-jumbotron-example{overflow-x:visible;justify-content:space-between;cursor:auto;transition:transform 0.3s ease-in-out;width:100%}.card.sc-event-jumbotron-example{width:auto;height:530px;padding:24px;cursor:pointer;flex:1}.card.hidden.sc-event-jumbotron-example{opacity:0;pointer-events:none}.card.active.sc-event-jumbotron-example{min-height:530px;border-top-right-radius:0px;border-bottom-right-radius:0px;box-shadow:var(--ptc-shadow-x-large);height:auto}.panel.sc-event-jumbotron-example{visibility:hidden;opacity:0;position:absolute;top:0;left:0;min-height:530px;padding:40px;background:var(--color-white);border-radius:var(--ptc-border-radius-standard);box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);transition:opacity 0.3s ease-in-out, transform 0.3s ease-in-out;z-index:10}.panel.visible.sc-event-jumbotron-example{visibility:visible;opacity:1;border-top-left-radius:0px;border-bottom-left-radius:0px;box-shadow:var(--ptc-shadow-x-large);height:auto}.close-panel.sc-event-jumbotron-example{position:absolute;top:0px;right:0px;background:var(--color-white);border:none;text-align:center;cursor:pointer;padding:0px;margin:5px}.hide-scrollbar.sc-event-jumbotron-example{margin-left:-40px;margin-right:-40px}}@media only screen and (min-width: 1200px){.card-title.sc-event-jumbotron-example{font-size:var(--ptc-font-size-xx-large)}.card-title.sc-event-jumbotron-example span.sc-event-jumbotron-example{font-size:var(--ptc-font-size-xx-large)}.jumbotron-cards.sc-event-jumbotron-example{padding:0;gap:32px}}@media only screen and (min-width: 1440px){.jumbotron-cards.sc-event-jumbotron-example{gap:40px}}";
+
+const EventJumbotronExample = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.startX = 0;
+    this.scrollLeft = 0;
+    this.updateContainerClass = () => {
+      if (this.isDesktop) {
+        this.sliderWrapper.classList.add('ptc-container', 'u-paddingRight-flush', 'u-paddingLeft-flush');
+        this.disableDragging();
+      }
+      else {
+        this.sliderWrapper.classList.remove('ptc-container', 'u-paddingRight-flush', 'u-paddingLeft-flush');
+        this.enableDragging();
+      }
+    };
+    this.startDragging = (e) => {
+      this.isMouseDown = true;
+      this.isDragging = false;
+      this.startX = e.pageX;
+      this.scrollLeft = this.slider.scrollLeft;
+    };
+    this.performDragging = (e) => {
+      if (!this.isMouseDown)
+        return;
+      const x = e.pageX - this.slider.offsetLeft;
+      const walk = x - this.startX;
+      this.isDragging = Math.abs(walk) > 5;
+      this.slider.scrollLeft = this.scrollLeft - walk;
+    };
+    this.stopDragging = () => {
+      this.isMouseDown = false;
+    };
+    this.closeActiveModal = () => {
+      document.querySelectorAll('ptc-modal').forEach((modal) => {
+        if (modal.show)
+          modal.show = false;
+      });
+    };
+    this.cards = [];
+    this.modalBtnCloseText = "Close";
+    this.activePanel = null;
+    this.isDragging = false;
+    this.isMouseDown = false;
+    this.isDesktop = window.innerWidth >= 992;
+  }
+  onScreenStatusChange() {
+    !this.isDesktop && this.closeActiveModal();
+  }
+  handleCardClick(cardIndex) {
+    const card = this.slider.children[cardIndex];
+    const panelID = `panel-${cardIndex}`;
+    const panel = document.getElementById(panelID);
+    if (this.isDesktop && panel) {
+      this.showPanel(card, panel);
+    }
+    else if (!this.isDesktop) {
+      if (!this.isDragging) {
+        const modal = document.getElementById(`modal-${cardIndex}`);
+        console.log('open: ' + modal.id);
+        modal.show = true;
+      }
+    }
+  }
+  showPanel(card, panel) {
+    if (this.activePanel)
+      return;
+    this.slider.style.transform = `translateX(-${card.offsetLeft}px)`;
+    Array.from(this.slider.children).forEach(c => {
+      if (c !== card)
+        c.classList.add('hidden');
+    });
+    panel.style.display = 'block';
+    panel.style.width = `calc(100% - ${card.getBoundingClientRect().width}px`;
+    card.style.height = `${panel.getBoundingClientRect().height}px`;
+    this.arrowButtons = document.querySelectorAll('ptc-scroll-button');
+    setTimeout(() => {
+      panel.style.transform = `translateX(${card.offsetWidth}px)`;
+      panel.classList.add('visible');
+      card.classList.add('active');
+      this.arrowButtons.forEach(button => button.initVisibility());
+      this.activePanel = panel.id;
+    }, 100);
+  }
+  closePanel(panelId) {
+    const panel = document.getElementById(panelId);
+    if (panel) {
+      panel.classList.remove('visible');
+      panel.addEventListener('transitionend', () => {
+        if (!panel.classList.contains('visible')) {
+          panel.style.display = 'none';
+        }
+      }, { once: true });
+    }
+    this.activePanel = null;
+    this.slider.style.transform = 'translateX(0)';
+    Array.from(this.slider.children).forEach(card => {
+      card.classList.remove('hidden', 'active');
+      card.style.height = '530px';
+    });
+  }
+  enableDragging() {
+    this.slider.addEventListener('mousedown', this.startDragging);
+    this.slider.addEventListener('mousemove', this.performDragging);
+    ['mouseup', 'mouseleave'].forEach(event => this.slider.addEventListener(event, this.stopDragging));
+  }
+  disableDragging() {
+    this.slider.removeEventListener('mousedown', this.startDragging);
+    this.slider.removeEventListener('mousemove', this.performDragging);
+    ['mouseup', 'mouseleave'].forEach(event => this.slider.removeEventListener(event, this.stopDragging));
+  }
+  componentDidLoad() {
+    // const cardOverlays = document.querySelectorAll('overlay');
+    this.sliderWrapper = document.querySelector('.jumbotron-cards-wrapper');
+    this.slider = document.querySelector('.jumbotron-cards');
+    this.updateContainerClass();
+    window.addEventListener('resize', () => {
+      this.isDesktop = window.innerWidth >= 992;
+      this.updateContainerClass();
+      this.activePanel && this.closePanel(this.activePanel);
+    });
+    // cardOverlays.forEach( (ele=> {(ele as HTMLPtcOverlayElement).setOverlayColorValue('linear-gradient(0deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.70) 100%)')}))
+  }
+  render() {
+    const modalContentSlots = Array.from(this.el.querySelectorAll('template'));
+    return [
+      index.h("div", { class: {
+          'event-jumbotron': true,
+          'ptc-container': this.isDesktop,
+        } }, index.h("div", { class: "jumbotron-cards-wrapper" }, index.h("div", { class: "jumbotron-cards" }, this.cards.map((card, index$1) => (index.h("div", { class: "card", onClick: () => this.handleCardClick(index$1), "data-panel": `panel-${index$1}`, onKeyPress: () => this.handleCardClick(index$1), tabindex: "0" }, index.h("ptc-img", { "border-radius": "radius-standard", "image-type": "smart-bg", "img-url": card.cardBg, "load-mode": "lazy-bg", styles: "ptc-img{position: absolute; width: 100%; height: 100%; z-index: 0}" }), index.h("div", { class: "text-wrapper" }, index.h("h3", { class: "card-title" }, card.title, ' ', index.h("span", null, card.description)), !this.activePanel && [index.h("div", { innerHTML: card.panelContent })]))))), this.cards.map((_, index$1) => (index.h("div", { id: `panel-${index$1}`, class: "panel" }, index.h("button", { tabindex: "-1", class: "close-panel", onClick: () => this.closePanel(`panel-${index$1}`), "aria-label": "Close panel" }, index.h("ptc-close-icon", null)), index.h("slot", { name: `panel-content-${index$1}` })))), !this.isDesktop && this.cards.map((_, index$1) => (index.h("ptc-modal", { id: `modal-${index$1}`, show: false, "close-on-blur": true, "modal-type": "event-listing", "custom-class": "event-mobile-modal", headerOnlyText1: this.cards[index$1].title, headerOnlyText2: this.cards[index$1].description, headerOnlyBg: this.cards[index$1].cardBg, bottomCloseBtn: this.modalBtnCloseText }, index.h("div", { innerHTML: modalContentSlots[index$1].innerHTML })))))),
+      index.h("div", { class: "white-placeholder" }),
+    ];
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "isDesktop": ["onScreenStatusChange"]
+  }; }
+};
+EventJumbotronExample.style = eventJumbotronExampleCss;
+
+exports.event_jumbotron_example = EventJumbotronExample;

package/dist/cjs/featured-list.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-63ddc79c.js');
 
-const featuredListCss = "a {\r\n    font-family: var(--ptc-font-latin);\r\n    font-style: var(--ptc-font-style-normal);\r\n    text-decoration-line: underline;\r\n    color: var(--color-hyperlink);\r\n    transition: color var(--ptc-transition-medium) var(--ptc-ease-out);\r\n    font-weight: var(--ptc-font-weight-bold);\r\n\r\n    &:visited {\r\n        color: var(--color-blue-10);\r\n    }\r\n\r\n    &:active,\r\n    &:visited:active {\r\n        transition:none;\r\n        // pressed\r\n        color: var(--color-blue-09);\r\n    }\r\n\r\n    &:hover,\r\n    &:visited:hover {\r\n        color: var(--color-blue-08);\r\n    }\r\n\r\n    &.disabled {\r\n        color: var(--color-gray-04) !important;\r\n        cursor: not-allowed;\r\n    }\r\n    &:focus-visible {\r\n        outline: 5px solid #003DD6 !important;\r\n        outline-offset: 0px !important;\r\n        border-radius: var(--ptc-border-radius-standard);\r\n      }\r\n}\r\n\r\n.light-links,.background-grey-10,.background-plm-grey  {\r\n    a:not(.hero-footer-form-wrapper a,  ptc-modal inline-form a, .podcast-cta-section a), a.light-link {\r\n        color: var(--color-blue-04);\r\n        margin: -2px;\r\n        border: 2px solid transparent;\r\n\r\n        &:visited {\r\n            color: var(--color-blue-06);\r\n        }\r\n\r\n        &:active,\r\n        &:visited:active {\r\n            transition:none;\r\n            // pressed\r\n            color: var(--color-blue-07);\r\n        }\r\n\r\n        &:hover,\r\n        &:visited:hover {\r\n            color: var(--color-blue-05);\r\n        }\r\n\r\n        &.disabled {\r\n            color: var(--color-gray-04) !important;\r\n            cursor: not-allowed;\r\n        }\r\n\r\n        &:focus-visible {\r\n            border-radius: var(--ptc-border-radius-standard); \r\n            border: 2px solid rgb(255, 255, 255);\r\n            outline: 5px solid var(--keyboard-nav-outline);\r\n        }\r\n    }\r\n\r\n    .podcast-cta-section a {\r\n        border: 2px solid transparent;\r\n\r\n        &:focus-visible {\r\n            border-radius: var(--ptc-border-radius-standard); \r\n            border: 2px solid rgb(255, 255, 255);\r\n            outline: 5px solid var(--keyboard-nav-outline);\r\n        }\r\n    }\r\n}\r\n\r\n.ptc-link {\r\n    color: var(--color-gray-10);\r\n    text-decoration: underline;\r\n    text-decoration-thickness: 2px;\r\n    text-decoration-color: var(--color-green-06);\r\n    text-underline-offset: 5px;\r\n    transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n\r\n    &:hover {\r\n        color: var(--color-green-06);\r\n    }\r\n\r\n    &:visited {\r\n        color: var(--color-gray-10);\r\n    }\r\n\r\n    &:active,\r\n    &:visited:active {\r\n        transition:none;\r\n        // pressed\r\n        color: var(--color-green-06);\r\n    }\r\n\r\n    &:hover,\r\n    &:visited:hover {\r\n        color: var(--color-green-06);\r\n    }\r\n}\r\n\r\n.ptc-link-dark {\r\n    color: var(--color-white);\r\n    text-decoration: underline;\r\n    text-decoration-thickness: 2px;\r\n    text-decoration-color: var(--color-green-06);\r\n    text-underline-offset: 5px;\r\n    transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n\r\n    &:hover {\r\n        color: var(--color-green-06);\r\n    }\r\n\r\n    &:visited {\r\n        color: var(--color-white);\r\n    }\r\n\r\n    &:active,\r\n    &:visited:active {\r\n        transition:none;\r\n        // pressed\r\n        color: var(--color-green-06);\r\n    }\r\n\r\n    &:hover,\r\n    &:visited:hover {\r\n        color: var(--color-green-06);\r\n    }\r\n\r\n}\r\n\r\n :host {\r\n\t display: block;\r\n\t box-sizing: border-box;\r\n}\r\n :host ptc-background-video {\r\n\t height: 240px;\r\n}\r\n @media (min-width: 480px) {\r\n\t :host ptc-background-video {\r\n\t\t height: 320px;\r\n\t}\r\n}\r\n @media (min-width: 768px) {\r\n\t :host ptc-background-video {\r\n\t\t height: 450px;\r\n\t}\r\n}\r\n @media (min-width: 992px) {\r\n\t :host ptc-background-video {\r\n\t\t height: 500px;\r\n\t}\r\n}\r\n :host .fl-header {\r\n\t cursor: pointer;\r\n}\r\n :host .non-mobile-wrapper {\r\n\t box-sizing: border-box;\r\n}\r\n @media (min-width: 992px) {\r\n\t :host .non-mobile-wrapper {\r\n\t\t max-width: 1078px;\r\n\t\t margin: -75px auto 0 auto;\r\n\t\t display: flex;\r\n\t\t align-items: center;\r\n\t\t width: 100%;\r\n\t\t background: var(--color-white);\r\n\t\t box-shadow: var(--ptc-shadow-small);\r\n\t\t padding: 24px 32px;\r\n\t\t z-index: 1;\r\n\t\t position: relative;\r\n\t\t min-height: 350px;\r\n\t}\r\n}\r\n @media (min-width: 992px) {\r\n\t :host .non-mobile-wrapper .header-list-wrap {\r\n\t\t padding-right: 16px;\r\n\t\t margin-right: 64px;\r\n\t\t min-width: 270px;\r\n\t\t max-width: 270px;\r\n\t\t box-sizing: border-box;\r\n\t\t display: flex;\r\n\t\t flex-direction: column;\r\n\t\t align-items: baseline;\r\n\t}\r\n\t :host .non-mobile-wrapper .header-list-wrap::after {\r\n\t\t content: \"\";\r\n\t\t width: 1px;\r\n\t\t height: calc(100% - 48px);\r\n\t\t background-color: var(--color-gray-05);\r\n\t\t position: absolute;\r\n\t\t left: 297px;\r\n\t\t top: 24px;\r\n\t\t bottom: 24px;\r\n\t}\r\n}\r\n @media (min-width: 992px) {\r\n\t :host .non-mobile-wrapper .content-wrap {\r\n\t\t padding-right: 72px;\r\n\t}\r\n}\r\n :host .non-mobile-wrapper .fl-header {\r\n\t border-radius: 4px;\r\n\t margin: 12px 0;\r\n\t padding: 4px 8px;\r\n}\r\n :host .non-mobile-wrapper .fl-header:hover {\r\n\t background-color: var(--color-gray-02);\r\n}\r\n :host .non-mobile-wrapper .fl-header.selected, :host .non-mobile-wrapper .fl-header.init-active {\r\n\t background-color: var(--color-gray-03);\r\n}\r\n :host .mobile-wrapper .acc-item {\r\n\t border-bottom: 1px solid var(--color-gray-03);\r\n\t padding: 14px 30px;\r\n}\r\n :host .mobile-wrapper .acc-item fl-tab-header {\r\n\t padding-left: 34px;\r\n\t position: relative;\r\n}\r\n :host .mobile-wrapper .acc-item fl-tab-header::before {\r\n\t content: '';\r\n\t display: inline-block;\r\n\t width: 16px;\r\n\t height: 16px;\r\n\t background-image: url('data:image/svg+xml,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_91_790)\"><path d=\"M15.9001 6.29998H9.7001V0.0999756H6.3001V6.29998H0.100098V9.69998H6.3001V15.9H9.7001V9.69998H15.9001V6.29998Z\" fill=\"%23006E09\"/></g><defs><clipPath id=\"clip0_91_790\"><rect width=\"16\" height=\"16\" fill=\"white\"/></clipPath></defs></svg>');\r\n\t vertical-align: middle;\r\n\t position: absolute;\r\n\t left: 0;\r\n\t top: 4.5px;\r\n}\r\n :host .mobile-wrapper .acc-item fl-tab-header.selected::before, :host .mobile-wrapper .acc-item fl-tab-header.init-active::before {\r\n\t background-image: url('data:image/svg+xml,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_113_741)\"><path d=\"M0 7.05566V10.8637H13.913V7.05566H0Z\" fill=\"%23323B42\"/></g><defs><clipPath id=\"clip0_113_741\"><rect width=\"13.913\" height=\"17.92\" fill=\"white\"/></clipPath></defs></svg>');\r\n}\r\n :host .mobile-wrapper .acc-item fl-tab-content {\r\n\t padding-left: 34px;\r\n\t padding-bottom: 18px;\r\n}\r\n";
+const featuredListCss = "a:not(.vjs-social-share-links a) {\r\n    font-family: var(--ptc-font-latin);\r\n    font-style: var(--ptc-font-style-normal);\r\n    text-decoration-line: underline;\r\n    color: var(--color-hyperlink);\r\n    transition: color var(--ptc-transition-medium) var(--ptc-ease-out);\r\n    font-weight: var(--ptc-font-weight-bold);\r\n\r\n    &:visited {\r\n        color: var(--color-blue-10);\r\n    }\r\n\r\n    &:active,\r\n    &:visited:active {\r\n        transition:none;\r\n        // pressed\r\n        color: var(--color-blue-09);\r\n    }\r\n\r\n    &:hover,\r\n    &:visited:hover {\r\n        color: var(--color-blue-08);\r\n    }\r\n\r\n    &.disabled {\r\n        color: var(--color-gray-04) !important;\r\n        cursor: not-allowed;\r\n    }\r\n    &:focus-visible {\r\n        outline: 5px solid #003DD6 !important;\r\n        outline-offset: 0px !important;\r\n        border-radius: var(--ptc-border-radius-standard);\r\n      }\r\n}\r\n\r\n.light-links,.background-grey-10,.background-plm-grey  {\r\n    a:not(.hero-footer-form-wrapper a,  ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), a.light-link {\r\n        color: var(--color-blue-04);\r\n        margin: -2px;\r\n        border: 2px solid transparent;\r\n\r\n        &:visited {\r\n            color: var(--color-blue-06);\r\n        }\r\n\r\n        &:active,\r\n        &:visited:active {\r\n            transition:none;\r\n            // pressed\r\n            color: var(--color-blue-07);\r\n        }\r\n\r\n        &:hover,\r\n        &:visited:hover {\r\n            color: var(--color-blue-05);\r\n        }\r\n\r\n        &.disabled {\r\n            color: var(--color-gray-04) !important;\r\n            cursor: not-allowed;\r\n        }\r\n\r\n        &:focus-visible {\r\n            border-radius: var(--ptc-border-radius-standard);\r\n            border: 2px solid rgb(255, 255, 255);\r\n            outline: 5px solid var(--keyboard-nav-outline);\r\n        }\r\n    }\r\n\r\n    .podcast-cta-section a {\r\n        border: 2px solid transparent;\r\n\r\n        &:focus-visible {\r\n            border-radius: var(--ptc-border-radius-standard);\r\n            border: 2px solid rgb(255, 255, 255);\r\n            outline: 5px solid var(--keyboard-nav-outline);\r\n        }\r\n    }\r\n}\r\n\r\n.ptc-link {\r\n    color: var(--color-gray-10);\r\n    text-decoration: underline;\r\n    text-decoration-thickness: 2px;\r\n    text-decoration-color: var(--color-green-06);\r\n    text-underline-offset: 5px;\r\n    transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n\r\n    &:hover {\r\n        color: var(--color-green-06);\r\n    }\r\n\r\n    &:visited {\r\n        color: var(--color-gray-10);\r\n    }\r\n\r\n    &:active,\r\n    &:visited:active {\r\n        transition:none;\r\n        // pressed\r\n        color: var(--color-green-06);\r\n    }\r\n\r\n    &:hover,\r\n    &:visited:hover {\r\n        color: var(--color-green-06);\r\n    }\r\n}\r\n\r\n.ptc-link-dark {\r\n    color: var(--color-white);\r\n    text-decoration: underline;\r\n    text-decoration-thickness: 2px;\r\n    text-decoration-color: var(--color-green-06);\r\n    text-underline-offset: 5px;\r\n    transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n\r\n    &:hover {\r\n        color: var(--color-green-06);\r\n    }\r\n\r\n    &:visited {\r\n        color: var(--color-white);\r\n    }\r\n\r\n    &:active,\r\n    &:visited:active {\r\n        transition:none;\r\n        // pressed\r\n        color: var(--color-green-06);\r\n    }\r\n\r\n    &:hover,\r\n    &:visited:hover {\r\n        color: var(--color-green-06);\r\n    }\r\n\r\n}\r\n\r\n :host {\r\n\t display: block;\r\n\t box-sizing: border-box;\r\n}\r\n :host ptc-background-video {\r\n\t height: 240px;\r\n}\r\n @media (min-width: 480px) {\r\n\t :host ptc-background-video {\r\n\t\t height: 320px;\r\n\t}\r\n}\r\n @media (min-width: 768px) {\r\n\t :host ptc-background-video {\r\n\t\t height: 450px;\r\n\t}\r\n}\r\n @media (min-width: 992px) {\r\n\t :host ptc-background-video {\r\n\t\t height: 500px;\r\n\t}\r\n}\r\n :host .fl-header {\r\n\t cursor: pointer;\r\n}\r\n :host .non-mobile-wrapper {\r\n\t box-sizing: border-box;\r\n}\r\n @media (min-width: 992px) {\r\n\t :host .non-mobile-wrapper {\r\n\t\t max-width: 1078px;\r\n\t\t margin: -75px auto 0 auto;\r\n\t\t display: flex;\r\n\t\t align-items: center;\r\n\t\t width: 100%;\r\n\t\t background: var(--color-white);\r\n\t\t box-shadow: var(--ptc-shadow-small);\r\n\t\t padding: 24px 32px;\r\n\t\t z-index: 1;\r\n\t\t position: relative;\r\n\t\t min-height: 350px;\r\n\t}\r\n}\r\n @media (min-width: 992px) {\r\n\t :host .non-mobile-wrapper .header-list-wrap {\r\n\t\t padding-right: 16px;\r\n\t\t margin-right: 64px;\r\n\t\t min-width: 270px;\r\n\t\t max-width: 270px;\r\n\t\t box-sizing: border-box;\r\n\t\t display: flex;\r\n\t\t flex-direction: column;\r\n\t\t align-items: baseline;\r\n\t}\r\n\t :host .non-mobile-wrapper .header-list-wrap::after {\r\n\t\t content: \"\";\r\n\t\t width: 1px;\r\n\t\t height: calc(100% - 48px);\r\n\t\t background-color: var(--color-gray-05);\r\n\t\t position: absolute;\r\n\t\t left: 297px;\r\n\t\t top: 24px;\r\n\t\t bottom: 24px;\r\n\t}\r\n}\r\n @media (min-width: 992px) {\r\n\t :host .non-mobile-wrapper .content-wrap {\r\n\t\t padding-right: 72px;\r\n\t}\r\n}\r\n :host .non-mobile-wrapper .fl-header {\r\n\t border-radius: 4px;\r\n\t margin: 12px 0;\r\n\t padding: 4px 8px;\r\n}\r\n :host .non-mobile-wrapper .fl-header:hover {\r\n\t background-color: var(--color-gray-02);\r\n}\r\n :host .non-mobile-wrapper .fl-header.selected, :host .non-mobile-wrapper .fl-header.init-active {\r\n\t background-color: var(--color-gray-03);\r\n}\r\n :host .mobile-wrapper .acc-item {\r\n\t border-bottom: 1px solid var(--color-gray-03);\r\n\t padding: 14px 30px;\r\n}\r\n :host .mobile-wrapper .acc-item fl-tab-header {\r\n\t padding-left: 34px;\r\n\t position: relative;\r\n}\r\n :host .mobile-wrapper .acc-item fl-tab-header::before {\r\n\t content: '';\r\n\t display: inline-block;\r\n\t width: 16px;\r\n\t height: 16px;\r\n\t background-image: url('data:image/svg+xml,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_91_790)\"><path d=\"M15.9001 6.29998H9.7001V0.0999756H6.3001V6.29998H0.100098V9.69998H6.3001V15.9H9.7001V9.69998H15.9001V6.29998Z\" fill=\"%23006E09\"/></g><defs><clipPath id=\"clip0_91_790\"><rect width=\"16\" height=\"16\" fill=\"white\"/></clipPath></defs></svg>');\r\n\t vertical-align: middle;\r\n\t position: absolute;\r\n\t left: 0;\r\n\t top: 4.5px;\r\n}\r\n :host .mobile-wrapper .acc-item fl-tab-header.selected::before, :host .mobile-wrapper .acc-item fl-tab-header.init-active::before {\r\n\t background-image: url('data:image/svg+xml,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_113_741)\"><path d=\"M0 7.05566V10.8637H13.913V7.05566H0Z\" fill=\"%23323B42\"/></g><defs><clipPath id=\"clip0_113_741\"><rect width=\"13.913\" height=\"17.92\" fill=\"white\"/></clipPath></defs></svg>');\r\n}\r\n :host .mobile-wrapper .acc-item fl-tab-content {\r\n\t padding-left: 34px;\r\n\t padding-bottom: 18px;\r\n}\r\n";
 
 const FeaturedList = class {
   constructor(hostRef) {