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

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-datalist-item/stzh-datalist-item.css

@@ -126,6 +126,17 @@
   /* Vertical variant */
   /* Horizontal variant */
 }
+.stzh-datalist-item__vhidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+          clip-path: inset(100%);
+  width: 0.0625rem;
+  height: 0.0625rem;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
 .stzh-datalist-item__wrapper {
   flex-grow: 1;
   display: flex;

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

@@ -1,4 +1,5 @@
 import { Host, h, Fragment } from "@stencil/core";
+import { fetchTranslations } from "../../utils/translation-utils";
 /**
  * @slot - Slot for nested datalist
  */
@@ -16,6 +17,7 @@ export class StzhDatalistItem {
     this.handleHideBorderChange = (event) => {
       this.hideBorder = event.detail.value;
     };
+    this.localization = undefined;
     this.direction = "vertical";
     this.href = undefined;
     this.rel = undefined;
@@ -43,7 +45,7 @@ export class StzhDatalistItem {
         "is-button": isButton,
         "is-link": !!this.href
       }, href: this.href, rel: this.rel, target: this.target, download: this.download, "aria-label": `${this.label}, ${this.value}, ${this.meta}`, "aria-controls": this.a11yControls, "aria-expanded": typeof this.a11yExpanded !== "undefined"
-        ? (this.a11yExpanded ? "true" : "false") : null }, this.value), h(Item, { "aria-hidden": "true", tabindex: "-1", class: {
+        ? (this.a11yExpanded ? "true" : "false") : null }, this.rel && this.rel.includes('external') && h("div", { class: "stzh-datalist-item__vhidden" }, this.localization.$globals.externalLinkLabel), this.download && h("div", { class: "stzh-datalist-item__vhidden" }, this.localization.$globals.downloadLinkLabel), this.value), h(Item, { "aria-hidden": "true", tabindex: "-1", class: {
         "stzh-datalist-item__meta": true,
         "is-button": isButton,
         "is-link": !!this.href
@@ -75,6 +77,11 @@ export class StzhDatalistItem {
       this.datalist = null;
     }
   }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "datalist-item");
+    }
+  }
   render() {
     const isButton = typeof this.a11yExpanded !== "undefined"
       || typeof this.a11yControls !== "undefined";
@@ -120,6 +127,26 @@ export class StzhDatalistItem {
   }
   static get properties() {
     return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhLocaleComponent",
+          "resolved": "{ $locale: \"de\" | \"en\"; $formats: StzhLocaleFormats; $globals: StzhLocaleGlobals; }",
+          "references": {
+            "StzhLocaleComponent": {
+              "location": "import",
+              "path": "../../utils/translation-utils"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
       "direction": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/stzh-datamessagelist-item/stzh-datamessagelist-item.css

@@ -269,6 +269,11 @@
     margin-left: var(--stzh-space-xxlarge);
   }
 }
+@media screen and (min-width: 1024px) {
+  .stzh-datamessagelist-item__tags-wrapper {
+    flex-shrink: 0;
+  }
+}
 .stzh-datamessagelist-item__tags {
   display: flex;
   flex-wrap: wrap;
@@ -282,6 +287,11 @@
 .stzh-datamessagelist-item__tag {
   margin: var(--stzh-space-xxsmall);
 }
+@media screen and (min-width: 1024px) {
+  .stzh-datamessagelist-item__tag {
+    flex-shrink: 0;
+  }
+}
 .stzh-datamessagelist-item__actions {
   display: flex;
   flex-direction: column;

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-input/stzh-input.stories.js

@@ -49,11 +49,11 @@ const TemplateButtonRight = (args) => (
 // we put this input inside another element
 // to test if autofocus works when the component
 // is used as a child of another stzh- component
-const TemplateAutofocus = (args) => (
-  <stzh-section>
-    <stzh-input {...args}></stzh-input>
-  </stzh-section>
-)
+// const TemplateAutofocus = (args) => (
+//   <stzh-section>
+//     <stzh-input {...args}></stzh-input>
+//   </stzh-section>
+// )
 
 export const Default = Template.bind({});
 Default.args = {
@@ -107,10 +107,10 @@ ButtonRight.args = {
   value: 'Lorem ipsum dolor sit amet.'
 };
 
-export const Autofocus = TemplateAutofocus.bind({});
-Autofocus.args = {
-  name: 'text',
-  label: 'Label',
-  description: 'This field should be focused on page load',
-  autofocus: true
-}
+// export const Autofocus = TemplateAutofocus.bind({});
+// Autofocus.args = {
+//   name: 'text',
+//   label: 'Label',
+//   description: 'This field should be focused on page load',
+//   autofocus: true
+// }

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

@@ -125,10 +125,10 @@
 }
 :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-white48);
+  --counter-color: var(--stzh-color-white56);
   --icon-color: var(--stzh-color-white);
   --hover-color: var(--stzh-color-white);
   --hover-border: 0.0625rem solid transparent;
@@ -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));

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

@@ -177,6 +177,17 @@
   -webkit-text-decoration: var(--hover-text-decoration);
           text-decoration: var(--hover-text-decoration);
 }
+.stzh-link__vhidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+          clip-path: inset(100%);
+  width: 0.0625rem;
+  height: 0.0625rem;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
 .stzh-link__inner {
   display: flex;
   align-items: center;

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

@@ -1,5 +1,6 @@
 import { Host, Fragment, h } from "@stencil/core";
 import { hasSlot } from "../../utils/utils";
+import { fetchTranslations } from "../../utils/translation-utils";
 /**
  * @slot - Slot for text content
  * @slot icon - Slot for icon element
@@ -30,6 +31,7 @@ export class StzhLink {
         originalEvent: event
       });
     };
+    this.localization = undefined;
     this.icon = "";
     this.iconPosition = "left";
     this.size = "default";
@@ -53,7 +55,9 @@ export class StzhLink {
     this.a11yLabel = undefined;
     this.a11yDescribedby = "";
     this.a11yExpanded = undefined;
+    this.a11yDisabled = undefined;
     this.a11yControls = undefined;
+    this.a11yTabindex = undefined;
   }
   /** Focus link */
   async setFocus() {
@@ -67,12 +71,17 @@ export class StzhLink {
       h("stzh-badge", { class: "stzh-link__badge", label: this.badge, type: this.badgeType })));
   }
   renderContent() {
-    return (h("div", { class: "stzh-link__text" }, this.label ? this.label : h("slot", null)));
+    return (h("div", { class: "stzh-link__text" }, this.rel && this.rel.includes('external') && h("div", { class: "stzh-link__vhidden" }, this.localization.$globals.externalLinkLabel), this.download && h("div", { class: "stzh-link__vhidden" }, this.localization.$globals.downloadLinkLabel), this.label ? this.label : h("slot", null)));
   }
   renderInner(iconUsed) {
     return (h(Fragment, null, h("div", { class: "stzh-link__inner" }, this.iconPosition === "left" && this.renderIcon(), this.renderContent(), this.iconPosition === "right" && this.renderIcon()), (this.badge || this.badgeEmpty) && !iconUsed &&
       h("stzh-badge", { class: "stzh-link__badge", label: this.badge, type: this.badgeType })));
   }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "link");
