@ptcwebops/ptcw-design 0.7.6 → 0.7.8

package/dist/collection/components/ptc-sticky-icons/ptc-sticky-icons.css

@@ -0,0 +1,32 @@
+@media only screen and (min-width: 992px) {
+  :host {
+    z-index: 105;
+    margin: auto;
+    position: sticky;
+    top: 10%;
+    right: 0;
+    float: right;
+    margin-right: -40px;
+  }
+}
+:host .icon-container {
+  padding: var(--ptc-element-spacing-03) 0;
+}
+@media only screen and (min-width: 992px) {
+  :host .icon-container {
+    padding: 0 0 0 var(--ptc-element-spacing-03);
+    display: flex;
+    flex-direction: column;
+  }
+}
+:host ::slotted(ptc-social-share) {
+  margin: 0 var(--ptc-element-spacing-03) 0 0;
+}
+@media only screen and (min-width: 992px) {
+  :host ::slotted(ptc-social-share) {
+    margin: 0 0 var(--ptc-element-spacing-03) 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/dist/collection/components/ptc-sticky-icons/ptc-sticky-icons.js

@@ -0,0 +1,51 @@
+import { Host, h } from '@stencil/core';
+export class PtcStickyIcons {
+  handleResize() {
+    this.setHostLocation();
+  }
+  componentWillLoad() {
+    this.setHostLocation();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "icon-container" }, h("slot", null))));
+  }
+  setHostLocation() {
+    let width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
+    let currEle = this.el;
+    // get the element
+    const element = document.querySelector("ptc-sticky-icons");
+    if (element) {
+      currEle.parentElement.style.position = "relative";
+      if (width < 992) {
+        currEle.parentElement.appendChild(currEle);
+        currEle.parentElement.style.paddingRight = "0px";
+      }
+      else {
+        currEle.parentElement.prepend(currEle);
+        currEle.parentElement.style.paddingRight = "40px";
+      }
+    }
+  }
+  static get is() { return "ptc-sticky-icons"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-sticky-icons.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-sticky-icons.css"]
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

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

@@ -1,22 +1,16 @@
-import { Component, Host, h, Prop } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 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';
 export class PtcSvgBtn {
   constructor() {
-    /**
-     * Display
-     */
+    this.svgName = 'close';
     this.display = 'block';
   }
   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, { 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));
   }
   getCssClassMap() {
     return {
@@ -25,47 +19,54 @@ export class PtcSvgBtn {
   }
   static get is() { return "ptc-svg-btn"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-svg-btn.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-svg-btn.css"]
-  }; }
-  static get properties() { return {
-    "svgName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Options: \"close\", \"slider-left\", \"slider-right\", \"back-arrow\""
-      },
-      "attribute": "svg-name",
-      "reflect": false
-    },
-    "display": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'block' | 'inline' | 'inline-block' | 'flex'",
-        "resolved": "\"block\" | \"flex\" | \"inline\" | \"inline-block\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Display"
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-svg-btn.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-svg-btn.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "svgName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Options: \"close\", \"slider-left\", \"slider-right\", \"back-arrow\""
+        },
+        "attribute": "svg-name",
+        "reflect": false,
+        "defaultValue": "'close'"
       },
-      "attribute": "display",
-      "reflect": false,
-      "defaultValue": "'block'"
-    }
-  }; }
+      "display": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'block' | 'inline' | 'inline-block' | 'flex'",
+          "resolved": "\"block\" | \"flex\" | \"inline\" | \"inline-block\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Display"
+        },
+        "attribute": "display",
+        "reflect": false,
+        "defaultValue": "'block'"
+      }
+    };
+  }
 }

package/dist/collection/components/ptc-tab-list/ptc-tab-list.js

@@ -1,5 +1,8 @@
-import { Component, Host, h, Element, Listen, State } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 export class PtcTabList {
+  constructor() {
+    this.selectedValue = undefined;
+  }
   componentDidLoad() {
     this.createGroup();
     this.calculateHeaderTabsRendering();
@@ -114,36 +117,38 @@ export class PtcTabList {
     }
   }
   render() {
-    return (h(Host, null,
-      h("div", { class: "tabs-header-container" },
-        h("div", { class: "tabs-header" },
-          h("slot", { name: "header" })),
-        h("ptc-ellipsis-dropdown", { class: "ellipsis-btn", onItemSelected: (e) => { this.onDropdownItemSelected(e.detail); } })),
-      h("div", { class: "tabs-content" },
-        h("slot", { name: "content" }))));
+    return (h(Host, null, h("div", { class: "tabs-header-container" }, h("div", { class: "tabs-header" }, h("slot", { name: "header" })), h("ptc-ellipsis-dropdown", { class: "ellipsis-btn", onItemSelected: (e) => { this.onDropdownItemSelected(e.detail); } })), h("div", { class: "tabs-content" }, h("slot", { name: "content" }))));
   }
   static get is() { return "ptc-tab-list"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-tab-list.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-tab-list.css"]
-  }; }
-  static get states() { return {
-    "selectedValue": {}
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-tab-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-tab-list.css"]
+    };
+  }
+  static get states() {
+    return {
+      "selectedValue": {}
+    };
+  }
   static get elementRef() { return "host"; }
