@nectary/components 3.2.0 → 3.3.1

package/lib/cjs/dialog/index.js

@@ -5,7 +5,7 @@ require('../stop-events');
 require('../title');
 var _utils = require('../utils');
 var _utils2 = require('./utils');
-const templateHTML = '<style>:host{display:contents;--sinch-comp-dialog-max-width:512px;--sinch-comp-dialog-max-height:90vh;--sinch-comp-dialog-width:fit-content}#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{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 id="icon-close" slot="icon" name="close"></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 = '<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 id="icon-close" slot="icon" name="close"></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;
 (0, _utils.defineCustomElement)('sinch-dialog', class extends _utils.NectaryElement {
@@ -143,7 +143,6 @@ template.innerHTML = templateHTML;
     if (!this.#$dialog.open) {
       return;
     }
-    this.#$dialogContent.scrollTo(0, 0);
     this.#$dialog.close?.();
     (0, _utils2.enableScroll)();
   }

package/lib/cjs/persistent-overlay/index.d.ts

@@ -0,0 +1,15 @@
+import '../icon';
+import '../stop-events';
+import '../title';
+import type { TSinchPersistentOverlayElement, TSinchPersistentOverlayReact } from './types';
+import '@nectary/components/dialog';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-persistent-overlay': TSinchPersistentOverlayReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-persistent-overlay': TSinchPersistentOverlayElement;
+    }
+}

package/lib/cjs/persistent-overlay/index.js

@@ -0,0 +1,106 @@
+"use strict";
+
+require('../icon');
+require('../stop-events');
+require('../title');
+var _utils = require('../utils');
+require('@nectary/components/dialog');
+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 template = document.createElement('template');
+template.innerHTML = templateHTML;
+function isVisible(elementStyle) {
+  return elementStyle.visibility === 'visible' && elementStyle.display !== 'none';
+}
+const observeDialogVisibilityManipulation = function (sinchDialogElement, cb) {
+  let intervalLength = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1000;
+  const checkInterval = setInterval(() => {
+    const dialogElement = sinchDialogElement.shadowRoot?.querySelector('dialog');
+    if (!isVisible(getComputedStyle(sinchDialogElement)) || sinchDialogElement.open !== true || dialogElement === null || dialogElement === undefined || !isVisible(getComputedStyle(dialogElement)) || dialogElement.open !== true) {
+      cb();
+    }
+  }, intervalLength);
+  return checkInterval;
+};
+(0, _utils.defineCustomElement)('sinch-persistent-overlay', class extends _utils.NectaryElement {
+  #$sinchDialog;
+  #visibilityObserverInterval;
+  #controller = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$sinchDialog = shadowRoot.querySelector('#persisted-dialog');
+  }
+  static get observedAttributes() {
+    return ['caption', 'open'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'caption':
+        {
+          (0, _utils.updateAttribute)(this.#$sinchDialog, 'caption', newVal);
+          break;
+        }
+      case 'open':
+        {
+          (0, _utils.updateAttribute)(this.#$sinchDialog, 'open', newVal);
+          const shouldOpen = (0, _utils.isAttrTrue)(newVal);
+          if (shouldOpen) {
+            requestAnimationFrame(() => {
+              this.#startObservingAlteration();
+            });
+          } else {
+            this.#stopObservingAlteration();
+          }
+        }
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.role = 'dialog';
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    this.addEventListener('-visibility-altered', this.#onVisibilityAlteredReactHandler, {
+      signal
+    });
+    if (this.open) {
+      this.#startObservingAlteration();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#controller.abort();
+    this.#controller = null;
+    if (this.open || this.#visibilityObserverInterval !== undefined) {
+      this.#onVisibilityAltered();
+    }
+  }
+  set caption(caption) {
+    (0, _utils.updateAttribute)(this, 'caption', caption);
+  }
+  get caption() {
+    return (0, _utils.getAttribute)(this, 'caption', '');
+  }
+  set open(isOpen) {
+    (0, _utils.updateBooleanAttribute)(this, 'open', isOpen);
+  }
+  get open() {
+    return (0, _utils.getBooleanAttribute)(this, 'open');
+  }
+  #startObservingAlteration() {
+    this.#visibilityObserverInterval = observeDialogVisibilityManipulation(this.#$sinchDialog, () => {
+      this.#onVisibilityAltered();
+    });
+  }
+  #stopObservingAlteration() {
+    clearInterval(this.#visibilityObserverInterval);
+  }
+  #onVisibilityAltered() {
+    this.dispatchEvent(new CustomEvent('-visibility-altered'));
+  }
+  #onVisibilityAlteredReactHandler = e => {
+    (0, _utils.getReactEventHandler)(this, 'on-visibility-altered')?.(e);
+  };
+});

