@ptcwebops/ptcw-design 0.7.4 → 0.7.6

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

@@ -4,112 +4,112 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b3fabe79.js');
 
-const ptcPagenationCss = ":host{display:block}.events-filter{padding:20px 32px 20px 0;text-align:center}@media (min-width: 992px){.events-filter{padding:10px 40px 10px 0px}}.events-filter .pagenation-arrow{width:40px;height:40px;margin:0 15px;vertical-align:middle}.show-page{display:inline}.hide-page{display:none}.prev-text{display:none}.last-text{display:none}@media (min-width: 992px){.prev-text{display:inline;cursor:pointer}.last-text{display:inline;cursor:pointer}}.events-filter-item{font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-semibold);font-stretch:normal;font-style:var(--ptc-font-style-normal);line-height:var(--ptc-line-height-denser);letter-spacing:var(--ptc-letter-spacing-normal);text-align:left;padding:6px;color:var(--color-gray-10);text-decoration:none}.events-filter .active{font-family:var(--ptc-font-latin);border-bottom:2px solid var(--color-green-13);font-weight:var(--ptc-font-weight-semibold)}.events-filter-item:hover,.events-filter-item:focus{text-decoration:none;outline:0;color:var(--color-green-14)}.events-filter .disabled{color:var(--color-white-01)}.events-filter-dots{padding:0rem;font-weight:var(--ptc-font-weight-extrabold);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-xx-small);font-stretch:normal;font-style:var(--ptc-font-style-normal);line-height:var(--ptc-line-height-denser);letter-spacing:var(--ptc-letter-spacing-normal);text-align:left;color:var(--color-gray-10);text-decoration:none}.events-disable-arrows{opacity:0.35}.events-enable-arrows{opacity:1}.events-small-dots{height:60px;margin-top:-25px}@media (min-width: 992px){.events-small-dots{height:80px;margin-top:-40px}}.last-page{transform:rotate(180deg)}";
+const ptcPagenationCss = ":host{display:block}.events-filter{padding:20px 32px 20px 0;text-align:center}@media (min-width: 992px){.events-filter{padding:10px 40px 10px 0px}}.events-filter .pagenation-arrow{width:40px;height:40px;margin:0 15px;vertical-align:middle}.show-page{display:inline}.hide-page{display:none}.prev-text{display:none}.last-text{display:none}@media (min-width: 992px){.prev-text{display:inline}.last-text{display:inline}}.events-filter-item{font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-semibold);font-stretch:normal;font-style:var(--ptc-font-style-normal);line-height:var(--ptc-line-height-denser);letter-spacing:var(--ptc-letter-spacing-normal);text-align:left;padding:6px;color:var(--color-gray-10);text-decoration:none}.events-filter .active{font-family:var(--ptc-font-latin);border-bottom:2px solid var(--color-green-13);font-weight:var(--ptc-font-weight-semibold)}.events-filter-item:hover,.events-filter-item:focus{text-decoration:none;outline:0;color:var(--color-green-14)}span.events-filter-item:hover,span.events-filter-item:focus{text-decoration:none;outline:0;color:var(--color-gray-10)}span.events-filter-item.disabled{color:var(--color-white-01)}.events-filter .disabled{color:var(--color-white-01)}.events-filter-dots{padding:0rem;font-weight:var(--ptc-font-weight-extrabold);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-xx-small);font-stretch:normal;font-style:var(--ptc-font-style-normal);line-height:var(--ptc-line-height-denser);letter-spacing:var(--ptc-letter-spacing-normal);text-align:left;color:var(--color-gray-10);text-decoration:none}.events-disable-arrows{opacity:0.35}.events-enable-arrows{opacity:1}.events-small-dots{height:60px;margin-top:-25px}@media (min-width: 992px){.events-small-dots{height:80px;margin-top:-40px}}.last-page{transform:rotate(180deg)}";
 
