@16x/webphone-sdk 3.0.1 → 3.1.0

package/dist/ui/index.js

@@ -654,74 +654,82 @@ var B = ":root,:host{--ccbar-color-surface:#fff;--ccbar-color-surface-muted:#f1f
 		];
 	}
 	#e;
-	#t = [];
-	#n = "idle";
-	#r = "unknown";
-	#i;
-	#a = /* @__PURE__ */ new Set();
-	#o = "";
+	#t = !1;
+	#n = [];
+	#r = "idle";
+	#i = "unknown";
+	#a;
+	#o = /* @__PURE__ */ new Set();
 	#s = "";
-	#c = "offline";
-	#l = !1;
+	#c = "";
+	#l = "offline";
 	#u = !1;
-	#d = Promise.resolve();
-	#f;
-	#p = !1;
+	#d = !1;
+	#f = Promise.resolve();
+	#p;
 	#m = !1;
-	#h;
+	#h = !1;
 	#g;
 	#_;
 	#v;
 	#y;
+	#b;
 	get messageResolver() {
-		return this.#v;
+		return this.#y;
 	}
 	set messageResolver(e) {
-		this.#v = e, this.shadowRoot !== null && this.render();
+		this.#y = e, this.shadowRoot !== null && this.render();
 	}
 	get client() {
 		return this.#e;
 	}
 	set client(e) {
-		this.#D(), this.#e = e, this.#E(), this.render();
+		this.#O(), this.#e = e, this.#D(), this.render();
+	}
+	get ownsClient() {
+		return this.#t;
+	}
+	set ownsClient(e) {
+		this.#t = e === !0;
 	}
 	connectedCallback() {
-		this.#B(), this.#z(), this.render();
+		this.#V(), this.#B(), this.render();
 	}
 	disconnectedCallback() {
-		this.#D(), this.#W(), this.#y?.(), this.#y = void 0;
+		let e = this.#e, t = this.#t;
+		this.#O(), this.#G(), this.#b?.(), this.#b = void 0, t && (this.#e = void 0, e?.dispose());
 	}
 	attributeChangedCallback(e) {
-		this.#B(), e === "theme" && this.#z(), this.shadowRoot !== null && this.render();
+		this.#V(), e === "theme" && this.#B(), this.shadowRoot !== null && this.render();
 	}
 	render() {
-		let e = this.#O();
-		e !== void 0 && (e.innerHTML = `<style>${B}</style>`, e.append(this.#x(this.#b())));
+		let e = this.#k();
+		e !== void 0 && (e.innerHTML = `<style>${B}</style>`, e.append(this.#S(this.#x())));
 	}
-	#b() {
+	#x() {
 		let e = this.#e?.getCalls?.().map((e) => ({
 			id: e.id,
 			state: e.state,
 			destination: e.destination,
-			direction: this.#a.has(e.id) ? "inbound" : "outbound"
+			direction: this.#o.has(e.id) ? "inbound" : "outbound"
 		})) ?? [];
 		return z({
-			connectionState: this.#n,
-			permission: this.#r,
+			connectionState: this.#r,
+			permission: this.#i,
 			calls: e,
-			error: this.#i
+			error: this.#a
 		});
 	}
-	#x(e) {
-		let t = this.#R(), n = this.#g ?? this.#h ?? K(e, t), r = {
+	#S(e) {
+		let t = this.#z(), n = this.#_ ?? this.#g ?? K(e, t), r = {
 			...t,
 			status: n
-		}, i = this.#S(e, r, n);
-		return i.setAttribute("data-view", this.#T() && !this.#p ? "setup" : e.kind), i.hasAttribute("data-layout") || i.setAttribute("data-layout", this.#T() ? "mobile" : "panel"), i;
+		}, i = this.#C(e, r, n);
+		return i.setAttribute("data-view", this.#E() && !this.#m ? "setup" : e.kind), i.hasAttribute("data-layout") || i.setAttribute("data-layout", this.#E() ? "mobile" : "panel"), i;
 	}
-	#S(e, t, n) {
-		if (this.#T() && !this.#p) return N({
-			enabling: this.#m,
+	#C(e, t, n) {
+		if (this.#E() && !this.#m) return N({
+			enabling: this.#h,
 			status: n,
 			enablePhone: t.enablePhone
 		});
@@ -732,12 +740,12 @@ var B = ":root,:host{--ccbar-color-surface:#fff;--ccbar-color-surface-muted:#f1f
 				view: e,
 				messages: t
 			});
