@ptcwebops/ptcw-design 1.0.6 → 1.0.8

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

@@ -0,0 +1,274 @@
+import { Host, h } from '@stencil/core';
+export class PtcJumbotron {
+  constructor() {
+    this.jumbotronType = 'light';
+    this.popupVideo = undefined;
+    this.mainTitle = 'Lorem Ipsum Dolor Sit Amet Consectetur';
+    this.subTitle = 'Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Lorem Ipsum Dolor Sit Amet Consectetur Adipisci Lorem Ipsum Dolor Sit Amet';
+    this.pngSrc = undefined;
+    this.gifSrc = undefined;
+    this.bgVideoSrc = undefined;
+    this.bgSrc = undefined;
+    this.contentBackground = undefined;
+    this.contentColor = undefined;
+    this.textAlign = 'left';
+  }
+  handleResize() {
+    this.getContentBackground();
+  }
+  connectedCallback() {
+    this.getContentBackground();
+  }
+  componentDidLoad() {
+    if (!!this.popupVideo) {
+      const selectedBtn = this.el.shadowRoot.querySelector('#j-modal-btn');
+      const PtcModal = this.el.shadowRoot.querySelector('#j-modal');
+      console.log('selected btn: ' + selectedBtn + '; selected Modal: ' + PtcModal);
+      selectedBtn.addEventListener('click', () => {
+        PtcModal.show = true;
+      });
+    }
+  }
+  render() {
+    console.log('render');
+    const classMap = this.getCssClassMap();
+    let mediaElement;
+    switch (this.jumbotronType) {
+      case 'png':
+        mediaElement = (h("div", { class: "mobile-media-image" }, h("ptc-picture", { src: this.pngSrc })));
+        break;
+      case 'gif':
+        mediaElement = (h("div", { class: "mobile-media-image gif-bg" }, h("img", { src: this.gifSrc })));
+        break;
+      case 'dark-video':
+      case 'light-video':
+        mediaElement = h("ptc-background-video", { class: "video-ratio", overlay: false, "video-src": this.bgVideoSrc });
+        break;
+      default:
+        mediaElement = h("ptc-img", { "img-url": this.bgSrc });
+    }
+    return (h(Host, { class: classMap }, h("div", { class: "parent" }, h("div", { class: `div1 image-container ${this.jumbotronType === 'text' ? 'hidden' : ''}` }, mediaElement), h("div", { class: "div2 content-container" }, h("div", { class: "bg-overlay", style: { background: this.contentBackground } }), h("div", { class: "ptc-container content-layout" }, h("max-width-container", { "max-width": "578", breakpoint: 992, "content-align": this.jumbotronType === 'text' ? 'center' : this.textAlign }, h("slot", { name: "breadcrumb" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-title", { type: "h1", upperline: "no-upperline", "title-size": "xxxx-large", "title-height": "densest", "title-weight": "w-8", "title-margin": "margin-flush", "text-align": this.jumbotronType === 'text' ? 'center' : 'left' }, h("ptc-tooltip", { "title-lines": "3", description: this.mainTitle, position: "bottom", styles: `.text-ellipsis{color: ${this.contentColor};}` })), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-margin": "margin-bottom-6", "para-color": "white", "para-line-h": "line-height-p", "para-align": this.jumbotronType === 'text' ? 'center' : 'left' }, h("ptc-tooltip", { "text-lines": "7", description: this.subTitle, position: "bottom", styles: `.ellipsis-by-line-boxing{color: ${this.contentColor};}` })), h("div", { class: `u-flex u-flex-wrap gap-adjustment${this.jumbotronType === 'text' ? ' text-adjustment' : ''}` }, h("slot", { name: "j-cta" }))), !!this.popupVideo
+      ? [
+        h("ptc-modal", { id: "j-modal", show: false, size: "lg", "iframe-url": this.popupVideo }),
+        h("ptc-svg-btn", { id: "j-modal-btn", "svg-name": "play", display: "block", "z-index": 2 }),
+      ]
+      : null, this.jumbotronType === 'png' ? (h("div", { class: "desktop-media-image" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc }))) : null, this.jumbotronType === 'gif' ? (h("div", { class: "desktop-media-image desk-gif-adjustment" }, h("img", { src: this.gifSrc }))) : null)))));
+  }
+  getCssClassMap() {
+    return {
+    // [this.imageZIndex] : true
+    };
+  }
+  getContentBackground() {
+    if (window.innerWidth < 992) {
+      switch (this.jumbotronType) {
+        case 'light':
+        case 'light-video':
+          this.contentBackground = '#F3F3F3';
+          this.contentColor = 'var(--color-gray-10)';
+          break;
+        case 'dark':
+        case 'dark-video':
+          this.contentBackground = 'var(--color-gray-09)';
+          this.contentColor = 'var(--color-white)';
+          break;
+        default:
+          this.contentBackground = 'transparent';
+          this.contentColor = 'var(--color-gray-10)';
+      }
+    }
+    else {
+      switch (this.jumbotronType) {
+        case 'light':
+        case 'light-video':
+          this.contentBackground = 'linear-gradient(90.19deg, rgba(255, 255, 255, 0.9) 62.55%, rgba(228, 231, 233, 0) 99.86%)';
+          this.contentColor = 'var(--color-gray-10)';
+          break;
+        case 'dark':
+        case 'dark-video':
+          this.contentBackground = 'linear-gradient(90deg, rgba(0, 0, 0, 0.63) 52.42%, rgba(40, 47, 53, 0) 100%)';
+          this.contentColor = 'var(--color-white)';
+          break;
+        case 'gif':
+          this.contentBackground = '#F3F3F3';
+          this.contentColor = 'var(--color-gray-10)';
+          break;
+        default:
+          this.contentBackground = 'transparent';
+          this.contentColor = 'var(--color-gray-10)';
+      }
+    }
+  }
+  static get is() { return "ptc-jumbotron"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-jumbotron.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-jumbotron.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "jumbotronType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "jumbotron-type",
+        "reflect": false,
+        "defaultValue": "'light'"
+      },
+      "popupVideo": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "popup-video",
+        "reflect": false
+      },
+      "mainTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "main-title",
+        "reflect": false,
+        "defaultValue": "'Lorem Ipsum Dolor Sit Amet Consectetur'"
+      },
+      "subTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "sub-title",
+        "reflect": false,
+        "defaultValue": "'Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Lorem Ipsum Dolor Sit Amet Consectetur Adipisci Lorem Ipsum Dolor Sit Amet'"
+      },
+      "pngSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "png-src",
+        "reflect": false
+      },
+      "gifSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "gif-src",
+        "reflect": false
+      },
+      "bgVideoSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "bg-video-src",
+        "reflect": false
+      },
+      "bgSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "bg-src",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "contentBackground": {},
+      "contentColor": {},
+      "textAlign": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

