@ptcwebops/ptcw-design 6.4.27-beta → 6.4.28-beta

package/dist/esm/ptc-product-list.entry.js

@@ -1,168 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-0bf594c4.js';
-
-const ptcProductListCss = "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;padding-bottom:52px}@media only screen and (min-width: 992px){:host{padding-bottom:102px}}:host .no-result-wrap{display:none}:host .no-result-wrap.show{display:block}:host .no-result-wrap .no-result{display:flex;justify-content:center;align-items:center;min-height:160px;padding:20px;text-align:center}";
-
-const PtcProductList = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.clearCtaClicked = createEvent(this, "clearCtaClicked", 7);
-    this.emptyTitle = undefined;
-    this.emptySubTitle = undefined;
-    this.clearButtonLabel = undefined;
-  }
-  handleSearchResult(event) {
-    const { sender, searchTerm } = event.detail;
-    if (sender) {
-      this.sortCards(searchTerm);
-    }
-  }
-  handleMultipleSearchResult(event) {
-    const { sender, selectedOptions } = event.detail;
-    if (sender) {
-      this.sortMultipleCards(selectedOptions);
-    }
-  }
-  handleEmptyResult(event) {
-    const { sender, searchTerm } = event.detail;
-    if (sender) {
-      this.noresultSection.classList.add("show");
-      this.sortCards(searchTerm);
-    }
-  }
-  sortMultipleCards(searchItems) {
-    const categoryList = Array.from(this.hostElement.querySelectorAll("ptc-product-category"));
-    categoryList.forEach((category) => {
-      const categoryTitle = category.getAttribute("category-title");
-      const productList = Array.from(category.querySelectorAll("ptc-product-card"));
-      if (searchItems.length > 0) {
-        const shouldDisplayCategory = searchItems.some((searchItem) => categoryTitle && categoryTitle.includes(searchItem));
-        category.style.display = shouldDisplayCategory
-          ? "block"
-          : "none";
-        if (shouldDisplayCategory) {
-          productList.forEach((product) => {
-            product.style.display = "block";
-          });
-        }
-        else {
-          productList.forEach((product) => {
-            const productTitle = product.getAttribute("card-title");
-            const shouldDisplayProduct = searchItems.some((searchItem) => productTitle &&
-              productTitle.includes(searchItem));
-            product.style.display = shouldDisplayProduct
-              ? "block"
-              : "none";
-          });
-        }
-      }
-      else {
-        category.style.display = "block";
-        productList.forEach((product) => {
-          product.style.display = "block";
-        });
-      }
-    });
-  }
-  // Sorting the
-  sortCards(searchItem) {
-    const categoryList = this.hostElement.querySelectorAll("ptc-product-category");
-    categoryList.forEach((category) => {
-      const categoryTitle = category.getAttribute("category-title");
-      const productList = category.querySelectorAll("ptc-product-card");
-      category.style.display = "none";
-      if (searchItem === "") {
-        category.style.display = "block";
-        productList.forEach((product) => {
-          product.style.display = "block";
-        });
-        this.noresultSection.classList.remove("show");
-      }
-      else {
-        const searchItemLowerCase = searchItem; //
-        if (searchItemLowerCase === categoryTitle) {
-          category.style.display = "block";
-          productList.forEach((product) => {
-            product.style.display = "block";
-          });
-        }
-        else {
-          productList.forEach((product) => {
-            const productTitle = product.getAttribute("card-title");
-            product.style.display = "none";
-            if (searchItemLowerCase === productTitle) {
-              product.style.display = "block";
-              category.style.display = "block";
-            }
-          });
-        }
-      }
-    });
-  }
-  componentDidLoad() {
-    // ptcLogger.log('Component loaded!');
-    // ptcLogger.info('Component loaded!');
-    // ptcLogger.warn('Component loaded!');
-    // ptcLogger.error('Component loaded!');
-    this.addIds();
-    this.noresultSection = this.hostElement.shadowRoot.querySelector(".no-result-wrap");
-    this.productList = this.hostElement.shadowRoot.querySelector(".product-list");
-    const productCards = this.hostElement.querySelectorAll("ptc-product-category ptc-product-card");
-    productCards.forEach((card) => {
-      const toggleBtn = card.shadowRoot.querySelector(".toggle-btn");
-      if (toggleBtn) {
-        const handleToggle = () => {
-          if (card.classList.contains("has-opened")) {
-            card.classList.remove("has-opened");
-          }
-          else {
-            card.classList.add("has-opened");
-          }
-          this.hideAllCards(card);
-        };
-        toggleBtn.addEventListener("click", handleToggle);
-        toggleBtn.addEventListener("keydown", (event) => {
-          if (event.key === "Enter") {
-            handleToggle();
-          }
-        });
-      }
-    });
-  }
-  hideAllCards(selectedCard) {
-    const productCards = this.hostElement.querySelectorAll("ptc-product-category ptc-product-card");
-    productCards.forEach((card) => {
-      if (selectedCard != card) {
-        card.classList.remove("has-opened");
-      }
-    });
-  }
-  handleClick(event) {
-    this.clearCtaClicked.emit({
-      sender: this,
-      event: event,
-    });
-  }
-  // Adding id to the category and product cards
-  addIds() {
-    const categoryList = this.hostElement.querySelectorAll("ptc-product-category");
-    categoryList.forEach((category) => {
-      const categoryTitle = category.getAttribute("category-title");
-      category.setAttribute("id", categoryTitle);
-      const productList = category.querySelectorAll("ptc-product-card");
-      productList.forEach((product) => {
-        const productTitle = product.getAttribute("card-title");
-        product.setAttribute("id", productTitle);
-      });
-    });
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "product-list" }, h("slot", null)), h("div", { class: "no-result-wrap" }, h("div", { class: "no-result" }, h("div", null, h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "large" }, this.emptyTitle || "No Results Found"), h("ptc-para", { "font-size": "x-small" }, this.emptySubTitle ||
-      "Try changing or removing some of your filters"), h("ptc-button", { type: "link", color: "ptc-quaternary", target: "_blank", onClick: (e) => {
-        this.handleClick(e);
-      } }, this.clearButtonLabel || "Clear Filters"))))));
-  }
-  get hostElement() { return getElement(this); }
-};
-PtcProductList.style = ptcProductListCss;
-
-export { PtcProductList as ptc_product_list };

