@tmsoft/webphone 3.0.22 → 3.0.24

package/dist/webphone.es.js

@@ -8497,7 +8497,10 @@ const createSipService = (e, t = {}) => {
 				n.value = new UserAgent({
 					uri: a,
 					logLevel: "error",
-					transportOptions: { server: t.transportOptions.server },
+					transportOptions: {
+						server: t.transportOptions.server,
+						keepAliveInterval: t.transportOptions.keepAliveInterval ?? 30
+					},
 					authorizationUsername: t.authorizationUsername,
 					authorizationPassword: t.authorizationPassword,
 					reconnectionDelay: 5,
@@ -8753,14 +8756,20 @@ const createSipService = (e, t = {}) => {
 			B(o, e.channels.value.find((e) => e.id === t)), $(o);
 		} else tm();
 	}, Xp = (t) => {
+		if (!/^[0-9*#]$/.test(t)) return;
 		let n = a.value.get(e.activeChannelId.value);
 		if (n?.state !== SessionState.Established) return;
-		let i = { requestOptions: { body: {
+		let i = n.sessionDescriptionHandler?.peerConnection?.getSenders().find((e) => e.track?.kind === "audio")?.dtmf;
+		if (i?.canInsertDTMF) {
+			i.insertDTMF(t, 160, 70);
+			return;
+		}
+		let o = { requestOptions: { body: {
 			content: `Signal=${t}\r\nDuration=160`,
 			contentType: "application/dtmf-relay",
 			contentDisposition: "signal"
 		} } };
-		n.info(i);
+		n.info(o);
 	}, Zp = (t, n) => {
 		let i = e.channels.value.find((e) => e.id === t);
 		!i || i.status !== "connected" || ($(n), B(n, i), Wp(n), o.play().catch(() => {}));
@@ -15409,6 +15418,7 @@ var _hoisted_1$17 = {
 			Object,
 			Array
 		] },
+		type: { default: "button" },
 		asChild: { type: Boolean },
 		as: { default: "button" }
 	},
@@ -15418,6 +15428,7 @@ var _hoisted_1$17 = {
 			"data-slot": "button",
 			as: e.as,
 			"as-child": e.asChild,
+			type: e.as === "button" ? e.type : void 0,
 			class: normalizeClass(unref(cn)(unref(buttonVariants)({
 				variant: e.variant,
 				size: e.size
@@ -15428,6 +15439,7 @@ var _hoisted_1$17 = {
 		}, 8, [
 			"as",
 			"as-child",
+			"type",
 			"class"
 		]));
 	}
@@ -15473,10 +15485,11 @@ var _hoisted_1$15 = { class: "webphone-keypad wp:grid wp:grid-cols-3 wp:gap-y-3
 			"0",
 			"#"
 		], s = (e) => {
-			a(e), t.callStatus === "connected" ? i(e) : t.appendKeypad(e);
+			a(e), t.callStatus === "connected" && i(e), t.appendKeypad(e);
 		};
 		return (e, t) => (openBlock(), createElementBlock("div", _hoisted_1$15, [(openBlock(), createElementBlock(Fragment, null, renderList(o, (e) => createVNode(unref(Button_default), {
 			key: e,
+			type: "button",
 			onClick: (t) => s(e),
 			variant: "ghost",
 			size: "icon",
@@ -15871,63 +15884,78 @@ var IconDelete_default = { render: render$1 }, _hoisted_1$7 = ["data-call-status
 		"cancelTransfer"
 	],
 	setup(e, { emit: t }) {
-		let i = inject("webphone"), { makeCall: a, hangupCall: o, answerCall: p, toggleMute: _, toggleHold: v } = inject("sip"), y = e, b = t, x = computed(() => !!i.transferInProgress), S = computed(() => y.destination || i.keypadValue || i.lastDialedNumber || ""), T = computed(() => !!y.destination || /^[+]?[0-9*#]+$/.test(i.keypadValue)), E = computed(() => T.value || !!i.lastDialedNumber), D = computed(() => !y.isVideo || !T.value ? !1 : S.value ? /^[0-9*#]{1,5}$/.test(S.value) : !0), O = async (e) => {
+		let i = inject("webphone"), { makeCall: a, hangupCall: o, answerCall: p, toggleMute: _, toggleHold: v, sendDTMF: y } = inject("sip"), b = /^[0-9*#]+$/, x = (e) => {
+			if (b.test(e)) {
+				for (let t of e) y(t);
+				for (let t of e) i.appendKeypad(t);
+			}
+		}, S = (e) => {
+			e.ctrlKey || e.metaKey || e.altKey || e.key.length !== 1 || (e.preventDefault(), e.stopPropagation(), x(e.key));
+		}, T = (e) => {
+			e.data && (e.preventDefault(), e.stopPropagation(), x(e.data));
+		}, E = (e) => {
+			e.preventDefault(), e.stopPropagation(), x(e.clipboardData?.getData("text").replace(/\s/g, "") || "");
+		};
+		watch(() => i.callStatus, (e, t) => {
+			e === "connected" && t !== "connected" && i.clearKeypad();
+		});
+		let D = e, O = t, k = computed(() => !!i.transferInProgress), j = computed(() => D.destination || i.keypadValue || i.lastDialedNumber || ""), M = computed(() => !!D.destination || /^[+]?[0-9*#]+$/.test(i.keypadValue)), N = computed(() => M.value || !!i.lastDialedNumber), P = computed(() => !D.isVideo || !M.value ? !1 : j.value ? /^[0-9*#]{1,5}$/.test(j.value) : !0), F = async (e) => {
 			try {
-				y.destination ? await a(y.destination, e) : i.keypadValue ? await a(i.keypadValue, e) : i.lastDialedNumber && (i.keypadValue = i.lastDialedNumber);
+				D.destination ? await a(D.destination, e) : i.keypadValue ? await a(i.keypadValue, e) : i.lastDialedNumber && (i.keypadValue = i.lastDialedNumber);
 			} catch (t) {
 				if (console.error("Error initiating call:", t), e) {
 					let e = "No se pudo acceder a la cámara.", n = t instanceof Error ? t.name : String(t);
-					n === "NotReadableError" ? e = "La cámara parece estar en uso por otra aplicación (ej: Zoom, Meet) o no se puede acceder al hardware." : n === "NotAllowedError" || n === "PermissionDeniedError" ? e = "Permiso de cámara denegado. Por favor, permita el acceso a la cámara." : n === "NotFoundError" ? e = "No se detectó ninguna cámara en el sistema." : e += " " + (t instanceof Error ? t.message : String(t)), confirm(`${e}\n\n¿Desea realizar la llamada solo con AUDIO?`) && O(!1);
+					n === "NotReadableError" ? e = "La cámara parece estar en uso por otra aplicación (ej: Zoom, Meet) o no se puede acceder al hardware." : n === "NotAllowedError" || n === "PermissionDeniedError" ? e = "Permiso de cámara denegado. Por favor, permita el acceso a la cámara." : n === "NotFoundError" ? e = "No se detectó ninguna cámara en el sistema." : e += " " + (t instanceof Error ? t.message : String(t)), confirm(`${e}\n\n¿Desea realizar la llamada solo con AUDIO?`) && F(!1);
 				} else alert("Error al iniciar la llamada: " + (t instanceof Error ? t.message : String(t)));
 			}
-		}, k = (e = !1) => {
-			if (y.onAnswer) {
-				y.onAnswer(e);
+		}, I = (e = !1) => {
+			if (D.onAnswer) {
+				D.onAnswer(e);
 				return;
 			}
 			p(e);
-		}, j = () => {
-			if (y.onHangup) {
-				y.onHangup();
+		}, L = () => {
+			if (D.onHangup) {
+				D.onHangup();
 				return;
 			}
 			o();
-		}, M = () => {
-			if (y.onReject) {
-				y.onReject();
+		}, z = () => {
+			if (D.onReject) {
+				D.onReject();
 				return;
 			}
 			o();
-		}, N = computed(() => {
+		}, B = computed(() => {
 			let e = {};
 			return i.channels.forEach((t) => {
 				let n = t.status === "connected" || t.status === "calling" || t.status === "incoming";
 				e[t.id] = n ? "wp:text-[var(--color-red)]" : "wp:text-[var(--color-avaible)]";
 			}), e;
-		}), P = computed(() => N.value[i.activeChannelId] ?? "wp:text-[var(--p-primary-color)]");
+		}), Up = computed(() => B.value[i.activeChannelId] ?? "wp:text-[var(--p-primary-color)]");
 		return (e, t) => (openBlock(), createElementBlock("div", {
 			class: "webphone-actions wp:flex wp:justify-center wp:items-center wp:gap-2 wp:px-4 wp:relative wp:mb-4",
 			"data-call-status": unref(i).callStatus
 		}, [
-			unref(i).callStatus === "idle" ? (openBlock(), createElementBlock("div", _hoisted_2$5, [E.value ? (openBlock(), createBlock(unref(Button_default), {
+			unref(i).callStatus === "idle" ? (openBlock(), createElementBlock("div", _hoisted_2$5, [N.value ? (openBlock(), createBlock(unref(Button_default), {
 				key: 0,
 				variant: "default",
 				size: "icon",
-				onClick: t[0] ||= (e) => O(!1),
+				onClick: t[0] ||= (e) => F(!1),
 				"aria-label": "Audio Call",
 				class: "webphone-actions__button webphone-actions__button--call wp:w-full wp:px-4 wp:border-0 wp:bg-gradient-to-r wp:from-[color:var(--p-primary-color)]/80 wp:to-[color:var(--p-primary-color)]/100 wp:hover:from-[color:var(--p-primary-color)]/75 wp:hover:to-[color:var(--p-primary-color)]"
 			}, {
-				default: withCtx(() => [createVNode(unref(phone_call_icon_default), { class: "webphone-actions__button-icon wp:size-7 wp:text-white" }), t[13] ||= createElementVNode("span", { class: "webphone-actions__button-label wp:w-full wp:text-white wp:text-xs" }, "Llamar", -1)]),
+				default: withCtx(() => [createVNode(unref(phone_call_icon_default), { class: "webphone-actions__button-icon wp:size-7 wp:text-white" }), t[12] ||= createElementVNode("span", { class: "webphone-actions__button-label wp:w-full wp:text-white wp:text-xs" }, "Llamar", -1)]),
 				_: 1
-			})) : createCommentVNode("", !0), D.value ? (openBlock(), createBlock(unref(Button_default), {
+			})) : createCommentVNode("", !0), P.value ? (openBlock(), createBlock(unref(Button_default), {
 				key: 1,
 				variant: "outline",
 				size: "icon",
-				onClick: t[1] ||= (e) => O(!0),
+				onClick: t[1] ||= (e) => F(!0),
 				"aria-label": "Video Call",
 				class: "webphone-actions__button webphone-actions__button--video wp:w-full wp:px-4 wp:bg-transparent wp:border wp:border-primary wp:hover:bg-[var(--p-primary-color)]/8"
 			}, {
-				default: withCtx(() => [createVNode(unref(videocall_icon_default), { class: normalizeClass(["webphone-actions__button-icon wp:size-6 wp:text-primary wp:dark:text-white", P.value]) }, null, 8, ["class"]), t[14] ||= createElementVNode("span", { class: "webphone-actions__button-label wp:w-full wp:text-primary wp:text-xs wp:dark:text-white" }, " Video llamada a extensiones ", -1)]),
+				default: withCtx(() => [createVNode(unref(videocall_icon_default), { class: normalizeClass(["webphone-actions__button-icon wp:size-6 wp:text-primary wp:dark:text-white", Up.value]) }, null, 8, ["class"]), t[13] ||= createElementVNode("span", { class: "webphone-actions__button-label wp:w-full wp:text-primary wp:text-xs wp:dark:text-white" }, " Video llamada a extensiones ", -1)]),
 				_: 1
 			})) : createCommentVNode("", !0)])) : createCommentVNode("", !0),
 			unref(i).callStatus === "incoming" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
@@ -15935,7 +15963,7 @@ var IconDelete_default = { render: render$1 }, _hoisted_1$7 = ["data-call-status
 					key: 0,
 					variant: "default",
 					size: "icon",
-					onClick: t[2] ||= (e) => k(!0),
+					onClick: t[2] ||= (e) => I(!0),
 					class: "webphone-actions__button webphone-actions__button--answer-video wp:animate-pulse wp:w-12 wp:h-12 wp:rounded-full wp:bg-transparent wp:hover:bg-[var(--p-primary-color)]/10",
 					"aria-label": "Answer Video"
 				}, {
@@ -15945,7 +15973,7 @@ var IconDelete_default = { render: render$1 }, _hoisted_1$7 = ["data-call-status
 				createVNode(unref(Button_default), {
 					variant: "default",
 					size: "icon",
-					onClick: t[3] ||= (e) => k(!1),
+					onClick: t[3] ||= (e) => I(!1),
 					class: "webphone-actions__button webphone-actions__button--answer wp:animate-pulse wp:w-12 wp:h-12 wp:rounded-full wp:border-0 wp:bg-status-available wp:hover:bg-status-available/90",
 					"aria-label": "Answer"
 				}, {
@@ -15955,7 +15983,7 @@ var IconDelete_default = { render: render$1 }, _hoisted_1$7 = ["data-call-status
 				createVNode(unref(Button_default), {
 					variant: "destructive",
 					size: "icon",
-					onClick: M,
+					onClick: z,
 					"aria-label": "Reject",
 					class: "webphone-actions__button webphone-actions__button--hangup webphone-actions__button--reject wp:w-12 wp:h-12 wp:rounded-full wp:border-0 wp:bg-gradient-to-r wp:from-destructive/60 wp:to-destructive/90 wp:hover:from-destructive/70 wp:hover:to-destructive/95"
 				}, {
@@ -15997,11 +16025,11 @@ var IconDelete_default = { render: render$1 }, _hoisted_1$7 = ["data-call-status
 						}))]),
 						_: 1
 					}, 8, ["variant", "onClick"]),
-					x.value ? createCommentVNode("", !0) : (openBlock(), createBlock(unref(Button_default), {
+					k.value ? createCommentVNode("", !0) : (openBlock(), createBlock(unref(Button_default), {
 						key: 0,
 						variant: "secondary",
 						size: "icon",
-						onClick: t[4] ||= (e) => b("transfer"),
+						onClick: t[4] ||= (e) => O("transfer"),
 						"aria-label": "Transfer",
 						class: "webphone-actions__button webphone-actions__button--transfer wp:w-12 wp:h-12 wp:rounded-full wp:bg-primary/10 wp:hover:bg-[var(--p-primary-color)]/20"
 					}, {
@@ -16027,14 +16055,20 @@ var IconDelete_default = { render: render$1 }, _hoisted_1$7 = ["data-call-status
 						_: 1
 					}, 8, ["aria-label"]),
 					createVNode(unref(Input_default), {
-						modelValue: unref(i).keypadValue,
-						"onUpdate:modelValue": t[6] ||= (e) => unref(i).keypadValue = e,
-						placeholder: "Ingresa el numero a llamar...",
+						"model-value": unref(i).keypadValue,
+						type: "text",
+						inputmode: "tel",
+						pattern: "[0-9*#]*",
+						placeholder: "Marcar opción (0-9, * o #)...",
+						"aria-label": "Tonos de marcación",
+						onKeydown: S,
+						onBeforeinput: T,
+						onPaste: E,
 						class: "p-input webphone-actions__input wp:h-10 wp:text-center wp:select-text wp:px-14 wp:text-base hover:wp:border-[var(--p-primary-color)] wp:dark:hover:bg-neutral-900 focus-visible:wp:border-[var(--p-primary-color)] focus-visible:wp:ring-2 montserrat"
-					}, null, 8, ["modelValue"]),
+					}, null, 8, ["model-value"]),
 					createElementVNode("div", {
 						class: "webphone-actions__backspace wp:absolute wp:right-1 wp:top-1/2 wp:-translate-y-1/2 wp:z-10 wp:flex wp:h-8 wp:w-8 wp:cursor-pointer wp:items-center wp:justify-center wp:hover:bg-accent wp:rounded-full",
-						onClick: t[7] ||= withModifiers((e) => unref(i).backspaceKeypad(), ["stop"])
+						onClick: t[6] ||= withModifiers((e) => unref(i).backspaceKeypad(), ["stop"])
 					}, [createVNode(unref(IconDelete_default), { class: "webphone-actions__backspace-icon wp:w-[16px] wp:h-[16px] wp:text-black wp:hover:text-status-disconnected wp:dark:text-neutral-500 wp:dark:hover:text-status-disconnected wp:transition-colors" })])
 				]),
 				createElementVNode("div", {
@@ -16043,11 +16077,11 @@ var IconDelete_default = { render: render$1 }, _hoisted_1$7 = ["data-call-status
 				}, [createVNode(KeyPad_default)], 10, _hoisted_6$5),
 				createVNode(unref(Button_default), {
 					size: "icon",
-					onClick: j,
+					onClick: L,
 					"aria-label": "Hangup",
 					class: "webphone-actions__button webphone-actions__button--hangup wp:w-full wp:px-4 wp:border-0 wp:bg-gradient-to-r wp:from-destructive/60 wp:to-destructive/90 wp:hover:from-destructive/70 wp:hover:to-destructive/95"
 				}, {
-					default: withCtx(() => [createVNode(unref(phone_off_icon_default), { class: "webphone-actions__button-icon wp:size-6 wp:text-white" }), t[15] ||= createElementVNode("span", { class: "webphone-actions__button-label wp:w-full wp:text-white wp:text-xs" }, "Colgar", -1)]),
+					default: withCtx(() => [createVNode(unref(phone_off_icon_default), { class: "webphone-actions__button-icon wp:size-6 wp:text-white" }), t[14] ||= createElementVNode("span", { class: "webphone-actions__button-label wp:w-full wp:text-white wp:text-xs" }, "Colgar", -1)]),
 					_: 1
 				})
 			])) : createCommentVNode("", !0),
@@ -16056,7 +16090,7 @@ var IconDelete_default = { render: render$1 }, _hoisted_1$7 = ["data-call-status
 					createVNode(unref(Button_default), {
 						variant: "ghost",
 						size: "icon",
-						onClick: t[8] ||= (e) => unref(i).toggleKeypad(),
+						onClick: t[7] ||= (e) => unref(i).toggleKeypad(),
 						"aria-label": unref(i).isKeypadVisible ? "Ocultar teclado" : "Mostrar teclado",
 						class: "webphone-actions__keypad-toggle wp:absolute wp:left-0.5 wp:top-1/2 wp:-translate-y-1/2 wp:z-10 wp:h-9 wp:w-9 wp:rounded-full wp:text-[var(--p-primary-color)] wp:hover:opacity-80"
 					}, {
@@ -16071,13 +16105,13 @@ var IconDelete_default = { render: render$1 }, _hoisted_1$7 = ["data-call-status
 					}, 8, ["aria-label"]),
 					createVNode(unref(Input_default), {
 						modelValue: unref(i).keypadValue,
-						"onUpdate:modelValue": t[9] ||= (e) => unref(i).keypadValue = e,
+						"onUpdate:modelValue": t[8] ||= (e) => unref(i).keypadValue = e,
 						placeholder: "Ingresa el numero a llamar...",
 						class: "p-input webphone-actions__input wp:h-10 wp:text-center wp:select-text wp:px-14 wp:text-base hover:wp:border-[var(--p-primary-color)] wp:dark:hover:bg-neutral-900 focus-visible:wp:border-[var(--p-primary-color)] focus-visible:wp:ring-2 montserrat"
 					}, null, 8, ["modelValue"]),
 					createElementVNode("div", {
 						class: "webphone-actions__backspace wp:absolute wp:right-1 wp:top-1/2 wp:-translate-y-1/2 wp:z-10 wp:flex wp:h-8 wp:w-8 wp:cursor-pointer wp:items-center wp:justify-center wp:hover:bg-accent wp:rounded-full",
-						onClick: t[10] ||= withModifiers((e) => unref(i).backspaceKeypad(), ["stop"])
+						onClick: t[9] ||= withModifiers((e) => unref(i).backspaceKeypad(), ["stop"])
 					}, [createVNode(unref(IconDelete_default), { class: "webphone-actions__backspace-icon wp:w-[16px] wp:h-[16px] wp:text-black wp:hover:text-status-disconnected wp:dark:text-neutral-500 wp:dark:hover:text-status-disconnected wp:transition-colors" })])
 				]),
 				createElementVNode("div", {
@@ -16087,29 +16121,29 @@ var IconDelete_default = { render: render$1 }, _hoisted_1$7 = ["data-call-status
 				createVNode(unref(Button_default), {
 					variant: "destructive",
 					size: "lg",
-					onClick: j,
+					onClick: L,
 					"aria-label": "Cancel",
 					class: "webphone-actions__button webphone-actions__button--hangup webphone-actions__button--cancel wp:w-full wp:px-4 wp:border-0 wp:bg-gradient-to-r wp:from-destructive/60 wp:to-destructive/90 wp:hover:from-destructive/70 wp:hover:to-destructive/95"
 				}, {
-					default: withCtx(() => [createVNode(unref(phone_off_icon_default), { class: "webphone-actions__button-icon wp:size-6 wp:text-white" }), t[16] ||= createElementVNode("span", { class: "webphone-actions__button-label wp:w-full wp:text-white" }, "Colgar", -1)]),
+					default: withCtx(() => [createVNode(unref(phone_off_icon_default), { class: "webphone-actions__button-icon wp:size-6 wp:text-white" }), t[15] ||= createElementVNode("span", { class: "webphone-actions__button-label wp:w-full wp:text-white" }, "Colgar", -1)]),
 					_: 1
 				})
 			])) : createCommentVNode("", !0),
-			x.value && unref(i).callStatus === "connected" ? (openBlock(), createElementBlock("div", _hoisted_10$4, [createVNode(unref(Button_default), {
+			k.value && unref(i).callStatus === "connected" ? (openBlock(), createElementBlock("div", _hoisted_10$4, [createVNode(unref(Button_default), {
 				variant: "default",
 				size: "sm",
-				onClick: t[11] ||= (e) => b("completeTransfer"),
+				onClick: t[10] ||= (e) => O("completeTransfer"),
 				class: "webphone-actions__button webphone-actions__button--complete-transfer wp:gap-2 wp:bg-status-available wp:hover:bg-status-available/90 wp:text-white"
 			}, {
-				default: withCtx(() => [createVNode(unref(Check), { class: "wp:w-4 wp:h-4" }), t[17] ||= createTextVNode(" Completar Transferencia ", -1)]),
+				default: withCtx(() => [createVNode(unref(Check), { class: "wp:w-4 wp:h-4" }), t[16] ||= createTextVNode(" Completar Transferencia ", -1)]),
 				_: 1
 			}), createVNode(unref(Button_default), {
 				variant: "destructive",
 				size: "sm",
-				onClick: t[12] ||= (e) => b("cancelTransfer"),
+				onClick: t[11] ||= (e) => O("cancelTransfer"),
 				class: "webphone-actions__button webphone-actions__button--cancel-transfer wp:gap-2"
 			}, {
-				default: withCtx(() => [createVNode(unref(X), { class: "wp:w-4 wp:h-4" }), t[18] ||= createTextVNode(" Cancelar ", -1)]),
+				default: withCtx(() => [createVNode(unref(X), { class: "wp:w-4 wp:h-4" }), t[17] ||= createTextVNode(" Cancelar ", -1)]),
 				_: 1
 			})])) : createCommentVNode("", !0)
 		], 8, _hoisted_1$7));