package/lib/cjs/persistent-overlay/types.d.ts

@@ -0,0 +1,22 @@
+import type { TSinchDialogElement, TSinchDialogReact } from '../dialog/types';
+import type { TSinchElementReact } from '../types';
+export type TSinchPersistentOverlayElement = HTMLElement & {
+    /** Open/close state */
+    open: TSinchDialogElement['open'];
+    /** Dialog caption */
+    caption: TSinchDialogElement['caption'];
+    /** Dialog caption */
+    setAttribute(name: 'caption', value: TSinchDialogElement['caption']): void;
+    /** visibility altered event handler */
+    addEventListener(type: '-visibility-altered', listener: (e: CustomEvent) => void): void;
+};
+export type TSinchPersistentOverlayReact = TSinchElementReact<TSinchPersistentOverlayElement> & {
+    /** Controls whether the dialog should be open */
+    open: TSinchDialogReact['open'];
+    /** Dialog caption */
+    caption: TSinchDialogReact['caption'];
+    /** Label that is used for a11y */
+    'aria-label': TSinchDialogReact['aria-label'];
+    /** visibility altered event handler */
+    'on-visibility-altered': (e: CustomEvent) => void;
+};

package/lib/cjs/persistent-overlay/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/esm/dialog/index.js

@@ -2,7 +2,7 @@ import '../icon';
 import '../stop-events';
 import '../title';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute, setClass, isTargetEqual, isAttrEqual } from '../utils';
-const templateHTML = '<style>:host{display:contents;--sinch-comp-dialog-max-width:512px;--sinch-comp-dialog-max-height:90vh;--sinch-comp-dialog-width:fit-content}#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{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 id="icon-close" slot="icon" name="close"></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 = '<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 id="icon-close" slot="icon" name="close"></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 { disableScroll, enableScroll } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -141,7 +141,6 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
     if (!this.#$dialog.open) {
       return;
     }
-    this.#$dialogContent.scrollTo(0, 0);
     this.#$dialog.close?.();
     enableScroll();
   }

package/lib/esm/persistent-overlay/index.d.ts

@@ -0,0 +1,15 @@
+import '../icon';
+import '../stop-events';
+import '../title';
+import type { TSinchPersistentOverlayElement, TSinchPersistentOverlayReact } from './types';
+import '@nectary/components/dialog';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-persistent-overlay': TSinchPersistentOverlayReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-persistent-overlay': TSinchPersistentOverlayElement;
+    }
+}

package/lib/esm/persistent-overlay/index.js

