@wexio/messenger-widget-angular 1.0.23

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Wexio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,175 @@
+# Welcome to @wexio/messenger-widget-angular 👋
+
+[![Version](https://img.shields.io/npm/v/@wexio/messenger-widget-angular.svg)](https://www.npmjs.com/package/@wexio/messenger-widget-angular)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)
+[![Documentation](https://img.shields.io/badge/docs-wexio.io-blue.svg)](https://learn.wexio.io/docs/web-widget)
+
+Native Angular standalone component for the [Wexio](https://wexio.io) web messenger. Thin wrapper around the underlying `<wexio-widget>` custom element — same `WidgetShell` runtime as the script-injected iframe and the React component. Same chat, same visitor identity, same backend; the only difference is **where the Angular tree mounts**.
+
+🏠 [Website](https://wexio.io)
+📚 [Developer Docs](https://learn.wexio.io/docs/web-widget)
+
+## 📂 Description
+
+- [Installation](#installation)
+- [Quick start](#quick-start)
+- [Identifying users](#identifying-users)
+- [Inputs](#inputs)
+- [Outputs](#outputs)
+- [Types](#types)
+- [SSR (Angular Universal)](#ssr-angular-universal)
+- [Browser support](#browser-support)
+- [Author](#author)
+- [License](#-license)
+
+## Installation
+
+```bash
+yarn add @wexio/messenger-widget-angular
+```
+
+or
+
+```bash
+npm install @wexio/messenger-widget-angular
+```
+
+Peer dependencies: `@angular/core >= 16`, `@angular/common >= 16`. The widget uses the host's Angular runtime.
+
+## Quick start
+
+```ts
+// app.component.ts
+import { Component } from "@angular/core";
+import { WexioWidgetComponent } from "@wexio/messenger-widget-angular";
+
+@Component({
+  standalone: true,
+  imports: [WexioWidgetComponent],
+  selector: "app-root",
+  template: `
+    <main>
+      <!-- your app -->
+      <wexio-widget-ng publicKey="pk_live_..." />
+    </main>
+  `,
+})
+export class AppComponent {}
+```
+
+That's it — the widget mounts a floating launcher, handles its own theme/locale/state, and the operator dashboard sees the visitor immediately.
+
+> **Selector** — the component selector is `wexio-widget-ng` (suffixed to avoid clashing with the underlying `<wexio-widget>` custom element it renders).
+
+## Identifying users
+
+Pass a verified `user` input to log a known visitor in. Provide ONE proof — a Google FedCM `id_token`, a host-signed `jwt`, or the legacy `userId` + `userHash` HMAC pair:
+
+```ts
+import { Component } from "@angular/core";
+import {
+  VisitorIdentity,
+  WexioWidgetComponent,
+} from "@wexio/messenger-widget-angular";
+
+@Component({
+  standalone: true,
+  imports: [WexioWidgetComponent],
+  selector: "app-root",
+  template: `<wexio-widget-ng publicKey="pk_live_..." [user]="user" />`,
+})
+export class AppComponent {
+  user: VisitorIdentity = {
+    jwt: serverSignedJwt, // host-signed identity token (recommended)
+    name: "Ada Lovelace",
+    email: "ada@example.com",
+  };
+}
+```
+
+> **Reactive identity** — assign a new object (or `null`) to `user` to re-fire the handshake / log out. The component's `ngOnChanges` watches it.
+
+## Inputs
+
+| Input          | Type                          | Description                                                                       |
+| -------------- | ----------------------------- | --------------------------------------------------------------------------------- |
+| `publicKey`    | `string`                      | Wexio integration public key (`pk_live_...`). Omit for demo mode.                 |
+| `locale`       | `string`                      | UI locale (BCP-47). Overrides the operator's `localeStrategy`.                    |
+| `prefillName`  | `string`                      | Unverified prechat prefill.                                                        |
+| `prefillEmail` | `string`                      | Unverified prechat prefill.                                                        |
+| `prefillPhone` | `string`                      | Unverified prechat prefill.                                                        |
+| `user`         | `VisitorIdentity \| null`     | Known-user identity proof. Pass `null` to log out.                                |
+
+## Outputs
+
+| Output    | Payload                                | When                                                |
+| --------- | -------------------------------------- | --------------------------------------------------- |
+| `resize`  | `{ width: number; height: number }`    | Panel dimensions changed (open ↔ closed). |
+| `close`   | `void`                                  | Visitor closed the panel.                            |
+
+```ts
+template: `
+  <wexio-widget-ng
+    publicKey="pk_live_..."
+    (resize)="onResize($event)"
+    (close)="onClose()"
+  />
+`;
+
+// ...
+onResize(size: { width: number; height: number }) {
+  console.log(size.width, size.height);
+}
+onClose() {
+  console.log("visitor closed the panel");
+}
+```
+
+## Types
+
+### VisitorIdentity
+
+```ts
+interface VisitorIdentity {
+  googleIdToken?: string;  // Google FedCM id_token (preferred)
+  jwt?: string;            // Host-signed JWT
+  userId?: string;         // Legacy HMAC pair…
+  userHash?: string;       // …(HMAC-SHA256(userId, integrationSecret))
+  name?: string;
+  email?: string;
+  phone?: string;
+  attributes?: Record<string, unknown>;
+}
+```
+
+## SSR (Angular Universal)
+
+The wrapper renders an empty `<wexio-widget>` element on the server. The actual widget initialises on first client-side mount (`ngAfterViewInit`). No special handling is needed for Angular Universal — the custom element runs only in the browser.
+
+## Browser support
+
+Modern evergreen browsers — anything that supports Shadow DOM and ES2020. Internet Explorer is not supported.
+
+## Use with other frameworks
+
+The underlying widget runtime is a Web Component, so it works in any modern framework:
+
+- [`@wexio/messenger-widget-react`](https://www.npmjs.com/package/@wexio/messenger-widget-react) — React
+- [`@wexio/messenger-widget-vue`](https://www.npmjs.com/package/@wexio/messenger-widget-vue) — Vue 3
+- [`@wexio/messenger-widget-ember`](https://www.npmjs.com/package/@wexio/messenger-widget-ember) — Ember
+
+## Author
+
+👤 **Wexio** ([https://wexio.io](https://wexio.io))
+
+## Show your support
+
+Give a ⭐️ if this package helped you!
+
+## 📝 License
+
+This project is [MIT](./LICENSE) licensed.
+
+---
+
+_Created with ❤️ by [Wexio](https://wexio.io)_

package/dist/index.d.ts

@@ -0,0 +1,62 @@
+import {
+  AfterViewInit,
+  ElementRef,
+  EventEmitter,
+  OnChanges,
+  OnDestroy,
+  SimpleChanges,
+} from "@angular/core";
+
+/** Known-user identity proof. Provide ONE of `googleIdToken`, `jwt`,
+ *  or the legacy `userId` + `userHash` pair. */
+export interface VisitorIdentity {
+  googleIdToken?: string;
+  jwt?: string;
+  userId?: string;
+  userHash?: string;
+  name?: string;
+  email?: string;
+  phone?: string;
+  attributes?: Record<string, unknown>;
+}
+
+/**
+ * Standalone Angular component wrapping the `<wexio-widget>` web
+ * component. Drop into any component's `imports`:
+ *
+ *   @Component({
+ *     standalone: true,
+ *     imports: [WexioWidgetComponent],
+ *     template: `<wexio-widget-ng [publicKey]="pk" (close)="onClose()" />`,
+ *   })
+ *   export class AppComponent { ... }
+ */
+export declare class WexioWidgetComponent
+  implements AfterViewInit, OnChanges, OnDestroy
+{
+  /** Wexio integration public key (`pk_live_...`). Omit for demo mode. */
+  publicKey?: string;
+  /** UI locale (BCP-47). Overrides the operator's `localeStrategy`. */
+  locale?: string;
+  /** Force widget mode. Public consumers should not set this. */
+  mode?: "production" | "preview" | "demo";
+  /** Unverified prechat prefill. */
+  prefillName?: string;
+  /** Unverified prechat prefill. */
+  prefillEmail?: string;
+  /** Unverified prechat prefill. */
+  prefillPhone?: string;
+  /** Known-user identity proof. Pass `null` to log out. */
+  user?: VisitorIdentity | null;
+
+  /** Fires every time panel dimensions change (open ↔ closed). */
+  resize: EventEmitter<{ width: number; height: number }>;
+  /** Fires when the visitor closes the panel. */
+  close: EventEmitter<void>;
+
+  elRef: ElementRef<HTMLElement>;
+
+  ngAfterViewInit(): void;
+  ngOnChanges(changes: SimpleChanges): void;
+  ngOnDestroy(): void;
+}

package/dist/index.js

@@ -0,0 +1 @@
+export { WexioWidgetComponent } from "./wexio-widget.component";

package/dist/wexio-widget.component.js

@@ -0,0 +1,119 @@
+/**
+ * `@wexio/messenger-widget-angular` — Angular standalone component
+ * wrapping the `<wexio-widget>` custom element.
+ *
+ * Forwards `@Input()` properties to kebab-case attributes on the
+ * underlying custom element and re-emits its `wexio:resize` /
+ * `wexio:close` CustomEvents as Angular `@Output()` `EventEmitter`s.
+ *
+ * Importing this module side-effect registers `<wexio-widget>` as a
+ * custom element — no separate script tag needed.
+ *
+ * Standalone — drop into any Angular component's `imports`:
+ *
+ *   import { WexioWidgetComponent } from "@wexio/messenger-widget-angular";
+ *
+ *   @Component({
+ *     standalone: true,
+ *     imports: [WexioWidgetComponent],
+ *     template: `<wexio-widget-ng [publicKey]="pk" (close)="onClose()" />`,
+ *   })
+ *   export class AppComponent { ... }
+ */
+var _a;
+import { __decorate, __metadata } from "tslib";
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, EventEmitter, Input, Output, ViewChild, } from "@angular/core";
+import "./widget.js";
+let WexioWidgetComponent = class WexioWidgetComponent {
+    constructor() {
+        /** Fires every time panel dimensions change (open ↔ closed). */
+        this.resize = new EventEmitter();
+        /** Fires when the visitor closes the panel. */
+        this.close = new EventEmitter();
+        this.onResize = (event) => {
+            const detail = event
+                .detail;
+            if (detail)
+                this.resize.emit(detail);
+        };
+        this.onClose = () => this.close.emit();
+    }
+    ngAfterViewInit() {
+        const el = this.elRef?.nativeElement;
+        if (!el)
+            return;
+        el.addEventListener("wexio:resize", this.onResize);
+        el.addEventListener("wexio:close", this.onClose);
+        if (this.user)
+            el.identify?.(this.user);
+    }
+    ngOnChanges(changes) {
+        if (changes["user"] && this.elRef?.nativeElement) {
+            this.elRef.nativeElement.identify?.(this.user ?? null);
+        }
+    }
+    ngOnDestroy() {
+        const el = this.elRef?.nativeElement;
+        if (!el)
+            return;
+        el.removeEventListener("wexio:resize", this.onResize);
+        el.removeEventListener("wexio:close", this.onClose);
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], WexioWidgetComponent.prototype, "publicKey", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], WexioWidgetComponent.prototype, "locale", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], WexioWidgetComponent.prototype, "mode", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], WexioWidgetComponent.prototype, "prefillName", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], WexioWidgetComponent.prototype, "prefillEmail", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], WexioWidgetComponent.prototype, "prefillPhone", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], WexioWidgetComponent.prototype, "user", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], WexioWidgetComponent.prototype, "resize", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], WexioWidgetComponent.prototype, "close", void 0);
+__decorate([
+    ViewChild("el", { static: true }),
+    __metadata("design:type", typeof (_a = typeof ElementRef !== "undefined" && ElementRef) === "function" ? _a : Object)
+], WexioWidgetComponent.prototype, "elRef", void 0);
+WexioWidgetComponent = __decorate([
+    Component({
+        standalone: true,
+        selector: "wexio-widget-ng",
+        schemas: [CUSTOM_ELEMENTS_SCHEMA],
+        template: `<wexio-widget
+    #el
+    [attr.public-key]="publicKey ?? null"
+    [attr.locale]="locale ?? null"
+    [attr.mode]="mode ?? null"
+    [attr.prefill-name]="prefillName ?? null"
+    [attr.prefill-email]="prefillEmail ?? null"
+    [attr.prefill-phone]="prefillPhone ?? null"
+  ></wexio-widget>`,
+    })
+], WexioWidgetComponent);
+export { WexioWidgetComponent };