@ptcwebops/ptcw-design 6.3.65-beta → 6.3.68-beta

package/dist/esm/ptc-filter-dropdown_4.entry.js

@@ -18,21 +18,26 @@ const PtcFilterDropdown = class {
     self.clearFilter();
   }
   async setSelectedItem(tabId, tagName, value) {
-    const isExistingOption = (this.selectedOptions || []).find(opt => opt.tabId === tabId && opt.tagName === tagName && opt.value === value);
+    const isExistingOption = (this.selectedOptions || []).find((opt) => opt.tabId === tabId &&
+      opt.tagName === tagName &&
+      opt.value === value);
     if (!isExistingOption) {
-      this.selectedOptions = [...(this.selectedOptions || []), { tabId, tagName, value }];
+      this.selectedOptions = [
+        ...(this.selectedOptions || []),
+        { tabId, tagName, value },
+      ];
     }
   }
   componentDidLoad() {
-    this.dropdownPlaceholder = this.hostElement.shadowRoot.querySelector('.dropdown-placeholder .dropdown-filter-name');
+    this.dropdownPlaceholder = this.hostElement.shadowRoot.querySelector(".dropdown-placeholder .dropdown-filter-name");
   }
   parseOptions() {
-    let options = Array.from(this.hostElement.querySelectorAll('span'));
+    let options = Array.from(this.hostElement.querySelectorAll("span"));
     if (options) {
       this.internalOptions = options.map((option) => ({
-        tabId: option.getAttribute('tab-id'),
+        tabId: option.getAttribute("tab-id"),
         value: option.textContent,
-        tagName: option.getAttribute('tag-name'), // Store tag name in the options
+        tagName: option.getAttribute("tag-name"), // Store tag name in the options
       }));
     }
   }
