@ptcwebops/ptcw-design 0.8.0 → 0.8.2

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

@@ -1,4 +1,5 @@
 :host {
+  position: relative;
   z-index: 1;
 }
 
@@ -6,6 +7,30 @@
   color: var(--color-white);
 }
 
+:host(.z-1) {
+  z-index: 1;
+}
+
+:host(.z-2) {
+  z-index: 2;
+}
+
+:host(.z-3) {
+  z-index: 3;
+}
+
+:host(.z-99) {
+  z-index: 99;
+}
+
+:host(.z-999) {
+  z-index: 999;
+}
+
+:host(.z-auto) {
+  z-index: auto;
+}
+
 p.default {
   -moz-osx-font-smoothing: grayscale;
   /*(For Firefox)*/
@@ -171,6 +196,18 @@ p.line-height-loose {
 p.line-height-looser {
   line-height: var(--ptc-line-height-looser);
 }
+p.left {
+  text-align: left;
+}
+p.right {
+  text-align: right;
+}
+p.center {
+  text-align: center;
+}
+p.justify {
+  text-align: justify;
+}
 p.announcement {
   text-transform: uppercase;
   font-size: var(--ptc-font-size-small);

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

@@ -1,186 +1,232 @@
-import { h, Host } from '@stencil/core';
-export class PtcPara {
-  constructor() {
-    this.fontSize = "x-small";
-    this.fontWeight = 'w-4';
-    this.paraStyle = 'default';
-    this.paraColor = 'primary-grey';
-    this.paraLineH = 'line-height-normal';
-    this.paraMargin = undefined;
-    this.ellipsisLineCutoff = undefined;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    const colorClass = this.addWhiteClass();
-    const cutOff = this.getLineCuttoff();
-    return (h(Host, { class: colorClass }, h("p", { class: classMap, part: "part-para", style: cutOff }, h("slot", null))));
-  }
-  getCssClassMap() {
-    return {
-      [this.fontSize]: true,
-      [this.fontWeight]: true,
-      [this.paraStyle]: true,
-      [this.paraMargin]: !!this.paraMargin ? true : false,
-      [this.paraColor]: true,
-      [this.paraLineH]: true,
-      ['ellipsis-boxing']: this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0
-    };
-  }
-  //WEB-2392
-  addWhiteClass() {
-    if (this.paraColor == "white") {
-      return {
-        [this.paraColor]: true,
-      };
-    }
-  }
-  getLineCuttoff() {
-    let result;
-    if (this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0) {
-      result = {
-        ['-webkit-line-clamp']: `${this.ellipsisLineCutoff}`
-      };
-    }
-    return result;
-  }
-  static get is() { return "ptc-para"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-para.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-para.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "fontSize": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'xxx-small' | 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | 'xxxx-large'",
-          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\" | \"xxxx-large\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Paragraph font size"
-        },
-        "attribute": "font-size",
-        "reflect": false,
-        "defaultValue": "\"x-small\""
-      },
-      "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": "Paragraph font weight"
-        },
-        "attribute": "font-weight",
-        "reflect": false,
-        "defaultValue": "'w-4'"
-      },
-      "paraStyle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'default' | 'intro' | 'small' | 'announcement' | 'flush-style' | 'main'",
-          "resolved": "\"announcement\" | \"default\" | \"flush-style\" | \"intro\" | \"main\" | \"small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Paragraph Style"
-        },
-        "attribute": "para-style",
-        "reflect": false,
-        "defaultValue": "'default'"
-      },
-      "paraColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'primary-grey' | 'white'",
-          "resolved": "\"primary-grey\" | \"white\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Paragraph Color"
-        },
-        "attribute": "para-color",
-        "reflect": false,
-        "defaultValue": "'primary-grey'"
-      },
-      "paraLineH": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'line-height-densest' | 'line-height-denser' | 'line-height-dense' | 'line-height-normal' | 'line-height-loose' | 'line-height-looser'| 'line-height-p'",
-          "resolved": "\"line-height-dense\" | \"line-height-denser\" | \"line-height-densest\" | \"line-height-loose\" | \"line-height-looser\" | \"line-height-normal\" | \"line-height-p\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "line height"
-        },
-        "attribute": "para-line-h",
-        "reflect": false,
-        "defaultValue": "'line-height-normal'"
-      },
-      "paraMargin": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'margin-flush' | 'maring-top-1' | 'margin-top-2' | 'margin-top-3' | 'margin-top-4' | 'margin-top-5' | 'margin-top-6' | 'margin-bottom-1' | 'margin-bottom-2' | 'margin-bottom-3' | 'margin-bottom-4' | 'margin-bottom-5' | 'margin-bottom-6'| 'margin-1' | 'margin-2' | 'margin-3' | 'margin-4' | 'margin-5' | 'margin-6'",
-          "resolved": "\"margin-1\" | \"margin-2\" | \"margin-3\" | \"margin-4\" | \"margin-5\" | \"margin-6\" | \"margin-bottom-1\" | \"margin-bottom-2\" | \"margin-bottom-3\" | \"margin-bottom-4\" | \"margin-bottom-5\" | \"margin-bottom-6\" | \"margin-flush\" | \"margin-top-2\" | \"margin-top-3\" | \"margin-top-4\" | \"margin-top-5\" | \"margin-top-6\" | \"maring-top-1\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Paragraph Margin"
-        },
-        "attribute": "para-margin",
-        "reflect": false
-      },
-      "ellipsisLineCutoff": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Line number to cut text off at and add ellipsis"
-        },
-        "attribute": "ellipsis-line-cutoff",
-        "reflect": false
-      }
-    };
-  }
-}
+import { h, Host } from '@stencil/core';
+export class PtcPara {
+  constructor() {
+    this.fontSize = 'x-small';
+    this.fontWeight = 'w-4';
+    this.paraStyle = 'default';
+    this.paraColor = 'primary-grey';
+    this.paraLineH = 'line-height-normal';
+    this.paraMargin = undefined;
+    this.paraAlign = undefined;
+    this.ellipsisLineCutoff = undefined;
+    this.paraZIndex = undefined;
+  }
+  // componentDidLoad(){
+  //   const slotSelector = this.el.shadowRoot.querySelector('slot');
+  //   const tooltipEle = slotSelector.getElementsByTagName('ptc-tooltip')[0];
+  //   console.log('test: ' + tooltipEle);
+  //   if(tooltipEle){
+  //     tooltipEle.style.zIndex = '9';
+  //   }
+  // }
+  render() {
+    const classMap = this.getCssClassMap();
+    const colorClass = this.addWhiteClass();
+    const cutOff = this.getLineCuttoff();
+    return (h(Host, { class: `${colorClass} ${this.paraZIndex}` }, h("p", { class: classMap, part: "part-para", style: cutOff }, h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.fontSize]: true,
+      [this.fontWeight]: true,
+      [this.paraStyle]: true,
+      [this.paraMargin]: !!this.paraMargin ? true : false,
+      [this.paraColor]: true,
+      [this.paraLineH]: true,
+      [this.paraAlign]: !!this.paraAlign ? true : false,
+      ['ellipsis-boxing']: this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0,
+    };
+  }
+  //WEB-2392
+  addWhiteClass() {
+    if (this.paraColor == 'white') {
+      return {
+        [this.paraColor]: true,
+      };
+    }
+  }
+  getLineCuttoff() {
+    let result;
+    if (this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0) {
+      result = {
+        ['-webkit-line-clamp']: `${this.ellipsisLineCutoff}`,
+      };
+    }
+    return result;
+  }
+  static get is() { return "ptc-para"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-para.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-para.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "fontSize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'xxx-small' | 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | 'xxxx-large'",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\" | \"xxxx-large\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Paragraph font size"
+        },
+        "attribute": "font-size",
+        "reflect": false,
+        "defaultValue": "'x-small'"
+      },
+      "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": "Paragraph font weight"
+        },
+        "attribute": "font-weight",
+        "reflect": false,
+        "defaultValue": "'w-4'"
+      },
+      "paraStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'intro' | 'small' | 'announcement' | 'flush-style' | 'main'",
+          "resolved": "\"announcement\" | \"default\" | \"flush-style\" | \"intro\" | \"main\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Paragraph Style"
+        },
+        "attribute": "para-style",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "paraColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary-grey' | 'white'",
+          "resolved": "\"primary-grey\" | \"white\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Paragraph Color"
+        },
+        "attribute": "para-color",
+        "reflect": false,
+        "defaultValue": "'primary-grey'"
+      },
+      "paraLineH": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'line-height-densest' | 'line-height-denser' | 'line-height-dense' | 'line-height-normal' | 'line-height-loose' | 'line-height-looser' | 'line-height-p'",
+          "resolved": "\"line-height-dense\" | \"line-height-denser\" | \"line-height-densest\" | \"line-height-loose\" | \"line-height-looser\" | \"line-height-normal\" | \"line-height-p\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "line height"
+        },
+        "attribute": "para-line-h",
+        "reflect": false,
+        "defaultValue": "'line-height-normal'"
+      },
+      "paraMargin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "| 'margin-flush'\r\n    | 'maring-top-1'\r\n    | 'margin-top-2'\r\n    | 'margin-top-3'\r\n    | 'margin-top-4'\r\n    | 'margin-top-5'\r\n    | 'margin-top-6'\r\n    | 'margin-bottom-1'\r\n    | 'margin-bottom-2'\r\n    | 'margin-bottom-3'\r\n    | 'margin-bottom-4'\r\n    | 'margin-bottom-5'\r\n    | 'margin-bottom-6'\r\n    | 'margin-1'\r\n    | 'margin-2'\r\n    | 'margin-3'\r\n    | 'margin-4'\r\n    | 'margin-5'\r\n    | 'margin-6'",
+          "resolved": "\"margin-1\" | \"margin-2\" | \"margin-3\" | \"margin-4\" | \"margin-5\" | \"margin-6\" | \"margin-bottom-1\" | \"margin-bottom-2\" | \"margin-bottom-3\" | \"margin-bottom-4\" | \"margin-bottom-5\" | \"margin-bottom-6\" | \"margin-flush\" | \"margin-top-2\" | \"margin-top-3\" | \"margin-top-4\" | \"margin-top-5\" | \"margin-top-6\" | \"maring-top-1\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Paragraph Margin"
+        },
+        "attribute": "para-margin",
+        "reflect": false
+      },
+      "paraAlign": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'center' | 'right' | 'justify'",
+          "resolved": "\"center\" | \"justify\" | \"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Para text Alignment"
+        },
+        "attribute": "para-align",
+        "reflect": false
+      },
+      "ellipsisLineCutoff": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Line number to cut text off at and add ellipsis"
+        },
+        "attribute": "ellipsis-line-cutoff",
+        "reflect": false
+      },
+      "paraZIndex": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'z-auto' | 'z-1' | 'z-2' | 'z-3' | 'z-99' | 'z-999'",
+          "resolved": "\"z-1\" | \"z-2\" | \"z-3\" | \"z-99\" | \"z-999\" | \"z-auto\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "sep z-index"
+        },
+        "attribute": "para-z-index",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}