-  static get listeners() { return [{
-      "name": "tabClicked",
-      "method": "onSelectedTab",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "resize",
-      "method": "calculateHeaderTabsRendering",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "tabClicked",
+        "method": "onSelectedTab",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "resize",
+        "method": "calculateHeaderTabsRendering",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
 }

package/dist/collection/components/ptc-text-copy-with-background/ptc-text-copy-with-background.js

@@ -1,28 +1,16 @@
-import { Component, Host, h, Prop } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 export class PtcTextCopyWithBackground {
   constructor() {
-    /**
-    * Type
-    * Specify  Type, default is text-copy-with-background
-    */
     this.type = 'text-copy-with-background';
-    /**
-    * (optional) isBackgroundBlur: If true,it will add background blur image effect
-    */
+    this.backgroundImage = undefined;
+    this.ImageAltText = undefined;
+    this.topSlitBackgroundColor = undefined;
     this.isBackgroundBlur = false;
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap },
-      h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "tcb-top-slit", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179", style: { fill: this.topSlitBackgroundColor } },
-        h("path", { id: "Path_8770", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "tcb-top-slit-cls-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" })),
-      h("div", { class: "" },
-        h("img", { class: "copy-bg-image", alt: this.ImageAltText, src: this.backgroundImage }),
-        this.isBackgroundBlur &&
-          h("img", { class: "copy-bg-image bg-img-filter", alt: this.ImageAltText, src: this.backgroundImage })),
-      h("div", { class: "copy-bg-overlay-layer" }),
-      h("div", { class: "content-wrap" },
-        h("slot", null))));
+    return (h(Host, { class: classMap }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "tcb-top-slit", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179", style: { fill: this.topSlitBackgroundColor } }, h("path", { id: "Path_8770", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "tcb-top-slit-cls-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" })), h("div", { class: "" }, h("img", { class: "copy-bg-image", alt: this.ImageAltText, src: this.backgroundImage }), this.isBackgroundBlur &&
+      h("img", { class: "copy-bg-image bg-img-filter", alt: this.ImageAltText, src: this.backgroundImage })), h("div", { class: "copy-bg-overlay-layer" }), h("div", { class: "content-wrap" }, h("slot", null))));
   }
   getCssClassMap() {
     return {
@@ -31,99 +19,105 @@ export class PtcTextCopyWithBackground {
   }
   static get is() { return "ptc-text-copy-with-background"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-text-copy-with-background.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-text-copy-with-background.css"]
-  }; }
-  static get properties() { return {
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'text-copy-with-background' | 'hero-footer-cta' | 'tab-cta-with-background'",
-        "resolved": "\"hero-footer-cta\" | \"tab-cta-with-background\" | \"text-copy-with-background\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Type\r\nSpecify  Type, default is text-copy-with-background"
-      },
-      "attribute": "type",
-      "reflect": false,
-      "defaultValue": "'text-copy-with-background'"
-    },
-    "backgroundImage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Background image"
-      },
-      "attribute": "background-image",
-      "reflect": false
-    },
-    "ImageAltText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "(optional) Image alt text"
-      },
-      "attribute": "image-alt-text",
-      "reflect": false
-    },
-    "topSlitBackgroundColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-text-copy-with-background.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-text-copy-with-background.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'text-copy-with-background' | 'hero-footer-cta' | 'tab-cta-with-background'",
+          "resolved": "\"hero-footer-cta\" | \"tab-cta-with-background\" | \"text-copy-with-background\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type\r\nSpecify  Type, default is text-copy-with-background"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'text-copy-with-background'"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "(optional) topSlitBackgroundColor: It will be color value which should match the background of the body."
+      "backgroundImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Background image"
+        },
+        "attribute": "background-image",
+        "reflect": false
       },
-      "attribute": "top-slit-background-color",
-      "reflect": false
-    },
-    "isBackgroundBlur": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "ImageAltText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) Image alt text"
+        },
+        "attribute": "image-alt-text",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "(optional) isBackgroundBlur: If true,it will add background blur image effect"
+      "topSlitBackgroundColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) topSlitBackgroundColor: It will be color value which should match the background of the body."
+        },
+        "attribute": "top-slit-background-color",
+        "reflect": false
       },
-      "attribute": "is-background-blur",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
+      "isBackgroundBlur": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) isBackgroundBlur: If true,it will add background blur image effect"
+        },
+        "attribute": "is-background-blur",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
 }