@@ -41,8 +46,8 @@ const PtcFilterDropdown = class {
     if (focusInput) {
       requestAnimationFrame(() => {
         var _a;
-        const selected = this.hostElement.shadowRoot.querySelector('.filter-list input:checked');
-        const firstInput = this.hostElement.shadowRoot.querySelector('.filter-list input');
+        const selected = this.hostElement.shadowRoot.querySelector(".filter-list input:checked");
+        const firstInput = this.hostElement.shadowRoot.querySelector(".filter-list input");
         (_a = (selected || firstInput)) === null || _a === void 0 ? void 0 : _a.focus();
       });
     }
@@ -58,7 +63,7 @@ const PtcFilterDropdown = class {
     if (this.dropdownPlaceholder) {
       this.dropdownPlaceholder.textContent = this.placeholder;
     }
-    this.emitSelectedOptions('clearButton');
+    this.emitSelectedOptions("clearButton");
   }
   emitSelectedOptions(clickedButton) {
     var _a;
@@ -66,46 +71,50 @@ const PtcFilterDropdown = class {
     this.selectedOptions = this.internalOptions
       .filter((option) => {
       const id = option.tabId;
-      return this.hostElement.shadowRoot.querySelector(`input[tab-id="${id}"]:checked`) !== null;
+      return (this.hostElement.shadowRoot.querySelector(`input[tab-id="${id}"]:checked`) !== null);
     })
       .map((option) => ({
       tabId: option.tabId,
       value: option.value,
-      tagName: option.tagName
+      tagName: option.tagName,
     }));
     this.selectedFilterValues.emit({
       sender: this,
       selectedOptions: this.selectedOptions,
     });
-    if (clickedButton == 'applyButton') {
+    if (clickedButton == "applyButton") {
       this.toggleDropdown();
     }
     if (this.dropdownPlaceholder) {
-      this.dropdownPlaceholder.textContent = (_a = this.selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value;
+      this.dropdownPlaceholder.textContent =
+        (_a = this.selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value;
     }
   }
   componentWillRender() {
     this.parseOptions();
   }
   handleKeyDown(e) {
-    if (e.key === 'Enter') {
+    if (e.key === "Enter") {
       this.toggleDropdown(true); // Focus after Enter
     }
-    else if (e.key === 'Tab' && this.isOpen) {
+    else if (e.key === "Tab" && this.isOpen) {
       // Let browser do default tabbing, but also guide focus inside dropdown
       requestAnimationFrame(() => {
         var _a;
-        const selected = this.hostElement.shadowRoot.querySelector('.filter-list input:checked');
-        const firstInput = this.hostElement.shadowRoot.querySelector('.filter-list input');
+        const selected = this.hostElement.shadowRoot.querySelector(".filter-list input:checked");
+        const firstInput = this.hostElement.shadowRoot.querySelector(".filter-list input");
         (_a = (selected || firstInput)) === null || _a === void 0 ? void 0 : _a.focus();
       });
     }
   }
   render() {
-    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: "dropdown" }, h("div", { class: "dropdown-toggle mf-listen", onClick: () => this.toggleDropdown(true), tabIndex: 0, onKeyDown: (e) => { this.handleKeyDown(e); } }, h("span", { class: "dropdown-placeholder" }, h("strong", null, "Filter: "), h("span", { class: "dropdown-filter-name" }, this.placeholder)), h("span", { class: "caret" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "7", viewBox: "0 0 12 7", fill: "none" }, h("path", { d: "M10.2426 1.24264L6 5.48528L1.75736 1.24264", stroke: "#20262A", "stroke-width": "2", "stroke-linecap": "round" })))), this.isOpen && (h("div", { class: "dropdown-menu" }, h("ul", { class: "filter-list" }, this.internalOptions.map((option) => (h("li", { key: option.tabId }, h("label", { class: "radio-label", htmlFor: option.value.replace(/\s+/g, '') }, h("input", { type: "radio", id: option.value.replace(/\s+/g, ''), name: "theater-filter", value: option.value, checked: this.selectedOptions.some((item) => item.value === option.value), "tab-id": option.tabId, "tag-name": option.tagName }), option.value))))), h("div", { class: "filter-btns" }, h("span", { class: "clear-btn mf-listen", onClick: () => this.clearFilter(), tabIndex: 0, onKeyDown: (e) => {
-        if (e.key === 'Enter')
+    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: "dropdown" }, h("div", { class: "dropdown-toggle mf-listen", onClick: () => this.toggleDropdown(true), tabIndex: 0, onKeyDown: (e) => {
+        this.handleKeyDown(e);
+      } }, h("span", { class: "dropdown-placeholder" }, h("strong", null, "Filter: "), h("span", { class: "dropdown-filter-name" }, this.placeholder)), h("span", { class: "caret" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "7", viewBox: "0 0 12 7", fill: "none" }, h("path", { d: "M10.2426 1.24264L6 5.48528L1.75736 1.24264", stroke: "#20262A", "stroke-width": "2", "stroke-linecap": "round" })))), this.isOpen && (h("div", { class: "dropdown-menu" }, h("ul", { class: "filter-list" }, this.internalOptions.map((option) => (h("li", { key: option.tabId }, h("label", { class: "radio-label", htmlFor: option.value.replace(/\s+/g, "") }, h("input", { type: "radio", id: option.value.replace(/\s+/g, ""), name: "theater-filter", value: option.value, checked: this.selectedOptions.some((item) => item.value ===
+        option.value), "tab-id": option.tabId, "tag-name": option.tagName }), option.value))))), h("div", { class: "filter-btns" }, h("span", { class: "clear-btn mf-listen", onClick: () => this.clearFilter(), tabIndex: 0, onKeyDown: (e) => {
+        if (e.key === "Enter")
           this.clearFilter();
-      } }, "Clear"), h("ptc-button", { "tracker-id": "filter-apply-cta", type: "link", color: "ptc-secondary", onClick: () => this.emitSelectedOptions('applyButton'), styles: ' a span { font-size: 16px !important;  } a{ padding: 10px 16px !important; }' }, "Apply"))))), h("div", { class: "hidden" }, h("slot", null))));
+      } }, "Clear"), h("ptc-button", { "tracker-id": "filter-apply-cta", type: "link", color: "ptc-secondary", onClick: () => this.emitSelectedOptions("applyButton"), styles: " a span { font-size: 16px !important;  } a{ padding: 10px 16px !important; }" }, "Apply"))))), h("div", { class: "hidden" }, h("slot", null))));
   }
   get hostElement() { return getElement(this); }
 };