-			case "incoming": return this.#T() ? P({
+			case "incoming": return this.#E() ? P({
 				view: { kind: "ready" },
 				messages: t,
-				destination: this.#o,
-				muted: this.#l,
-				canDial: s(this.#o, this.#r, this.#n),
+				destination: this.#s,
+				muted: this.#u,
+				canDial: s(this.#s, this.#i, this.#r),
 				showOutputDevice: this.#e?.media.supportsOutputSelection() === !0
 			}) : j({
 				view: e,
@@ -749,121 +757,121 @@ var B = ":root,:host{--ccbar-color-surface:#fff;--ccbar-color-surface-muted:#f1f
 			case "ready":
 			case "active":
 			case "held":
-			case "dialing": return this.#T() ? P({
+			case "dialing": return this.#E() ? P({
 				view: e.kind === "held" ? { kind: "ready" } : e,
 				messages: t,
-				destination: this.#o,
-				muted: this.#l,
-				canDial: s(this.#o, this.#r, this.#n),
+				destination: this.#s,
+				muted: this.#u,
+				canDial: s(this.#s, this.#i, this.#r),
 				showOutputDevice: this.#e?.media.supportsOutputSelection() === !0
 			}) : _({
-				mode: this.#w() === "compact" ? "compact" : "panel",
+				mode: this.#T() === "compact" ? "compact" : "panel",
 				view: e,
 				messages: t,
-				destination: this.#o,
-				muted: this.#l,
-				canDial: s(this.#o, this.#r, this.#n),
-				moreOpen: this.#u,
+				destination: this.#s,
+				muted: this.#u,
+				canDial: s(this.#s, this.#i, this.#r),
+				moreOpen: this.#d,
 				floating: this.hasAttribute("floating"),
-				connected: this.#n === "connected",
-				agentStatus: this.#c,
-				extension: this.#s,
-				calls: this.#C()
+				connected: this.#r === "connected",
+				agentStatus: this.#l,
+				extension: this.#c,
+				calls: this.#w()
 			});
 			default: return e;
 		}
 	}
-	#C() {
+	#w() {
 		let e = this.#e?.getActiveCall?.()?.id;
 		return this.#e?.getCalls?.().map((t) => ({
 			id: t.id,
 			destination: t.destination,
 			state: t.state,
-			direction: this.#a.has(t.id) ? "inbound" : "outbound",
+			direction: this.#o.has(t.id) ? "inbound" : "outbound",
 			current: t.id === e
 		})) ?? [];
 	}
-	#w() {
+	#T() {
 		let e = this.getAttribute("mode");
 		return e === "compact" || e === "mobile" ? e : "panel";
 	}
-	#T() {
-		return this.#w() === "mobile";
-	}
 	#E() {
+		return this.#T() === "mobile";
+	}
+	#D() {
 		let e = this.#e;
-		e !== void 0 && (this.#t.push(e.on("connection.stateChanged", (t) => {
-			if (this.#n = t.state, t.state !== "connected" && (this.#c = "offline"), t.state === "connected") {
+		e !== void 0 && (this.#n.push(e.on("connection.stateChanged", (t) => {
+			if (this.#r = t.state, t.state !== "connected" && (this.#l = "offline"), t.state === "connected") {
 				let t = e.getAgent?.()?.extension?.trim();
-				t !== void 0 && t !== "" && (this.#s = t);
+				t !== void 0 && t !== "" && (this.#c = t);
 			}
-		})), this.#t.push(e.on("agent.statusChanged", (e) => {
-			(e.status === "available" || e.status === "offline" || e.status === "break") && (this.#c = e.status);
-		})), this.#t.push(e.on("connection.failed", (e) => {
-			this.#n = "failed", this.#i = { code: e.error.code };
-		})), this.#t.push(e.on("media.permissionChanged", (e) => {
-			this.#r = e.permission;
-		})), this.#t.push(e.on("error", (e) => {
-			this.#i = { code: e.error.code };
-		})), this.#t.push(e.on("call.incoming", (e) => {
-			this.#a.add(e.callId);
-		})), this.#t.push(e.on("call.ended", (e) => {
-			this.#a.delete(e.callId), this.#l = !1;
-		})), this.#t.push(e.on("call.failed", () => {
-			this.#g = this.#R().statusFailed;
+		})), this.#n.push(e.on("agent.statusChanged", (e) => {
+			(e.status === "available" || e.status === "offline" || e.status === "break") && (this.#l = e.status);
+		})), this.#n.push(e.on("connection.failed", (e) => {
+			this.#r = "failed", this.#a = { code: e.error.code };
+		})), this.#n.push(e.on("media.permissionChanged", (e) => {
+			this.#i = e.permission;
+		})), this.#n.push(e.on("error", (e) => {
+			this.#a = { code: e.error.code };
+		})), this.#n.push(e.on("call.incoming", (e) => {
+			this.#o.add(e.callId);
+		})), this.#n.push(e.on("call.ended", (e) => {
+			this.#o.delete(e.callId), this.#u = !1;
+		})), this.#n.push(e.on("call.failed", () => {
+			this.#_ = this.#z().statusFailed;
 		})), U.forEach((t) => {
-			this.#t.push(e.on(t, () => this.render()));
-		}), this.#T() && typeof e.recover == "function" && (this.#_ = a(e, {
+			this.#n.push(e.on(t, () => this.render()));
+		}), this.#E() && typeof e.recover == "function" && (this.#v = a(e, {
 			onChecking: () => {
-				this.#h = this.#R().foregroundChecking, this.render();
+				this.#g = this.#z().foregroundChecking, this.render();
 			},
 			onRecovered: () => {
-				this.#h = void 0, this.render();
+				this.#g = void 0, this.render();
 			},
 			onFailed: () => {
-				this.#h = this.#R().foregroundFailed, this.render();
+				this.#g = this.#z().foregroundFailed, this.render();
 			}
 		})));
 	}
