@ptcwebops/ptcw-design 0.8.4 → 0.8.6

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

@@ -109,4 +109,14 @@
 .tooltip::after {
   content: "";
   position: absolute;
+}
+
+.ellipsis-by-line-boxing {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+  padding-bottom: 0;
 }

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

@@ -3,29 +3,51 @@ export class PtcTooltip {
   constructor() {
     this.textDisplay = 'inline';
     this.maxLength = 45;
+    this.textLines = undefined;
     this.description = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ';
     this.zIndex = 'z-auto';
     this.position = 'bottom';
     this.styles = undefined;
   }
+  addTruncatedClass() {
+    const appRoot = this.el.shadowRoot;
+    const text = appRoot.querySelectorAll('.ellipsis-by-line-boxing');
+    text.forEach(t => {
+      t.classList[t.scrollHeight > t.clientHeight ? 'add' : 'remove']('truncated');
+    });
+  }
+  componentDidLoad() {
+    this.addTruncatedClass();
+  }
   render() {
     const classMap = this.getCssClassMap();
+    const cutOff = this.getLineCuttoff();
     let truncatedText = this.description.substring(0, this.maxLength);
     if (this.description.length > this.maxLength) {
       const lastSpace = truncatedText.lastIndexOf(' ');
       truncatedText = truncatedText.substring(0, lastSpace);
       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)));
+    return (h(Host, { class: this.textDisplay }, this.styles && h("style", null, this.styles), this.textLines > 0 && !!this.textLines ? h("div", { class: "ellipsis-by-line-boxing", style: cutOff }, this.description) : h("div", { class: classMap }, truncatedText), h("div", { class: `tooltip ${this.position}` }, this.description)));
   }
   getCssClassMap() {
     return {
-      // [this.textLines]: true,
+      // ['ellipsis-by-line-boxing']: this.textLines && this.textLines > 0,
       ['text-ellipsis']: true,
       [this.zIndex]: this.description.length > this.maxLength ? true : false,
-      ['truncated']: this.description.length > this.maxLength ? true : false
+      ['truncated']: this.description.length > this.maxLength && !this.textLines ? true : false,
     };
   }
+  getLineCuttoff() {
+    let result;
+    if (this.textLines && this.textLines > 0) {
+      result = {
+        ['-webkit-line-clamp']: `${this.textLines}`,
+      };
+    }
+    return result;
+  }
   static get is() { return "ptc-tooltip"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
@@ -76,6 +98,26 @@ export class PtcTooltip {
         "reflect": false,
         "defaultValue": "45"
       },
+      "textLines": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "returns",
+              "text": "string"
+            }],
+          "text": "Ellipsis apply to X lines"
+        },
+        "attribute": "text-lines",
+        "reflect": false
+      },
       "description": {
         "type": "string",
         "mutable": false,
@@ -150,4 +192,13 @@ export class PtcTooltip {
     };
   }
   static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "addTruncatedClass",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
 }

package/dist/custom-elements/index.d.ts

@@ -20,6 +20,12 @@ export const ListItem: {
   new (): ListItem;
 };
 
+interface MaxWidthContainer extends Components.MaxWidthContainer, HTMLElement {}
+export const MaxWidthContainer: {
+  prototype: MaxWidthContainer;
+  new (): MaxWidthContainer;
+};
+
 interface MyComponent extends Components.MyComponent, HTMLElement {}
 export const MyComponent: {
   prototype: MyComponent;