@everymatrix/nuts-inbox-widget 0.0.1

package/dist/components/nuts-popover.d.ts

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

package/dist/components/nuts-popover.js

@@ -0,0 +1,6 @@
+import { N as NutsPopover$1, d as defineCustomElement$1 } from './nuts-popover2.js';
+
+const NutsPopover = NutsPopover$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NutsPopover, defineCustomElement };

package/dist/components/nuts-popover2.js

@@ -0,0 +1,119 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './nuts-notification2.js';
+
+const nutsPopoverCss = ":host{display:block}.Popover{padding:15px 0px;height:auto;border-radius:7px;box-shadow:rgba(0, 0, 0, 0.2) 0px 5px 20px;background:#1e1e26;margin:0px;font-family:inherit;color:#333737;direction:ltr;width:420px;z-index:999}.Popover .Header{display:flex;justify-content:space-between;padding:0 20px 10px 20px;box-shadow:0px 5px 5px -5px rgba(0, 0, 0, 0.55)}.Popover .Header .Title{color:white;font-size:20px;font-style:normal;font-weight:700;line-height:24px;text-align:center}.Popover .Header .Title .UnseenCounter{text-decoration:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;border-radius:10px;letter-spacing:0.25px;text-overflow:ellipsis;overflow:hidden;padding:0px;margin-left:10px;width:25px;height:20px;pointer-events:none;border:none;background:linear-gradient(0deg, #ff512f 0%, #dd2476 100%);font-family:inherit;line-height:14px;color:white;font-weight:bold;font-size:12px}.Popover .Header .MarkAsRead{margin-top:5px;margin-right:10px;font-size:14px;font-style:normal;font-weight:400;line-height:17px;color:#828299;cursor:pointer;pointer-events:auto;opacity:0.5}.Popover .Header .MarkAsRead:hover{opacity:0.7;transition:250ms}.Popover .NotificationList{height:400px;overflow:auto}";
+
+const NutsPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.allNotificationsRead = createEvent(this, "allNotificationsRead", 7);
+    /**
+     * 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 style() { return nutsPopoverCss; }
+}, [0, "nuts-popover", {
+    "language": [513],
+    "userId": [513, "user-id"],
+    "operatorId": [513, "operator-id"],
+    "token": [513],
+    "backendUrl": [513, "backend-url"],
+    "unseenCount": [514, "unseen-count"],
+    "clientStyling": [1537, "client-styling"],
+    "clientStylingUrl": [513, "client-styling-url"],
+    "notifications": [32],
+    "isLoading": [32]
+  }, [[8, "messageDeleted", "messageDeteledHandler"], [8, "newNotification", "newNotificationHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["nuts-popover", "nuts-notification"];
+  components.forEach(tagName => { switch (tagName) {
+    case "nuts-popover":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, NutsPopover);
+      }
+      break;
+    case "nuts-notification":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { NutsPopover as N, defineCustomElement as d };