-	#D() {
-		let e = this.#t;
-		this.#t = [], e.forEach((e) => e()), this.#n = "idle", this.#r = "unknown", this.#c = "offline", this.#i = void 0, this.#a.clear(), this.#l = !1, this.#u = !1, this.#p = !1, this.#m = !1, this.#h = void 0, this.#_?.(), this.#_ = void 0;
-	}
 	#O() {
+		let e = this.#n;
+		this.#n = [], e.forEach((e) => e()), this.#r = "idle", this.#i = "unknown", this.#l = "offline", this.#a = void 0, this.#o.clear(), this.#u = !1, this.#d = !1, this.#m = !1, this.#h = !1, this.#g = void 0, this.#v?.(), this.#v = void 0;
+	}
+	#k() {
 		if (typeof this.attachShadow != "function") return;
 		let e = this.shadowRoot ?? this.attachShadow({ mode: "open" });
-		return H.has(e) || (H.add(e), e.addEventListener("click", (e) => this.#k(e)), e.addEventListener("input", (e) => this.#N(e)), e.addEventListener("pointerdown", (e) => this.#V(e))), e;
+		return H.has(e) || (H.add(e), e.addEventListener("click", (e) => this.#A(e)), e.addEventListener("input", (e) => this.#P(e)), e.addEventListener("pointerdown", (e) => this.#H(e))), e;
 	}
-	#k(e) {
+	#A(e) {
 		let t = J(e, this), n = t?.closest("[data-action=\"enable-phone\"]");
-		n instanceof HTMLButtonElement && (n.disabled = !0), this.#d = this.#d.then(() => this.#P(t)).catch((e) => {
-			this.#g = Y(e), this.render();
+		n instanceof HTMLButtonElement && (n.disabled = !0), this.#f = this.#f.then(() => this.#F(t)).catch((e) => {
+			this.#_ = Y(e), this.render();
 		});
 	}
-	#A() {
+	#j() {
 		let e = this.shadowRoot?.querySelector("input[name=\"destination\"]");
-		return e instanceof HTMLInputElement ? e.value : this.#o;
+		return e instanceof HTMLInputElement ? e.value : this.#s;
 	}
-	#j() {
+	#M() {
 		let e = this.shadowRoot?.querySelector("input[name=\"extension\"]");
-		return e instanceof HTMLInputElement ? e.value.trim() : this.#s;
+		return e instanceof HTMLInputElement ? e.value.trim() : this.#c;
 	}
-	#M() {
+	#N() {
 		let e = this.shadowRoot?.querySelector("input[name=\"transfer-target\"]");
 		return e instanceof HTMLInputElement ? e.value : "";
 	}
-	#N(e) {
+	#P(e) {
 		let t = J(e, this);
 		if (t instanceof HTMLInputElement && t.name !== "transfer-target") {
 			if (t.name === "extension") {
-				this.#s = t.value.trim();
+				this.#c = t.value.trim();
 				return;
 			}
-			this.#o = t.value, this.#I();
+			this.#s = t.value, this.#L();
 		}
 	}
