@ptcwebops/ptcw-design 3.8.2 → 3.8.5

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

@@ -1,225 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-3309fc22.js';
-
-const ptcFilterDropdownCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link{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{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;box-sizing:border-box}:host .hidden{display:none}:host .dropdown{position:relative;display:inline-block;font-size:16px;color:var(--color-gray-10)}:host .dropdown .dropdown-toggle{padding:0.5rem;border:1px solid var(--color-gray-05);background-color:var(--color-white);cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:34px;border-radius:4px}:host .dropdown .dropdown-toggle .dropdown-placeholder{display:flex}:host .dropdown .dropdown-toggle .dropdown-placeholder .dropdown-filter-name{padding-left:10px;padding-right:5px;word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){:host .dropdown .dropdown-toggle .dropdown-placeholder .dropdown-filter-name{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 .dropdown .caret{display:inline-block;vertical-align:middle;margin-left:5px}:host .dropdown .dropdown-menu{position:absolute;top:100%;left:0;left:0;border:1px solid var(--color-gray-03);background-color:var(--color-white);overflow-y:auto;width:100%;border-radius:4px;box-shadow:0 8px 24px rgba(0, 0, 0, 0.25);display:flex;flex-direction:column;margin-top:8px;min-width:278px;overflow:hidden;position:absolute;transition:max-height 0.25s ease-out;z-index:2000;max-height:1000px}:host .dropdown .dropdown-menu .filter-list{padding:24px 24px 16px 24px;margin:0;list-style:none;border-bottom:1px solid var(--color-gray-02)}:host .dropdown .dropdown-menu .filter-btns{display:flex;justify-content:space-between;align-items:center;padding:16px 24px}:host .dropdown .dropdown-menu .filter-btns .clear-btn{cursor:pointer}:host .dropdown .dropdown-menu .filter-btns .clear-btn:hover{text-decoration:underline}:host .dropdown::-webkit-scrollbar{width:5px}:host .dropdown::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3)}:host .dropdown::-webkit-scrollbar-thumb{background-color:var(--color-gray-05);outline:1px solid var(--color-gray-05)}:host .radio-label{margin-bottom:16px;font-size:16px;font-weight:500;cursor:pointer;display:block;font-weight:500;position:relative;user-select:none;line-height:1.5;display:flex;align-items:baseline;word-break:break-word;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual;hyphens:manual}:host .radio-label input{margin-right:10px}:host .radio-label .checkmark{width:20px;height:20px;background-color:#fff;border:1px solid #1f2024;border-radius:0.4rem;margin-right:8px;position:absolute;left:0;top:0}:host .radio-label .checkmark::after{background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\"><path d=\"M1.5 4L5.5 8L12.5 1\" stroke=\"white\" stroke-width=\"2\"/></svg>');background-position:50%;background-repeat:no-repeat;background-size:75% 100%;content:\"\";height:20px;width:20px;position:absolute;left:0;top:0;display:none}";
-
-const PtcFilterDropdown = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.selectedFilterValues = createEvent(this, "selectedFilterValues", 7);
-    this.internalOptions = [];
-    this.selectedOptions = [];
-    this.placeholder = undefined;
-    this.selectedTag = undefined;
-    this.isOpen = false;
-  }
-  componentDidLoad() {
-    this.dropdownPlaceholder = this.hostElement.shadowRoot.querySelector('.dropdown-placeholder .dropdown-filter-name');
-  }
-  parseOptions() {
-    let options = Array.from(this.hostElement.querySelectorAll('span'));
-    if (options) {
-      this.internalOptions = options.map((option) => ({
-        tabId: option.getAttribute('tab-id'),
-        value: option.textContent,
-        tagName: option.getAttribute('tag-name'), // Store tag name in the options
-      }));
-    }
-    //console.log(this.internalOptions);
-  }
-  toggleDropdown() {
-    this.isOpen = !this.isOpen;
-  }
-  clearFilter() {
-    this.selectedOptions = [];
-    const radioList = this.hostElement.shadowRoot.querySelectorAll('.filter-list input[type="radio"]');
-    radioList.forEach((radioItem) => {
-      if (radioItem instanceof HTMLInputElement) {
-        radioItem.checked = false;
-      }
-    });
-    if (this.dropdownPlaceholder) {
-      this.dropdownPlaceholder.textContent = this.placeholder;
-    }
-    this.emitSelectedOptions('clearButton');
-  }
-  emitSelectedOptions(clickedButton) {
-    // debugger
-    this.selectedOptions = this.internalOptions
-      .filter((option) => {
-      const id = option.tabId;
-      return this.hostElement.shadowRoot.querySelector(`input[tab-id="${id}"]:checked`) !== null;
-    })
-      .map((option) => ({
-      tabId: option.tabId,
-      value: option.value,
-      tagName: option.tagName
-    }));
-    this.selectedFilterValues.emit({
-      sender: this,
-      selectedOptions: this.selectedOptions,
-    });
-    if (clickedButton == 'applyButton') {
-      this.toggleDropdown();
-    }
-    if (this.dropdownPlaceholder) {
-      this.dropdownPlaceholder.textContent = this.selectedOptions[0].value;
-    }
-  }
-  componentWillRender() {
-    this.parseOptions();
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "dropdown" }, h("div", { class: "dropdown-toggle", onClick: () => this.toggleDropdown() }, 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", onClick: () => this.clearFilter() }, "Clear"), h("ptc-button", { 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); }
-};
-PtcFilterDropdown.style = ptcFilterDropdownCss;
-
-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{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{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);cursor:pointer}.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) {
-    registerInstance(this, hostRef);
-    this.vCardClicked = createEvent(this, "vCardClicked", 7);
-    this.cardTitle = undefined;
-    this.cardDescription = undefined;
-    this.thumbImg = undefined;
-    this.cardNumber = undefined;
-    this.videoId = undefined;
-    this.vtagName = undefined;
-    this.modalType = 'video-with-description';
-  }
-  showCardDetails() {
-    // Emit a custom event to signal that the card was clicked
-    // const cardClickEvent = new CustomEvent('cardClicked', {
-    //   detail: this.cardTitle,
-    // });
-    // this.ele.dispatchEvent(cardClickEvent);
-    this.vCardClicked.emit({
-      '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", onClick: () => this.showCardDetails() }, 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); }
-};
-PtcTheaterVideo.style = ptcTheaterVideoCss;
-
-const ptcTheaterVideoPlaylistCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link{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{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 .card-list{display:flex;overflow-x:auto}@media only screen and (min-width: 768px){:host .card-list{flex-wrap:wrap}}";
-
-const PtcTheaterVideoPlaylist = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.cards = [];
-    this.currentCardIndex = 0;
-    this.filteredTagName = undefined;
-    this.cardElements = undefined;
-  }
-  componentWillLoad() {
-    this.cardElements = this.host.querySelectorAll('ptc-theater-video');
-  }
-  componentDidLoad() {
-    this.setupCards();
-    this.sortCards('');
-  }
-  handleFilterClick(event) {
-    const filters = event.detail;
-    this.filteredTagName = filters['selected-tag'];
-    this.sortCards(this.filteredTagName);
-    //this.updateCardData(filters.cardNumber)
-  }
-  handleVCardClickedEvent(event) {
-    const filters = event.detail;
-    console.log(filters);
-  }
-  sortCards(filterVideo) {
-    //const cardElements = this.host.querySelectorAll('ptc-theater-video');
-    this.cardElements.forEach((cardElement) => {
-      let tagNames;
-      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 (tagNames.includes(trimFilterVideo)) {
-          cardElement.classList.add('show');
-          cardElement.classList.remove('hide');
-        }
-        else {
-          cardElement.classList.add('hide');
-          cardElement.classList.remove('show');
-        }
-      }
-      else {
-        cardElement.classList.add('show');
-        cardElement.classList.remove('hide');
-      }
-    });
-  }
-  setupCards() {
-    console.log('Setup called');
-    // const cardElements = this.host.querySelectorAll('ptc-theater-video');
-    // console.log(this.cardElements);
-    this.cardElements.forEach((cardElement, index) => {
-      this.cards.push(this.setCardData(cardElement, index));
-      cardElement.addEventListener('click', () => {
-        this.showCardDetails(index);
-      });
-    });
-  }
-  updateCardData(cardNumber) {
-    console.log('updateCard called');
-    // debugger
-    this.cards = [];
-    // const cardElements = this.host.querySelectorAll('ptc-theater-video');
-    // console.log(this.cardElements);
-    this.cardElements.forEach((cardElement, index) => {
-      const tagNames = cardElement.getAttribute('vtag-name').split(",").map((item) => {
-        return item.trim();
-      });
-      // this.cards.push(this.setCardData(cardElement, index));
-      if (this.filteredTagName !== "" && this.filteredTagName !== 'reset' && this.filteredTagName !== undefined && tagNames.includes(this.filteredTagName)) {
-        this.cards.push(this.setCardData(cardElement, index));
-        // const cardNumber = parseInt(cardElement.getAttribute('card-number'));
-        cardElement.addEventListener('click', () => {
-          this.showCardDetails(cardNumber);
-        });
-      }
-      else if (this.filteredTagName === 'reset') {
-        this.cards.push(this.setCardData(cardElement, index));
-      }
-    });
-  }
-  setCardData(cardElement, index) {
-    const cardData = {
-      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'),
-      index: index,
-      modalType: cardElement.getAttribute('modal-type')
-    };
-    return cardData;
-  }
-  showCardDetails(index) {
-    this.currentCardIndex = index;
-    // this.showModal = true;
-    const modalElement = document.querySelector('ptc-theater-video-modal');
-    if (modalElement) {
-      modalElement.updateData(this.cards, this.currentCardIndex);
-    }
-  }
-  render() {
-    return (h("div", { class: "card-list" }, h("slot", null)));
-  }
-  get host() { return getElement(this); }
-};
-PtcTheaterVideoPlaylist.style = ptcTheaterVideoPlaylistCss;
-
-export { PtcFilterDropdown as ptc_filter_dropdown, PtcTheaterVideo as ptc_theater_video, PtcTheaterVideoPlaylist as ptc_theater_video_playlist };