@nectary/components 4.12.0 → 4.12.1

package/list-item/index.d.ts

@@ -1,6 +1,27 @@
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { TSinchListItem } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class ListItem extends NectaryElement {
     constructor();
     connectedCallback(): void;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-list-item': TSinchListItem;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-list-item': NectaryComponentVanilla<'sinch-list-item'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-list-item': NectaryComponentReact<'sinch-list-item'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-list-item': NectaryComponentReact<'sinch-list-item'>;
+        }
+    }
+}

package/list-item/index.js

@@ -1,18 +1,15 @@
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n  outline: none;\n}\n\n#wrapper {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  padding: 8px 0;\n  background-color: var(--sinch-comp-list-color-default-background-initial);\n  border-bottom: 1px solid var(--sinch-comp-list-color-default-border-initial);\n}\n\n:host(:last-child) > #wrapper {\n  border-bottom: none;\n}\n\n:host(:hover) > #wrapper {\n  background-color: var(--sinch-comp-list-color-default-background-hover);\n}\n</style>\n\n<div id="wrapper">\n  <slot name="content"></slot>\n</div>\n';
-const template = document.createElement("template");
+import { defineCustomElement, NectaryElement } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:100%;height:100%;box-sizing:border-box;overflow:hidden;padding:8px 0;background-color:var(--sinch-comp-list-color-default-background-initial);border-bottom:1px solid var(--sinch-comp-list-color-default-border-initial)}:host(:last-child)>#wrapper{border-bottom:none}:host(:hover)>#wrapper{background-color:var(--sinch-comp-list-color-default-background-hover)}</style><div id="wrapper"><slot name="content"></slot></div>';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class ListItem extends NectaryElement {
+export class ListItem extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
   connectedCallback() {
-    this.setAttribute("role", "listitem");
+    this.setAttribute('role', 'listitem');
   }
 }
-defineCustomElement("sinch-list-item", ListItem);
-export {
-  ListItem
-};
+defineCustomElement('sinch-list-item', ListItem);

package/list-item/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType } from '../types';
 export type TSinchListItemStyle = {
     '--sinch-comp-list-color-default-background-initial'?: string;
     '--sinch-comp-list-color-default-background-hover'?: string;
@@ -9,23 +9,3 @@ export type TSinchListItem = {
 };
 export type TSinchListItemElement = HTMLElement;
 export type TSinchListItemReact = NectaryComponentReactByType<TSinchListItemElement>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-list-item': TSinchListItem;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-list-item': NectaryComponentVanilla<'sinch-list-item'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-list-item': NectaryComponentReact<'sinch-list-item'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-list-item': NectaryComponentReact<'sinch-list-item'>;
-        }
-    }
-}

package/list-item/types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "4.12.0",
+  "version": "4.12.1",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -9,9 +9,6 @@
     "standalone.ts",
     "standalone.d.ts",
     "standalone.js",
-    "bundle.ts",
-    "bundle.d.ts",
-    "bundle.js",
     "types.d.ts",
     "colors.json"
   ],
@@ -19,12 +16,11 @@
     "access": "public"
   },
   "scripts": {
-    "build": "rm -rf utils/shared && cp -r ../shared utils/shared && vite build && vite build --mode bundle && npx tsc --declaration --emitDeclarationOnly && npx tsx ../scripts/tsc-alias.ts --alias '@nectary/shared=./utils/shared'",
-    "dev": "vite build --watch"
+    "build": "NODE_ENV=production babel . --extensions '.ts' --out-dir . && tsc --declaration --emitDeclarationOnly"
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@nectary/assets": "2.6.0"
+    "@nectary/assets": "2.6.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",
@@ -32,12 +28,10 @@
     "@babel/plugin-transform-runtime": "^7.22.15",
     "@babel/preset-env": "^7.22.20",
     "@babel/preset-typescript": "^7.22.15",
-    "@types/node": "22.12.0",
+    "@types/node": "^18.17.17",
     "@types/react": "^18.2.21",
     "babel-plugin-html-inline-minifier": "workspace:*",
-    "dts-bundle-generator": "^9.5.1",
-    "typescript": "^5.2.2",
-    "vite": "^7.0.6"
+    "typescript": "^5.2.2"
   },
   "peerDependencies": {
     "@nectary/theme-base": "1.5.0"

package/pagination/index.d.ts

@@ -1,7 +1,7 @@
 import '../icon';
 import { NectaryElement } from '../utils';
-import type { TRect } from '../types';
-export * from './types';
+import type { TSinchPagination } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
 export declare class Pagination extends NectaryElement {
     #private;
     constructor();
@@ -20,3 +20,23 @@ export declare class Pagination extends NectaryElement {
     get nextButtonRect(): TRect;
     nthButtonRect(index: number): TRect | null;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-pagination': TSinchPagination;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-pagination': NectaryComponentVanilla<'sinch-pagination'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-pagination': NectaryComponentReact<'sinch-pagination'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-pagination': NectaryComponentReact<'sinch-pagination'>;
+        }
+    }
+}

