@ptcwebops/ptcw-design 2.1.4 → 2.1.6

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

@@ -1,97 +1,97 @@
-import { Host, h } from '@stencil/core';
-export class PtcSpacer {
-  constructor() {
-    this.breakpoint = '';
-    this.size = 'medium';
-    this.direction = 'vertical';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }));
-  }
-  getCssClassMap() {
-    return {
-      [this.size]: true,
-      ['ptc-spacer-horizontal']: this.direction === 'horizontal',
-      ['ptc-spacer-vertical']: this.direction === 'vertical',
-      ['ptc-spacer-xx-small']: this.breakpoint === 'xx-small',
-      ['ptc-spacer-x-small']: this.breakpoint === 'x-small',
-      ['ptc-spacer-small']: this.breakpoint === 'small',
-      ['ptc-spacer-medium']: this.breakpoint === 'medium',
-      ['ptc-spacer-large']: this.breakpoint === 'large',
-      ['ptc-spacer-x-large']: this.breakpoint === 'x-large',
-      ['ptc-spacer-xx-large']: this.breakpoint === 'xx-large',
-      ['ptc-spacer-xxx-large']: this.breakpoint === 'xxx-large',
-    };
-  }
-  static get is() { return "ptc-spacer"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-spacer.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-spacer.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "breakpoint": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'' | 'medium' | 'small' | 'large' | 'x-large' | 'xx-large' | 'x-small' | 'xx-small' | 'xxx-large'",
-          "resolved": "\"\" | \"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Breakpoint"
-        },
-        "attribute": "breakpoint",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'large' | 'medium' | 'small' | 'x-large' | 'x-small' | 'xx-large' | 'xx-small' | 'xxx-large' | 'xxxx-large' | 'space-144' | 'space-120' | 'space-128'",
-          "resolved": "\"large\" | \"medium\" | \"small\" | \"space-120\" | \"space-128\" | \"space-144\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxxx-large\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Spacing Size"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'medium'"
-      },
-      "direction": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'vertical' | 'horizontal'",
-          "resolved": "\"horizontal\" | \"vertical\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Direction"
-        },
-        "attribute": "direction",
-        "reflect": false,
-        "defaultValue": "'vertical'"
-      }
-    };
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcSpacer {
+  constructor() {
+    this.breakpoint = '';
+    this.size = 'medium';
+    this.direction = 'vertical';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }));
+  }
+  getCssClassMap() {
+    return {
+      [this.size]: true,
+      ['ptc-spacer-horizontal']: this.direction === 'horizontal',
+      ['ptc-spacer-vertical']: this.direction === 'vertical',
+      ['ptc-spacer-xx-small']: this.breakpoint === 'xx-small',
+      ['ptc-spacer-x-small']: this.breakpoint === 'x-small',
+      ['ptc-spacer-small']: this.breakpoint === 'small',
+      ['ptc-spacer-medium']: this.breakpoint === 'medium',
+      ['ptc-spacer-large']: this.breakpoint === 'large',
+      ['ptc-spacer-x-large']: this.breakpoint === 'x-large',
+      ['ptc-spacer-xx-large']: this.breakpoint === 'xx-large',
+      ['ptc-spacer-xxx-large']: this.breakpoint === 'xxx-large',
+    };
+  }
+  static get is() { return "ptc-spacer"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-spacer.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-spacer.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "breakpoint": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'' | 'medium' | 'small' | 'large' | 'x-large' | 'xx-large' | 'x-small' | 'xx-small' | 'xxx-large'",
+          "resolved": "\"\" | \"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Breakpoint"
+        },
+        "attribute": "breakpoint",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'large' | 'medium' | 'small' | 'x-large' | 'x-small' | 'xx-large' | 'xx-small' | 'xxx-large' | 'xxxx-large' | 'space-144' | 'space-120' | 'space-128'",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"space-120\" | \"space-128\" | \"space-144\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxxx-large\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Spacing Size"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'medium'"
+      },
+      "direction": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'vertical' | 'horizontal'",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Direction"
+        },
+        "attribute": "direction",
+        "reflect": false,
+        "defaultValue": "'vertical'"
+      }
+    };
+  }
+}

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

@@ -48,7 +48,7 @@
 }
 
 :host(.three-column-report) span {
-  font-size: 1.75rem;
+  font-size: var(--ptc-font-size-large);
 }
 
 :host(.blog-tag) span {
@@ -105,8 +105,13 @@
   font-weight: var(--ptc-font-weight-black);
 }
 
+@media only screen and (min-width: 360px) {
+  :host(.three-column-report) span {
+    font-size: var(--ptc-font-size-x-large);
+  }
+}
 @media only screen and (min-width: 768px) {
   :host(.three-column-report) span {
-    font-size: 2rem;
+    font-size: var(--ptc-font-size-xx-large);
   }
 }

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

