@ptcwebops/ptcw-design 6.2.23 → 6.2.25-beta

package/dist/esm/ptc-card-bottom.entry.js

@@ -0,0 +1,63 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c83db688.js';
+
+const ptcCardBottomCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{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}}:host{display:block}:host ::slotted([slot=seo-content]){display:none}:host(.card-tall) .ptc-card-bottom-wrapper,:host(.card-wide) .ptc-card-bottom-wrapper{position:absolute;bottom:0;left:0;padding:0 var(--ptc-element-spacing-07) var(--ptc-element-spacing-07) var(--ptc-element-spacing-06);z-index:2}:host(.card-2up) .ptc-card-bottom-wrapper{position:absolute;bottom:0;left:0;padding:0px 24px 24px 16px}:host(.card-playlist){flex:72% 2 1;align-self:center}:host(.mouse-hover-card-bottom) .ptc-card-bottom-wrapper{z-index:5;cursor:pointer}:host(.extra-tall){position:absolute;top:0;left:0}:host(.extra-tall) .ptc-card-bottom-wrapper{position:relative;top:0px;left:0px;bottom:0px;right:0px;display:flex;flex-direction:column;align-items:center;width:calc(100% - 64px);padding:var(--ptc-layout-spacing-05) var(--ptc-element-spacing-07);padding-bottom:calc(var(--ptc-layout-spacing-03) + var(--ptc-layout-spacing-05));z-index:2}@media only screen and (min-width: 768px){:host(.extra-tall) .ptc-card-bottom-wrapper{padding-bottom:var(--ptc-layout-spacing-05)}}@media only screen and (min-width: 992px){:host(.extra-tall) .ptc-card-bottom-wrapper{padding-top:var(--ptc-layout-spacing-05)}}@media only screen and (min-width: 1200px){:host(.extra-tall) .ptc-card-bottom-wrapper{padding-top:calc(var(--ptc-layout-spacing-04) + var(--ptc-layout-spacing-05))}}@media only screen and (min-width: 1440px){:host(.extra-tall) .ptc-card-bottom-wrapper{padding-top:calc(var(--ptc-layout-spacing-05) * 2)}}:host(.color-outlined) .ptc-card-bottom-wrapper{position:absolute;top:50%;transform:translateY(-50%);display:flex;justify-content:center;flex-direction:column;align-items:center;width:calc(100% - 80px);height:100%;padding:0px var(--ptc-element-spacing-08)}:host(.most-popular){padding:0 16px 14px 16px}@media only screen and (min-width: 768px){:host(.card-2up) .ptc-card-bottom-wrapper{padding:0 32px 32px 24px}}@media only screen and (min-width: 1200px){:host(.card-video-intro){flex:20% 2 1;justify-content:flex-end}:host(.card-video-intro) .ptc-card-bottom-wrapper{display:flex;justify-content:flex-end}}@media only screen and (min-width: 1440px){:host(.card-2up) .ptc-card-bottom-wrapper{width:70%}}@media only screen and (min-width: 1980px){:host(.card-2up) .ptc-card-bottom-wrapper{width:60%}}";
+
+const PtcCardBottom = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.hoverEvent = createEvent(this, "hoverEvent", 7);
+    this.leaveEvent = createEvent(this, "leaveEvent", 7);
+    this.cardType = undefined;
+    this.styles = undefined;
+  }
+  hoverEventHandler() {
+    this.hoverEvent.emit();
+    //if statement: the card type that doesn't need a hover event
+    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist') && !this.el.classList.contains('extra-tall')) {
+      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();
+    //if statement: the card type that doesn't need a hover event
+    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist') && !this.el.classList.contains('extra-tall')) {
+      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();
+    return (h(Host, { part: "card-bottom", class: classMap, onMouseEnter: this.hoverEventHandler.bind(this), onMouseLeave: this.leaveEventHandler.bind(this) }, this.styles && h("style", null, this.styles), h("slot", { name: "slot-content" }), h("div", { class: "ptc-card-bottom-wrapper" }, h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.cardType]: this.cardType ? true : false,
+    };
+  }
+  get el() { return getElement(this); }
+};
+PtcCardBottom.style = ptcCardBottomCss;
+
+export { PtcCardBottom as ptc_card_bottom };