@telia-ace/widget-types-grid 1.0.37 → 1.1.1-rc.0

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.
Files changed (44) hide show
  1. package/index-008a4ecb.js +1 -0
  2. package/index-1489b1e4.mjs +75 -0
  3. package/index-31330b2a.mjs +9945 -0
  4. package/index-48ee95ae.js +1 -0
  5. package/index-61eaf406.js +703 -0
  6. package/index-dc8062c1.js +9 -0
  7. package/index-ebd3abf1.mjs +76 -0
  8. package/index-fa7051e6.mjs +816 -0
  9. package/index.js +1 -0
  10. package/index.mjs +12 -0
  11. package/package.json +21 -53
  12. package/render-37a76217.mjs +51 -0
  13. package/render-5f9647e7.js +1 -0
  14. package/{dist/unmount-063d8ea3.js → unmount-063d8ea3.mjs} +0 -1
  15. package/unmount-481ce5a7.js +1 -0
  16. package/LICENSE.txt +0 -6
  17. package/README.md +0 -3
  18. package/dist/index.js +0 -950
  19. package/dist/index.js.map +0 -1
  20. package/dist/render-668e4aa4.js +0 -64
  21. package/dist/render-668e4aa4.js.map +0 -1
  22. package/dist/ui/index.d.ts +0 -6
  23. package/dist/unmount-063d8ea3.js.map +0 -1
  24. /package/{dist/component-platform-factory.d.ts → component-platform-factory.d.ts} +0 -0
  25. /package/{dist/index.d.ts → index.d.ts} +0 -0
  26. /package/{dist/services.d.ts → services.d.ts} +0 -0
  27. /package/{dist/ui → ui}/animated-view.d.ts +0 -0
  28. /package/{dist/ui → ui}/component.d.ts +0 -0
  29. /package/{dist/ui → ui}/detached-component.d.ts +0 -0
  30. /package/{dist/ui → ui}/determine-slide-direction.d.ts +0 -0
  31. /package/{dist/ui → ui}/html-element-handlers.d.ts +0 -0
  32. /package/{dist/ui → ui}/not-found.d.ts +0 -0
  33. /package/{dist/ui → ui}/prepare-dom.d.ts +0 -0
  34. /package/{dist/ui → ui}/render.d.ts +0 -0
  35. /package/{dist/ui → ui}/resolvable-component.d.ts +0 -0
  36. /package/{dist/ui → ui}/styles.d.ts +0 -0
  37. /package/{dist/ui → ui}/switch.d.ts +0 -0
  38. /package/{dist/ui → ui}/unmount.d.ts +0 -0
  39. /package/{dist/ui → ui}/use-component-node-properties.d.ts +0 -0
  40. /package/{dist/ui → ui}/use-router.d.ts +0 -0
  41. /package/{dist/ui → ui}/view-outlet.d.ts +0 -0
  42. /package/{dist/ui → ui}/view.d.ts +0 -0
  43. /package/{dist/ui → ui}/wrapper.d.ts +0 -0
  44. /package/{dist/widget.d.ts → widget.d.ts} +0 -0
