@everymatrix/nuts-inbox-widget 1.76.8 → 1.76.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-c16396a3.js → index-4522ef7e.js} +231 -3
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/nuts-inbox-widget.cjs.js +2 -2
- package/dist/cjs/nuts-inbox-widget_3.cjs.entry.js +14 -17
- package/dist/collection/components/nuts-inbox-widget/nuts-inbox-widget.js +31 -16
- package/dist/collection/components/nuts-notification/nuts-notification.js +5 -3
- package/dist/esm/{index-6a331097.js → index-0160662f.js} +231 -3
- package/dist/esm/loader.js +3 -3
- package/dist/esm/nuts-inbox-widget.js +3 -3
- package/dist/esm/nuts-inbox-widget_3.entry.js +14 -17
- package/dist/nuts-inbox-widget/index-0160662f.js +2 -0
- package/dist/nuts-inbox-widget/nuts-inbox-widget.esm.js +1 -1
- package/dist/nuts-inbox-widget/nuts-inbox-widget_3.entry.js +1 -1
- package/dist/stencil.config.js +2 -1
- package/dist/types/components/nuts-inbox-widget/nuts-inbox-widget.d.ts +1 -1
- package/package.json +8 -1
- package/dist/nuts-inbox-widget/index-6a331097.js +0 -2
|
@@ -21,7 +21,7 @@ function _interopNamespace(e) {
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
const NAMESPACE = 'nuts-inbox-widget';
|
|
24
|
-
const BUILD = /* nuts-inbox-widget */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad:
|
|
24
|
+
const BUILD = /* nuts-inbox-widget */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
|
|
25
25
|
|
|
26
26
|
/*
|
|
27
27
|
Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
|
|
@@ -93,6 +93,15 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
|
|
|
93
93
|
|
|
94
94
|
// src/client/client-style.ts
|
|
95
95
|
var styles = /* @__PURE__ */ new Map();
|
|
96
|
+
|
|
97
|
+
// src/runtime/runtime-constants.ts
|
|
98
|
+
var CONTENT_REF_ID = "r";
|
|
99
|
+
var ORG_LOCATION_ID = "o";
|
|
100
|
+
var SLOT_NODE_ID = "s";
|
|
101
|
+
var TEXT_NODE_ID = "t";
|
|
102
|
+
var HYDRATE_ID = "s-id";
|
|
103
|
+
var HYDRATED_STYLE_ID = "sty-id";
|
|
104
|
+
var HYDRATE_CHILD_ID = "c-id";
|
|
96
105
|
var HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
|
|
97
106
|
var SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
|
|
98
107
|
var win = typeof window !== "undefined" ? window : {};
|
|
@@ -106,6 +115,7 @@ var plt = {
|
|
|
106
115
|
rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
|
|
107
116
|
ce: (eventName, opts) => new CustomEvent(eventName, opts)
|
|
108
117
|
};
|
|
118
|
+
var supportsShadow = BUILD.shadowDom;
|
|
109
119
|
var supportsListenerOptions = /* @__PURE__ */ (() => {
|
|
110
120
|
let supportsListenerOptions2 = false;
|
|
111
121
|
try {
|
|
@@ -311,6 +321,197 @@ var newVNode = (tag, text) => {
|
|
|
311
321
|
};
|
|
312
322
|
var Host = {};
|
|
313
323
|
var isHost = (node) => node && node.$tag$ === Host;
|
|
324
|
+
|
|
325
|
+
// src/runtime/client-hydrate.ts
|
|
326
|
+
var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
|
|
327
|
+
const endHydrate = createTime("hydrateClient", tagName);
|
|
328
|
+
const shadowRoot = hostElm.shadowRoot;
|
|
329
|
+
const childRenderNodes = [];
|
|
330
|
+
const slotNodes = [];
|
|
331
|
+
const shadowRootNodes = shadowRoot ? [] : null;
|
|
332
|
+
const vnode = hostRef.$vnode$ = newVNode(tagName, null);
|
|
333
|
+
if (!plt.$orgLocNodes$) {
|
|
334
|
+
initializeDocumentHydrate(doc.body, plt.$orgLocNodes$ = /* @__PURE__ */ new Map());
|
|
335
|
+
}
|
|
336
|
+
hostElm[HYDRATE_ID] = hostId;
|
|
337
|
+
hostElm.removeAttribute(HYDRATE_ID);
|
|
338
|
+
clientHydrate(vnode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, hostElm, hostId);
|
|
339
|
+
childRenderNodes.map((c) => {
|
|
340
|
+
const orgLocationId = c.$hostId$ + "." + c.$nodeId$;
|
|
341
|
+
const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
|
|
342
|
+
const node = c.$elm$;
|
|
343
|
+
if (orgLocationNode && supportsShadow && orgLocationNode["s-en"] === "") {
|
|
344
|
+
orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
|
|
345
|
+
}
|
|
346
|
+
if (!shadowRoot) {
|
|
347
|
+
node["s-hn"] = tagName;
|
|
348
|
+
if (orgLocationNode) {
|
|
349
|
+
node["s-ol"] = orgLocationNode;
|
|
350
|
+
node["s-ol"]["s-nr"] = node;
|
|
351
|
+
}
|
|
352
|
+
}
|
|
353
|
+
plt.$orgLocNodes$.delete(orgLocationId);
|
|
354
|
+
});
|
|
355
|
+
if (shadowRoot) {
|
|
356
|
+
shadowRootNodes.map((shadowRootNode) => {
|
|
357
|
+
if (shadowRootNode) {
|
|
358
|
+
shadowRoot.appendChild(shadowRootNode);
|
|
359
|
+
}
|
|
360
|
+
});
|
|
361
|
+
}
|
|
362
|
+
endHydrate();
|
|
363
|
+
};
|
|
364
|
+
var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId) => {
|
|
365
|
+
let childNodeType;
|
|
366
|
+
let childIdSplt;
|
|
367
|
+
let childVNode;
|
|
368
|
+
let i2;
|
|
369
|
+
if (node.nodeType === 1 /* ElementNode */) {
|
|
370
|
+
childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
|
|
371
|
+
if (childNodeType) {
|
|
372
|
+
childIdSplt = childNodeType.split(".");
|
|
373
|
+
if (childIdSplt[0] === hostId || childIdSplt[0] === "0") {
|
|
374
|
+
childVNode = {
|
|
375
|
+
$flags$: 0,
|
|
376
|
+
$hostId$: childIdSplt[0],
|
|
377
|
+
$nodeId$: childIdSplt[1],
|
|
378
|
+
$depth$: childIdSplt[2],
|
|
379
|
+
$index$: childIdSplt[3],
|
|
380
|
+
$tag$: node.tagName.toLowerCase(),
|
|
381
|
+
$elm$: node,
|
|
382
|
+
$attrs$: null,
|
|
383
|
+
$children$: null,
|
|
384
|
+
$key$: null,
|
|
385
|
+
$name$: null,
|
|
386
|
+
$text$: null
|
|
387
|
+
};
|
|
388
|
+
childRenderNodes.push(childVNode);
|
|
389
|
+
node.removeAttribute(HYDRATE_CHILD_ID);
|
|
390
|
+
if (!parentVNode.$children$) {
|
|
391
|
+
parentVNode.$children$ = [];
|
|
392
|
+
}
|
|
393
|
+
parentVNode.$children$[childVNode.$index$] = childVNode;
|
|
394
|
+
parentVNode = childVNode;
|
|
395
|
+
if (shadowRootNodes && childVNode.$depth$ === "0") {
|
|
396
|
+
shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
|
|
397
|
+
}
|
|
398
|
+
}
|
|
399
|
+
}
|
|
400
|
+
for (i2 = node.childNodes.length - 1; i2 >= 0; i2--) {
|
|
401
|
+
clientHydrate(
|
|
402
|
+
parentVNode,
|
|
403
|
+
childRenderNodes,
|
|
404
|
+
slotNodes,
|
|
405
|
+
shadowRootNodes,
|
|
406
|
+
hostElm,
|
|
407
|
+
node.childNodes[i2],
|
|
408
|
+
hostId
|
|
409
|
+
);
|
|
410
|
+
}
|
|
411
|
+
if (node.shadowRoot) {
|
|
412
|
+
for (i2 = node.shadowRoot.childNodes.length - 1; i2 >= 0; i2--) {
|
|
413
|
+
clientHydrate(
|
|
414
|
+
parentVNode,
|
|
415
|
+
childRenderNodes,
|
|
416
|
+
slotNodes,
|
|
417
|
+
shadowRootNodes,
|
|
418
|
+
hostElm,
|
|
419
|
+
node.shadowRoot.childNodes[i2],
|
|
420
|
+
hostId
|
|
421
|
+
);
|
|
422
|
+
}
|
|
423
|
+
}
|
|
424
|
+
} else if (node.nodeType === 8 /* CommentNode */) {
|
|
425
|
+
childIdSplt = node.nodeValue.split(".");
|
|
426
|
+
if (childIdSplt[1] === hostId || childIdSplt[1] === "0") {
|
|
427
|
+
childNodeType = childIdSplt[0];
|
|
428
|
+
childVNode = {
|
|
429
|
+
$flags$: 0,
|
|
430
|
+
$hostId$: childIdSplt[1],
|
|
431
|
+
$nodeId$: childIdSplt[2],
|
|
432
|
+
$depth$: childIdSplt[3],
|
|
433
|
+
$index$: childIdSplt[4],
|
|
434
|
+
$elm$: node,
|
|
435
|
+
$attrs$: null,
|
|
436
|
+
$children$: null,
|
|
437
|
+
$key$: null,
|
|
438
|
+
$name$: null,
|
|
439
|
+
$tag$: null,
|
|
440
|
+
$text$: null
|
|
441
|
+
};
|
|
442
|
+
if (childNodeType === TEXT_NODE_ID) {
|
|
443
|
+
childVNode.$elm$ = node.nextSibling;
|
|
444
|
+
if (childVNode.$elm$ && childVNode.$elm$.nodeType === 3 /* TextNode */) {
|
|
445
|
+
childVNode.$text$ = childVNode.$elm$.textContent;
|
|
446
|
+
childRenderNodes.push(childVNode);
|
|
447
|
+
node.remove();
|
|
448
|
+
if (!parentVNode.$children$) {
|
|
449
|
+
parentVNode.$children$ = [];
|
|
450
|
+
}
|
|
451
|
+
parentVNode.$children$[childVNode.$index$] = childVNode;
|
|
452
|
+
if (shadowRootNodes && childVNode.$depth$ === "0") {
|
|
453
|
+
shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
|
|
454
|
+
}
|
|
455
|
+
}
|
|
456
|
+
} else if (childVNode.$hostId$ === hostId) {
|
|
457
|
+
if (childNodeType === SLOT_NODE_ID) {
|
|
458
|
+
childVNode.$tag$ = "slot";
|
|
459
|
+
if (childIdSplt[5]) {
|
|
460
|
+
node["s-sn"] = childVNode.$name$ = childIdSplt[5];
|
|
461
|
+
} else {
|
|
462
|
+
node["s-sn"] = "";
|
|
463
|
+
}
|
|
464
|
+
node["s-sr"] = true;
|
|
465
|
+
if (shadowRootNodes) {
|
|
466
|
+
childVNode.$elm$ = doc.createElement(childVNode.$tag$);
|
|
467
|
+
if (childVNode.$name$) {
|
|
468
|
+
childVNode.$elm$.setAttribute("name", childVNode.$name$);
|
|
469
|
+
}
|
|
470
|
+
node.parentNode.insertBefore(childVNode.$elm$, node);
|
|
471
|
+
node.remove();
|
|
472
|
+
if (childVNode.$depth$ === "0") {
|
|
473
|
+
shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
|
|
474
|
+
}
|
|
475
|
+
}
|
|
476
|
+
slotNodes.push(childVNode);
|
|
477
|
+
if (!parentVNode.$children$) {
|
|
478
|
+
parentVNode.$children$ = [];
|
|
479
|
+
}
|
|
480
|
+
parentVNode.$children$[childVNode.$index$] = childVNode;
|
|
481
|
+
} else if (childNodeType === CONTENT_REF_ID) {
|
|
482
|
+
if (shadowRootNodes) {
|
|
483
|
+
node.remove();
|
|
484
|
+
}
|
|
485
|
+
}
|
|
486
|
+
}
|
|
487
|
+
}
|
|
488
|
+
} else if (parentVNode && parentVNode.$tag$ === "style") {
|
|
489
|
+
const vnode = newVNode(null, node.textContent);
|
|
490
|
+
vnode.$elm$ = node;
|
|
491
|
+
vnode.$index$ = "0";
|
|
492
|
+
parentVNode.$children$ = [vnode];
|
|
493
|
+
}
|
|
494
|
+
};
|
|
495
|
+
var initializeDocumentHydrate = (node, orgLocNodes) => {
|
|
496
|
+
if (node.nodeType === 1 /* ElementNode */) {
|
|
497
|
+
let i2 = 0;
|
|
498
|
+
for (; i2 < node.childNodes.length; i2++) {
|
|
499
|
+
initializeDocumentHydrate(node.childNodes[i2], orgLocNodes);
|
|
500
|
+
}
|
|
501
|
+
if (node.shadowRoot) {
|
|
502
|
+
for (i2 = 0; i2 < node.shadowRoot.childNodes.length; i2++) {
|
|
503
|
+
initializeDocumentHydrate(node.shadowRoot.childNodes[i2], orgLocNodes);
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
} else if (node.nodeType === 8 /* CommentNode */) {
|
|
507
|
+
const childIdSplt = node.nodeValue.split(".");
|
|
508
|
+
if (childIdSplt[0] === ORG_LOCATION_ID) {
|
|
509
|
+
orgLocNodes.set(childIdSplt[1] + "." + childIdSplt[2], node);
|
|
510
|
+
node.nodeValue = "";
|
|
511
|
+
node["s-en"] = childIdSplt[3];
|
|
512
|
+
}
|
|
513
|
+
}
|
|
514
|
+
};
|
|
314
515
|
var parsePropertyValue = (propValue, propType) => {
|
|
315
516
|
if (propValue != null && !isComplexType(propValue)) {
|
|
316
517
|
if (propType & 4 /* Boolean */) {
|
|
@@ -376,7 +577,9 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
|
|
|
376
577
|
rootAppliedStyles.set(styleContainerNode, appliedStyles = /* @__PURE__ */ new Set());
|
|
377
578
|
}
|
|
378
579
|
if (!appliedStyles.has(scopeId2)) {
|
|
379
|
-
{
|
|
580
|
+
if (styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
|
|
581
|
+
styleElm.innerHTML = style;
|
|
582
|
+
} else {
|
|
380
583
|
styleElm = doc.createElement("style");
|
|
381
584
|
styleElm.innerHTML = style;
|
|
382
585
|
const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(doc);
|
|
@@ -413,6 +616,7 @@ var attachStyles = (hostRef) => {
|
|
|
413
616
|
endAttachStyles();
|
|
414
617
|
};
|
|
415
618
|
var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
|
|
619
|
+
var convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, "$1{");
|
|
416
620
|
var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
|
|
417
621
|
if (oldValue !== newValue) {
|
|
418
622
|
let isProp = isMemberInElement(elm, memberName);
|
|
@@ -862,6 +1066,9 @@ var postUpdateComponent = (hostRef) => {
|
|
|
862
1066
|
{
|
|
863
1067
|
addHydratedFlag(elm);
|
|
864
1068
|
}
|
|
1069
|
+
{
|
|
1070
|
+
safeCall(instance, "componentDidLoad");
|
|
1071
|
+
}
|
|
865
1072
|
endPostUpdate();
|
|
866
1073
|
{
|
|
867
1074
|
hostRef.$onReadyResolve$(elm);
|
|
@@ -1094,10 +1301,21 @@ var connectedCallback = (elm) => {
|
|
|
1094
1301
|
const endConnected = createTime("connectedCallback", cmpMeta.$tagName$);
|
|
1095
1302
|
if (!(hostRef.$flags$ & 1 /* hasConnected */)) {
|
|
1096
1303
|
hostRef.$flags$ |= 1 /* hasConnected */;
|
|
1304
|
+
let hostId;
|
|
1305
|
+
{
|
|
1306
|
+
hostId = elm.getAttribute(HYDRATE_ID);
|
|
1307
|
+
if (hostId) {
|
|
1308
|
+
if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
|
|
1309
|
+
const scopeId2 = addStyle(elm.shadowRoot, cmpMeta);
|
|
1310
|
+
elm.classList.remove(scopeId2 + "-h", scopeId2 + "-s");
|
|
1311
|
+
}
|
|
1312
|
+
initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
|
|
1313
|
+
}
|
|
1314
|
+
}
|
|
1097
1315
|
{
|
|
1098
1316
|
let ancestorComponent = elm;
|
|
1099
1317
|
while (ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host) {
|
|
1100
|
-
if (ancestorComponent["s-p"]) {
|
|
1318
|
+
if (ancestorComponent.nodeType === 1 /* ElementNode */ && ancestorComponent.hasAttribute("s-id") && ancestorComponent["s-p"] || ancestorComponent["s-p"]) {
|
|
1101
1319
|
attachToAncestor(hostRef, hostRef.$ancestorComponent$ = ancestorComponent);
|
|
1102
1320
|
break;
|
|
1103
1321
|
}
|
|
@@ -1154,10 +1372,20 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
|
|
|
1154
1372
|
const metaCharset = /* @__PURE__ */ head.querySelector("meta[charset]");
|
|
1155
1373
|
const dataStyles = /* @__PURE__ */ doc.createElement("style");
|
|
1156
1374
|
const deferredConnectedCallbacks = [];
|
|
1375
|
+
const styles2 = /* @__PURE__ */ doc.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
|
|
1157
1376
|
let appLoadFallback;
|
|
1158
1377
|
let isBootstrapping = true;
|
|
1378
|
+
let i2 = 0;
|
|
1159
1379
|
Object.assign(plt, options);
|
|
1160
1380
|
plt.$resourcesUrl$ = new URL(options.resourcesUrl || "./", doc.baseURI).href;
|
|
1381
|
+
{
|
|
1382
|
+
plt.$flags$ |= 2 /* appLoaded */;
|
|
1383
|
+
}
|
|
1384
|
+
{
|
|
1385
|
+
for (; i2 < styles2.length; i2++) {
|
|
1386
|
+
registerStyle(styles2[i2].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles2[i2].innerHTML), true);
|
|
1387
|
+
}
|
|
1388
|
+
}
|
|
1161
1389
|
let hasSlotRelocation = false;
|
|
1162
1390
|
lazyBundles.map((lazyBundle) => {
|
|
1163
1391
|
lazyBundle[1].map((compactMeta) => {
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-4522ef7e.js');
|
|
6
6
|
const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
7
7
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
|
10
10
|
await appGlobals.globalScripts();
|
|
11
|
-
return index.bootstrapLazy([["nuts-inbox-widget_3.cjs",[[1,"nuts-inbox-widget",{"backendUrl":[513,"backend-url"],"socketUrl":[513,"socket-url"],"userId":[513,"user-id"],"sessionId":[513,"session-id"],"operatorId":[513,"operator-id"],"subscriberId":[513,"subscriber-id"],"deviceId":[513,"device-id"],"language":[513],"environment":[513],"applicationIdentifier":[513,"application-identifier"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"bellIconPosition":[513,"bell-icon-position"],"notificationAction":[513,"notification-action"],"translationUrl":[513,"translation-url"],"isLoading":[32],"popoverVisible":[32],"unseenCount":[32]
|
|
11
|
+
return index.bootstrapLazy([["nuts-inbox-widget_3.cjs",[[1,"nuts-inbox-widget",{"backendUrl":[513,"backend-url"],"socketUrl":[513,"socket-url"],"userId":[513,"user-id"],"sessionId":[513,"session-id"],"operatorId":[513,"operator-id"],"subscriberId":[513,"subscriber-id"],"deviceId":[513,"device-id"],"language":[513],"environment":[513],"applicationIdentifier":[513,"application-identifier"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"bellIconPosition":[513,"bell-icon-position"],"notificationAction":[513,"notification-action"],"translationUrl":[513,"translation-url"],"isLoading":[32],"popoverVisible":[32],"unseenCount":[32]},[[8,"click","clickOutsideHandle"],[0,"allNotificationsRead","resetUnseenCount"],[8,"closePopover","closePopoverHandler"]],{"subscriberId":["initializeHandler"],"operatorId":["initializeHandler"],"applicationIdentifier":["initializeHandler"],"deviceId":["initializeHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-popover",{"language":[513],"userId":[513,"user-id"],"operatorId":[513,"operator-id"],"token":[513],"sessionId":[513,"session-id"],"backendUrl":[513,"backend-url"],"unseenCount":[514,"unseen-count"],"clientStylingUrl":[513,"client-styling-url"],"notificationAction":[513,"notification-action"],"clientStyling":[1537,"client-styling"],"translationUrl":[513,"translation-url"],"notifications":[32],"isLoading":[32],"isNotificationsLoading":[32],"showMarkAll":[32],"limitStylingAppends":[32],"showDeleteAllPopup":[32],"hasMore":[32]},[[8,"messageDeleted","messageDeletedHandler"],[8,"messageRead","messageReadHandler"],[8,"click","clickOutsideHandle"]],{"unseenCount":["unseenCountHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-notification",{"badge":[513],"content":[513],"date":[513],"showSettings":[516,"show-settings"],"read":[516],"seen":[516],"language":[513],"sessionId":[513,"session-id"],"subscriberId":[513,"subscriber-id"],"userId":[513,"user-id"],"messageId":[513,"message-id"],"operatorId":[513,"operator-id"],"token":[513],"backendUrl":[513,"backend-url"],"redirectUrl":[513,"redirect-url"],"notificationAction":[513,"notification-action"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"clientStyling":[1537,"client-styling"],"showSettingsModal":[32],"messageSeen":[32],"messageRead":[32],"displayedContent":[32],"limitStylingAppends":[32]},[[8,"allNotificationsRead","allNotificationsReadHandler"],[8,"settingsOpened","settingsOpenedHandler"],[8,"click","clickOutsideHandle"]],{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}]]]], options);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-4522ef7e.js');
|
|
6
6
|
const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
7
7
|
|
|
8
8
|
/*
|
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["nuts-inbox-widget_3.cjs",[[1,"nuts-inbox-widget",{"backendUrl":[513,"backend-url"],"socketUrl":[513,"socket-url"],"userId":[513,"user-id"],"sessionId":[513,"session-id"],"operatorId":[513,"operator-id"],"subscriberId":[513,"subscriber-id"],"deviceId":[513,"device-id"],"language":[513],"environment":[513],"applicationIdentifier":[513,"application-identifier"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"bellIconPosition":[513,"bell-icon-position"],"notificationAction":[513,"notification-action"],"translationUrl":[513,"translation-url"],"isLoading":[32],"popoverVisible":[32],"unseenCount":[32]
|
|
22
|
+
return index.bootstrapLazy([["nuts-inbox-widget_3.cjs",[[1,"nuts-inbox-widget",{"backendUrl":[513,"backend-url"],"socketUrl":[513,"socket-url"],"userId":[513,"user-id"],"sessionId":[513,"session-id"],"operatorId":[513,"operator-id"],"subscriberId":[513,"subscriber-id"],"deviceId":[513,"device-id"],"language":[513],"environment":[513],"applicationIdentifier":[513,"application-identifier"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"bellIconPosition":[513,"bell-icon-position"],"notificationAction":[513,"notification-action"],"translationUrl":[513,"translation-url"],"isLoading":[32],"popoverVisible":[32],"unseenCount":[32]},[[8,"click","clickOutsideHandle"],[0,"allNotificationsRead","resetUnseenCount"],[8,"closePopover","closePopoverHandler"]],{"subscriberId":["initializeHandler"],"operatorId":["initializeHandler"],"applicationIdentifier":["initializeHandler"],"deviceId":["initializeHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-popover",{"language":[513],"userId":[513,"user-id"],"operatorId":[513,"operator-id"],"token":[513],"sessionId":[513,"session-id"],"backendUrl":[513,"backend-url"],"unseenCount":[514,"unseen-count"],"clientStylingUrl":[513,"client-styling-url"],"notificationAction":[513,"notification-action"],"clientStyling":[1537,"client-styling"],"translationUrl":[513,"translation-url"],"notifications":[32],"isLoading":[32],"isNotificationsLoading":[32],"showMarkAll":[32],"limitStylingAppends":[32],"showDeleteAllPopup":[32],"hasMore":[32]},[[8,"messageDeleted","messageDeletedHandler"],[8,"messageRead","messageReadHandler"],[8,"click","clickOutsideHandle"]],{"unseenCount":["unseenCountHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-notification",{"badge":[513],"content":[513],"date":[513],"showSettings":[516,"show-settings"],"read":[516],"seen":[516],"language":[513],"sessionId":[513,"session-id"],"subscriberId":[513,"subscriber-id"],"userId":[513,"user-id"],"messageId":[513,"message-id"],"operatorId":[513,"operator-id"],"token":[513],"backendUrl":[513,"backend-url"],"redirectUrl":[513,"redirect-url"],"notificationAction":[513,"notification-action"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"clientStyling":[1537,"client-styling"],"showSettingsModal":[32],"messageSeen":[32],"messageRead":[32],"displayedContent":[32],"limitStylingAppends":[32]},[[8,"allNotificationsRead","allNotificationsReadHandler"],[8,"settingsOpened","settingsOpenedHandler"],[8,"click","clickOutsideHandle"]],{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-4522ef7e.js');
|
|
6
6
|
|
|
7
7
|
const DEFAULT_LANGUAGE = 'en';
|
|
8
8
|
const SUPPORTED_LANGUAGES = ['hu', 'en', 'tr'];
|
|
@@ -4397,7 +4397,6 @@ const NutsInboxWidget = class {
|
|
|
4397
4397
|
this.isLoading = false;
|
|
4398
4398
|
this.popoverVisible = false;
|
|
4399
4399
|
this.unseenCount = undefined;
|
|
4400
|
-
this.limitStylingAppends = false;
|
|
4401
4400
|
}
|
|
4402
4401
|
initializeHandler(newValue, oldValue) {
|
|
4403
4402
|
if (newValue !== oldValue) {
|
|
@@ -4440,6 +4439,8 @@ const NutsInboxWidget = class {
|
|
|
4440
4439
|
}
|
|
4441
4440
|
}
|
|
4442
4441
|
setupSocket() {
|
|
4442
|
+
if (this.socketRef)
|
|
4443
|
+
return;
|
|
4443
4444
|
if (this.token) {
|
|
4444
4445
|
this.socketRef = lookup(this.socketUrl, {
|
|
4445
4446
|
reconnection: true,
|
|
@@ -4478,9 +4479,6 @@ const NutsInboxWidget = class {
|
|
|
4478
4479
|
window.postMessage({ type: 'nuts-new-notifications', value: this.unseenCount }, window.location.href);
|
|
4479
4480
|
this.setupSocket();
|
|
4480
4481
|
}
|
|
4481
|
-
if (this.clientStylingUrl) {
|
|
4482
|
-
this.setClientStylingURL();
|
|
4483
|
-
}
|
|
4484
4482
|
}
|
|
4485
4483
|
handleStylingChange(newValue, oldValue) {
|
|
4486
4484
|
if (newValue !== oldValue)
|
|
@@ -4502,22 +4500,21 @@ const NutsInboxWidget = class {
|
|
|
4502
4500
|
}
|
|
4503
4501
|
}
|
|
4504
4502
|
componentDidRender() {
|
|
4505
|
-
// start custom styling area
|
|
4506
|
-
if (!this.limitStylingAppends && this.stylingContainer) {
|
|
4507
|
-
if (this.clientStyling)
|
|
4508
|
-
this.setClientStyling();
|
|
4509
|
-
if (this.clientStylingUrl)
|
|
4510
|
-
this.setClientStylingURL();
|
|
4511
|
-
this.limitStylingAppends = true;
|
|
4512
|
-
}
|
|
4513
|
-
// end custom styling area
|
|
4514
4503
|
this.positionIcon();
|
|
4515
4504
|
}
|
|
4505
|
+
componentDidLoad() {
|
|
4506
|
+
if (this.clientStyling) {
|
|
4507
|
+
this.setClientStyling();
|
|
4508
|
+
}
|
|
4509
|
+
if (this.clientStylingUrl) {
|
|
4510
|
+
this.setClientStylingURL();
|
|
4511
|
+
}
|
|
4512
|
+
}
|
|
4516
4513
|
renderBellIcon() {
|
|
4517
4514
|
return (index.h("div", { onClick: this.togglePopover, class: "BellIcon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "currentColor", class: "bi bi-bell", viewBox: "0 0 16 16" }, ' ', index.h("path", { d: "M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z" }), ' '), this.unseenCount > 0 ? (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: "nc-bell-button-dot css-0 css-1eg2znq" }, index.h("rect", { x: "1.5", y: "1.5", width: "13", height: "13", rx: "6.5", fill: "url(#paint0_linear_1722_2699)", stroke: "#1E1E26", "stroke-width": "3" }), index.h("defs", null, index.h("linearGradient", { id: "paint0_linear_1722_2699", x1: "8", y1: "13", x2: "8", y2: "3", gradientUnits: "userSpaceOnUse" }, index.h("stop", { "stop-color": "#FF512F" }), index.h("stop", { offset: "1", "stop-color": "#DD2476" }))))) : ('')));
|
|
4518
4515
|
}
|
|
4519
4516
|
render() {
|
|
4520
|
-
return (index.h("div", { key: '
|
|
4517
|
+
return (index.h("div", { key: '976f73d1e55a55aa5370f1cf1e03dd81ffe2b21a', ref: this.assignRefToStylingContainer, class: "Wrapper" }, index.h("div", { key: 'b443d739125b7b7e4798fd751e71c18cbc7ea43b', ref: this.assignRefToBell, class: "BellIconWrapper" }, !this.isLoading && this.renderBellIcon()), this.token && this.popoverVisible && (index.h("nuts-popover", { key: '0dc6e5a66747b44d6e1827cfc517dece41a215a2', "notification-action": this.notificationAction, sessionId: this.sessionId, "unseen-count": this.unseenCount, token: this.token, "backend-url": this.backendUrl, "operator-id": this.operatorId, "user-id": this.userId, language: this.language, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "translation-url": this.translationUrl }))));
|
|
4521
4518
|
}
|
|
4522
4519
|
get el() { return index.getElement(this); }
|
|
4523
4520
|
static get watchers() { return {
|
|
@@ -42551,10 +42548,10 @@ const NutsNotification = class {
|
|
|
42551
42548
|
'sub', 'sup', 'var', 'cite', 'q', 'blockquote',
|
|
42552
42549
|
]
|
|
42553
42550
|
});
|
|
42554
|
-
return (index.h("div", { key: '
|
|
42551
|
+
return (index.h("div", { key: '7a44d28edbb17352458217ca5ae8a037f95dc717', class: "Wrapper" }, index.h("div", { key: 'b72f97d79ab914a3799935a78566c2225703f5d5', class: 'NotificationContainer' + (this.messageSeen ? '' : ' Unseen'), ref: this.assignRefToStylingContainer, onClick: this.notificationActionHandler }, this.badge ? (index.h("div", { class: "AvatarContainer" }, index.h("div", { class: "Avatar" }, ((_a = systemIcons[this.badge]) === null || _a === void 0 ? void 0 : _a.icon) ? (index.h("div", { innerHTML: systemIcons[this.badge].icon })) : (index.h("img", { class: "AvatarImage", src: this.badge }))))) : (''), index.h("div", { key: 'f8dea342d9765b86f9bbd70d18861399e5dca9e3', class: "ContentContainer" }, index.h("div", { key: '9b79598e4e080641dd5db061dc4ecb0a9996b024', innerHTML: sanitizedNotificationBody }), index.h("p", { key: '74c3d2177c29bb37372109dd70d024f16f9f7904', class: "Date" }, formatDistanceToNow(new Date(this.date), {
|
|
42555
42552
|
addSuffix: true,
|
|
42556
42553
|
locale: dateFnsLocale(this.language)
|
|
42557
|
-
}))), index.h("div", { key: '
|
|
42554
|
+
}))), index.h("div", { key: 'e7bc18c53f07365223379c93888ba834cf3a1c8d', class: "RightActionsContainer" }, index.h("div", { key: 'a08b68c158023c234c9ebe237b13be536a5d5336', class: "Settings", onClick: this.toggleSettingsModal }, index.h("svg", { key: '2689a1470ef4561f1145e1b2df2eadaf2b66c5c9', width: "24", height: "24", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '9e066881d1d04b391a38a510554c8ff179786acf', d: "M20.625 15.5C20.625 16.5547 21.4453 17.375 22.5 17.375C23.5156 17.375 24.375 16.5547 24.375 15.5C24.375 14.4844 23.5156 13.625 22.5 13.625C21.4453 13.625 20.625 14.4844 20.625 15.5ZM9.375 15.5C9.375 14.4844 8.51562 13.625 7.5 13.625C6.44531 13.625 5.625 14.4844 5.625 15.5C5.625 16.5547 6.44531 17.375 7.5 17.375C8.51562 17.375 9.375 16.5547 9.375 15.5ZM16.875 15.5C16.875 14.4844 16.0156 13.625 15 13.625C13.9453 13.625 13.125 14.4844 13.125 15.5C13.125 16.5547 13.9453 17.375 15 17.375C16.0156 17.375 16.875 16.5547 16.875 15.5Z", fill: "currentColor" }))), ((_b = this.content) === null || _b === void 0 ? void 0 : _b.length) > MAX_NOTIFICATION_TEXT_LENGTH && (index.h("div", { key: 'ffc4a2ee216a99c1ebb7744dc97991c6fcd301a9', class: "AccordionArrow", innerHTML: systemIcons.arrowDown.icon, ref: this.assignRefToDropdownArrow })))), this.showSettingsModal ? (index.h("div", { class: "SettingsDropdown" }, index.h("button", { onClick: this.toggleNotificationRead }, index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M14.9434 5.17969C14.2109 4.59375 13.625 4.125 10.1387 1.60547C9.64062 1.25391 8.67383 0.375 8 0.375V0.404297C7.9707 0.404297 7.9707 0.375 7.9707 0.375C7.29688 0.375 6.33008 1.25391 5.83203 1.60547C2.3457 4.125 1.75977 4.59375 1.02734 5.17969C0.675781 5.44336 0.5 5.85352 0.5 6.26367V13.9688C0.5 14.7598 1.11523 15.375 1.90625 15.375H14.0938C14.8555 15.375 15.5 14.7598 15.5 13.9688V6.26367C15.5 5.85352 15.2949 5.44336 14.9434 5.17969ZM9.37695 11.1562C8.9668 11.4785 8.46875 11.6543 8 11.6543C7.50195 11.6543 7.00391 11.4785 6.59375 11.1562L2.375 7.8457V6.49805C2.99023 6 3.72266 5.44336 6.94531 3.12891C7.0332 3.04102 7.15039 2.95312 7.26758 2.86523C7.41406 2.74805 7.73633 2.48438 8 2.33789C8.23438 2.48438 8.55664 2.74805 8.70312 2.86523C8.82031 2.95312 8.9375 3.04102 9.02539 3.12891C12.2188 5.44336 12.9805 6 13.625 6.49805V7.8457L9.37695 11.1562Z", fill: "currentColor" })), translate$1(this.messageRead ? 'markAsUnread' : 'markAsRead', this.language)), index.h("button", { onClick: this.deleteNotification }, index.h("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M4.375 15.4375C4.375 16.1758 4.94922 16.75 5.6875 16.75H13.5625C14.2734 16.75 14.875 16.1758 14.875 15.4375V6.25H4.375V15.4375ZM11.8125 8.4375C11.8125 8.21875 12.0039 8 12.25 8C12.4688 8 12.6875 8.21875 12.6875 8.4375V14.5625C12.6875 14.8086 12.4688 15 12.25 15C12.0039 15 11.8125 14.8086 11.8125 14.5625V8.4375ZM9.1875 8.4375C9.1875 8.21875 9.37891 8 9.625 8C9.84375 8 10.0625 8.21875 10.0625 8.4375V14.5625C10.0625 14.8086 9.84375 15 9.625 15C9.37891 15 9.1875 14.8086 9.1875 14.5625V8.4375ZM6.5625 8.4375C6.5625 8.21875 6.75391 8 7 8C7.21875 8 7.4375 8.21875 7.4375 8.4375V14.5625C7.4375 14.8086 7.21875 15 7 15C6.75391 15 6.5625 14.8086 6.5625 14.5625V8.4375ZM15.3125 3.625H12.25L11.9219 2.99609C11.8398 2.85938 11.7031 2.75 11.5391 2.75H7.68359C7.51953 2.75 7.38281 2.85938 7.30078 2.99609L7 3.625H3.9375C3.69141 3.625 3.5 3.84375 3.5 4.0625V4.9375C3.5 5.18359 3.69141 5.375 3.9375 5.375H15.3125C15.5312 5.375 15.75 5.18359 15.75 4.9375V4.0625C15.75 3.84375 15.5312 3.625 15.3125 3.625Z", fill: "currentColor" })), translate$1('removeMessage', this.language)))) : ('')));
|
|
42558
42555
|
}
|
|
42559
42556
|
get el() { return index.getElement(this); }
|
|
42560
42557
|
static get watchers() { return {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { getTranslations } from "../../utils/locale.utils";
|
|
2
2
|
import { h } from "@stencil/core";
|
|
3
3
|
import { io } from "socket.io-client";
|
|
4
|
+
import { Build } from "@stencil/core";
|
|
4
5
|
import { initializeSession } from "../../api/methods";
|
|
5
6
|
import { notificationCache } from "../../cache";
|
|
6
7
|
export class NutsInboxWidget {
|
|
@@ -16,6 +17,8 @@ export class NutsInboxWidget {
|
|
|
16
17
|
};
|
|
17
18
|
this.togglePopover = () => {
|
|
18
19
|
this.popoverVisible = !this.popoverVisible;
|
|
20
|
+
if (!Build.isBrowser)
|
|
21
|
+
return;
|
|
19
22
|
window.postMessage({ type: 'nuts-popover-isVisible', value: this.popoverVisible }, window.location.href);
|
|
20
23
|
};
|
|
21
24
|
this.setClientStyling = () => {
|
|
@@ -24,6 +27,8 @@ export class NutsInboxWidget {
|
|
|
24
27
|
this.stylingContainer.prepend(sheet);
|
|
25
28
|
};
|
|
26
29
|
this.setClientStylingURL = () => {
|
|
30
|
+
if (!Build.isBrowser)
|
|
31
|
+
return;
|
|
27
32
|
let url = new URL(this.clientStylingUrl);
|
|
28
33
|
let cssFile = document.createElement('style');
|
|
29
34
|
fetch(url.href)
|
|
@@ -63,9 +68,10 @@ export class NutsInboxWidget {
|
|
|
63
68
|
this.isLoading = false;
|
|
64
69
|
this.popoverVisible = false;
|
|
65
70
|
this.unseenCount = undefined;
|
|
66
|
-
this.limitStylingAppends = false;
|
|
67
71
|
}
|
|
68
72
|
initializeHandler(newValue, oldValue) {
|
|
73
|
+
if (!Build.isBrowser)
|
|
74
|
+
return;
|
|
69
75
|
if (newValue !== oldValue) {
|
|
70
76
|
if (this.subscriberId && this.operatorId && this.applicationIdentifier) {
|
|
71
77
|
initializeSession({
|
|
@@ -82,6 +88,8 @@ export class NutsInboxWidget {
|
|
|
82
88
|
}
|
|
83
89
|
}
|
|
84
90
|
clickOutsideHandle(ev) {
|
|
91
|
+
if (!Build.isBrowser)
|
|
92
|
+
return;
|
|
85
93
|
if (ev.composedPath().some((elem) => this.el === elem)) {
|
|
86
94
|
return;
|
|
87
95
|
}
|
|
@@ -91,10 +99,14 @@ export class NutsInboxWidget {
|
|
|
91
99
|
resetUnseenCount() {
|
|
92
100
|
// reset the unseen count if all notif are marked as read
|
|
93
101
|
this.unseenCount = 0;
|
|
102
|
+
if (!Build.isBrowser)
|
|
103
|
+
return;
|
|
94
104
|
window.postMessage({ type: 'all-notifications-read', value: true }, window.location.href);
|
|
95
105
|
}
|
|
96
106
|
closePopoverHandler() {
|
|
97
107
|
this.popoverVisible = false;
|
|
108
|
+
if (!Build.isBrowser)
|
|
109
|
+
return;
|
|
98
110
|
window.postMessage({ type: 'nuts-popover-isVisible', value: this.popoverVisible }, window.location.href);
|
|
99
111
|
}
|
|
100
112
|
positionIcon() {
|
|
@@ -106,6 +118,10 @@ export class NutsInboxWidget {
|
|
|
106
118
|
}
|
|
107
119
|
}
|
|
108
120
|
setupSocket() {
|
|
121
|
+
if (!Build.isBrowser)
|
|
122
|
+
return;
|
|
123
|
+
if (this.socketRef)
|
|
124
|
+
return;
|
|
109
125
|
if (this.token) {
|
|
110
126
|
this.socketRef = io(this.socketUrl, {
|
|
111
127
|
reconnection: true,
|
|
@@ -128,11 +144,15 @@ export class NutsInboxWidget {
|
|
|
128
144
|
});
|
|
129
145
|
this.socketRef.on('unseen_count_changed', (data) => {
|
|
130
146
|
this.unseenCount = data.unseenCount;
|
|
147
|
+
if (!Build.isBrowser)
|
|
148
|
+
return;
|
|
131
149
|
window.postMessage({ type: 'nuts-new-notifications', value: this.unseenCount }, window.location.href);
|
|
132
150
|
});
|
|
133
151
|
}
|
|
134
152
|
}
|
|
135
153
|
async connectedCallback() {
|
|
154
|
+
if (!Build.isBrowser)
|
|
155
|
+
return;
|
|
136
156
|
if (this.subscriberId && this.operatorId && this.applicationIdentifier) {
|
|
137
157
|
const initializeSessionResult = await initializeSession({
|
|
138
158
|
baseUrl: this.baseUrl,
|
|
@@ -144,9 +164,6 @@ export class NutsInboxWidget {
|
|
|
144
164
|
window.postMessage({ type: 'nuts-new-notifications', value: this.unseenCount }, window.location.href);
|
|
145
165
|
this.setupSocket();
|
|
146
166
|
}
|
|
147
|
-
if (this.clientStylingUrl) {
|
|
148
|
-
this.setClientStylingURL();
|
|
149
|
-
}
|
|
150
167
|
}
|
|
151
168
|
handleStylingChange(newValue, oldValue) {
|
|
152
169
|
if (newValue !== oldValue)
|
|
@@ -168,22 +185,21 @@ export class NutsInboxWidget {
|
|
|
168
185
|
}
|
|
169
186
|
}
|
|
170
187
|
componentDidRender() {
|
|
171
|
-
// start custom styling area
|
|
172
|
-
if (!this.limitStylingAppends && this.stylingContainer) {
|
|
173
|
-
if (this.clientStyling)
|
|
174
|
-
this.setClientStyling();
|
|
175
|
-
if (this.clientStylingUrl)
|
|
176
|
-
this.setClientStylingURL();
|
|
177
|
-
this.limitStylingAppends = true;
|
|
178
|
-
}
|
|
179
|
-
// end custom styling area
|
|
180
188
|
this.positionIcon();
|
|
181
189
|
}
|
|
190
|
+
componentDidLoad() {
|
|
191
|
+
if (this.clientStyling) {
|
|
192
|
+
this.setClientStyling();
|
|
193
|
+
}
|
|
194
|
+
if (this.clientStylingUrl) {
|
|
195
|
+
this.setClientStylingURL();
|
|
196
|
+
}
|
|
197
|
+
}
|
|
182
198
|
renderBellIcon() {
|
|
183
199
|
return (h("div", { onClick: this.togglePopover, class: "BellIcon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "currentColor", class: "bi bi-bell", viewBox: "0 0 16 16" }, ' ', h("path", { d: "M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z" }), ' '), this.unseenCount > 0 ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: "nc-bell-button-dot css-0 css-1eg2znq" }, h("rect", { x: "1.5", y: "1.5", width: "13", height: "13", rx: "6.5", fill: "url(#paint0_linear_1722_2699)", stroke: "#1E1E26", "stroke-width": "3" }), h("defs", null, h("linearGradient", { id: "paint0_linear_1722_2699", x1: "8", y1: "13", x2: "8", y2: "3", gradientUnits: "userSpaceOnUse" }, h("stop", { "stop-color": "#FF512F" }), h("stop", { offset: "1", "stop-color": "#DD2476" }))))) : ('')));
|
|
184
200
|
}
|
|
185
201
|
render() {
|
|
186
|
-
return (h("div", { key: '
|
|
202
|
+
return (h("div", { key: '976f73d1e55a55aa5370f1cf1e03dd81ffe2b21a', ref: this.assignRefToStylingContainer, class: "Wrapper" }, h("div", { key: 'b443d739125b7b7e4798fd751e71c18cbc7ea43b', ref: this.assignRefToBell, class: "BellIconWrapper" }, !this.isLoading && this.renderBellIcon()), this.token && this.popoverVisible && (h("nuts-popover", { key: '0dc6e5a66747b44d6e1827cfc517dece41a215a2', "notification-action": this.notificationAction, sessionId: this.sessionId, "unseen-count": this.unseenCount, token: this.token, "backend-url": this.backendUrl, "operator-id": this.operatorId, "user-id": this.userId, language: this.language, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "translation-url": this.translationUrl }))));
|
|
187
203
|
}
|
|
188
204
|
static get is() { return "nuts-inbox-widget"; }
|
|
189
205
|
static get encapsulation() { return "shadow"; }
|
|
@@ -466,8 +482,7 @@ export class NutsInboxWidget {
|
|
|
466
482
|
return {
|
|
467
483
|
"isLoading": {},
|
|
468
484
|
"popoverVisible": {},
|
|
469
|
-
"unseenCount": {}
|
|
470
|
-
"limitStylingAppends": {}
|
|
485
|
+
"unseenCount": {}
|
|
471
486
|
};
|
|
472
487
|
}
|
|
473
488
|
static get events() {
|