@nectary/components 5.28.0 → 5.29.0

package/bundle.js

@@ -5038,6 +5038,7 @@ class StopEvents extends HTMLElement {
 }
 defineCustomElement("sinch-stop-events", StopEvents);
 const bodyEl = document.body;
+const isScrollDisabled = () => bodyEl.__dialog_counter__ > 0;
 const disableScroll = () => {
   bodyEl.__dialog_counter__ = (bodyEl.__dialog_counter__ ?? 0) + 1;
   if (bodyEl.__dialog_counter__ === 1) {
@@ -5055,7 +5056,7 @@ const enableScroll = () => {
     bodyEl.style.removeProperty("padding-right");
   }
 };
-const templateHTML$P = '<style>:host{display:contents;--sinch-comp-dialog-max-width:512px;--sinch-comp-dialog-max-height:90vh;--sinch-comp-dialog-width:fit-content;--sinch-dialog-close-button-display:unset}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;width:var(--sinch-comp-dialog-width);max-width:var(--sinch-comp-dialog-max-width);max-height:var(--sinch-comp-dialog-max-height);border-radius:var(--sinch-comp-dialog-shape-radius);box-sizing:border-box;contain:content;background-color:var(--sinch-comp-dialog-color-default-background-initial);border:none;box-shadow:var(--sinch-comp-dialog-shadow);outline:0}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}#header{display:flex;flex-direction:row;align-items:flex-start;margin-bottom:12px;padding:0 24px;gap:8px;--sinch-global-size-icon:24px;--sinch-global-color-icon:var(--sinch-comp-dialog-color-default-icon-initial)}#caption{--sinch-global-color-text:var(--sinch-comp-dialog-color-default-title-initial);--sinch-comp-title-font:var(--sinch-comp-dialog-font-title)}#content{min-height:0;overflow:auto;padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#action.empty{display:none}#close{display:var(--sinch-dialog-close-button-display,initial);position:relative;left:4px;top:-4px;margin-left:auto}</style><dialog id="dialog"><div id="header"><slot id="icon" name="icon"></slot><sinch-title id="caption" type="m" level="3"></sinch-title><sinch-button id="close" size="s"><sinch-icon icons-version="2" name="fa-xmark" id="icon-close" slot="icon"></sinch-icon></sinch-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
+const templateHTML$P = '<style>:host{display:contents;--sinch-comp-dialog-max-width:512px;--sinch-comp-dialog-max-height:90vh;--sinch-comp-dialog-width:fit-content;--sinch-dialog-close-button-display:unset}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;width:var(--sinch-comp-dialog-width);max-width:var(--sinch-comp-dialog-max-width);max-height:var(--sinch-comp-dialog-max-height);border-radius:var(--sinch-comp-dialog-shape-radius);box-sizing:border-box;contain:content;background-color:var(--sinch-comp-dialog-color-default-background-initial);border:none;box-shadow:var(--sinch-comp-dialog-shadow);outline:0}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}#header{display:flex;flex-direction:row;align-items:flex-start;margin-bottom:12px;padding:0 24px;gap:8px;--sinch-global-size-icon:24px;--sinch-global-color-icon:var(--sinch-comp-dialog-color-default-icon-initial)}#caption{--sinch-global-color-text:var(--sinch-comp-dialog-color-default-title-initial);--sinch-comp-title-font:var(--sinch-comp-dialog-font-title)}#content{min-height:0;overflow:auto;padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#action.empty{display:none}#close{display:var(--sinch-dialog-close-button-display,initial);position:relative;left:4px;top:-4px;margin-left:auto}:host([hide-close-button]) #close{display:none}</style><dialog id="dialog"><div id="header"><slot id="icon" name="icon"></slot><sinch-title id="caption" type="m" level="3"></sinch-title><sinch-button id="close" size="s"><sinch-icon icons-version="2" name="fa-xmark" id="icon-close" slot="icon"></sinch-icon></sinch-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
 const template$P = document.createElement("template");
 template$P.innerHTML = templateHTML$P;
 class Dialog extends NectaryElement {
@@ -5089,12 +5090,18 @@ class Dialog extends NectaryElement {
       options
     );
     this.#$dialog.addEventListener("cancel", this.#onCancel, options);
+    this.#$dialog.addEventListener("close", this.#onDialogClose, options);
     this.#$actionSlot.addEventListener(
       "slotchange",
       this.#onActionSlotChange,
       options
     );
     this.addEventListener("-close", this.#onCloseReactHandler, options);
+    this.addEventListener(
+      "-dismiss-blocked",
+      this.#onDismissBlockedReactHandler,
+      options
+    );
     this.#onActionSlotChange();
     if (this.open) {
       this.#onExpand();
@@ -5107,7 +5114,13 @@ class Dialog extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ["caption", "open", "close-aria-label"];
+    return [
+      "caption",
+      "open",
+      "close-aria-label",
+      "hide-close-button",
+      "prevent-close"
+    ];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {
@@ -5134,6 +5147,10 @@ class Dialog extends NectaryElement {
         updateAttribute(this.#$closeButton, "aria-label", newVal);
         break;
       }
+      case "hide-close-button": {
+        updateBooleanAttribute(this, name, isAttrTrue(newVal));
+        break;
+      }
     }
   }
   set caption(caption) {
@@ -5148,6 +5165,18 @@ class Dialog extends NectaryElement {
   get open() {
     return getBooleanAttribute(this, "open");
   }
+  set hideCloseButton(isHidden) {
+    updateBooleanAttribute(this, "hide-close-button", isHidden);
+  }
+  get hideCloseButton() {
+    return getBooleanAttribute(this, "hide-close-button");
+  }
+  set preventClose(isPrevented) {
+    updateBooleanAttribute(this, "prevent-close", isPrevented);
+  }
+  get preventClose() {
+    return getBooleanAttribute(this, "prevent-close");
+  }
   get dialogRect() {
     return getRect(this.#$dialog);
   }
@@ -5155,6 +5184,12 @@ class Dialog extends NectaryElement {
     return getRect(this.#$closeButton);
   }
   #onCancel = (e) => {
+    if (this.preventClose) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.#dispatchDismissBlockedEvent("escape");
+      return;
+    }
     if (e.cancelable) {
       e.preventDefault();
     } else {
@@ -5163,7 +5198,22 @@ class Dialog extends NectaryElement {
     e.stopPropagation();
     this.#dispatchCloseEvent("escape", e.cancelable);
   };
+  #onDialogClose = () => {
+    if (!this.isDomConnected || !this.preventClose || !this.open) {
+      return;
+    }
+    if (!this.#$dialog.open) {
+      this.#$dialog.showModal();
+      if (!isScrollDisabled()) {
+        disableScroll();
+      }
+    }
+  };
   #onCloseClick = () => {
+    if (this.preventClose) {
+      this.#dispatchDismissBlockedEvent("close");
+      return;
+    }
     this.#dispatchCloseEvent("close", true);
   };
   #onBackdropMouseDown = (e) => {
@@ -5171,6 +5221,11 @@ class Dialog extends NectaryElement {
       const rect = this.dialogRect;
       const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
       if (!isInside) {
+        if (this.preventClose) {
+          e.stopPropagation();
+          this.#dispatchDismissBlockedEvent("backdrop");
+          return;
+        }
         e.stopPropagation();
         this.#dispatchCloseEvent("backdrop", e.cancelable);
       }
@@ -5180,9 +5235,16 @@ class Dialog extends NectaryElement {
     getReactEventHandler(this, "on-close")?.(e);
     getReactEventHandler(this, "onClose")?.(e);
   };
+  #onDismissBlockedReactHandler = (e) => {
+    getReactEventHandler(this, "on-dismiss-blocked")?.(e);
+    getReactEventHandler(this, "onDismissBlocked")?.(e);
+  };
   #dispatchCloseEvent(detail, cancelable) {
     this.dispatchEvent(new CustomEvent("-close", { detail, cancelable }));
   }
+  #dispatchDismissBlockedEvent(detail) {
+    this.dispatchEvent(new CustomEvent("-dismiss-blocked", { detail }));
+  }
   #onExpand() {
     if (!this.isDomConnected || this.#$dialog.open || !this.open) {
       return;
@@ -8285,7 +8347,7 @@ class Pagination extends NectaryElement {
   }
 }
 defineCustomElement("sinch-pagination", Pagination);
-const templateHTML$v = '<style>#persisted-dialog{--sinch-dialog-close-button-display:none}::slotted(*){display:block}</style><sinch-dialog id="persisted-dialog"><div slot="icon"><slot id="icon" name="icon"></slot></div><div slot="content"><slot name="content"></slot></div><div slot="buttons"><slot name="buttons"></slot></div></sinch-dialog>';
+const templateHTML$v = '<style>#persisted-dialog{--sinch-dialog-close-button-display:none}::slotted(*){display:block}</style><sinch-dialog id="persisted-dialog" prevent-close><div slot="icon"><slot id="icon" name="icon"></slot></div><div slot="content"><slot name="content"></slot></div><div slot="buttons"><slot name="buttons"></slot></div></sinch-dialog>';
 const template$v = document.createElement("template");
 template$v.innerHTML = templateHTML$v;
 function isVisible(elementStyle) {
@@ -8338,6 +8400,8 @@ class PersistentOverlay extends NectaryElement {
     this.#controller = new AbortController();
     const { signal } = this.#controller;
     this.addEventListener("-visibility-altered", this.#onVisibilityAlteredReactHandler, { signal });
+    this.addEventListener("-dismiss-blocked", this.#onDismissBlockedReactHandler, { signal });
+    this.#$sinchDialog.addEventListener("-dismiss-blocked", this.#onDismissBlocked, { signal });
     if (this.open) {
       this.#startObservingAlteration();
     }
@@ -8373,10 +8437,22 @@ class PersistentOverlay extends NectaryElement {
   #onVisibilityAltered() {
     this.dispatchEvent(new CustomEvent("-visibility-altered"));
   }
+  #onDismissBlocked = (e) => {
+    this.#dispatchDismissBlockedEvent(
+      e.detail
+    );
+  };
   #onVisibilityAlteredReactHandler = (e) => {
     getReactEventHandler(this, "on-visibility-altered")?.(e);
     getReactEventHandler(this, "onVisibilityAltered")?.(e);
   };
+  #onDismissBlockedReactHandler = (e) => {
+    getReactEventHandler(this, "on-dismiss-blocked")?.(e);
+    getReactEventHandler(this, "onDismissBlocked")?.(e);
+  };
+  #dispatchDismissBlockedEvent(detail) {
+    this.dispatchEvent(new CustomEvent("-dismiss-blocked", { detail }));
+  }
 }
 defineCustomElement("sinch-persistent-overlay", PersistentOverlay);
 const ATTR_PROGRESS_STEPPER_ITEM_CHECKED = "data-checked";
@@ -13948,13 +14024,14 @@ class TimePicker extends NectaryElement {
     this.#$needleHour.addEventListener("keydown", this.#onHoursKeydown, options);
     this.#$needleMinute.addEventListener("keydown", this.#onMinutesKeydown, options);
     this.addEventListener("-change", this.#onChangeReactHandler, options);
+    this.addEventListener("-submit", this.#onSubmitReactHandler, options);
   }
   disconnectedCallback() {
     this.#controller.abort();
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ["value", "ampm", "submit-aria-label"];
+    return ["value", "ampm", "submit-aria-label", "no-submit"];
   }
   attributeChangedCallback(name, prevValue, newVal) {
     if (isAttrEqual(prevValue, newVal)) {
@@ -13980,6 +14057,12 @@ class TimePicker extends NectaryElement {
         updateAttribute(this.#$submitButton, "aria-label", newVal);
         break;
       }
+      case "no-submit": {
+        const isNoSubmit = isAttrTrue(newVal);
+        updateBooleanAttribute(this, "no-submit", isNoSubmit);
+        this.#render();
+        break;
+      }
     }
   }
   set value(value) {
@@ -14000,6 +14083,12 @@ class TimePicker extends NectaryElement {
   get submitAriaLabel() {
     return getAttribute(this, "submit-aria-label", "");
   }
+  set noSubmit(value) {
+    updateBooleanAttribute(this, "no-submit", value);
+  }
+  get noSubmit() {
+    return getBooleanAttribute(this, "no-submit");
+  }
   get submitButtonRect() {
     return getRect(this.#$submitButton);
   }
@@ -14066,6 +14155,7 @@ class TimePicker extends NectaryElement {
       this.#$headerMinutes.focus();
     }
     this.#render();
+    this.#onChange();
   };
   #render() {
     const is24 = getBooleanAttribute(this, "ampm") === false;
@@ -14073,6 +14163,7 @@ class TimePicker extends NectaryElement {
     this.#selectMinute();
     this.#$headerHoursText.textContent = stringifyHour(this.#hour, is24);
     this.#$headerMinutesText.textContent = stringifyMinute(this.#minute);
+    this.#$submitButton.style.display = this.noSubmit ? "none" : "";
     updateAttribute(this.#$headerHours, "aria-valuenow", this.#hour);
     updateAttribute(this.#$headerHours, "aria-valuetext", this.#hour);
     updateAttribute(this.#$headerMinutes, "aria-valuenow", this.#minute);
@@ -14122,6 +14213,7 @@ class TimePicker extends NectaryElement {
         if (this.#hour >= 12) {
           this.#hour -= 12;
           this.#render();
+          this.#onChange();
         }
         break;
       }
@@ -14129,31 +14221,41 @@ class TimePicker extends NectaryElement {
         if (this.#hour < 12) {
           this.#hour += 12;
           this.#render();
+          this.#onChange();
         }
         break;
       }
     }
   };
-  #onSubmitButtonClick = () => {
+  #onEventEmit = (eventName) => {
     const value = stringifyTime(this.#hour, this.#minute);
     this.dispatchEvent(
-      new CustomEvent("-change", {
+      new CustomEvent(eventName, {
         detail: value
       })
     );
   };
+  #onChange = () => {
+    this.#onEventEmit("-change");
+  };
+  #onSubmitButtonClick = () => {
+    this.#onEventEmit("-submit");
+    this.#onEventEmit("-change");
+  };
   #onHoursKeydown = (e) => {
     switch (e.key) {
       case "ArrowUp": {
         e.preventDefault();
         this.#hour = (this.#hour + 1) % 24;
         this.#render();
+        this.#onChange();
         break;
       }
       case "ArrowDown": {
         e.preventDefault();
         this.#hour = (this.#hour + 23) % 24;
         this.#render();
+        this.#onChange();
         break;
       }
     }
@@ -14164,12 +14266,14 @@ class TimePicker extends NectaryElement {
         e.preventDefault();
         this.#minute = (this.#minute + 1) % 60;
         this.#render();
+        this.#onChange();
         break;
       }
       case "ArrowDown": {
         e.preventDefault();
         this.#minute = (this.#minute + 59) % 60;
         this.#render();
+        this.#onChange();
         break;
       }
     }
@@ -14178,13 +14282,19 @@ class TimePicker extends NectaryElement {
     getReactEventHandler(this, "on-change")?.(e);
     getReactEventHandler(this, "onChange")?.(e);
   };
+  #onSubmitReactHandler = (e) => {
+    getReactEventHandler(this, "on-submit")?.(e);
+    getReactEventHandler(this, "onSubmit")?.(e);
+  };
   #onHourDigitClick = (hour) => {
     this.#hour = hour;
     this.#render();
+    this.#onChange();
   };
   #onMinuteDigitClick = (minute) => {
     this.#minute = minute;
     this.#render();
+    this.#onChange();
   };
   #onDigitKeydown = (e, callback) => {
     if (e.key === "Enter" || e.key === " ") {

package/dialog/index.d.ts

@@ -14,6 +14,10 @@ export declare class Dialog extends NectaryElement {
     get caption(): string;
     set open(isOpen: boolean);
     get open(): boolean;
+    set hideCloseButton(isHidden: boolean);
+    get hideCloseButton(): boolean;
+    set preventClose(isPrevented: boolean);
+    get preventClose(): boolean;
     get dialogRect(): import("../types").TRect;
     get closeButtonRect(): import("../types").TRect;
 }

package/dialog/index.js

@@ -1,13 +1,13 @@
 import "../icon/index.js";
 import "../stop-events/index.js";
 import "../title/index.js";
-import { isAttrEqual, updateAttribute, updateBooleanAttribute, getAttribute, getBooleanAttribute, setClass, isAttrTrue } from "../utils/dom.js";
+import { isAttrEqual, updateBooleanAttribute, isAttrTrue, updateAttribute, getAttribute, getBooleanAttribute, setClass } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getRect } from "../utils/rect.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { isTargetEqual } from "../utils/event-target.js";
-import { disableScroll, enableScroll } from "../utils/scroll-lock.js";
-const templateHTML = '<style>:host{display:contents;--sinch-comp-dialog-max-width:512px;--sinch-comp-dialog-max-height:90vh;--sinch-comp-dialog-width:fit-content;--sinch-dialog-close-button-display:unset}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;width:var(--sinch-comp-dialog-width);max-width:var(--sinch-comp-dialog-max-width);max-height:var(--sinch-comp-dialog-max-height);border-radius:var(--sinch-comp-dialog-shape-radius);box-sizing:border-box;contain:content;background-color:var(--sinch-comp-dialog-color-default-background-initial);border:none;box-shadow:var(--sinch-comp-dialog-shadow);outline:0}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}#header{display:flex;flex-direction:row;align-items:flex-start;margin-bottom:12px;padding:0 24px;gap:8px;--sinch-global-size-icon:24px;--sinch-global-color-icon:var(--sinch-comp-dialog-color-default-icon-initial)}#caption{--sinch-global-color-text:var(--sinch-comp-dialog-color-default-title-initial);--sinch-comp-title-font:var(--sinch-comp-dialog-font-title)}#content{min-height:0;overflow:auto;padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#action.empty{display:none}#close{display:var(--sinch-dialog-close-button-display,initial);position:relative;left:4px;top:-4px;margin-left:auto}</style><dialog id="dialog"><div id="header"><slot id="icon" name="icon"></slot><sinch-title id="caption" type="m" level="3"></sinch-title><sinch-button id="close" size="s"><sinch-icon icons-version="2" name="fa-xmark" id="icon-close" slot="icon"></sinch-icon></sinch-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
+import { isScrollDisabled, disableScroll, enableScroll } from "../utils/scroll-lock.js";
+const templateHTML = '<style>:host{display:contents;--sinch-comp-dialog-max-width:512px;--sinch-comp-dialog-max-height:90vh;--sinch-comp-dialog-width:fit-content;--sinch-dialog-close-button-display:unset}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;width:var(--sinch-comp-dialog-width);max-width:var(--sinch-comp-dialog-max-width);max-height:var(--sinch-comp-dialog-max-height);border-radius:var(--sinch-comp-dialog-shape-radius);box-sizing:border-box;contain:content;background-color:var(--sinch-comp-dialog-color-default-background-initial);border:none;box-shadow:var(--sinch-comp-dialog-shadow);outline:0}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}#header{display:flex;flex-direction:row;align-items:flex-start;margin-bottom:12px;padding:0 24px;gap:8px;--sinch-global-size-icon:24px;--sinch-global-color-icon:var(--sinch-comp-dialog-color-default-icon-initial)}#caption{--sinch-global-color-text:var(--sinch-comp-dialog-color-default-title-initial);--sinch-comp-title-font:var(--sinch-comp-dialog-font-title)}#content{min-height:0;overflow:auto;padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#action.empty{display:none}#close{display:var(--sinch-dialog-close-button-display,initial);position:relative;left:4px;top:-4px;margin-left:auto}:host([hide-close-button]) #close{display:none}</style><dialog id="dialog"><div id="header"><slot id="icon" name="icon"></slot><sinch-title id="caption" type="m" level="3"></sinch-title><sinch-button id="close" size="s"><sinch-icon icons-version="2" name="fa-xmark" id="icon-close" slot="icon"></sinch-icon></sinch-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Dialog extends NectaryElement {
@@ -41,12 +41,18 @@ class Dialog extends NectaryElement {
       options
     );
     this.#$dialog.addEventListener("cancel", this.#onCancel, options);
+    this.#$dialog.addEventListener("close", this.#onDialogClose, options);
     this.#$actionSlot.addEventListener(
       "slotchange",
       this.#onActionSlotChange,
       options
     );
     this.addEventListener("-close", this.#onCloseReactHandler, options);
+    this.addEventListener(
+      "-dismiss-blocked",
+      this.#onDismissBlockedReactHandler,
+      options
+    );
     this.#onActionSlotChange();
     if (this.open) {
       this.#onExpand();
@@ -59,7 +65,13 @@ class Dialog extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ["caption", "open", "close-aria-label"];
+    return [
+      "caption",
+      "open",
+      "close-aria-label",
+      "hide-close-button",
+      "prevent-close"
+    ];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {
@@ -86,6 +98,10 @@ class Dialog extends NectaryElement {
         updateAttribute(this.#$closeButton, "aria-label", newVal);
         break;
       }
+      case "hide-close-button": {
+        updateBooleanAttribute(this, name, isAttrTrue(newVal));
+        break;
+      }
     }
   }
   set caption(caption) {
@@ -100,6 +116,18 @@ class Dialog extends NectaryElement {
   get open() {
     return getBooleanAttribute(this, "open");
   }
+  set hideCloseButton(isHidden) {
+    updateBooleanAttribute(this, "hide-close-button", isHidden);
+  }
+  get hideCloseButton() {
+    return getBooleanAttribute(this, "hide-close-button");
+  }
+  set preventClose(isPrevented) {
+    updateBooleanAttribute(this, "prevent-close", isPrevented);
+  }
+  get preventClose() {
+    return getBooleanAttribute(this, "prevent-close");
+  }
   get dialogRect() {
     return getRect(this.#$dialog);
   }
@@ -107,6 +135,12 @@ class Dialog extends NectaryElement {
     return getRect(this.#$closeButton);
   }
   #onCancel = (e) => {
+    if (this.preventClose) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.#dispatchDismissBlockedEvent("escape");
+      return;
+    }
     if (e.cancelable) {
       e.preventDefault();
     } else {
@@ -115,7 +149,22 @@ class Dialog extends NectaryElement {
     e.stopPropagation();
     this.#dispatchCloseEvent("escape", e.cancelable);
   };
+  #onDialogClose = () => {
+    if (!this.isDomConnected || !this.preventClose || !this.open) {
+      return;
+    }
+    if (!this.#$dialog.open) {
+      this.#$dialog.showModal();
+      if (!isScrollDisabled()) {
+        disableScroll();
+      }
+    }
+  };
   #onCloseClick = () => {
+    if (this.preventClose) {
+      this.#dispatchDismissBlockedEvent("close");
+      return;
+    }
     this.#dispatchCloseEvent("close", true);
   };
   #onBackdropMouseDown = (e) => {
@@ -123,6 +172,11 @@ class Dialog extends NectaryElement {
       const rect = this.dialogRect;
       const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
       if (!isInside) {
+        if (this.preventClose) {
+          e.stopPropagation();
+          this.#dispatchDismissBlockedEvent("backdrop");
+          return;
+        }
         e.stopPropagation();
         this.#dispatchCloseEvent("backdrop", e.cancelable);
       }
@@ -132,9 +186,16 @@ class Dialog extends NectaryElement {
     getReactEventHandler(this, "on-close")?.(e);
     getReactEventHandler(this, "onClose")?.(e);
   };
+  #onDismissBlockedReactHandler = (e) => {
+    getReactEventHandler(this, "on-dismiss-blocked")?.(e);
+    getReactEventHandler(this, "onDismissBlocked")?.(e);
+  };
   #dispatchCloseEvent(detail, cancelable) {
     this.dispatchEvent(new CustomEvent("-close", { detail, cancelable }));
   }
+  #dispatchDismissBlockedEvent(detail) {
+    this.dispatchEvent(new CustomEvent("-dismiss-blocked", { detail }));
+  }
   #onExpand() {
     if (!this.isDomConnected || this.#$dialog.open || !this.open) {
       return;

package/dialog/types.d.ts

@@ -9,12 +9,18 @@ export type TSinchDialogProps = {
     'aria-label': string;
     /** Close button label that is used for a11y */
     'close-aria-label': string;
+    /** Hides the close button when set */
+    'hide-close-button'?: boolean;
+    /** Prevents closing via close button, backdrop, or Escape key. You should provide an explicit action to close the dialog if using this. */
+    'prevent-close'?: boolean;
     readonly dialogRect?: TRect;
     readonly closeButtonRect?: TRect;
 };
 export type TSinchDialogEvents = {
     /** close event handler */
     '-close'?: (e: CustomEvent<TSinchDialogCloseDetail>) => void;
+    /** Dismiss blocked event handler (when prevent-close is true). Consumers can use this to provide inline guidance or a polite live-region announcement for instance. */
+    '-dismiss-blocked'?: (e: CustomEvent<TSinchDialogCloseDetail>) => void;
 };
 export type TSinchDialogStyle = {
     '--sinch-comp-dialog-max-width'?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.28.0",
+  "version": "5.29.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/persistent-overlay/index.js

@@ -2,7 +2,7 @@ import "../dialog/index.js";
 import { updateAttribute, getAttribute, updateBooleanAttribute, getBooleanAttribute, isAttrTrue } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
-const templateHTML = '<style>#persisted-dialog{--sinch-dialog-close-button-display:none}::slotted(*){display:block}</style><sinch-dialog id="persisted-dialog"><div slot="icon"><slot id="icon" name="icon"></slot></div><div slot="content"><slot name="content"></slot></div><div slot="buttons"><slot name="buttons"></slot></div></sinch-dialog>';
+const templateHTML = '<style>#persisted-dialog{--sinch-dialog-close-button-display:none}::slotted(*){display:block}</style><sinch-dialog id="persisted-dialog" prevent-close><div slot="icon"><slot id="icon" name="icon"></slot></div><div slot="content"><slot name="content"></slot></div><div slot="buttons"><slot name="buttons"></slot></div></sinch-dialog>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 function isVisible(elementStyle) {
@@ -55,6 +55,8 @@ class PersistentOverlay extends NectaryElement {
     this.#controller = new AbortController();
     const { signal } = this.#controller;
     this.addEventListener("-visibility-altered", this.#onVisibilityAlteredReactHandler, { signal });
+    this.addEventListener("-dismiss-blocked", this.#onDismissBlockedReactHandler, { signal });
+    this.#$sinchDialog.addEventListener("-dismiss-blocked", this.#onDismissBlocked, { signal });
     if (this.open) {
       this.#startObservingAlteration();
     }
@@ -90,10 +92,22 @@ class PersistentOverlay extends NectaryElement {
   #onVisibilityAltered() {
     this.dispatchEvent(new CustomEvent("-visibility-altered"));
   }
+  #onDismissBlocked = (e) => {
+    this.#dispatchDismissBlockedEvent(
+      e.detail
+    );
+  };
   #onVisibilityAlteredReactHandler = (e) => {
     getReactEventHandler(this, "on-visibility-altered")?.(e);
     getReactEventHandler(this, "onVisibilityAltered")?.(e);
   };
+  #onDismissBlockedReactHandler = (e) => {
+    getReactEventHandler(this, "on-dismiss-blocked")?.(e);
+    getReactEventHandler(this, "onDismissBlocked")?.(e);
+  };
+  #dispatchDismissBlockedEvent(detail) {
+    this.dispatchEvent(new CustomEvent("-dismiss-blocked", { detail }));
+  }
 }
 defineCustomElement("sinch-persistent-overlay", PersistentOverlay);
 export {

package/persistent-overlay/types.d.ts

@@ -1,4 +1,4 @@
-import type { TSinchDialogProps } from '../dialog/types';
+import type { TSinchDialogCloseDetail, TSinchDialogProps } from '../dialog/types';
 import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchPersistentOverlayProps = {
     /** Controls whether the dialog should be open */
@@ -10,7 +10,9 @@ export type TSinchPersistentOverlayProps = {
 };
 export type TSinchPersistentOverlayEvents = {
     /** visibility altered event handler */
-    '-visibility-altered': (e: CustomEvent) => void;
+    '-visibility-altered'?: (e: CustomEvent) => void;
+    /** Forwarded when the wrapped dialog blocks a dismissal attempt. Consumers can use this to provide inline guidance or a polite live-region announcement. */
+    '-dismiss-blocked'?: (e: CustomEvent<TSinchDialogCloseDetail>) => void;
 };
 export type TSinchPersistentOverlayStyle = {
     '--sinch-dialog-close-button-display'?: string;

package/time-picker/index.d.ts

@@ -17,6 +17,8 @@ export declare class TimePicker extends NectaryElement {
     get ampm(): boolean;
     set submitAriaLabel(value: string);
     get submitAriaLabel(): string;
+    set noSubmit(value: boolean);
+    get noSubmit(): boolean;
     get submitButtonRect(): TRect;
     get amButtonRect(): TRect | null;
     get pmButtonRect(): TRect | null;

package/time-picker/index.js

@@ -1,7 +1,7 @@
 import "../icon/index.js";
 import "../segmented-control/index.js";
 import "../segmented-control-option/index.js";
-import { isAttrEqual, updateAttribute, updateBooleanAttribute, getAttribute, getBooleanAttribute, setClass, isAttrTrue } from "../utils/dom.js";
+import { isAttrEqual, updateBooleanAttribute, updateAttribute, getAttribute, getBooleanAttribute, setClass, isAttrTrue } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getRect } from "../utils/rect.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
@@ -119,13 +119,14 @@ class TimePicker extends NectaryElement {
     this.#$needleHour.addEventListener("keydown", this.#onHoursKeydown, options);
     this.#$needleMinute.addEventListener("keydown", this.#onMinutesKeydown, options);
     this.addEventListener("-change", this.#onChangeReactHandler, options);
+    this.addEventListener("-submit", this.#onSubmitReactHandler, options);
   }
   disconnectedCallback() {
     this.#controller.abort();
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ["value", "ampm", "submit-aria-label"];
+    return ["value", "ampm", "submit-aria-label", "no-submit"];
   }
   attributeChangedCallback(name, prevValue, newVal) {
     if (isAttrEqual(prevValue, newVal)) {
@@ -151,6 +152,12 @@ class TimePicker extends NectaryElement {
         updateAttribute(this.#$submitButton, "aria-label", newVal);
         break;
       }
+      case "no-submit": {
+        const isNoSubmit = isAttrTrue(newVal);
+        updateBooleanAttribute(this, "no-submit", isNoSubmit);
+        this.#render();
+        break;
+      }
     }
   }
   set value(value) {
@@ -171,6 +178,12 @@ class TimePicker extends NectaryElement {
   get submitAriaLabel() {
     return getAttribute(this, "submit-aria-label", "");
   }
+  set noSubmit(value) {
+    updateBooleanAttribute(this, "no-submit", value);
+  }
+  get noSubmit() {
+    return getBooleanAttribute(this, "no-submit");
+  }
   get submitButtonRect() {
     return getRect(this.#$submitButton);
   }
@@ -237,6 +250,7 @@ class TimePicker extends NectaryElement {
       this.#$headerMinutes.focus();
     }
     this.#render();
+    this.#onChange();
   };
   #render() {
     const is24 = getBooleanAttribute(this, "ampm") === false;
@@ -244,6 +258,7 @@ class TimePicker extends NectaryElement {
     this.#selectMinute();
     this.#$headerHoursText.textContent = stringifyHour(this.#hour, is24);
     this.#$headerMinutesText.textContent = stringifyMinute(this.#minute);
+    this.#$submitButton.style.display = this.noSubmit ? "none" : "";
     updateAttribute(this.#$headerHours, "aria-valuenow", this.#hour);
     updateAttribute(this.#$headerHours, "aria-valuetext", this.#hour);
     updateAttribute(this.#$headerMinutes, "aria-valuenow", this.#minute);
@@ -293,6 +308,7 @@ class TimePicker extends NectaryElement {
         if (this.#hour >= 12) {
           this.#hour -= 12;
           this.#render();
+          this.#onChange();
         }
         break;
       }
@@ -300,31 +316,41 @@ class TimePicker extends NectaryElement {
         if (this.#hour < 12) {
           this.#hour += 12;
           this.#render();
+          this.#onChange();
         }
         break;
       }
     }
   };
-  #onSubmitButtonClick = () => {
+  #onEventEmit = (eventName) => {
     const value = stringifyTime(this.#hour, this.#minute);
     this.dispatchEvent(
-      new CustomEvent("-change", {
+      new CustomEvent(eventName, {
         detail: value
       })
     );
   };
+  #onChange = () => {
+    this.#onEventEmit("-change");
+  };
+  #onSubmitButtonClick = () => {
+    this.#onEventEmit("-submit");
+    this.#onEventEmit("-change");
+  };
   #onHoursKeydown = (e) => {
     switch (e.key) {
       case "ArrowUp": {
         e.preventDefault();
         this.#hour = (this.#hour + 1) % 24;
         this.#render();
+        this.#onChange();
         break;
       }
       case "ArrowDown": {
         e.preventDefault();
         this.#hour = (this.#hour + 23) % 24;
         this.#render();
+        this.#onChange();
         break;
       }
     }
@@ -335,12 +361,14 @@ class TimePicker extends NectaryElement {
         e.preventDefault();
         this.#minute = (this.#minute + 1) % 60;
         this.#render();
+        this.#onChange();
         break;
       }
       case "ArrowDown": {
         e.preventDefault();
         this.#minute = (this.#minute + 59) % 60;
         this.#render();
+        this.#onChange();
         break;
       }
     }
@@ -349,13 +377,19 @@ class TimePicker extends NectaryElement {
     getReactEventHandler(this, "on-change")?.(e);
     getReactEventHandler(this, "onChange")?.(e);
   };
+  #onSubmitReactHandler = (e) => {
+    getReactEventHandler(this, "on-submit")?.(e);
+    getReactEventHandler(this, "onSubmit")?.(e);
+  };
   #onHourDigitClick = (hour) => {
     this.#hour = hour;
     this.#render();
+    this.#onChange();
   };
   #onMinuteDigitClick = (minute) => {
     this.#minute = minute;
     this.#render();
+    this.#onChange();
   };
   #onDigitKeydown = (e, callback) => {
     if (e.key === "Enter" || e.key === " ") {

package/time-picker/types.d.ts

@@ -6,6 +6,8 @@ export type TSinchTimePickerProps = {
     ampm?: boolean;
     /** Label that is used for a11y */
     'aria-label': string;
+    /** Hide submit button */
+    'no-submit'?: boolean;
     /** Submit button label that is used for a11y */
     'submit-aria-label': string;
     readonly submitButtonRect?: TRect;
@@ -19,6 +21,8 @@ export type TSinchTimePickerMethods = {
 export type TSinchTimePickerEvents = {
     /** Change value handler, return time in ISO 8601 format */
     '-change'?: (e: CustomEvent<string>) => void;
+    /** Submit value handler, return time in ISO 8601 format */
+    '-submit'?: (e: CustomEvent<string>) => void;
 };
 export type TSinchTimePickerStyle = {
     '--sinch-comp-time-picker-header-font'?: string;

package/utils/scroll-lock.d.ts

@@ -1,2 +1,3 @@
+export declare const isScrollDisabled: () => boolean;
 export declare const disableScroll: () => void;
 export declare const enableScroll: () => void;

package/utils/scroll-lock.js

@@ -1,4 +1,5 @@
 const bodyEl = document.body;
+const isScrollDisabled = () => bodyEl.__dialog_counter__ > 0;
 const disableScroll = () => {
   bodyEl.__dialog_counter__ = (bodyEl.__dialog_counter__ ?? 0) + 1;
   if (bodyEl.__dialog_counter__ === 1) {
@@ -18,5 +19,6 @@ const enableScroll = () => {
 };
 export {
   disableScroll,
-  enableScroll
+  enableScroll,
+  isScrollDisabled
 };