@ptcwebops/ptcw-design 0.7.5 → 0.7.6

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

@@ -0,0 +1,112 @@
+:host {
+  position: relative;
+}
+
+:host(.inline) {
+  display: inline;
+}
+
+:host(.block) {
+  display: block;
+}
+
+.text-ellipsis {
+  position: relative;
+  display: inline;
+}
+.text-ellipsis:not(.truncated) {
+  z-index: auto !important;
+}
+
+.z-auto {
+  z-index: auto;
+}
+
+.z-1 {
+  z-index: 1;
+}
+
+.z-2 {
+  z-index: 2;
+}
+
+.z-3 {
+  z-index: 3;
+}
+
+.z-999 {
+  z-index: 999;
+}
+
+.tooltip {
+  position: absolute;
+  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: 0px 2px 4px rgba(0, 0, 0, 0.3);
+  border: none;
+  border-radius: 2px;
+  width: 273px;
+  height: auto;
+  visibility: hidden;
+}
+.tooltip.bottom {
+  bottom: -12px;
+  transform: translateY(100%);
+}
+.tooltip.bottom::after {
+  top: 1px;
+  left: 50%;
+  transform: translate(-50%, -100%);
+  border: 8px solid transparent;
+  border-bottom: 8px solid var(--color-gray-09);
+}
+.tooltip.left {
+  bottom: -12px;
+  transform: translate(-80%, 100%);
+}
+.tooltip.left::after {
+  top: 1px;
+  right: 8px;
+  transform: translateY(-100%);
+  border: 8px solid transparent;
+  border-bottom: 8px solid var(--color-gray-09);
+}
+.tooltip.right {
+  bottom: -12px;
+  transform: translateY(100%);
+  right: 0px;
+}
+.tooltip.right::after {
+  top: 1px;
+  left: 8px;
+  transform: translateY(-100%);
+  border: 8px solid transparent;
+  border-bottom: 8px solid var(--color-gray-09);
+}
+.tooltip.top {
+  top: -8px;
+  transform: translateY(-100%);
+}
+.tooltip.top::after {
+  left: 50%;
+  bottom: 1px;
+  transform: translate(-50%, 100%);
+  border: 8px solid transparent;
+  border-top: 8px solid var(--color-gray-09);
+}
+
+.truncated {
+  cursor: help;
+}
+.truncated:hover + .tooltip {
+  visibility: visible;
+  z-index: 9999;
+}
+
+.tooltip::after {
+  content: "";
+  position: absolute;
+}

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

@@ -0,0 +1,180 @@
+import { Component, h, Prop, Host, Element } from '@stencil/core';
+export class PtcTooltip {
+  constructor() {
+    /**
+     * Component Display
+     * please don't set it to be inline-block
+     */
+    this.textDisplay = 'inline';
+    /**
+     * max length
+     */
+    this.maxLength = 45;
+    /**
+     * Ellipsis apply to X lines
+     * @returns  string
+     */
+    // @Prop() textLines?: 'line-1' | 'line-2' | 'line-4' | 'line-1';
+    /**
+     * injected Description
+     */
+    this.description = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ';
+    /**
+     * index of hover element
+     */
+    this.zIndex = 'z-auto';
+    /**
+     * Tooltip position
+     */
+    this.position = 'bottom';
+  }
+  // @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"; }
+}

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

@@ -1,40 +1,40 @@
-import { Component, Prop, Host, h } from '@stencil/core';
-export class PtcTwoColumnMedia {
-  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
-    }
-  }; }
-}
+import { Component, Prop, Host, h } from '@stencil/core';
+export class PtcTwoColumnMedia {
+  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
+    }
+  }; }
+}

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

@@ -1,74 +1,74 @@
-import { Component, h, Prop, Method, State } from '@stencil/core';
-export class TabContent {
-  constructor() {
-    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 { Component, h, Prop, Method, State } from '@stencil/core';
+export class TabContent {
+  constructor() {
+    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": []
+      }
+    }
+  }; }
+}