-let PtcPagenation = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.pageClicked = index.createEvent(this, "pageClicked", 7);
-    this.numberOfItems = 9; //page size
-    this.previousValue = "Previous";
-    this.lastValue = "Next";
-    this.pageNumbers = [];
-    this.minPageNumber = 1;
-    this.maxPageNumber = 4;
-    this.clickedPageNumber = 1;
-    this.appendArray = true;
-    this.prevArrowImg = "/dist/ptc/images/sidescroll-left-curved.svg";
-    this.nextArrowImg = "/dist/ptc/images/sidescroll-right-curved.svg";
-    this.handleClick = () => {
-      if (this.clickedPageNumber < this.getPageCount()) {
-        if (this.clickedPageNumber + 1 <= this.maxPageNumber) {
-          this.handleClickPage(this.clickedPageNumber + 1);
-        }
-        else {
-          this.minPageNumber = this.minPageNumber + 4;
-          this.clickedPageNumber = this.clickedPageNumber + 1;
-          this.appendArray = true;
-          this.pageNumbers = [...this.pageNumbers];
-          this.pageClicked.emit(this.clickedPageNumber);
-        }
-      }
-    };
-    this.handleClickPrev = () => {
-      if (this.clickedPageNumber > 1) {
-        if (this.clickedPageNumber - 1 >= this.minPageNumber) {
-          this.handleClickPage(this.clickedPageNumber - 1);
-        }
-        else {
-          this.minPageNumber = this.minPageNumber - 4;
-          this.clickedPageNumber = this.clickedPageNumber - 1;
-          this.appendArray = true;
-          this.pageNumbers = [...this.pageNumbers];
-          this.pageClicked.emit(this.clickedPageNumber);
-        }
-      }
-    };
-    this.getPageCount = () => {
-      let pageCount = 0;
-      if (this.totalCount != 0) {
-        if (this.totalCount % this.numberOfItems == 0) {
-          pageCount = this.totalCount / this.numberOfItems;
-        }
-        else {
-          pageCount = this.totalCount / this.numberOfItems + 1;
-        }
-      }
-      return Math.floor(pageCount);
-    };
-    this.getIndex = (appendarr) => {
-      //var games : string[] = [];
-      //let games : HTMLElement[] = [];
-      //let items: pageItem[] = [];
-      if (appendarr) {
-        let pageCountVal = this.getPageCount();
-        this.maxPageNumber = pageCountVal >= this.minPageNumber + 3 ? this.minPageNumber + 3 : pageCountVal;
-        this.pageNumbers = [];
-        for (let i = this.minPageNumber; i <= this.maxPageNumber; i++) {
-          let id = i + "Id";
-          let isItemActive = false;
-          if (i == this.clickedPageNumber) {
-            isItemActive = true;
-          }
-          // if (i > 4)
-          // {
-          //     hideShowPageClass = " hide-page";
-          // }
-          const newPageItem = {
-            id: id,
-            isActive: isItemActive,
-            dataPage: i
-          };
-          this.pageNumbers = [...this.pageNumbers, newPageItem];
-          //games.push(<a href="#" data-url={id} data-page={i} class={classValue}>i</a>);
-        }
-      }
-      return this.pageNumbers;
-    };
-  }
-  render() {
-    let pageCountValue = this.getPageCount();
-    this.pageNumbers = [...this.getIndex(this.appendArray)];
-    return (index.h("div", { class: "events-filter" }, index.h("span", { class: this.clickedPageNumber == 1 ? "events-filter-item disabled prev-text" : "events-filter-item prev-text" }, this.previousValue), index.h("img", { src: this.prevArrowImg, onClick: this.handleClickPrev, class: this.clickedPageNumber == 1 ? "pagenation-arrow prev-page events-disable-arrows" : "pagenation-arrow prev-page" }), this.pageNumbers.map(anchoritem => {
-      return (index.h("a", { href: "#", "data-url": anchoritem.id, "data-page": anchoritem.dataPage, class: anchoritem.isActive ? "events-filter-item active" : "events-filter-item", onClick: () => this.handleClickPage(anchoritem.dataPage) }, anchoritem.dataPage));
-    }), pageCountValue > this.maxPageNumber ? (index.h("span", { class: "events-filter-dots" }, ". . .")) : null, index.h("img", { src: this.nextArrowImg, onClick: this.handleClick, class: this.clickedPageNumber == pageCountValue ? "pagenation-arrow last-page events-disable-arrows" : "pagenation-arrow last-page" }), index.h("span", { class: this.clickedPageNumber == pageCountValue ? "events-filter-item disabled last-text" : "events-filter-item last-text" }, this.lastValue)));
-  }
-  handleClickPage(clickedPage) {
-    this.clickedPageNumber = clickedPage;
-    let newArray = [];
-    this.appendArray = false;
-    newArray = [...this.pageNumbers];
-    newArray.map(item => {
-      item.dataPage == clickedPage ? item.isActive = true : item.isActive = false;
-    });
-    this.pageNumbers = null;
-    this.pageNumbers = [...newArray];
-    this.pageClicked.emit(clickedPage);
-  }
-};
+let PtcPagenation = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.pageClicked = index.createEvent(this, "pageClicked", 7);
+    this.numberOfItems = 9; //page size
+    this.previousValue = "Previous";
+    this.lastValue = "Next";
+    this.pageNumbers = [];
+    this.minPageNumber = 1;
+    this.maxPageNumber = 4;
+    this.clickedPageNumber = 1;
+    this.appendArray = true;
+    this.prevArrowImg = "/dist/ptc/images/sidescroll-left-curved.svg";
+    this.nextArrowImg = "/dist/ptc/images/sidescroll-right-curved.svg";
+    this.handleClick = () => {
+      if (this.clickedPageNumber < this.getPageCount()) {
+        if (this.clickedPageNumber + 1 <= this.maxPageNumber) {
+          this.handleClickPage(this.clickedPageNumber + 1);
+        }
+        else {
+          this.minPageNumber = this.minPageNumber + 4;
+          this.clickedPageNumber = this.clickedPageNumber + 1;
+          this.appendArray = true;
+          this.pageNumbers = [...this.pageNumbers];
+          this.pageClicked.emit(this.clickedPageNumber);
+        }
+      }
+    };
+    this.handleClickPrev = () => {
+      if (this.clickedPageNumber > 1) {
+        if (this.clickedPageNumber - 1 >= this.minPageNumber) {
+          this.handleClickPage(this.clickedPageNumber - 1);
+        }
+        else {
+          this.minPageNumber = this.minPageNumber - 4;
+          this.clickedPageNumber = this.clickedPageNumber - 1;
+          this.appendArray = true;
+          this.pageNumbers = [...this.pageNumbers];
+          this.pageClicked.emit(this.clickedPageNumber);
+        }
+      }
+    };
+    this.getPageCount = () => {
+      let pageCount = 0;
+      if (this.totalCount != 0) {
+        if (this.totalCount % this.numberOfItems == 0) {
+          pageCount = this.totalCount / this.numberOfItems;
+        }
+        else {
+          pageCount = this.totalCount / this.numberOfItems + 1;
+        }
+      }
+      return Math.floor(pageCount);
+    };
+    this.getIndex = (appendarr) => {
+      //var games : string[] = [];
+      //let games : HTMLElement[] = [];
+      //let items: pageItem[] = [];
+      if (appendarr) {
+        let pageCountVal = this.getPageCount();
+        this.maxPageNumber = pageCountVal >= this.minPageNumber + 3 ? this.minPageNumber + 3 : pageCountVal;
+        this.pageNumbers = [];
+        for (let i = this.minPageNumber; i <= this.maxPageNumber; i++) {
+          let id = i + "Id";
+          let isItemActive = false;
+          if (i == this.clickedPageNumber) {
+            isItemActive = true;
+          }
+          // if (i > 4)
+          // {
+          //     hideShowPageClass = " hide-page";
+          // }
+          const newPageItem = {
+            id: id,
+            isActive: isItemActive,
+            dataPage: i
+          };
+          this.pageNumbers = [...this.pageNumbers, newPageItem];
+          //games.push(<a href="#" data-url={id} data-page={i} class={classValue}>i</a>);
+        }
+      }
+      return this.pageNumbers;
+    };
+  }
+  render() {
+    let pageCountValue = this.getPageCount();
+    this.pageNumbers = [...this.getIndex(this.appendArray)];
+    return (index.h("div", { class: "events-filter" }, index.h("span", { class: this.clickedPageNumber == 1 ? "events-filter-item disabled prev-text" : "events-filter-item prev-text" }, this.previousValue), index.h("img", { src: this.prevArrowImg, onClick: this.handleClickPrev, class: this.clickedPageNumber == 1 ? "pagenation-arrow prev-page events-disable-arrows" : "pagenation-arrow prev-page" }), this.pageNumbers.map(anchoritem => {
+      return (index.h("a", { href: "#", "data-url": anchoritem.id, "data-page": anchoritem.dataPage, class: anchoritem.isActive ? "events-filter-item active" : "events-filter-item", onClick: () => this.handleClickPage(anchoritem.dataPage) }, anchoritem.dataPage));
+    }), pageCountValue > this.maxPageNumber ? (index.h("span", { class: "events-filter-dots" }, ". . .")) : null, index.h("img", { src: this.nextArrowImg, onClick: this.handleClick, class: this.clickedPageNumber == pageCountValue ? "pagenation-arrow last-page events-disable-arrows" : "pagenation-arrow last-page" }), index.h("span", { class: this.clickedPageNumber == pageCountValue ? "events-filter-item disabled last-text" : "events-filter-item last-text" }, this.lastValue)));
+  }
+  handleClickPage(clickedPage) {
+    this.clickedPageNumber = clickedPage;
+    let newArray = [];
+    this.appendArray = false;
+    newArray = [...this.pageNumbers];
+    newArray.map(item => {
+      item.dataPage == clickedPage ? item.isActive = true : item.isActive = false;
+    });
+    this.pageNumbers = null;
+    this.pageNumbers = [...newArray];
+    this.pageClicked.emit(clickedPage);
+  }
+};
 PtcPagenation.style = ptcPagenationCss;
 
 exports.ptc_pagenation = PtcPagenation;

