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

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

@@ -55,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() {
@@ -96,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"; }
@@ -545,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,
@@ -561,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
       }
     };
   }

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

@@ -100,14 +100,14 @@
 @-webkit-keyframes stzh-loader {
   0% {
     transform: scale(0);
-    left: 0;
+    left: 0px;
     opacity: 1;
   }
   12.5% {
     transform: scale(1);
   }
   25% {
-    left: 0;
+    left: 0px;
   }
   37.5% {
     left: 4.375rem;
@@ -136,14 +136,14 @@
 @keyframes stzh-loader {
   0% {
     transform: scale(0);
-    left: 0;
+    left: 0px;
     opacity: 1;
   }
   12.5% {
     transform: scale(1);
   }
   25% {
-    left: 0;
+    left: 0px;
   }
   37.5% {
     left: 4.375rem;

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

@@ -32,12 +32,12 @@ export class StzhMenuItem {
     this.badge = "";
     this.badgeType = "default";
     this.badgeEmpty = false;
-    this.icon = "";
+    this.disabled = false;
     this.active = false;
+    this.icon = "";
     this.label = "";
     this.href = "";
     this.target = "";
-    this.disabled = false;
     this.a11yLabel = undefined;
   }
   /** Focus menu item */
@@ -134,23 +134,23 @@ export class StzhMenuItem {
         "reflect": true,
         "defaultValue": "false"
       },
-      "icon": {
-        "type": "string",
+      "disabled": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Icon (use instead of icon slot)"
+          "text": "Whether the button is disabled"
         },
-        "attribute": "icon",
-        "reflect": false,
-        "defaultValue": "\"\""
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
       "active": {
         "type": "boolean",
@@ -167,10 +167,10 @@ export class StzhMenuItem {
           "text": "Whether the button is active"
         },
         "attribute": "active",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       },
-      "label": {
+      "icon": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -182,13 +182,13 @@ export class StzhMenuItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Label"
+          "text": "Icon (use instead of icon slot)"
         },
-        "attribute": "label",
+        "attribute": "icon",
         "reflect": false,
         "defaultValue": "\"\""
       },
-      "href": {
+      "label": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -200,13 +200,13 @@ export class StzhMenuItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "`href` if the button should be used as link"
+          "text": "Label"
         },
-        "attribute": "href",
+        "attribute": "label",
         "reflect": false,
         "defaultValue": "\"\""
       },
-      "target": {
+      "href": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -218,29 +218,29 @@ export class StzhMenuItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Target if the button is used as link (if `href` used)"
+          "text": "`href` if the button should be used as link"
         },
-        "attribute": "target",
+        "attribute": "href",
         "reflect": false,
         "defaultValue": "\"\""
       },
-      "disabled": {
-        "type": "boolean",
+      "target": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Whether the button is disabled"
+          "text": "Target if the button is used as link (if `href` used)"
         },
-        "attribute": "disabled",
+        "attribute": "target",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "\"\""
       },
       "a11yLabel": {
         "type": "string",

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

@@ -20,7 +20,9 @@ export class StzhMetanav {
     });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
   render() {
     return (h(Host, null, h("div", { class: "stzh-metanav", role: "list" }, h("slot", null))));

package/dist/collection/components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.js

@@ -73,7 +73,7 @@ export class StzhMicrositeTeaserlist {
     const classes = {
       "stzh-microsite-teaserlist": true,
     };
-    return (h(Host, null, h("div", { class: classes }, h("stzh-chip-select", { class: "stzh-microsite-teaserlist__filter", label: this.localization.tagsLabel, data: this._tagChips, onStzhChange: this.handleChange }), h("stzh-card-list", { layout: "subpages" }, this.filteredSlicedItems.map((item) => h("stzh-card", { href: item.link, hideHeaderBorder: true, hideFooterBorder: true, withArrow: true }, item.image &&
+    return (h(Host, null, h("div", { class: classes }, h("stzh-chip-select", { class: "stzh-microsite-teaserlist__filter", label: this.localization.tagsLabel, data: this._tagChips, onStzhChange: this.handleChange }), h("stzh-card-list", { layout: "subpages" }, this.filteredSlicedItems.map((item) => h("stzh-card", { href: item.link, hideHeaderBorder: true, hideFooterBorder: true, withArrow: true, hideElevation: true }, item.image &&
       h("img", { slot: "image", src: item.image }), item.title &&
       h("stzh-clamp", { slot: "heading", lines: 2 }, item.title), item.description &&
       h("stzh-clamp", { slot: "content", lines: 3 }, item.description)))), this.showItems < this.filteredItems.length &&

package/dist/collection/components/stzh-page-skiplinks/stzh-page-skiplinks.js

@@ -20,7 +20,9 @@ export class StzhPageSkiplinks {
     });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
   render() {
     return (h(Host, null, h("div", { class: "stzh-page-skiplinks", role: "list" }, h("slot", null))));

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

@@ -53,7 +53,9 @@ export class StzhPagetitle {
     });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
   render() {
     const headingSlotUsed = hasSlot(this.element, 'heading');

package/dist/collection/components/stzh-pagetitle-hero/stzh-pagetitle-hero.css

@@ -112,7 +112,7 @@
 }
 :host ::slotted(stzh-chip[slot=tag])[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);
@@ -127,13 +127,13 @@
 }
 :host ::slotted(stzh-chip[slot=tag])[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[slot=tag])[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-pagetitle-hero/stzh-pagetitle-hero.js

@@ -66,7 +66,9 @@ export class StzhPagetitleHero {
     });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
     removeMediaChangeListener(this.reinitFitty);
     this.destroyFitty();
   }

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

@@ -101,7 +101,7 @@
   --width: var(--stzh-popover-width);
   --min-width: var(--stzh-popover-min-width);
   --max-width: var(--stzh-popover-max-width);
-  --padding: 0;
+  --padding: 0px;
   --border-radius: var(--stzh-popover-border-radius);
 }
 :host[variant=tooltip] {
@@ -161,8 +161,8 @@
   .stzh-popover__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-portal-mitwirken/stzh-portal-mitwirken.css

@@ -360,15 +360,15 @@ the .has-focus class is used by the focus target */
   --stzh-space-huge: 5rem;
   --stzh-space-xhuge: 6rem;
 
-  --stzh-space-none: 0.00001rem;
+  --stzh-space-none: 0.0001px;
 
   --stzh-space-default: var(--stzh-space-medium);
 
   /* Box Shadows */
-  --stzh-box-shadow-header: 0 -0.125rem 1rem rgba(0, 0, 0, 0.16);
-  --stzh-box-shadow-popover: 0 0 0.25rem rgba(0, 0, 0, 0.24);
-  --stzh-box-shadow-message: 0 0 0.5rem rgba(0, 0, 0, 0.24);
-  --stzh-box-shadow-overlay: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.32);
+  --stzh-box-shadow-header: 0px -0.125rem 1rem rgba(0, 0, 0, 0.16);
+  --stzh-box-shadow-popover: 0px 0px 0.25rem rgba(0, 0, 0, 0.24);
+  --stzh-box-shadow-message: 0px 0px 0.5rem rgba(0, 0, 0, 0.24);
+  --stzh-box-shadow-overlay: 0px 0.25rem 0.9375rem rgba(0, 0, 0, 0.32);
 
   /* Icon sizes */
   --stzh-icon-size-xxsmall: 0.75rem;
@@ -446,7 +446,7 @@ the .has-focus class is used by the focus target */
   --stzh-tooltip-max-width: 20.875rem;
   --stzh-tooltip-padding: var(--stzh-space-small);
   --stzh-tooltip-border-radius: 0.1875rem;
-  --stzh-tooltip-drop-shadow: drop-shadow(0 0.125rem 0.625rem rgba(0, 0, 0, 0.16));
+  --stzh-tooltip-drop-shadow: drop-shadow(0px 0.125rem 0.625rem rgba(0, 0, 0, 0.16));
 
   /* Accordion */
   --stzh-accordion-content-background: var(--stzh-color-grey5);

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

@@ -141,7 +141,9 @@ export class StzhRadiogroup {
     });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
   render() {
     const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;

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

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

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

@@ -102,7 +102,7 @@
   --grabbing-cursor: grabbing;
   --unselected-item-opacity: 0.6;
   --ghost-item-background: var(--stzh-color-grey5);
-  --ghost-item-box-shadow: inset 0 0 0.5rem rgba(0, 0, 0, 0.32);
+  --ghost-item-box-shadow: inset 0px 0px 0.5rem rgba(0, 0, 0, 0.32);
 }
 :host[disabled] {
   --cursor: inherit;

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

@@ -311,7 +311,9 @@ export class StzhSortable {
     });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
     this.unsetAttributes();
     if (this.sortable) {
       this.sortable.destroy();

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

@@ -100,6 +100,7 @@
 :host {
   --space: var(--stzh-space-default);
   --around: 0;
+  display: flex;
   clear: both;
 }
 :host::after {
@@ -806,6 +807,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-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.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-vspace/stzh-vspace.css

@@ -100,6 +100,7 @@
 :host {
   --v-space: var(--stzh-space-default);
   --v-around: 0;
+  display: flex;
   clear: both;
 }
 :host::after {
@@ -799,6 +800,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/components/index.d.ts

@@ -12,6 +12,7 @@ export { StzhButton as StzhButton } from '../types/components/stzh-button/stzh-b
 export { StzhCalendar as StzhCalendar } from '../types/components/stzh-calendar/stzh-calendar';
 export { StzhCard as StzhCard } from '../types/components/stzh-card/stzh-card';
 export { StzhCardList as StzhCardList } from '../types/components/stzh-card-list/stzh-card-list';
+export { StzhCarousel as StzhCarousel } from '../types/components/stzh-carousel/stzh-carousel';
 export { StzhCell as StzhCell } from '../types/components/stzh-cell/stzh-cell';
 export { StzhChart as StzhChart } from '../types/components/stzh-chart/stzh-chart';
 export { StzhCheckbox as StzhCheckbox } from '../types/components/stzh-checkbox/stzh-checkbox';