package/pagination/index.js

@@ -1,19 +1,15 @@
-import "../icon/index.js";
-import { updateAttribute, getIntegerAttribute, 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, getTargetIndexInParent } from "../utils/event-target.js";
-const templateHTML = '<style>\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n    outline: none;\n  }\n\n  #wrapper {\n    display: flex;\n    justify-content: center;\n    gap: 8px;\n    width: 100%;\n    height: var(--sinch-local-size);\n\n    --sinch-local-size: 24px;\n  }\n\n  button {\n    all: initial;\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-width: var(--sinch-local-size);\n    height: var(--sinch-local-size);\n    cursor: pointer;\n    border-radius: var(--sinch-comp-pagination-shape-radius);\n    user-select: none;\n\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-pagination-color-default-icon-default\n      );\n  }\n\n  button:focus-visible::before {\n    content: "";\n    position: absolute;\n    inset: -3px;\n    border: 2px solid var(--sinch-comp-pagination-color-default-outline-focus);\n    border-radius: calc(var(--sinch-comp-pagination-shape-radius) + 3px);\n    pointer-events: none;\n  }\n\n  button:disabled {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-pagination-color-disabled-icon-initial\n      );\n\n    cursor: initial;\n  }\n\n  button:enabled:hover {\n    background-color:\n      var(\n        --sinch-comp-pagination-color-default-background-hover\n      );\n  }\n\n  button > * {\n    display: block;\n    overflow: hidden;\n    pointer-events: none;\n  }\n\n  .page {\n    font: var(--sinch-comp-pagination-font-default-page-number);\n    color: var(--sinch-comp-pagination-color-default-text-initial);\n    background-color:\n      var(\n        --sinch-comp-pagination-color-default-background-initial\n      );\n    padding: 0 4px;\n    box-sizing: border-box;\n  }\n\n  .page.dots > span {\n    display: none;\n  }\n\n  .page.dots::after {\n    content: "...";\n  }\n\n  .page.active {\n    font: var(--sinch-comp-pagination-font-checked-page-number);\n    background-color:\n      var(\n        --sinch-comp-pagination-color-checked-background-initial\n      );\n    pointer-events: none;\n    cursor: initial;\n  }\n\n  .page.active:hover {\n    background-color:\n      var(\n        --sinch-comp-pagination-color-checked-background-hover\n      );\n  }\n\n  .page.hidden {\n    display: none;\n  }\n\n  #left,\n  #right {\n    --sinch-icon-size: 24px;\n  }\n</style>\n\n<div id="wrapper">\n  <button id="left">\n    <sinch-icon icons-version="2" name="fa-angle-left" id="icon-left"></sinch-icon>\n  </button>\n  <button class="page"><span>1</span></button>\n  <button class="page active"><span>2</span></button>\n  <button class="page"><span>3</span></button>\n  <button class="page"><span>4</span></button>\n  <button class="page"><span>5</span></button>\n  <button class="page dots"><span>6</span></button>\n  <button class="page"><span>20</span></button>\n  <button id="right">\n    <sinch-icon icons-version="2" name="fa-angle-right" id="icon-right"></sinch-icon>\n  </button>\n</div>\n';
+import '../icon';
+import { defineCustomElement, updateAttribute, getIntegerAttribute, setClass, NectaryElement, getRect, getReactEventHandler, isTargetEqual, getTargetIndexInParent } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;height:var(--sinch-local-size);--sinch-local-size:24px}button{all:initial;position:relative;display:flex;justify-content:center;align-items:center;min-width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;border-radius:var(--sinch-comp-pagination-shape-radius);user-select:none;--sinch-global-color-icon:var(--sinch-comp-pagination-color-default-icon-default)}button:focus-visible::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-pagination-color-default-outline-focus);border-radius:calc(var(--sinch-comp-pagination-shape-radius) + 3px);pointer-events:none}button:disabled{--sinch-global-color-icon:var(--sinch-comp-pagination-color-disabled-icon-initial);cursor:initial}button:enabled:hover{background-color:var(--sinch-comp-pagination-color-default-background-hover)}button>*{display:block;overflow:hidden;pointer-events:none}.page{font:var(--sinch-comp-pagination-font-default-page-number);color:var(--sinch-comp-pagination-color-default-text-initial);background-color:var(--sinch-comp-pagination-color-default-background-initial);padding:0 4px;box-sizing:border-box}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font:var(--sinch-comp-pagination-font-checked-page-number);background-color:var(--sinch-comp-pagination-color-checked-background-initial);pointer-events:none;cursor:initial}.page.active:hover{background-color:var(--sinch-comp-pagination-color-checked-background-hover)}.page.hidden{display:none}#left,#right{--sinch-icon-size:24px}</style><div id="wrapper"><button id="left"><sinch-icon icons-version="2" name="fa-angle-left" id="icon-left"></sinch-icon></button><button class="page"><span>1</span></button><button class="page active"><span>2</span></button><button class="page"><span>3</span></button><button class="page"><span>4</span></button><button class="page"><span>5</span></button><button class="page dots"><span>6</span></button><button class="page"><span>20</span></button><button id="right"><sinch-icon icons-version="2" name="fa-angle-right" id="icon-right"></sinch-icon></button></div>';
 const NUM_BUTTONS = 7;
 const MIDDLE_BTN_INDEX = Math.floor(NUM_BUTTONS / 2);
 const FIRST_BTN_INDEX = 0;
 const LAST_BTN_INDEX = NUM_BUTTONS - 1;
 const DOTS_LEFT_INDEX = 1;
 const DOTS_RIGHT_INDEX = LAST_BTN_INDEX - 1;