package/dist/cjs/ptc-previous-url.cjs.entry.js

@@ -6,14 +6,14 @@ const index = require('./index-b3fabe79.js');
 
 const ptcPreviousUrlCss = ":host{display:block;margin-top:var(--ptc-element-spacing-03)}.back-to-videos{display:inline-block;font-family:var(--ptc-font-latin);font-style:normal;font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-dense)}.back-to-videos:hover{text-decoration:underline;text-decoration-color:var(--color-green-07);outline:none}::slotted(*){transform:translate(-2px, -2px)}.backarrow:hover+.back-to-videos{text-decoration:underline;text-decoration-color:var(--color-green-07);outline:none}";
 
-let PtcPreviousUrl = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("list-item", { listType: 'breadcrumb', flushBefore: true, "link-href": this.href }, index.h("ptc-svg-btn", { class: "backarrow", "svg-name": "back-arrow", display: "inline-block" }), index.h("a", { class: "back-to-videos" }, this.text)), index.h("slot", null)));
-  }
-};
+let PtcPreviousUrl = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("list-item", { listType: 'breadcrumb', flushBefore: true, "link-href": this.href }, index.h("ptc-svg-btn", { class: "backarrow", "svg-name": "back-arrow", display: "inline-block" }), index.h("a", { class: "back-to-videos" }, this.text)), index.h("slot", null)));
+  }
+};
 PtcPreviousUrl.style = ptcPreviousUrlCss;
 
 exports.ptc_previous_url = PtcPreviousUrl;

