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