-const template = document.createElement("template");
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class Pagination extends NectaryElement {
+export class Pagination extends NectaryElement {
   #$left;
   #$right;
   #$buttons;
@@ -22,81 +18,75 @@ class Pagination extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$left = shadowRoot.querySelector("#left");
-    this.#$right = shadowRoot.querySelector("#right");
-    this.#$buttons = shadowRoot.querySelectorAll(".page");
-    this.#$wrapper = shadowRoot.querySelector("#wrapper");
+    this.#$left = shadowRoot.querySelector('#left');
+    this.#$right = shadowRoot.querySelector('#right');
+    this.#$buttons = shadowRoot.querySelectorAll('.page');
+    this.#$wrapper = shadowRoot.querySelector('#wrapper');
   }
   connectedCallback() {
     this.#onValueChange();
-    this.#$wrapper.addEventListener("click", this.#onButtonClick);
-    this.addEventListener("-change", this.#onChangeReactHandler);
+    this.#$wrapper.addEventListener('click', this.#onButtonClick);
+    this.addEventListener('-change', this.#onChangeReactHandler);
   }
   disconnectedCallback() {
-    this.#$wrapper.removeEventListener("click", this.#onButtonClick);
-    this.removeEventListener("-change", this.#onChangeReactHandler);
+    this.#$wrapper.removeEventListener('click', this.#onButtonClick);
+    this.removeEventListener('-change', this.#onChangeReactHandler);
   }
   static get observedAttributes() {
-    return ["max", "value"];
+    return ['max', 'value'];
   }
   attributeChangedCallback(name) {
     switch (name) {
-      case "value":
-      case "max": {
-        this.#onValueChange();
-        break;
-      }
+      case 'value':
+      case 'max':
+        {
+          this.#onValueChange();
+          break;
+        }
     }
   }
   set value(val) {
-    updateAttribute(this, "value", val);
+    updateAttribute(this, 'value', val);
   }
   get value() {
-    return getIntegerAttribute(this, "value", 0);
+    return getIntegerAttribute(this, 'value', 0);
   }
   set max(val) {
-    updateAttribute(this, "max", val);
+    updateAttribute(this, 'max', val);
   }
   get max() {
-    return getIntegerAttribute(this, "value", 0);
+    return getIntegerAttribute(this, 'value', 0);
   }
   #onValueChange() {
-    const value = getIntegerAttribute(this, "value", 0) - 1;
-    const max = Math.max(0, getIntegerAttribute(this, "max", 0));
-    const valueOffset = Math.min(
-      Math.max(0, value - MIDDLE_BTN_INDEX),
-      Math.max(0, max - NUM_BUTTONS)
-    );
+    const value = getIntegerAttribute(this, 'value', 0) - 1;
+    const max = Math.max(0, getIntegerAttribute(this, 'max', 0));
+    const valueOffset = Math.min(Math.max(0, value - MIDDLE_BTN_INDEX), Math.max(0, max - NUM_BUTTONS));
     for (let i = 0; i < this.#$buttons.length; i++) {
       const $b = this.#$buttons[i];
       if (value < 3) {
-        setClass($b, "active", value === i);
+        setClass($b, 'active', value === i);
       } else if (value >= max - MIDDLE_BTN_INDEX) {
-        setClass($b, "active", i + valueOffset === value);
+        setClass($b, 'active', i + valueOffset === value);
       } else {
-        setClass($b, "active", i === MIDDLE_BTN_INDEX);
+        setClass($b, 'active', i === MIDDLE_BTN_INDEX);
       }
       if (max > NUM_BUTTONS) {
-        setClass(
-          $b,
-          "dots",
-          i === DOTS_LEFT_INDEX && value > MIDDLE_BTN_INDEX || i === DOTS_RIGHT_INDEX && value <= max - DOTS_RIGHT_INDEX
-        );
+        setClass($b, 'dots', i === DOTS_LEFT_INDEX && value > MIDDLE_BTN_INDEX || i === DOTS_RIGHT_INDEX && value <= max - DOTS_RIGHT_INDEX);
       }
-      setClass($b, "hidden", i >= max);
+      setClass($b, 'hidden', i >= max);
       const btnText = $b.firstElementChild;
       if (btnText != null) {
-        btnText.textContent = i === FIRST_BTN_INDEX ? "1" : i === LAST_BTN_INDEX ? String(max) : String(i + 1 + valueOffset);
+        btnText.textContent = i === FIRST_BTN_INDEX ? '1' : i === LAST_BTN_INDEX ? String(max) : String(i + 1 + valueOffset);
       }
     }
     const isValueBad = value < 0 || value >= max;
     this.#$left.disabled = isValueBad || value === 0;
     this.#$right.disabled = isValueBad || value === max - 1;
   }
-  #onButtonClick = (e) => {
+  #onButtonClick = e => {
     e.stopPropagation();
-    const value = Math.max(getIntegerAttribute(this, "value", 0) - 1);
-    const max = Math.max(0, getIntegerAttribute(this, "max", 0));
+    const value = Math.max(getIntegerAttribute(this, 'value', 0) - 1);
+    const max = Math.max(0, getIntegerAttribute(this, 'max', 0));
     if (isTargetEqual(e, this.#$left)) {
       return this.#dispatchChangeEvent(Math.max(value - 1, 0));
     }
@@ -115,28 +105,23 @@ class Pagination extends NectaryElement {
         return this.#dispatchChangeEvent(Math.floor(value / 2));
       }
       if (btnIndex === DOTS_RIGHT_INDEX && max > NUM_BUTTONS && value <= max - DOTS_RIGHT_INDEX) {
-        return this.#dispatchChangeEvent(
-          Math.floor((max - value) / 2 + value)
-        );
+        return this.#dispatchChangeEvent(Math.floor((max - value) / 2 + value));
       }
-      return this.#dispatchChangeEvent(
-        btnIndex + Math.min(
-          Math.max(0, value - MIDDLE_BTN_INDEX),
-          Math.max(0, max - NUM_BUTTONS)
-        )
-      );
+      return this.#dispatchChangeEvent(btnIndex + Math.min(Math.max(0, value - MIDDLE_BTN_INDEX), Math.max(0, max - NUM_BUTTONS)));
     }
   };
   #clamp(value) {
-    const max = getIntegerAttribute(this, "max", 0);
+    const max = getIntegerAttribute(this, 'max', 0);
     return Math.max(0, Math.min(max - 1, value)) + 1;
   }
   #dispatchChangeEvent(value) {
     const detail = this.#clamp(value);
