@ptcwebops/ptcw-design 1.8.0 → 1.8.2

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

@@ -2,140 +2,140 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-88135a6b.js');
+const index = require('./index-266d5edd.js');
 
 const ptcProductSidebarCss = ":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.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 .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: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) {
-    index.registerInstance(this, hostRef);
-    this.selectedResult = index.createEvent(this, "selectedResult", 7);
-    this.clearsearch = index.createEvent(this, "clearsearch", 7);
-    this.inputChanged = index.createEvent(this, "inputChanged", 7);
-    this.emptyResult = index.createEvent(this, "emptyResult", 7);
-    this.searchTerm = '';
-    this.suggestions = [];
-    this.suggestionList = [];
-  }
-  componentWillLoad() {
-    this.getDomData();
-  }
-  componentDidLoad() {
-    this.productListWrap = this.hostElement.shadowRoot.querySelector('.product-list-wrap');
-    this.clearBtn = this.hostElement.shadowRoot.querySelector('.clear-cta');
-  }
-  // 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.productListWrap.classList.add('hide');
-    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.serachInput.setAttribute('value', this.searchTerm);
-    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) {
-      console.log('Enter key pressed');
-      this.emptyResult.emit({
-        'sender': this,
-        'event': 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(event) {
-    const { sender, event: mouseEvent, } = event.detail;
-    if (sender) {
-      this.clearSearch(mouseEvent);
-    }
-  }
-  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');
-      }
-    }
-  }
-  render() {
-    return (index.h(index.Host, { class: 'search-box' }, index.h("div", { class: "filter-result-wrap white-box" }, index.h("div", { class: "result-header" }, index.h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium" }, "Filter Result"), index.h("span", { class: "clear-cta", onClick: (e) => this.clearSearch(e) }, "Clear")), index.h("div", { class: "sort-wrap" }, index.h("div", { class: "typeahead-input" }, index.h("label", { htmlFor: "searchBox" }, "Filter"), index.h("div", { class: "input-wrap" }, index.h("svg", { width: "19", height: "18", viewBox: "0 0 19 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M0.208984 0V1.2375L6.95898 7.65V14.2875L11.5715 17.8875V7.65L18.209 1.35V0H0.208984Z", fill: "#323B42" })), index.h("input", { type: "text", value: this.searchTerm, onInput: (event) => this.handleInputChange(event), onKeyUp: (e) => this.handleKeyUp(e), id: 'searchBox' })), this.suggestions.length > 0 &&
-      index.h("div", { class: "suggestion-wrap" }, index.h("ul", { class: "suggestions" }, this.suggestions.map((suggestion) => (index.h("li", { onClick: (e) => this.handleSelectSuggestion(suggestion, e) }, suggestion)))))), index.h("div", { class: "dropdwon-filter" }, index.h("label", { htmlFor: "tech-dropdown" }, "Technology"), index.h("ptc-product-dropdown", { placeholder: "Select a technology", id: "tech-dropdown" }, this.suggestionList.sort((a, b) => a.categoryName.localeCompare(b.categoryName)).map((item) => (index.h("span", null, item.categoryName))))))), index.h("ptc-spacer", { size: "large" }), index.h("div", { class: "product-list-wrap white-box" }, index.h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium" }, "Jump to Product"), this.suggestionList.sort((a, b) => a.categoryName.localeCompare(b.categoryName)).map((item) => (index.h("div", { class: "category-list" }, index.h("ptc-para", { "font-size": 'x-small', "font-weight": 'w-7', "para-line-h": "line-height-densest", "para-margin": 'margin-flush' }, index.h("list-item", { "list-type": "list-underline", "link-href": '#' + item.categoryName }, index.h("ptc-tooltip", { "text-display": "inline", "text-lines": "4", "z-index": "z-2", description: item.categoryName, position: "bottom" }))), index.h("div", { class: "product-list" }, index.h("ul", null, item.products.sort((a, b) => a.localeCompare(b)).map((product) => (index.h("list-item", { "list-type": "list-underline", "link-href": '#' + product }, product)))))))))));
-  }
-  get hostElement() { return index.getElement(this); }
-};
+const PtcProductSidebar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.selectedResult = index.createEvent(this, "selectedResult", 7);
+    this.clearsearch = index.createEvent(this, "clearsearch", 7);
+    this.inputChanged = index.createEvent(this, "inputChanged", 7);
+    this.emptyResult = index.createEvent(this, "emptyResult", 7);
+    this.searchTerm = '';
+    this.suggestions = [];
+    this.suggestionList = [];
+  }
+  componentWillLoad() {
+    this.getDomData();
+  }
+  componentDidLoad() {
+    this.productListWrap = this.hostElement.shadowRoot.querySelector('.product-list-wrap');
+    this.clearBtn = this.hostElement.shadowRoot.querySelector('.clear-cta');
+  }
+  // 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.productListWrap.classList.add('hide');
+    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.serachInput.setAttribute('value', this.searchTerm);
+    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) {
+      console.log('Enter key pressed');
+      this.emptyResult.emit({
+        'sender': this,
+        'event': 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(event) {
+    const { sender, event: mouseEvent, } = event.detail;
+    if (sender) {
+      this.clearSearch(mouseEvent);
+    }
+  }
+  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');
+      }
+    }
+  }
+  render() {
+    return (index.h(index.Host, { class: 'search-box' }, index.h("div", { class: "filter-result-wrap white-box" }, index.h("div", { class: "result-header" }, index.h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium" }, "Filter Result"), index.h("span", { class: "clear-cta", onClick: (e) => this.clearSearch(e) }, "Clear")), index.h("div", { class: "sort-wrap" }, index.h("div", { class: "typeahead-input" }, index.h("label", { htmlFor: "searchBox" }, "Filter"), index.h("div", { class: "input-wrap" }, index.h("svg", { width: "19", height: "18", viewBox: "0 0 19 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M0.208984 0V1.2375L6.95898 7.65V14.2875L11.5715 17.8875V7.65L18.209 1.35V0H0.208984Z", fill: "#323B42" })), index.h("input", { type: "text", value: this.searchTerm, onInput: (event) => this.handleInputChange(event), onKeyUp: (e) => this.handleKeyUp(e), id: 'searchBox' })), this.suggestions.length > 0 &&
+      index.h("div", { class: "suggestion-wrap" }, index.h("ul", { class: "suggestions" }, this.suggestions.map((suggestion) => (index.h("li", { onClick: (e) => this.handleSelectSuggestion(suggestion, e) }, suggestion)))))), index.h("div", { class: "dropdwon-filter" }, index.h("label", { htmlFor: "tech-dropdown" }, "Technology"), index.h("ptc-product-dropdown", { placeholder: "Select a technology", id: "tech-dropdown" }, this.suggestionList.sort((a, b) => a.categoryName.localeCompare(b.categoryName)).map((item) => (index.h("span", null, item.categoryName))))))), index.h("ptc-spacer", { size: "large" }), index.h("div", { class: "product-list-wrap white-box" }, index.h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium" }, "Jump to Product"), this.suggestionList.sort((a, b) => a.categoryName.localeCompare(b.categoryName)).map((item) => (index.h("div", { class: "category-list" }, index.h("ptc-para", { "font-size": 'x-small', "font-weight": 'w-7', "para-line-h": "line-height-densest", "para-margin": 'margin-flush' }, index.h("list-item", { "list-type": "list-underline", "link-href": '#' + item.categoryName }, index.h("ptc-tooltip", { "text-display": "inline", "text-lines": "4", "z-index": "z-2", description: item.categoryName, position: "bottom" }))), index.h("div", { class: "product-list" }, index.h("ul", null, item.products.sort((a, b) => a.localeCompare(b)).map((product) => (index.h("list-item", { "list-type": "list-underline", "link-href": '#' + product }, product)))))))))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
 PtcProductSidebar.style = ptcProductSidebarCss;
 
 exports.ptc_product_sidebar = PtcProductSidebar;

package/dist/cjs/ptc-progress-bar_2.cjs.entry.js

@@ -2,99 +2,99 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-88135a6b.js');
+const index = require('./index-266d5edd.js');
 
 const ptcProgressBarCss = ":host{display:block}:host .progress-bar-container{height:5px;background-color:linear-gradient(272deg, #3b4550, #1a1a1a);width:100%}:host .progress-bar{height:100%;background-image:linear-gradient(270deg, #4795cd, #33a13c);transition:width 0.3s ease-in-out}";
 
-const PtcProgressBar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.scrollPercentage = 0;
-  }
-  handleScroll() {
-    const scrollTop = document.documentElement.scrollTop;
-    const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
-    console.log('scrollTop: ' + scrollTop + '; scorllHeight: ' + scrollHeight);
-    const percentage = (scrollTop / scrollHeight) * 100;
-    this.scrollPercentage = percentage;
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "progress-bar-container" }, index.h("div", { class: "progress-bar", style: { width: `${this.scrollPercentage}%` } }))));
-  }
-};
+const PtcProgressBar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.scrollPercentage = 0;
+  }
+  handleScroll() {
+    const scrollTop = document.documentElement.scrollTop;
+    const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+    console.log('scrollTop: ' + scrollTop + '; scorllHeight: ' + scrollHeight);
+    const percentage = (scrollTop / scrollHeight) * 100;
+    this.scrollPercentage = percentage;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "progress-bar-container" }, index.h("div", { class: "progress-bar", style: { width: `${this.scrollPercentage}%` } }))));
+  }
+};
 PtcProgressBar.style = ptcProgressBarCss;
 
 const ptcSocialShareCss = ":host(.inline-block){display:inline-block}:host(.block){display:block}:host(.inline){display:inline}:host(.flex){display:flex}:host(.ptc-social-share){cursor:pointer}@media only screen and (min-width: 1200px){:host(.ptc-social-m-left){margin-left:var(--ptc-element-spacing-04)}}";
 