@@ -117,32 +126,51 @@ const PtcSocialShare = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.trackerId = undefined;
-    this.display = 'inline-block';
-    this.shareType = 'twitter';
+    this.display = "inline-block";
+    this.shareType = "twitter";
     this.shareTitle = undefined;
     this.text = undefined;
     this.url = undefined;
-    this.source = '';
-    this.recipient = '';
-    this.iconColor = 'white';
-    this.iconHoverColor = 'gray';
+    this.source = "";
+    this.recipient = "";
+    this.iconColor = "white";
+    this.iconHoverColor = "gray";
     this.isHover = false;
-    this.iconSize = 'large';
+    this.iconSize = "large";
     this.darkFocusState = false;
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, h("div", { onClick: () => this.share(), onMouseEnter: () => this.hoverToggle(), onMouseLeave: () => this.hoverToggle(), class: `focus-state mf-listen ${this.darkFocusState ? "focus-state-dark-background" : ""}`, tabindex: "0", onKeyDown: (event) => this.handleKeyDown(event), id: this.trackerId }, this.shareType == 'mail' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-mail" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'linkedin' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-linkedin" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'twitter' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "twitter-x" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'facebook' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-fb" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-mail' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "mail-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-linkedin' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "linkedin-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-twitter' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "twitter-x-dark-circle" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-facebook' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "facebook-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'share-api' ? h("icon-asset", Object.assign({ type: "solid", size: this.iconSize, name: "share-square" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'download' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "download-arrow-news", color: "inherit" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null), this.shareType == 'download' &&
-      h("ptc-modal", { id: "download-modal", show: false, size: "lg", fixed: true, "is-bio-modal": true }, h("ptc-title", { type: 'h2', "text-align": 'center', "title-weight": "w-5", upperline: "no-upperline" }, "Thanks For Downloading"))));
+    return (h(Host, { class: classMap }, h("div", { onClick: () => this.share(), onMouseEnter: () => this.hoverToggle(), onMouseLeave: () => this.hoverToggle(), class: `focus-state mf-listen ${this.darkFocusState ? "focus-state-dark-background" : ""}`, tabindex: "0", onKeyDown: (event) => this.handleKeyDown(event), id: this.trackerId }, this.shareType == "mail" ? (h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-mail" }, (this.isHover
+      ? { color: this.iconHoverColor }
+      : { color: this.iconColor })))) : null, this.shareType == "linkedin" ? (h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-linkedin" }, (this.isHover
+      ? { color: this.iconHoverColor }
+      : { color: this.iconColor })))) : null, this.shareType == "twitter" ? (h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "twitter-x" }, (this.isHover
+      ? { color: this.iconHoverColor }
+      : { color: this.iconColor })))) : null, this.shareType == "facebook" ? (h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-fb" }, (this.isHover
+      ? { color: this.iconHoverColor }
+      : { color: this.iconColor })))) : null, this.shareType == "blog-mail" ? (h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "mail-blogs-icon" }, (this.isHover
+      ? { color: this.iconHoverColor }
+      : { color: this.iconColor })))) : null, this.shareType == "blog-linkedin" ? (h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "linkedin-blogs-icon" }, (this.isHover
+      ? { color: this.iconHoverColor }
+      : { color: this.iconColor })))) : null, this.shareType == "blog-twitter" ? (h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "twitter-x-dark-circle" }, (this.isHover
+      ? { color: this.iconHoverColor }
+      : { color: this.iconColor })))) : null, this.shareType == "blog-facebook" ? (h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "facebook-blogs-icon" }, (this.isHover
+      ? { color: this.iconHoverColor }
+      : { color: this.iconColor })))) : null, this.shareType == "share-api" ? (h("icon-asset", Object.assign({ type: "solid", size: this.iconSize, name: "share-square" }, (this.isHover
+      ? { color: this.iconHoverColor }
+      : { color: this.iconColor })))) : null, this.shareType == "download" ? (h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "download-arrow-news", color: "inherit" }, (this.isHover
+      ? { color: this.iconHoverColor }
+      : { color: this.iconColor })))) : null), this.shareType == "download" && (h("ptc-modal", { id: "download-modal", show: false, size: "lg", fixed: true, "is-bio-modal": true }, h("ptc-title", { type: "h2", "text-align": "center", "title-weight": "w-5", upperline: "no-upperline" }, "Thanks For Downloading")))));
   }
   handleKeyDown(event) {
-    if (event.key === 'Enter') {
+    if (event.key === "Enter") {
       this.share();
     }
   }
   getCssClassMap() {
     return {
-      ['ptc-social-share']: true,
+      ["ptc-social-share"]: true,
       [this.display]: true,
     };
   }
@@ -150,19 +178,19 @@ const PtcSocialShare = class {
     this.isHover = !this.isHover;
   }
   share() {
-    if (this.shareType == 'twitter' || this.shareType == "blog-twitter") {
+    if (this.shareType == "twitter" || this.shareType == "blog-twitter") {
       window.open(`https://twitter.com/share?text=${this.text}&url=${this.url}`);
     }
-    if (this.shareType == 'facebook' || this.shareType == "blog-facebook") {
+    if (this.shareType == "facebook" || this.shareType == "blog-facebook") {
       window.open(`https://www.facebook.com/sharer/sharer.php?u=${this.url}`);
     }
-    if (this.shareType == 'linkedin' || this.shareType == "blog-linkedin") {
+    if (this.shareType == "linkedin" || this.shareType == "blog-linkedin") {
       window.open(`https://www.linkedin.com/shareArticle?mini=true&url=${this.url}&title=${this.shareTitle}&summary=${this.text}&source=${this.source}`);
     }
-    if (this.shareType == 'mail' || this.shareType == "blog-mail") {
+    if (this.shareType == "mail" || this.shareType == "blog-mail") {
       window.open(`mailto:${this.recipient}?subject=${this.text}&body=${this.url}`);
     }
-    if (this.shareType == 'share-api') {
+    if (this.shareType == "share-api") {
       if (navigator.share) {
         navigator
           .share({
@@ -170,19 +198,19 @@ const PtcSocialShare = class {
           text: this.text,
           url: this.url,
         })
-          .then(() => console.log('Successful share'))
-          .catch(error => console.log('Error sharing', error));
+          .then(() => console.log("Successful share"))
+          .catch((error) => console.log("Error sharing", error));
       }
       else {
         // fallback to sharing to twitter
         window.open(`http://twitter.com/share?text=${this.text}&url=${this.url}`);
       }
     }
-    if (this.shareType == 'download') {
-      let modal = this.el.shadowRoot.querySelector('#download-modal');
-      modal.setAttribute('show', 'true');
+    if (this.shareType == "download") {
+      let modal = this.el.shadowRoot.querySelector("#download-modal");
+      modal.setAttribute("show", "true");
       setTimeout(() => {
-        modal.setAttribute('show', 'false');
+        modal.setAttribute("show", "false");
         window.open(`${this.url}`, "_self");
       }, 1000);
     }
@@ -191,7 +219,7 @@ const PtcSocialShare = class {
 };
 PtcSocialShare.style = ptcSocialShareCss;
 
-const ptcTheaterVideoCss = "h1.sc-ptc-theater-video,h2.sc-ptc-theater-video,h3.sc-ptc-theater-video,h4.sc-ptc-theater-video,h5.sc-ptc-theater-video,h6.sc-ptc-theater-video,p.sc-ptc-theater-video,ul.sc-ptc-theater-video,li.sc-ptc-theater-video,ptc-subnav.sc-ptc-theater-video,ptc-tab-list.sc-ptc-theater-video,ptc-link.sc-ptc-theater-video,ptc-square-card.sc-ptc-theater-video,.hyphenate-text.sc-ptc-theater-video,ptc-footer.sc-ptc-theater-video{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1.sc-ptc-theater-video,h2.sc-ptc-theater-video,h3.sc-ptc-theater-video,h4.sc-ptc-theater-video,h5.sc-ptc-theater-video,h6.sc-ptc-theater-video,p.sc-ptc-theater-video,ul.sc-ptc-theater-video,li.sc-ptc-theater-video,ptc-subnav.sc-ptc-theater-video,ptc-tab-list.sc-ptc-theater-video,ptc-link.sc-ptc-theater-video,ptc-square-card.sc-ptc-theater-video,.hyphenate-text.sc-ptc-theater-video,ptc-footer.sc-ptc-theater-video{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-ptc-theater-video-h{display:block;max-width:205px;min-width:205px;color:var(--color-white)}.hide.sc-ptc-theater-video-h{display:none}.show.sc-ptc-theater-video-h{display:inline-block}@media only screen and (min-width: 768px){.sc-ptc-theater-video-h{min-width:auto;min-width:205px}}@media only screen and (min-width: 1200px){.sc-ptc-theater-video-h{max-width:260px;min-width:260px}}.sc-ptc-theater-video-h .img-wrap.sc-ptc-theater-video{position:relative;border-radius:12px;box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.24);margin-top:5px;cursor:pointer}.sc-ptc-theater-video-h .img-wrap.sc-ptc-theater-video:focus-visible{border-radius:var(--ptc-border-radius-standard);border:2px solid white;outline:5px solid var(--keyboard-nav-outline)}.sc-ptc-theater-video-h .img-wrap.sc-ptc-theater-video img.sc-ptc-theater-video{max-width:100%;border-radius:12px}.sc-ptc-theater-video-h .img-wrap.sc-ptc-theater-video svg.sc-ptc-theater-video{fill:#FFF;filter:drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.5));position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.sc-ptc-theater-video-h .img-wrap.sc-ptc-theater-video .card-number.sc-ptc-theater-video{position:absolute;left:6px;top:6px;width:32px;height:32px;background-color:var(--color-gray-09);border-radius:50%;border:2px solid var(--color-green-05);text-align:center;color:#FFF;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding-bottom:3px}.sc-ptc-theater-video-h h3.sc-ptc-theater-video{margin:12px 0 0 0;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);color:var(--color-white)}.sc-ptc-theater-video-h .hidden.sc-ptc-theater-video{display:none}";
+const ptcTheaterVideoCss = "h1.sc-ptc-theater-video,h2.sc-ptc-theater-video,h3.sc-ptc-theater-video,h4.sc-ptc-theater-video,h5.sc-ptc-theater-video,h6.sc-ptc-theater-video,p.sc-ptc-theater-video,ul.sc-ptc-theater-video,li.sc-ptc-theater-video,ptc-subnav.sc-ptc-theater-video,ptc-tab-list.sc-ptc-theater-video,ptc-link.sc-ptc-theater-video,ptc-square-card.sc-ptc-theater-video,.hyphenate-text.sc-ptc-theater-video,ptc-footer.sc-ptc-theater-video{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1.sc-ptc-theater-video,h2.sc-ptc-theater-video,h3.sc-ptc-theater-video,h4.sc-ptc-theater-video,h5.sc-ptc-theater-video,h6.sc-ptc-theater-video,p.sc-ptc-theater-video,ul.sc-ptc-theater-video,li.sc-ptc-theater-video,ptc-subnav.sc-ptc-theater-video,ptc-tab-list.sc-ptc-theater-video,ptc-link.sc-ptc-theater-video,ptc-square-card.sc-ptc-theater-video,.hyphenate-text.sc-ptc-theater-video,ptc-footer.sc-ptc-theater-video{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-ptc-theater-video-h{display:block;max-width:205px;min-width:205px;color:var(--color-white)}.hide.sc-ptc-theater-video-h{display:none}.show.sc-ptc-theater-video-h{display:inline-block}@media only screen and (min-width: 768px){.sc-ptc-theater-video-h{min-width:auto;min-width:205px}}@media only screen and (min-width: 1200px){.sc-ptc-theater-video-h{max-width:260px;min-width:260px}}.sc-ptc-theater-video-h .img-wrap.sc-ptc-theater-video{position:relative;border-radius:12px;box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.24);margin-top:5px;cursor:pointer}.sc-ptc-theater-video-h .img-wrap.sc-ptc-theater-video:focus-visible{border-radius:var(--ptc-border-radius-standard);border:2px solid white;outline:5px solid var(--keyboard-nav-outline)}.sc-ptc-theater-video-h .img-wrap.sc-ptc-theater-video img.sc-ptc-theater-video{max-width:100%;border-radius:12px}.sc-ptc-theater-video-h .img-wrap.sc-ptc-theater-video svg.sc-ptc-theater-video{fill:#fff;filter:drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.5));position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.sc-ptc-theater-video-h .img-wrap.sc-ptc-theater-video .card-number.sc-ptc-theater-video{position:absolute;left:6px;top:6px;width:32px;height:32px;background-color:var(--color-gray-09);border-radius:50%;border:2px solid var(--color-green-05);text-align:center;color:#fff;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding-bottom:3px}.sc-ptc-theater-video-h h3.sc-ptc-theater-video{margin:12px 0 0 0;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);color:var(--color-white)}.sc-ptc-theater-video-h .hidden.sc-ptc-theater-video{display:none}";
 
 const PtcTheaterVideo = class {
   constructor(hostRef) {
@@ -203,7 +231,7 @@ const PtcTheaterVideo = class {
     this.cardNumber = undefined;
     this.videoId = undefined;
     this.vtagName = undefined;
-    this.modalType = 'video-with-description';
+    this.modalType = "video-with-description";
   }
   showCardDetails() {
     // Emit a custom event to signal that the card was clicked
@@ -212,12 +240,12 @@ const PtcTheaterVideo = class {
     // });
     // this.ele.dispatchEvent(cardClickEvent);
     this.vCardClicked.emit({
-      'sender': this,
-      'cardNumber': this.cardNumber
+      sender: this,
+      cardNumber: this.cardNumber,
     });
   }
   render() {
-    return (h(Host, { "video-id": this.videoId, "vtag-name": this.vtagName, "modal-type": this.modalType }, h("div", { class: "img-wrap mf-listen", onClick: () => this.showCardDetails(), tabIndex: 0 }, h("img", { src: this.thumbImg, alt: "" }), h("span", { class: 'card-number' }, this.cardNumber + 1), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "54", height: "56", viewBox: "0 0 54 56", fill: "none" }, h("g", { filter: "url(#filter0_d_214_969)" }, h("path", { d: "M42 20L12 36V4L42 20Z", fill: "white" })), h("defs", null, h("filter", { id: "filter0_d_214_969", x: "0", y: "0", width: "54", height: "56", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "s-rGB" }, h("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feOffset", { dy: "8" }), h("feGaussianBlur", { stdDeviation: "6" }), h("feComposite", { in2: "hardAlpha", operator: "out" }), h("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" }), h("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_214_969" }), h("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_214_969", result: "shape" }))))), h("h3", { class: 'vcard-title' }, this.cardTitle), h("div", { class: "hidden description" }, h("slot", null))));
+    return (h(Host, { "video-id": this.videoId, "vtag-name": this.vtagName, "modal-type": this.modalType }, h("div", { class: "img-wrap mf-listen", onClick: () => this.showCardDetails(), tabIndex: 0 }, h("img", { src: this.thumbImg, alt: "" }), h("span", { class: "card-number" }, this.cardNumber + 1), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "54", height: "56", viewBox: "0 0 54 56", fill: "none" }, h("g", { filter: "url(#filter0_d_214_969)" }, h("path", { d: "M42 20L12 36V4L42 20Z", fill: "white" })), h("defs", null, h("filter", { id: "filter0_d_214_969", x: "0", y: "0", width: "54", height: "56", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "s-rGB" }, h("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feOffset", { dy: "8" }), h("feGaussianBlur", { stdDeviation: "6" }), h("feComposite", { in2: "hardAlpha", operator: "out" }), h("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" }), h("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_214_969" }), h("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_214_969", result: "shape" }))))), h("h3", { class: "vcard-title" }, this.cardTitle), h("div", { class: "hidden description" }, h("slot", null))));
   }
   get ele() { return getElement(this); }
 };
@@ -234,15 +262,15 @@ const PtcTheaterVideoPlaylist = class {
     this.cardElements = undefined;
   }
   componentWillLoad() {
-    this.cardElements = this.host.querySelectorAll('ptc-theater-video');
+    this.cardElements = this.host.querySelectorAll("ptc-theater-video");
   }
   componentDidLoad() {
     this.setupCards();
-    this.sortCards('');
+    this.sortCards("");
   }
   handleFilterClick(event) {
     const filters = event.detail;
-    this.filteredTagName = filters['selected-tag'];
+    this.filteredTagName = filters["selected-tag"];
     this.sortCards(this.filteredTagName);
     //this.updateCardData(filters.cardNumber)
   }
@@ -253,36 +281,39 @@ const PtcTheaterVideoPlaylist = class {
   sortCards(filterVideo) {
     this.cardElements.forEach((cardElement) => {
       let tagNames;
-      if (cardElement.getAttribute('vtag-name')) {
-        tagNames = cardElement.getAttribute('vtag-name').split(",").map((item) => {
+      if (cardElement.getAttribute("vtag-name")) {
+        tagNames = cardElement
+          .getAttribute("vtag-name")
+          .split(",")
+          .map((item) => {
           return item.trim();
         });
       }
       const trimFilterVideo = filterVideo.trim();
-      if (trimFilterVideo !== "" && trimFilterVideo !== 'reset') {
+      if (trimFilterVideo !== "" && trimFilterVideo !== "reset") {
         if (tagNames.includes(trimFilterVideo)) {
-          cardElement.classList.add('show');
-          cardElement.classList.remove('hide');
+          cardElement.classList.add("show");
+          cardElement.classList.remove("hide");
         }
         else {
-          cardElement.classList.add('hide');
-          cardElement.classList.remove('show');
+          cardElement.classList.add("hide");
+          cardElement.classList.remove("show");
         }
       }
       else {
-        cardElement.classList.add('show');
-        cardElement.classList.remove('hide');
+        cardElement.classList.add("show");
+        cardElement.classList.remove("hide");
       }
     });
   }
   setupCards() {
     this.cardElements.forEach((cardElement, index) => {
       this.cards.push(this.setCardData(cardElement, index));
-      cardElement.addEventListener('click', () => {
+      cardElement.addEventListener("click", () => {
         this.showCardDetails(index, cardElement);
       });
-      cardElement.addEventListener('keydown', (e) => {
-        if (e.key === 'Enter') {
+      cardElement.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
           this.showCardDetails(index, cardElement);
         }
       });
@@ -292,37 +323,43 @@ const PtcTheaterVideoPlaylist = class {
     // debugger
     this.cards = [];
     this.cardElements.forEach((cardElement, index) => {
-      const tagNames = cardElement.getAttribute('vtag-name').split(",").map((item) => {
+      const tagNames = cardElement
+        .getAttribute("vtag-name")
+        .split(",")
+        .map((item) => {
         return item.trim();
       });
-      if (this.filteredTagName !== "" && this.filteredTagName !== 'reset' && this.filteredTagName !== undefined && tagNames.includes(this.filteredTagName)) {
+      if (this.filteredTagName !== "" &&
+        this.filteredTagName !== "reset" &&
+        this.filteredTagName !== undefined &&
+        tagNames.includes(this.filteredTagName)) {
         this.cards.push(this.setCardData(cardElement, index));
-        cardElement.addEventListener('click', () => {
+        cardElement.addEventListener("click", () => {
           this.showCardDetails(cardNumber);
         });
       }
-      else if (this.filteredTagName === 'reset') {
+      else if (this.filteredTagName === "reset") {
         this.cards.push(this.setCardData(cardElement, index));
       }
     });
   }
   setCardData(cardElement, index) {
     const cardData = {
-      title: cardElement.querySelector('.vcard-title').textContent,
+      title: cardElement.querySelector(".vcard-title").textContent,
       cardDescription: cardElement.cardDescription,
-      descriptionModal: cardElement.querySelector('.description').innerHTML,
-      videoId: cardElement.getAttribute('video-id'),
-      vtagName: cardElement.getAttribute('vtag-name'),
-      cardNumber: cardElement.getAttribute('card-number'),
+      descriptionModal: cardElement.querySelector(".description").innerHTML,
+      videoId: cardElement.getAttribute("video-id"),
+      vtagName: cardElement.getAttribute("vtag-name"),
+      cardNumber: cardElement.getAttribute("card-number"),
       index: index,
-      modalType: cardElement.getAttribute('modal-type')
+      modalType: cardElement.getAttribute("modal-type"),
     };
     return cardData;
   }
   showCardDetails(index, cardElement) {
     this.currentCardIndex = index;
     // this.showModal = true;
-    const modalElement = document.querySelector('ptc-theater-video-modal');
+    const modalElement = document.querySelector("ptc-theater-video-modal");
     if (modalElement) {
       modalElement.updateData(this.cards, this.currentCardIndex, cardElement);
     }