@tmsoft/webphone 1.0.27 → 1.1.10

package/README.md

@@ -1,215 +1,215 @@
-# **📞 WebPhone Library (`@tmsoft/webphone`)**
+# WebPhone Library (`@tmsoft/webphone`)
 
 [![NPM Version](https://img.shields.io/npm/v/@tmsoft/webphone)](https://www.npmjs.com/package/@tmsoft/webphone)
-[![License](https://img.shields.io/npm/l/@tmsoft/webphone)](LICENSE)
 
-**`@tmsoft/webphone`** es una librería Vue 3 que proporciona un componente de teléfono web basado en SIP con soporte para llamadas WebRTC.
+Librería para Vue 3 con un componente `WebPhone` (softphone) basado en SIP y WebRTC. Incluye teclado DTMF, selección de dispositivos de audio, control de volúmenes y estado de conexión.
 
-## 📌 **Características**
 
-- 📡 Soporte para SIP y WebRTC
-- 🎨 Integrado con PrimeVue y TailwindCSS
-- 📞 Gestión de dispositivos de audio (micrófono y altavoz)
-- 🔄 Mecanismo de reconexión SIP
-- 🛠 Fácil integración en cualquier proyecto Vue 3
+### Características
+- Integración SIP sobre WebSocket (basado en JsSIP)
+- Audio WebRTC con manejo de permisos de micrófono
+- Teclado DTMF y estado de llamada (entrante/saliente/en curso)
+- Gestión de dispositivos de audio (micrófonos y altavoces)
+- Reconexión y manejo de estado SIP
+- Diseño compacto y dependencias UI mínimas (PrimeVue para botones/inputs)
 
----
 
-## 🚀 **Instalación**
+### Requisitos
+- Vue 3.5+
+- PrimeVue 4.x y PrimeIcons 7.x (peer dependencies)
+- @vueuse/core 13.x (peer dependency)
+- Servidor SIP con WebSocket habilitado (por ejemplo, Asterisk en `/asterisk/ws`, puerto 8089 por defecto)
+- Navegador con HTTPS y permisos de micrófono
 
-### 📦 Desde NPM
 
-```bash
-npm install @tmsoft/webphone
-```
-
-```bash
-yarn add @tmsoft/webphone
-```
+## Instalación
 
-```bash
-pnpm add @tmsoft/webphone
-```
-
-### 🌐 Desde CDN (Sin instalación)
+Instale el paquete y los peer dependencies:
 
-```html
-<!-- Registro automático del web component -->
-<script src="https://unpkg.com/@tmsoft/webphone@latest/dist/webphone-standalone.umd.js"></script>
-
-<!-- O versión específica para producción -->
-<script src="https://unpkg.com/@tmsoft/webphone@1.0.23/dist/webphone-standalone.umd.js"></script>
+```sh
+npm install @tmsoft/webphone primevue primeicons @vueuse/core
+# o
+yarn add @tmsoft/webphone primevue primeicons @vueuse/core
+# o
+pnpm add @tmsoft/webphone primevue primeicons @vueuse/core
 ```
 
-### 📋 Archivos de distribución disponibles
+Los estilos del componente se inyectan automáticamente en tiempo de ejecución. No es necesario configurar Tailwind en su proyecto para usar esta librería.
 
-| Archivo | Propósito | Formato | Registro automático |
-|---------|-----------|---------|-------------------|
-| `webphone.es.js` | Componente Vue | ES Module | ❌ |
-| `webphone.umd.js` | Componente Vue | UMD | ❌ |  
-| `webphone-standalone.umd.js` | Web Component | UMD | ✅ |
-| `webphone-standalone.iife.js` | Web Component | IIFE | ✅ |
-| `webphone-web-component.es.js` | Web Component | ES Module | ❌ |
 
----
+## Uso
 
-## 🛠 **Uso**
+Puede utilizar la librería como plugin global o importar el componente localmente.
 
-### 🎯 En aplicaciones Vue
+### Opción A: Plugin global
+`main.ts`:
 
-```typescript
-// main.ts
+```ts
 import { createApp } from 'vue'
-import { install as installWebPhone } from '@tmsoft/webphone'
 import App from './App.vue'
+import WebphonePlugin from '@tmsoft/webphone'
 
 const app = createApp(App)
-app.use(installWebPhone) // Registra el componente globalmente
+app.use(WebphonePlugin)
 app.mount('#app')
 ```
 
-```vue
-<!-- MyComponent.vue -->
-<template>
-  <WebPhone 
-    :extension="extension" 
-    :password="password" 
-    :domain="domain" 
-    mode="call"
-  />
-</template>
+Luego, en cualquier componente:
 
+```vue
 <script setup lang="ts">
-import { ref } from 'vue'
-
-const extension = ref('1001')
-const password = ref('supersecret')
-const domain = ref('sip.example.com')
+const extension = '1001'
+const password = 'supersecret'
+const domain = 'sip.example.com' // ver normalización de dominio más abajo
 </script>
-```
 
-### 🌐 Como Web Component (Cualquier framework)
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <!-- Cargar desde CDN -->
-  <script src="https://unpkg.com/@tmsoft/webphone@latest/dist/webphone-standalone.umd.js"></script>
-</head>
-<body>
-  <!-- Usar directamente en HTML -->
-  <web-phone 
-    extension="1001"
-    password="supersecret"
-    domain="sip.example.com"
-    mode="call">
-  </web-phone>
-</body>
-</html>
+<template>
+  <WebPhone :extension="extension" :password="password" :domain="domain" />
+</template>
 ```
 
-### 📦 En otros frameworks
-
-```javascript
-// React, Angular, Svelte, etc.
-import '@tmsoft/webphone/web-component'
+### Opción B: Importación local del componente
 
-// Ahora puedes usar <web-phone> en cualquier template
-```
+```vue
+<script setup lang="ts">
+import { WebPhone } from '@tmsoft/webphone'
 
-## 📚 **Documentación Detallada**
+const extension = '1001'
+const password = 'supersecret'
+const domain = 'sip.example.com'
+</script>
 
-- 📖 [**NPM_USAGE.md**](./NPM_USAGE.md) - Guía completa de uso desde NPM con CDN y diferentes frameworks
-- 🔧 [**USAGE_EXAMPLES.md**](./USAGE_EXAMPLES.md) - Ejemplos prácticos y casos de uso específicos  
-- 📋 [**src/lib/webphone/README.md**](./src/lib/webphone/README.md) - Documentación técnica de la librería
-- 🌐 [**example-cdn.html**](./example-cdn.html) - Demo en vivo usando CDN
+<template>
+  <WebPhone :extension="extension" :password="password" :domain="domain" />
+</template>
+```
 
----
 
-## 📌 **Props del Componente**
+## API del componente
 
-| Propiedad   | Tipo       | Requerida | Descripción                                                                       |
-| ----------- | ---------- | --------- | --------------------------------------------------------------------------------- |
-| `extension` | `String`   | ✅        | Número de extensión del usuario.                                                  |
-| `password`  | `String`   | ✅        | Contraseña SIP de la extensión.                                                   |
-| `domain`    | `String`   | ✅        | Dominio del servidor SIP.                                                         |
-| `mode`      | `String`   | ❌        | Tipo de llamada. Valores: `'call'`, `'webcall'`, `'video'`. Por defecto `'call'`. |
-| `image`     | `String`   | ❌        | Imagen base64 o URL para mostrar en modo `webcall`.                               |
-| `to`        | `String`   | ❌        | Número de destino en modo `webcall`.                                              |
-| `callback`  | `Function` | ❌        | Función de volver atrás en modo `webcall`.                                        |
+### Props
 
----
+| Propiedad   | Tipo                                 | Requerida | Default   | Descripción |
+|------------|--------------------------------------|-----------|-----------|-------------|
+| `extension`| `string`                              | Sí        | —         | Extensión del usuario para registrar y originar llamadas SIP. |
+| `password` | `string`                              | Sí        | —         | Contraseña SIP de la extensión. |
+| `domain`   | `string`                              | Sí        | —         | Dominio o URL del servidor SIP. Se normaliza automáticamente (ver detalle). |
+| `mode`     | `'webcall' \| 'call' \| 'video'`     | No        | `'webcall'` | Modo de uso. Nota: `video` aún no inicia video de forma automática. |
+| `image`    | `string`                              | No        | —         | URL o base64 para mostrar un logotipo en modo `webcall`. |
+| `to`       | `string`                              | No        | —         | Número destino en modo `webcall`. Si se define, se origina la llamada automáticamente cuando el registro SIP está activo (≈ 2 s). |
+| `callback` | `(event: MouseEvent) => void`         | No        | —         | Reservado. Actualmente no se utiliza en el componente. |
 
-## 🏗 **Construcción del Paquete**
 
-Para compilar el paquete, ejecutar:
+### Normalización de `domain`
+El componente acepta distintos formatos y construye automáticamente la URL WebSocket para SIP:
+- Si recibe solo host (por ejemplo, `pbx.midominio.com`), se asume `wss://pbx.midominio.com:8089/asterisk/ws`.
+- Si recibe `http://host[:puerto]` se usa `ws://host[:puerto]/asterisk/ws`.
+- Si recibe `https://host[:puerto]` se usa `wss://host[:puerto]/asterisk/ws`.
+- Si indica explícitamente un puerto, se respeta (de lo contrario, se usa 8089 por defecto para Asterisk).
 
-```sh
-npm run build
-```
+Además, el URI SIP se compone como `sip:<extension>@<host[:puerto]>`.
 
-Esto generará los archivos de distribución en `dist/` con los siguientes formatos:
 
-- **UMD** (`webphone.umd.js`) → Para navegadores y CDNs.
-- **ES Module** (`webphone.es.js`) → Para importación moderna.
-- **CommonJS** (`webphone.cjs.js`) → Para entornos Node.js.
+### Slots
+- `back-button`: slot para renderizar un control de navegación en la cabecera cuando `mode === 'webcall'`.
 
----
 
-## 🌎 **Uso en CDN**
+## Uso via CDN
 
-Para cargar la librería directamente en una página sin instalar NPM, usar un CDN como [jsDelivr](https://www.jsdelivr.com/):
+### ES Module (recomendado)
 
 ```html
 <script type="module">
-  import WebPhone from 'https://cdn.jsdelivr.net/npm/@tmsoft/webphone/dist/webphone.es.js'
+  import { createApp } from 'vue'
+  import WebphonePlugin from 'https://cdn.jsdelivr.net/npm/@tmsoft/webphone/dist/webphone.es.js'
+
+  const App = {
+    template: '<WebPhone extension="1001" password="supersecret" domain="sip.example.com" />'
+  }
+
+  createApp(App).use(WebphonePlugin).mount('#app')
 </script>
 ```
 
-Para UMD:
+### UMD
 
 ```html
+<!-- Vue 3 UMD -->
+<script src="https://unpkg.com/vue@3"></script>
+<!-- WebPhone UMD -->
 <script src="https://cdn.jsdelivr.net/npm/@tmsoft/webphone/dist/webphone.umd.js"></script>
+<script>
+  const app = Vue.createApp({
+    template: '<WebPhone extension="1001" password="supersecret" domain="sip.example.com" />'
+  })
+  // El paquete UMD expone 'WebPhone' como global; la función por defecto es el plugin
+  app.use(WebPhone.default)
+  app.mount('#app')
+</script>
 ```
 
----
+### Sin frameworks: Web Component (`<web-phone />`)
 
-## 📤 **Publicación en NPM**
+Para incrustar el softphone en una página HTML sin inicializar Vue ni otros frameworks, use el build UMD específico del Web Component:
 
-Para publicar una nueva versión del paquete en NPM:
-
-1️⃣ **Autenticarse en NPM**  
-Si no se ha iniciado sesión:
+```html
+<!-- Carga el Web Component listo para usar -->
+<script src="https://cdn.jsdelivr.net/npm/@tmsoft/webphone/dist/webphone-element.umd.js"></script>
 
-```sh
-npm login
+<!-- Úselo directamente en el DOM -->
+<web-phone extension="1001" password="supersecret" domain="sip.example.com" mode="webcall" to="099999999" image="https://example.com/logo.png"></web-phone>
 ```
 
-2️⃣ **Actualizar la versión en `package.json`**  
-Ejemplo: Incrementar la versión **`1.0.1` → `1.0.2`** en `package.json`:
-
-```json
-{
-  "name": "@tmsoft/webphone",
-  "version": "1.0.2"
-}
-```
+Notas:
+- Los atributos del elemento corresponden a las props del componente (`extension`, `password`, `domain`, `mode`, `image`, `to`).
+- El build del Web Component incluye internamente Vue, PrimeVue y estilos necesarios; no requiere inicialización adicional.
 
-3️⃣ **Construir el paquete**
 
-```sh
-npm run build
-```
+## Desarrollo
 
-4️⃣ **Publicar el paquete en NPM**
+Scripts principales:
 
 ```sh
-npm run publish:lib
-```
-
-Para publicar en un registro privado como Verdaccio:
-
+npm run dev        # entorno de desarrollo
+npm run build      # compila ESM/CJS y UMD
+npm run preview    # vista previa local de la build
+npm run test:unit  # pruebas unitarias (Vitest)
+npm run test:e2e   # pruebas E2E (Playwright)
+npm run lint       # lint con ESLint
+npm run format     # formateo con Prettier
+```
+
+La salida de distribución se genera en `dist/`:
+- `webphone.es.js` (ES Module)
+- `webphone.cjs.js` (CommonJS)
+- `webphone.umd.js` (UMD)
+- `index.d.ts` (tipos TypeScript)
+
+
+## Publicación en NPM
+
+Pasos sugeridos para publicar una versión:
+
+1. Autentíquese en NPM (una vez por entorno):
+   ```sh
+   npm login
+   ```
+2. Compile el paquete:
+   ```sh
+   npm run build
+   ```
+3. Publique con incremento de patch automático:
+   ```sh
+   npm run publish:lib
+   ```
+   Este script ejecuta `npm version patch` y `npm publish --access public`.
+
+Para publicar en un registro local (por ejemplo, Verdaccio):
 ```sh
 npm run publish:local
 ```
+
+
+## Licencia
+
+MIT.

package/dist/index.d.ts

@@ -1,274 +1,51 @@
-import { App } from 'vue';
-import { AuraBaseDesignTokens } from '@primeuix/themes/aura/base';
-import { ButtonProps } from 'primevue/button';
-import { ButtonSlots } from 'primevue/button';
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
-import { ComputedRef } from 'vue';
 import { DefineComponent } from 'vue';
-import { DefineComponent as DefineComponent_2 } from '@primevue/core';
-import { defineCustomElement } from 'vue';
-import { DialogProps } from 'primevue/dialog';
-import { DialogSlots } from 'primevue/dialog';
-import { ExtractPropTypes } from 'vue';
-import { FunctionalComponent } from 'vue';
-import { InputTextProps } from 'primevue/inputtext';
-import { InputTextSlots } from 'primevue/inputtext';
-import { Preset } from '@primeuix/themes/types';
-import { PropType } from 'vue';
 import { PublicProps } from 'vue';
-import { Ref } from 'vue';
-import { SelectChangeEvent } from 'primevue/select';
-import { SelectFilterEvent } from 'primevue/select';
-import { SelectMethods } from 'primevue/select';
-import { SelectProps } from 'primevue/select';
-import { SelectSlots } from 'primevue/select';
-import { SliderProps } from 'primevue/slider';
-import { SliderSlideEndEvent } from 'primevue/slider';
-import { SliderSlots } from 'primevue/slider';
-import { SVGAttributes } from 'vue';
-import { VueElementConstructor } from 'vue';
 
-export declare function configurePrimeVue(app: App): void;
-
-export declare function createWebphoneElement(): ReturnType<typeof defineCustomElement>;
-
-export declare function install(app: App, options?: {
-    configurePrimeVue?: boolean;
-}): void;
-
-export declare const primeVueConfig: {
-    theme: {
-        unstyled: boolean;
-        preset: Preset<AuraBaseDesignTokens>;
-        options: {
-            prefix: string;
-            darkModeSelector: string;
-            cssLayer: boolean;
-        };
+declare const __VLS_component: DefineComponent<WebphoneProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<WebphoneProps> & Readonly<{}>, {
+    mode: "webcall" | "call" | "video";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+    playerRef: HTMLAudioElement;
+    ringerRef: HTMLAudioElement;
+    backRingerRef: HTMLAudioElement;
+    viewerRef: HTMLVideoElement;
+    selfViewerRef: HTMLVideoElement;
+}, HTMLDivElement>;
+
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        'back-button'?(_: {}): any;
     };
+    refs: {
+        playerRef: HTMLAudioElement;
+        ringerRef: HTMLAudioElement;
+        backRingerRef: HTMLAudioElement;
+        viewerRef: HTMLVideoElement;
+        selfViewerRef: HTMLVideoElement;
+    };
+    rootEl: HTMLDivElement;
 };
 
-export declare function registerCustomElement(): VueElementConstructor<unknown>;
+declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 
-export declare const WebPhone: DefineComponent<ExtractPropTypes<    {
-extension: {
-type: StringConstructor;
-required: true;
-};
-password: {
-type: StringConstructor;
-required: true;
-};
-domain: {
-type: StringConstructor;
-required: true;
-};
-mode: {
-type: StringConstructor;
-default: string;
-validator: (value: string) => boolean;
-};
-image: {
-type: StringConstructor;
-required: false;
-};
-to: {
-type: StringConstructor;
-required: false;
-};
-callback: {
-type: PropType<(event: MouseEvent) => void>;
-required: false;
-};
-}>, {
-setCallVolume: (value: number | number[]) => void;
-validateKeydown: (event: KeyboardEvent) => void;
-setNotificationVolume: (value: number | number[]) => void;
-dtmfKeys: string[];
-canCall: ComputedRef<boolean | "" | undefined>;
-handleDTMF: (digit: string) => void;
-statusClass: ComputedRef<"text-[#03ac7e]" | "text-blue-400" | "text-yellow-400" | "text-red-500">;
-showNumpad: Ref<boolean, boolean>;
-toggleNumpad: () => void;
-audioVolumeRef: Ref<any, any>;
-audioDevicesRef: Ref<any, any>;
-toggleAudioVolume: (event: MouseEvent) => void;
-toggleAudioDevices: (event: MouseEvent) => void;
-deleteLastDigit: () => void;
-isWebcall: ComputedRef<boolean>;
-isCall: ComputedRef<boolean>;
-isVideo: ComputedRef<boolean>;
-finalPhoneNumber: ComputedRef<string | undefined>;
-showSettings: Ref<boolean, boolean>;
-microphonePermission: Ref<"granted" | "denied" | "prompt", "granted" | "denied" | "prompt">;
-isRequestingPermission: Ref<boolean, boolean>;
-requestMicrophonePermission: () => Promise<boolean>;
-playerRef: Ref<HTMLAudioElement | null, HTMLAudioElement | null>;
-ringerRef: Ref<HTMLAudioElement | null, HTMLAudioElement | null>;
-backRingerRef: Ref<HTMLAudioElement | null, HTMLAudioElement | null>;
-viewerRef: Ref<HTMLVideoElement | null, HTMLVideoElement | null>;
-selfViewerRef: Ref<HTMLVideoElement | null, HTMLVideoElement | null>;
-startSIP: () => void;
-stopSIP: () => void;
-makeCall: (to: string, hasVideo: boolean) => void;
-answerCall: () => void | undefined;
-endCall: () => void | undefined;
-toggleMute: () => void;
-microphones: Ref<    {
-readonly deviceId: string;
-readonly groupId: string;
-readonly kind: MediaDeviceKind;
-readonly label: string;
-toJSON: () => any;
-}[], MediaDeviceInfo[] | {
-readonly deviceId: string;
-readonly groupId: string;
-readonly kind: MediaDeviceKind;
-readonly label: string;
-toJSON: () => any;
-}[]>;
-speakers: Ref<    {
-readonly deviceId: string;
-readonly groupId: string;
-readonly kind: MediaDeviceKind;
-readonly label: string;
-toJSON: () => any;
-}[], MediaDeviceInfo[] | {
-readonly deviceId: string;
-readonly groupId: string;
-readonly kind: MediaDeviceKind;
-readonly label: string;
-toJSON: () => any;
-}[]>;
-selectedMicId: Ref<string | null, string | null>;
-selectedSpeakerId: Ref<string | null, string | null>;
-isMuted: Ref<boolean, boolean>;
-activeCall: Ref<boolean, boolean>;
-isSIPActive: Ref<boolean, boolean>;
-canMute: ComputedRef<boolean>;
-canAnswer: ComputedRef<boolean>;
-canHangup: ComputedRef<boolean>;
-canStartSIP: ComputedRef<boolean>;
-canStopSIP: ComputedRef<boolean>;
-changeMicrophone: (deviceId: string) => Promise<void>;
-changeSpeaker: (deviceId: string) => Promise<void>;
-callVolume: Ref<number, number>;
-notificationVolume: Ref<number, number>;
-setVolume: (type: "call" | "notification", volume: number) => void;
-isIncomingCall: Ref<boolean, boolean>;
-sendDTMF: (digit: string) => void;
-resetStates: () => void;
-phoneNumber: Ref<string, string>;
-callerId: Ref<string | null, string | null>;
-isRinging: Ref<boolean, boolean>;
-statusMessage: ComputedRef<string>;
-formattedCallDuration: ComputedRef<string>;
-callDuration: Ref<number, number>;
-isOutgoingCall: Ref<boolean, boolean>;
-checkMicrophonePermission: () => Promise<"granted" | "denied" | "prompt">;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
-extension: {
-type: StringConstructor;
-required: true;
-};
-password: {
-type: StringConstructor;
-required: true;
-};
-domain: {
-type: StringConstructor;
-required: true;
-};
-mode: {
-type: StringConstructor;
-default: string;
-validator: (value: string) => boolean;
-};
-image: {
-type: StringConstructor;
-required: false;
-};
-to: {
-type: StringConstructor;
-required: false;
-};
-callback: {
-type: PropType<(event: MouseEvent) => void>;
-required: false;
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
 };
-}>> & Readonly<{}>, {
-mode: string;
-}, {}, {
-PrimeButton: DefineComponent_2<ButtonProps, ButtonSlots, (e: string, ...args: any[]) => void>;
-PrimeInputText: DefineComponent_2<InputTextProps, InputTextSlots, ((e: "update:modelValue", value: string | undefined) => void) & ((e: "value-change", value: string | undefined) => void)>;
-WebphoneSettings: DefineComponent<ExtractPropTypes<    {
-callVolume: NumberConstructor;
-notificationVolume: NumberConstructor;
-selectedMicId: StringConstructor;
-selectedSpeakerId: StringConstructor;
-microphones: PropType<Array<{
-label: string;
-deviceId: string;
-}>>;
-speakers: PropType<Array<{
-label: string;
-deviceId: string;
-}>>;
-}>, {
-showSettings: Ref<boolean, boolean>;
-openDialog: () => void;
-updateCallVolume: (value: number | number[]) => void;
-updateNotificationVolume: (value: number | number[]) => void;
-updateSelectedMic: (value: string) => void;
-updateSelectedSpeaker: (value: string) => void;
-selectedMic: ComputedRef<    {
-label: string;
-deviceId: string;
-} | null>;
-selectedSpeaker: ComputedRef<    {
-label: string;
-deviceId: string;
-} | null>;
-version: string;
-packageName: string;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("update:callVolume" | "update:notificationVolume" | "update:selectedMicId" | "update:selectedSpeakerId")[], "update:callVolume" | "update:notificationVolume" | "update:selectedMicId" | "update:selectedSpeakerId", PublicProps, Readonly<ExtractPropTypes<    {
-callVolume: NumberConstructor;
-notificationVolume: NumberConstructor;
-selectedMicId: StringConstructor;
-selectedSpeakerId: StringConstructor;
-microphones: PropType<Array<{
-label: string;
-deviceId: string;
-}>>;
-speakers: PropType<Array<{
-label: string;
-deviceId: string;
-}>>;
-}>> & Readonly<{
-"onUpdate:callVolume"?: ((...args: any[]) => any) | undefined;
-"onUpdate:notificationVolume"?: ((...args: any[]) => any) | undefined;
-"onUpdate:selectedMicId"?: ((...args: any[]) => any) | undefined;
-"onUpdate:selectedSpeakerId"?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {
-PrimeButton: DefineComponent_2<ButtonProps, ButtonSlots, (e: string, ...args: any[]) => void>;
-PrimeDialog: DefineComponent_2<DialogProps, DialogSlots, ((e: "dragend", event: Event) => void) & ((e: "dragstart", event: Event) => void) & ((e: "update:visible", value: boolean) => void) & ((e: "hide") => void) & ((e: "after-hide") => void) & ((e: "show") => void) & ((e: "maximize", event: Event) => void) & ((e: "unmaximize", event: Event) => void)>;
-PrimeSelect: DefineComponent_2<SelectProps, SelectSlots, ((e: "filter", event: SelectFilterEvent) => void) & ((e: "blur", event: Event) => void) & ((e: "change", event: SelectChangeEvent) => void) & ((e: "focus", event: Event) => void) & ((e: "hide") => void) & ((e: "show") => void) & ((e: "update:modelValue", value: any) => void) & ((e: "value-change", value: any) => void) & ((e: "before-show") => void) & ((e: "before-hide") => void), SelectMethods>;
-Slider: DefineComponent_2<SliderProps, SliderSlots, ((e: "change", value: number) => void) & ((e: "update:modelValue", value: number | number[]) => void) & ((e: "value-change", value: number | number[]) => void) & ((e: "slideend", event: SliderSlideEndEvent) => void)>;
-SettingsIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
-}, {}, string, ComponentProvideOptions, true, {}, any>;
-LogoIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
-ExtensionIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
-NumpadIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
-CallIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
-HangupIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
-MicrophoneIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
-NumpadOffIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
-MicrophoneOffIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
-KeyboardDeleteIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
-NebulaIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
-}, {}, string, ComponentProvideOptions, true, {}, any>;
 
-export declare const WebphoneElement: ReturnType<typeof defineCustomElement>;
+export declare const WebPhone: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+
+declare interface WebphoneProps {
+    extension: string;
+    password: string;
+    domain: string;
+    mode: 'webcall' | 'call' | 'video';
+    image?: string;
+    to?: string;
+    callback?: (event: MouseEvent) => void;
+}
 
 export { }