@everymatrix/nuts-inbox-widget 0.0.1

package/dist/collection/components/nuts-popover/nuts-popover.js

@@ -0,0 +1,265 @@
+import { Component, h, Listen, Event, Prop, State } from '@stencil/core';
+export class NutsPopover {
+  constructor() {
+    /**
+     * Client custom styling via inline styles
+     */
+    this.clientStyling = '';
+    this.isLoading = true;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let url = new URL(this.clientStylingUrl);
+      let cssFile = document.createElement('style');
+      fetch(url.href)
+        .then((res) => res.text())
+        .then((data) => {
+        cssFile.innerHTML = data;
+        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+      })
+        .catch((err) => {
+        console.log('error ', err);
+      });
+    };
+  }
+  messageDeteledHandler(event) {
+    this.notifications = this.notifications.filter((item) => {
+      return item._id != event.detail;
+    });
+  }
+  newNotificationHandler(event) {
+    this.notifications = [event.detail, ...this.notifications];
+  }
+  getNotifications() {
+    let url = new URL(`${this.backendUrl}/v1/widgets/notifications/feed`);
+    const headers = new Headers();
+    headers.append('Authorization', `Bearer ${this.token || ''}`);
+    headers.append('Content-Type', 'application/json');
+    url.searchParams.append('page', '0');
+    const options = {
+      method: 'GET',
+      headers,
+    };
+    fetch(url.href, options)
+      .then((res) => res.json())
+      .then((response) => {
+      this.isLoading = false;
+      this.notifications = response.data;
+    });
+  }
+  markAllAsRead() {
+    let url = new URL(`${this.backendUrl}/v1/widgets/messages/read`);
+    const headers = new Headers();
+    headers.append('Authorization', `Bearer ${this.token || ''}`);
+    const options = {
+      method: 'POST',
+      body: JSON.stringify({}),
+      headers,
+    };
+    fetch(url.href, options)
+      .then((res) => res.json())
+      .then(() => {
+      this.allNotificationsRead.emit();
+    })
+      .catch((err) => {
+      console.error('err', err);
+    });
+  }
+  connectedCallback() {
+    this.getNotifications();
+  }
+  render() {
+    return (h("div", { class: "Popover", ref: el => this.stylingContainer = el },
+      h("div", { class: "Header" },
+        h("div", { class: "Title" },
+          "Notifications",
+          this.unseenCount > 0 ? h("div", { class: "UnseenCounter" }, this.unseenCount) : ''),
+        h("div", { class: "MarkAsRead", onClick: () => this.markAllAsRead() }, "Mark all as read")),
+      h("div", { class: "NotificationList" }, !this.isLoading && this.notifications.map((item) => {
+        var _a;
+        return (h("nuts-notification", { "client-styling": this.clientStyling, key: item.id, "user-id": this.userId, "operator-id": this.operatorId, content: item.content, "message-id": item.id, badge: ((_a = item.actor) === null || _a === void 0 ? void 0 : _a.data) || '', date: item.createdAt, read: item.read, seen: item.seen, language: this.language, token: this.token, "backend-url": this.backendUrl }));
+      }))));
+  }
+  static get is() { return "nuts-popover"; }
+  static get originalStyleUrls() { return {
+    "$": ["nuts-popover.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["nuts-popover.css"]
+  }; }
+  static get properties() { return {
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "language",
+      "reflect": true
+    },
+    "userId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "user-id",
+      "reflect": true
+    },
+    "operatorId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "operator-id",
+      "reflect": true
+    },
+    "token": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "token",
+      "reflect": true
+    },
+    "backendUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "backend-url",
+      "reflect": true
+    },
+    "unseenCount": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "unseen-count",
+      "reflect": true
+    },
+    "clientStyling": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via inline styles"
+      },
+      "attribute": "client-styling",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "clientStylingUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Custom styling url for the novu iFrame, formatted as a JSON object according to the documentation: https://docs.novu.co/notification-center/custom-styling/"
+      },
+      "attribute": "client-styling-url",
+      "reflect": true
+    }
+  }; }
+  static get states() { return {
+    "notifications": {},
+    "isLoading": {}
+  }; }
+  static get events() { return [{
+      "method": "allNotificationsRead",
+      "name": "allNotificationsRead",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get listeners() { return [{
+      "name": "messageDeleted",
+      "method": "messageDeteledHandler",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "newNotification",
+      "method": "newNotificationHandler",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/index.js

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

package/dist/collection/types/nuts-inbox-widget.types.js

@@ -0,0 +1,47 @@
+;
+export var StepTypeEnum;
+(function (StepTypeEnum) {
+  StepTypeEnum["IN_APP"] = "in_app";
+  StepTypeEnum["EMAIL"] = "email";
+  StepTypeEnum["SMS"] = "sms";
+  StepTypeEnum["CHAT"] = "chat";
+  StepTypeEnum["PUSH"] = "push";
+  StepTypeEnum["DIGEST"] = "digest";
+  StepTypeEnum["TRIGGER"] = "trigger";
+  StepTypeEnum["DELAY"] = "delay";
+})(StepTypeEnum || (StepTypeEnum = {}));
+;
+export var EmailBlockTypeEnum;
+(function (EmailBlockTypeEnum) {
+  EmailBlockTypeEnum["BUTTON"] = "button";
+  EmailBlockTypeEnum["TEXT"] = "text";
+})(EmailBlockTypeEnum || (EmailBlockTypeEnum = {}));
+;
+export var TextAlignEnum;
+(function (TextAlignEnum) {
+  TextAlignEnum["CENTER"] = "center";
+  TextAlignEnum["LEFT"] = "left";
+  TextAlignEnum["RIGHT"] = "right";
+})(TextAlignEnum || (TextAlignEnum = {}));
+;
+;
+export var TemplateVariableTypeEnum;
+(function (TemplateVariableTypeEnum) {
+  TemplateVariableTypeEnum["STRING"] = "String";
+  TemplateVariableTypeEnum["ARRAY"] = "Array";
+  TemplateVariableTypeEnum["BOOLEAN"] = "Boolean";
+})(TemplateVariableTypeEnum || (TemplateVariableTypeEnum = {}));
+;
+export var ChannelCTATypeEnum;
+(function (ChannelCTATypeEnum) {
+  ChannelCTATypeEnum["REDIRECT"] = "redirect";
+})(ChannelCTATypeEnum || (ChannelCTATypeEnum = {}));
+;
+export var ActorTypeEnum;
+(function (ActorTypeEnum) {
+  ActorTypeEnum["NONE"] = "none";
+  ActorTypeEnum["USER"] = "user";
+  ActorTypeEnum["SYSTEM_ICON"] = "system_icon";
+  ActorTypeEnum["SYSTEM_CUSTOM"] = "system_custom";
+})(ActorTypeEnum || (ActorTypeEnum = {}));
+;

package/dist/components/index.d.ts

@@ -0,0 +1,26 @@
+/* NutsInboxWidget custom elements */
+
+import type { Components, JSX } from "../types/components";
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export type { Components, JSX };
+
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';

package/dist/components/nuts-inbox-widget.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NutsInboxWidget extends Components.NutsInboxWidget, HTMLElement {}
+export const NutsInboxWidget: {
+  prototype: NutsInboxWidget;
+  new (): NutsInboxWidget;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;