-	async #P(e) {
-		if (this.#g = void 0, e === void 0) return;
+	async #F(e) {
+		if (this.#_ = void 0, e === void 0) return;
 		let t = e.closest("[data-call-id]");
 		if (t instanceof HTMLElement && t.dataset.callId !== void 0) {
 			await this.#e?.setActiveCall(t.dataset.callId);
@@ -871,7 +879,7 @@ var B = ":root,:host{--ccbar-color-surface:#fff;--ccbar-color-surface-muted:#f1f
 		}
 		let n = e.closest("[data-digit]");
 		if (n instanceof HTMLElement && n.dataset.digit !== void 0) {
-			await this.#F(n.dataset.digit);
+			await this.#I(n.dataset.digit);
 			return;
 		}
 		let r = e.closest("[data-action]");
@@ -880,20 +888,20 @@ var B = ":root,:host{--ccbar-color-surface:#fff;--ccbar-color-surface-muted:#f1f
 		switch (r.getAttribute("data-action")) {
 			case "signin":
 				if (this.#e === void 0) return;
-				this.#s = this.#j(), await this.#e.media?.requestPermission?.(), await this.#e.initialize(), await this.#e.connect(this.#s === "" ? void 0 : { extension: this.#s });
+				this.#c = this.#M(), await this.#e.media?.requestPermission?.(), await this.#e.initialize(), await this.#e.connect(this.#c === "" ? void 0 : { extension: this.#c });
 				return;
 			case "signout":
 				if (this.#e === void 0) return;
-				this.#c = "offline", await this.#e.disconnect();
+				this.#l = "offline", await this.#e.disconnect();
 				return;
 			case "dial":
 			case "dial-internal":
-				if (this.#o = this.#A(), this.#e === void 0) return;
-				this.#r !== "granted" && await this.#e.media?.requestPermission?.(), await c(this.#e, this.#o, r.getAttribute("data-action") === "dial-internal" ? "extension" : void 0);
+				if (this.#s = this.#j(), this.#e === void 0) return;
+				this.#i !== "granted" && await this.#e.media?.requestPermission?.(), await c(this.#e, this.#s, r.getAttribute("data-action") === "dial-internal" ? "extension" : void 0);
 				return;
 			case "mute":
 				if (a === void 0) return;
-				this.#l = await l(a, this.#l), this.#L();
+				this.#u = await l(a, this.#u), this.#R();
 				return;
 			case "hold":
 				a !== void 0 && await u(a);
@@ -902,7 +910,7 @@ var B = ":root,:host{--ccbar-color-surface:#fff;--ccbar-color-surface-muted:#f1f
 				a !== void 0 && await a.resume();
 				return;
 			case "transfer":
-				a !== void 0 && await f(a, this.#M());
+				a !== void 0 && await f(a, this.#N());
 				return;
 			case "hangup":
 				await a?.hangup();
@@ -914,16 +922,16 @@ var B = ":root,:host{--ccbar-color-surface:#fff;--ccbar-color-surface-muted:#f1f
 				await a?.reject();
 				return;
 			case "enable-phone":
-				if (this.#e === void 0 || this.#p) return;
-				this.#m = !0;
+				if (this.#e === void 0 || this.#m) return;
+				this.#h = !0;
 				try {
-					await i(this.#e), this.#p = !0;
+					await i(this.#e), this.#m = !0;
 				} finally {
-					this.#m = !1, this.render();
+					this.#h = !1, this.render();
 				}
 				return;
 			case "more":
-				this.#u = !this.#u, this.render();
+				this.#d = !this.#d, this.render();
 				return;
 			case "retry-permission":
 				await this.#e?.media.requestPermission();
@@ -939,32 +947,32 @@ var B = ":root,:host{--ccbar-color-surface:#fff;--ccbar-color-surface-muted:#f1f
 			default: return;
 		}
 	}
-	async #F(e) {
+	async #I(e) {
 		let t = this.#e?.getActiveCall?.();
 		if (t !== void 0 && (t.state === "active" || t.state === "held")) {
 			await d(t, e);
 			return;
 		}
-		this.#o += e;
+		this.#s += e;
 		let n = this.shadowRoot?.querySelector("input[name=\"destination\"]");
-		n instanceof HTMLInputElement && (n.value = this.#o), this.#I();
+		n instanceof HTMLInputElement && (n.value = this.#s), this.#L();
 	}
-	#I() {
-		let e = !s(this.#o, this.#r, this.#n);
+	#L() {
+		let e = !s(this.#s, this.#i, this.#r);
 		for (let t of ["dial", "dial-internal"]) {
 			let n = this.shadowRoot?.querySelector(`[data-action="${t}"]`);
 			n instanceof HTMLButtonElement && (n.disabled = e);
 		}
 	}
-	#L() {
-		let e = this.shadowRoot?.querySelector("[data-action=\"mute\"]");
-		e instanceof HTMLButtonElement && (e.setAttribute("aria-pressed", this.#l ? "true" : "false"), e.textContent = this.#l ? this.#R().unmute : this.#R().mute);
-	}
 	#R() {
-		return r(this.getAttribute("locale") ?? "zh-CN", void 0, this.#v);
+		let e = this.shadowRoot?.querySelector("[data-action=\"mute\"]");
+		e instanceof HTMLButtonElement && (e.setAttribute("aria-pressed", this.#u ? "true" : "false"), e.textContent = this.#u ? this.#z().unmute : this.#z().mute);
 	}
 	#z() {
-		this.#y?.(), this.#y = void 0;
+		return r(this.getAttribute("locale") ?? "zh-CN", void 0, this.#y);
+	}
+	#B() {
+		this.#b?.(), this.#b = void 0;
 		let e = this.getAttribute("theme") ?? "light";
 		if (e === "dark" || e === "light") {
 			this.setAttribute("data-theme", e);
@@ -977,31 +985,31 @@ var B = ":root,:host{--ccbar-color-surface:#fff;--ccbar-color-surface-muted:#f1f
 		let t = window.matchMedia("(prefers-color-scheme: dark)"), n = () => {
 			this.setAttribute("data-theme", t.matches ? "dark" : "light");
 		};
-		n(), t.addEventListener("change", n), this.#y = () => t.removeEventListener("change", n);
+		n(), t.addEventListener("change", n), this.#b = () => t.removeEventListener("change", n);
 	}
-	#B() {
+	#V() {
 		this.style.position = this.hasAttribute("floating") ? "fixed" : "";
 	}
-	#V(e) {
+	#H(e) {
 		if (!(e instanceof PointerEvent) || !this.hasAttribute("floating") || !this.hasAttribute("draggable") || (e.target instanceof Element ? e.target.closest("[data-drag-handle]") : null) === null) return;
 		e.preventDefault();
 		let t = this.getBoundingClientRect();
-		this.#f = {
+		this.#p = {
 			pointerId: e.pointerId,
 			offsetX: e.clientX - t.left,
 			offsetY: e.clientY - t.top
-		}, window.addEventListener("pointermove", this.#H), window.addEventListener("pointerup", this.#U);
+		}, window.addEventListener("pointermove", this.#U), window.addEventListener("pointerup", this.#W);
 	}
-	#H = (e) => {
-		if (this.#f === void 0 || e.pointerId !== this.#f.pointerId) return;
-		let t = window.visualViewport, n = t?.width ?? window.innerWidth, r = t?.height ?? window.innerHeight, i = q(e.clientX - this.#f.offsetX, 0, Math.max(0, n - this.offsetWidth)), a = q(e.clientY - this.#f.offsetY, 0, Math.max(0, r - this.offsetHeight));
+	#U = (e) => {
+		if (this.#p === void 0 || e.pointerId !== this.#p.pointerId) return;
+		let t = window.visualViewport, n = t?.width ?? window.innerWidth, r = t?.height ?? window.innerHeight, i = q(e.clientX - this.#p.offsetX, 0, Math.max(0, n - this.offsetWidth)), a = q(e.clientY - this.#p.offsetY, 0, Math.max(0, r - this.offsetHeight));
 		this.style.left = `${i}px`, this.style.top = `${a}px`, this.style.right = "auto", this.style.bottom = "auto";
 	};
-	#U = (e) => {
-		this.#f !== void 0 && e.pointerId === this.#f.pointerId && this.#W();
+	#W = (e) => {
+		this.#p !== void 0 && e.pointerId === this.#p.pointerId && this.#G();
 	};
-	#W() {
-		this.#f = void 0, window.removeEventListener("pointermove", this.#H), window.removeEventListener("pointerup", this.#U);
+	#G() {
+		this.#p = void 0, window.removeEventListener("pointermove", this.#U), window.removeEventListener("pointerup", this.#W);
 	}
 };
 function G(e = {}) {

package/dist/version.d.ts

@@ -0,0 +1 @@
+export declare const SDK_VERSION = "3.1.0";