package/dist/cjs/ptc-pricing-block.cjs.entry.js

@@ -6,21 +6,21 @@ const index = require('./index-b3fabe79.js');
 
 const ptcPricingBlockCss = ":host{display:block}:host .ptc-pricing-block{width:100%;background-color:var(--color-gray-02);border-radius:var(--ptc-border-radius-standard);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense);display:block}:host .ptc-pricing-block.active{background-color:var(--color-gray-12);color:var(--color-white)}:host .right-text{font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-extrabold);line-height:var(--ptc-line-height-dense);text-align:right;float:right;margin:15px 20px 15px 15px;display:block}:host .left-text{font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense);text-align:left;margin:15px 15px 15px 20px;display:inline-block}";
 
-let PtcPricingBlock = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h(index.Host, null, index.h("div", { class: classMap }, index.h("span", { class: "left-text" }, index.h("slot", { name: "left-text" })), index.h("span", { class: "right-text" }, index.h("slot", { name: "right-text" })))));
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-pricing-block']: true,
-      ['active']: this.active ? true : false
-    };
-  }
-};
+let PtcPricingBlock = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, null, index.h("div", { class: classMap }, index.h("span", { class: "left-text" }, index.h("slot", { name: "left-text" })), index.h("span", { class: "right-text" }, index.h("slot", { name: "right-text" })))));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-pricing-block']: true,
+      ['active']: this.active ? true : false
+    };
+  }
+};
 PtcPricingBlock.style = ptcPricingBlockCss;
 
 exports.ptc_pricing_block = PtcPricingBlock;

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

@@ -8,31 +8,31 @@ const QuotationMark = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.1
 
 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)}";
 
-let PtcQuote = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Quote Type
-     */
-    this.quoteType = "image-quote";
-    /**
-     * Quote Name
-     */
-    this.quoteName = 'John Smith';
-  }
-  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
-    };
-  }
-};
+let PtcQuote = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Quote Type
+     */
+    this.quoteType = "image-quote";
+    /**
+     * Quote Name
+     */
+    this.quoteName = 'John Smith';
+  }
+  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;

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

