@ptcwebops/ptcw-design 1.9.7 → 2.0.1

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

@@ -1,104 +1,104 @@
-import { h } from '@stencil/core';
-export class Tabs {
-  constructor() {
-    this.tabs = [];
-  }
-  componentWillLoad() {
-    // Grab tabs from this component
-    this.tabs = Array.from(this.el.querySelectorAll('ptc-tab'));
-    if (this.tabs.length === 0) {
-      throw new Error('[ptc-tabs] Must have at least one tab');
-    }
-  }
-  async openTab(index) {
-    //Loops through tabs
-    if (index >= this.tabs.length) {
-      throw new Error(`[ptc-tabs] Index ${index} is out of bounds of tabs length`);
-    }
-    if (!this.tabs[index].disabled) {
-      this.tabs = this.tabs.map((tab, i) => {
-        tab.active = i === index;
-        return tab;
-      });
-      // How they react to change
-      this.tabChange.emit({ tabId: index });
-    }
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h("div", { class: classMap }, this.tabs.map((tab, index) => {
-      const tabClassMap = {
-        'tab-button': true,
-        active: tab.active
-      };
-      return [
-        // assigned properties
-        h("div", { role: "tab", class: tabClassMap, onClick: () => this.openTab(index) }, tab.label, tab.price, h("div", { class: classMap }, h("span", { class: "left-text" }, h("slot", { name: "right-text" })), h("span", { class: "right-text" }, h("slot", { name: "right-text" }))))
-      ];
-    })));
-  }
-  getCssClassMap() {
-    return {
-      'tabs-list': true
-    };
-  }
-  static get is() { return "ptc-tabs"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-tabs.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-tabs.css"]
-    };
-  }
-  static get states() {
-    return {
-      "tabs": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "tabChange",
-        "name": "tabChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "openTab": {
-        "complexType": {
-          "signature": "(index: number) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-}
+import { h } from '@stencil/core';
+export class Tabs {
+  constructor() {
+    this.tabs = [];
+  }
+  componentWillLoad() {
+    // Grab tabs from this component
+    this.tabs = Array.from(this.el.querySelectorAll('ptc-tab'));
+    if (this.tabs.length === 0) {
+      throw new Error('[ptc-tabs] Must have at least one tab');
+    }
+  }
+  async openTab(index) {
+    //Loops through tabs
+    if (index >= this.tabs.length) {
+      throw new Error(`[ptc-tabs] Index ${index} is out of bounds of tabs length`);
+    }
+    if (!this.tabs[index].disabled) {
+      this.tabs = this.tabs.map((tab, i) => {
+        tab.active = i === index;
+        return tab;
+      });
+      // How they react to change
+      this.tabChange.emit({ tabId: index });
+    }
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h("div", { class: classMap }, this.tabs.map((tab, index) => {
+      const tabClassMap = {
+        'tab-button': true,
+        active: tab.active
+      };
+      return [
+        // assigned properties
+        h("div", { role: "tab", class: tabClassMap, onClick: () => this.openTab(index) }, tab.label, tab.price, h("div", { class: classMap }, h("span", { class: "left-text" }, h("slot", { name: "right-text" })), h("span", { class: "right-text" }, h("slot", { name: "right-text" }))))
+      ];
+    })));
+  }
+  getCssClassMap() {
+    return {
+      'tabs-list': true
+    };
+  }
+  static get is() { return "ptc-tabs"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-tabs.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-tabs.css"]
+    };
+  }
+  static get states() {
+    return {
+      "tabs": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tabChange",
+        "name": "tabChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "openTab": {
+        "complexType": {
+          "signature": "(index: number) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}

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

@@ -1,181 +1,181 @@
-import { Host, h } from '@stencil/core';
-export class PtcTextCopyWithBackground {
-  constructor() {
-    this.type = 'text-copy-with-background';
-    this.backgroundImage = undefined;
-    this.ImageAltText = undefined;
-    this.topSlitBackgroundColor = undefined;
-    this.slitPosition = 'top-right';
-    this.isBackgroundBlur = false;
-    this.overlay = true;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    const slitFill = this.getSlitFillColor();
-    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: slitFill } }, 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)" })), this.backgroundImage ?
-      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 }))
-      : null, this.overlay &&
-      h("div", { class: "copy-bg-overlay-layer" }), h("div", { class: "content-wrap" }, this.type == "case-studies" &&
-      h("div", { class: "ptc-container" }, h("div", { class: "card-wrap" }, h("div", { class: "card-animated-border" }), h("div", { class: "card-content" }, h("div", { class: "card-layout" }, h("slot", { name: 'card-content' }))))), h("slot", null))));
-  }
-  getSlitFillColor() {
-    let slitFill = '#fff';
-    if (this.topSlitBackgroundColor == "auto") {
-      let style = getComputedStyle(document.body);
-      if (style && style.backgroundColor) {
-        slitFill = style.backgroundColor;
-      }
-    }
-    else {
-      slitFill = this.topSlitBackgroundColor;
-    }
-    return slitFill;
-  }
-  getCssClassMap() {
-    return {
-      [this.type]: true,
-      [this.slitPosition]: true,
-      ['light-links']: this.overlay
-    };
-  }
-  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' | 'case-studies'",
-          "resolved": "\"case-studies\" | \"hero-footer-cta\" | \"tab-cta-with-background\" | \"text-copy-with-background\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Type\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": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "(optional) topSlitBackgroundColor: It will be color value which should match the background of the body. Entering in \"auto\" will grab the background color of the body on page load."
-        },
-        "attribute": "top-slit-background-color",
-        "reflect": false
-      },
-      "slitPosition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'",
-          "resolved": "\"bottom-left\" | \"bottom-right\" | \"top-left\" | \"top-right\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "(optional) topSlitPosition: It will decide the position of ."
-        },
-        "attribute": "slit-position",
-        "reflect": false,
-        "defaultValue": "'top-right'"
-      },
-      "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"
-      },
-      "overlay": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "(optional) overlay: If true,it will add black overlay with 0.55 opacity"
-        },
-        "attribute": "overlay",
-        "reflect": false,
-        "defaultValue": "true"
-      }
-    };
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcTextCopyWithBackground {
+  constructor() {
+    this.type = 'text-copy-with-background';
+    this.backgroundImage = undefined;
+    this.ImageAltText = undefined;
+    this.topSlitBackgroundColor = undefined;
+    this.slitPosition = 'top-right';
+    this.isBackgroundBlur = false;
+    this.overlay = true;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    const slitFill = this.getSlitFillColor();
+    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: slitFill } }, 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)" })), this.backgroundImage ?
+      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 }))
+      : null, this.overlay &&
+      h("div", { class: "copy-bg-overlay-layer" }), h("div", { class: "content-wrap" }, this.type == "case-studies" &&
+      h("div", { class: "ptc-container" }, h("div", { class: "card-wrap" }, h("div", { class: "card-animated-border" }), h("div", { class: "card-content" }, h("div", { class: "card-layout" }, h("slot", { name: 'card-content' }))))), h("slot", null))));
+  }
+  getSlitFillColor() {
+    let slitFill = '#fff';
+    if (this.topSlitBackgroundColor == "auto") {
+      let style = getComputedStyle(document.body);
+      if (style && style.backgroundColor) {
+        slitFill = style.backgroundColor;
+      }
+    }
+    else {
+      slitFill = this.topSlitBackgroundColor;
+    }
+    return slitFill;
+  }
+  getCssClassMap() {
+    return {
+      [this.type]: true,
+      [this.slitPosition]: true,
+      ['light-links']: this.overlay
+    };
+  }
+  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' | 'case-studies'",
+          "resolved": "\"case-studies\" | \"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": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) topSlitBackgroundColor: It will be color value which should match the background of the body. Entering in \"auto\" will grab the background color of the body on page load."
+        },
+        "attribute": "top-slit-background-color",
+        "reflect": false
+      },
+      "slitPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'",
+          "resolved": "\"bottom-left\" | \"bottom-right\" | \"top-left\" | \"top-right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) topSlitPosition: It will decide the position of ."
+        },
+        "attribute": "slit-position",
+        "reflect": false,
+        "defaultValue": "'top-right'"
+      },
+      "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"
+      },
+      "overlay": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) overlay: If true,it will add black overlay with 0.55 opacity"
+        },
+        "attribute": "overlay",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+}

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

@@ -54,7 +54,7 @@ div.solid h3,
 div.solid h4,
 div.solid h5,
 div.solid h6 {
-  padding-top: 4px;
+  padding-top: 12px;
 }
 div.solid h1::before,
 div.solid h2::before,
@@ -69,6 +69,7 @@ div.solid h6::before {
   background-color: var(--color-gray-03);
   opacity: 0.9;
   left: 0px;
+  top: 0;
 }
 div.solid h1::after,
 div.solid h2::after,
@@ -81,7 +82,7 @@ div.solid h6::after {
   width: 56px;
   height: 2px;
   background-color: var(--color-green-07);
-  top: 2px;
+  top: -2px;
   left: 0px;
 }
 div.is-standard h1,