package/dist/index.js DELETED
@@ -1,950 +0,0 @@
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 { css as ue, ThemeProvider as Ce, useTheme as Oe } from "@emotion/react";
23
- import { asDescriptor as ae, ComponentPlatform as Se, createComponentModel as Ae, ComponentQuery as De, WidgetRenderState as O } from "@telia-ace/widget-core";
24
- import { Grid as de, useRouteData as xe, useRouter as Me, useProperties as he, useContext as X, useContainer as T, useComponentNode as ee, useScroll as pe, transitionComposer as Ne, paddedBorderTabStyle as $e, useComponent as Le, useComponentDescriptor as ke, filterCssPropsStyle as Pe, Typography as Re, useComponentPlatform as me, useIsMounted as Ve, useColumns as _e, useLayout as Ie, ComponentNodeContext as ze, ComponentPropertyContext as Be, filterCssProps as Te } from "@telia-ace/widget-ui";
25
- import d, { useState as z, forwardRef as fe, useMemo as je, Suspense as Ge, useEffect as B } from "react";
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 E, 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__ */ d.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__ */ d.createElement(Q, { key: s, exact: !0, path: o, render: () => n(s) })) : /* @__PURE__ */ d.createElement(Q, { key: s, exact: !0, path: i, render: () => n(s) }) : /* @__PURE__ */ d.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(de)`
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 = xe(), u = Me(), h = he(), l = X(), g = T(), f = ee(), { gap: m = "0" } = l, G = h, { columns: y = 1, animation: b = "none", scrollable: w = !1 } = G, A = N(G, ["columns", "animation", "scrollable"]), [j, L] = pe(w);
70
- if (!f || !u)
71
- return null;
72
- const { location: se } = u;
73
- a.name !== i && a.name !== "" && b && (c(Xe(i, a.name, st)), o(a.name));
74
- const { views: D } = g.get("$settings");
75
- if (!Object.keys(D).length)
76
- return null;
77
- const x = (v, M, R) => {
78
- const S = Y(M, R), I = f.getChildren(v)[0];
79
- return /* @__PURE__ */ d.createElement(
80
- nt,
81
- C(p(C(p(p({}, e), A), {
82
- scrollableCss: j,
83
- ref: L,
84
- columns: y,
85
- gap: m
86
- }), S), {
87
- className: K(t, "humany-view")
88
- }),
89
- /* @__PURE__ */ d.createElement(te, { id: I.id, branch: "default" })
90
- );
91
- }, Y = (v, M) => {
92
- if (b === "slide" || b === "fade")
93
- return {
94
- animationCss: Ne.composeViewTransition(
95
- v,
96
- b,
97
- M
98
- ),
99
- ["data-state"]: v
100
- };
101
- };
102
- return /* @__PURE__ */ d.createElement(tt, { className: "humany-animated-view" }, /* @__PURE__ */ d.createElement(
103
- He,
104
- {
105
- component: null,
106
- childFactory: (v) => d.cloneElement(v, { direction: r })
107
- },
108
- /* @__PURE__ */ d.createElement(
109
- Ke,
110
- {
111
- key: i,
112
- timeout: { enter: 500, exit: 500 },
113
- onEnter: (v) => v == null ? void 0 : v.clientHeight,
114
- unmountOnExit: !0,
115
- direction: J.forth
116
- },
117
- (v, { direction: M }) => /* @__PURE__ */ d.createElement(
118
- ge,
119
- {
120
- views: D,
121
- location: se,
122
- render: (R) => x(R, v, M)
123
- }
124
- )
125
- )
126
- ));
127
- }, ot = it, rt = P(de)`
128
- ${(t) => !!t.scrollableCss && t.scrollableCss}
129
- `, at = (n) => {
130
- var s = n, { className: t = "" } = s, e = N(s, ["className"]);
131
- const i = he(), o = X(), r = T(), c = ee(), { views: a } = r.get("$settings"), { gap: u = "0" } = o, b = i, { columns: h = 1, animation: l = "none", scrollable: g = !1 } = b, f = N(b, ["columns", "animation", "scrollable"]), [m, y] = pe(g);
132
- return c ? /* @__PURE__ */ d.createElement(
133
- rt,
134
- C(p(p({}, e), f), {
135
- scrollableCss: m,
136
- ref: y,
137
- columns: h,
138
- gap: u,
139
- className: K(t, "humany-view")
140
- }),
141
- /* @__PURE__ */ d.createElement(
142
- ge,
143
- {
144
- views: a,
145
- render: (w) => {
146
- const A = c.getChildren(w)[0];
147
- return /* @__PURE__ */ d.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 ue`
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
- ${$e(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" && ue`
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 = fe(
196
- (i, s) => {
197
- var o = i, { className: t = "", children: e } = o, n = N(o, ["className", "children"]);
198
- const r = Le(), { name: c, type: a, id: u } = ke(), h = je(() => r ? P(r)`
199
- ${U}
200
- ${Pe}
201
- ` : null, [r]);
202
- return typeof r == "undefined" ? null : r === null || h === null ? process.env.NODE_ENV !== "production" ? /* @__PURE__ */ d.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__ */ d.createElement(Re, { variant: "h5" }, "Non Resolved Component Type")
209
- ) : null : /* @__PURE__ */ d.createElement(Ge, { fallback: null }, /* @__PURE__ */ d.createElement(
210
- h,
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
- ), pt = ht, mt = (t) => {
224
- const e = ee(t), n = me(), [s, i] = z({}), o = Ve();
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 = fe(
241
- (u, a) => {
242
- var h = u, { className: t = "", id: e, branch: n, node: s, ariaLabel: i, tabIndex: o, context: r } = h, c = N(h, ["className", "id", "branch", "node", "ariaLabel", "tabIndex", "context"]);
243
- const l = me(), g = T(), [f, m] = z(), y = _e(), b = X(e), w = mt(e), { size: A = "none", indent: j = 0 } = Ie(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 && (m(ae(S, n)), L)) {
249
- const I = S.mount(g);
250
- return () => {
251
- I();
252
- };
253
- }
254
- } else if (s) {
255
- m(ae(s, n));
256
- const S = s.mount(g);
257
- return () => {
258
- S();
259
- };
260
- }
261
- }
262
- }, [l, e, s, L]), !f || !L)
263
- return null;
264
- const R = p(p({}, b), r || {}), {
265
- cardinal: D,
266
- fonts: x = {},
267
- accessibility: Y = {}
268
- } = R, G = N(R, [
269
- "cardinal",
270
- "fonts",
271
- "accessibility"
272
- ]), v = {
273
- type: x.type,
274
- base: x.base || "16px",
275
- small: x.small || "0.8em",
276
- normal: x.normal || "1em",
277
- medium: x.medium || "1.2em",
278
- large: x.large || "1.6em",
279
- huge: x.huge || "2.5em"
280
- }, M = C(p({}, G), {
281
- fonts: v,
282
- accessibility: p({}, Y)
283
- });
284
- return typeof D == "number" && (M.sizes = {
285
- cardinal: D,
286
- small: `${D}px`,
287
- normal: `${D * 3}px`,
288
- medium: `${D * 5}px`,
289
- large: `${D * 8}px`
290
- }), /* @__PURE__ */ d.createElement(Ce, { theme: M }, /* @__PURE__ */ d.createElement(ze.Provider, { value: f }, /* @__PURE__ */ d.createElement(Be.Provider, { value: w }, (() => {
291
- const S = p({
292
- "data-width": A === "full" ? y : Math.min(A, y),
293
- "data-indent": j,
294
- "data-name": f.name,
295
- "data-node-id": f.id,
296
- "data-component-type": f.type,
297
- "aria-label": i,
298
- tabIndex: o,
299
- id: f.id,
300
- role: w && w.role
301
- }, c);
302
- switch (f.type) {
303
- case "view":
304
- return typeof w.animation == "string" && w.animation !== "none" ? /* @__PURE__ */ d.createElement(ut, C(p({}, S), { className: t })) : /* @__PURE__ */ d.createElement(lt, C(p({}, S), { className: t }));
305
- default: {
306
- const I = Te(w);
307
- return /* @__PURE__ */ d.createElement(
308
- pt,
309
- C(p(p({
310
- ref: a
311
- }, S), I), {
312
- className: t
313
- })
314
- );
315
- }
316
- }
317
- })())));
318
- }
319
- ), te = gt, bt = ({ 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__ */ d.createElement(te, { id: n.id, node: n, branch: "default" }) : null;
332
- }, yt = bt, wt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
333
- __proto__: null,
334
- default: yt
335
- }, Symbol.toStringTag, { value: "Module" })), vt = d.lazy(() => Promise.resolve().then(() => wt)), Et = ({ showSearch: t = !1 }) => {
336
- const e = Oe(), n = T();
337
- return /* @__PURE__ */ d.createElement(d.Suspense, { fallback: null }, /* @__PURE__ */ d.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
- (h, l) => (i.components[l].type === "not-found" && (h.properties = i.components[l].properties, h.context = i.components[l].context), h),
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 h = Object.keys(i.components).reduce(
352
- (g, f) => i.components[f].type === "search" ? i.components[f].properties : g,
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
- }, h)), 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 Dt(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 be(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 xt = (t, e) => t && e ? "both" : t ? "widgetDOM" : e ? "triggerDOM" : "none", ye = (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, h;
430
- const o = xt(
431
- e,
432
- n
433
- ), r = ye(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 g;
457
- (g = n == null ? void 0 : n.parentNode) == null || g.replaceChild(
458
- l,
459
- n
460
- ), l.style.display = (n == null ? void 0 : n.style.display) || "block";
461
- }) : (h = n == null ? void 0 : n.parentNode) == null || h.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 g = document.body.appendChild(document.createElement("a"));
471
- r === "link" && (g.innerText = t), a.triggerDOMElement = g;
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
- /**
490
- * Renders the view outlet to the DOM.
491
- */
492
- render() {
493
- const { widgetDOMElement: e, triggerDOMElement: n } = this.options, s = this.container.get("$widget");
494
- return e.getAttribute("data-rendered") === "true" ? Promise.resolve() : (n && this.options.triggerType === k.Badge && Dt(n), import("./render-668e4aa4.js").then((i) => i.default(this.container, e)).then(() => {
495
- if (e.setAttribute("data-rendered", "true"), n && this.options.triggerType === k.Badge) {
496
- const o = this.options.triggerOptions.openTooltip;
497
- be(n, o);
498
- }
499
- We(this.container, e);
500
- const i = this.container.get("$environment").widgets.all();
501
- $(
502
- this.container,
503
- Nt,
504
- E.Session
505
- ).then((o) => {
506
- o && o.forEach((r) => {
507
- i.find(
508
- (c) => c.name === r.name && c.state === "activated"
509
- ) && s.events.dispatch("widget:modal-opened", r);
510
- });
511
- });
512
- }));
513
- }
514
- renderBadge(e) {
515
- const { triggerDOMElement: n } = this.options;
516
- if (!n)
517
- return;
518
- n.getAttribute("role") || n.setAttribute("role", "button");
519
- const { name: s } = this.container.get("$widget"), { label: i, symbol: o, ariaLabel: r, closedTooltip: c, openTooltip: a } = e, u = { closedTooltip: c, openTooltip: a };
520
- this.options.triggerOptions = u;
521
- const h = St(n, {
522
- label: i,
523
- symbol: o,
524
- ariaLabel: r,
525
- widgetName: s,
526
- tooltip: c
527
- });
528
- this.unsubscribe.push(h);
529
- }
530
- dispose() {
531
- return import("./unmount-063d8ea3.js").then((e) => {
532
- var i, o, r, c;
533
- const { triggerDOMElement: n, widgetDOMElement: s } = this.options;
534
- e.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 && n && ((o = n.parentNode) == null || o.replaceChild(
538
- this.options.cachedOriginals.triggerDOMElement,
539
- n
540
- )), this.unsubscribe.forEach((a) => {
541
- a();
542
- }), (r = s.parentNode) == null || r.removeChild(s), (c = n == null ? void 0 : n.parentNode) == null || c.removeChild(n);
543
- });
544
- }
545
- }
546
- const F = "changesets", Lt = (t) => {
547
- const e = { tags: t.tags };
548
- 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;
549
- };
550
- class ne {
551
- constructor(e, n) {
552
- this.container = e, this.storageWriter = n;
553
- }
554
- static create(e) {
555
- return V(e, F, _.Necessary, {
556
- medium: E.Local
557
- }).then((n) => new ne(e, n));
558
- }
559
- write(e, n, s, i) {
560
- return q(this)(() => $(
561
- this.container,
562
- F,
563
- E.Local
564
- ).then((o = {}) => {
565
- const { keys: r = [], items: c = {} } = o, a = r.indexOf(e);
566
- return a > -1 && r.splice(a, 1), r.push(e), c[e] = {
567
- options: i,
568
- attributes: Lt(s),
569
- rules: n.rules
570
- }, this.storageWriter({ keys: r, items: c });
571
- }));
572
- }
573
- remove(e) {
574
- return q(this)(() => $(
575
- this.container,
576
- F,
577
- E.Local
578
- ).then((n = {}) => {
579
- const { keys: s = [], items: i = {} } = n, o = s.indexOf(e);
580
- if (o > -1)
581
- return s.splice(o, 1), delete i[e], this.storageWriter(n);
582
- }));
583
- }
584
- load(e) {
585
- return q(this)(() => $(
586
- this.container,
587
- F,
588
- E.Local
589
- ).then((n = {}) => {
590
- const { keys: s = [], items: i = {} } = n;
591
- s.forEach((o) => {
592
- const r = i[o];
593
- if (r) {
594
- const { rules: c, attributes: a, options: u } = r;
595
- e.write({
596
- attributes: a,
597
- options: u,
598
- target: new De(e, c)
599
- });
600
- }
601
- });
602
- }));
603
- }
604
- }
605
- const kt = (t) => {
606
- const { container: e } = t;
607
- return ne.create(e).then((n) => {
608
- const s = e.get("$settings"), i = { localStorage: n }, o = new Se(t, i), r = Ae(o, s);
609
- return t.events.subscribe("widget:state-change", (c, a) => {
610
- a.state === Ze.Deactivating && r();
611
- }), o;
612
- });
613
- }, Pt = (t) => import("@telia-ace/widget-routing").then(({ RoutingService: e, HistoryMode: n }) => t.get("settings").then((s) => {
614
- const {
615
- routing: { initialPath: i = "/", mode: o = n.scopedHash, basePath: r },
616
- views: c
617
- } = s;
618
- return new e(t, {
619
- initialPath: i,
620
- mode: o,
621
- routes: Object.keys(c).map((u) => ({
622
- name: u,
623
- path: c[u].path
624
- })),
625
- basePath: r
626
- });
627
- })), 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";
628
- class Jt extends Je {
629
- constructor(e) {
630
- super(e), this.outlets = /* @__PURE__ */ new Map(), this.activated = void 0, this.subs = [], this.handleBootstrapping = (n) => {
631
- const s = {
632
- triggerDOMElement: n.sourceDOMElement,
633
- withRenderState: "storage"
634
- /* Storage */
635
- };
636
- this.container.get("settings").then((i) => {
637
- const { activate: o } = i;
638
- (typeof o == "undefined" || o === null || o === !0) && (this.activated = (this.activated || this.widget.activate()).then(
639
- () => this.attach(s)
640
- ));
641
- });
642
- }, this.container.registerAsync("storage", () => Rt(this.container)), this.container.registerFactory("settings", () => $(
643
- this.container,
644
- Z,
645
- E.Local
646
- ).then((n = {}) => p(p({}, this.container.get("$settings")), n))), Qe(this, "load", this.handleBootstrapping), this.container.registerAsync(
647
- "componentResolver",
648
- () => _t(this.container)
649
- ), 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));
650
- }
651
- initialize() {
652
- const e = this.container.getManyAsync(
653
- "actionResolver",
654
- "router",
655
- "components"
656
- ), n = this.container.get("csp");
657
- return n && (window.webprovisionsEnvironmentVariables || (window.webprovisionsEnvironmentVariables = {}), window.webprovisionsEnvironmentVariables.cspNonce = n.nonce), Promise.all([e, this.container.get("settings")]).then(
658
- ([{ actionResolver: s, router: i, components: o }, r]) => {
659
- var u;
660
- s.subscribe(
661
- this.widget.name,
662
- (h, l, g) => this.onAction(l, g)
663
- );
664
- const c = (h) => {
665
- o.nodes.query({ type: "view" }).forEach((l) => {
666
- o.setSwitch(l, h);
667
- });
668
- }, a = ((u = i.getInitialRoute()) == null ? void 0 : u.name) || "index";
669
- return c(a), this.events.subscribe("widget:data-loaded", (h, { element: l }) => {
670
- this.widget.container.get("seoConfiguration") && this.events.dispatch("widget:preloaded-replaced", {
671
- element: l
672
- });
673
- }), this.events.subscribe(
674
- "router:change",
675
- (h, { previous: l = { routeData: {} }, next: g = { routeData: {} } }) => {
676
- const { routeData: f } = l, { routeData: m } = g, y = Object.keys(r.views).reduce((b, w) => typeof r.views[w].path == "undefined" ? w : b, "");
677
- !m.name && y ? c(y) : c(m.name), ce(f && f.params), ce(m && m.params), this.container.getAsync("actionResolver").then((b) => {
678
- b.action(this.widget.name, "routeChange", {
679
- next: m,
680
- previous: f
681
- });
682
- });
683
- }
684
- ), i.initialize();
685
- }
686
- );
687
- }
688
- attach(e = {}) {
689
- return this.container.get("settings").then(({ trigger: n }) => {
690
- var g, f;
691
- const {
692
- widgetDOMElement: s,
693
- key: i = Fe(),
694
- triggerDOMElement: o,
695
- withRenderState: r
696
- } = e, a = ye(n) === k.Inline && ((o == null ? void 0 : o.childElementCount) || 0) > 0, u = Mt(
697
- this.widget.name,
698
- s,
699
- o,
700
- n,
701
- a
702
- );
703
- this.outlets.size < 1 && !r && this.setRenderState("unset");
704
- const h = () => {
705
- const m = () => y.querySelectorAll("[data-loading=true]").length === 0, [y] = this.widget.container.get("widgetDOMElements"), b = (j, L) => {
706
- m() && (u.callback && u.callback(), L.disconnect());
707
- }, w = {
708
- attributes: !0,
709
- subtree: !0,
710
- childList: !0
711
- };
712
- m() && u.callback && u.callback(), new MutationObserver(b).observe(y, w);
713
- };
714
- a && this.widget.container.getAsync("dataClient").then(({ events: m }) => {
715
- m.subscribe("data-client:fetched", (y, b) => {
716
- b.unresolvedQueries === 0 && h();
717
- });
718
- });
719
- const l = this.getOrCreateViewOutlet(i, u);
720
- if (this.outlets.set(i, l), this.widget.events.dispatch("widget:attached", {}, { bubbles: !0 }), u.triggerType === k.Badge && n && ((g = u.triggerDOMElement) == null || g.setAttribute("aria-expanded", "false"), l == null || l.renderBadge(n)), u.triggerType !== k.Inline && ((f = u.triggerDOMElement) == null || f.addEventListener("click", (m) => {
721
- m.preventDefault(), this.container.get("settings").then(({ trigger: y }) => {
722
- l.render().then(() => this.renderState()).then((b) => y && y.action && y.action === "hide" ? b === O.open ? this.hide() : this.open() : b === O.open ? this.close() : this.open());
723
- });
724
- })), this.outlets.size > 1)
725
- return this.renderState().then((m) => {
726
- this.triggerStateIfApplicable(m);
727
- });
728
- if (r)
729
- return r === "storage" ? this.renderState().then((m) => {
730
- if (u.triggerType === k.Inline) {
731
- this.triggerStateIfApplicable("open");
732
- return;
733
- }
734
- this.triggerStateIfApplicable(m);
735
- }) : this.triggerStateIfApplicable(r);
736
- });
737
- }
738
- detach(e) {
739
- if (e) {
740
- if (this.outlets.has(e)) {
741
- const n = this.outlets.get(e);
742
- n == null || n.dispose(), this.outlets.delete(e);
743
- return;
744
- }
745
- process.env.NODE_ENV !== "production" && console.warn(`detach(): Could not find View Outlet with key ${e}`);
746
- return;
747
- }
748
- this.outlets.forEach((n) => {
749
- n.dispose();
750
- }), this.outlets.clear();
751
- }
752
- triggerStateIfApplicable(e) {
753
- return this.container.getAsync("router").then((n) => {
754
- switch (e) {
755
- case "closed":
756
- this.close();
757
- break;
758
- case "open":
759
- this.open();
760
- break;
761
- case "hidden":
762
- this.hide(), n.start();
763
- break;
764
- default:
765
- return;
766
- }
767
- });
768
- }
769
- getOrCreateViewOutlet(e, n) {
770
- return this.outlets.has(e) ? this.outlets.get(e) : new $t(this.container, n);
771
- }
772
- render(e = {}) {
773
- if (process.env.NODE_ENV !== "production" && console.warn("widget.render() is deprecated. Use widget.attach() instead."), e.open) {
774
- const n = C(p({}, e), {
775
- withRenderState: "open"
776
- /* Open */
777
- });
778
- return this.attach(n);
779
- }
780
- return this.attach(e);
781
- }
782
- activate(e) {
783
- e != null && e.override && this.setSettings(() => e.override), e != null && e.apiNotificationPriorityBy && this.container.register("apiNotificationPriorityBy", e.apiNotificationPriorityBy);
784
- }
785
- setSettings(e) {
786
- return Promise.all([
787
- this.container.get("settings"),
788
- V(this.container, Z, _.Necessary, {
789
- medium: E.Local
790
- })
791
- ]).then(([n, s]) => Promise.resolve(e(n)).then((i) => s(i).then(() => {
792
- const o = p(p({}, n), i);
793
- return this.widget.events.dispatch("widget:settings-updated", o), o;
794
- })));
795
- }
796
- clearSettings() {
797
- return V(
798
- this.container,
799
- Z,
800
- _.Necessary,
801
- { medium: E.Local }
802
- ).then((e) => e()).then(() => this.container.get("settings")).then((e) => {
803
- this.widget.events.dispatch("widget:settings-updated", e);
804
- });
805
- }
806
- action({ action: e, value: n }) {
807
- return this.container.getAsync("actionResolver").then((s) => {
808
- s.action(this.widget.name, e, n);
809
- });
810
- }
811
- renderState() {
812
- if (Ye(this.container))
813
- return Promise.resolve(O.open);
814
- const e = () => $(
815
- this.container,
816
- H,
817
- E.Session
818
- ).then((s = O.closed) => s), n = () => $(
819
- this.container,
820
- H,
821
- E.Session
822
- ).then((s = O.closed) => s);
823
- return this.container.getAsync("router").then((s) => s.isSticky() ? n().then((i) => i === O.open ? i : e()) : e());
824
- }
825
- hide() {
826
- return this.outlets.size < 1 ? (process.env.NODE_ENV !== "production" && console.warn(
827
- "hide(): No-op as no view outlets are registered. Invoke the attach() command first."
828
- ), Promise.resolve()) : (this.outlets.forEach((e) => e.render()), this.action({ action: "hide" }).then(() => {
829
- this.setTriggerState(!1);
830
- }));
831
- }
832
- open() {
833
- return this.outlets.size < 1 ? (process.env.NODE_ENV !== "production" && console.warn(
834
- "open(): No-op as no view outlets are registered. Invoke the attach() command first."
835
- ), Promise.resolve()) : (this.outlets.forEach((e) => e.render()), this.action({ action: "open" }).then(() => (this.widget.events.dispatch("tracking:widget-rendered", {}), this.onOpen())));
836
- }
837
- close() {
838
- return this.outlets.size < 1 ? (process.env.NODE_ENV !== "production" && console.warn(
839
- "close(): No-op as no view outlets are registered. Invoke the attach() command first."
840
- ), Promise.resolve()) : this.action({ action: "close" }).then(() => this.onClose());
841
- }
842
- show() {
843
- return process.env.NODE_ENV !== "production" && console.warn(
844
- "show(): Command is deprecated and will be removed in the future. Use open() instead."
845
- ), this.open();
846
- }
847
- onAction(e, n) {
848
- switch (e) {
849
- case "close":
850
- case "open":
851
- case "hide":
852
- const s = e === "open" ? O.open : e === "close" ? O.closed : O.hidden;
853
- return this.setRenderState(s).then(() => {
854
- this.setTriggerState(s === O.open), s !== O.hidden ? s === O.open ? this.onOpen() : this.onClose() : this.outlets.forEach(
855
- (i) => {
856
- var o;
857
- return (o = i.options.triggerDOMElement) == null ? void 0 : o.setAttribute("aria-expanded", "false");
858
- }
859
- );
860
- });
861
- }
862
- }
863
- setRenderState(e) {
864
- const { invoke: n, events: s } = this.container.get("$widget");
865
- return Promise.all([
866
- V(this.container, H, _.Necessary, {
867
- medium: E.Session
868
- }),
869
- V(this.container, H, _.Necessary, {
870
- medium: E.Local,
871
- duration: { minutes: 5 }
872
- }),
873
- this.container.getAsync("router"),
874
- n("renderState")
875
- ]).then(([i, o, r, c]) => {
876
- e === "unset" || !e ? (o(), i()) : (r.isSticky() && o(e), i(e)), s.dispatch("widget:render-state-changed", {
877
- previous: c,
878
- next: e
879
- });
880
- });
881
- }
882
- onOpen() {
883
- return this.container.getAsync("router").then((e) => (this.outlets.forEach(
884
- (n) => {
885
- var s;
886
- return (s = n.options.triggerDOMElement) == null ? void 0 : s.setAttribute("aria-expanded", "true");
887
- }
888
- ), e.start()));
889
- }
890
- onClose() {
891
- const e = this.container.getManyAsync("router", "components");
892
- return (() => this.container.get("settings").then((s) => {
893
- const { activate: i } = this.container.get("$settings");
894
- return s.activate !== i ? this.setSettings(() => Promise.resolve({ activate: i })) : Promise.resolve();
895
- }))().then(() => e).then(
896
- ({
897
- router: s,
898
- components: i
899
- }) => {
900
- const o = i.nodes.visible;
901
- return this.outlets.forEach(
902
- (r) => {
903
- var c;
904
- return (c = r.options.triggerDOMElement) == null ? void 0 : c.setAttribute("aria-expanded", "false");
905
- }
906
- ), o.filter(
907
- (r) => r.attributes.properties.animation && r.attributes.properties.animation !== "none"
908
- ).length ? new Promise((r) => {
909
- setTimeout(() => {
910
- r(s);
911
- }, 200);
912
- }) : Promise.resolve(s);
913
- }
914
- ).then((s) => s.stop());
915
- }
916
- setTriggerState(e) {
917
- this.outlets.forEach((n) => {
918
- const {
919
- options: { triggerDOMElement: s, triggerOptions: i }
920
- } = n, { openTooltip: o, closedTooltip: r } = i || {};
921
- s && (e ? be(s, o) : At(s, r));
922
- });
923
- }
924
- deactivate() {
925
- this.subs.forEach((n) => n());
926
- const e = [];
927
- return this.outlets.forEach((n) => e.push(n.dispose())), $(
928
- this.container,
929
- le,
930
- E.Local
931
- ).then((n) => n === this.widget.name ? V(
932
- this.container,
933
- le,
934
- _.Necessary,
935
- {
936
- medium: E.Local,
937
- scope: qe.Implementation
938
- }
939
- ).then((s) => s()).then(() => Promise.all(e)) : Promise.all(e));
940
- }
941
- }
942
- export {
943
- te as Component,
944
- yt as DetachedComponent,
945
- Jt as GridWidget,
946
- Zt as NotFound,
947
- Jt as Widget,
948
- U as genericComponentStyling
949
- };
950
- //# sourceMappingURL=index.js.map