@ptcwebops/ptcw-design 0.8.4 → 0.8.7

package/dist/collection/components/ptc-mobile-select/ptc-mobile-select.css

@@ -1,4 +1,10 @@
-.mobileSelect {
+/*
+* mobile-select v1.3.2
+* Homepage: https://github.com/onlyhom/mobile-select
+* Released under the MIT License.
+* (c) 2017-present
+*/
+.ms-mobile-select {
   position: relative;
   z-index: 0;
   opacity: 0;
@@ -6,24 +12,23 @@
   -webkit-transition: opacity 0.4s, z-index 0.4s;
   transition: opacity 0.4s, z-index 0.4s;
 }
-.mobileSelect * {
+.ms-mobile-select * {
   margin: 0;
   padding: 0;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
-.mobileSelect .grayLayer {
+.ms-mobile-select .ms-gray-layer {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
-  background: #eee;
   background: rgba(0, 0, 0, 0.7);
   z-index: 888;
   display: block;
 }
-.mobileSelect .content {
+.ms-mobile-select .ms-content {
   width: 100%;
   display: block;
   position: fixed;
@@ -35,62 +40,63 @@
   left: 0;
   background: white;
 }
-.mobileSelect .content .fixWidth {
+.ms-mobile-select .ms-fix-width {
   width: 90%;
   margin: 0 auto;
   position: relative;
 }
-.mobileSelect .content .fixWidth:after {
+.ms-mobile-select .ms-fix-width:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
 }
-.mobileSelect .content .btnBar {
-  border-bottom: 1px solid #DCDCDC;
+.ms-mobile-select .ms-btn-bar {
+  border-bottom: 1px solid #dcdcdc;
   font-size: 15px;
   height: 45px;
   position: relative;
   text-align: center;
   line-height: 45px;
 }
-.mobileSelect .content .btnBar .cancel,
-.mobileSelect .content .btnBar .ensure {
+.ms-mobile-select .ms-cancel,
+.ms-mobile-select .ms-ensure {
   height: 45px;
   width: 55px;
   cursor: pointer;
   position: absolute;
   top: 0;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.mobileSelect .content .btnBar .cancel {
+.ms-mobile-select .ms-cancel {
   left: 0;
   color: #666;
 }
-.mobileSelect .content .btnBar .ensure {
+.ms-mobile-select .ms-ensure {
   right: 0;
   color: #1e83d3;
 }
-.mobileSelect .content .btnBar .title {
+.ms-mobile-select .ms-title {
   font-size: 15px;
   padding: 0 15%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.mobileSelect .content .panel:after {
+.ms-mobile-select .ms-panel:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
 }
-.mobileSelect .content .panel .wheels {
+.ms-mobile-select .ms-wheels {
   width: 100%;
   height: 200px;
   overflow: hidden;
 }
-.mobileSelect .content .panel .wheel {
+.ms-mobile-select .ms-wheel {
   position: relative;
   z-index: 0;
   float: left;
@@ -100,15 +106,11 @@
   -webkit-transition: width 0.3s ease;
   transition: width 0.3s ease;
 }
-.mobileSelect .content .panel .wheel .selectContainer {
+.ms-mobile-select .ms-select-container {
   display: block;
   text-align: center;
-  -webkit-transition: -webkit-transform 0.18s ease-out;
-  transition: -webkit-transform 0.18s ease-out;
-  transition: transform 0.18s ease-out;
-  transition: transform 0.18s ease-out, -webkit-transform 0.18s ease-out;
 }
-.mobileSelect .content .panel .wheel .selectContainer li {
+.ms-mobile-select .ms-select-container li {
   font-size: 15px;
   display: block;
   height: 40px;
@@ -117,8 +119,9 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.mobileSelect .content .panel .selectLine {
+.ms-mobile-select .ms-select-line {
   height: 40px;
   width: 100%;
   position: absolute;
@@ -126,28 +129,34 @@
   pointer-events: none;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  border-top: 1px solid #DCDCDC;
-  border-bottom: 1px solid #DCDCDC;
+  border-top: 1px solid #dcdcdc;
+  border-bottom: 1px solid #dcdcdc;
 }
-.mobileSelect .content .panel .shadowMask {
+.ms-mobile-select .ms-shadow-mask {
   position: absolute;
   top: 0;
   width: 100%;
   height: 200px;
-  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(rgba(255, 255, 255, 0)), to(#ffffff));
-  background: -webkit-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0), #ffffff);
-  background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0), #ffffff);
+  background: linear-gradient(to bottom, #fffffff5, #ffffffcc 25%, #ffffff00 49%, #ffffff00 51%, #ffffffcc 75%, #fffffff5);
   opacity: 0.9;
   pointer-events: none;
 }
-.mobileSelect-show {
+.ms-mobile-select.ms-show {
   opacity: 1;
   z-index: 10000;
   visibility: visible;
 }
-.mobileSelect-show .content {
+.ms-mobile-select.ms-show .ms-content {
   bottom: 0;
 }
+.ms-default-trigger {
+  min-height: 1em;
+  color: #888;
+}
+/** Prevent Page Scrolling When a Modal is Open */
+body.ms-show {
+  overflow-y: hidden;
+}
 
 .mobile-select-wrapper {
   display: block;

package/dist/collection/components/ptc-overlay/ptc-overlay.css

@@ -35,6 +35,10 @@
   background: rgba(0, 0, 0, 0.66);
 }
 
+:host(.black-5) {
+  background: rgba(0, 0, 0, 0.76);
+}
+
 @media only screen and (min-width: 768px) {
   :host(.black-1) {
     background: linear-gradient(270deg, rgba(32, 38, 42, 0) 33.33%, var(--color-gray-12) 100%);

package/dist/collection/components/ptc-overlay/ptc-overlay.js

@@ -6,6 +6,9 @@ export class PtcOverlay {
     this.overlayZIndex = 'z-index-auto';
     this.styles = undefined;
   }
+  async setOverlay(overlayName) {
+    this.filterColor = overlayName;
+  }
   render() {
     const classMap = this.getCssClassMap();
     return h(Host, { class: classMap });
@@ -14,7 +17,7 @@ export class PtcOverlay {
     return {
       [this.filterColor]: !!this.filterColor ? true : false,
       [this.borderRadius]: !!this.borderRadius ? true : false,
-      [this.overlayZIndex]: true
+      [this.overlayZIndex]: true,
     };
   }
   static get is() { return "ptc-overlay"; }
@@ -35,8 +38,8 @@ export class PtcOverlay {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'blue' | 'red' | 'orange' | 'green' | 'black-1' | 'black-2' | 'black-3' | 'slate-grey' | 'bright-blue' | 'bright-red' | 'bright-orange' | 'bright-green' | 'bright-slate-grey'",
-          "resolved": "\"black-1\" | \"black-2\" | \"black-3\" | \"blue\" | \"bright-blue\" | \"bright-green\" | \"bright-orange\" | \"bright-red\" | \"bright-slate-grey\" | \"green\" | \"orange\" | \"red\" | \"slate-grey\"",
+          "original": "| 'blue'\r\n    | 'red'\r\n    | 'orange'\r\n    | 'green'\r\n    | 'black-1'\r\n    | 'black-2'\r\n    | 'black-3'\r\n    | 'black-4'\r\n    | 'black-5'\r\n    | 'slate-grey'\r\n    | 'bright-blue'\r\n    | 'bright-red'\r\n    | 'bright-orange'\r\n    | 'bright-green'\r\n    | 'bright-slate-grey'\r\n    | string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
@@ -102,4 +105,27 @@ export class PtcOverlay {
       }
     };
   }
+  static get methods() {
+    return {
+      "setOverlay": {
+        "complexType": {
+          "signature": "(overlayName: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
 }

package/dist/collection/components/ptc-para/ptc-para.js

@@ -11,14 +11,6 @@ export class PtcPara {
     this.ellipsisLineCutoff = undefined;
     this.paraZIndex = undefined;
   }
-  // componentDidLoad(){
-  //   const slotSelector = this.el.shadowRoot.querySelector('slot');
-  //   const tooltipEle = slotSelector.getElementsByTagName('ptc-tooltip')[0];
-  //   console.log('test: ' + tooltipEle);
-  //   if(tooltipEle){
-  //     tooltipEle.style.zIndex = '9';
-  //   }
-  // }
   render() {
     const classMap = this.getCssClassMap();
     const colorClass = this.addWhiteClass();

package/dist/collection/components/ptc-picture/ptc-picture.js

@@ -43,7 +43,6 @@ export class PtcPicture {
           if (entry.isIntersecting) {
             const image = this.el.shadowRoot.querySelector('img');
             image.src = this.setResponsiveBg();
-            console.log('loaded');
             lazyLoadImages.unobserve(image);
           }
         });
@@ -71,7 +70,6 @@ export class PtcPicture {
       el = backgrounds[i];
       elData = el.getAttribute('data-' + currentBreakpoint);
       if (elData !== null) {
-        // console.log('img src= ' + elData);
         return elData;
       }
       else {

package/dist/collection/components/ptc-readmore/ptc-readmore.css

@@ -28,6 +28,9 @@
 .box .line5 {
   -webkit-line-clamp: 5;
 }
+.box .line10 {
+  -webkit-line-clamp: 10;
+}
 .box input ~ label {
   display: block;
   position: relative;
@@ -40,7 +43,7 @@
   text-decoration-line: underline;
   color: var(--color-blue-07);
   text-align: right;
-  transform: translateX(-36px);
+  margin-right: var(--ptc-element-spacing-07);
 }
 .box .z-auto {
   z-index: auto;
@@ -58,9 +61,61 @@
   z-index: 999;
 }
 .box input:checked + .read-more-text {
-  -webkit-line-clamp: unset;
+  -webkit-line-clamp: unset !important;
 }
-.box input:checked ~ label,
 .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-blue-07);
+}
+: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;
 }

package/dist/collection/components/ptc-readmore/ptc-readmore.js

@@ -2,9 +2,16 @@ import { Host, h } from '@stencil/core';
 export class PtcReadmore {
   constructor() {
     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';
   }
   addBtnTruncated() {
     const appRoot = this.el.shadowRoot;
@@ -16,13 +23,30 @@ export class PtcReadmore {
   componentDidLoad() {
     this.addBtnTruncated();
   }
+  // click event handler
+  handleClick(event) {
+    ;
+    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');
+  }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: this.display }, h("div", { class: classMap }, h("input", { type: "checkbox", id: "expanded" }), h("p", { class: `read-more-text ${this.visibleLines}` }, h("slot", null)), h("label", { htmlFor: "expanded", role: "button", class: this.zIndex }, this.moreText))));
+    return (h(Host, { class: this.display }, h("div", { class: classMap }, h("input", { type: "checkbox", id: "expanded", onClick: (e) => this.handleClick(e) }), h("p", { class: `read-more-text ${this.visibleLines}`, style: { WebkitLineClamp: `${this.visibleLinesCustom}` } }, h("slot", null)), h("label", { htmlFor: "expanded", role: "button", class: `${this.zIndex} read-more-cta-label`, style: { textAlign: `${this.readMorePosition}` } }, h("span", null, this.moreText)))));
   }
   getCssClassMap() {
     return {
       ['box']: true,
+      [this.color]: true,
+      [this.size]: true,
+      ['add-icon']: this.isIcon
     };
   }
   static get is() { return "ptc-readmore"; }
@@ -41,14 +65,14 @@ export class PtcReadmore {
     return {
       "moreText": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "customize read more text"
@@ -57,6 +81,41 @@ export class PtcReadmore {
         "reflect": false,
         "defaultValue": "'read more'"
       },
+      "lessText": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "customize less more text"
+        },
+        "attribute": "less-text",
+        "reflect": false
+      },
+      "readMorePosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Read more text position: left or right"
+        },
+        "attribute": "read-more-position",
+        "reflect": false,
+        "defaultValue": "'right'"
+      },
       "display": {
         "type": "string",
         "mutable": false,
@@ -82,8 +141,8 @@ export class PtcReadmore {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'line1' | 'line2' | 'line3' | 'line4' | 'line5'",
-          "resolved": "\"line1\" | \"line2\" | \"line3\" | \"line4\" | \"line5\"",
+          "original": "'line1' | 'line2' | 'line3' | 'line4' | 'line5'  | 'line10'",
+          "resolved": "\"line1\" | \"line10\" | \"line2\" | \"line3\" | \"line4\" | \"line5\"",
           "references": {}
         },
         "required": false,
@@ -96,6 +155,23 @@ export class PtcReadmore {
         "reflect": false,
         "defaultValue": "'line2'"
       },
+      "visibleLinesCustom": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "visible lines custom numebr"
+        },
+        "attribute": "visible-lines-custom",
+        "reflect": false
+      },
       "zIndex": {
         "type": "string",
         "mutable": false,
@@ -113,6 +189,78 @@ export class PtcReadmore {
         "attribute": "z-index",
         "reflect": false,
         "defaultValue": "'z-auto'"
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Input element state"
+        },
+        "attribute": "checked",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'small' | 'medium' | 'large'",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size: Font size of the read more text. Options small=16px | medium=18px | large=24px"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'small'"
+      },
+      "isIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon: if true show up/down icon besides text"
+        },
+        "attribute": "is-icon",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'blue' | 'gray' | 'green' | 'initial'",
+          "resolved": "\"blue\" | \"gray\" | \"green\" | \"initial\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "color: Read more text color. Options: default is blue.  'blue' | 'gray' | 'green' | 'initial'"
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "'blue'"
       }
     };
   }

package/dist/collection/components/ptc-spacer/ptc-spacer.css

@@ -316,7 +316,7 @@
 	display: none
 }
 
-@media (min-width: 76.25em) {
+@media (min-width: 75em) {
 	:host(.ptc-spacer-xx-large) {
 		display: block
 	}