package/dist/collection/components/ptc-pricing-tabs/ptc-pricing-tabs.css

@@ -579,6 +579,10 @@
   padding-bottom: 1.5rem;
 }
 
+.u-flex {
+  display: flex;
+}
+
 @media only screen and (min-width: 480px) {
   .u-flex-xs {
     display: flex;
@@ -667,6 +671,14 @@
   align-items: flex-end;
 }
 
+.u-flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.u-flex-wrap {
+  flex-wrap: wrap;
+}
+
 .embed-responsive {
   position: relative;
   display: block;

package/dist/collection/components/ptc-pricing-tabs/ptc-pricing-tabs.js

@@ -45,20 +45,26 @@ export class PtcPricingTabs {
   }
   loadTabData() {
     let dom = MapDOM(this.el);
+    const appendElem = (item) => {
+      if (item) {
+        let tab = new TabItem();
+        tab.id = generateUUID();
+        tab.header = item.header;
+        tab.label = item.productLabel;
+        tab.tag = item.tag;
+        tab.content = item.html;
+        tab.active = item.active == "true";
+        this.tabItems.push(tab);
+      }
+    };
     this.tabItems = new Array();
     if (dom.pricingTab) {
-      dom.pricingTab.map((item) => {
-        if (item) {
-          let tab = new TabItem();
-          tab.id = generateUUID();
-          tab.header = item.header;
-          tab.label = item.productLabel;
-          tab.tag = item.tag;
-          tab.content = item.html;
-          tab.active = item.active == "true";
-          this.tabItems.push(tab);
-        }
-      });
+      if (Array.isArray(dom.pricingTab)) {
+        dom.pricingTab.map(appendElem);
+      }
+      else {
+        appendElem(dom.pricingTab);
+      }
     }
   }
   fireUpdateComponent() {

package/dist/collection/components/ptc-search-field/ptc-search-field.js

@@ -2,12 +2,10 @@ import { h, Host } from '@stencil/core';
 export class PtcSearchField {
   constructor() {
     this.textValue = undefined;
-    this.value = undefined;
     this.placeholderLabel = undefined;
     this.darkTheme = undefined;
   }
   textChangedHandler(event) {
-    this.updateTextValue();
     this.valueChanged.emit({
       'sender': this,
       'event': event,
@@ -22,7 +20,6 @@ export class PtcSearchField {
     });
   }
   keyDownHandler(event) {
-    this.updateTextValue();
     if (event.key == 'Enter') {
       this.clicked.emit({
         'sender': this,
@@ -39,12 +36,6 @@ export class PtcSearchField {
     }
     return result;
   }
-  updateTextValue() {
-    let input = this.el.shadowRoot.querySelector('input');
-    if (input) {
-      this.textValue = input.value;
-    }
-  }
   async clearSearchValue() {
     this.textValue = "";
     let input = this.el.shadowRoot.querySelector('input');
@@ -128,11 +119,6 @@ export class PtcSearchField {
       }
     };
   }
-  static get states() {
-    return {
-      "value": {}
-    };
-  }
   static get events() {
     return [{
         "method": "valueChanged",

package/dist/collection/components/ptc-svg-btn/ptc-svg-btn.js

@@ -3,18 +3,21 @@ import closeSvg from '../../media/svg-imgs/close.svg';
 import arrowSvgLeft from '../../media/svg-imgs/slider-arrow-left.svg';
 import arrowSvgRight from '../../media/svg-imgs/slider-arrow-right.svg';
 import backarrow from '../../media/svg-imgs/Back-arrow.svg';
+import play from '../../media/svg-imgs/play-button-dark.svg';
 export class PtcSvgBtn {
   constructor() {
     this.svgName = 'close';
     this.display = 'block';
+    this.zIndex = undefined;
+    this.styles = undefined;
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, !!this.svgName && this.svgName === 'close' ? h("div", { class: 'svg-close', innerHTML: closeSvg }) : null, !!this.svgName && this.svgName === 'slider-left' ? h("div", { class: 'slider-left', innerHTML: arrowSvgLeft }) : null, !!this.svgName && this.svgName === 'slider-right' ? h("div", { class: 'slider-right', innerHTML: arrowSvgRight }) : null, !!this.svgName && this.svgName === 'back-arrow' ? h("div", { class: 'back-arrow', innerHTML: backarrow }) : null));
+    return (h(Host, Object.assign({ class: classMap }, (this.zIndex !== undefined ? { style: { zIndex: this.zIndex } } : null)), this.styles && h("style", null, this.styles), !!this.svgName && this.svgName === 'close' ? h("div", { class: "svg-close", innerHTML: closeSvg }) : null, !!this.svgName && this.svgName === 'slider-left' ? h("div", { class: "slider-left", innerHTML: arrowSvgLeft }) : null, !!this.svgName && this.svgName === 'slider-right' ? h("div", { class: "slider-right", innerHTML: arrowSvgRight }) : null, !!this.svgName && this.svgName === 'back-arrow' ? h("div", { class: "back-arrow", innerHTML: backarrow }) : null, !!this.svgName && this.svgName === 'play' ? h("div", { class: "play", innerHTML: play }) : null));
   }
   getCssClassMap() {
     return {
-      [this.display]: true
+      [this.display]: true,
     };
   }
   static get is() { return "ptc-svg-btn"; }
@@ -66,6 +69,40 @@ export class PtcSvgBtn {
         "attribute": "display",
         "reflect": false,
         "defaultValue": "'block'"
+      },
+      "zIndex": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Z-Index"
+        },
+        "attribute": "z-index",
+        "reflect": false
+      },
+      "styles": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Injected Styles"
+        },
+        "attribute": "styles",
+        "reflect": false
       }
     };
   }

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

@@ -205,7 +205,7 @@ div.orange h1, div.orange h2, div.orange h3, div.orange h4, div.orange h5, div.o
   text-shadow: 0px 0px var(--ptc-element-spacing-03) var(--color-orange-07);
 }
 div.slate-grey h1, div.slate-grey h2, div.slate-grey h3, div.slate-grey h4, div.slate-grey h5, div.slate-grey h6 {
-  text-shadow: 0px 0px var(--ptc-element-spacing-03) var(--color-grey-07);
+  text-shadow: 0px 0px var(--ptc-element-spacing-03) var(--color-gray-07);
 }
 div.w-3 h1, div.w-3 h2, div.w-3 h3, div.w-3 h4, div.w-3 h5, div.w-3 h6 {
   font-weight: var(--ptc-font-weight-thin);

package/dist/collection/media/svg-imgs/play-button-dark.svg

@@ -0,0 +1,20 @@
+<svg width="84" height="84" viewBox="0 0 84 84" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_241_171)">
+<circle cx="42" cy="38" r="36" fill="#1F2024"/>
+<circle cx="42" cy="38" r="35" stroke="#33A13C" stroke-width="2"/>
+</g>
+<path d="M58 38L34 51.8564L34 24.1436L58 38Z" fill="white"/>
+<defs>
+<filter id="filter0_d_241_171" x="0" y="0" width="84" height="84" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="2" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_241_171"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.231373 0 0 0 0 0.270588 0 0 0 0 0.313726 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_241_171"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_241_171" result="shape"/>
+</filter>
+</defs>
+</svg>

package/dist/custom-elements/index.d.ts

@@ -8,6 +8,12 @@ export const BundleExample: {
   new (): BundleExample;
 };
 
+interface BundleJumbotronExample extends Components.BundleJumbotronExample, HTMLElement {}
+export const BundleJumbotronExample: {
+  prototype: BundleJumbotronExample;
+  new (): BundleJumbotronExample;
+};
+
 interface DropdownItem extends Components.DropdownItem, HTMLElement {}
 export const DropdownItem: {
   prototype: DropdownItem;
@@ -176,6 +182,12 @@ export const PtcImg: {
   new (): PtcImg;
 };
 
+interface PtcJumbotron extends Components.PtcJumbotron, HTMLElement {}
+export const PtcJumbotron: {
+  prototype: PtcJumbotron;
+  new (): PtcJumbotron;
+};
+
 interface PtcLink extends Components.PtcLink, HTMLElement {}
 export const PtcLink: {
   prototype: PtcLink;