@@ -0,0 +1,118 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b3fabe79.js');
+
+const ptcReadmoreCss = ":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}.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 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-blue-07);text-align:right;transform:translateX(-36px)}.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}.box input:checked~label,.box .read-more-text:not(.truncated)~label{display:none}";
+
+let PtcReadmore = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * customize read more text
+     */
+    this.moreText = 'read more';
+    /**
+     *
+     * @returns string
+     */
+    this.display = 'inline';
+    /**
+     *  visible lines
+     */
+    this.visibleLines = 'line2';
+    /**
+     * index of hover lable
+     */
+    this.zIndex = 'z-auto';
+  }
+  addBtnTruncated() {
+    const appRoot = this.el.shadowRoot;
+    const ps = appRoot.querySelectorAll('.read-more-text');
+    ps.forEach(p => {
+      p.classList[p.scrollHeight > p.clientHeight ? 'add' : 'remove']('truncated');
+    });
+  }
+  componentDidLoad() {
+    this.addBtnTruncated();
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, { class: this.display }, index.h("div", { class: classMap }, index.h("input", { type: "checkbox", id: "expanded" }), index.h("p", { class: `read-more-text ${this.visibleLines}` }, index.h("slot", null)), index.h("label", { htmlFor: "expanded", role: "button", class: this.zIndex }, this.moreText))));
+  }
+  getCssClassMap() {
+    return {
+      ['box']: true,
+    };
+  }
+  get el() { return index.getElement(this); }
+};
+PtcReadmore.style = ptcReadmoreCss;
+
+const ptcTooltipCss = ":host{position:relative}:host(.inline){display:inline}:host(.block){display:block}.text-ellipsis{position:relative;display:inline}.text-ellipsis:not(.truncated){z-index:auto !important}.z-auto{z-index:auto}.z-1{z-index:1}.z-2{z-index:2}.z-3{z-index:3}.z-999{z-index:999}.tooltip{position:absolute;padding:8px;color:var(--color-white);font-size:var(--ptc-font-size-xxx-small);font-weight:var(--ptc-font-weight-semibold);background:var(--color-gray-09);box-shadow:0px 2px 4px rgba(0, 0, 0, 0.3);border:none;border-radius:2px;width:273px;height:auto;visibility:hidden}.tooltip.bottom{bottom:-12px;transform:translateY(100%)}.tooltip.bottom::after{top:1px;left:50%;transform:translate(-50%, -100%);border:8px solid transparent;border-bottom:8px solid var(--color-gray-09)}.tooltip.left{bottom:-12px;transform:translate(-80%, 100%)}.tooltip.left::after{top:1px;right:8px;transform:translateY(-100%);border:8px solid transparent;border-bottom:8px solid var(--color-gray-09)}.tooltip.right{bottom:-12px;transform:translateY(100%);right:0px}.tooltip.right::after{top:1px;left:8px;transform:translateY(-100%);border:8px solid transparent;border-bottom:8px solid var(--color-gray-09)}.tooltip.top{top:-8px;transform:translateY(-100%)}.tooltip.top::after{left:50%;bottom:1px;transform:translate(-50%, 100%);border:8px solid transparent;border-top:8px solid var(--color-gray-09)}.truncated{cursor:help}.truncated:hover+.tooltip{visibility:visible;z-index:9999}.tooltip::after{content:\"\";position:absolute}";
+
+let PtcTooltip = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Component Display
+     * please don't set it to be inline-block
+     */
+    this.textDisplay = 'inline';
+    /**
+     * max length
+     */
+    this.maxLength = 45;
+    /**
+     * Ellipsis apply to X lines
+     * @returns  string
+     */
+    // @Prop() textLines?: 'line-1' | 'line-2' | 'line-4' | 'line-1';
+    /**
+     * injected Description
+     */
+    this.description = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ';
+    /**
+     * index of hover element
+     */
+    this.zIndex = 'z-auto';
+    /**
+     * Tooltip position
+     */
+    this.position = 'bottom';
+  }
+  // @Listen('resize', { target: 'window' })
+  // addTruncatedTooltip() {
+  //   // //const appRoot = this.el.shadowRoot;
+  //   // const truncatedText = this.el.shadowRoot.querySelectorAll('.text-ellipsis');
+  //   // truncatedText.forEach(t => {
+  //   //   // console.log('scrollHeight: ' + t.scrollHeight +  ' clientHeight: ' + t.clientHeight);
+  //   //   t.classList[t.length > t.clientHeight ? 'add' : 'remove']('truncated');
+  //   // });
+  // }
+  // componentDidLoad() {
+  //   this.addTruncatedTooltip();
+  // }
+  render() {
+    const classMap = this.getCssClassMap();
+    let truncatedText = this.description.substring(0, this.maxLength);
+    if (this.description.length > this.maxLength) {
+      truncatedText += '... ';
+    }
+    return (index.h(index.Host, { class: this.textDisplay }, this.styles && index.h("style", null, this.styles), index.h("div", { class: classMap }, truncatedText), index.h("div", { class: `tooltip ${this.position}` }, this.description)));
+  }
+  getCssClassMap() {
+    return {
+      // [this.textLines]: true,
+      ['text-ellipsis']: true,
+      [this.zIndex]: true,
+      ['truncated']: this.description.length > this.maxLength ? true : false
+    };
+  }
+  get el() { return index.getElement(this); }
+};
+PtcTooltip.style = ptcTooltipCss;
+
+exports.ptc_readmore = PtcReadmore;
+exports.ptc_tooltip = PtcTooltip;

