@oiz/stzh-components 1.5.0-alpha → 2.0.0

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ac9bdc7f.js');
 const focusTrap_esm = require('./focus-trap.esm-1cb6bb2e.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/cjs/stzh-pagetitle.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ac9bdc7f.js');
 const utils = require('./utils-8dc66449.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}";
+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-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-xxxlarge)}}.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}";
 
 const StzhPagetitle = class {
   constructor(hostRef) {

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

@@ -17,54 +17,54 @@ const ANIMATION_HIDE_DURATION = 300;
 const ANIMATION_SHOW_DURATION_SMALL = 100;
 const ANIMATION_HIDE_DURATION_SMALL = 200;
 function animationContentWrapperShow() {
-  const isSmall = mediaUtils.media('small').matches;
+  const isSmall = mediaUtils.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 = mediaUtils.media('small').matches;
+  const isSmall = mediaUtils.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 = mediaUtils.media('small').matches;
+  const isSmall = mediaUtils.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 = mediaUtils.media('small').matches;
+  const isSmall = mediaUtils.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"
     }
   };
 }
@@ -90,6 +90,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) => {
@@ -101,7 +103,7 @@ const StzhPopover = class {
       this.toggle();
     };
     this.computePosition = async () => {
-      if (mediaUtils.media('small').matches) {
+      if (mediaUtils.media("small").matches) {
         const middleware = [
           arrow.offset({
             mainAxis: this.distance,
@@ -120,8 +122,8 @@ const StzhPopover = class {
             padding: 5
           }));
         }
-        const { x = 0, y = 0, strategy = 'absolute', placement, middlewareData } = await arrow.computePosition(this.element, this.dialogElement, {
-          // strategy: 'fixed',
+        const { x = 0, y = 0, strategy = "absolute", placement, middlewareData } = await arrow.computePosition(this.element, this.dialogElement, {
+          strategy: this.strategy,
           placement: this.placement,
           middleware,
         });
@@ -133,8 +135,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` : "",
           });
         }
       }
@@ -236,7 +238,7 @@ const StzhPopover = class {
       this.contentWrapperElement.hidden = false;
       await Promise.all([
         animationUtils.animateTo(this.contentWrapperElement, animationShow.keyframes, animationShow.options),
-        animationUtils.animateTo(mediaUtils.media('small').matches ? this.dialogElement : this.contentElement, animationShowDialog.keyframes, animationShowDialog.options)
+        animationUtils.animateTo(mediaUtils.media("small").matches ? this.dialogElement : this.contentElement, animationShowDialog.keyframes, animationShowDialog.options)
       ]);
       if (this.toggledByMethod) {
         this.stzhOpened.emit({
@@ -259,7 +261,7 @@ const StzhPopover = class {
       ]);
       await Promise.all([
         animationUtils.animateTo(this.contentWrapperElement, animationHide.keyframes, animationHide.options),
-        animationUtils.animateTo(mediaUtils.media('small').matches ? this.dialogElement : this.contentElement, animationHideDialog.keyframes, animationHideDialog.options),
+        animationUtils.animateTo(mediaUtils.media("small").matches ? this.dialogElement : this.contentElement, animationHideDialog.keyframes, animationHideDialog.options),
       ]);
       this.contentWrapperElement.hidden = true;
       this.dialogElement.style.willChange = "auto";
@@ -272,7 +274,7 @@ const StzhPopover = class {
     this.toggledByMethod = false;
   }
   distanceWatcher(newValue) {
-    if (typeof newValue === 'number') {
+    if (typeof newValue === "number") {
       this.distance = newValue;
     }
     else {
@@ -284,13 +286,13 @@ const StzhPopover = class {
     popoverCounter++;
     this.distanceWatcher(this.distance);
     if (!this.localization) {
-      this.localization = await translationUtils.fetchTranslations(this.element, 'popover');
+      this.localization = await translationUtils.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();
     }
@@ -298,7 +300,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();
     }
@@ -327,7 +329,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) {