@oiz/stzh-components 1.4.0-npmjstest → 2.0.0-beta

package/dist/esm/stzh-metanav.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-0e6d34c6.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-84f71a43.js';
 
 const stzhMetanavCss = ".sc-stzh-metanav-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-metanav-h{display:none}.sc-stzh-metanav-h *.sc-stzh-metanav,.sc-stzh-metanav-h *.sc-stzh-metanav::before,.sc-stzh-metanav-h *.sc-stzh-metanav::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-metanav-h .sc-stzh-metanav-s>stzh-link .stzh-link{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);padding:var(--stzh-space-xsmall) var(--stzh-space-small);color:var(--stzh-color-grey61)}.sc-stzh-metanav-h .sc-stzh-metanav-s>stzh-link .stzh-link:hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.sc-stzh-metanav-h .sc-stzh-metanav-s>stzh-link .stzh-link:hover .stzh-link__text{text-decoration:underline}.sc-stzh-metanav-h .sc-stzh-metanav-s>stzh-link .stzh-link__text{text-decoration:none}.stzh-metanav.sc-stzh-metanav{display:-ms-flexbox;display:flex}";
 

package/dist/esm/stzh-overlay.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-0e6d34c6.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-84f71a43.js';
 import { c as createFocusTrap } from './focus-trap.esm-074705a3.js';
 