@@ -1,107 +1,107 @@
-import { Host, h } from '@stencil/core';
-export class PtcSpan {
-  constructor() {
-    this.spanStyle = 'tag-style';
-    this.display = 'inline';
-    this.fontWeight = 'w-4';
-    this.styles = undefined;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("span", { part: "part-ptc-span" }, h("slot", null))));
-  }
-  getCssClassMap() {
-    return {
-      [this.spanStyle]: true,
-      [this.fontWeight]: true,
-      [this.display]: true,
-    };
-  }
-  static get is() { return "ptc-span"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-span.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-span.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "spanStyle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'link-style' | 'tag-style' | 'nav-style' | 'plm-hub-style' | 'plm-hub-style-smaller' | 'blog-tag'",
-          "resolved": "\"blog-tag\" | \"link-style\" | \"nav-style\" | \"plm-hub-style\" | \"plm-hub-style-smaller\" | \"tag-style\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Span Style"
-        },
-        "attribute": "span-style",
-        "reflect": false,
-        "defaultValue": "'tag-style'"
-      },
-      "display": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'block' | 'inline-block' | 'inline'",
-          "resolved": "\"block\" | \"inline\" | \"inline-block\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Display"
-        },
-        "attribute": "display",
-        "reflect": false,
-        "defaultValue": "'inline'"
-      },
-      "fontWeight": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'w-3' | 'w-4' | 'w-5' | 'w-6' | 'w-7' | 'w-8' | 'w-9'",
-          "resolved": "\"w-3\" | \"w-4\" | \"w-5\" | \"w-6\" | \"w-7\" | \"w-8\" | \"w-9\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Span weight"
-        },
-        "attribute": "font-weight",
-        "reflect": false,
-        "defaultValue": "'w-4'"
-      },
-      "styles": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Injected Styles"
-        },
-        "attribute": "styles",
-        "reflect": false
-      }
-    };
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcSpan {
+  constructor() {
+    this.spanStyle = 'tag-style';
+    this.display = 'inline';
+    this.fontWeight = 'w-4';
+    this.styles = undefined;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("span", { part: "part-ptc-span" }, h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.spanStyle]: true,
+      [this.fontWeight]: true,
+      [this.display]: true,
+    };
+  }
+  static get is() { return "ptc-span"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-span.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-span.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "spanStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'link-style' | 'tag-style' | 'nav-style' | 'plm-hub-style' | 'plm-hub-style-smaller' | 'blog-tag'",
+          "resolved": "\"blog-tag\" | \"link-style\" | \"nav-style\" | \"plm-hub-style\" | \"plm-hub-style-smaller\" | \"tag-style\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Span Style"
+        },
+        "attribute": "span-style",
+        "reflect": false,
+        "defaultValue": "'tag-style'"
+      },
+      "display": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'block' | 'inline-block' | 'inline'",
+          "resolved": "\"block\" | \"inline\" | \"inline-block\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Display"
+        },
+        "attribute": "display",
+        "reflect": false,
+        "defaultValue": "'inline'"
+      },
+      "fontWeight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'w-3' | 'w-4' | 'w-5' | 'w-6' | 'w-7' | 'w-8' | 'w-9'",
+          "resolved": "\"w-3\" | \"w-4\" | \"w-5\" | \"w-6\" | \"w-7\" | \"w-8\" | \"w-9\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Span weight"
+        },
+        "attribute": "font-weight",
+        "reflect": false,
+        "defaultValue": "'w-4'"
+      },
+      "styles": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Injected Styles"
+        },
+        "attribute": "styles",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/ptc-square-card/ptc-square-card.css

@@ -0,0 +1,49 @@
+:host {
+  display: block;
+  background-color: transparent;
+}
+:host .card-border {
+  height: auto;
+  width: 200px;
+}
+@media only screen and (min-width: 480px) {
+  :host .card-border {
+    height: 200px;
+  }
+}
+:host .square-padding {
+  margin: var(--ptc-element-spacing-02);
+}
+@media only screen and (min-width: 480px) {
+  :host .square-padding {
+    margin: var(--ptc-element-spacing-03) var(--ptc-element-spacing-01);
+  }
+}
+@media screen and (min-width: 512px) {
+  :host .square-padding {
+    margin: var(--ptc-element-spacing-03);
+  }
+}
+:host .card-layout {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+:host .icon {
+  display: inline;
+  vertical-align: middle;
+}
+:host .number {
+  display: inline;
+  line-height: var(--ptc-line-height-denser);
+  font-size: var(--ptc-font-size-xx-large);
+  font-weight: var(--ptc-font-weight-semibold);
+  vertical-align: middle;
+}
+:host slot[name=before-icon], :host slot[name=after-icon] {
+  text-align: center;
+  line-height: var(--ptc-line-height-densest);
+  font-size: var(--ptc-font-size-x-small);
+  font-weight: var(--ptc-font-weight-semibold);
+}

package/dist/collection/components/ptc-square-card/ptc-square-card.js

@@ -0,0 +1,60 @@
+import { Host, h } from '@stencil/core';
+export class PtcSquareCard {
+  constructor() {
+    this.number = undefined;
+    this.arrowDirection = undefined;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "card-border square-padding card-layout" }, h("slot", { name: "before-icon" }), h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "icon-block" }, !!this.arrowDirection ? (h("icon-asset", Object.assign({ class: "icon" }, (this.arrowDirection === 'up' ? { name: 'arrow_ascending' } : { name: 'arrow_descending' }), { type: "ptc" }, !this.number ? { size: 'xxx-large' } : { size: 'xx-large' }, { color: "ptc-green" }))) : null, !!this.number ? h("div", { class: "number" }, this.number) : null), h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("slot", { name: "after-icon" }))));
+  }
+  static get is() { return "ptc-square-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-square-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-square-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "number": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Number after the icon"
+        },
+        "attribute": "number",
+        "reflect": false
+      },
+      "arrowDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'up' | 'down'",
+          "resolved": "\"down\" | \"up\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Arrow Direction"
+        },
+        "attribute": "arrow-direction",
+        "reflect": false
+      }
+    };
+  }
+}

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

@@ -1,51 +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
-      }];
-  }
-}
+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
+      }];
+  }
+}