@oiz/stzh-components 2.4.0 → 2.5.0-alpha

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

@@ -95,11 +95,14 @@
 :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 {
   --space: var(--stzh-space-default);
   --around: 0;
+  display: flex;
   clear: both;
 }
 :host::after {
@@ -806,6 +809,9 @@
 }
 
 .stzh-space {
+  flex-grow: 1;
+  width: 100%;
+  height: 100%;
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;

package/dist/collection/components/stzh-status/stzh-status.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-sticky/stzh-sticky.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-sticky/stzh-sticky.js

@@ -54,7 +54,9 @@ export class StzhSticky {
     this.observer.observe(this.element);
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
   render() {
     const classes = {

package/dist/collection/components/stzh-table/stzh-table.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);
 }
 
 stzh-table {
@@ -116,6 +118,8 @@ stzh-table *,
 stzh-table *::before,
 stzh-table *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 stzh-table[disable-min-width]:not([disable-min-width=false]) {
   --min-width: none;

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

@@ -88,6 +88,12 @@ export class StzhTable {
       this.updateCellClasses();
       this.updateScrollStates();
     };
+    this.handleResize = () => {
+      if (this.debounceResize) {
+        window.cancelAnimationFrame(this.debounceResize);
+      }
+      this.debounceResize = requestAnimationFrame(this.updateScrollStates);
+    };
     this.handleScroll = () => {
       if (this.debounceScroll) {
         window.cancelAnimationFrame(this.debounceScroll);
@@ -107,9 +113,6 @@ export class StzhTable {
     this.updateCellClasses();
     this.updateScrollStates();
   }
-  handleResize() {
-    this.updateScrollStates();
-  }
   connectedCallback() {
     this.init();
     this.observer = new MutationObserver(this.init);
@@ -117,9 +120,16 @@ export class StzhTable {
       childList: true,
       subtree: true
     });
+    this.resizeObserver = new ResizeObserver(this.handleResize);
+    this.resizeObserver.observe(this.element);
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
   }
   render() {
     const classes = {
@@ -220,13 +230,4 @@ export class StzhTable {
         "methodName": "fixedCellWatcher"
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
 }

package/dist/collection/components/stzh-text/stzh-text.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 {
@@ -108,6 +110,21 @@
 :host ::slotted(*:last-child) {
   margin-bottom: 0 !important;
 }
+:host ::slotted(stzh-icon),
+:host ::slotted(* stzh-icon) {
+  --size: 1.25em;
+  vertical-align: text-bottom;
+}
+:host ::slotted(a),
+:host ::slotted(* a) {
+  color: var(--stzh-link-color);
+  transition: color var(--stzh-base-transition-animation-speed);
+  border-radius: var(--stzh-button-border-radius);
+}
+:host ::slotted(a):hover,
+:host ::slotted(* a):hover {
+  color: var(--stzh-link-hover-color);
+}
 :host[lead]:not([lead=false]) {
   --color: var(--stzh-base-lead-color);
 }

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

@@ -33,6 +33,12 @@ const Template = (args) => (
   </stzh-text>
 );
 
+const TemplateIcon = (args) => (
+  <stzh-text {...args}>
+    <p><stzh-icon name="info-help"></stzh-icon> Laboris laborum aute id laboris culpa esse aliquip nisi anim velit.</p>
+  </stzh-text>
+);
+
 export const Default = Template.bind({});
 Default.args = {
 };
@@ -41,3 +47,7 @@ export const Lead = Template.bind({});
 Lead.args = {
   lead: true
 };
+
+export const WithIcon = TemplateIcon.bind({});
+WithIcon.args = {
+};

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

@@ -96,6 +96,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);
 }
 
 @media screen and (min-width: 600px) {

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

@@ -95,11 +95,12 @@
 :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 {
   display: inline-block;
-  border-radius: var(--stzh-form-input-border-radius);
 }
 :host ::slotted(stzh-text) {
   --color: inherit;
@@ -206,6 +207,10 @@
   z-index: -1;
   opacity: 0;
   pointer-events: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border-radius: var(--stzh-form-input-border-radius);
 }
 .stzh-toggle__mark {
   position: relative;

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { hasSlot } from "../../utils/utils";
 import { fetchTranslations } from "../../utils/translation-utils";
 import { StzhInputDescription } from "../stzh-input/stzh-input-description";
@@ -11,6 +11,7 @@ let toggleCounter = 0;
  */
 export class StzhToggle {
   constructor() {
+    this.focusedByInput = false;
     this.onInput = (event) => {
       this.checked = this.input.checked;
       this.stzhChange.emit({
@@ -20,7 +21,14 @@ export class StzhToggle {
         checked: this.checked
       });
     };
+    this.onRootFocus = () => {
+      if (!this.focusedByInput) {
+        this.setFocus();
+      }
+      this.focusedByInput = false;
+    };
     this.onFocus = (event) => {
+      this.focusedByInput = true;
       const focusEvent = new FocusEvent('focus', {
         view: window,
         bubbles: false,
@@ -106,12 +114,12 @@ export class StzhToggle {
       "stzh-toggle--has-description-long": descriptionLongUsed,
       [`stzh-toggle--has-label-${this.labelPosition}`]: !!this.labelPosition
     };
-    return (h("div", { class: classes }, h("label", { class: "stzh-toggle__field-wrapper" }, h("input", { class: "stzh-toggle__input", ref: (el) => (this.input = el), type: "checkbox", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { class: "stzh-toggle__mark" }, h("div", { class: "stzh-toggle__check" })), h("div", { class: "stzh-toggle__label" }, this.label ? this.label : h("slot", null), this.showMarker &&
+    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { class: classes }, h("label", { class: "stzh-toggle__field-wrapper" }, h("input", { class: "stzh-toggle__input", ref: (el) => (this.input = el), type: "checkbox", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { class: "stzh-toggle__mark" }, h("div", { class: "stzh-toggle__check" })), h("div", { class: "stzh-toggle__label" }, this.label ? this.label : h("slot", null), this.showMarker &&
       h("span", { class: "stzh-toggle__marker" }, h("span", { class: "stzh-toggle__marker-symbol", "aria-hidden": "true" }, this.required
         ? this.localization.$globals.requiredFieldMarker
         : this.localization.$globals.optionalFieldMarker), h("span", { class: "stzh-toggle__marker-text" }, this.required
         ? this.localization.$globals.requiredFieldText
-        : this.localization.$globals.optionalFieldText)))), h(StzhInputDescription, { classPrefix: "stzh-toggle", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })));
+        : this.localization.$globals.optionalFieldText)))), h(StzhInputDescription, { classPrefix: "stzh-toggle", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))));
   }
   static get is() { return "stzh-toggle"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-tooltip/stzh-tooltip.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-upload/stzh-upload.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);
 }
 
 stzh-upload {
@@ -112,6 +114,8 @@ stzh-upload *,
 stzh-upload *::before,
 stzh-upload *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 .stzh-upload {

package/dist/collection/components/stzh-vbz-linechip/stzh-vbz-linechip.css

@@ -95,10 +95,12 @@
 :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 {
-  border-radius: var(--stzh-button-border-radius);
+  display: inline-block;
 }
 
 .stzh-vbz-linechip {

package/dist/collection/components/stzh-vbz-linechip/stzh-vbz-linechip.js

@@ -6,7 +6,15 @@ import LineColors from "./line-colors.json";
  */
 export class StzhVbzLinechip {
   constructor() {
+    this.focusedByInput = false;
+    this.onRootFocus = () => {
+      if (!this.focusedByInput) {
+        this.setFocus();
+      }
+      this.focusedByInput = false;
+    };
     this.onFocus = (event) => {
+      this.focusedByInput = true;
       const focusEvent = new FocusEvent("focus", {
         view: window,
         bubbles: false,
@@ -34,6 +42,7 @@ export class StzhVbzLinechip {
     this.active = false;
     this.alert = false;
     this.global = false;
+    this.disabled = false;
   }
   /** Focus menu item */
   async setFocus() {
@@ -63,7 +72,7 @@ export class StzhVbzLinechip {
       [`stzh-vbz-linechip--line-${this.line}`]: !!this.line
     };
     const title = lineData.comment || "";
-    return (h(Host, null, h("button", { ref: (el) => (this.chip = el), class: classes, style: styles, title: title, onFocus: this.onFocus, onBlur: this.onBlur }, this.global ?
+    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("button", { ref: (el) => (this.chip = el), class: classes, style: styles, title: title, disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur }, this.global ?
       h("stzh-icon", { name: "important-warning", class: "stzh-vbz-linechip__global-icon" })
       :
         h("div", { class: "stzh-vbz-linechip__text" }, this.line), this.alert &&
@@ -158,6 +167,24 @@ export class StzhVbzLinechip {
         "attribute": "global",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether fold disabled"
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/stzh-vbz-majorticker/stzh-vbz-majorticker.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);
 }
 
 .stzh-vbz-majorticker__ghettobox {

package/dist/collection/components/stzh-vbz-ticker/stzh-vbz-ticker.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);
 }
 
 .stzh-vbz-ticker {

package/dist/collection/components/stzh-visuallyhidden/stzh-visuallyhidden.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(*):not(:focus):not(:active) {

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

@@ -95,11 +95,14 @@
 :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 {
   --v-space: var(--stzh-space-default);
   --v-around: 0;
+  display: flex;
   clear: both;
 }
 :host::after {
@@ -799,6 +802,9 @@
 }
 
 .stzh-vspace {
+  flex-grow: 1;
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;

package/dist/collection/global/js/script.js

@@ -1,3 +1,5 @@
+import "wicg-inert";
+
 import { version } from '../../../package.json';
 import { applyAutofocus } from './helpers/autofocus';
 import { observeScrollbarWidth } from './helpers/scrollbar-width';

package/dist/collection/pages/egov.stories.js

@@ -22,60 +22,62 @@ const Base = (args) => (
       <stzh-skiplink href="#anchorContent" link-accesskey="2" link-title="[ALT + 2]">Content</stzh-skiplink>
     </stzh-page-skiplinks>
 
-    <stzh-header>
-      <img
-        slot="logo"
-        src="media/logo/stzh-default.svg"
-        alt="Logo City Zürich, go to homepage"
-      ></img>
-
-      <nav slot="nav" id="anchorNavMeta">
-        <stzh-visuallyhidden>
-          <h2>Meta Navigation</h2>
-        </stzh-visuallyhidden>
-
-        <stzh-metanav>
-          <stzh-link href="#contact">Contact City Zürich</stzh-link>
-        </stzh-metanav>
-      </nav>
-
-      <stzh-popover label="My Account" slot="login" placement="bottom-end">
-        <stzh-button
-          fullwidth
-          text-align="space-between"
-          icon-position="right"
-          icon="user"
-        >
-          Full Name
-        </stzh-button>
-        <stzh-menu slot="content">
-          <stzh-menu-item href="/app/mkfewww/web/auth" icon="bulleted-list">
-            Mein Konto
-          </stzh-menu-item>
-          <stzh-menu-item href="/app/mkfewww/web/auth/settings" icon="gear">
-            Settings
-          </stzh-menu-item>
-          <stzh-menu-item href="/about-meinkonto" icon="info-help">
-            About Mein Konto
-          </stzh-menu-item>
-        </stzh-menu>
-        <stzh-button href="/login/generic/logout" slot="action" variant="secondary" size="small">
-          Logout
-        </stzh-button>
-      </stzh-popover>
-    </stzh-header>
-
-    <stzh-section id="anchorContent">
-      <stzh-vspace curve="large"></stzh-vspace>
-
-      <stzh-container>
-        {args.content}
-      </stzh-container>
-
-      <stzh-vspace curve="big"></stzh-vspace>
-    </stzh-section>
-
-    <stzh-footer variant="egov"></stzh-footer>
+    <div class="stzh-layout-sticky-footer">
+      <stzh-header>
+        <img
+          slot="logo"
+          src="media/logo/stzh-default.svg"
+          alt="Logo City Zürich, go to homepage"
+        ></img>
+
+        <nav slot="nav" id="anchorNavMeta">
+          <stzh-visuallyhidden>
+            <h2>Meta Navigation</h2>
+          </stzh-visuallyhidden>
+
+          <stzh-metanav>
+            <stzh-link href="#contact">Contact City Zürich</stzh-link>
+          </stzh-metanav>
+        </nav>
+
+        <stzh-popover label="My Account" slot="login" placement="bottom-end">
+          <stzh-button
+            fullwidth
+            text-align="space-between"
+            icon-position="right"
+            icon="user"
+          >
+            Full Name
+          </stzh-button>
+          <stzh-menu slot="content">
+            <stzh-menu-item href="/app/mkfewww/web/auth" icon="bulleted-list">
+              Mein Konto
+            </stzh-menu-item>
+            <stzh-menu-item href="/app/mkfewww/web/auth/settings" icon="gear">
+              Settings
+            </stzh-menu-item>
+            <stzh-menu-item href="/about-meinkonto" icon="info-help">
+              About Mein Konto
+            </stzh-menu-item>
+          </stzh-menu>
+          <stzh-button href="/login/generic/logout" slot="action" variant="secondary" size="small">
+            Logout
+          </stzh-button>
+        </stzh-popover>
+      </stzh-header>
+
+      <stzh-section id="anchorContent">
+        <stzh-vspace curve="large"></stzh-vspace>
+
+        <stzh-container>
+          {args.content}
+        </stzh-container>
+
+        <stzh-vspace curve="big"></stzh-vspace>
+      </stzh-section>
+
+      <stzh-footer variant="egov"></stzh-footer>
+    </div>
   </div>
 );
 
@@ -247,14 +249,14 @@ const Template = (args) => (
                       name="ordernumber"
                       label="Order Number"
                       value="123456"
-                   ></stzh-input>
+                    ></stzh-input>
                   </stzh-cell>
                 </stzh-row>
 
               </stzh-fieldset>
 
               <stzh-row>
-                <stzh-cell span="6">
+                <stzh-cell span-small="6">
                   <stzh-saptcha numbers='["7", "9", "8"]' name="saptcha"></stzh-saptcha>
                 </stzh-cell>
               </stzh-row>
@@ -280,6 +282,17 @@ const Template = (args) => (
   ) }))
 );
 
+const TemplateStickyFooter = (args) => (
+  (Base({ content: (
+    <DocumentFragment>
+    </DocumentFragment>
+  ) }))
+);
+
 export const Default = Template.bind({});
 Default.args = {
 };
+
+export const StickyFooter = TemplateStickyFooter.bind({});
+StickyFooter.args = {
+};