package/dist/cjs/ptc-responsive-wrapper.cjs.entry.js

@@ -6,60 +6,60 @@ const index = require('./index-b3fabe79.js');
 
 const ptcResponsiveWrapperCss = ":host{display:block}";
 
-let PtcResponsiveWrapper = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  componentDidLoad() {
-    this.ro = new ResizeObserver(entries => {
-      for (const entry of entries) {
-        this.applySizeClasses(entry.contentRect.width);
-      }
-    });
-    this.ro.observe(this.element);
-  }
-  disconnectedCallback() {
-    this.ro.disconnect();
-  }
-  applySizeClasses(size) {
-    let xsmall = false;
-    let small = false;
-    let medium = false;
-    let large = false;
-    let xlarge = false;
-    let xxlarge = false;
-    let large2k = false;
-    let large4k = false;
-    if (size >= 2600)
-      large4k = true;
-    else if (size >= 1980)
-      large2k = true;
-    else if (size >= 1600)
-      xxlarge = true;
-    else if (size >= 1440)
-      xlarge = true;
-    else if (size >= 1200)
-      large = true;
-    else if (size >= 992)
-      medium = true;
-    else if (size >= 768)
-      small = true;
-    else
-      xsmall = true;
-    this.element.classList.toggle("xsmall", xsmall);
-    this.element.classList.toggle("small", small);
-    this.element.classList.toggle("medium", medium);
-    this.element.classList.toggle("large", large);
-    this.element.classList.toggle("xlarge", xlarge);
-    this.element.classList.toggle("xxlarge", xxlarge);
-    this.element.classList.toggle("large2k", large2k);
-    this.element.classList.toggle("large4k", large4k);
-  }
-  render() {
-    return (index.h("div", null, index.h("slot", null)));
-  }
-  get element() { return index.getElement(this); }
-};
+let PtcResponsiveWrapper = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  componentDidLoad() {
+    this.ro = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        this.applySizeClasses(entry.contentRect.width);
+      }
+    });
+    this.ro.observe(this.element);
+  }
+  disconnectedCallback() {
+    this.ro.disconnect();
+  }
+  applySizeClasses(size) {
+    let xsmall = false;
+    let small = false;
+    let medium = false;
+    let large = false;
+    let xlarge = false;
+    let xxlarge = false;
+    let large2k = false;
+    let large4k = false;
+    if (size >= 2600)
+      large4k = true;
+    else if (size >= 1980)
+      large2k = true;
+    else if (size >= 1600)
+      xxlarge = true;
+    else if (size >= 1440)
+      xlarge = true;
+    else if (size >= 1200)
+      large = true;
+    else if (size >= 992)
+      medium = true;
+    else if (size >= 768)
+      small = true;
+    else
+      xsmall = true;
+    this.element.classList.toggle("xsmall", xsmall);
+    this.element.classList.toggle("small", small);
+    this.element.classList.toggle("medium", medium);
+    this.element.classList.toggle("large", large);
+    this.element.classList.toggle("xlarge", xlarge);
+    this.element.classList.toggle("xxlarge", xxlarge);
+    this.element.classList.toggle("large2k", large2k);
+    this.element.classList.toggle("large4k", large4k);
+  }
+  render() {
+    return (index.h("div", null, index.h("slot", null)));
+  }
+  get element() { return index.getElement(this); }
+};
 PtcResponsiveWrapper.style = ptcResponsiveWrapperCss;
 
 exports.ptc_responsive_wrapper = PtcResponsiveWrapper;