-const PtcSocialShare = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    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.isHover = false;
-    this.iconSize = 'large';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h(index.Host, { class: classMap }, index.h("div", { onClick: () => this.share(), onMouseEnter: () => this.hoverToggle(), onMouseLeave: () => this.hoverToggle() }, this.shareType == 'mail' ? index.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' ? index.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' ? index.h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-twitter" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'facebook' ? index.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' ? index.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' ? index.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' ? index.h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "twitter-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-facebook' ? index.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' ? index.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' ? index.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' &&
-      index.h("ptc-modal", { id: "download-modal", show: false, size: "lg", fixed: true, "is-bio-modal": true }, index.h("ptc-title", { type: 'h2', "text-align": 'center', "title-weight": "w-5", upperline: "no-upperline" }, "Thanks For Downloading"))));
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-social-share']: true,
-      [this.display]: true,
-    };
-  }
-  hoverToggle() {
-    this.isHover = !this.isHover;
-  }
-  share() {
-    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") {
-      window.open(`https://www.facebook.com/sharer/sharer.php?u=${this.url}`);
-    }
-    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") {
-      window.open(`mailto:${this.recipient}?subject=${this.text}&body=${this.url}`);
-    }
-    if (this.shareType == 'share-api') {
-      if (navigator.share) {
-        navigator
-          .share({
-          title: this.shareTitle,
-          text: this.text,
-          url: this.url,
-        })
-          .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');
-      setTimeout(() => {
-        modal.setAttribute('show', 'false');
-        window.open(`${this.url}`, "_self");
-      }, 1000);
-    }
-  }
-  get el() { return index.getElement(this); }
-};
+const PtcSocialShare = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    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.isHover = false;
+    this.iconSize = 'large';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, { class: classMap }, index.h("div", { onClick: () => this.share(), onMouseEnter: () => this.hoverToggle(), onMouseLeave: () => this.hoverToggle() }, this.shareType == 'mail' ? index.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' ? index.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' ? index.h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-twitter" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'facebook' ? index.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' ? index.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' ? index.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' ? index.h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "twitter-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-facebook' ? index.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' ? index.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' ? index.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' &&
+      index.h("ptc-modal", { id: "download-modal", show: false, size: "lg", fixed: true, "is-bio-modal": true }, index.h("ptc-title", { type: 'h2', "text-align": 'center', "title-weight": "w-5", upperline: "no-upperline" }, "Thanks For Downloading"))));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-social-share']: true,
+      [this.display]: true,
+    };
+  }
+  hoverToggle() {
+    this.isHover = !this.isHover;
+  }
+  share() {
+    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") {
+      window.open(`https://www.facebook.com/sharer/sharer.php?u=${this.url}`);
+    }
+    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") {
+      window.open(`mailto:${this.recipient}?subject=${this.text}&body=${this.url}`);
+    }
+    if (this.shareType == 'share-api') {
+      if (navigator.share) {
+        navigator
+          .share({
+          title: this.shareTitle,
+          text: this.text,
+          url: this.url,
+        })
+          .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');
+      setTimeout(() => {
+        modal.setAttribute('show', 'false');
+        window.open(`${this.url}`, "_self");
+      }, 1000);
+    }
+  }
+  get el() { return index.getElement(this); }
+};
 PtcSocialShare.style = ptcSocialShareCss;
 
 exports.ptc_progress_bar = PtcProgressBar;

