@oiz/stzh-components 2.4.0 → 2.5.0-alpha

package/dist/collection/components/stzh-clamp/stzh-clamp.css

@@ -95,10 +95,18 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
-:host {
-  --lines: 1;
+stzh-clamp {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+  --current-lines: var(--lines, 0);
   width: 100%;
   color: inherit;
   font-family: inherit;
@@ -107,178 +115,41 @@
   font-size: inherit;
   line-height: inherit;
 }
-
-:host([lines="1"]) {
-  --lines: 1;
-}
-
-:host([lines="2"]) {
-  --lines: 2;
-}
-
-:host([lines="3"]) {
-  --lines: 3;
-}
-
-:host([lines="4"]) {
-  --lines: 4;
-}
-
-:host([lines="5"]) {
-  --lines: 5;
-}
-
-@media screen and (min-width: 600px) {
-  :host([lines-small="1"]) {
-    --lines: 1;
-  }
-}
-
-@media screen and (min-width: 600px) {
-  :host([lines-small="2"]) {
-    --lines: 2;
-  }
-}
-
-@media screen and (min-width: 600px) {
-  :host([lines-small="3"]) {
-    --lines: 3;
-  }
+stzh-clamp[hidden] {
+  display: none;
 }
-
-@media screen and (min-width: 600px) {
-  :host([lines-small="4"]) {
-    --lines: 4;
-  }
+stzh-clamp *,
+stzh-clamp *::before,
+stzh-clamp *::after {
+  box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
-
 @media screen and (min-width: 600px) {
-  :host([lines-small="5"]) {
-    --lines: 5;
+  stzh-clamp {
+    --current-lines: var(--lines-small, var(--lines, 0));
   }
 }
-
-@media screen and (min-width: 800px) {
-  :host([lines-smallheader="1"]) {
-    --lines: 1;
-  }
-}
-
-@media screen and (min-width: 800px) {
-  :host([lines-smallheader="2"]) {
-    --lines: 2;
-  }
-}
-
-@media screen and (min-width: 800px) {
-  :host([lines-smallheader="3"]) {
-    --lines: 3;
-  }
-}
-
-@media screen and (min-width: 800px) {
-  :host([lines-smallheader="4"]) {
-    --lines: 4;
-  }
-}
-
-@media screen and (min-width: 800px) {
-  :host([lines-smallheader="5"]) {
-    --lines: 5;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  :host([lines-medium="1"]) {
-    --lines: 1;
-  }
-}
-
 @media screen and (min-width: 1024px) {
-  :host([lines-medium="2"]) {
-    --lines: 2;
+  stzh-clamp {
+    --current-lines: var(--lines-medium, var(--lines-small, var(--lines, 0)));
   }
 }
-
-@media screen and (min-width: 1024px) {
-  :host([lines-medium="3"]) {
-    --lines: 3;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  :host([lines-medium="4"]) {
-    --lines: 4;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  :host([lines-medium="5"]) {
-    --lines: 5;
-  }
-}
-
 @media screen and (min-width: 1260px) {
-  :host([lines-large="1"]) {
-    --lines: 1;
+  stzh-clamp {
+    --current-lines: var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0))));
   }
 }
-
-@media screen and (min-width: 1260px) {
-  :host([lines-large="2"]) {
-    --lines: 2;
-  }
-}
-
-@media screen and (min-width: 1260px) {
-  :host([lines-large="3"]) {
-    --lines: 3;
-  }
-}
-
-@media screen and (min-width: 1260px) {
-  :host([lines-large="4"]) {
-    --lines: 4;
-  }
-}
-
-@media screen and (min-width: 1260px) {
-  :host([lines-large="5"]) {
-    --lines: 5;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  :host([lines-ultra="1"]) {
-    --lines: 1;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  :host([lines-ultra="2"]) {
-    --lines: 2;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  :host([lines-ultra="3"]) {
-    --lines: 3;
-  }
-}
-
 @media screen and (min-width: 1440px) {
-  :host([lines-ultra="4"]) {
-    --lines: 4;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  :host([lines-ultra="5"]) {
-    --lines: 5;
+  stzh-clamp {
+    --current-lines: var(--lines-ultra, var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0)))));
   }
 }
 
 .stzh-clamp {
+  position: relative;
+}
+.stzh-clamp__text {
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
@@ -286,7 +157,26 @@
           hyphens: auto;
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--lines);
-  line-clamp: var(--lines);
   overflow: hidden;
+}
+.stzh-clamp__text > *:first-child {
+  margin-top: 0 !important;
+}
+.stzh-clamp__text > *:last-child {
+  margin-bottom: 0 !important;
+}
+.stzh-clamp__text.is-clone {
+  position: absolute;
+  visibility: hidden;
+  opacity: 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.stzh-clamp__trigger {
+  margin-top: var(--stzh-space-xxsmall);
+}
+.stzh-clamp--is-not-expanded .stzh-clamp__text, .stzh-clamp__text.is-clone {
+  -webkit-line-clamp: var(--current-lines);
+  line-clamp: var(--current-lines);
 }

package/dist/collection/components/stzh-clamp/stzh-clamp.js

@@ -1,23 +1,95 @@
 import { Host, h } from "@stencil/core";
+import { fetchTranslations } from "../../utils/translation-utils";
 /**
  *
  */
 export class StzhClamp {
   constructor() {
+    this.updateClamped = () => {
+      if (!this.textCloneElement) {
+        return;
+      }
+      const beforeClamped = this.clamped;
+      this.clamped = this.textCloneElement.scrollHeight > this.textCloneElement.clientHeight;
+      if (beforeClamped !== this.clamped) {
+        this.stzhClamp.emit({
+          component: "stzh-clamp",
+          clamped: this.clamped
+        });
+      }
+    };
+    this.handleResize = () => {
+      if (this.debounceResize) {
+        window.cancelAnimationFrame(this.debounceResize);
+      }
+      this.debounceResize = requestAnimationFrame(this.updateClamped);
+    };
+    this.handleMutaton = () => {
+      this.update();
+    };
+    this.handleExpandClick = () => {
+      this.expanded = !this.expanded;
+      this.stzhExpand.emit({
+        component: "stzh-clamp",
+        expanded: this.expanded
+      });
+    };
+    this.localization = undefined;
     this.lines = 1;
     this.linesSmall = 0;
     this.linesMedium = 0;
     this.linesLarge = 0;
     this.linesUltra = 0;
+    this.showExpandLink = false;
+    this.expanded = false;
+    this.clamped = false;
+  }
+  async update() {
+    this.textCloneElement.innerHTML = this.textElement.innerHTML;
+    this.updateClamped();
+  }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "clamp");
+    }
+  }
+  componentDidLoad() {
+    this.mutationObserver = new MutationObserver(this.handleMutaton);
+    this.mutationObserver.observe(this.textElement, {
+      childList: true,
+      subtree: true,
+    });
+  }
+  componentDidRender() {
+    this.update();
+  }
+  connectedCallback() {
+    this.resizeObserver = new ResizeObserver(this.handleResize);
+    this.resizeObserver.observe(this.element);
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
   }
   render() {
     const classes = {
-      "stzh-clamp": true
+      "stzh-clamp": true,
+      "stzh-clamp--is-not-expanded": !this.expanded
     };
-    return (h(Host, null, h("div", { class: classes }, h("slot", null))));
+    return (h(Host, { style: {
+        '--lines': this.lines ? this.lines.toString() : null,
+        '--lines-small': this.linesSmall ? this.linesSmall.toString() : null,
+        '--lines-medium': this.linesMedium ? this.linesMedium.toString() : null,
+        '--lines-large': this.linesLarge ? this.linesLarge.toString() : null,
+        '--lines-ultra': this.linesUltra ? this.linesUltra.toString() : null,
+      } }, h("div", { class: classes }, h("div", { ref: (el) => (this.textElement = el), class: "stzh-clamp__text" }, h("slot", null)), h("div", { ref: (el) => (this.textCloneElement = el), class: "stzh-clamp__text is-clone", "aria-hidden": "true" }), this.showExpandLink && this.clamped &&
+      h("stzh-link", { class: "stzh-clamp__trigger", a11yTabindex: "-1", "aria-hidden": "true", onClick: this.handleExpandClick }, !this.expanded ? this.localization.showMore : this.localization.showLess))));
   }
   static get is() { return "stzh-clamp"; }
-  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["stzh-clamp.scss"]
@@ -30,6 +102,26 @@ export class StzhClamp {
   }
   static get properties() {
     return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhClampLocalizedText",
+          "resolved": "StzhLocaleComponent & { showMore: string; showLess: string; }",
+          "references": {
+            "StzhClampLocalizedText": {
+              "location": "import",
+              "path": "./stzh-clamp.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
       "lines": {
         "type": "number",
         "mutable": false,
@@ -45,7 +137,7 @@ export class StzhClamp {
           "text": "Line number"
         },
         "attribute": "lines",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "1"
       },
       "linesSmall": {
@@ -63,7 +155,7 @@ export class StzhClamp {
           "text": "Line number above small breakpoint"
         },
         "attribute": "lines-small",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "0"
       },
       "linesMedium": {
@@ -81,7 +173,7 @@ export class StzhClamp {
           "text": "Line number above medium breakpoint"
         },
         "attribute": "lines-medium",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "0"
       },
       "linesLarge": {
@@ -99,7 +191,7 @@ export class StzhClamp {
           "text": "Line number above large breakpoint"
         },
         "attribute": "lines-large",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "0"
       },
       "linesUltra": {
@@ -117,9 +209,127 @@ export class StzhClamp {
           "text": "Line number above ultra breakpoint"
         },
         "attribute": "lines-ultra",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "0"
+      },
+      "showExpandLink": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether clamping is expanded"
+        },
+        "attribute": "show-expand-link",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "expanded": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether clamping is expanded"
+        },
+        "attribute": "expanded",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "clamped": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the text is currently clamped (readonly)"
+        },
+        "attribute": "clamped",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhClamp",
+        "name": "stzhClamp",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event when clamping state changed"
+        },
+        "complexType": {
+          "original": "StzhClampClampEvent",
+          "resolved": "{ component: \"stzh-clamp\"; clamped: boolean; }",
+          "references": {
+            "StzhClampClampEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhExpand",
+        "name": "stzhExpand",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event when expanding state changed"
+        },
+        "complexType": {
+          "original": "StzhClampExpandEvent",
+          "resolved": "{ component: \"stzh-clamp\"; expanded: boolean; }",
+          "references": {
+            "StzhClampExpandEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "update": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }
+  static get elementRef() { return "element"; }
 }

package/dist/collection/components/stzh-clamp/stzh-clamp.localization.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/stzh-clamp/stzh-clamp.stories.js

@@ -9,7 +9,7 @@ export default {
   component: 'stzh-clamp',
   parameters: {
     actions: {
-      handles: []
+      handles: ['stzhClamp', 'stzhExpand']
     },
     docs: {
       description: {

package/dist/collection/components/stzh-contact/stzh-contact.css

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host ::slotted([slot=image]) {

package/dist/collection/components/stzh-container/stzh-container.css

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {

package/dist/collection/components/stzh-cspace/stzh-cspace.css

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {

package/dist/collection/components/stzh-datalist/stzh-datalist.css

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {

package/dist/collection/components/stzh-datalist/stzh-datalist.js

@@ -29,8 +29,8 @@ export class StzhDatalist {
     this.directionUltra = "inherit";
     this.hideBorder = false;
     this.disableLabelMinWidth = false;
-    this.items = [];
     this.currentDirection = undefined;
+    this.items = [];
   }
   hideBorderWatcher(newValue) {
     this.stzhHideBorderChange.emit({
@@ -215,6 +215,23 @@ export class StzhDatalist {
         "reflect": true,
         "defaultValue": "false"
       },
+      "currentDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"vertical\" | \"horizontal\"",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Current direction in use (readonly)"
+        },
+        "attribute": "current-direction",
+        "reflect": true
+      },
       "items": {
         "type": "string",
         "mutable": false,
@@ -232,28 +249,11 @@ export class StzhDatalist {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Items in datalist\nArray of objects that must at least include `value` attribute.\nCan optionally contain `leadingIcon`, `label`, `meta`, `icon`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:\n`[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`"
+          "text": "Items in datalist\nArray of objects that must at least include `value` attribute.\nCan optionally contain `leadingIcon`, `label`, `meta`, `icon`, `iconLabel`, `iconTooltip`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:\n`[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`"
         },
         "attribute": "items",
         "reflect": false,
         "defaultValue": "[]"
-      },
-      "currentDirection": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"vertical\" | \"horizontal\"",
-          "resolved": "\"horizontal\" | \"vertical\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Current direction in use (readonly)"
-        },
-        "attribute": "current-direction",
-        "reflect": false
       }
     };
   }

package/dist/collection/components/stzh-datalist/stzh-datalist.stories.js

@@ -50,6 +50,7 @@ Default.args = {
       "label": "Label",
       "value": "Value 1",
       "icon": "delete",
+      "iconTooltip": "Remove Item",
       "statusLabel": "Status",
       "statusType": "error"
     },
@@ -58,6 +59,7 @@ Default.args = {
       "label": "Really Long Label",
       "value": "Value 2",
       "icon": "question-help",
+      "iconTooltip": "Help",
       "statusLabel": "Status",
       "statusType": "success"
     },
@@ -79,7 +81,8 @@ Default.args = {
       "label": "Label",
       "value": "Value 5",
       "meta": "Metainfo",
-      "icon": "delete"
+      "icon": "delete",
+      "iconTooltip": "Remove Item"
     }
   ]
 };