@ptcwebops/ptcw-design 0.8.3 → 0.8.4

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

@@ -1,96 +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',
-    };
-  }
-  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'",
-          "resolved": "\"\" | \"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\"",
-          "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

@@ -40,6 +40,13 @@
   color: var(--color-white);
 }
 
+:host(.plm-hub-style-smaller) span {
+  font-size: var(--ptc-font-size-xx-small);
+  line-height: var(--ptc-line-height-densest);
+  font-weight: var(--ptc-font-weight-semibold);
+  color: var(--color-white);
+}
+
 :host(.inline) span {
   display: inline;
 }

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

@@ -1,87 +1,87 @@
-import { Host, h } from '@stencil/core';
-export class PtcSpan {
-  constructor() {
-    this.spanStyle = 'tag-style';
-    this.display = 'inline';
-    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.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'",
-          "resolved": "\"link-style\" | \"nav-style\" | \"plm-hub-style\" | \"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'"
-      },
-      "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.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.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'",
+          "resolved": "\"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'"
+      },
+      "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-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
+      }];
+  }
+}

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

@@ -1,72 +1,72 @@
-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() {
-    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));
-  }
-  getCssClassMap() {
-    return {
-      [this.display]: true
-    };
-  }
-  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,
-        "defaultValue": "'close'"
-      },
-      "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'"
-      }
-    };
-  }
-}
+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() {
+    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));
+  }
+  getCssClassMap() {
+    return {
+      [this.display]: true
+    };
+  }
+  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,
+        "defaultValue": "'close'"
+      },
+      "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'"
+      }
+    };
+  }
+}