@telia-ace/widget-types-grid 1.0.30-experimental.0 → 1.0.30-experimental.10

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/index.js CHANGED
@@ -1,955 +1,26 @@
1
- var ve = Object.defineProperty, Ee = Object.defineProperties;
2
- var Ce = Object.getOwnPropertyDescriptors;
3
- var H = Object.getOwnPropertySymbols;
4
- var re = Object.prototype.hasOwnProperty, ae = Object.prototype.propertyIsEnumerable;
5
- var Z = (t, n, e) => n in t ? ve(t, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[n] = e, m = (t, n) => {
6
- for (var e in n || (n = {}))
7
- re.call(n, e) && Z(t, e, n[e]);
8
- if (H)
9
- for (var e of H(n))
10
- ae.call(n, e) && Z(t, e, n[e]);
11
- return t;
12
- }, C = (t, n) => Ee(t, Ce(n));
13
- var N = (t, n) => {
14
- var e = {};
15
- for (var s in t)
16
- re.call(t, s) && n.indexOf(s) < 0 && (e[s] = t[s]);
17
- if (t != null && H)
18
- for (var s of H(t))
19
- n.indexOf(s) < 0 && ae.call(t, s) && (e[s] = t[s]);
20
- return e;
21
- };
22
- var L = (t, n, e) => (Z(t, typeof n != "symbol" ? n + "" : n, e), e);
23
- import { css as de, ThemeProvider as Oe, useTheme as Se } from "@emotion/react";
24
- import { asDescriptor as ce, ComponentPlatform as Ae, createComponentModel as xe, ComponentQuery as De, WidgetRenderState as O } from "@telia-ace/widget-core";
25
- import { Grid as he, useRouteData as Me, useRouter as Ne, useProperties as pe, useContext as ne, useContainer as j, useComponentNode as se, useScroll as me, transitionComposer as $e, paddedBorderTabStyle as Le, useComponent as ke, useComponentDescriptor as Pe, filterCssPropsStyle as Re, Typography as Ve, useComponentPlatform as fe, useIsMounted as _e, useColumns as Ie, useLayout as ze, ComponentNodeContext as Be, ComponentPropertyContext as Te, filterCssProps as je } from "@telia-ace/widget-ui";
26
- import d, { useState as B, forwardRef as ge, useMemo as Ge, Suspense as We, useEffect as T } from "react";
27
- import P from "@emotion/styled";
28
- import { appendClassNames as Y, notifyDataLoaded as Fe, lock as J, removeNullAndUndefinedValues as le, uuid as He } from "@telia-ace/widget-utilities";
29
- import { TransitionGroup as Ke, Transition as Ue } from "react-transition-group";
30
- import { Switch as Ye, Route as X } from "react-router";
31
- import { onWidgetUrl as qe } from "@telia-ace/widget-routing";
32
- import { readStorage as $, StorageMedium as E, createStorageWriter as _, StorageCategory as I, StorageScope as Qe } from "@telia-ace/widget-services";
33
- import { supportBootstrapping as Ze } from "@webprovisions/bootstrapping";
34
- import { WidgetState as Je, WidgetType as Xe } from "@webprovisions/platform";
35
- var te = /* @__PURE__ */ ((t) => (t.back = "back", t.forth = "forth", t))(te || {});
36
- const et = (t, n, e) => typeof e[t] == "number" && typeof e[n] == "number" && e[t] > e[n] ? "back" : "forth", tt = ({ views: t, location: n, render: e }) => /* @__PURE__ */ d.createElement(
37
- Ye,
38
- {
39
- location: n && C(m({}, n), {
40
- pathname: n.pathname.split("?")[0]
41
- })
42
- },
43
- [
44
- ...Object.keys(t).filter((s) => !!t[s].path),
45
- ...Object.keys(t).filter((s) => !t[s].path)
46
- ].map((s) => {
47
- const { path: i } = t[s];
48
- return i ? Array.isArray(i) ? i.map((o) => /* @__PURE__ */ d.createElement(X, { key: s, exact: !0, path: o, render: () => e(s) })) : /* @__PURE__ */ d.createElement(X, { key: s, exact: !0, path: i, render: () => e(s) }) : /* @__PURE__ */ d.createElement(X, { key: s, render: () => e(s) });
49
- })
50
- ), ye = tt, nt = P.div`
51
- position: relative;
52
- width: 100%;
53
- flex: 1;
54
- `, st = P(he)`
55
- position: absolute;
56
- left: 0;
57
- right: 0;
58
- ${(t) => !!t.animationCss && t.animationCss}
59
- ${(t) => !!t.scrollableCss && t.scrollableCss}
60
- `, it = {
61
- index: 1,
62
- search: 2,
63
- browse: 3,
64
- guide: 4,
65
- contact: 5,
66
- "contact-method": 6,
67
- conversation: 7
68
- }, ot = (e) => {
69
- var s = e, { className: t = "" } = s, n = N(s, ["className"]);
70
- const [i, o] = B("index"), [r, a] = B(te.forth), c = Me(), h = Ne(), u = pe(), l = ne(), p = j(), f = se(), { gap: w = "0" } = l, F = u, { columns: y = 1, animation: g = "none", scrollable: b = !1 } = F, S = N(F, ["columns", "animation", "scrollable"]), [G, R] = me(b);
71
- if (!f || !h)
72
- return null;
73
- const { location: W } = h;
74
- c.name !== i && c.name !== "" && g && (a(et(i, c.name, it)), o(c.name));
75
- const { views: x } = p.get("$settings");
76
- if (!Object.keys(x).length)
77
- return null;
78
- const D = (v, M, V) => {
79
- const A = Q(M, V), z = f.getChildren(v)[0];
80
- return /* @__PURE__ */ d.createElement(
81
- st,
82
- C(m(C(m(m({}, n), S), {
83
- scrollableCss: G,
84
- ref: R,
85
- columns: y,
86
- gap: w
87
- }), A), {
88
- className: Y(t, "humany-view")
89
- }),
90
- /* @__PURE__ */ d.createElement(ie, { id: z.id, branch: "default" })
91
- );
92
- }, Q = (v, M) => {
93
- if (g === "slide" || g === "fade")
94
- return {
95
- animationCss: $e.composeViewTransition(
96
- v,
97
- g,
98
- M
99
- ),
100
- ["data-state"]: v
101
- };
102
- };
103
- return /* @__PURE__ */ d.createElement(nt, { className: "humany-animated-view" }, /* @__PURE__ */ d.createElement(
104
- Ke,
105
- {
106
- component: null,
107
- childFactory: (v) => d.cloneElement(v, { direction: r })
108
- },
109
- /* @__PURE__ */ d.createElement(
110
- Ue,
111
- {
112
- key: i,
113
- timeout: { enter: 500, exit: 500 },
114
- onEnter: (v) => v == null ? void 0 : v.clientHeight,
115
- unmountOnExit: !0,
116
- direction: te.forth
117
- },
118
- (v, { direction: M }) => /* @__PURE__ */ d.createElement(
119
- ye,
120
- {
121
- views: x,
122
- location: W,
123
- render: (V) => D(V, v, M)
124
- }
125
- )
126
- )
127
- ));
128
- }, rt = ot, at = P(he)`
129
- ${(t) => !!t.scrollableCss && t.scrollableCss}
130
- `, ct = (e) => {
131
- var s = e, { className: t = "" } = s, n = N(s, ["className"]);
132
- const i = pe(), o = ne(), r = j(), a = se(), { views: c } = r.get("$settings"), { gap: h = "0" } = o, g = i, { columns: u = 1, animation: l = "none", scrollable: p = !1 } = g, f = N(g, ["columns", "animation", "scrollable"]), [w, y] = me(p);
133
- return a ? /* @__PURE__ */ d.createElement(
134
- at,
135
- C(m(m({}, n), f), {
136
- scrollableCss: w,
137
- ref: y,
138
- columns: u,
139
- gap: h,
140
- className: Y(t, "humany-view")
141
- }),
142
- /* @__PURE__ */ d.createElement(
143
- ye,
144
- {
145
- views: c,
146
- render: (b) => {
147
- const S = a.getChildren(b)[0];
148
- return /* @__PURE__ */ d.createElement(ie, { id: S.id, node: S, branch: "default" });
149
- }
150
- }
151
- )
152
- ) : null;
153
- }, lt = ct, q = (t) => {
154
- var n, e;
155
- return de`
156
- outline: none;
157
- box-sizing: border-box;
158
- * {
159
- box-sizing: border-box;
160
- outline: none;
161
- }
162
-
163
- grid-column: ${t["data-indent"] ? `${t["data-indent"] + 1} / ${t["data-indent"] + (t["data-width"] || 0) + 1}` : `span ${t["data-width"]}`};
164
-
165
- ${((n = t.theme.fonts) == null ? void 0 : n.type) && `
166
- font-family: ${t.theme.fonts.type};
167
-
168
- input, textarea {
169
- font-family: ${t.theme.fonts.type};
170
- }
171
- `}
172
-
173
- ${((e = t.theme.fonts) == null ? void 0 : e.base) && `
174
- font-size: ${t.theme.fonts.base};
175
- `}
176
-
177
- &:focus-visible {
178
- ${Le(t)};
179
- }
180
- `;
181
- }, ut = P(lt)`
182
- ${(t) => q(t)}
183
- `, dt = P(rt)`
184
- ${(t) => q(t)}
185
- `, ht = P.div`
186
- text-align: center;
187
- ${(t) => {
188
- var n, e, s;
189
- return typeof ((n = t.theme.colors) == null ? void 0 : n.warning) != "undefined" && de`
190
- color: ${(e = t.theme.colors) == null ? void 0 : e.warning};
191
- border: 2px dashed ${(s = t.theme.colors) == null ? void 0 : s.warning};
192
- `;
193
- }}
194
- ${(t) => typeof t.theme.borderRadius != "undefined" && `border-radius: ${t.theme.borderRadius};`}
195
- ${(t) => q(t)}
196
- `, pt = ge(
197
- (i, s) => {
198
- var o = i, { className: t = "", children: n } = o, e = N(o, ["className", "children"]);
199
- const r = ke(), { name: a, type: c, id: h } = Pe(), u = Ge(() => r ? P(r)`
200
- ${q}
201
- ${Re}
202
- ` : null, [r]);
203
- return typeof r == "undefined" ? null : r === null || u === null ? process.env.NODE_ENV !== "production" ? /* @__PURE__ */ d.createElement(
204
- ht,
205
- C(m({}, e), {
206
- title: `type: ${c}, definition-id: ${a}, instance-id: ${h}`,
207
- className: Y(t, "humany-non-resolved-component")
208
- }),
209
- /* @__PURE__ */ d.createElement(Ve, { variant: "h5" }, "Non Resolved Component Type")
210
- ) : null : /* @__PURE__ */ d.createElement(We, { fallback: null }, /* @__PURE__ */ d.createElement(
211
- u,
212
- C(m({
213
- ref: s
214
- }, e), {
215
- className: Y(
216
- t,
217
- "humany-component",
218
- `humany-component-${a}`
219
- )
220
- }),
221
- n
222
- ));
223
- }
224
- ), mt = pt, ft = (t) => {
225
- const n = se(t), e = fe(), [s, i] = B({}), o = _e();
226
- return T(() => {
227
- n && o.current && i(n.attributes.properties);
228
- }, [n, t, o]), T(() => {
229
- if (e) {
230
- const r = e.events.subscribe(
231
- "components:properties-changed",
232
- (a, c) => {
233
- n === c.node && o.current && i(c.node.attributes.properties);
234
- }
235
- );
236
- return () => {
237
- r();
238
- };
239
- }
240
- }, [e, o, t, n]), s;
241
- }, gt = (t, n) => n ? !0 : typeof t == "string" ? t === "full" : t > 0, yt = ge(
242
- (h, c) => {
243
- var u = h, { className: t = "", id: n, branch: e, node: s, ariaLabel: i, tabIndex: o, context: r } = u, a = N(u, ["className", "id", "branch", "node", "ariaLabel", "tabIndex", "context"]);
244
- const l = fe(), p = j(), [f, w] = B(), y = Ie(), g = ne(n), b = ft(n), { size: S = "none", indent: G = 0 } = ze(n), R = gt(S, s);
245
- if (T(() => {
246
- if (l) {
247
- if (n && !s) {
248
- const A = l.nodes.get(n);
249
- if (A && (w(ce(A, e)), R)) {
250
- const z = A.mount(p);
251
- return () => {
252
- z();
253
- };
254
- }
255
- } else if (s) {
256
- w(ce(s, e));
257
- const A = s.mount(p);
258
- return () => {
259
- A();
260
- };
261
- }
262
- }
263
- }, [l, n, s, R]), !f || !R)
264
- return null;
265
- const V = m(m({}, g), r || {}), {
266
- cardinal: x,
267
- fonts: D = {},
268
- accessibility: Q = {}
269
- } = V, F = N(V, [
270
- "cardinal",
271
- "fonts",
272
- "accessibility"
273
- ]), v = {
274
- type: D.type,
275
- base: D.base || "16px",
276
- small: D.small || "0.8em",
277
- normal: D.normal || "1em",
278
- medium: D.medium || "1.2em",
279
- large: D.large || "1.6em",
280
- huge: D.huge || "2.5em"
281
- }, M = C(m({}, F), {
282
- fonts: v,
283
- accessibility: m({}, Q)
284
- });
285
- return typeof x == "number" && (M.sizes = {
286
- cardinal: x,
287
- small: `${x}px`,
288
- normal: `${x * 3}px`,
289
- medium: `${x * 5}px`,
290
- large: `${x * 8}px`
291
- }), /* @__PURE__ */ d.createElement(Oe, { theme: M }, /* @__PURE__ */ d.createElement(Be.Provider, { value: f }, /* @__PURE__ */ d.createElement(Te.Provider, { value: b }, (() => {
292
- const A = m({
293
- "data-width": S === "full" ? y : Math.min(S, y),
294
- "data-indent": G,
295
- "data-name": f.name,
296
- "data-node-id": f.id,
297
- "data-component-type": f.type,
298
- "aria-label": i,
299
- tabIndex: o,
300
- id: f.id,
301
- role: b && b.role
302
- }, a);
303
- switch (f.type) {
304
- case "view":
305
- return typeof b.animation == "string" && b.animation !== "none" ? /* @__PURE__ */ d.createElement(dt, C(m({}, A), { className: t })) : /* @__PURE__ */ d.createElement(ut, C(m({}, A), { className: t }));
306
- default: {
307
- const z = je(b);
308
- return /* @__PURE__ */ d.createElement(
309
- mt,
310
- C(m(m({
311
- ref: c
312
- }, A), z), {
313
- className: t
314
- })
315
- );
316
- }
317
- }
318
- })())));
319
- }
320
- ), ie = yt, bt = ({ builder: t }) => {
321
- const n = j(), [e, s] = B(null);
322
- return T(() => {
323
- n.getAsync("components").then((i) => t(i).then((o) => {
324
- s(o);
325
- }));
326
- }, []), T(() => () => {
327
- e && n.getAsync("components").then((i) => {
328
- i.nodes.detached = i.nodes.detached.filter(
329
- (o) => o.id !== e.id
330
- );
331
- });
332
- }, [e]), e ? /* @__PURE__ */ d.createElement(ie, { id: e.id, node: e, branch: "default" }) : null;
333
- }, wt = bt, vt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
334
- __proto__: null,
335
- default: wt
336
- }, Symbol.toStringTag, { value: "Module" })), Et = d.lazy(() => Promise.resolve().then(() => vt)), Ct = ({ showSearch: t = !1 }) => {
337
- const n = Se(), e = j();
338
- return /* @__PURE__ */ d.createElement(d.Suspense, { fallback: null }, /* @__PURE__ */ d.createElement(
339
- Et,
340
- {
341
- builder: (s) => e.get("settings").then((i) => {
342
- var h;
343
- const { properties: o, context: r } = Object.keys(i.components).reduce(
344
- (u, l) => (i.components[l].type === "not-found" && (u.properties = i.components[l].properties, u.context = i.components[l].context), u),
345
- { properties: {}, context: {} }
346
- );
347
- o.showSearch = t;
348
- const a = s.createNode("area", { detached: !0 });
349
- if (a.name = "not-found-area", a.writeLayout({
350
- size: "full"
351
- }), t) {
352
- const u = Object.keys(i.components).reduce(
353
- (p, f) => i.components[f].type === "search" ? i.components[f].properties : p,
354
- {}
355
- ), l = s.createNode("search", { detached: !0 });
356
- l.writeLayout({ size: "full" }), l.writeProperties(m({
357
- "css-margin-bottom": ((h = n == null ? void 0 : n.sizes) == null ? void 0 : h.normal) || "15px"
358
- }, u)), a.appendChild(l);
359
- }
360
- const c = s.createNode("not-found", { detached: !0 });
361
- return c.writeLayout({ size: "full" }), c.writeProperties(o), c.writeContext(r), a.appendChild(c), a;
362
- })
363
- }
364
- ));
365
- }, Jt = Ct, Ot = (t) => {
366
- if (t) {
367
- const { type: n, content: e } = t;
368
- switch (n) {
369
- case "FontAwesome":
370
- return `<i class="humany-icon fa fa-${e}"></i>`;
371
- case "Uri":
372
- return `<i class="humany-icon humany-custom-icon" style="background: url(${e}) no-repeat center center;background-size: contain;"></i>`;
373
- default:
374
- return "";
375
- }
376
- }
377
- }, St = (t) => {
378
- const n = (i, o) => {
379
- !i || (o ? i.classList.add("humany-tabbing") : i.classList.remove("humany-tabbing"));
380
- }, e = (i) => {
381
- i.key === "Tab" ? n(t, !0) : i.key === "Enter" && document.activeElement && document.activeElement.classList.contains("humany-trigger") || n(t, !1);
382
- }, s = (i) => {
383
- document.activeElement && document.activeElement.classList.contains("humany-trigger") && document.activeElement.classList.contains("humany-tabbing") || n(t, !1);
384
- };
385
- return document.addEventListener("keydown", e), document.addEventListener("click", s), () => {
386
- document.removeEventListener("keydown", e), document.removeEventListener("click", s);
387
- };
388
- };
389
- function At(t, n) {
390
- const { symbol: e, widgetName: s, label: i = "", ariaLabel: o = "", tooltip: r = "" } = n;
391
- t.classList.add("humany-trigger"), t.classList.add(`humany_${s}`), i.length && t.classList.add("humany-has-text"), o.length && !t.getAttribute("aria-label") && t.setAttribute("aria-label", o), o.length && !t.getAttribute("tabindex") && t.setAttribute("tabindex", "0"), r.length && !t.getAttribute("title") && t.setAttribute("title", r);
392
- const a = Ot(e) || "";
393
- return t.innerHTML = `${a}
394
- <span class="humany-close">
395
- <svg width="18" height="9" viewBox="0 0 18 9" fill="none" xmlns="http://www.w3.org/2000/svg">
396
- <path d="M9 9C8.81794 9.00045 8.63759 8.96634 8.46939 8.89965C8.3012 8.83295 8.14851 8.735 8.02015 8.61145L0.194523 1.12367C0.068294 0.99862 -0.00155266 0.831133 2.61958e-05 0.657285C0.00160506 0.483436 0.0744832 0.317136 0.202964 0.194202C0.331445 0.0712675 0.505249 0.00153576 0.686941 2.50649e-05C0.868634 -0.00148563 1.04368 0.0653456 1.17437 0.186125L9 7.6739L16.8256 0.186125C16.9563 0.0653456 17.1314 -0.00148563 17.3131 2.50649e-05C17.4948 0.00153576 17.6686 0.0712675 17.797 0.194202C17.9255 0.317136 17.9984 0.483436 18 0.657285C18.0016 0.831133 17.9317 0.99862 17.8055 1.12367L9.97985 8.61145C9.85149 8.735 9.6988 8.83295 9.53061 8.89965C9.36241 8.96634 9.18206 9.00045 9 9Z" fill="white"/>
397
- </svg>
398
- </span>
399
- <span class="humany-loader">
400
- <svg viewBox="25 25 50 50">
401
- <circle
402
- cx="50"
403
- cy="50"
404
- r="20"
405
- fill="none"
406
- stroke="#000"
407
- stroke-width="2"
408
- stroke-miterlimit="10" />
409
- </svg>
410
- </span>
411
- ${i.length ? `<span>${i}</span>` : ""}`, setTimeout(() => t && t.classList.add("humany-rendered")), St(t);
412
- }
413
- function xt(t, n) {
414
- t instanceof HTMLElement ? (n && t.setAttribute("title", n), t.classList.remove("humany-active"), t.classList.remove("humany-loading")) : t instanceof Array && t.forEach((e) => {
415
- n && e.setAttribute("title", n), e.classList.remove("humany-active"), e.classList.remove("humany-loading");
416
- });
417
- }
418
- function Dt(t) {
419
- t instanceof HTMLElement ? (t.classList.remove("humany-active"), t.classList.add("humany-loading")) : t instanceof Array && t.forEach((n) => {
420
- n.classList.remove("humany-active"), n.classList.add("humany-loading");
421
- });
422
- }
423
- function be(t, n) {
424
- t instanceof HTMLElement ? (n && t.setAttribute("title", n), t.classList.add("humany-active"), t.classList.remove("humany-loading")) : t instanceof Array && t.forEach((e) => {
425
- n && e.setAttribute("title", n), e.classList.add("humany-active"), e.classList.remove("humany-loading");
426
- });
427
- }
428
- var k = /* @__PURE__ */ ((t) => (t.Inline = "inline", t.Link = "link", t.Badge = "badge", t.Unsupported = "unsupported", t))(k || {});
429
- const Mt = (t, n) => t && n ? "both" : t ? "widgetDOM" : n ? "triggerDOM" : "none", we = (t) => t ? typeof t == "boolean" && t ? "link" : typeof t == "object" && !Array.isArray(t) ? "badge" : "unsupported" : "inline", Nt = (t, n, e, s, i = !1) => {
430
- var h, u;
431
- const o = Mt(
432
- n,
433
- e
434
- ), r = we(s), a = {
435
- widgetDOMElement: n ? n.cloneNode(!0) : void 0,
436
- triggerDOMElement: e ? e.cloneNode(!0) : void 0
437
- }, c = {
438
- triggerType: r,
439
- cachedOriginals: a,
440
- widgetDOMElement: document.createElement("div")
441
- };
442
- switch (o) {
443
- case "both": {
444
- c.widgetDOMElement = n || document.createElement("div"), r !== "inline" && (c.triggerDOMElement = e);
445
- break;
446
- }
447
- case "widgetDOM": {
448
- if (c.widgetDOMElement = n || document.createElement("div"), r !== "inline") {
449
- const l = document.body.appendChild(document.createElement("a"));
450
- r === "link" && (l.innerText = t), c.triggerDOMElement = l;
451
- }
452
- break;
453
- }
454
- case "triggerDOM": {
455
- const l = document.createElement("div");
456
- c.widgetDOMElement = l, r === "inline" ? (l.id = (e == null ? void 0 : e.id) || "", i ? (l.style.display = "none", (h = e == null ? void 0 : e.parentNode) == null || h.appendChild(l), c.callback = () => {
457
- var p;
458
- (p = e == null ? void 0 : e.parentNode) == null || p.replaceChild(
459
- l,
460
- e
461
- ), l.style.display = (e == null ? void 0 : e.style.display) || "block";
462
- }) : (u = e == null ? void 0 : e.parentNode) == null || u.replaceChild(
463
- l,
464
- e
465
- ), c.cachedOriginals.widgetDOMElement = e, c.cachedOriginals.triggerDOMElement = void 0) : (c.widgetDOMElement = document.body.appendChild(l), c.triggerDOMElement = e);
466
- break;
467
- }
468
- case "none": {
469
- const l = document.body.appendChild(document.createElement("div"));
470
- if (c.widgetDOMElement = l, r !== "inline") {
471
- const p = document.body.appendChild(document.createElement("a"));
472
- r === "link" && (p.innerText = t), c.triggerDOMElement = p;
473
- }
474
- break;
475
- }
476
- }
477
- return c;
478
- }, $t = "modals";
479
- class Lt {
480
- constructor(n, e) {
481
- L(this, "container");
482
- L(this, "unsubscribe", []);
483
- this.options = e, this.container = n.createChild(this), this.container.register("widgetDOMElement", this.options.widgetDOMElement), this.container.register("triggerDOMElement", this.options.triggerDOMElement);
484
- const s = this.container.get("$widget");
485
- this.options.widgetDOMElement.classList.add("humany-widget"), this.options.widgetDOMElement.classList.add(`humany_${s.name}`);
486
- const i = n.get("widgetDOMElements") || [];
487
- n.register("widgetDOMElements", [
488
- ...i,
489
- this.options.widgetDOMElement
490
- ]);
491
- }
492
- render() {
493
- const { widgetDOMElement: n, triggerDOMElement: e } = this.options, s = this.container.get("$widget");
494
- return n.getAttribute("data-rendered") === "true" ? Promise.resolve() : (e && this.options.triggerType === k.Badge && Dt(e), import("./render.99ff2912.js").then((i) => i.default(this.container, n)).then(() => {
495
- if (n.setAttribute("data-rendered", "true"), e && this.options.triggerType === k.Badge) {
496
- const o = this.options.triggerOptions.openTooltip;
497
- be(e, o);
498
- }
499
- Fe(this.container, n);
500
- const i = this.container.get("$environment").widgets.all();
501
- $(
502
- this.container,
503
- $t,
504
- E.Session
505
- ).then((o) => {
506
- o && o.forEach((r) => {
507
- i.find(
508
- (a) => a.name === r.name && a.state === "activated"
509
- ) && s.events.dispatch("widget:modal-opened", r);
510
- });
511
- });
512
- }));
513
- }
514
- renderBadge(n) {
515
- const { triggerDOMElement: e } = this.options;
516
- if (!e)
517
- return;
518
- e.getAttribute("role") || e.setAttribute("role", "button");
519
- const { name: s } = this.container.get("$widget"), { label: i, symbol: o, ariaLabel: r, closedTooltip: a, openTooltip: c } = n, h = { closedTooltip: a, openTooltip: c };
520
- this.options.triggerOptions = h;
521
- const u = At(e, {
522
- label: i,
523
- symbol: o,
524
- ariaLabel: r,
525
- widgetName: s,
526
- tooltip: a
527
- });
528
- this.unsubscribe.push(u);
529
- }
530
- dispose() {
531
- return import("./unmount.b0816844.js").then((n) => {
532
- var i, o, r, a;
533
- const { triggerDOMElement: e, widgetDOMElement: s } = this.options;
534
- n.default(s), this.options.cachedOriginals.widgetDOMElement && s && ((i = s.parentNode) == null || i.replaceChild(
535
- this.options.cachedOriginals.widgetDOMElement,
536
- s
537
- )), this.options.cachedOriginals.triggerDOMElement && e && ((o = e.parentNode) == null || o.replaceChild(
538
- this.options.cachedOriginals.triggerDOMElement,
539
- e
540
- )), this.unsubscribe.forEach((c) => {
541
- c();
542
- }), (r = s.parentNode) == null || r.removeChild(s), (a = e == null ? void 0 : e.parentNode) == null || a.removeChild(e);
543
- });
544
- }
545
- }
546
- const K = "changesets", kt = (t) => {
547
- const n = { tags: t.tags };
548
- return t.context && typeof t.context != "function" && (n.context = t.context), t.properties && typeof t.properties != "function" && (n.properties = t.properties), t.layout && typeof t.layout != "function" && (n.layout = t.layout), n;
549
- };
550
- class oe {
551
- constructor(n, e) {
552
- this.container = n, this.storageWriter = e;
553
- }
554
- static create(n) {
555
- return _(n, K, I.Necessary, {
556
- medium: E.Local
557
- }).then((e) => new oe(n, e));
558
- }
559
- write(n, e, s, i) {
560
- return J(this)(() => $(
561
- this.container,
562
- K,
563
- E.Local
564
- ).then((o = {}) => {
565
- const { keys: r = [], items: a = {} } = o, c = r.indexOf(n);
566
- return c > -1 && r.splice(c, 1), r.push(n), a[n] = {
567
- options: i,
568
- attributes: kt(s),
569
- rules: e.rules
570
- }, this.storageWriter({ keys: r, items: a });
571
- }));
572
- }
573
- remove(n) {
574
- return J(this)(() => $(
575
- this.container,
576
- K,
577
- E.Local
578
- ).then((e = {}) => {
579
- const { keys: s = [], items: i = {} } = e, o = s.indexOf(n);
580
- if (o > -1)
581
- return s.splice(o, 1), delete i[n], this.storageWriter(e);
582
- }));
583
- }
584
- load(n) {
585
- return J(this)(() => $(
586
- this.container,
587
- K,
588
- E.Local
589
- ).then((e = {}) => {
590
- const { keys: s = [], items: i = {} } = e;
591
- s.forEach((o) => {
592
- const r = i[o];
593
- if (r) {
594
- const { rules: a, attributes: c, options: h } = r;
595
- n.write({
596
- attributes: c,
597
- options: h,
598
- target: new De(n, a)
599
- });
600
- }
601
- });
602
- }));
603
- }
604
- }
605
- const Pt = (t) => {
606
- const { container: n } = t;
607
- return oe.create(n).then((e) => {
608
- const s = n.get("$settings"), i = { localStorage: e }, o = new Ae(t, i), r = xe(o, s);
609
- return t.events.subscribe("widget:state-change", (a, c) => {
610
- c.state === Je.Deactivating && r();
611
- }), o;
612
- });
613
- }, Rt = (t) => import("@telia-ace/widget-routing").then(({ RoutingService: n, HistoryMode: e }) => t.get("settings").then((s) => {
614
- const {
615
- routing: { initialPath: i = "/", mode: o = e.scopedHash, basePath: r },
616
- views: a
617
- } = s;
618
- return new n(t, {
619
- initialPath: i,
620
- mode: o,
621
- routes: Object.keys(a).map((h) => ({
622
- name: h,
623
- path: a[h].path
624
- })),
625
- basePath: r
626
- });
627
- })), Vt = (t) => import("@telia-ace/widget-services").then(({ StorageProvider: n }) => new n()), _t = (t) => import("@telia-ace/widget-core").then(({ ActionResolver: n }) => new n(t)), It = (t) => import("@telia-ace/widget-core").then(({ ComponentResolver: n }) => new n(t)), zt = (t) => import("@telia-ace/widget-core").then(({ ComponentPlatform: n, createComponentModel: e }) => Pt(t.get("$widget"))), ee = "$settings", U = "open", ue = "activeStickyWidget";
628
- class Xt extends Xe {
629
- constructor(e) {
630
- super(e);
631
- L(this, "outlets", /* @__PURE__ */ new Map());
632
- L(this, "activated");
633
- L(this, "subs", []);
634
- L(this, "handleBootstrapping", (e) => {
635
- const s = {
636
- triggerDOMElement: e.sourceDOMElement,
637
- withRenderState: "storage"
638
- };
639
- this.container.get("settings").then((i) => {
640
- const { activate: o } = i;
641
- (typeof o == "undefined" || o === null || o === !0) && (this.activated = (this.activated || this.widget.activate()).then(
642
- () => this.attach(s)
643
- ));
644
- });
645
- });
646
- this.container.registerAsync("storage", () => Vt(this.container)), this.container.registerFactory("settings", () => $(
647
- this.container,
648
- ee,
649
- E.Local
650
- ).then((s = {}) => m(m({}, this.container.get("$settings")), s))), Ze(this, "load", this.handleBootstrapping), this.container.registerAsync(
651
- "componentResolver",
652
- () => It(this.container)
653
- ), this.container.registerAsync("router", () => Rt(this.container)), this.container.registerAsync("actionResolver", () => _t(this.container)), this.container.register("matchMedia", window.matchMedia), this.container.registerAsync("components", () => zt(this.container));
654
- }
655
- initialize() {
656
- console.log("experimental abc123");
657
- debugger;
658
- const e = this.container.getManyAsync(
659
- "actionResolver",
660
- "router",
661
- "components"
662
- );
663
- return Promise.all([e, this.container.get("settings")]).then(
664
- ([{ actionResolver: s, router: i, components: o }, r]) => {
665
- var h;
666
- s.subscribe(
667
- this.widget.name,
668
- (u, l, p) => this.onAction(l, p)
669
- );
670
- const a = (u) => {
671
- o.nodes.query({ type: "view" }).forEach((l) => {
672
- o.setSwitch(l, u);
673
- });
674
- }, c = ((h = i.getInitialRoute()) == null ? void 0 : h.name) || "index";
675
- return a(c), this.events.subscribe("widget:data-loaded", (u, { element: l }) => {
676
- this.widget.container.get("seoConfiguration") && this.events.dispatch("widget:preloaded-replaced", {
677
- element: l
678
- });
679
- }), this.events.subscribe(
680
- "router:change",
681
- (u, { previous: l = { routeData: {} }, next: p = { routeData: {} } }) => {
682
- const { routeData: f } = l, { routeData: w } = p, y = Object.keys(r.views).reduce((g, b) => typeof r.views[b].path == "undefined" ? b : g, "");
683
- !w.name && y ? a(y) : a(w.name), le(f && f.params), le(w && w.params), this.container.getAsync("actionResolver").then((g) => {
684
- g.action(this.widget.name, "routeChange", {
685
- next: w,
686
- previous: f
687
- });
688
- });
689
- }
690
- ), i.initialize();
691
- }
692
- );
693
- }
694
- attach(e = {}) {
695
- return this.container.get("settings").then(({ trigger: s }) => {
696
- var f, w;
697
- const {
698
- widgetDOMElement: i,
699
- key: o = He(),
700
- triggerDOMElement: r,
701
- withRenderState: a
702
- } = e, h = we(s) === k.Inline && ((r == null ? void 0 : r.childElementCount) || 0) > 0, u = Nt(
703
- this.widget.name,
704
- i,
705
- r,
706
- s,
707
- h
708
- );
709
- this.outlets.size < 1 && !a && this.setRenderState("unset");
710
- const l = () => {
711
- const y = () => g.querySelectorAll("[data-loading=true]").length === 0, [g] = this.widget.container.get("widgetDOMElements"), b = (R, W) => {
712
- y() && (u.callback && u.callback(), W.disconnect());
713
- }, S = {
714
- attributes: !0,
715
- subtree: !0,
716
- childList: !0
717
- };
718
- y() && u.callback && u.callback(), new MutationObserver(b).observe(g, S);
719
- };
720
- h && this.widget.container.getAsync("dataClient").then(({ events: y }) => {
721
- y.subscribe("data-client:fetched", (g, b) => {
722
- b.unresolvedQueries === 0 && l();
723
- });
724
- });
725
- const p = this.getOrCreateViewOutlet(o, u);
726
- if (this.outlets.set(o, p), this.widget.events.dispatch("widget:attached", {}, { bubbles: !0 }), u.triggerType === k.Badge && s && ((f = u.triggerDOMElement) == null || f.setAttribute("aria-expanded", "false"), p == null || p.renderBadge(s)), u.triggerType !== k.Inline && ((w = u.triggerDOMElement) == null || w.addEventListener("click", (y) => {
727
- y.preventDefault(), this.container.get("settings").then(({ trigger: g }) => {
728
- p.render().then(() => this.renderState()).then((b) => g && g.action && g.action === "hide" ? b === O.open ? this.hide() : this.open() : b === O.open ? this.close() : this.open());
729
- });
730
- })), this.outlets.size > 1)
731
- return this.renderState().then((y) => {
732
- this.triggerStateIfApplicable(y);
733
- });
734
- if (a)
735
- return a === "storage" ? this.renderState().then((y) => {
736
- if (u.triggerType === k.Inline) {
737
- this.triggerStateIfApplicable("open");
738
- return;
739
- }
740
- this.triggerStateIfApplicable(y);
741
- }) : this.triggerStateIfApplicable(a);
742
- });
743
- }
744
- detach(e) {
745
- if (e) {
746
- if (this.outlets.has(e)) {
747
- const s = this.outlets.get(e);
748
- s == null || s.dispose(), this.outlets.delete(e);
749
- return;
750
- }
751
- process.env.NODE_ENV !== "production" && console.warn(`detach(): Could not find View Outlet with key ${e}`);
752
- return;
753
- }
754
- this.outlets.forEach((s) => {
755
- s.dispose();
756
- }), this.outlets.clear();
757
- }
758
- triggerStateIfApplicable(e) {
759
- return this.container.getAsync("router").then((s) => {
760
- switch (e) {
761
- case "closed":
762
- this.close();
763
- break;
764
- case "open":
765
- this.open();
766
- break;
767
- case "hidden":
768
- this.hide(), s.start();
769
- break;
770
- default:
771
- return;
772
- }
773
- });
774
- }
775
- getOrCreateViewOutlet(e, s) {
776
- return this.outlets.has(e) ? this.outlets.get(e) : new Lt(this.container, s);
777
- }
778
- render(e = {}) {
779
- if (process.env.NODE_ENV !== "production" && console.warn("widget.render() is deprecated. Use widget.attach() instead."), e.open) {
780
- const s = C(m({}, e), {
781
- withRenderState: "open"
782
- });
783
- return this.attach(s);
784
- }
785
- return this.attach(e);
786
- }
787
- activate(e) {
788
- e != null && e.override && this.setSettings(() => e.override), e != null && e.apiNotificationPriorityBy && this.container.register("apiNotificationPriorityBy", e.apiNotificationPriorityBy);
789
- }
790
- setSettings(e) {
791
- return Promise.all([
792
- this.container.get("settings"),
793
- _(this.container, ee, I.Necessary, {
794
- medium: E.Local
795
- })
796
- ]).then(([s, i]) => Promise.resolve(e(s)).then((o) => i(o).then(() => {
797
- const r = m(m({}, s), o);
798
- return this.widget.events.dispatch("widget:settings-updated", r), r;
799
- })));
800
- }
801
- clearSettings() {
802
- return _(
803
- this.container,
804
- ee,
805
- I.Necessary,
806
- { medium: E.Local }
807
- ).then((e) => e()).then(() => this.container.get("settings")).then((e) => {
808
- this.widget.events.dispatch("widget:settings-updated", e);
809
- });
810
- }
811
- action({ action: e, value: s }) {
812
- return this.container.getAsync("actionResolver").then((i) => {
813
- i.action(this.widget.name, e, s);
814
- });
815
- }
816
- renderState() {
817
- if (qe(this.container))
818
- return Promise.resolve(O.open);
819
- const e = () => $(
820
- this.container,
821
- U,
822
- E.Session
823
- ).then((i = O.closed) => i), s = () => $(
824
- this.container,
825
- U,
826
- E.Session
827
- ).then((i = O.closed) => i);
828
- return this.container.getAsync("router").then((i) => i.isSticky() ? s().then((o) => o === O.open ? o : e()) : e());
829
- }
830
- hide() {
831
- return this.outlets.size < 1 ? (process.env.NODE_ENV !== "production" && console.warn(
832
- "hide(): No-op as no view outlets are registered. Invoke the attach() command first."
833
- ), Promise.resolve()) : (this.outlets.forEach((e) => e.render()), this.action({ action: "hide" }).then(() => {
834
- this.setTriggerState(!1);
835
- }));
836
- }
837
- open() {
838
- return this.outlets.size < 1 ? (process.env.NODE_ENV !== "production" && console.warn(
839
- "open(): No-op as no view outlets are registered. Invoke the attach() command first."
840
- ), Promise.resolve()) : (this.outlets.forEach((e) => e.render()), this.action({ action: "open" }).then(() => (this.widget.events.dispatch("tracking:widget-rendered", {}), this.onOpen())));
841
- }
842
- close() {
843
- return this.outlets.size < 1 ? (process.env.NODE_ENV !== "production" && console.warn(
844
- "close(): No-op as no view outlets are registered. Invoke the attach() command first."
845
- ), Promise.resolve()) : this.action({ action: "close" }).then(() => this.onClose());
846
- }
847
- show() {
848
- return process.env.NODE_ENV !== "production" && console.warn(
849
- "show(): Command is deprecated and will be removed in the future. Use open() instead."
850
- ), this.open();
851
- }
852
- onAction(e, s) {
853
- switch (e) {
854
- case "close":
855
- case "open":
856
- case "hide":
857
- const i = e === "open" ? O.open : e === "close" ? O.closed : O.hidden;
858
- return this.setRenderState(i).then(() => {
859
- this.setTriggerState(i === O.open), i !== O.hidden ? i === O.open ? this.onOpen() : this.onClose() : this.outlets.forEach(
860
- (o) => {
861
- var r;
862
- return (r = o.options.triggerDOMElement) == null ? void 0 : r.setAttribute("aria-expanded", "false");
863
- }
864
- );
865
- });
866
- }
867
- }
868
- setRenderState(e) {
869
- const { invoke: s, events: i } = this.container.get("$widget");
870
- return Promise.all([
871
- _(this.container, U, I.Necessary, {
872
- medium: E.Session
873
- }),
874
- _(this.container, U, I.Necessary, {
875
- medium: E.Local,
876
- duration: { minutes: 5 }
877
- }),
878
- this.container.getAsync("router"),
879
- s("renderState")
880
- ]).then(([o, r, a, c]) => {
881
- e === "unset" || !e ? (r(), o()) : (a.isSticky() && r(e), o(e)), i.dispatch("widget:render-state-changed", {
882
- previous: c,
883
- next: e
884
- });
885
- });
886
- }
887
- onOpen() {
888
- return this.container.getAsync("router").then((e) => (this.outlets.forEach(
889
- (s) => {
890
- var i;
891
- return (i = s.options.triggerDOMElement) == null ? void 0 : i.setAttribute("aria-expanded", "true");
892
- }
893
- ), e.start()));
894
- }
895
- onClose() {
896
- const e = this.container.getManyAsync("router", "components");
897
- return (() => this.container.get("settings").then((i) => {
898
- const { activate: o } = this.container.get("$settings");
899
- return i.activate !== o ? this.setSettings(() => Promise.resolve({ activate: o })) : Promise.resolve();
900
- }))().then(() => e).then(
901
- ({
902
- router: i,
903
- components: o
904
- }) => {
905
- const r = o.nodes.visible;
906
- return this.outlets.forEach(
907
- (a) => {
908
- var c;
909
- return (c = a.options.triggerDOMElement) == null ? void 0 : c.setAttribute("aria-expanded", "false");
910
- }
911
- ), r.filter(
912
- (a) => a.attributes.properties.animation && a.attributes.properties.animation !== "none"
913
- ).length ? new Promise((a) => {
914
- setTimeout(() => {
915
- a(i);
916
- }, 200);
917
- }) : Promise.resolve(i);
918
- }
919
- ).then((i) => i.stop());
920
- }
921
- setTriggerState(e) {
922
- this.outlets.forEach((s) => {
923
- const {
924
- options: { triggerDOMElement: i, triggerOptions: o }
925
- } = s, { openTooltip: r, closedTooltip: a } = o || {};
926
- i && (e ? be(i, r) : xt(i, a));
927
- });
928
- }
929
- deactivate() {
930
- this.subs.forEach((s) => s());
931
- const e = [];
932
- return this.outlets.forEach((s) => e.push(s.dispose())), $(
933
- this.container,
934
- ue,
935
- E.Local
936
- ).then((s) => s === this.widget.name ? _(
937
- this.container,
938
- ue,
939
- I.Necessary,
940
- {
941
- medium: E.Local,
942
- scope: Qe.Implementation
943
- }
944
- ).then((i) => i()).then(() => Promise.all(e)) : Promise.all(e));
945
- }
946
- }
1
+ import { C as D, D as N, a as f, N as h, a as u, W as v, s as x, r as y } from "./index.c6989014.js";
2
+ import "@telia-ace/widget-ui";
3
+ import "react";
4
+ import "@emotion/react";
5
+ import "@telia-ace/widget-core";
6
+ import "@emotion/styled";
7
+ import "@telia-ace/widget-utilities";
8
+ import "react-transition-group";
9
+ import "react-router";
10
+ import "@open-wc/lit-helpers";
11
+ import "lit";
12
+ import "@telia-ace/widget-routing";
13
+ import "@telia-ace/widget-services";
14
+ import "@webprovisions/bootstrapping";
15
+ import "@webprovisions/platform";
947
16
  export {
948
- ie as Component,
949
- wt as DetachedComponent,
950
- Xt as GridWidget,
951
- Jt as NotFound,
952
- Xt as Widget,
953
- q as genericComponentStyling
17
+ D as Component,
18
+ N as DetachedComponent,
19
+ f as GridWidget,
20
+ h as NotFound,
21
+ u as Widget,
22
+ v as WidgetComponent,
23
+ x as genericComponentStyling,
24
+ y as resolveComponent
954
25
  };
955
26
  //# sourceMappingURL=index.js.map