@telia-ace/knowledge-widget-ui 1.0.39 → 1.0.40-experimental.1

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,1389 +1,5 @@
1
- var He = Object.defineProperty, je = Object.defineProperties;
2
- var Oe = Object.getOwnPropertyDescriptors;
3
- var R = Object.getOwnPropertySymbols;
4
- var re = Object.prototype.hasOwnProperty, se = Object.prototype.propertyIsEnumerable;
5
- var oe = (t, e, a) => e in t ? He(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a, y = (t, e) => {
6
- for (var a in e || (e = {}))
7
- re.call(e, a) && oe(t, a, e[a]);
8
- if (R)
9
- for (var a of R(e))
10
- se.call(e, a) && oe(t, a, e[a]);
11
- return t;
12
- }, E = (t, e) => je(t, Oe(e));
13
- var w = (t, e) => {
14
- var a = {};
15
- for (var o in t)
16
- re.call(t, o) && e.indexOf(o) < 0 && (a[o] = t[o]);
17
- if (t != null && R)
18
- for (var o of R(t))
19
- e.indexOf(o) < 0 && se.call(t, o) && (a[o] = t[o]);
20
- return a;
21
- };
22
- import { css as $, keyframes as he } from "@emotion/react";
23
- import d from "@emotion/styled";
24
- import { useRouteData as ge, Link as Ye, Icon as H, List as Z, list as pe, invertedHoverButton as ye, Drawer as _e, ItemList as O, itemList as Y, Dropdown as $e, headingElement as ee, Text as ve, Button as te, paddedBorderTabStyle as ie, Confirm as Ke, SymbolBadge as N, StyledText as J, convertToStringAttributes as xe, useKeyPress as W, useContainer as Ve, useEventListener as le, DateFormats as be, Timestamp as we, useIsTabbing as qe, usePrevious as Ge, TextLink as Q, borderTabStyle as X, Paragraph as Ue, genericHtml as Je, AnchorLink as Qe, WidgetLink as Xe } from "@telia-ace/widget-ui";
25
- export * from "@telia-ace/widget-ui";
26
- import n, { forwardRef as _, useCallback as k, useState as T, useEffect as K, useMemo as Ze, useRef as Ee, useImperativeHandle as et } from "react";
27
- import { createParams as j, formatUrl as ce, appendClassNames as z, htmlParentContains as tt } from "@telia-ace/widget-utilities";
28
- const at = ({
29
- title: t = "",
30
- className: e,
31
- id: a,
32
- parent: o,
33
- connection: s,
34
- type: i,
35
- target: r,
36
- href: c,
37
- children: m
38
- }) => {
39
- const u = {}, { name: f, params: l } = ge();
40
- switch (i) {
41
- case "default":
42
- case "guide":
43
- const { id: h, title: S } = o;
44
- u.routeName = f, u.params = j(E(y({}, l), {
45
- guide: a,
46
- connection: a === h ? s : void 0,
47
- uriName: a === h ? ce(S) : ce(t)
48
- }));
49
- break;
50
- case "link":
51
- u.href = c, u.target = r;
52
- break;
53
- }
54
- return /* @__PURE__ */ n.createElement(Ye, y({ className: z(e, "humany-dialog-link") }, u), m || /* @__PURE__ */ n.createElement(n.Fragment, null, i === "link" && /* @__PURE__ */ n.createElement(H, { faIcon: "link" }), /* @__PURE__ */ n.createElement("span", null, t)));
55
- }, ke = at, ta = _((s, o) => {
56
- var i = s, { className: t, dialog: e } = i, a = w(i, ["className", "dialog"]);
57
- return e.length ? /* @__PURE__ */ n.createElement(
58
- nt,
59
- E(y({
60
- className: z(t, "humany-dialog"),
61
- items: e,
62
- renderItem: (r) => /* @__PURE__ */ n.createElement("li", { key: r.connection, "data-dialog": r.connection }, /* @__PURE__ */ n.createElement(ke, y({}, r)))
63
- }, a), {
64
- ref: o
65
- })
66
- ) : null;
67
- }), nt = d(Z)`
68
- ${pe}
69
- a {
70
- min-width: 150px;
71
- max-width: 400px;
72
- display: block;
73
- white-space: normal;
74
- ${(t) => {
75
- var e, a;
76
- return ((e = t.theme.colors) == null ? void 0 : e.primary) && ye({
77
- primaryColor: (a = t.theme.colors) == null ? void 0 : a.primary,
78
- secondaryColor: "#FFFFFF",
79
- theme: t.theme
80
- });
81
- }}
82
- }
83
-
84
- i {
85
- margin: 0 ${(t) => {
86
- var e;
87
- return (e = t.theme.sizes) == null ? void 0 : e.small;
88
- }} 0 0;
89
- }
90
- `, ot = (f) => {
91
- var l = f, {
92
- trigger: t,
93
- header: e,
94
- className: a,
95
- animation: o,
96
- fullScreen: s,
97
- onToggle: i,
98
- children: r,
99
- ref: c,
100
- closeButtonAriaLabel: m
101
- } = l, u = w(l, [
102
- "trigger",
103
- "header",
104
- "className",
105
- "animation",
106
- "fullScreen",
107
- "onToggle",
108
- "children",
109
- "ref",
110
- "closeButtonAriaLabel"
111
- ]);
112
- return /* @__PURE__ */ n.createElement(
113
- _e,
114
- {
115
- className: z(a, "humany-drawer-list"),
116
- trigger: t,
117
- header: e,
118
- animation: o,
119
- fullScreen: s,
120
- onToggle: i,
121
- closeButtonAriaLabel: m
122
- },
123
- /* @__PURE__ */ n.createElement(rt, y({}, u), r)
124
- );
125
- }, aa = ot, rt = d(O)`
126
- ${Y}
127
- font-family: ${(t) => {
128
- var e;
129
- return (e = t.theme.fonts) == null ? void 0 : e.type;
130
- }};
131
- padding: ${(t) => {
132
- var e;
133
- return (e = t.theme.sizes) == null ? void 0 : e.medium;
134
- }};
135
- > ul > li {
136
- overflow: visible;
137
- font-weight: 300;
138
- font-size: ${(t) => {
139
- var e;
140
- return (e = t.theme.fonts) == null ? void 0 : e.normal;
141
- }};
142
- }
143
- `, st = ({ items: t, renderItem: e, trigger: a, header: o, children: s }) => /* @__PURE__ */ n.createElement($e, { className: "humany-dropdown-actions", trigger: a }, /* @__PURE__ */ n.createElement(it, null, !!o && /* @__PURE__ */ n.createElement(lt, null, o), t && e && /* @__PURE__ */ n.createElement(ct, { items: t, renderItem: e }), s)), na = st, it = d.div`
144
- background: #fff;
145
- border: #ccc 1px solid;
146
- box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
147
- font-family: ${(t) => {
148
- var e;
149
- return (e = t.theme.fonts) == null ? void 0 : e.type;
150
- }};
151
- font-size: ${(t) => {
152
- var e;
153
- return (e = t.theme.fonts) == null ? void 0 : e.normal;
154
- }};
155
- `, lt = d.div`
156
- padding: ${(t) => {
157
- var e;
158
- return (e = t.theme.sizes) == null ? void 0 : e.normal;
159
- }};
160
- padding-bottom: 0;
161
- font-size: ${(t) => {
162
- var e;
163
- return (e = t.theme.fonts) == null ? void 0 : e.normal;
164
- }};
165
- font-weight: normal;
166
- white-space: nowrap;
167
- display: flex;
168
- align-items: center;
169
-
170
- h1,
171
- h2,
172
- h3,
173
- h4,
174
- h5,
175
- h6 {
176
- margin: 0;
177
- font-weight: normal;
178
- padding-bottom: 0;
179
- }
180
-
181
- svg,
182
- i {
183
- margin-right: ${(t) => {
184
- var e;
185
- return (e = t.theme.sizes) == null ? void 0 : e.small;
186
- }};
187
- }
188
- `, ct = d(Z)`
189
- list-style: none;
190
- padding: 0;
191
- margin: 0;
192
- padding: ${(t) => {
193
- var e;
194
- return (e = t.theme.sizes) == null ? void 0 : e.small;
195
- }} 0;
196
-
197
- li {
198
- background: #fff;
199
-
200
- a {
201
- display: block;
202
- font-size: ${(t) => {
203
- var e;
204
- return (e = t.theme.fonts) == null ? void 0 : e.small;
205
- }};
206
- padding: ${(t) => {
207
- var e, a;
208
- return `${(e = t.theme.sizes) == null ? void 0 : e.small} ${(a = t.theme.sizes) == null ? void 0 : a.normal}`;
209
- }};
210
- cursor: pointer;
211
- color: #555;
212
- text-decoration: none;
213
-
214
- &:hover {
215
- background: #f9f9f9;
216
- color: ${(t) => {
217
- var e;
218
- return (e = t.theme.colors) == null ? void 0 : e.primary;
219
- }};
220
- }
221
- }
222
- }
223
- `, mt = (i) => {
224
- var r = i, {
225
- trigger: t,
226
- className: e,
227
- children: a,
228
- closeButtonAriaLabel: o
229
- } = r, s = w(r, [
230
- "trigger",
231
- "className",
232
- "children",
233
- "closeButtonAriaLabel"
234
- ]);
235
- return /* @__PURE__ */ n.createElement(
236
- $e,
237
- {
238
- className: z(e, "humany-dropdown-list"),
239
- closeButtonAriaLabel: o,
240
- trigger: t
241
- },
242
- /* @__PURE__ */ n.createElement(dt, y({}, s), a)
243
- );
244
- }, oa = mt, dt = d(O)`
245
- ${Y}
246
- font-family: ${(t) => {
247
- var e;
248
- return (e = t.theme.fonts) == null ? void 0 : e.type;
249
- }};
250
- > div {
251
- ${(t) => {
252
- var e;
253
- return ee(t)(
254
- "> h1",
255
- $`
256
- font-size: ${(e = t.theme.fonts) == null ? void 0 : e.normal};
257
- line-height: 1.2em;
258
- `
259
- );
260
- }}
261
- }
262
- > ul > li {
263
- overflow: visible;
264
- font-weight: 300;
265
- font-size: ${(t) => {
266
- var e;
267
- return (e = t.theme.fonts) == null ? void 0 : e.normal;
268
- }};
269
-
270
- a {
271
- display: inline-block;
272
-
273
- @media (hover: hover) {
274
- &:hover {
275
- text-decoration: underline;
276
- }
277
- }
278
- }
279
- }
280
- `, ut = (t) => $`
281
- ${t["data-loading"] && "position: relative;"};
282
- ${t["data-loading"] && "min-height: 150px;"}
283
- > * {
284
- transition: 200ms ease-out opacity;
285
- opacity: ${t["data-loading"] ? "0.5" : "1"};
286
- }
287
- .humany-loader {
288
- opacity: ${t["data-loading"] ? "1" : "0"};
289
- }
290
- `, ra = d(H)`
291
- && {
292
- font-size: ${(t) => {
293
- var e;
294
- return (e = t.theme.fonts) == null ? void 0 : e.small;
295
- }};
296
- }
297
- width: 1.2em;
298
- `, sa = d(ve)`
299
- font-size: ${(t) => {
300
- var e;
301
- return (e = t.theme.fonts) == null ? void 0 : e.medium;
302
- }};
303
- font-weight: normal;
304
- line-height: 1.2em;
305
- color: ${(t) => {
306
- var e;
307
- return (e = t.theme.colors) == null ? void 0 : e.text;
308
- }};
309
- `, ft = d(te)`
310
- display: flex;
311
- align-items: center;
312
-
313
- ${(t) => {
314
- var e;
315
- return t["data-has-label"] === "true" && t["data-has-symbol"] === "true" && `
316
- svg, i {
317
- margin: 0 ${(e = t.theme.sizes) == null ? void 0 : e.small} 0 0;
318
- }
319
- `;
320
- }}
321
-
322
- &:focus-visible {
323
- ${(t) => t["data-has-label"] === "true" && ie}
324
-
325
- svg, i {
326
- ${(t) => t["data-has-label"] === "false" && t["data-has-symbol"] === "true" && $`
327
- ${ie(t)}
328
- box-sizing: content-box;
329
- `}
330
- }
331
- }
332
-
333
- span {
334
- flex: 1;
335
- font-weight: 300;
336
- }
337
- `, ht = ({
338
- addFavoriteTooltip: t,
339
- removeFavoriteCancelLabel: e,
340
- removeFavoriteConfirmLabel: a,
341
- removeFavoriteHeader: o,
342
- removeFavoriteLabel: s,
343
- removeFavoriteTooltip: i,
344
- id: r,
345
- isFavorite: c,
346
- guideTitle: m,
347
- buttonLabel: u = "",
348
- actions: { addFavorite: f, removeFavorite: l }
349
- }) => {
350
- const h = k(() => {
351
- l(r);
352
- }, [r, l]), S = k(() => {
353
- f(r);
354
- }, [r, f]), p = `${c ? i : t}${m ? `: "${m}"` : ""}`;
355
- return /* @__PURE__ */ n.createElement(n.Fragment, null, c ? /* @__PURE__ */ n.createElement(
356
- Ke,
357
- {
358
- trigger: /* @__PURE__ */ n.createElement(
359
- me,
360
- {
361
- className: "humany-favorite-button",
362
- title: p,
363
- "aria-label": p,
364
- "data-favorite": "true",
365
- "data-has-label": u ? "true" : "false",
366
- "data-has-symbol": "true"
367
- },
368
- /* @__PURE__ */ n.createElement(
369
- N,
370
- {
371
- size: 16,
372
- symbol: { type: "Svg", content: "star-empty" }
373
- }
374
- ),
375
- u && /* @__PURE__ */ n.createElement(J, null, u)
376
- ),
377
- onConfirm: h,
378
- cancelLabel: e,
379
- confirmLabel: a,
380
- header: o,
381
- text: s
382
- }
383
- ) : /* @__PURE__ */ n.createElement(
384
- me,
385
- {
386
- className: "humany-favorite-button",
387
- title: p,
388
- "aria-label": p,
389
- onClick: S,
390
- "data-favorite": "false",
391
- "data-has-label": u ? "true" : "false",
392
- "data-has-symbol": "true"
393
- },
394
- /* @__PURE__ */ n.createElement(N, { size: 16, symbol: { type: "Svg", content: "star-empty" } }),
395
- u && /* @__PURE__ */ n.createElement(J, null, u)
396
- ));
397
- }, gt = ht, me = d(ft)`
398
- grid-area: favorite;
399
-
400
- &:focus-visible {
401
- svg {
402
- ${(t) => {
403
- var e, a;
404
- return t["data-favorite"] === "true" ? `
405
- fill: transparent;
406
-
407
- path {
408
- fill: transparent;
409
- }
410
- ` : `
411
- fill: ${(e = t.theme.colors) == null ? void 0 : e.text};
412
-
413
- path {
414
- fill: ${(a = t.theme.colors) == null ? void 0 : a.text};
415
- }
416
- `;
417
- }}
418
- }
419
- }
420
-
421
- ${(t) => {
422
- var e, a, o, s, i, r, c;
423
- return ((e = t.theme.colors) == null ? void 0 : e.text) && $`
424
- svg {
425
- stroke: ${(a = t.theme.colors) == null ? void 0 : a.text};
426
-
427
- path {
428
- stroke: ${(o = t.theme.colors) == null ? void 0 : o.text};
429
- }
430
-
431
- ${t["data-favorite"] === "true" && `
432
- fill: ${(s = t.theme.colors) == null ? void 0 : s.text};
433
-
434
- path {
435
- fill: ${(i = t.theme.colors) == null ? void 0 : i.text};
436
- }
437
- `}
438
- }
439
-
440
- &:hover {
441
- svg {
442
- ${t["data-favorite"] === "true" ? `
443
- fill: transparent;
444
-
445
- path {
446
- fill: transparent;
447
- }
448
- ` : `
449
- fill: ${(r = t.theme.colors) == null ? void 0 : r.text};
450
-
451
- path {
452
- fill: ${(c = t.theme.colors) == null ? void 0 : c.text};
453
- }
454
- `}
455
- }
456
- }
457
- `;
458
- }}
459
- `, ia = _(
460
- (u, m) => {
461
- var f = u, {
462
- onFeedback: t = () => {
463
- },
464
- direction: e = "horizontal",
465
- className: a,
466
- header: o,
467
- positive: s,
468
- negative: i,
469
- selected: r
470
- } = f, c = w(f, [
471
- "onFeedback",
472
- "direction",
473
- "className",
474
- "header",
475
- "positive",
476
- "negative",
477
- "selected"
478
- ]);
479
- return /* @__PURE__ */ n.createElement(
480
- yt,
481
- E(y({
482
- className: z(a, "humany-feedback"),
483
- "data-direction": e
484
- }, xe(c)), {
485
- ref: m
486
- }),
487
- !!o && /* @__PURE__ */ n.createElement(pt, null, o),
488
- /* @__PURE__ */ n.createElement(
489
- de,
490
- {
491
- className: "humany-feedback-button",
492
- disabled: !!r,
493
- "aria-pressed": r === "positive",
494
- "data-selected": r === "positive",
495
- "data-direction": e,
496
- onClick: () => t("positive")
497
- },
498
- /* @__PURE__ */ n.createElement(H, { faIcon: "smile-o" }),
499
- /* @__PURE__ */ n.createElement("span", null, s)
500
- ),
501
- /* @__PURE__ */ n.createElement(
502
- de,
503
- {
504
- className: "humany-feedback-button",
505
- disabled: !!r,
506
- "aria-pressed": r === "negative",
507
- "data-selected": r === "negative",
508
- "data-direction": e,
509
- onClick: () => t("negative")
510
- },
511
- /* @__PURE__ */ n.createElement(H, { faIcon: "frown-o" }),
512
- /* @__PURE__ */ n.createElement("span", null, i)
513
- )
514
- );
515
- }
516
- ), pt = d(J)`
517
- font-weight: normal;
518
- margin: 0 0 ${(t) => {
519
- var e;
520
- return (e = t.theme.sizes) == null ? void 0 : e.normal;
521
- }};
522
- font-size: ${(t) => {
523
- var e;
524
- return (e = t.theme.fonts) == null ? void 0 : e.normal;
525
- }};
526
- display: block;
527
- `, de = d(te)`
528
- display: inline-block;
529
- font-size: ${(t) => {
530
- var e;
531
- return (e = t.theme.fonts) == null ? void 0 : e.normal;
532
- }};
533
- font-weight: 300;
534
- && {
535
- margin-right: ${(t) => {
536
- var e;
537
- return (e = t.theme.sizes) == null ? void 0 : e.large;
538
- }};
539
- }
540
-
541
- ${(t) => {
542
- var e, a;
543
- return t["data-direction"] === "horizontal" && $`
544
- width: 225px;
545
- max-width: calc(50% - ${(e = t.theme.sizes) == null ? void 0 : e.large} - ${(a = t.theme.sizes) == null ? void 0 : a.small});
546
- `;
547
- }}
548
-
549
- ${(t) => t["data-direction"] === "vertical" && $`
550
- min-width: 190px;
551
- `}
552
-
553
- ${(t) => {
554
- var e, a;
555
- return ((e = t.theme.colors) == null ? void 0 : e.primary) && ye({
556
- active: t["data-selected"],
557
- primaryColor: (a = t.theme.colors) == null ? void 0 : a.primary,
558
- secondaryColor: "#FFFFFF",
559
- theme: t.theme
560
- });
561
- }}
562
-
563
- i {
564
- margin: 0 ${(t) => {
565
- var e;
566
- return (e = t.theme.sizes) == null ? void 0 : e.small;
567
- }} 0 0;
568
- }
569
- `, yt = d.div`
570
- ${(t) => {
571
- var e;
572
- return t["data-direction"] === "vertical" && $`
573
- > button {
574
- width: 100%;
575
- &:not(:last-child) {
576
- margin-bottom: ${(e = t.theme.sizes) == null ? void 0 : e.normal};
577
- }
578
- }
579
- `;
580
- }}
581
- `, $t = () => {
582
- const [t, e] = T(null), a = W("ArrowLeft"), o = W("ArrowRight"), s = W("ArrowUp"), i = W("ArrowDown");
583
- return K(() => {
584
- e(a ? "left" : o ? "right" : s ? "up" : i ? "down" : null);
585
- }, [a, o, s, i]), t;
586
- }, la = $t, vt = (t, e) => {
587
- const [a, o] = T(t), s = k(() => setTimeout(() => {
588
- o(t);
589
- }, e), [e, o, t]);
590
- return K(
591
- () => {
592
- const i = s();
593
- return () => {
594
- clearTimeout(i);
595
- };
596
- },
597
- [s]
598
- ), a;
599
- }, ca = vt, xt = () => {
600
- const t = Ve(), [e, a] = T([]), o = t.get("favorites");
601
- K(() => {
602
- if (o) {
603
- a(o.get());
604
- const { events: m } = t.get("$widget");
605
- return m.subscribe("widget:favorites-updated", (f, { updated: l }) => {
606
- a([...l]);
607
- });
608
- }
609
- }, []);
610
- const s = (m) => o ? o.add(m) : Promise.resolve([]), i = (m) => o ? o.remove(m) : Promise.resolve([]), r = () => o ? o.clear() : Promise.resolve([]), c = k(
611
- (m) => e.indexOf(m) > -1 ? i(m) : s(m),
612
- [e]
613
- );
614
- return [
615
- e,
616
- Ze(
617
- () => ({
618
- addFavorite: s,
619
- removeFavorite: i,
620
- clearFavorites: r,
621
- toggleFavorite: c
622
- }),
623
- [e]
624
- )
625
- ];
626
- }, bt = xt, ma = () => {
627
- const [t, e] = T(!1), a = Ee(), o = k(() => e(!0), [e]), s = k(() => e(!1), [e]);
628
- return le("mouseenter", o, a.current), le("mouseleave", s, a.current), [t, a];
629
- }, wt = ({
630
- format: t = be.YYYY_MM_DD_HH_MM,
631
- className: e = "",
632
- byLabel: a = "",
633
- modifiedLabel: o = "",
634
- publishedLabel: s = "",
635
- modifiedBy: i = "",
636
- publishedBy: r = "",
637
- showModified: c = !1,
638
- showPublished: m = !1,
639
- modified: u,
640
- published: f
641
- }) => {
642
- const l = m && f ? /* @__PURE__ */ n.createElement(ue, { format: t, timestamp: f }) : null, h = c && u ? /* @__PURE__ */ n.createElement(ue, { format: t, timestamp: u }) : null;
643
- return !l && !h ? null : /* @__PURE__ */ n.createElement(U, { className: z(e, "humany-metadata") }, l && /* @__PURE__ */ n.createElement(U, { className: "humany-published" }, s, l, a && r && ` ${a.replace("{{editor}}", r)}`), h && /* @__PURE__ */ n.createElement(U, { className: "humany-modified" }, l && ", ", o, h, a && i && ` ${a.replace("{{editor}}", i)}`));
644
- }, Et = wt, ue = d(we)`
645
- &:not(:first-child) {
646
- margin-left: 4px;
647
- }
648
- &:not(:last-child) {
649
- margin-right: 4px;
650
- }
651
- `, U = d(ve)`
652
- font-style: italic;
653
- `, kt = ({ tags: t }) => t.filter((e) => e.symbol).length ? /* @__PURE__ */ n.createElement(
654
- Nt,
655
- {
656
- className: "humany-guide-list-tags",
657
- items: t,
658
- renderItem: ({ id: e, symbol: a, title: o }) => a && /* @__PURE__ */ n.createElement("li", { key: e, "data-tag": e }, /* @__PURE__ */ n.createElement(Lt, { size: 18, symbol: a, title: o }))
659
- }
660
- ) : null, da = _(({ title: t, id: e, route: a, symbolSize: o, collapseUri: s, children: i }, r) => {
661
- const { params: c } = ge();
662
- return /* @__PURE__ */ n.createElement(zt, { ref: r, "data-guide": e }, /* @__PURE__ */ n.createElement(
663
- Q,
664
- {
665
- title: t,
666
- "aria-label": t,
667
- routeName: a,
668
- params: j(E(y({}, c), {
669
- uriName: s || void 0,
670
- id: void 0,
671
- guide: void 0,
672
- accordion: void 0
673
- })),
674
- text: t
675
- },
676
- /* @__PURE__ */ n.createElement(N, { size: o, symbol: { type: "Svg", content: "caret-up" } })
677
- ), i);
678
- }), zt = d.li`
679
- > a {
680
- grid-column: 1/-1;
681
- font-weight: bold;
682
- margin: 0 0 ${(t) => {
683
- var e;
684
- return (e = t.theme.sizes) == null ? void 0 : e.normal;
685
- }} 0;
686
- }
687
-
688
- > div {
689
- grid-column: 1/-1;
690
- }
691
- `, ua = _(
692
- (Gt, Fe) => {
693
- var ae = Gt, {
694
- expandable: t = !1,
695
- routing: e = {},
696
- paramMappers: a = {},
697
- symbolSize: o = 11,
698
- pageRole: s = "link",
699
- pageCaret: i = "down",
700
- showTags: r = !1,
701
- showFavoriteToggle: c = !1,
702
- localPaging: m = !1,
703
- onItemClick: u = () => {
704
- },
705
- dispatch: f = () => {
706
- },
707
- metadata: l = {},
708
- pageLabel: h,
709
- className: S,
710
- children: p,
711
- items: x,
712
- renderItem: L,
713
- addFavoriteTooltip: C,
714
- removeFavoriteCancelLabel: M,
715
- removeFavoriteConfirmLabel: ze,
716
- removeFavoriteHeader: Se,
717
- removeFavoriteLabel: Ne,
718
- removeFavoriteTooltip: Le
719
- } = ae, De = w(ae, [
720
- "expandable",
721
- "routing",
722
- "paramMappers",
723
- "symbolSize",
724
- "pageRole",
725
- "pageCaret",
726
- "showTags",
727
- "showFavoriteToggle",
728
- "localPaging",
729
- "onItemClick",
730
- "dispatch",
731
- "metadata",
732
- "pageLabel",
733
- "className",
734
- "children",
735
- "items",
736
- "renderItem",
737
- "addFavoriteTooltip",
738
- "removeFavoriteCancelLabel",
739
- "removeFavoriteConfirmLabel",
740
- "removeFavoriteHeader",
741
- "removeFavoriteLabel",
742
- "removeFavoriteTooltip"
743
- ]);
744
- const V = qe(), F = Ee(), I = Ge(x), { guide: Ie = "guide", page: Ae = "index" } = e, {
745
- guide: Te = ({ id: g }) => j({ guide: g }),
746
- page: ne = () => j()
747
- } = a, [Ce, Me] = bt();
748
- et(Fe, () => F.current);
749
- const q = (g) => {
750
- const { id: b, title: v, tags: D, published: P, modified: A, publishedBy: B, modifiedBy: G } = g;
751
- return /* @__PURE__ */ n.createElement(
752
- "li",
753
- {
754
- key: b,
755
- "data-guide": b,
756
- "has-metadata": (!!(l != null && l.showPublished) && !!P || !!(l != null && l.showModified) && !!A).toString()
757
- },
758
- /* @__PURE__ */ n.createElement(
759
- Q,
760
- {
761
- className: "humany-guide-link",
762
- title: v,
763
- "aria-label": v,
764
- routeName: Ie,
765
- onClick: (We) => u(We, g),
766
- params: Te(g),
767
- text: v
768
- },
769
- /* @__PURE__ */ n.createElement(
770
- N,
771
- {
772
- size: o,
773
- symbol: {
774
- type: "Svg",
775
- content: t ? "caret-down" : "caret-right"
776
- }
777
- }
778
- )
779
- ),
780
- c && /* @__PURE__ */ n.createElement(
781
- gt,
782
- {
783
- guideTitle: v,
784
- addFavoriteTooltip: C,
785
- removeFavoriteCancelLabel: M,
786
- removeFavoriteConfirmLabel: ze,
787
- removeFavoriteHeader: Se,
788
- removeFavoriteLabel: Ne,
789
- removeFavoriteTooltip: Le,
790
- isFavorite: Ce.indexOf(b) > -1,
791
- actions: Me,
792
- id: b
793
- }
794
- ),
795
- r && /* @__PURE__ */ n.createElement(kt, { tags: D }),
796
- /* @__PURE__ */ n.createElement(
797
- Dt,
798
- E(y({}, l), {
799
- indent: t ? void 0 : o,
800
- modified: A,
801
- published: P,
802
- publishedBy: B,
803
- modifiedBy: G
804
- })
805
- )
806
- );
807
- }, Pe = k(
808
- (g, b, v) => L ? L(g, b, v, q) : q(g),
809
- [L, q]
810
- ), Be = k(
811
- (g) => {
812
- m && (g.preventDefault(), f("page", ne()));
813
- },
814
- [f, m]
815
- );
816
- K(() => {
817
- if (V && I && I.length < x.length && F.current) {
818
- const g = F.current.querySelectorAll(".humany-guide-list > ul > li"), b = g[I.length];
819
- if (g.length === x.length && I.length) {
820
- const v = g[I.length];
821
- if (v) {
822
- const D = v.querySelector(
823
- ".humany-guide-link"
824
- );
825
- D && D.focus();
826
- }
827
- } else
828
- b && new MutationObserver((D, P) => {
829
- D.forEach((A) => {
830
- if (A.addedNodes) {
831
- const B = Array.from(
832
- A.addedNodes
833
- ).find((G) => G.tagName === "A");
834
- B && tt(F.current, document.activeElement) && (V && B.focus(), P.disconnect());
835
- }
836
- });
837
- }).observe(b, {
838
- attributes: !1,
839
- characterData: !1,
840
- childList: !0,
841
- subtree: !0,
842
- attributeOldValue: !1,
843
- characterDataOldValue: !1
844
- });
845
- }
846
- });
847
- const Re = !!Object.keys(l).filter(
848
- (g) => typeof l[g] != "undefined"
849
- ).length;
850
- return /* @__PURE__ */ n.createElement(
851
- St,
852
- E(y({
853
- className: z(S, "humany-guide-list"),
854
- "data-item-count": x.length,
855
- items: x,
856
- renderItem: Pe,
857
- isTabbing: V,
858
- expandable: t ? "true" : "false",
859
- "grid-items": r || c || Re ? "true" : "false"
860
- }, xe(De)), {
861
- ref: F
862
- }),
863
- h ? /* @__PURE__ */ n.createElement(
864
- Q,
865
- {
866
- text: h,
867
- title: h,
868
- "aria-label": h,
869
- routeName: Ae,
870
- role: s,
871
- params: ne(),
872
- onClick: Be
873
- },
874
- /* @__PURE__ */ n.createElement(
875
- N,
876
- {
877
- size: o,
878
- symbol: { type: "Svg", content: `caret-${i}` }
879
- }
880
- )
881
- ) : null,
882
- p
883
- );
884
- }
885
- ), St = d(O)`
886
- ${Y}
887
- padding: ${(t) => {
888
- var e;
889
- return (e = t.theme.sizes) == null ? void 0 : e.large;
890
- }};
891
- overflow: auto;
892
- justify-content: flex-start;
893
- white-space: nowrap;
894
- font-weight: 300;
895
- text-decoration: none;
896
-
897
- > div {
898
- ${(t) => ee(t)(
899
- "> h1",
900
- $`
901
- white-space: pre-wrap;
902
- `
903
- )}
904
- }
905
-
906
- > ul > li {
907
- ${(t) => {
908
- var e, a;
909
- return t["grid-items"] === "true" && $`
910
- display: grid;
911
- grid-template-columns: auto 1fr 1fr;
912
- gap: 0px 0px;
913
- grid-template-areas: '. favorite tags';
914
- align-items: center;
915
-
916
- > button {
917
- margin: 0 0 0 ${(e = t.theme.sizes) == null ? void 0 : e.small};
918
-
919
- &[data-favorite='false'] {
920
- ${t.isTabbing ? "opacity: 0;" : "display: none;"};
921
- &:focus {
922
- opacity: 1;
923
- }
924
- }
925
- }
926
-
927
- > span {
928
- font-size: ${(a = t.theme.fonts) == null ? void 0 : a.small};
929
- }
930
-
931
- &:hover {
932
- button[data-favorite='false'] {
933
- display: flex;
934
- justify-self: flex-start;
935
- }
936
- }
937
-
938
- &[has-metadata='true'] {
939
- grid-template-rows: 1fr 1fr;
940
- grid-template-areas:
941
- '. favorite tags'
942
- 'metadata metadata metadata';
943
- }
944
- `;
945
- }}
946
- > a {
947
- color: ${(t) => {
948
- var e;
949
- return (e = t.theme.colors) == null ? void 0 : e.primary;
950
- }};
951
- overflow: hidden;
952
- text-overflow: ellipsis;
953
- max-width: 100%;
954
- display: inline-block;
955
-
956
- svg {
957
- margin: 0 calc(${(t) => {
958
- var e;
959
- return (e = t.theme.sizes) == null ? void 0 : e.small;
960
- }}*2) 0 0;
961
- line {
962
- stroke: ${(t) => {
963
- var e;
964
- return (e = t.theme.colors) == null ? void 0 : e.primary;
965
- }};
966
- }
967
- }
968
-
969
- ${(t) => {
970
- var e;
971
- return t.expandable === "true" && $`
972
- display: flex;
973
- flex-direction: row-reverse;
974
- justify-content: flex-end;
975
- align-items: center;
976
-
977
- span {
978
- overflow: hidden;
979
- text-overflow: ellipsis;
980
- }
981
-
982
- svg {
983
- margin: 0 0 0 ${(e = t.theme.sizes) == null ? void 0 : e.small};
984
- }
985
- `;
986
- }}
987
-
988
- &:focus-visible {
989
- ${X}
990
- text-decoration: underline;
991
- }
992
-
993
- @media (hover: hover) {
994
- &:hover {
995
- text-decoration: underline;
996
- }
997
- }
998
- }
999
- }
1000
-
1001
- > a {
1002
- color: ${(t) => {
1003
- var e;
1004
- return (e = t.theme.colors) == null ? void 0 : e.text;
1005
- }};
1006
- margin: ${(t) => {
1007
- var e;
1008
- return (e = t.theme.sizes) == null ? void 0 : e.normal;
1009
- }} 0 0;
1010
- align-self: flex-start;
1011
- align-items: center;
1012
- display: flex;
1013
-
1014
- span {
1015
- text-decoration: underline;
1016
- }
1017
-
1018
- svg {
1019
- margin: 0 calc(${(t) => {
1020
- var e;
1021
- return (e = t.theme.sizes) == null ? void 0 : e.small;
1022
- }}*2) 0 0;
1023
- line {
1024
- stroke: ${(t) => {
1025
- var e;
1026
- return (e = t.theme.colors) == null ? void 0 : e.text;
1027
- }};
1028
- }
1029
- }
1030
-
1031
- &:focus-visible {
1032
- ${X}
1033
- text-decoration: underline;
1034
- }
1035
- }
1036
- `, Nt = d(Z)`
1037
- ${pe}
1038
- display: flex;
1039
- margin: 0 0 0 auto;
1040
- grid-area: tags;
1041
-
1042
- li,
1043
- li:last-child {
1044
- margin: 0 0 0 ${(t) => {
1045
- var e;
1046
- return (e = t.theme.sizes) == null ? void 0 : e.small;
1047
- }};
1048
- display: flex;
1049
- align-items: center;
1050
- justify-content: space-between;
1051
- }
1052
- `, Lt = d(N)`
1053
- display: block;
1054
- color: ${(t) => {
1055
- var e;
1056
- return (e = t.theme.colors) == null ? void 0 : e.primary;
1057
- }};
1058
- ${(t) => {
1059
- if (t.symbol.type === "Uri")
1060
- return `
1061
- width: ${t.size}px;
1062
- height: ${t.size}px;
1063
- `;
1064
- if (t.symbol.type === "FontAwesome")
1065
- return `
1066
- font-size: ${t.size}px;
1067
- `;
1068
- }}
1069
- `, Dt = d(Et)`
1070
- grid-area: metadata;
1071
- text-overflow: ellipsis;
1072
- overflow: hidden;
1073
- font-size: ${(t) => {
1074
- var e;
1075
- return (e = t.theme.fonts) == null ? void 0 : e.small;
1076
- }};
1077
- ${(t) => {
1078
- var e;
1079
- return typeof t.indent == "number" && `text-indent: calc(${(e = t.theme.sizes) == null ? void 0 : e.small} * 2 + ${t.indent}px);`;
1080
- }}
1081
- `, Ft = he`
1082
- 100% {
1083
- transform: rotate(360deg);
1084
- }
1085
- `, It = he`
1086
- 0% {
1087
- stroke-dasharray: 1, 200;
1088
- stroke-dashoffset: 0;
1089
- }
1090
- 50% {
1091
- stroke-dasharray: 89, 200;
1092
- stroke-dashoffset: -35px;
1093
- }
1094
- 100% {
1095
- stroke-dasharray: 89, 200;
1096
- stroke-dashoffset: -124px;
1097
- }
1098
- `, At = d.svg`
1099
- animation: ${Ft} 2s linear infinite;
1100
- height: 100%;
1101
- transform-origin: center center;
1102
- width: 100%;
1103
- position: absolute;
1104
- top: 0;
1105
- bottom: 0;
1106
- left: 0;
1107
- right: 0;
1108
- margin: auto;
1109
- transition: 200ms ease-out opacity;
1110
- `, Tt = d.div`
1111
- position: absolute;
1112
- top: 0;
1113
- bottom: 0;
1114
- left: 0;
1115
- right: 0;
1116
- height: 100%;
1117
- width: 100%;
1118
- pointer-events: ${(t) => t["data-loading"] ? "all" : "none"};
1119
- display: flex;
1120
- flex-direction: column;
1121
- justify-content: center;
1122
- transition: 200ms ease-out opacity;
1123
- box-sizing: border-box;
1124
- overflow: hidden;
1125
-
1126
- .humany-spinner-svg {
1127
- opacity: ${(t) => t["data-loading"] ? "1" : "0"};
1128
- }
1129
- `, Ct = d.div`
1130
- position: relative;
1131
- margin: 0 auto;
1132
- width: 100px;
1133
- &:before {
1134
- content: '';
1135
- display: block;
1136
- padding-top: 100%;
1137
- }
1138
- `, Mt = d.circle`
1139
- stroke-dasharray: 1, 200;
1140
- stroke-dashoffset: 0;
1141
- animation: ${It} 1.5s ease-in-out infinite;
1142
- stroke-linecap: round;
1143
- stroke: ${(t) => {
1144
- var e;
1145
- return (e = t.theme.colors) == null ? void 0 : e.primary;
1146
- }};
1147
- stroke-width: 2px;
1148
- `, Pt = ({ loading: t = !1 }) => /* @__PURE__ */ n.createElement(Tt, { className: "humany-loader", "data-loading": t }, /* @__PURE__ */ n.createElement(Ct, { className: "humany-spinner" }, /* @__PURE__ */ n.createElement(At, { className: "humany-spinner-svg", viewBox: "25 25 50 50" }, /* @__PURE__ */ n.createElement(
1149
- Mt,
1150
- {
1151
- cx: "50",
1152
- cy: "50",
1153
- r: "20",
1154
- fill: "none",
1155
- "stroke-width": "2",
1156
- "stroke-miterlimit": "10"
1157
- }
1158
- )))), Bt = Pt, Rt = (i) => {
1159
- var r = i, {
1160
- className: t,
1161
- showHeader: e,
1162
- notificationList: a,
1163
- loading: o
1164
- } = r, s = w(r, [
1165
- "className",
1166
- "showHeader",
1167
- "notificationList",
1168
- "loading"
1169
- ]);
1170
- const [c, m] = T(null), {
1171
- id: u,
1172
- title: f,
1173
- symbol: l,
1174
- notifications: h = [],
1175
- defaultHeaderOptions: S = { visible: !0 }
1176
- } = a || {};
1177
- return !h.length && !o ? null : /* @__PURE__ */ n.createElement(
1178
- Ht,
1179
- E(y({}, s), {
1180
- "data-loading": o,
1181
- "data-show-header": typeof e == "boolean" ? e : S.visible,
1182
- className: z(t, "humany-notification-list"),
1183
- "data-notification-category": u,
1184
- header: f,
1185
- symbol: l,
1186
- items: h,
1187
- renderItem: ({ id: p, title: x, body: L, modified: C, expandable: M }) => /* @__PURE__ */ n.createElement(
1188
- jt,
1189
- {
1190
- key: p,
1191
- "data-notification": p,
1192
- "data-expanded": M ? c === p : !0
1193
- },
1194
- M ? /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
1195
- Wt,
1196
- {
1197
- title: x,
1198
- "aria-label": x,
1199
- "aria-expanded": c === p,
1200
- onClick: () => m(c === p ? null : p)
1201
- },
1202
- /* @__PURE__ */ n.createElement("span", null, x),
1203
- /* @__PURE__ */ n.createElement(
1204
- Ot,
1205
- {
1206
- size: 11,
1207
- symbol: {
1208
- type: "Svg",
1209
- content: `caret-${c === p ? "up" : "down"}`
1210
- }
1211
- }
1212
- )
1213
- ), /* @__PURE__ */ n.createElement(fe, { html: L }), C && /* @__PURE__ */ n.createElement(
1214
- Yt,
1215
- {
1216
- format: be.YYYY_MM_DD,
1217
- timestamp: C
1218
- }
1219
- )) : /* @__PURE__ */ n.createElement(fe, { html: L })
1220
- )
1221
- }),
1222
- /* @__PURE__ */ n.createElement(Bt, { loading: o })
1223
- );
1224
- }, Wt = d(te)`
1225
- display: flex;
1226
- justify-content: space-between;
1227
- align-items: center;
1228
- width: 100%;
1229
- text-align: left;
1230
- svg,
1231
- i {
1232
- color: ${(t) => {
1233
- var e;
1234
- return (e = t.theme.colors) == null ? void 0 : e.primary;
1235
- }};
1236
- }
1237
- span {
1238
- color: ${(t) => {
1239
- var e;
1240
- return (e = t.theme.colors) == null ? void 0 : e.text;
1241
- }};
1242
- font-size: ${(t) => {
1243
- var e;
1244
- return (e = t.theme.fonts) == null ? void 0 : e.normal;
1245
- }};
1246
- overflow: hidden;
1247
- text-overflow: ellipsis;
1248
- flex: 1;
1249
- white-space: nowrap;
1250
- }
1251
- &:focus-visible {
1252
- ${X}
1253
- span {
1254
- color: ${(t) => {
1255
- var e;
1256
- return (e = t.theme.colors) == null ? void 0 : e.primary;
1257
- }};
1258
- text-decoration: underline;
1259
- }
1260
- }
1261
- `, Ht = d(O)`
1262
- ${ut}
1263
- ${Y}
1264
- overflow: hidden;
1265
- justify-content: flex-start;
1266
- padding: ${(t) => {
1267
- var e;
1268
- return (e = t.theme.sizes) == null ? void 0 : e.large;
1269
- }};
1270
- ${(t) => !t["data-show-header"] && $`
1271
- > div {
1272
- ${ee(t)(
1273
- "h1",
1274
- $`
1275
- display: none;
1276
- `
1277
- )}
1278
- }
1279
- `}
1280
-
1281
- @media (hover: hover) {
1282
- button:hover {
1283
- text-decoration: underline;
1284
- }
1285
- }
1286
- `, fe = d(Ue)`
1287
- ${Je}
1288
- font-weight: 300;
1289
-
1290
- p {
1291
- white-space: normal;
1292
- }
1293
- `, jt = d.li`
1294
- .humany-paragraph {
1295
- display: none;
1296
- &:not(:only-child) {
1297
- ${(t) => {
1298
- var e, a, o;
1299
- return ((e = t.theme.sizes) == null ? void 0 : e.cardinal) && ((a = t.theme.sizes) == null ? void 0 : a.normal) && $`
1300
- margin: ${(o = t.theme.sizes) == null ? void 0 : o.normal} 0;
1301
- `;
1302
- }}
1303
- }
1304
- }
1305
-
1306
- ${(t) => t["data-expanded"] && $`
1307
- .humany-paragraph {
1308
- display: block;
1309
- }
1310
- `}
1311
-
1312
- > span {
1313
- display: block;
1314
- font-weight: 300;
1315
- color: ${(t) => {
1316
- var e;
1317
- return (e = t.theme.colors) == null ? void 0 : e.accent;
1318
- }};
1319
- }
1320
- `, Ot = d(N)`
1321
- margin: 0 0 0 ${(t) => {
1322
- var e;
1323
- return (e = t.theme.sizes) == null ? void 0 : e.small;
1324
- }};
1325
- line {
1326
- stroke: ${(t) => {
1327
- var e;
1328
- return (e = t.theme.colors) == null ? void 0 : e.primary;
1329
- }};
1330
- }
1331
- `, Yt = d(we)`
1332
- font-size: ${(t) => {
1333
- var e;
1334
- return (e = t.theme.fonts) == null ? void 0 : e.small;
1335
- }};
1336
- font-weight: 300;
1337
- `, fa = Rt, _t = (t) => new RegExp("^#", "i").test(t), Kt = (t) => (o) => {
1338
- var s = o, { children: e } = s, a = w(s, ["children"]);
1339
- const {
1340
- implementation: i,
1341
- name: r
1342
- } = t.get("$widget"), { href: c = "" } = a;
1343
- if (_t(c))
1344
- return /* @__PURE__ */ n.createElement(Qe, { smooth: !0, to: c }, e);
1345
- const m = i.bindings.map((l) => l.replace(/\./g, "\\.")).join("|"), f = new RegExp(`^((http[s]?:)?//)?(${m})/([^\\s]+)`).exec(c);
1346
- if (f && f.length >= 4) {
1347
- const l = f[4];
1348
- if (i.widgets.get(l) && !l.startsWith("blob?") && !l.startsWith(r))
1349
- return /* @__PURE__ */ n.createElement(Xe, { widgetName: l }, e);
1350
- }
1351
- return /* @__PURE__ */ n.createElement("a", y({}, a), e);
1352
- }, Vt = Kt, qt = (t, e = []) => ({
1353
- transform: {
1354
- a: (a) => {
1355
- const c = a, { children: o } = c, i = w(c, ["children"])["data-target"];
1356
- if (i && e.length) {
1357
- const m = e.find(({ connection: u }) => u === i);
1358
- if (m)
1359
- return /* @__PURE__ */ n.createElement(ke, y({}, m), o);
1360
- }
1361
- return Vt(t)(a);
1362
- }
1363
- }
1364
- }), ha = qt;
1
+ const o = {};
1365
2
  export {
1366
- da as AccordionListItem,
1367
- ke as DialogLink,
1368
- ta as DialogList,
1369
- aa as DrawerList,
1370
- na as DropdownActions,
1371
- oa as DropdownList,
1372
- gt as FavoriteButton,
1373
- ia as Feedback,
1374
- ua as GuideList,
1375
- Bt as Loader,
1376
- Tt as LoaderWrapper,
1377
- Et as Metadata,
1378
- fa as NotificationList,
1379
- ra as SmallCaret,
1380
- sa as StyledHeaderText,
1381
- ft as StyledListButton,
1382
- ha as guideRenderInstructions,
1383
- ut as loadingOpacity,
1384
- la as useArrowKeys,
1385
- ca as useDebounce,
1386
- bt as useFavorites,
1387
- ma as useHover
3
+ o as x
1388
4
  };
1389
5
  //# sourceMappingURL=index.js.map