@@ -0,0 +1,104 @@
+import '../icon';
+import '../stop-events';
+import '../title';
+import { defineCustomElement, getAttribute, getBooleanAttribute, updateAttribute, NectaryElement, updateBooleanAttribute, isAttrTrue, getReactEventHandler } from '../utils';
+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>';
+import '@nectary/components/dialog';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+function isVisible(elementStyle) {
+  return elementStyle.visibility === 'visible' && elementStyle.display !== 'none';
+}
+const observeDialogVisibilityManipulation = function (sinchDialogElement, cb) {
+  let intervalLength = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1000;
+  const checkInterval = setInterval(() => {
+    const dialogElement = sinchDialogElement.shadowRoot?.querySelector('dialog');
+    if (!isVisible(getComputedStyle(sinchDialogElement)) || sinchDialogElement.open !== true || dialogElement === null || dialogElement === undefined || !isVisible(getComputedStyle(dialogElement)) || dialogElement.open !== true) {
+      cb();
+    }
+  }, intervalLength);
+  return checkInterval;
+};
+defineCustomElement('sinch-persistent-overlay', class extends NectaryElement {
+  #$sinchDialog;
+  #visibilityObserverInterval;
+  #controller = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$sinchDialog = shadowRoot.querySelector('#persisted-dialog');
+  }
+  static get observedAttributes() {
+    return ['caption', 'open'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'caption':
+        {
+          updateAttribute(this.#$sinchDialog, 'caption', newVal);
+          break;
+        }
+      case 'open':
+        {
+          updateAttribute(this.#$sinchDialog, 'open', newVal);
+          const shouldOpen = isAttrTrue(newVal);
+          if (shouldOpen) {
+            requestAnimationFrame(() => {
+              this.#startObservingAlteration();
+            });
+          } else {
+            this.#stopObservingAlteration();
+          }
+        }
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.role = 'dialog';
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    this.addEventListener('-visibility-altered', this.#onVisibilityAlteredReactHandler, {
+      signal
+    });
+    if (this.open) {
+      this.#startObservingAlteration();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#controller.abort();
+    this.#controller = null;
+    if (this.open || this.#visibilityObserverInterval !== undefined) {
+      this.#onVisibilityAltered();
+    }
+  }
+  set caption(caption) {
+    updateAttribute(this, 'caption', caption);
+  }
+  get caption() {
+    return getAttribute(this, 'caption', '');
+  }
+  set open(isOpen) {
+    updateBooleanAttribute(this, 'open', isOpen);
+  }
+  get open() {
+    return getBooleanAttribute(this, 'open');
+  }
+  #startObservingAlteration() {
+    this.#visibilityObserverInterval = observeDialogVisibilityManipulation(this.#$sinchDialog, () => {
+      this.#onVisibilityAltered();
+    });
+  }
+  #stopObservingAlteration() {
+    clearInterval(this.#visibilityObserverInterval);
+  }
+  #onVisibilityAltered() {
+    this.dispatchEvent(new CustomEvent('-visibility-altered'));
+  }
+  #onVisibilityAlteredReactHandler = e => {
+    getReactEventHandler(this, 'on-visibility-altered')?.(e);
+  };
+});

package/lib/esm/persistent-overlay/types.d.ts

@@ -0,0 +1,22 @@
+import type { TSinchDialogElement, TSinchDialogReact } from '../dialog/types';
+import type { TSinchElementReact } from '../types';
+export type TSinchPersistentOverlayElement = HTMLElement & {
+    /** Open/close state */
+    open: TSinchDialogElement['open'];
+    /** Dialog caption */
+    caption: TSinchDialogElement['caption'];
+    /** Dialog caption */
+    setAttribute(name: 'caption', value: TSinchDialogElement['caption']): void;
+    /** visibility altered event handler */
+    addEventListener(type: '-visibility-altered', listener: (e: CustomEvent) => void): void;
+};
+export type TSinchPersistentOverlayReact = TSinchElementReact<TSinchPersistentOverlayElement> & {
+    /** Controls whether the dialog should be open */
+    open: TSinchDialogReact['open'];
+    /** Dialog caption */
+    caption: TSinchDialogReact['caption'];
+    /** Label that is used for a11y */
+    'aria-label': TSinchDialogReact['aria-label'];
+    /** visibility altered event handler */
+    'on-visibility-altered': (e: CustomEvent) => void;
+};

package/lib/esm/persistent-overlay/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "3.2.0",
+  "version": "3.3.1",
   "files": [
     "lib"
   ],