package/dist/esm/ptc-product-sidebar.entry.js

@@ -1,174 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-0bf594c4.js';
-
-const ptcProductSidebarCss = "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;position:relative}:host .hide{display:none !important}:host .white-box{padding:12px;background-color:var(--color-white);border-radius:var(--ptc-border-radius-standard)}:host .sort-wrap{display:block}@media only screen and (min-width: 768px){:host .sort-wrap{display:flex;justify-content:space-between}}@media only screen and (min-width: 992px){:host .sort-wrap{display:block}}:host .filter-result-wrap label{font-size:var(--ptc-font-size-xx-small);font-weight:600}@media only screen and (min-width: 992px){:host .filter-result-wrap label{font-size:var(--ptc-font-size-x-small)}}:host .filter-result-wrap .result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}@media only screen and (min-width: 992px){:host .filter-result-wrap .result-header{margin-bottom:26px}}:host .filter-result-wrap .result-header .clear-cta{cursor:pointer;display:none;color:var(--color-gray-07);font-size:var(--ptc-font-size-x-small);text-decoration:underline}:host .filter-result-wrap .result-header .clear-cta:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .filter-result-wrap .result-header .clear-cta.show{display:block}:host .filter-result-wrap .typeahead-input{box-sizing:border-box;margin-bottom:14px;width:100%;margin-right:0}@media only screen and (min-width: 768px){:host .filter-result-wrap .typeahead-input{margin-right:40px}}@media only screen and (min-width: 992px){:host .filter-result-wrap .typeahead-input{margin-right:0}}:host .filter-result-wrap .typeahead-input .input-wrap{position:relative}:host .filter-result-wrap .typeahead-input .input-wrap svg{position:absolute;left:8px;top:8px}:host .filter-result-wrap .typeahead-input .input-wrap input{margin-top:4px;padding:8px 8px 8px 34px;display:block;width:100%;box-sizing:border-box;border:1px solid var(--color-gray-03);font-size:14px}:host .filter-result-wrap .typeahead-input .input-wrap input:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .filter-result-wrap .typeahead-input .suggestion-wrap{position:relative;width:100%}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions{border:1px solid var(--color-gray-03);box-shadow:0px 2px 4px rgba(35, 43, 45, 0.3);background-color:var(--color-white);position:absolute;z-index:105;top:0;margin:0;width:100%;box-sizing:border-box;padding:0;max-height:400px;overflow-y:auto}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions::-webkit-scrollbar{width:5px}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3)}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions::-webkit-scrollbar-thumb{background-color:var(--color-gray-05);outline:1px solid var(--color-gray-05)}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li{list-style:none;padding:10px 16px;cursor:pointer;display:block;font-size:14px}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li:first-child{padding-top:20px}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li:last-child{padding-bottom:20px}:host .filter-result-wrap .dropdwon-filter{margin-bottom:10px;width:100%}:host .product-list-wrap{display:none}@media only screen and (min-width: 992px){:host .product-list-wrap{display:block}}:host .product-list-wrap .category-list{display:block;padding:12px 4px;font-size:var(--ptc-font-size-x-small)}:host .product-list-wrap .category-list ptc-para{padding-bottom:4px;display:block}:host .product-list-wrap .category-list ul{padding-left:20px;margin:0}";
-
-const PtcProductSidebar = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.selectedResult = createEvent(this, "selectedResult", 7);
-    this.clearsearch = createEvent(this, "clearsearch", 7);
-    this.inputChanged = createEvent(this, "inputChanged", 7);
-    this.emptyResult = createEvent(this, "emptyResult", 7);
-    this.searchTerm = "";
-    this.suggestions = [];
-    this.filterResults = "Filter Results";
-    this.filterText = "Filter";
-    this.clearText = "Clear";
-    this.technologyText = "Technology";
-    this.jumpToProduct = "Jump to Product";
-    this.selectTechnology = "Select a technology";
-    this.suggestionList = [];
-  }
-  componentWillLoad() {
-    this.getDomData();
-  }
-  componentDidLoad() {
-    this.productListWrap = this.hostElement.shadowRoot.querySelector(".product-list-wrap");
-    this.clearBtn = this.hostElement.shadowRoot.querySelector(".clear-cta");
-    this.inputBox = this.hostElement.shadowRoot.querySelector("#searchBox");
-  }
-  // Getting category title and products list
-  getDomData() {
-    const categoryList = document.querySelectorAll("ptc-product-category");
-    categoryList.forEach((category) => {
-      let categoryTitle = category.getAttribute("category-title");
-      let categoryObject = { categoryName: categoryTitle, products: [] };
-      this.suggestionList.push(categoryObject);
-      let productList = category.querySelectorAll("ptc-product-card");
-      productList.forEach((product) => {
-        let productTitle = product.getAttribute("card-title");
-        categoryObject.products.push(productTitle);
-      });
-    });
-  }
-  handleInputChange(event) {
-    const inputElement = event.target;
-    this.searchTerm = inputElement.value.toLocaleLowerCase();
-    this.clearBtn.classList.add("show");
-    this.getSuggestions();
-    this.inputChanged.emit({
-      sender: this,
-      event: event,
-    });
-  }
-  getSuggestions() {
-    const searchTerm = this.searchTerm.toLowerCase();
-    const suggestions = this.suggestionList.reduce((acc, item) => {
-      if (item.categoryName.toLowerCase().includes(searchTerm)) {
-        acc.push(item.categoryName); // Include the category if it matches the search term
-      }
-      const matchedProducts = item.products.filter((product) => product.toLowerCase().includes(searchTerm));
-      if (matchedProducts.length > 0) {
-        acc.push(...matchedProducts); // Include the matching products
-      }
-      return acc;
-    }, []);
-    this.suggestions = suggestions;
-  }
-  handleSelectSuggestion(suggestion, event) {
-    this.searchTerm = suggestion;
-    this.productListWrap.classList.add("hide");
-    this.selectedResult.emit({
-      sender: this,
-      event: event,
-      searchTerm: this.searchTerm,
-    });
-  }
-  handleKeyUp(e) {
-    const inputElement = e.target;
-    this.searchTerm = inputElement.value.toLocaleLowerCase();
-    if (e.keyCode === 13 && this.suggestions.length == 0) {
-      this.emptyResult.emit({
-        sender: this,
-        event: e,
-      });
-    }
-    else if (e.key === "Escape") {
-      this.clearSearch(e);
-      this.inputBox.focus();
-    }
-  }
-  handleKeyDownClearCta(e) {
-    if (e.key === "Enter") {
-      this.clearSearch(e);
-    }
-  }
-  clearSearch(event) {
-    let input = this.hostElement.shadowRoot.querySelector("input");
-    this.productListWrap.classList.remove("hide");
-    this.clearBtn.classList.remove("show");
-    if (input) {
-      input.value = "";
-    }
-    this.suggestions = [];
-    this.clearsearch.emit({
-      sender: this,
-      event: event,
-      searchTerm: input.value,
-    });
-  }
-  handleDropdownTouched(event) {
-    const { sender, isOpen } = event.detail;
-    if (sender) {
-      if (isOpen) {
-        let input = this.hostElement.shadowRoot.querySelector("input");
-        if (input) {
-          input.value = "";
-        }
-      }
-    }
-  }
-  handleClick() {
-    this.suggestions = [];
-  }
-  handleclearCtaClicked(eve) {
-    const { sender, event } = eve.detail;
-    if (sender) {
-      this.clearSearch(event);
-    }
-  }
-  handleSelectedValues(event) {
-    const { sender, selectedOptions } = event.detail;
-    if (sender) {
-      if (selectedOptions.length > 0) {
-        this.clearBtn.classList.add("show");
-        this.productListWrap.classList.add("hide");
-      }
-      else {
-        this.clearBtn.classList.remove("show");
-        this.productListWrap.classList.remove("hide");
-      }
-    }
-  }
-  handleSuggestionKeyDown(e, index, suggestion) {
-    var _a;
-    const listItems = (_a = e.currentTarget.parentElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll("li");
-    if (!listItems)
-      return;
-    if (e.key === "Enter") {
-      this.handleSelectSuggestion(suggestion, e);
-      this.suggestions = [];
-    }
-    else if (e.key === "Tab") {
-      e.preventDefault();
-      const isShift = e.shiftKey;
-      const nextIndex = isShift
-        ? (index - 1 + listItems.length) % listItems.length
-        : (index + 1) % listItems.length;
-      listItems[nextIndex].focus();
-    }
-    else if (e.key === "Escape") {
-      this.clearSearch(e);
-      this.inputBox.focus();
-    }
-  }
-  render() {
-    return (h(Host, { class: "search-box" }, h("div", { class: "filter-result-wrap white-box" }, h("div", { class: "result-header" }, h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium", "title-height": "densest" }, this.filterResults), h("span", { class: "clear-cta", onClick: (e) => this.clearSearch(e), tabIndex: 0, onKeyDown: (e) => {
-        this.handleKeyDownClearCta(e);
-      } }, this.clearText)), h("div", { class: "sort-wrap" }, h("div", { class: "typeahead-input" }, h("label", { htmlFor: "searchBox" }, this.filterText), h("div", { class: "input-wrap" }, h("svg", { width: "19", height: "18", viewBox: "0 0 19 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.208984 0V1.2375L6.95898 7.65V14.2875L11.5715 17.8875V7.65L18.209 1.35V0H0.208984Z", fill: "#323B42" })), h("input", { type: "text", value: this.searchTerm, onInput: (event) => this.handleInputChange(event), onKeyUp: (e) => this.handleKeyUp(e), id: "searchBox" })), this.suggestions.length > 0 && (h("div", { class: "suggestion-wrap" }, h("ul", { class: "suggestions" }, this.suggestions.map((suggestion, index) => (h("li", { onClick: (e) => this.handleSelectSuggestion(suggestion, e), tabIndex: 0, onKeyDown: (e) => this.handleSuggestionKeyDown(e, index, suggestion) }, suggestion))))))), h("div", { class: "dropdwon-filter" }, h("label", { htmlFor: "tech-dropdown" }, this.technologyText), h("ptc-product-dropdown", { placeholder: this.selectTechnology, id: "tech-dropdown" }, this.suggestionList.map((item) => (h("span", null, item.categoryName))))))), h("ptc-spacer", { size: "large" }), h("ptc-spacer", { size: "large" }), h("div", { class: "product-list-wrap white-box" }, h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium", "title-height": "densest" }, this.jumpToProduct), this.suggestionList.map((item) => (h("div", { class: "category-list" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-densest", "para-margin": "margin-flush" }, h("list-item", { "list-type": "list-underline", "link-href": "#" + item.categoryName }, h("ptc-tooltip", { "text-display": "inline", "text-lines": "4", "z-index": "z-2", description: item.categoryName, position: "bottom" }))), h("div", { class: "product-list" }, h("ul", null, item.products.map((product) => (h("list-item", { "list-type": "list-underline", "link-href": "#" + product }, product)))))))))));
-  }
-  get hostElement() { return getElement(this); }
-};
-PtcProductSidebar.style = ptcProductSidebarCss;
-
-export { PtcProductSidebar as ptc_product_sidebar };