+    }
+  }
   render() {
     const iconUsed = hasSlot(this.element, "icon") || !!this.icon;
     const classes = {
@@ -89,10 +98,12 @@ export class StzhLink {
       [`stzh-link--${this.variant}`]: !!this.variant,
     };
     return (h(Host, null, this.href ?
-      h("a", { ref: (el) => (this.link = el), href: this.disabled ? null : this.href, download: this.download, rel: this.rel, target: this.target, class: classes, accessKey: this.linkAccesskey, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+      h("a", { ref: (el) => (this.link = el), href: this.disabled ? null : this.href, download: this.download, rel: this.rel, target: this.target, class: classes, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-disabled": typeof this.a11yDisabled !== "undefined"
+          ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined"
           ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))
       :
-        h("button", { ref: (el) => (this.link = el), class: classes, type: this.type, disabled: this.disabled, accessKey: this.linkAccesskey, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+        h("button", { ref: (el) => (this.link = el), class: classes, type: this.type, disabled: this.disabled, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-disabled": typeof this.a11yDisabled !== "undefined"
+            ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined"
             ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))));
   }
   static get is() { return "stzh-link"; }
@@ -109,6 +120,26 @@ export class StzhLink {
   }
   static get properties() {
     return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhLocaleComponent",
+          "resolved": "{ $locale: \"de\" | \"en\"; $formats: StzhLocaleFormats; $globals: StzhLocaleGlobals; }",
+          "references": {
+            "StzhLocaleComponent": {
+              "location": "import",
+              "path": "../../utils/translation-utils"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
       "icon": {
         "type": "string",
         "mutable": false,
@@ -518,6 +549,23 @@ export class StzhLink {
         "attribute": "a11y-expanded",
         "reflect": true
       },
+      "a11yDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aria disabled of link/button"
+        },
+        "attribute": "a11y-disabled",
+        "reflect": true
+      },
       "a11yControls": {
         "type": "string",
         "mutable": false,
@@ -534,6 +582,23 @@ export class StzhLink {
         },
         "attribute": "a11y-controls",
         "reflect": false
+      },
+      "a11yTabindex": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tabindex of link/button"
+        },
+        "attribute": "a11y-tabindex",
+        "reflect": false
       }
     };
   }