-const stzhOverlayCss = ".sc-stzh-overlay-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-overlay-h{display:none}.sc-stzh-overlay-h *.sc-stzh-overlay,.sc-stzh-overlay-h *.sc-stzh-overlay::before,.sc-stzh-overlay-h *.sc-stzh-overlay::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-overlay.sc-stzh-overlay{display:none;z-index:var(--stzh-z-index-overlay);position:fixed;top:0;left:0;width:100%;height:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:stretch;justify-content:stretch;-ms-flex-align:stretch;align-items:stretch}.stzh-overlay__backdrop.sc-stzh-overlay{z-index:1;background-color:var(--stzh-color-white);opacity:0.95;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-overlay__content.sc-stzh-overlay{z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;position:relative;-ms-flex-positive:1;flex-grow:1;overflow:auto}.stzh-overlay__content-inner.sc-stzh-overlay{margin-top:auto;margin-bottom:auto;outline:none}.stzh-overlay--is-open.sc-stzh-overlay{display:-ms-flexbox;display:flex}";
+const stzhOverlayCss = ".sc-stzh-overlay-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-overlay-h{display:none}.sc-stzh-overlay-h *.sc-stzh-overlay,.sc-stzh-overlay-h *.sc-stzh-overlay::before,.sc-stzh-overlay-h *.sc-stzh-overlay::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-overlay-h{--backdrop-opacity:0.8}.stzh-overlay.sc-stzh-overlay{display:none;z-index:var(--stzh-z-index-overlay);position:fixed;top:0;left:0;width:100%;height:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:stretch;justify-content:stretch;-ms-flex-align:stretch;align-items:stretch}.stzh-overlay__backdrop.sc-stzh-overlay{z-index:1;background-color:var(--stzh-color-white);opacity:var(--backdrop-opacity);position:absolute;top:0;left:0;width:100%;height:100%}.stzh-overlay__content.sc-stzh-overlay{z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;position:relative;-ms-flex-positive:1;flex-grow:1;overflow:auto}.stzh-overlay__content-inner.sc-stzh-overlay{margin-top:auto;margin-bottom:auto;outline:none}.stzh-overlay--is-open.sc-stzh-overlay{display:-ms-flexbox;display:flex}";
 
 const CLASS_BODY_OPEN = "stzh-overlay-open";
 const StzhOverlay = class {

package/dist/esm/stzh-page-skiplinks.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-0e6d34c6.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-84f71a43.js';
 
 const stzhPageSkiplinksCss = ".sc-stzh-page-skiplinks-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-page-skiplinks-h{display:none}.sc-stzh-page-skiplinks-h *.sc-stzh-page-skiplinks,.sc-stzh-page-skiplinks-h *.sc-stzh-page-skiplinks::before,.sc-stzh-page-skiplinks-h *.sc-stzh-page-skiplinks::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-page-skiplinks-h{z-index:var(--stzh-z-index-popup);position:absolute;top:var(--stzh-space-medium);right:var(--stzh-grid-gutter-small)}@media screen and (min-width: 800px){.sc-stzh-page-skiplinks-h{right:50%}}@media screen and (min-width: 1260px){.sc-stzh-page-skiplinks-h{top:var(--stzh-space-xlarge);right:60%}}";
 

package/dist/esm/stzh-pagetitle.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-0e6d34c6.js';
-import { s as setPropsIfNull, h as hasSlot } from './utils-904416df.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-84f71a43.js';
+import { s as setPropsIfNull, h as hasSlot } from './utils-68a28fce.js';
 
 const stzhPagetitleCss = ".sc-stzh-pagetitle-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-pagetitle-h{display:none}.sc-stzh-pagetitle-h *.sc-stzh-pagetitle,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::before,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-xxlarge)}}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=image]{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=lead]{margin-top:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=lead]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=lead]{margin-top:var(--stzh-space-xlarge)}}.stzh-pagetitle__actions.sc-stzh-pagetitle{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}";
 

package/dist/esm/stzh-popover.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-0e6d34c6.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-84f71a43.js';
 import { c as computePosition, a as autoUpdate, A as Arrow, o as offset, f as flip, s as shift, b as arrow } from './arrow-86a679c7.js';
 import { c as createFocusTrap } from './focus-trap.esm-074705a3.js';
 import { f as fetchTranslations } from './translation-utils-2623783f.js';
@@ -13,54 +13,54 @@ const ANIMATION_HIDE_DURATION = 300;
 const ANIMATION_SHOW_DURATION_SMALL = 100;
 const ANIMATION_HIDE_DURATION_SMALL = 200;
 function animationContentWrapperShow() {
-  const isSmall = media('small').matches;
+  const isSmall = media("small").matches;
   return {
     keyframes: [
-      { opacity: '0' },
-      { opacity: '1' }
+      { opacity: "0" },
+      { opacity: "1" }
     ],
     options: {
       duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,
-      easing: 'linear'
+      easing: "linear"
     }
   };
 }
 function animationContentWrapperHide() {
-  const isSmall = media('small').matches;
+  const isSmall = media("small").matches;
   return {
     keyframes: [
-      { opacity: '1' },
-      { opacity: '0' }
+      { opacity: "1" },
+      { opacity: "0" }
     ],
     options: {
       duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,
-      easing: 'linear'
+      easing: "linear"
     }
   };
 }
 function animationDialogShow() {
-  const isSmall = media('small').matches;
+  const isSmall = media("small").matches;
   return {
     keyframes: [
-      { transform: isSmall ? 'translateY(-8px)' : 'translateY(100%)' },
-      { transform: 'translateY(0px)' }
+      { transform: isSmall ? "translateY(-8px)" : "translateY(100%)" },
+      { transform: "translateY(0px)" }
     ],
     options: {
       duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,
-      easing: 'linear'
+      easing: "linear"
     }
   };
 }
 function animationDialogHide() {
-  const isSmall = media('small').matches;
+  const isSmall = media("small").matches;
   return {
     keyframes: [
-      { transform: 'translateY(0px)' },
-      { transform: isSmall ? 'translateY(-8px)' : 'translateY(100%)' }
+      { transform: "translateY(0px)" },
+      { transform: isSmall ? "translateY(-8px)" : "translateY(100%)" }
     ],
     options: {
       duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,
-      easing: 'linear'
+      easing: "linear"
     }
   };
 }
@@ -86,6 +86,8 @@ const StzhPopover = class {
     this.skidding = 0;
     /** Label for mobile view (use label slot as alternative) */
     this.label = "";
+    /** Position strategy */
+    this.strategy = "absolute";
     this.initialTouchX = null;
     this.initialTouchY = null;
     this.handleKeydown = (event) => {
@@ -97,7 +99,7 @@ const StzhPopover = class {
       this.toggle();
     };
     this.computePosition = async () => {
-      if (media('small').matches) {
+      if (media("small").matches) {
         const middleware = [
           offset({
             mainAxis: this.distance,
@@ -116,8 +118,8 @@ const StzhPopover = class {
             padding: 5
           }));
         }
-        const { x = 0, y = 0, strategy = 'absolute', placement, middlewareData } = await computePosition(this.element, this.dialogElement, {
-          // strategy: 'fixed',
+        const { x = 0, y = 0, strategy = "absolute", placement, middlewareData } = await computePosition(this.element, this.dialogElement, {
+          strategy: this.strategy,
           placement: this.placement,
           middleware,
         });
@@ -129,8 +131,8 @@ const StzhPopover = class {
         });
         if (this.variant === "tooltip") {
           Object.assign(this.arrowElement.style, {
-            left: x != null ? `${middlewareData.arrow.x}px` : '',
-            top: y != null ? `${middlewareData.arrow.y}px` : '',
+            left: x != null ? `${middlewareData.arrow.x}px` : "",
+            top: y != null ? `${middlewareData.arrow.y}px` : "",
           });
         }
       }
@@ -232,7 +234,7 @@ const StzhPopover = class {
       this.contentWrapperElement.hidden = false;
       await Promise.all([
         animateTo(this.contentWrapperElement, animationShow.keyframes, animationShow.options),
-        animateTo(media('small').matches ? this.dialogElement : this.contentElement, animationShowDialog.keyframes, animationShowDialog.options)
+        animateTo(media("small").matches ? this.dialogElement : this.contentElement, animationShowDialog.keyframes, animationShowDialog.options)
       ]);
       if (this.toggledByMethod) {
         this.stzhOpened.emit({
@@ -255,7 +257,7 @@ const StzhPopover = class {
       ]);
       await Promise.all([
         animateTo(this.contentWrapperElement, animationHide.keyframes, animationHide.options),
-        animateTo(media('small').matches ? this.dialogElement : this.contentElement, animationHideDialog.keyframes, animationHideDialog.options),
+        animateTo(media("small").matches ? this.dialogElement : this.contentElement, animationHideDialog.keyframes, animationHideDialog.options),
       ]);
       this.contentWrapperElement.hidden = true;
       this.dialogElement.style.willChange = "auto";
@@ -268,7 +270,7 @@ const StzhPopover = class {
     this.toggledByMethod = false;
   }
   distanceWatcher(newValue) {
-    if (typeof newValue === 'number') {
+    if (typeof newValue === "number") {
       this.distance = newValue;
     }
     else {
@@ -280,13 +282,13 @@ const StzhPopover = class {
     popoverCounter++;
     this.distanceWatcher(this.distance);
     if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, 'popover');
+      this.localization = await fetchTranslations(this.element, "popover");
     }
   }
   popoverShown() {
     document.body.classList.add(CLASS_BODY_OPEN);
     this.triggerElement.firstElementChild
-      .setAttribute('aria-expanded', 'true');
+      .setAttribute("aria-expanded", "true");
     if (this.trap) {
       this.trap.activate();
     }
@@ -294,7 +296,7 @@ const StzhPopover = class {
   popoverHidden() {
     document.body.classList.remove(CLASS_BODY_OPEN);
     this.triggerElement.firstElementChild
-      .setAttribute('aria-expanded', 'false');
+      .setAttribute("aria-expanded", "false");
     if (this.trap) {
       this.trap.deactivate();
     }
@@ -323,7 +325,7 @@ const StzhPopover = class {
     let trigger = (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
     if (!trigger) {
       const defaultSlot = Array.from(this.element.children)
-        .find(child => !child.hasAttribute('slot'));
+        .find(child => !child.hasAttribute("slot"));
       trigger = defaultSlot;
     }
     if (trigger) {