-    this.dispatchEvent(new CustomEvent("-change", { detail }));
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail
+    }));
   }
-  #onChangeReactHandler = (e) => {
-    getReactEventHandler(this, "on-change")?.(e);
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
   };
   get focusable() {
     return true;
@@ -147,7 +132,7 @@ class Pagination extends NectaryElement {
   blur() {
     this.#$left.blur();
     this.#$right.blur();
-    this.#$buttons.forEach(($b) => $b.blur());
+    this.#$buttons.forEach($b => $b.blur());
   }
   get prevButtonRect() {
     return getRect(this.#$left);
@@ -160,7 +145,4 @@ class Pagination extends NectaryElement {
     return btn == null ? null : getRect(btn);
   }
 }
-defineCustomElement("sinch-pagination", Pagination);
-export {
-  Pagination
-};
+defineCustomElement('sinch-pagination', Pagination);

package/pagination/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
 export type TSinchPaginationProps = {
     value: number;
     max: number;
@@ -34,23 +34,3 @@ export type TSinchPagination = {
 };
 export type TSinchPaginationElement = NectaryComponentVanillaByType<TSinchPagination>;
 export type TSinchPaginationReact = NectaryComponentReactByType<TSinchPagination>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-pagination': TSinchPagination;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-pagination': NectaryComponentVanilla<'sinch-pagination'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-pagination': NectaryComponentReact<'sinch-pagination'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-pagination': NectaryComponentReact<'sinch-pagination'>;
-        }
-    }
-}

package/pagination/types.js

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

package/persistent-overlay/index.d.ts

@@ -1,6 +1,7 @@
 import '../dialog';
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { TSinchPersistentOverlay } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class PersistentOverlay extends NectaryElement {
     #private;
     constructor();
@@ -13,3 +14,23 @@ export declare class PersistentOverlay extends NectaryElement {
     set open(isOpen: boolean);
     get open(): boolean;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-persistent-overlay': TSinchPersistentOverlay;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-persistent-overlay': NectaryComponentVanilla<'sinch-persistent-overlay'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-persistent-overlay': NectaryComponentReact<'sinch-persistent-overlay'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-persistent-overlay': NectaryComponentReact<'sinch-persistent-overlay'>;
+        }
+    }
+}

