@ptcwebops/ptcw-design 0.7.8 → 0.7.9

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

@@ -1,163 +1,163 @@
-import { h, Host } from '@stencil/core';
-export class PtcTooltip {
-  constructor() {
-    this.textDisplay = 'inline';
-    this.maxLength = 45;
-    this.description = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ';
-    this.zIndex = 'z-auto';
-    this.position = 'bottom';
-    this.styles = undefined;
-  }
-  // @Listen('resize', { target: 'window' })
-  // addTruncatedTooltip() {
-  //   // //const appRoot = this.el.shadowRoot;
-  //   // const truncatedText = this.el.shadowRoot.querySelectorAll('.text-ellipsis');
-  //   // truncatedText.forEach(t => {
-  //   //   // console.log('scrollHeight: ' + t.scrollHeight +  ' clientHeight: ' + t.clientHeight);
-  //   //   t.classList[t.length > t.clientHeight ? 'add' : 'remove']('truncated');
-  //   // });
-  // }
-  // componentDidLoad() {
-  //   this.addTruncatedTooltip();
-  // }
-  render() {
-    const classMap = this.getCssClassMap();
-    let truncatedText = this.description.substring(0, this.maxLength);
-    if (this.description.length > this.maxLength) {
-      truncatedText += '... ';
-    }
-    return (h(Host, { class: this.textDisplay }, this.styles && h("style", null, this.styles), h("div", { class: classMap }, truncatedText), h("div", { class: `tooltip ${this.position}` }, this.description)));
-  }
-  getCssClassMap() {
-    return {
-      // [this.textLines]: true,
-      ['text-ellipsis']: true,
-      [this.zIndex]: true,
-      ['truncated']: this.description.length > this.maxLength ? true : false
-    };
-  }
-  static get is() { return "ptc-tooltip"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-tooltip.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-tooltip.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "textDisplay": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'inline' | 'block'",
-          "resolved": "\"block\" | \"inline\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Component Display\r\nplease don't set it to be inline-block"
-        },
-        "attribute": "text-display",
-        "reflect": false,
-        "defaultValue": "'inline'"
-      },
-      "maxLength": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "max length"
-        },
-        "attribute": "max-length",
-        "reflect": false,
-        "defaultValue": "45"
-      },
-      "description": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "injected Description"
-        },
-        "attribute": "description",
-        "reflect": false,
-        "defaultValue": "'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '"
-      },
-      "zIndex": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'z-auto' | 'z-1' | 'z-2' | 'z-3' | 'z-999'",
-          "resolved": "\"z-1\" | \"z-2\" | \"z-3\" | \"z-999\" | \"z-auto\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "index of hover element"
-        },
-        "attribute": "z-index",
-        "reflect": false,
-        "defaultValue": "'z-auto'"
-      },
-      "position": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'left' | 'right' | 'bottom' | 'top'",
-          "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Tooltip position"
-        },
-        "attribute": "position",
-        "reflect": false,
-        "defaultValue": "'bottom'"
-      },
-      "styles": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "(optional) Injected CSS Styles"
-        },
-        "attribute": "styles",
-        "reflect": false
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-}
+import { h, Host } from '@stencil/core';
+export class PtcTooltip {
+  constructor() {
+    this.textDisplay = 'inline';
+    this.maxLength = 45;
+    this.description = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ';
+    this.zIndex = 'z-auto';
+    this.position = 'bottom';
+    this.styles = undefined;
+  }
+  // @Listen('resize', { target: 'window' })
+  // addTruncatedTooltip() {
+  //   // //const appRoot = this.el.shadowRoot;
+  //   // const truncatedText = this.el.shadowRoot.querySelectorAll('.text-ellipsis');
+  //   // truncatedText.forEach(t => {
+  //   //   // console.log('scrollHeight: ' + t.scrollHeight +  ' clientHeight: ' + t.clientHeight);
+  //   //   t.classList[t.length > t.clientHeight ? 'add' : 'remove']('truncated');
+  //   // });
+  // }
+  // componentDidLoad() {
+  //   this.addTruncatedTooltip();
+  // }
+  render() {
+    const classMap = this.getCssClassMap();
+    let truncatedText = this.description.substring(0, this.maxLength);
+    if (this.description.length > this.maxLength) {
+      truncatedText += '... ';
+    }
+    return (h(Host, { class: this.textDisplay }, this.styles && h("style", null, this.styles), h("div", { class: classMap }, truncatedText), h("div", { class: `tooltip ${this.position}` }, this.description)));
+  }
+  getCssClassMap() {
+    return {
+      // [this.textLines]: true,
+      ['text-ellipsis']: true,
+      [this.zIndex]: true,
+      ['truncated']: this.description.length > this.maxLength ? true : false
+    };
+  }
+  static get is() { return "ptc-tooltip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-tooltip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-tooltip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "textDisplay": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'inline' | 'block'",
+          "resolved": "\"block\" | \"inline\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Component Display\nplease don't set it to be inline-block"
+        },
+        "attribute": "text-display",
+        "reflect": false,
+        "defaultValue": "'inline'"
+      },
+      "maxLength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "max length"
+        },
+        "attribute": "max-length",
+        "reflect": false,
+        "defaultValue": "45"
+      },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "injected Description"
+        },
+        "attribute": "description",
+        "reflect": false,
+        "defaultValue": "'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '"
+      },
+      "zIndex": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'z-auto' | 'z-1' | 'z-2' | 'z-3' | 'z-999'",
+          "resolved": "\"z-1\" | \"z-2\" | \"z-3\" | \"z-999\" | \"z-auto\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "index of hover element"
+        },
+        "attribute": "z-index",
+        "reflect": false,
+        "defaultValue": "'z-auto'"
+      },
+      "position": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'right' | 'bottom' | 'top'",
+          "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tooltip position"
+        },
+        "attribute": "position",
+        "reflect": false,
+        "defaultValue": "'bottom'"
+      },
+      "styles": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) Injected CSS Styles"
+        },
+        "attribute": "styles",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/ptc-two-column-media/ptc-two-column-media.js