package/dist/cjs/ptc-quote.cjs.entry.js

@@ -2,35 +2,35 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-88135a6b.js');
+const index = require('./index-266d5edd.js');
 
 const QuotationMark = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.12 32.76"><defs><style>.cls-1{isolation:isolate;}.cls-2{fill:#cac8c8;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><g class="cls-1"><path class="cls-2" d="M24,0,18,15.12h5.4L19.68,32.76H0l3.72-18L11.4,0ZM48.12,0l-6,15.12h5.4L43.8,32.76H24.12l3.72-18L35.52,0Z"/></g></g></g></g></svg>`;
 
 const ptcQuoteCss = ":host{display:flex;width:100%;position:relative;overflow:hidden;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:flex-start}:host(.image-quote) .quote-media{position:relative;flex-basis:auto}:host(.image-quote) .quote-media img{width:100%}:host(.image-quote) .quote-media .our-leadership{width:89%;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-04) var(--ptc-element-spacing-02) var(--ptc-element-spacing-04);top:0px;margin:0px auto;display:flex;position:relative;box-shadow:var(--ptc-shadow-large);background-color:var(--color-white);transform:translateY(-50%)}:host(.image-quote) .quote-media .our-leadership p{font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-black);color:var(--color-gray-10);line-height:var(--ptc-line-height-p);letter-spacing:var(--ptc-letter-spacing-loose);margin-block-end:0;margin-block-start:0}:host(.image-quote) .quote-media .our-leadership .line{height:2px;width:82%;position:absolute;top:20%}:host(.image-quote) .quote-media .our-leadership .line .green-line{width:30%;height:2px;background-color:var(--color-green-05);display:inline-block;position:absolute}:host(.image-quote) .quote-media .our-leadership .line .grey-line{width:70%;height:1px;background-color:var(--color-gray-03);display:inline-block;position:absolute;left:30%}:host(.image-quote) .quote-content{flex-basis:auto;display:flex;flex-flow:column nowrap}:host(.image-quote) .quote-content .quotemarks{flex-basis:7%;width:15%;margin-bottom:var(--ptc-element-spacing-03);max-width:2.5rem}:host(.image-quote) .quote-content blockquote{flex-basis:93%;margin-block-start:calc(-1 * var(--ptc-element-spacing-04));margin-inline-start:0;margin-inline-end:0}:host(.image-quote) .quote-content blockquote p{font-weight:var(--ptc-font-weight-medium);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-p);font-style:var(--ptc-font-style-italic);color:var(--color-gray-10);letter-spacing:var(--ptc-letter-spacing-loose);margin:var(--ptc-element-spacing-04) 0}:host(.image-quote) .quote-content .quote-name{display:block;margin-bottom:var(--ptc-element-spacing-07);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-medium)}@media only screen and (min-width: 768px){:host(.image-quote) .quote-media .our-leadership{width:65%;padding:var(--ptc-element-spacing-06) var(--ptc-element-spacing-06) var(--ptc-element-spacing-03) var(--ptc-element-spacing-06);transform:translateY(-25%)}:host(.image-quote) .quote-media .our-leadership p{font-size:var(--ptc-font-size-large)}:host(.image-quote) .quote-content .quotemarks{width:10%}:host(.image-quote) .quote-content blockquote p{font-size:var(--ptc-font-size-medium);letter-spacing:var(--ptc-letter-spacing-normal)}:host(.image-quote) .quote-content .quote-name{font-size:var(--ptc-font-size-medium);letter-spacing:var(--ptc-letter-spacing-normal)}}@media only screen and (min-width: 992px){:host(.image-quote) .quote-content{margin-right:5%;margin-left:5%}:host(.image-quote) .quote-content blockquote p{font-size:var(--ptc-font-size-large)}:host(.image-quote) .quote-content .quote-name{font-size:var(--ptc-font-size-large)}}@media only screen and (min-width: 1200px){:host(.image-quote){flex-direction:row}:host(.image-quote) .quote-media{flex-basis:40%;padding:unset;margin:var(--ptc-layout-spacing-05) 0px 0px calc(var(--ptc-layout-spacing-06) * 2);padding-right:var(--ptc-element-spacing-08)}:host(.image-quote) .quote-media .our-leadership{width:78%;transform:translateY(-50%)}:host(.image-quote) .quote-media .our-leadership .line{top:18%}:host(.image-quote) .quote-content{flex-basis:58%;flex-flow:row nowrap;margin-left:unset;margin-right:unset}:host(.image-quote) .quote-content .quotemarks{flex-basis:8%;margin-right:var(--ptc-element-spacing-03)}}:host(.plain-quote) blockquote{margin:0 auto;padding:0 0 var(--ptc-element-spacing-04) var(--ptc-element-spacing-04);border-left:5px solid var(--color-green-05)}:host(.plain-quote) blockquote p{font-weight:var(--ptc-font-weight-regular);font-size:var(--ptc-font-size-medium);line-height:var(--ptc-line-height-p);font-style:var(--ptc-font-style-italic);color:var(--color-gray-10);margin:var(--ptc-element-spacing-04) 0}:host(.plain-quote) .quote-content{flex-basis:auto}:host(.plain-quote) .quote-content .quote-name{display:block;margin-bottom:var(--ptc-element-spacing-07);font-size:var(--ptc-font-size-x-small)}";
 
