@oiz/stzh-components 0.0.1-pretest → 1.5.0-alpha

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

@@ -1,187 +1,187 @@
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-0e6d34c6.js';
-import { s as setPropsIfNull } from './utils-c5d68020.js';
-import { f as fetchTranslations } from './translation-utils-f5b09945.js';
+import { s as setPropsIfNull } from './utils-68a28fce.js';
+import { f as fetchTranslations } from './translation-utils-2623783f.js';
 import { c as createFocusTrap } from './focus-trap.esm-074705a3.js';
 
-const stzhDialogCss = ".sc-stzh-dialog-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-dialog-h{display:none}.sc-stzh-dialog-h *.sc-stzh-dialog,.sc-stzh-dialog-h *.sc-stzh-dialog::before,.sc-stzh-dialog-h *.sc-stzh-dialog::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-dialog-h{--width:100%;--padding:var(--stzh-space-large);--close-color:var(--stzh-base-lead-color)}@media screen and (min-width: 600px){.sc-stzh-dialog-h{--width:33.5rem;--padding:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.sc-stzh-dialog-h{--width:48.875rem;--padding:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--width:52rem;--padding:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){[size=small].sc-stzh-dialog-h{--width:24.6875rem}}@media screen and (min-width: 1024px){[size=small].sc-stzh-dialog-h{--width:28.75rem}}@media screen and (min-width: 1260px){[size=small].sc-stzh-dialog-h{--width:32rem}}.stzh-dialog.sc-stzh-dialog{z-index:var(--stzh-z-index-dialog);display:none;position:fixed;top:0;left:0;width:100%;height:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:stretch;justify-content:stretch}.stzh-dialog__content.sc-stzh-dialog{z-index:2;position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-positive:1;flex-grow:1;overflow:auto}.stzh-dialog__dialog.sc-stzh-dialog{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:auto;border:none;background-color:var(--stzh-color-white);width:var(--width);max-width:100%;padding:var(--padding);-webkit-box-shadow:var(--stzh-box-shadow-overlay);box-shadow:var(--stzh-box-shadow-overlay);height:100vh;max-height:100vh;overflow:hidden;outline:none}@media screen and (min-width: 600px){.stzh-dialog__dialog.sc-stzh-dialog{height:auto}}.stzh-dialog__backdrop.sc-stzh-dialog{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;text-align:center;background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));opacity:0.8}.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);overflow:auto;-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 600px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-dialog__close-button.sc-stzh-dialog{position:absolute;top:var(--stzh-space-xsmall);right:var(--stzh-space-xsmall);display:-ms-flexbox;display:flex;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:none;padding:var(--stzh-space-xsmall);margin:calc(var(--stzh-space-xsmall) * -1);border-radius:var(--stzh-button-border-radius);cursor:pointer}@media screen and (min-width: 600px){.stzh-dialog__close-button.sc-stzh-dialog{top:var(--stzh-space-small);right:var(--stzh-space-small)}}@media screen and (min-width: 1024px){.stzh-dialog__close-button.sc-stzh-dialog{top:var(--stzh-space-large);right:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-dialog__close-button.sc-stzh-dialog{top:calc(var(--stzh-space-xxlarge) + var(--stzh-space-xxsmall));right:calc(var(--stzh-space-xxlarge) + var(--stzh-space-xxsmall))}}.stzh-dialog__close-icon.sc-stzh-dialog{--size:var(--stzh-icon-size-medium);color:var(--close-color)}.stzh-dialog--is-open.sc-stzh-dialog{display:-ms-flexbox;display:flex}";
+const stzhDialogCss = ".sc-stzh-dialog-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-dialog-h{display:none}.sc-stzh-dialog-h *.sc-stzh-dialog,.sc-stzh-dialog-h *.sc-stzh-dialog::before,.sc-stzh-dialog-h *.sc-stzh-dialog::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-dialog-h{--width:100%;--padding:var(--stzh-space-large);--close-color:var(--stzh-base-lead-color)}@media screen and (min-width: 600px){.sc-stzh-dialog-h{--width:33.5rem;--padding:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.sc-stzh-dialog-h{--width:48.875rem;--padding:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--width:52rem;--padding:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){[size=small].sc-stzh-dialog-h{--width:24.6875rem}}@media screen and (min-width: 1024px){[size=small].sc-stzh-dialog-h{--width:28.75rem}}@media screen and (min-width: 1260px){[size=small].sc-stzh-dialog-h{--width:32rem}}.stzh-dialog.sc-stzh-dialog{z-index:var(--stzh-z-index-dialog);display:none;position:fixed;top:0;left:0;width:100%;height:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:stretch;justify-content:stretch}.stzh-dialog__content.sc-stzh-dialog{z-index:2;position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-positive:1;flex-grow:1;overflow:auto}.stzh-dialog__dialog.sc-stzh-dialog{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:auto;border:none;background-color:var(--stzh-color-white);width:var(--width);max-width:100%;-webkit-box-shadow:var(--stzh-box-shadow-overlay);box-shadow:var(--stzh-box-shadow-overlay);height:100vh;max-height:100vh;overflow:hidden;outline:none}@media screen and (min-width: 600px){.stzh-dialog__dialog.sc-stzh-dialog{height:auto}}.stzh-dialog__backdrop.sc-stzh-dialog{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;text-align:center;background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));opacity:0.8}.stzh-dialog__heading.sc-stzh-dialog{padding:var(--padding);padding-bottom:0}.stzh-dialog__dialog-content.sc-stzh-dialog{padding:var(--padding);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);overflow:auto;-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 600px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-dialog__actions.sc-stzh-dialog{padding:var(--padding);padding-top:0}.stzh-dialog__close-button.sc-stzh-dialog{position:absolute;top:var(--stzh-space-xsmall);right:var(--stzh-space-xsmall);display:-ms-flexbox;display:flex;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:none;padding:var(--stzh-space-xsmall);margin:calc(var(--stzh-space-xsmall) * -1);border-radius:var(--stzh-button-border-radius);cursor:pointer}@media screen and (min-width: 600px){.stzh-dialog__close-button.sc-stzh-dialog{top:var(--stzh-space-small);right:var(--stzh-space-small)}}@media screen and (min-width: 1024px){.stzh-dialog__close-button.sc-stzh-dialog{top:var(--stzh-space-large);right:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-dialog__close-button.sc-stzh-dialog{top:calc(var(--stzh-space-xxlarge) + var(--stzh-space-xxsmall));right:calc(var(--stzh-space-xxlarge) + var(--stzh-space-xxsmall))}}.stzh-dialog__close-icon.sc-stzh-dialog{--size:var(--stzh-icon-size-medium);color:var(--close-color)}.stzh-dialog--is-open.sc-stzh-dialog{display:-ms-flexbox;display:flex}";
 