@@ -1,48 +1,48 @@
-import { Host, h } from '@stencil/core';
-export class PtcTwoColumnMedia {
-  constructor() {
-    this.componentType = undefined;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, h("slot", null)));
-  }
-  getCssClassMap() {
-    return {
-      [this.componentType]: this.componentType ? true : false
-    };
-  }
-  static get is() { return "ptc-two-column-media"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-two-column-media.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-two-column-media.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "componentType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'two-column-media' | 'two-column-media-icon-list' | 'two-column-text'",
-          "resolved": "\"two-column-media\" | \"two-column-media-icon-list\" | \"two-column-text\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Card Type\r\nSpecify Card Type,"
-        },
-        "attribute": "component-type",
-        "reflect": false
-      }
-    };
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcTwoColumnMedia {
+  constructor() {
+    this.componentType = undefined;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, h("slot", null)));
+  }
+  getCssClassMap() {
+    return {
+      [this.componentType]: this.componentType ? true : false
+    };
+  }
+  static get is() { return "ptc-two-column-media"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-two-column-media.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-two-column-media.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "componentType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'two-column-media' | 'two-column-media-icon-list' | 'two-column-text'",
+          "resolved": "\"two-column-media\" | \"two-column-media-icon-list\" | \"two-column-text\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Card Type\nSpecify Card Type,"
+        },
+        "attribute": "component-type",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/tab-content/tab-content.css

@@ -1,7 +1,7 @@
 .tab-content {
   display: none;
 }
-.tab-content p, .tab-content ul, .tab-content ol, .tab-content span {
+.tab-content p, .tab-content ul, .tab-content ol, .tab-content span, .tab-content h1, .tab-content h2, .tab-content h3, .tab-content h4, .tab-content h5, .tab-content h6 {
   max-width: 720px;
   font-weight: var(--ptc-font-weight-normal);
 }

package/dist/collection/components/tab-content/tab-content.js

@@ -1,84 +1,84 @@
-import { h } from '@stencil/core';
-export class TabContent {
-  constructor() {
-    this.name = undefined;
-    this.isSelected = false;
-  }
-  async getChild() {
-    return {
-      select: this.select.bind(this),
-      unselect: this.unselect.bind(this),
-      name: this.name
-    };
-  }
-  unselect() {
-    this.isSelected = false;
-  }
-  select() {
-    this.isSelected = true;
-  }
-  render() {
-    const classes = {
-      'tab-content': true,
-      'tab-content-selected': this.isSelected
-    };
-    return (h("div", { class: classes }, h("slot", null)));
-  }
-  static get is() { return "tab-content"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tab-content.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tab-content.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "name",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isSelected": {}
-    };
-  }
-  static get methods() {
-    return {
-      "getChild": {
-        "complexType": {
-          "signature": "() => Promise<{ select: any; unselect: any; name: string; }>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<{ select: any; unselect: any; name: string; }>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-}
+import { h } from '@stencil/core';
+export class TabContent {
+  constructor() {
+    this.name = undefined;
+    this.isSelected = false;
+  }
+  async getChild() {
+    return {
+      select: this.select.bind(this),
+      unselect: this.unselect.bind(this),
+      name: this.name
+    };
+  }
+  unselect() {
+    this.isSelected = false;
+  }
+  select() {
+    this.isSelected = true;
+  }
+  render() {
+    const classes = {
+      'tab-content': true,
+      'tab-content-selected': this.isSelected
+    };
+    return (h("div", { class: classes }, h("slot", null)));
+  }
+  static get is() { return "tab-content"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tab-content.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tab-content.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isSelected": {}
+    };
+  }
+  static get methods() {
+    return {
+      "getChild": {
+        "complexType": {
+          "signature": "() => Promise<{ select: any; unselect: any; name: string; }>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<{ select: any; unselect: any; name: string; }>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+}

package/dist/collection/components/tab-header/tab-header.css

@@ -43,4 +43,51 @@
 }
 .tab-header-selected::after {
   background-color: var(--color-green-07);
+}
+
+.tooltip {
+  display: none;
+}
+
+@media (max-width: 525px) {
+  .header-content {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  h2 {
+    max-width: 100px;
+  }
+  h2 .tooltip {
+    display: block;
+    position: absolute;
+    bottom: -12px;
+    transform: translateY(100%);
+    padding: 8px;
+    color: var(--color-white);
+    font-size: var(--ptc-font-size-xxx-small);
+    font-weight: var(--ptc-font-weight-semibold);
+    background: var(--color-gray-09);
+    box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 4px;
+    border: none;
+    border-radius: 2px;
+    width: 273px;
+    height: auto;
+    display: none;
+  }
+  h2 .tooltip::after {
+    content: "";
+    position: absolute;
+    top: 1px;
+    left: 50%;
+    transform: translate(-50%, -100%);
+    border-top: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-left: 8px solid transparent;
+    border-image: initial;
+    border-bottom: 8px solid var(--color-gray-09);
+  }
+  h2:hover .tooltip {
+    display: block;
+  }
 }