package/dist/esm/ptc-readmore.entry.js

@@ -1,182 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-0bf594c4.js';
-
-const ptcReadmoreCss = "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}.box input{opacity:0;position:absolute;pointer-events:none}.box .read-more-text{display:-webkit-box;-webkit-box-orient:vertical;margin:0;overflow:hidden;word-wrap:break-word}.box .line1{-webkit-line-clamp:1}.box .line2{-webkit-line-clamp:2}.box .line3{-webkit-line-clamp:3}.box .line4{-webkit-line-clamp:4}.box .line5{-webkit-line-clamp:5}.box .line10{-webkit-line-clamp:10}.box input~label{display:block;position:relative;cursor:pointer;right:0;margin-top:var(--ptc-element-spacing-02);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest);text-decoration-line:underline;color:var(--color-hyperlink);text-align:right;margin-right:var(--ptc-element-spacing-07)}.box input~label.left{text-align:left}.box input~label.right{text-align:right}.box input~label.center{text-align:center;margin-right:0}.box label:focus-visible{outline:none}.box label:focus-visible span{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}.box .z-auto{z-index:auto}.box .z-1{z-index:1}.box .z-2{z-index:2}.box .z-3{z-index:3}.box .z-999{z-index:999}.box input:checked+.read-more-text{-webkit-line-clamp:unset !important}.box .read-more-text:not(.truncated)~label{display:none}.box .show-less-cta{display:block !important}:host .box.add-icon .read-more-cta-label span{display:inline-block;position:relative;padding-right:var(--ptc-element-spacing-03)}:host .box.add-icon .read-more-cta-label span::after{content:\"\";background-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2300890B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E\");width:10px;height:7px;background-size:cover;position:absolute;right:-5px;bottom:7px}:host .box.add-icon .read-more-cta-label.show-less-cta span::after{transform:rotate(180deg)}:host .box.blue .read-more-cta-label{color:var(--color-hyperlink)}:host .box.gray .read-more-cta-label{color:var(--color-gray-10)}:host .box.green .read-more-cta-label{color:var(--color-green-07)}:host .box.initial .read-more-cta-label{color:initial}:host .box.small .read-more-cta-label{font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest)}:host .box.medium .read-more-cta-label{font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-p)}:host .box.large .read-more-cta-label{font-size:var(--ptc-font-size-large);line-height:var(--ptc-line-height-p)}:host .box.large.add-icon .read-more-cta-label span{padding-right:var(--ptc-element-spacing-04)}:host .box.large.add-icon .read-more-cta-label span::after{width:15px;height:10px}";
-
-const PtcReadmore = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.readmoreToggle = createEvent(this, "readmoreToggle", 7);
-    /**
-     * Handle keyboard interactions
-     */
-    this.handleKeyDown = (event) => {
-      if (event.key !== "Enter")
-        return;
-      const checkBoxEl = this.el.shadowRoot.querySelector("#expanded");
-      const cta = this.el.shadowRoot.querySelector(".read-more-cta-label");
-      if (!checkBoxEl || !cta)
-        return;
-      checkBoxEl.checked = !checkBoxEl.checked;
-      const isExpanded = checkBoxEl.checked;
-      cta.innerHTML = `<span>${isExpanded ? this.lessText || "" : this.moreText || ""}</span>`;
-      cta.classList.toggle("show-less-cta", isExpanded);
-      if (isExpanded) {
-        // Focus on the first element with tabindex="-1" within 'ptc-readmore'
-        const firstTabIndexMinusOne = this.el.querySelector('[tabindex="-1"]');
-        firstTabIndexMinusOne === null || firstTabIndexMinusOne === void 0 ? void 0 : firstTabIndexMinusOne.focus();
-      }
-      else {
-        cta.focus();
-        const readMoreText = this.el.shadowRoot.querySelector(".read-more-text");
-        readMoreText === null || readMoreText === void 0 ? void 0 : readMoreText.classList.add("truncated");
-      }
-      this.setTabIndex();
-      // if lessText content is not present then add tabindex=-1 to the more/less label
-      if (cta.textContent == "") {
-        cta.setAttribute("tabindex", "-1");
-      }
-    };
-    this.moreText = "read more";
-    this.lessText = undefined;
-    this.readMorePosition = "right";
-    this.display = "inline";
-    this.visibleLines = "line2";
-    this.visibleLinesCustom = undefined;
-    this.zIndex = "z-auto";
-    this.checked = false;
-    this.size = "small";
-    this.isIcon = false;
-    this.color = "blue";
-    this.isContentSlotted = false;
-  }
-  async updateReadmoreStatus() {
-    setTimeout(() => {
-      this.addBtnTruncated();
-    }, 100);
-  }
-  addBtnTruncated() {
-    const appRoot = this.el.shadowRoot;
-    const ps = appRoot.querySelectorAll(".read-more-text");
-    ps.forEach((p) => {
-      // if (this.visibleCharacters){
-      //   const truncatedText = p.textContent.slice(0, this.visibleCharacters);
-      //   p.textContent = truncatedText;
-      // }
-      p.classList[p.scrollHeight > p.clientHeight ? "add" : "remove"]("truncated");
-    });
-  }
-  // Created this function to initialize the truncate function on specific elements like tabs
-  enableAddTruncatedClass(element) {
-    const allTabHeaders = document.querySelectorAll(element);
-    for (const element of Array.from(allTabHeaders)) {
-      let tabHeader = element;
-      if (tabHeader) {
-        tabHeader.addEventListener("click", () => {
-          setTimeout(() => {
-            this.addBtnTruncated();
-          }, 100);
-        });
-      }
-    }
-  }
-  componentDidLoad() {
-    this.addBtnTruncated();
-    document.addEventListener("readystatechange", () => {
-      if (document.readyState === "complete") {
-        this.addBtnTruncated();
-      }
-    });
-    this.enableAddTruncatedClass("tab-header");
-    this.enableAddTruncatedClass("ptc-ellipsis-dropdown");
-    this.enableAddTruncatedClass("ptc-product-card");
-    // added code for tabnavigation
-    setTimeout(() => {
-      this.setTabIndex();
-    }, 400);
-  }
-  setTabIndex() {
-    var _a, _b, _c;
-    //debugger
-    let links;
-    if (!this.isContentSlotted) {
-      links = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-    }
-    else {
-      let slot = (_b = this.el) === null || _b === void 0 ? void 0 : _b.querySelector("slot").assignedNodes();
-      links =
-        slot[0] instanceof HTMLElement
-          ? slot[0].querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
-          : null;
-    }
-    let bottom = 999999;
-    let rects = (_c = this.el.shadowRoot
-      .querySelector(".read-more-text")) === null || _c === void 0 ? void 0 : _c.getClientRects();
-    if (rects && rects.length > 0) {
-      bottom = rects[0].bottom;
-    }
-    if (links) {
-      links.forEach((link) => {
-        let linkRects = link.getClientRects();
-        if (linkRects && linkRects.length > 0) {
-          if (linkRects[0].top < bottom) {
-            link.setAttribute("tabindex", "0");
-          }
-          else {
-            link.setAttribute("tabindex", "-1");
-          }
-        }
-      });
-    }
-  }
-  // click event handler
-  handleClick(event) {
-    var _a;
-    let links = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-    this.addBtnTruncated();
-    // check if the input box is checked
-    this.checked = event.target.checked;
-    // Getting cta element
-    const cta = this.el.shadowRoot.querySelector(".read-more-cta-label");
-    // Updating the cta text
-    this.checked
-      ? (cta.innerHTML = `<span> ${this.lessText ? this.lessText : ""} </span>`)
-      : (cta.innerHTML = `<span> ${this.moreText ? this.moreText : ""}</span>`);
-    this.checked
-      ? cta.classList.add("show-less-cta")
-      : cta.classList.remove("show-less-cta");
-    // Emit the state change event
-    this.readmoreToggle.emit({
-      event: event,
-      sender: this.el,
-      isExpanded: this.checked,
-    });
-    if (links) {
-      if (this.checked) {
-        links.forEach((link) => {
-          link.setAttribute("tabindex", "0");
-        });
-      }
-      else {
-        this.setTabIndex();
-      }
-    }
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: this.display }, h("div", { class: classMap }, h("input", { type: "checkbox", id: "expanded", onClick: (e) => this.handleClick(e), tabIndex: -1 }), !!this.visibleLines || !!this.visibleLinesCustom ? (h("p", { class: `read-more-text ${this.visibleLines}`, style: {
-        WebkitLineClamp: `${this.visibleLinesCustom}`,
-      } }, h("slot", null))) : null, h("label", { onKeyDown: this.handleKeyDown, htmlFor: "expanded", role: "button", class: `${this.zIndex + " " + this.readMorePosition} read-more-cta-label mf-listen`, tabIndex: 0 }, h("span", null, this.moreText)))));
-  }
-  getCssClassMap() {
-    return {
-      ["box"]: true,
-      [this.color]: true,
-      [this.size]: true,
-      ["add-icon"]: this.isIcon,
-    };
-  }
-  get el() { return getElement(this); }
-};
-PtcReadmore.style = ptcReadmoreCss;
-
-export { PtcReadmore as ptc_readmore };

