@nectary/components 4.12.1 → 5.0.0

package/list/types.d.ts

@@ -1,3 +1,23 @@
-import type { NectaryComponentReactByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchListElement = HTMLElement;
 export type TSinchListReact = NectaryComponentReactByType<TSinchListElement>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-list': {};
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-list': NectaryComponentVanilla<'sinch-list'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-list': NectaryComponentReact<'sinch-list'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-list': NectaryComponentReact<'sinch-list'>;
+        }
+    }
+}

package/list/types.js

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

package/list-item/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/list-item/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-list-item");

package/list-item/index.d.ts

@@ -1,27 +1,6 @@
 import { NectaryElement } from '../utils';
-import type { TSinchListItem } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export * 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,15 +1,18 @@
-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');
+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");
 template.innerHTML = templateHTML;
-export class ListItem extends NectaryElement {
+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);
+defineCustomElement("sinch-list-item", ListItem);
+export {
+  ListItem
+};

package/list-item/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchListItemStyle = {
     '--sinch-comp-list-color-default-background-initial'?: string;
     '--sinch-comp-list-color-default-background-hover'?: string;
@@ -9,3 +9,23 @@ 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.1",
+  "version": "5.0.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -9,6 +9,9 @@
     "standalone.ts",
     "standalone.d.ts",
     "standalone.js",
+    "bundle.ts",
+    "bundle.d.ts",
+    "bundle.js",
     "types.d.ts",
     "colors.json"
   ],
@@ -16,11 +19,12 @@
     "access": "public"
   },
   "scripts": {
-    "build": "NODE_ENV=production babel . --extensions '.ts' --out-dir . && tsc --declaration --emitDeclarationOnly"
+    "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"
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@nectary/assets": "2.6.1"
+    "@nectary/assets": "3.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",
@@ -28,12 +32,14 @@
     "@babel/plugin-transform-runtime": "^7.22.15",
     "@babel/preset-env": "^7.22.20",
     "@babel/preset-typescript": "^7.22.15",
-    "@types/node": "^18.17.17",
+    "@types/node": "22.12.0",
     "@types/react": "^18.2.21",
     "babel-plugin-html-inline-minifier": "workspace:*",
-    "typescript": "^5.2.2"
+    "dts-bundle-generator": "^9.5.1",
+    "typescript": "^5.2.2",
+    "vite": "^7.0.6"
   },
   "peerDependencies": {
-    "@nectary/theme-base": "1.5.0"
+    "@nectary/theme-base": ">=1.4.0 <2.0.0"
   }
 }

package/pagination/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/pagination/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-pagination");

package/pagination/index.d.ts

@@ -1,7 +1,7 @@
 import '../icon';
 import { NectaryElement } from '../utils';
-import type { TSinchPagination } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
+import type { TRect } from '../types';
+export * from './types';
 export declare class Pagination extends NectaryElement {
     #private;
     constructor();
@@ -20,23 +20,3 @@ 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,15 +1,19 @@
-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>';
+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';
 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;
-export class Pagination extends NectaryElement {
+class Pagination extends NectaryElement {
   #$left;
   #$right;
   #$buttons;
@@ -18,75 +22,81 @@ export 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));
     }
@@ -105,23 +115,28 @@ export 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;
@@ -132,7 +147,7 @@ export 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);
@@ -145,4 +160,7 @@ export class Pagination extends NectaryElement {
     return btn == null ? null : getRect(btn);
   }
 }
-defineCustomElement('sinch-pagination', Pagination);
+defineCustomElement("sinch-pagination", Pagination);
+export {
+  Pagination
+};

package/pagination/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchPaginationProps = {
     value: number;
     max: number;
@@ -34,3 +34,23 @@ 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/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/persistent-overlay/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-persistent-overlay");

package/persistent-overlay/index.d.ts

@@ -1,7 +1,6 @@
 import '../dialog';
 import { NectaryElement } from '../utils';
-import type { TSinchPersistentOverlay } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export * from './types';
 export declare class PersistentOverlay extends NectaryElement {
     #private;
     constructor();
@@ -14,23 +13,3 @@ 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,22 +1,23 @@
-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');
+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");
 template.innerHTML = templateHTML;
 function isVisible(elementStyle) {
-  return elementStyle.visibility === 'visible' && elementStyle.display !== 'none';
+  return elementStyle.visibility === "visible" && elementStyle.display !== "none";
 }
-const observeDialogVisibilityManipulation = function (sinchDialogElement, cb) {
-  let intervalLength = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1000;
+const observeDialogVisibilityManipulation = (sinchDialogElement, cb, intervalLength = 1e3) => {
   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) {
+    const dialogElement = sinchDialogElement.shadowRoot?.querySelector("dialog");
+    if (!isVisible(getComputedStyle(sinchDialogElement)) || sinchDialogElement.open !== true || dialogElement === null || dialogElement === void 0 || !isVisible(getComputedStyle(dialogElement)) || dialogElement.open !== true) {
       cb();
     }
   }, intervalLength);
   return checkInterval;
 };
-export class PersistentOverlay extends NectaryElement {
+class PersistentOverlay extends NectaryElement {
   #$sinchDialog;
   #visibilityObserverInterval;
   #controller = null;
@@ -24,42 +25,36 @@ export 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();
     }
@@ -68,21 +63,21 @@ export class PersistentOverlay extends NectaryElement {
     super.disconnectedCallback();
     this.#controller.abort();
     this.#controller = null;
-    if (this.open || this.#visibilityObserverInterval !== undefined) {
+    if (this.open || this.#visibilityObserverInterval !== void 0) {
       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, () => {
@@ -93,10 +88,13 @@ export 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);
+defineCustomElement("sinch-persistent-overlay", PersistentOverlay);
+export {
+  PersistentOverlay
+};