-const keyCode = {
-  ESC: 27
-};
-const CLASS_BODY_OPEN = "stzh-dialog-open";
-let activeDialog = null;
-let dialogCounter = 0;
-const StzhDialog = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.stzhOpen = createEvent(this, "stzhOpen", 7);
-    this.stzhClose = createEvent(this, "stzhClose", 7);
-    /** Close dialog when pressing ESC */
-    this.closeOnEscapeKey = false;
-    /** Close dialog when clicking outside of it */
-    this.closeOnBackdropClick = false;
-    /** Open status */
-    this.open = false;
-    /** Stay in original position (true) or move to body (false) */
-    this.stay = true;
-    /** Size */
-    this.size = "default";
-    /** Whether to hide close button */
-    this.hideClose = false;
-    /** Heading text */
-    this.heading = "";
-    /** Accessibility role */
-    this.a11yRole = "alertdialog";
-    /** Accessible label for dialog (use if no heading is used) */
-    this.a11yLabel = "";
-    this.handleDialogClick = (event) => {
-      const target = event.target;
-      if (target.dataset.stzhDialogClose) {
-        this.hide();
-      }
-      else {
-        const closest = target.closest("[data-stzh-dialog-close]");
-        if (closest) {
-          this.hide();
-        }
-      }
-    };
-    this.handleCloseButtonClick = () => {
-      this.hide();
-    };
-    this.init = () => {
-      const actions = this.element.querySelector('stzh-actions[slot="actions"]');
-      if (actions) {
-        setPropsIfNull(actions, {
-          variant: "dialog",
-          withBorder: true
-        });
-      }
-    };
-  }
-  handleOutsideClick(event) {
-    if (!this.open || !this.closeOnBackdropClick) {
-      return;
-    }
-    const isClickOutside = event.target !== this.dialogElement
-      && this.dialogElement.contains(event.target) === false;
-    if (isClickOutside) {
-      this.hide();
-    }
-  }
-  handleKeydown(event) {
-    if (event.keyCode === keyCode.ESC
-      && activeDialog === this
-      && this.closeOnEscapeKey) {
-      this.hide();
-    }
-  }
-  handleOpenTriggerClick(event) {
-    const target = event.target;
-    if (target.dataset.stzhDialogTrigger === this.element.id) {
-      this.show();
-    }
-    else {
-      const closest = target.closest("[data-stzh-dialog-trigger]");
-      if (closest && closest.dataset.stzhDialogTrigger === this.element.id) {
-        this.show();
-      }
-    }
-  }
-  async show() {
-    this.open = true;
-    this.stzhOpen.emit({
-      component: "stzh-dialog"
-    });
-  }
-  async hide() {
-    this.open = false;
-    this.stzhClose.emit({
-      component: "stzh-dialog"
-    });
-  }
-  getSiblings() {
-    if (!this.parentElement) {
-      return [];
-    }
-    return Array.from(this.parentElement.children).filter((child) => child !== this.element);
-  }
-  disableSiblings() {
-    this.getSiblings().forEach((sibling) => {
-      sibling.setAttribute("aria-hidden", "true");
-    });
-  }
-  enableSiblings() {
-    this.getSiblings().forEach((sibling) => {
-      sibling.removeAttribute("aria-hidden");
-    });
-  }
-  dialogShown() {
-    activeDialog = this;
-    document.body.classList.add(CLASS_BODY_OPEN);
-    this.disableSiblings();
-    if (this.trap) {
-      this.trap.activate();
-    }
-  }
-  dialogHidden() {
-    document.body.classList.remove(CLASS_BODY_OPEN);
-    this.enableSiblings();
-    if (this.trap) {
-      this.trap.deactivate();
-    }
-    activeDialog = null;
-  }
-  async componentWillLoad() {
-    this.headingId = `stzh-dialog-label-${dialogCounter}`;
-    dialogCounter++;
-    if (!this.localization) {
-      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();
-  }
-  componentDidUpdate() {
-    this.trap.updateContainerElements(this.element);
-  }
-  componentDidLoad() {
-    this.trap = createFocusTrap(this.element, {
-      fallbackFocus: this.dialogElement,
-      returnFocusOnDeactivate: true
-    });
-    if (this.open) {
-      this.dialogShown();
-    }
-  }
-  disconnectedCallback() {
-    this.dialogHidden();
-  }
-  render() {
-    return (h(Host, null, h("div", { class: {
-        "stzh-dialog": true,
-        "stzh-dialog--is-open": this.open,
-        "stzh-dialog--has-heading": !!this.heading,
-        "stzh-dialog--has-close-hidden": this.hideClose,
-        [`stzh-dialog--size-${this.size}`]: !!this.size,
-      } }, h("div", { class: "stzh-dialog__backdrop" }), h("div", { class: "stzh-dialog__content" }, h("div", { class: "stzh-dialog__dialog", ref: (el) => (this.dialogElement = el), tabindex: "-1", role: this.a11yRole, "aria-label": this.a11yLabel, "aria-labelledby": this.heading ? this.headingId : null, "aria-hidden": this.open ? "false" : "true", onClick: this.handleDialogClick }, this.heading &&
-      h("stzh-heading", { id: this.headingId, class: "stzh-dialog__heading", level: "2", "with-border": true }, this.heading), h("div", { class: "stzh-dialog__dialog-content" }, h("slot", null)), h("div", { class: "stzh-dialog__actions" }, h("slot", { name: "actions" })), !this.hideClose &&
-      h("button", { class: "stzh-dialog__close-button", onClick: this.handleCloseButtonClick, "aria-label": this.localization.close, type: "button" }, h("stzh-icon", { class: "stzh-dialog__close-icon", name: "close" })))))));
-  }
-  get element() { return getElement(this); }
-};
+const keyCode = {
+  ESC: 27
+};
+const CLASS_BODY_OPEN = "stzh-dialog-open";
+let activeDialog = null;
+let dialogCounter = 0;
+const StzhDialog = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.stzhOpen = createEvent(this, "stzhOpen", 7);
+    this.stzhClose = createEvent(this, "stzhClose", 7);
+    /** Close dialog when pressing ESC */
+    this.closeOnEscapeKey = false;
+    /** Close dialog when clicking outside of it */
+    this.closeOnBackdropClick = false;
+    /** Open status */
+    this.open = false;
+    /** Stay in original position (true) or move to body (false) */
+    this.stay = true;
+    /** Size */
+    this.size = "default";
+    /** Whether to hide close button */
+    this.hideClose = false;
+    /** Heading text */
+    this.heading = "";
+    /** Accessibility role */
+    this.a11yRole = "alertdialog";
+    /** Accessible label for dialog (use if no heading is used) */
+    this.a11yLabel = "";
+    this.handleDialogClick = (event) => {
+      const target = event.target;
+      if (target.dataset.stzhDialogClose) {
+        this.hide();
+      }
+      else {
+        const closest = target.closest("[data-stzh-dialog-close]");
+        if (closest) {
+          this.hide();
+        }
+      }
+    };
+    this.handleCloseButtonClick = () => {
+      this.hide();
+    };
+    this.init = () => {
+      const actions = this.element.querySelector('stzh-actions[slot="actions"]');
+      if (actions) {
+        setPropsIfNull(actions, {
+          variant: "dialog",
+          withBorder: true
+        });
+      }
+    };
+  }
+  handleOutsideClick(event) {
+    if (!this.open || !this.closeOnBackdropClick) {
+      return;
+    }
+    const isClickOutside = event.target !== this.dialogElement
+      && this.dialogElement.contains(event.target) === false;
+    if (isClickOutside) {
+      this.hide();
+    }
+  }
+  handleKeydown(event) {
+    if (event.keyCode === keyCode.ESC
+      && activeDialog === this
+      && this.closeOnEscapeKey) {
+      this.hide();
+    }
+  }
+  handleOpenTriggerClick(event) {
+    const target = event.target;
+    if (target.dataset.stzhDialogTrigger === this.element.id) {
+      this.show();
+    }
+    else {
+      const closest = target.closest("[data-stzh-dialog-trigger]");
+      if (closest && closest.dataset.stzhDialogTrigger === this.element.id) {
+        this.show();
+      }
+    }
+  }
+  async show() {
+    this.open = true;
+    this.stzhOpen.emit({
+      component: "stzh-dialog"
+    });
+  }
+  async hide() {
+    this.open = false;
+    this.stzhClose.emit({
+      component: "stzh-dialog"
+    });
+  }
+  getSiblings() {
+    if (!this.parentElement) {
+      return [];
+    }
+    return Array.from(this.parentElement.children).filter((child) => child !== this.element);
+  }
+  disableSiblings() {
+    this.getSiblings().forEach((sibling) => {
+      sibling.setAttribute("aria-hidden", "true");
+    });
+  }
+  enableSiblings() {
+    this.getSiblings().forEach((sibling) => {
+      sibling.removeAttribute("aria-hidden");
+    });
+  }
+  dialogShown() {
+    activeDialog = this;
+    document.body.classList.add(CLASS_BODY_OPEN);
+    this.disableSiblings();
+    if (this.trap) {
+      this.trap.activate();
+    }
+  }
+  dialogHidden() {
+    document.body.classList.remove(CLASS_BODY_OPEN);
+    this.enableSiblings();
+    if (this.trap) {
+      this.trap.deactivate();
+    }
+    activeDialog = null;
+  }
+  async componentWillLoad() {
+    this.headingId = `stzh-dialog-label-${dialogCounter}`;
+    dialogCounter++;
+    if (!this.localization) {
+      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();
+  }
+  componentDidUpdate() {
+    this.trap.updateContainerElements(this.element);
+  }
+  componentDidLoad() {
+    this.trap = createFocusTrap(this.element, {
+      fallbackFocus: this.dialogElement,
+      returnFocusOnDeactivate: true
+    });
+    if (this.open) {
+      this.dialogShown();
+    }
+  }
+  disconnectedCallback() {
+    this.dialogHidden();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        "stzh-dialog": true,
+        "stzh-dialog--is-open": this.open,
+        "stzh-dialog--has-heading": !!this.heading,
+        "stzh-dialog--has-close-hidden": this.hideClose,
+        [`stzh-dialog--size-${this.size}`]: !!this.size,
+      } }, h("div", { class: "stzh-dialog__backdrop" }), h("div", { class: "stzh-dialog__content" }, h("div", { class: "stzh-dialog__dialog", ref: (el) => (this.dialogElement = el), tabindex: "-1", role: this.a11yRole, "aria-label": this.a11yLabel, "aria-labelledby": this.heading ? this.headingId : null, "aria-hidden": this.open ? "false" : "true", onClick: this.handleDialogClick }, this.heading &&
+      h("stzh-heading", { id: this.headingId, class: "stzh-dialog__heading", level: "2", "with-border": true }, this.heading), h("div", { class: "stzh-dialog__dialog-content" }, h("slot", null)), h("div", { class: "stzh-dialog__actions" }, h("slot", { name: "actions" })), !this.hideClose &&
+      h("button", { class: "stzh-dialog__close-button", onClick: this.handleCloseButtonClick, "aria-label": this.localization.close, type: "button" }, h("stzh-icon", { class: "stzh-dialog__close-icon", name: "close" })))))));
+  }
+  get element() { return getElement(this); }
+};
 StzhDialog.style = stzhDialogCss;
 
 export { StzhDialog as stzh_dialog };