package/dist/esm/ptc-spacer.entry.js

@@ -1,34 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-0bf594c4.js';
-
-const ptcSpacerCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:12px;min-width:12px;height:12px}@media (min-width: 36em){:host{width:16px;min-width:16px;height:16px}}:host(.ptc-spacer-horizontal){display:inline-block;height:100% !important}:host(.ptc-spacer-horizontal.xx-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xx-small){width:4px;min-width:4px}}:host(.ptc-spacer-horizontal.x-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.x-small){width:8px;min-width:8px}}:host(.ptc-spacer-horizontal.small){width:8px;min-width:8px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.small){width:12px;min-width:12px}}:host(.ptc-spacer-horizontal.medium){height:100%}:host(.ptc-spacer-horizontal.large){width:16px;min-width:16px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.large){width:20px;min-width:20px}}:host(.ptc-spacer-horizontal.x-large){width:20px;min-width:20px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.x-large){width:28px;min-width:28px}}:host(.ptc-spacer-horizontal.xx-large){width:28px;min-width:28px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xx-large){width:36px;min-width:36px}}:host(.ptc-spacer-horizontal.xxx-large){width:36px;min-width:36px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xxx-large){width:48px;min-width:48px}}:host(.ptc-spacer-horizontal.xxxx-large){width:48px;min-width:48px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xxxx-large){width:72px;min-width:72px}}:host(.ptc-spacer-vertical.xx-small){width:100%;height:4px;min-height:4px}:host(.ptc-spacer-vertical.x-small){width:100%;height:4px;min-height:4px}@media (min-width: 36em){:host(.ptc-spacer-vertical.x-small){height:8px;min-height:8px}}:host(.ptc-spacer-vertical.small){width:100%;height:8px;min-height:8px}@media (min-width: 36em){:host(.ptc-spacer-vertical.small){height:12px;min-height:12px}}:host(.ptc-spacer-vertical.medium){width:100%}:host(.ptc-spacer-vertical.large){width:100%;height:16px;min-height:16px}@media (min-width: 36em){:host(.ptc-spacer-vertical.large){height:20px;min-height:20px}}:host(.ptc-spacer-vertical.x-large){width:100%;height:20px;min-height:20px}@media (min-width: 36em){:host(.ptc-spacer-vertical.x-large){height:28px;min-height:28px}}:host(.ptc-spacer-vertical.xx-large){width:100%;height:28px;min-height:28px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xx-large){height:36px;min-height:36px}}:host(.ptc-spacer-vertical.xxx-large){width:100%;height:36px;min-height:36px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xxx-large){height:48px;min-height:48px}}:host(.ptc-spacer-vertical.xxxx-large){width:100%;height:48px;min-height:48px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xxxx-large){height:72px;min-height:72px}}:host(.ptc-spacer-vertical.space-144){width:100%;height:144px;min-height:144px}:host(.ptc-spacer-vertical.space-120){width:100%;height:120px;min-height:120px}:host(.ptc-spacer-vertical.space-128){width:100%;height:128px;min-height:128px}:host(.ptc-spacer-xx-small){display:none}@media (max-width: 22.5em){:host(.ptc-spacer-xx-small){display:block}}:host(.ptc-spacer-x-small){display:none}@media (max-width: 35.99em){:host(.ptc-spacer-x-small){display:block}}:host(.ptc-spacer-small){display:none}@media (min-width: 36em){:host(.ptc-spacer-small){display:block}}:host(.ptc-spacer-medium){display:none}@media (min-width: 48em){:host(.ptc-spacer-medium){display:block}}:host(.ptc-spacer-large){display:none}@media (min-width: 62em){:host(.ptc-spacer-large){display:block}}:host(.ptc-spacer-x-large){display:none}@media (min-width: 64.0625em){:host(.ptc-spacer-x-large){display:block}}:host(.ptc-spacer-xx-large){display:none}@media (min-width: 75em){:host(.ptc-spacer-xx-large){display:block}}:host(.ptc-spacer-xxx-large){display:none}@media (min-width: 90em){:host(.ptc-spacer-xxx-large){display:block}}";
-
-const PtcSpacer = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.breakpoint = "";
-    this.size = "medium";
-    this.direction = "vertical";
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return h(Host, { class: classMap });
-  }
-  getCssClassMap() {
-    return {
-      [this.size]: true,
-      ["ptc-spacer-horizontal"]: this.direction === "horizontal",
-      ["ptc-spacer-vertical"]: this.direction === "vertical",
-      ["ptc-spacer-xx-small"]: this.breakpoint === "xx-small",
-      ["ptc-spacer-x-small"]: this.breakpoint === "x-small",
-      ["ptc-spacer-small"]: this.breakpoint === "small",
-      ["ptc-spacer-medium"]: this.breakpoint === "medium",
-      ["ptc-spacer-large"]: this.breakpoint === "large",
-      ["ptc-spacer-x-large"]: this.breakpoint === "x-large",
-      ["ptc-spacer-xx-large"]: this.breakpoint === "xx-large",
-      ["ptc-spacer-xxx-large"]: this.breakpoint === "xxx-large",
-    };
-  }
-};
-PtcSpacer.style = ptcSpacerCss;
-
-export { PtcSpacer as ptc_spacer };