package/persistent-overlay/index.js

@@ -1,23 +1,22 @@
-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>\n  #persisted-dialog {\n    --sinch-dialog-close-button-display: none;\n  }\n\n  ::slotted(*) {\n    display: block;\n  }\n</style>\n\n<sinch-dialog id="persisted-dialog">\n  <div slot="icon"><slot id="icon" name="icon"></slot></div>\n  <div slot="content"><slot name="content"></slot></div>\n  <div slot="buttons"><slot name="buttons"></slot></div>\n</sinch-dialog>\n';
-const template = document.createElement("template");
+import '../dialog';
+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>';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
 function isVisible(elementStyle) {
-  return elementStyle.visibility === "visible" && elementStyle.display !== "none";
+  return elementStyle.visibility === 'visible' && elementStyle.display !== 'none';
 }
-const observeDialogVisibilityManipulation = (sinchDialogElement, cb, intervalLength = 1e3) => {
+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 === void 0 || !isVisible(getComputedStyle(dialogElement)) || dialogElement.open !== true) {
+    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;
 };
-class PersistentOverlay extends NectaryElement {
+export class PersistentOverlay extends NectaryElement {
   #$sinchDialog;
   #visibilityObserverInterval;
   #controller = null;
@@ -25,36 +24,42 @@ class PersistentOverlay extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$sinchDialog = shadowRoot.querySelector("#persisted-dialog");
+    this.#$sinchDialog = shadowRoot.querySelector('#persisted-dialog');
   }
   static get observedAttributes() {
-    return ["caption", "open"];
+    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();
+      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.setAttribute("role", "dialog");
+    this.setAttribute('role', 'dialog');
     this.#controller = new AbortController();
-    const { signal } = this.#controller;
-    this.addEventListener("-visibility-altered", this.#onVisibilityAlteredReactHandler, { signal });
+    const {
+      signal
+    } = this.#controller;
+    this.addEventListener('-visibility-altered', this.#onVisibilityAlteredReactHandler, {
+      signal
+    });
     if (this.open) {
       this.#startObservingAlteration();
     }
@@ -63,21 +68,21 @@ class PersistentOverlay extends NectaryElement {
     super.disconnectedCallback();
     this.#controller.abort();
     this.#controller = null;
-    if (this.open || this.#visibilityObserverInterval !== void 0) {
+    if (this.open || this.#visibilityObserverInterval !== undefined) {
       this.#onVisibilityAltered();
     }
   }
   set caption(caption) {
-    updateAttribute(this, "caption", caption);
+    updateAttribute(this, 'caption', caption);
   }
   get caption() {
-    return getAttribute(this, "caption", "");
+    return getAttribute(this, 'caption', '');
   }
   set open(isOpen) {
-    updateBooleanAttribute(this, "open", isOpen);
+    updateBooleanAttribute(this, 'open', isOpen);
   }
   get open() {
-    return getBooleanAttribute(this, "open");
+    return getBooleanAttribute(this, 'open');
   }
   #startObservingAlteration() {
     this.#visibilityObserverInterval = observeDialogVisibilityManipulation(this.#$sinchDialog, () => {
@@ -88,13 +93,10 @@ class PersistentOverlay extends NectaryElement {
     clearInterval(this.#visibilityObserverInterval);
   }
   #onVisibilityAltered() {
-    this.dispatchEvent(new CustomEvent("-visibility-altered"));
+    this.dispatchEvent(new CustomEvent('-visibility-altered'));
   }
-  #onVisibilityAlteredReactHandler = (e) => {
-    getReactEventHandler(this, "on-visibility-altered")?.(e);
+  #onVisibilityAlteredReactHandler = e => {
+    getReactEventHandler(this, 'on-visibility-altered')?.(e);
   };
 }
-defineCustomElement("sinch-persistent-overlay", PersistentOverlay);
-export {
-  PersistentOverlay
-};
+defineCustomElement('sinch-persistent-overlay', PersistentOverlay);

package/persistent-overlay/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchDialogProps } from '../dialog/types';
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchPersistentOverlayProps = {
     /** Controls whether the dialog should be open */
     open: TSinchDialogProps['open'];
@@ -22,23 +22,3 @@ export type TSinchPersistentOverlay = {
 };
 export type TSinchPersistentOverlayElement = NectaryComponentVanillaByType<TSinchPersistentOverlay>;
 export type TSinchPersistentOverlayReact = NectaryComponentReactByType<TSinchPersistentOverlay>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-persistent-overlay': TSinchPersistentOverlay;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-persistent-overlay': NectaryComponentVanilla<'sinch-persistent-overlay'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-persistent-overlay': NectaryComponentReact<'sinch-persistent-overlay'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-persistent-overlay': NectaryComponentReact<'sinch-persistent-overlay'>;
-        }
-    }
-}

package/persistent-overlay/types.js

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