-const PtcQuote = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.quoteType = "image-quote";
-    this.quoteName = 'John Smith';
-    this.ctaText = undefined;
-    this.ctaUrl = undefined;
-    this.imgSrc = undefined;
-    this.imgTitle = undefined;
-  }
-  getImageTitle() {
-    return (index.h("div", { class: "our-leadership" }, index.h("div", { class: "line" }, index.h("div", { class: "green-line" }), index.h("div", { class: "grey-line" })), index.h("p", null, this.imgTitle)));
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h(index.Host, { class: classMap }, this.imgSrc ? (index.h("div", { class: "quote-media" }, this.imgSrc ? index.h("img", { src: this.imgSrc, alt: this.imgTitle ? this.imgTitle : 'quote Image' }) : null, this.imgTitle ? this.getImageTitle() : null)) : null, index.h("div", { class: "quote-content" }, this.quoteType == 'image-quote' ? index.h("div", { class: 'quotemarks', innerHTML: QuotationMark }) : null, index.h("blockquote", null, index.h("p", null, index.h("slot", null)), index.h("span", { class: "quote-name" }, this.quoteName ? this.quoteName : null), this.ctaText && this.ctaUrl ? (index.h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": this.ctaUrl }, this.ctaText)) : null))));
-  }
-  getCssClassMap() {
-    return {
-      [this.quoteType]: true
-    };
-  }
-};
+const PtcQuote = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.quoteType = "image-quote";
+    this.quoteName = 'John Smith';
+    this.ctaText = undefined;
+    this.ctaUrl = undefined;
+    this.imgSrc = undefined;
+    this.imgTitle = undefined;
+  }
+  getImageTitle() {
+    return (index.h("div", { class: "our-leadership" }, index.h("div", { class: "line" }, index.h("div", { class: "green-line" }), index.h("div", { class: "grey-line" })), index.h("p", null, this.imgTitle)));
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, { class: classMap }, this.imgSrc ? (index.h("div", { class: "quote-media" }, this.imgSrc ? index.h("img", { src: this.imgSrc, alt: this.imgTitle ? this.imgTitle : 'quote Image' }) : null, this.imgTitle ? this.getImageTitle() : null)) : null, index.h("div", { class: "quote-content" }, this.quoteType == 'image-quote' ? index.h("div", { class: 'quotemarks', innerHTML: QuotationMark }) : null, index.h("blockquote", null, index.h("p", null, index.h("slot", null)), index.h("span", { class: "quote-name" }, this.quoteName ? this.quoteName : null), this.ctaText && this.ctaUrl ? (index.h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": this.ctaUrl }, this.ctaText)) : null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.quoteType]: true
+    };
+  }
+};
 PtcQuote.style = ptcQuoteCss;
 
 exports.ptc_quote = PtcQuote;