@oiz/stzh-components 2.4.0 → 2.5.0-alpha-carousel

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-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,
@@ -237,23 +254,6 @@ export class StzhDatalist {
         "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-datatable/stzh-datatable.js

@@ -39,6 +39,12 @@ export class StzhDatatable {
         }
       });
     };
+    this.handleResize = () => {
+      if (this.debounceResize) {
+        window.cancelAnimationFrame(this.debounceResize);
+      }
+      this.debounceResize = requestAnimationFrame(this.updateScrollStates);
+    };
     this.handleScroll = () => {
       if (this.debounceScroll) {
         window.cancelAnimationFrame(this.debounceScroll);
@@ -92,9 +98,6 @@ export class StzhDatatable {
     }
     this.buildSearchIndex();
   }
-  handleResize() {
-    this.updateScrollStates();
-  }
   buildSearchIndex() {
     if (!this._rows || this._rows.length === 0
       || !this._columns || this._columns.length === 0) {
@@ -153,6 +156,15 @@ export class StzhDatatable {
       });
     }
   }
+  connectedCallback() {
+    this.resizeObserver = new ResizeObserver(this.handleResize);
+    this.resizeObserver.observe(this.element);
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  }
   render() {
     const classes = {
       "stzh-datatable": true,
@@ -414,13 +426,4 @@ export class StzhDatatable {
         "methodName": "columnsWatcher"
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
 }

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

@@ -181,8 +181,8 @@
 .stzh-dialog__backdrop {
   z-index: 1;
   position: absolute;
-  top: 0;
-  left: 0;
+  top: 0px;
+  left: 0px;
   width: 100%;
   height: 100%;
   overflow-x: hidden;

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

@@ -129,18 +129,6 @@ export class StzhDialog {
       this.localization = await fetchTranslations(this.element, "dialog");
     }
   }
-  connectedCallback() {
-    if (!this.stay && this.element.parentElement !== document.body) {
-      document.body.appendChild(this.element);
-    }
-    this.parentElement = this.element.parentElement;
-    this.init();
-    this.observer = new MutationObserver(this.init);
-    this.observer.observe(this.element, {
-      childList: true,
-      subtree: true
-    });
-  }
   componentDidRender() {
     this.open ? this.dialogShown() : this.dialogHidden();
   }
@@ -156,8 +144,23 @@ export class StzhDialog {
       this.dialogShown();
     }
   }
+  connectedCallback() {
+    if (!this.stay && this.element.parentElement !== document.body) {
+      document.body.appendChild(this.element);
+    }
+    this.parentElement = this.element.parentElement;
+    this.init();
+    this.observer = new MutationObserver(this.init);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true
+    });
+  }
   disconnectedCallback() {
     this.dialogHidden();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
   render() {
     return (h(Host, null, h("div", { class: {

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

@@ -431,7 +431,7 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
   left: 0;
   top: 50%;
   height: 0.125rem;
-  margin-top: -0.03125rem;
+  margin-top: -0.5px;
 }
 .stzh-dropdown__option, .stzh-dropdown__create {
   font-size: var(--stzh-font-micro-font-size);

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

@@ -46,7 +46,9 @@ export class StzhFooter {
     });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
   render() {
     const logoSlotUsed = hasSlot(this.element, "logo");

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

@@ -77,7 +77,9 @@ export class StzhGhettobox {
     });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
   render() {
     const classes = {

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

@@ -9,6 +9,33 @@ import { media } from "../../utils/media-utils";
  */
 export class StzhHeader {
   constructor() {
+    this.handleResize = () => {
+      if (this.stickyDisabled) {
+        return;
+      }
+      if (this.debounceResize) {
+        window.cancelAnimationFrame(this.debounceResize);
+      }
+      this.debounceResize = requestAnimationFrame(() => {
+        readTask(() => {
+          this.isSmall = media("small").matches;
+          this.isSmallheader = media("smallheader").matches;
+          this.headerTop = this.element.offsetTop;
+          this.headerHeight = this.element.offsetHeight;
+          this.appnavHeight = this.appnavElement ? this.appnavElement.offsetHeight : 0;
+          this.metabarHeight = this.metabarElement ? this.metabarElement.offsetHeight : 0;
+        });
+        writeTask(() => {
+          if (this.appnavHeight && !this.isSmall && !this.preventAppnavPlaceholder) {
+            this.appnavPlaceholderElement.style.height = `${this.appnavHeight}px`;
+          }
+          else {
+            this.appnavPlaceholderElement.style.height = "0px";
+          }
+        });
+        this.scrollListener();
+      });
+    };
     this.href = "https://www.stadt-zuerich.ch";
     this.metabarStay = false;
     this.stickyDisabled = false;
@@ -54,33 +81,6 @@ export class StzhHeader {
       }
     }
   }
-  resizeListener() {
-    if (this.stickyDisabled) {
-      return;
-    }
-    if (this.debounceResize) {
-      window.cancelAnimationFrame(this.debounceResize);
-    }
-    this.debounceResize = requestAnimationFrame(() => {
-      readTask(() => {
-        this.isSmall = media("small").matches;
-        this.isSmallheader = media("smallheader").matches;
-        this.headerTop = this.element.offsetTop;
-        this.headerHeight = this.element.offsetHeight;
-        this.appnavHeight = this.appnavElement ? this.appnavElement.offsetHeight : 0;
-        this.metabarHeight = this.metabarElement ? this.metabarElement.offsetHeight : 0;
-      });
-      writeTask(() => {
-        if (this.appnavHeight && !this.isSmall && !this.preventAppnavPlaceholder) {
-          this.appnavPlaceholderElement.style.height = `${this.appnavHeight}px`;
-        }
-        else {
-          this.appnavPlaceholderElement.style.height = "0px";
-        }
-      });
-      this.scrollListener();
-    });
-  }
   scrollListener() {
     if (this.stickyDisabled) {
       return;
@@ -138,9 +138,14 @@ export class StzhHeader {
   connectedCallback() {
     this.appnavPlaceholderElement = document.createElement("div");
     this.element.parentElement.appendChild(this.appnavPlaceholderElement);
+    this.resizeObserver = new ResizeObserver(this.handleResize);
+    this.resizeObserver.observe(this.element);
   }
   disconnectedCallback() {
     this.appnavPlaceholderElement.parentElement.removeChild(this.appnavPlaceholderElement);
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
   }
   render() {
     const navSlotUsed = hasSlot(this.element, "nav");
@@ -284,24 +289,6 @@ export class StzhHeader {
   static get elementRef() { return "element"; }
   static get listeners() {
     return [{
-        "name": "resize",
-        "method": "resizeListener",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "DOMContentLoaded",
-        "method": "resizeListener",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "load",
-        "method": "resizeListener",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
         "name": "scroll",
         "method": "scrollListener",
         "target": "window",

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

@@ -100,6 +100,7 @@
 :host {
   --h-space: var(--stzh-space-default);
   --h-around: 0;
+  display: flex;
   clear: both;
 }
 :host::after {
@@ -799,6 +800,9 @@
 }
 
 .stzh-hspace {
+  flex-grow: 1;
+  width: 100%;
+  height: 100%;
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;

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

@@ -297,7 +297,7 @@
   z-index: -1;
   left: 0;
   top: 50%;
-  margin-top: -0.03125rem;
+  margin-top: -0.5px;
   height: 0.125rem;
 }
 .stzh-input__input:hover + .stzh-input__label, .stzh-input__input:focus + .stzh-input__label {

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

@@ -125,7 +125,7 @@
 }
 :host ::slotted(*) stzh-chip[variant=filter]:not([disabled]) {
   --color: var(--stzh-color-white);
-  --border: 0.0625rem solid var(--stzh-color-white);
+  --border-color: var(--stzh-color-white);
   --remove-color: var(--stzh-color-white);
   --background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
   --counter-color: var(--stzh-color-white56);
@@ -140,13 +140,13 @@
 }
 :host ::slotted(*) stzh-chip[variant=filter][non-interactive]:not([non-interactive=false]):not([disabled]) {
   --hover-color: var(--color);
-  --hover-border: var(--border);
+  --hover-border-color: var(--border-color);
   --hover-background-color: var(--background-color);
   --hover-icon-color: var(--icon-color);
   --hover-counter-color: var(--counter-color);
 }
 :host ::slotted(*) stzh-chip[variant=filter][active]:not([active=false]):not([disabled]) {
-  --border: 0.0625rem solid transparent;
+  --border-color: transparent;
   --background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
   --hover-background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
   --hover-remove-background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));