@telia-ace/knowledge-widget-components-guide-category-dropdown 1.0.16 → 1.0.19
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/guide-category-dropdown.e32ae53a.js +287 -0
- package/dist/guide-category-dropdown.e32ae53a.js.map +1 -0
- package/dist/index.js +59 -80
- package/dist/index.js.map +1 -1
- package/package.json +8 -8
- package/dist/guide-category-dropdown.js +0 -323
- package/dist/guide-category-dropdown.js.map +0 -1
|
@@ -0,0 +1,287 @@
|
|
|
1
|
+
var P = Object.defineProperty, W = Object.defineProperties;
|
|
2
|
+
var H = Object.getOwnPropertyDescriptors;
|
|
3
|
+
var b = Object.getOwnPropertySymbols;
|
|
4
|
+
var S = Object.prototype.hasOwnProperty, I = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var L = (t, e, a) => e in t ? P(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a, s = (t, e) => {
|
|
6
|
+
for (var a in e || (e = {}))
|
|
7
|
+
S.call(e, a) && L(t, a, e[a]);
|
|
8
|
+
if (b)
|
|
9
|
+
for (var a of b(e))
|
|
10
|
+
I.call(e, a) && L(t, a, e[a]);
|
|
11
|
+
return t;
|
|
12
|
+
}, w = (t, e) => W(t, H(e));
|
|
13
|
+
var F = (t, e) => {
|
|
14
|
+
var a = {};
|
|
15
|
+
for (var n in t)
|
|
16
|
+
S.call(t, n) && e.indexOf(n) < 0 && (a[n] = t[n]);
|
|
17
|
+
if (t != null && b)
|
|
18
|
+
for (var n of b(t))
|
|
19
|
+
e.indexOf(n) < 0 && I.call(t, n) && (a[n] = t[n]);
|
|
20
|
+
return a;
|
|
21
|
+
};
|
|
22
|
+
import { loadingOpacity as U, contentBox as q, borderTabStyle as J, Link as K, linkTabStyle as Q, List as V, list as X, Text as E, useProperties as N, useHover as Y, SymbolBadge as u, useRouteData as Z, useContainer as _, createEmptyComponent as ee } from "@telia-ace/knowledge-widget-ui";
|
|
23
|
+
import { appendClassNames as D, createParams as te, formatUrl as oe } from "@telia-ace/widget-utilities";
|
|
24
|
+
import o, { useState as B, useEffect as ae } from "react";
|
|
25
|
+
import { initialRouteFallback as ne } from "@telia-ace/knowledge-widget-component-utilities";
|
|
26
|
+
import c, { css as $ } from "styled-components";
|
|
27
|
+
const re = c.div`
|
|
28
|
+
${U}
|
|
29
|
+
${q}
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
min-height: 50px;
|
|
32
|
+
${(t) => {
|
|
33
|
+
var e;
|
|
34
|
+
return t["data-toggler-in-focus"] && ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && $`
|
|
35
|
+
&& {
|
|
36
|
+
${J}
|
|
37
|
+
}
|
|
38
|
+
`;
|
|
39
|
+
}};
|
|
40
|
+
`, le = c.button`
|
|
41
|
+
background: none;
|
|
42
|
+
border: 0;
|
|
43
|
+
outline: 0;
|
|
44
|
+
display: block;
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
padding: 0;
|
|
47
|
+
font-size: ${(t) => {
|
|
48
|
+
var e;
|
|
49
|
+
return (e = t.theme.fonts) == null ? void 0 : e.normal;
|
|
50
|
+
}};
|
|
51
|
+
text-align: end;
|
|
52
|
+
flex: 1 0 auto;
|
|
53
|
+
svg {
|
|
54
|
+
path,
|
|
55
|
+
line {
|
|
56
|
+
stroke: ${(t) => {
|
|
57
|
+
var e;
|
|
58
|
+
return (e = t.theme.colors) == null ? void 0 : e.text;
|
|
59
|
+
}};
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
`, M = $`
|
|
63
|
+
font-size: ${(t) => {
|
|
64
|
+
var e;
|
|
65
|
+
return (e = t.theme.fonts) == null ? void 0 : e.normal;
|
|
66
|
+
}};
|
|
67
|
+
text-align: left;
|
|
68
|
+
text-align: left;
|
|
69
|
+
text-decoration: none;
|
|
70
|
+
font-weight: 300;
|
|
71
|
+
display: flex;
|
|
72
|
+
align-items: center;
|
|
73
|
+
padding: ${(t) => {
|
|
74
|
+
var e;
|
|
75
|
+
return (e = t.theme.sizes) == null ? void 0 : e.small;
|
|
76
|
+
}};
|
|
77
|
+
padding-left: ${(t) => {
|
|
78
|
+
var e;
|
|
79
|
+
return (e = t.theme.sizes) == null ? void 0 : e.large;
|
|
80
|
+
}};
|
|
81
|
+
cursor: pointer;
|
|
82
|
+
overflow: hidden;
|
|
83
|
+
${(t) => {
|
|
84
|
+
var e, a, n;
|
|
85
|
+
return t.selected ? $`
|
|
86
|
+
border-left: 2px solid ${(e = t.theme.colors) == null ? void 0 : e.primary};
|
|
87
|
+
color: ${(a = t.theme.colors) == null ? void 0 : a.primary};
|
|
88
|
+
` : $`
|
|
89
|
+
color: ${(n = t.theme.colors) == null ? void 0 : n.text};
|
|
90
|
+
`;
|
|
91
|
+
}};
|
|
92
|
+
|
|
93
|
+
span {
|
|
94
|
+
overflow: hidden;
|
|
95
|
+
text-overflow: ellipsis;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
i {
|
|
99
|
+
margin-right: ${(t) => {
|
|
100
|
+
var e;
|
|
101
|
+
return (e = t.theme.sizes) == null ? void 0 : e.normal;
|
|
102
|
+
}};
|
|
103
|
+
font-size: ${(t) => {
|
|
104
|
+
var e;
|
|
105
|
+
return (e = t.theme.fonts) == null ? void 0 : e.medium;
|
|
106
|
+
}};
|
|
107
|
+
min-height: 1em;
|
|
108
|
+
min-width: 1em;
|
|
109
|
+
}
|
|
110
|
+
`, O = c.div`
|
|
111
|
+
${M}
|
|
112
|
+
`, ie = c(K)`
|
|
113
|
+
${M}
|
|
114
|
+
&:focus {
|
|
115
|
+
outline: none;
|
|
116
|
+
span {
|
|
117
|
+
${(t) => {
|
|
118
|
+
var e;
|
|
119
|
+
return ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && Q;
|
|
120
|
+
}};
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
`, se = c.div`
|
|
124
|
+
display: flex;
|
|
125
|
+
justify-content: space-between;
|
|
126
|
+
padding-right: ${(t) => {
|
|
127
|
+
var e;
|
|
128
|
+
return (e = t.theme.sizes) == null ? void 0 : e.large;
|
|
129
|
+
}};
|
|
130
|
+
min-height: 52px;
|
|
131
|
+
white-space: nowrap;
|
|
132
|
+
|
|
133
|
+
&& {
|
|
134
|
+
font-weight: normal;
|
|
135
|
+
|
|
136
|
+
a {
|
|
137
|
+
font-weight: normal;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
${O} {
|
|
141
|
+
font-weight: normal;
|
|
142
|
+
}
|
|
143
|
+
`, ce = c(V)`
|
|
144
|
+
${X}
|
|
145
|
+
display: flex;
|
|
146
|
+
justify-content: center;
|
|
147
|
+
flex-direction: column;
|
|
148
|
+
margin-right: ${(t) => {
|
|
149
|
+
var e;
|
|
150
|
+
return (e = t.theme.sizes) == null ? void 0 : e.medium;
|
|
151
|
+
}};
|
|
152
|
+
margin-left: ${(t) => {
|
|
153
|
+
var e;
|
|
154
|
+
return (e = t.theme.sizes) == null ? void 0 : e.large;
|
|
155
|
+
}};
|
|
156
|
+
margin-bottom: 22px;
|
|
157
|
+
border-left: ${(t) => t.theme.border};
|
|
158
|
+
li {
|
|
159
|
+
margin: 0 0 ${(t) => {
|
|
160
|
+
var e;
|
|
161
|
+
return (e = t.theme.sizes) == null ? void 0 : e.normal;
|
|
162
|
+
}} -2px;
|
|
163
|
+
}
|
|
164
|
+
li:last-child {
|
|
165
|
+
margin: 0 0 0 -2px;
|
|
166
|
+
}
|
|
167
|
+
flex-basis: 100%;
|
|
168
|
+
border-width: 2px;
|
|
169
|
+
`, me = c(E)`
|
|
170
|
+
margin: 0 0 0 ${(t) => {
|
|
171
|
+
var e;
|
|
172
|
+
return (e = t.theme.sizes) == null ? void 0 : e.small;
|
|
173
|
+
}};
|
|
174
|
+
`, i = {
|
|
175
|
+
Wrapper: re,
|
|
176
|
+
Toggler: le,
|
|
177
|
+
List: ce,
|
|
178
|
+
Item: O,
|
|
179
|
+
Link: ie,
|
|
180
|
+
TopItem: se,
|
|
181
|
+
MatchCount: me
|
|
182
|
+
}, z = ({ matches: t }) => {
|
|
183
|
+
const { showMatchCount: e = !1 } = N();
|
|
184
|
+
return !e || typeof t == "undefined" ? null : /* @__PURE__ */ o.createElement(i.MatchCount, null, "(", t, ")");
|
|
185
|
+
}, de = ({ item: t, guideCategory: e }) => {
|
|
186
|
+
const {
|
|
187
|
+
route: a = "browse",
|
|
188
|
+
categoryAriaLabel: n = "",
|
|
189
|
+
activeCategoryAriaLabel: x = "",
|
|
190
|
+
fallbackOnInitialRoute: k = !1
|
|
191
|
+
} = N(), [m, l] = Y(), { id: C, title: d, symbol: p, activeSymbol: y } = t, r = e === C;
|
|
192
|
+
return /* @__PURE__ */ o.createElement("li", {
|
|
193
|
+
ref: l
|
|
194
|
+
}, /* @__PURE__ */ o.createElement(i.Link, w(s({}, ne(t, a, k, "category")), {
|
|
195
|
+
"aria-pressed": r,
|
|
196
|
+
"aria-label": (r ? x : n).replace("{{category}}", d),
|
|
197
|
+
className: "humany-guide-category-dropdown-link",
|
|
198
|
+
"aria-current": r,
|
|
199
|
+
selected: r
|
|
200
|
+
}), (r || m) && y ? /* @__PURE__ */ o.createElement(u, {
|
|
201
|
+
symbol: y
|
|
202
|
+
}) : p && /* @__PURE__ */ o.createElement(u, {
|
|
203
|
+
symbol: p
|
|
204
|
+
}), /* @__PURE__ */ o.createElement(E, null, d), /* @__PURE__ */ o.createElement(z, s({}, t))));
|
|
205
|
+
}, be = (a) => {
|
|
206
|
+
var n = a, { className: t } = n, e = F(n, ["className"]);
|
|
207
|
+
const x = Z(), [k, m] = B(!1), {
|
|
208
|
+
parent: l,
|
|
209
|
+
route: C = "browse",
|
|
210
|
+
categories: d = [],
|
|
211
|
+
loading: p = !1
|
|
212
|
+
} = N(), y = _(), [r, f] = B(!1), { params: R } = x, { guideCategory: v, tag: G, phrase: j, sorting: A } = R;
|
|
213
|
+
if (ae(() => {
|
|
214
|
+
r && f(!1);
|
|
215
|
+
}, [v]), p || !l || !d.length)
|
|
216
|
+
return ee(y, w(s({}, e), {
|
|
217
|
+
className: D(t, "humany-guide-category-dropdown")
|
|
218
|
+
}));
|
|
219
|
+
const g = d.find((h) => h.id === v) || l, T = g.activeSymbol || g.symbol;
|
|
220
|
+
return /* @__PURE__ */ o.createElement(i.Wrapper, w(s({}, e), {
|
|
221
|
+
"data-loading": !1,
|
|
222
|
+
"data-toggler-in-focus": k,
|
|
223
|
+
"aria-expanded": r,
|
|
224
|
+
className: D(t, "humany-guide-category-dropdown")
|
|
225
|
+
}), r ? /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(i.TopItem, {
|
|
226
|
+
className: "humany-guide-category-dropdown-top-item"
|
|
227
|
+
}, /* @__PURE__ */ o.createElement(i.Link, {
|
|
228
|
+
className: "humany-guide-category-dropdown-link",
|
|
229
|
+
routeName: C,
|
|
230
|
+
params: te({
|
|
231
|
+
tag: G,
|
|
232
|
+
phrase: j,
|
|
233
|
+
sorting: A,
|
|
234
|
+
guideCategory: l.id,
|
|
235
|
+
uriName: oe(l.title)
|
|
236
|
+
}),
|
|
237
|
+
selected: !1
|
|
238
|
+
}, l.symbol ? /* @__PURE__ */ o.createElement(u, {
|
|
239
|
+
symbol: l.symbol
|
|
240
|
+
}) : null, /* @__PURE__ */ o.createElement(E, null, l.title), /* @__PURE__ */ o.createElement(z, s({}, l))), /* @__PURE__ */ o.createElement(i.Toggler, {
|
|
241
|
+
onBlur: () => m(!1),
|
|
242
|
+
onFocus: () => m(!0),
|
|
243
|
+
className: "humany-guide-category-dropdown-toggler",
|
|
244
|
+
onClick: () => {
|
|
245
|
+
f(!r);
|
|
246
|
+
},
|
|
247
|
+
"aria-expanded": "true",
|
|
248
|
+
"aria-label": g.title
|
|
249
|
+
}, /* @__PURE__ */ o.createElement(u, {
|
|
250
|
+
size: 18,
|
|
251
|
+
symbol: { type: "Svg", content: "caret-up" }
|
|
252
|
+
}))), /* @__PURE__ */ o.createElement(i.List, {
|
|
253
|
+
className: "humany-guide-category-dropdown-open",
|
|
254
|
+
items: d,
|
|
255
|
+
renderItem: (h) => /* @__PURE__ */ o.createElement(de, {
|
|
256
|
+
key: h.id,
|
|
257
|
+
item: h,
|
|
258
|
+
guideCategory: v
|
|
259
|
+
})
|
|
260
|
+
})) : /* @__PURE__ */ o.createElement(i.TopItem, {
|
|
261
|
+
className: "humany-guide-category-dropdown-top-item"
|
|
262
|
+
}, /* @__PURE__ */ o.createElement(i.Item, {
|
|
263
|
+
className: "humany-guide-category-dropdown-item",
|
|
264
|
+
onClick: () => {
|
|
265
|
+
f(!r);
|
|
266
|
+
},
|
|
267
|
+
selected: !1
|
|
268
|
+
}, T ? /* @__PURE__ */ o.createElement(u, {
|
|
269
|
+
symbol: T
|
|
270
|
+
}) : null, /* @__PURE__ */ o.createElement(E, null, g.title), /* @__PURE__ */ o.createElement(z, s({}, g))), /* @__PURE__ */ o.createElement(i.Toggler, {
|
|
271
|
+
onBlur: () => m(!1),
|
|
272
|
+
onFocus: () => m(!0),
|
|
273
|
+
className: "humany-guide-category-dropdown-toggler",
|
|
274
|
+
onClick: () => {
|
|
275
|
+
f(!r);
|
|
276
|
+
},
|
|
277
|
+
"aria-expanded": "false",
|
|
278
|
+
"aria-label": g.title
|
|
279
|
+
}, /* @__PURE__ */ o.createElement(u, {
|
|
280
|
+
size: 18,
|
|
281
|
+
symbol: { type: "Svg", content: "caret-down" }
|
|
282
|
+
}))));
|
|
283
|
+
};
|
|
284
|
+
export {
|
|
285
|
+
be as default
|
|
286
|
+
};
|
|
287
|
+
//# sourceMappingURL=guide-category-dropdown.e32ae53a.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"guide-category-dropdown.e32ae53a.js","sources":["../src/guide-category-dropdown.styles.ts","../src/guide-category-dropdown-match-count.tsx","../src/guide-category-dropdown-item.tsx","../src/guide-category-dropdown.tsx"],"sourcesContent":["import {\r\n borderTabStyle,\r\n contentBox,\r\n Link as BaseLink,\r\n linkTabStyle,\r\n List as BaseList,\r\n list,\r\n loadingOpacity,\r\n Text,\r\n} from '@telia-ace/knowledge-widget-ui';\r\nimport styled, { css } from 'styled-components';\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst Wrapper: any = styled.div<any>`\r\n ${loadingOpacity}\r\n ${contentBox}\r\n overflow: hidden;\r\n min-height: 50px;\r\n ${(p) =>\r\n p['data-toggler-in-focus'] &&\r\n p.theme.accessibility?.isTabbing &&\r\n css`\r\n && {\r\n ${borderTabStyle}\r\n }\r\n `};\r\n`;\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst Toggler: any = styled.button`\r\n background: none;\r\n border: 0;\r\n outline: 0;\r\n display: block;\r\n cursor: pointer;\r\n padding: 0;\r\n font-size: ${(p) => p.theme.fonts?.normal};\r\n text-align: end;\r\n flex: 1 0 auto;\r\n svg {\r\n path,\r\n line {\r\n stroke: ${(p) => p.theme.colors?.text};\r\n }\r\n }\r\n`;\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst styling = css<{ selected: boolean }>`\r\n font-size: ${(p) => p.theme.fonts?.normal};\r\n text-align: left;\r\n text-align: left;\r\n text-decoration: none;\r\n font-weight: 300;\r\n display: flex;\r\n align-items: center;\r\n padding: ${(p) => p.theme.sizes?.small};\r\n padding-left: ${(p) => p.theme.sizes?.large};\r\n cursor: pointer;\r\n overflow: hidden;\r\n ${(p) =>\r\n p.selected\r\n ? css`\r\n border-left: 2px solid ${p.theme.colors?.primary};\r\n color: ${p.theme.colors?.primary};\r\n `\r\n : css`\r\n color: ${p.theme.colors?.text};\r\n `};\r\n\r\n span {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n i {\r\n margin-right: ${(p) => p.theme.sizes?.normal};\r\n font-size: ${(p) => p.theme.fonts?.medium};\r\n min-height: 1em;\r\n min-width: 1em;\r\n }\r\n`;\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst Item: any = styled.div`\r\n ${styling}\r\n`;\r\n\r\nconst Link: any = styled(BaseLink)<any>`\r\n ${styling}\r\n &:focus {\r\n outline: none;\r\n span {\r\n ${(p) => p.theme.accessibility?.isTabbing && linkTabStyle};\r\n }\r\n }\r\n`;\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst TopItem: any = styled.div`\r\n display: flex;\r\n justify-content: space-between;\r\n padding-right: ${(p) => p.theme.sizes?.large};\r\n min-height: 52px;\r\n white-space: nowrap;\r\n\r\n && {\r\n font-weight: normal;\r\n\r\n a {\r\n font-weight: normal;\r\n }\r\n }\r\n ${Item} {\r\n font-weight: normal;\r\n }\r\n`;\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst List: any = styled(BaseList)<any>`\r\n ${list}\r\n display: flex;\r\n justify-content: center;\r\n flex-direction: column;\r\n margin-right: ${(p) => p.theme.sizes?.medium};\r\n margin-left: ${(p) => p.theme.sizes?.large};\r\n margin-bottom: 22px;\r\n border-left: ${(p) => p.theme.border};\r\n li {\r\n margin: 0 0 ${(p) => p.theme.sizes?.normal} -2px;\r\n }\r\n li:last-child {\r\n margin: 0 0 0 -2px;\r\n }\r\n flex-basis: 100%;\r\n border-width: 2px;\r\n`;\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst MatchCount: any = styled(Text)`\r\n margin: 0 0 0 ${(p) => p.theme.sizes?.small};\r\n`;\r\n\r\nexport default {\r\n Wrapper,\r\n Toggler,\r\n List,\r\n Item,\r\n Link,\r\n TopItem,\r\n MatchCount,\r\n};\r\n","import { Category } from '@telia-ace/knowledge-widget-core';\r\nimport { useProperties } from '@telia-ace/knowledge-widget-ui';\r\nimport React from 'react';\r\nimport { GuideCategoryDropdownComponentProps } from './guide-category-dropdown-component';\r\nimport Styled from './guide-category-dropdown.styles';\r\n\r\nconst GuideCategoryDropdownMatchCount: React.FC<Category> = ({ matches }) => {\r\n const { showMatchCount = false } = useProperties<GuideCategoryDropdownComponentProps>();\r\n\r\n if (!showMatchCount || typeof matches === 'undefined') {\r\n return null;\r\n }\r\n\r\n return <Styled.MatchCount>({matches})</Styled.MatchCount>;\r\n};\r\n\r\nexport default GuideCategoryDropdownMatchCount;\r\n","import { initialRouteFallback } from '@telia-ace/knowledge-widget-component-utilities';\r\nimport { Category } from '@telia-ace/knowledge-widget-core';\r\nimport { SymbolBadge, Text, useHover, useProperties } from '@telia-ace/knowledge-widget-ui';\r\nimport React from 'react';\r\nimport { GuideCategoryDropdownComponentProps } from './guide-category-dropdown-component';\r\nimport GuideCategoryDropdownMatchCount from './guide-category-dropdown-match-count';\r\nimport Styled from './guide-category-dropdown.styles';\r\n\r\ntype Props = {\r\n item: Category;\r\n guideCategory: string;\r\n};\r\n\r\nconst GuideCategoryDropdownItem: React.FC<Props> = ({ item, guideCategory }) => {\r\n const {\r\n route = 'browse',\r\n categoryAriaLabel = '',\r\n activeCategoryAriaLabel = '',\r\n fallbackOnInitialRoute = false,\r\n } = useProperties<GuideCategoryDropdownComponentProps>();\r\n const [hovering, elem] = useHover();\r\n const { id, title, symbol, activeSymbol } = item;\r\n\r\n const selected = guideCategory === id;\r\n return (\r\n <li ref={elem as any}>\r\n <Styled.Link\r\n {...initialRouteFallback(item, route, fallbackOnInitialRoute, 'category')}\r\n aria-pressed={selected}\r\n aria-label={(selected ? activeCategoryAriaLabel : categoryAriaLabel).replace(\r\n '{{category}}',\r\n title\r\n )}\r\n className=\"humany-guide-category-dropdown-link\"\r\n aria-current={selected}\r\n selected={selected}\r\n >\r\n {(selected || hovering) && activeSymbol ? (\r\n <SymbolBadge symbol={activeSymbol} />\r\n ) : (\r\n symbol && <SymbolBadge symbol={symbol} />\r\n )}\r\n <Text>{title}</Text>\r\n <GuideCategoryDropdownMatchCount {...item} />\r\n </Styled.Link>\r\n </li>\r\n );\r\n};\r\n\r\nexport default GuideCategoryDropdownItem;\r\n","import { Category } from '@telia-ace/knowledge-widget-core';\r\nimport {\r\n createEmptyComponent,\r\n SymbolBadge,\r\n Text,\r\n useContainer,\r\n useProperties,\r\n useRouteData,\r\n} from '@telia-ace/knowledge-widget-ui';\r\nimport { appendClassNames, createParams, formatUrl } from '@telia-ace/widget-utilities';\r\nimport React, { useEffect, useState } from 'react';\r\nimport { GuideCategoryDropdownComponentProps } from './guide-category-dropdown-component';\r\nimport GuideCategoryDropdownItem from './guide-category-dropdown-item';\r\nimport GuideCategoryDropdownMatchCount from './guide-category-dropdown-match-count';\r\nimport Styled from './guide-category-dropdown.styles';\r\n\r\ntype Props = {\r\n className: string;\r\n};\r\n\r\nconst GuideCategoryDropdown: React.SFC<Props> = ({ className, ...other }) => {\r\n const routeData = useRouteData();\r\n const [togglerFocus, setTogglerFocus] = useState(false);\r\n const {\r\n parent,\r\n route = 'browse',\r\n categories = [],\r\n loading = false,\r\n } = useProperties<GuideCategoryDropdownComponentProps>();\r\n const container = useContainer();\r\n const [isOpen, setIsOpen] = useState(false);\r\n const { params } = routeData;\r\n const { guideCategory, tag, phrase, sorting } = params;\r\n\r\n useEffect(() => {\r\n if (isOpen) {\r\n setIsOpen(false);\r\n }\r\n }, [guideCategory]);\r\n\r\n if (loading || !parent || !categories.length) {\r\n return createEmptyComponent(container, {\r\n ...other,\r\n className: appendClassNames(className, 'humany-guide-category-dropdown'),\r\n });\r\n }\r\n\r\n const selected = categories.find((category) => category.id === guideCategory) || parent;\r\n const selectedSymbol = selected.activeSymbol || selected.symbol;\r\n\r\n return (\r\n <Styled.Wrapper\r\n {...other}\r\n data-loading={false}\r\n data-toggler-in-focus={togglerFocus}\r\n aria-expanded={isOpen}\r\n className={appendClassNames(className, 'humany-guide-category-dropdown')}\r\n >\r\n {isOpen ? (\r\n <>\r\n <Styled.TopItem className=\"humany-guide-category-dropdown-top-item\">\r\n <Styled.Link\r\n className=\"humany-guide-category-dropdown-link\"\r\n routeName={route}\r\n params={createParams({\r\n tag,\r\n phrase,\r\n sorting,\r\n guideCategory: parent.id,\r\n uriName: formatUrl(parent.title),\r\n })}\r\n selected={false}\r\n >\r\n {parent.symbol ? <SymbolBadge symbol={parent.symbol} /> : null}\r\n <Text>{parent.title}</Text>\r\n <GuideCategoryDropdownMatchCount {...parent} />\r\n </Styled.Link>\r\n <Styled.Toggler\r\n onBlur={() => setTogglerFocus(false)}\r\n onFocus={() => setTogglerFocus(true)}\r\n className=\"humany-guide-category-dropdown-toggler\"\r\n onClick={() => {\r\n setIsOpen(!isOpen);\r\n }}\r\n aria-expanded=\"true\"\r\n aria-label={selected.title}\r\n >\r\n <SymbolBadge size={18} symbol={{ type: 'Svg', content: 'caret-up' }} />\r\n </Styled.Toggler>\r\n </Styled.TopItem>\r\n <Styled.List\r\n className=\"humany-guide-category-dropdown-open\"\r\n items={categories}\r\n renderItem={(item: Category) => (\r\n <GuideCategoryDropdownItem\r\n key={item.id}\r\n item={item}\r\n guideCategory={guideCategory}\r\n />\r\n )}\r\n />\r\n </>\r\n ) : (\r\n <Styled.TopItem className=\"humany-guide-category-dropdown-top-item\">\r\n <Styled.Item\r\n className=\"humany-guide-category-dropdown-item\"\r\n onClick={() => {\r\n setIsOpen(!isOpen);\r\n }}\r\n selected={false}\r\n >\r\n {selectedSymbol ? <SymbolBadge symbol={selectedSymbol} /> : null}\r\n <Text>{selected.title}</Text>\r\n <GuideCategoryDropdownMatchCount {...selected} />\r\n </Styled.Item>\r\n <Styled.Toggler\r\n onBlur={() => setTogglerFocus(false)}\r\n onFocus={() => setTogglerFocus(true)}\r\n className=\"humany-guide-category-dropdown-toggler\"\r\n onClick={() => {\r\n setIsOpen(!isOpen);\r\n }}\r\n aria-expanded=\"false\"\r\n aria-label={selected.title}\r\n >\r\n <SymbolBadge size={18} symbol={{ type: 'Svg', content: 'caret-down' }} />\r\n </Styled.Toggler>\r\n </Styled.TopItem>\r\n )}\r\n </Styled.Wrapper>\r\n );\r\n};\r\n\r\nexport default GuideCategoryDropdown;\r\n"],"names":["BaseLink","BaseList"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,91 +1,70 @@
|
|
|
1
|
-
import { createEventSubscriber, extendComponent } from "@telia-ace/knowledge-widget-core";
|
|
2
|
-
import { DataType } from "@telia-ace/knowledge-widget-types-grid";
|
|
3
|
-
import { createReactComponent } from "@telia-ace/knowledge-widget-ui";
|
|
4
|
-
const
|
|
5
|
-
if (
|
|
6
|
-
return
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
if (!previous) {
|
|
14
|
-
return root;
|
|
1
|
+
import { createEventSubscriber as b, extendComponent as v } from "@telia-ace/knowledge-widget-core";
|
|
2
|
+
import { DataType as y } from "@telia-ace/knowledge-widget-types-grid";
|
|
3
|
+
import { createReactComponent as C } from "@telia-ace/knowledge-widget-ui";
|
|
4
|
+
const P = (e, n, a) => !a || a.length < 1 ? n : h(e, n, null, a), h = (e, n, a, o) => {
|
|
5
|
+
if (e.find((s) => s.id === o) || !o)
|
|
6
|
+
return a || n;
|
|
7
|
+
for (let s = 0; s < e.length; s += 1) {
|
|
8
|
+
const t = e[s];
|
|
9
|
+
if (t.items) {
|
|
10
|
+
const r = h(t.items, n, t, o);
|
|
11
|
+
if (r)
|
|
12
|
+
return r;
|
|
15
13
|
}
|
|
16
|
-
return previous;
|
|
17
14
|
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
const filterEmptyCategories = (category) => category.matches && category.matches > 0;
|
|
29
|
-
var GuideCategoryDropdownComponent = (container) => {
|
|
30
|
-
const { events } = container.get("$widget");
|
|
31
|
-
const [subscribe, unsubscribe] = createEventSubscriber(events);
|
|
32
|
-
return createReactComponent(container, "guide-category-dropdown", import("./guide-category-dropdown.js"), (component) => {
|
|
33
|
-
const fetch = (params) => {
|
|
34
|
-
component.writeProperties({ loading: true });
|
|
35
|
-
component.actions.dispatch("fetch", { params }).then(() => {
|
|
36
|
-
component.writeProperties({ loading: false });
|
|
15
|
+
}, D = (e) => e.matches && e.matches > 0, E = (e) => {
|
|
16
|
+
const { events: n } = e.get("$widget"), [a, o] = b(n);
|
|
17
|
+
return C(e, "guide-category-dropdown", import("./guide-category-dropdown.e32ae53a.js"), (i) => {
|
|
18
|
+
const s = (t) => {
|
|
19
|
+
i.writeProperties({ loading: !0 }), i.actions.dispatch("fetch", { params: t }).then(() => {
|
|
20
|
+
i.writeProperties({ loading: !1 });
|
|
37
21
|
});
|
|
38
22
|
};
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
parent,
|
|
42
|
-
categories,
|
|
43
|
-
loading:
|
|
23
|
+
i.actions.create("fetch", ({ parent: t, categories: r }) => {
|
|
24
|
+
i.writeProperties({
|
|
25
|
+
parent: t,
|
|
26
|
+
categories: r,
|
|
27
|
+
loading: !1
|
|
44
28
|
});
|
|
29
|
+
}), e.getAsync("router").then((t) => {
|
|
30
|
+
const { params: r } = t.getRouteData();
|
|
31
|
+
s(r);
|
|
32
|
+
}), a("router:changed", (t, { current: r }) => {
|
|
33
|
+
s(r.routeData.params);
|
|
45
34
|
});
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
var _a;
|
|
72
|
-
const parent = findParentAndSiblings(categories, {
|
|
73
|
-
matches,
|
|
74
|
-
id: "0",
|
|
75
|
-
title: rootCategoryHeader,
|
|
76
|
-
items: categories
|
|
77
|
-
}, guideCategory);
|
|
78
|
-
return next({
|
|
79
|
-
parent,
|
|
80
|
-
categories: (_a = parent == null ? void 0 : parent.items) == null ? void 0 : _a.filter(filterEmptyCategories)
|
|
81
|
-
});
|
|
82
|
-
});
|
|
35
|
+
}).then(() => v(e, "guide-category-dropdown", (i) => {
|
|
36
|
+
i.actions.watch("guide-category-dropdown.fetch", (s, t) => {
|
|
37
|
+
const {
|
|
38
|
+
matchFilters: r = {
|
|
39
|
+
search: !1,
|
|
40
|
+
tag: !1
|
|
41
|
+
},
|
|
42
|
+
rootCategoryHeader: u
|
|
43
|
+
} = i.properties(), {
|
|
44
|
+
params: { phrase: l, guideCategory: g, tag: p }
|
|
45
|
+
} = s;
|
|
46
|
+
return e.getAsync("dataClient").then((m) => m.fetch(y.GuideCategories, {
|
|
47
|
+
searchPhrase: r.search ? l : void 0,
|
|
48
|
+
tagId: r.tag ? p : void 0
|
|
49
|
+
}).then(({ categories: c, matches: w }) => {
|
|
50
|
+
var f;
|
|
51
|
+
const d = P(c, {
|
|
52
|
+
matches: w,
|
|
53
|
+
id: "0",
|
|
54
|
+
title: u,
|
|
55
|
+
items: c
|
|
56
|
+
}, g);
|
|
57
|
+
return t({
|
|
58
|
+
parent: d,
|
|
59
|
+
categories: (f = d == null ? void 0 : d.items) == null ? void 0 : f.filter(D)
|
|
83
60
|
});
|
|
84
|
-
});
|
|
61
|
+
}));
|
|
85
62
|
});
|
|
86
|
-
}).then(() => {
|
|
87
|
-
|
|
63
|
+
})).then(() => {
|
|
64
|
+
o();
|
|
88
65
|
});
|
|
89
66
|
};
|
|
90
|
-
export {
|
|
67
|
+
export {
|
|
68
|
+
E as default
|
|
69
|
+
};
|
|
91
70
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/guide-category-dropdown-component.ts"],"sourcesContent":["import { MatchFilterProperties } from '@telia-ace/knowledge-widget-component-utilities';\r\nimport { Category, createEventSubscriber, extendComponent } from '@telia-ace/knowledge-widget-core';\r\nimport { CategoriesResult, DataType } from '@telia-ace/knowledge-widget-types-grid';\r\nimport { createReactComponent } from '@telia-ace/knowledge-widget-ui';\r\nimport { Container } from '@webprovisions/platform';\r\n\r\nconst findParentAndSiblings = (\r\n categories: Category[],\r\n root: Category,\r\n currentCategoryId: string\r\n): Category | undefined => {\r\n if (!currentCategoryId || currentCategoryId.length < 1) {\r\n return root;\r\n }\r\n return findRecursive(categories, root, null, currentCategoryId);\r\n};\r\n\r\nconst findRecursive = (\r\n categories: Category[],\r\n root: Category,\r\n previous: Category | null,\r\n currentCategoryId: string\r\n): Category | undefined => {\r\n const filtered = categories.find((c) => c.id === currentCategoryId);\r\n if (filtered || !currentCategoryId) {\r\n if (!previous) {\r\n return root;\r\n }\r\n return previous;\r\n }\r\n\r\n for (let i = 0; i < categories.length; i += 1) {\r\n const cat = categories[i];\r\n if (cat.items) {\r\n const result = findRecursive(cat.items, root, cat, currentCategoryId);\r\n if (result) {\r\n return result;\r\n }\r\n }\r\n }\r\n};\r\n\r\nconst filterEmptyCategories = (category: Category) => category.matches && category.matches > 0;\r\n\r\nexport type GuideCategoryDropdownComponentProps = {\r\n matchFilters?: Partial<MatchFilterProperties>;\r\n rootCategoryHeader: string;\r\n route?: string;\r\n categoryAriaLabel?: string;\r\n activeCategoryAriaLabel?: string;\r\n parent?: Category; // internal\r\n categories?: Category[]; // internal\r\n showMatchCount?: boolean;\r\n fallbackOnInitialRoute?: boolean;\r\n};\r\n\r\nexport default (container: Container) => {\r\n const { events } = container.get('$widget');\r\n const [subscribe, unsubscribe] = createEventSubscriber(events);\r\n\r\n return createReactComponent(\r\n container,\r\n 'guide-category-dropdown',\r\n import('./guide-category-dropdown'),\r\n (component) => {\r\n const fetch = (params: { [key: string]: any }) => {\r\n component.writeProperties({ loading: true });\r\n component.actions.dispatch('fetch', { params }).then(() => {\r\n component.writeProperties({ loading: false });\r\n });\r\n };\r\n\r\n component.actions.create('fetch', ({ parent, categories }) => {\r\n component.writeProperties({\r\n parent,\r\n categories,\r\n loading: false,\r\n });\r\n });\r\n\r\n container.getAsync('router').then((router) => {\r\n const { params } = router.getRouteData();\r\n fetch(params);\r\n });\r\n\r\n subscribe('router:changed', (event: any, { current }: any) => {\r\n fetch(current.routeData.params);\r\n });\r\n }\r\n )\r\n .then(() => {\r\n return extendComponent(container, 'guide-category-dropdown', (component) => {\r\n component.actions.watch('guide-category-dropdown.fetch', (input, next) => {\r\n const {\r\n matchFilters = {\r\n search: false,\r\n tag: false,\r\n },\r\n rootCategoryHeader,\r\n } = component.properties<GuideCategoryDropdownComponentProps>();\r\n const {\r\n params: { phrase, guideCategory, tag },\r\n } = input;\r\n return container.getAsync('dataClient').then((dataClient) => {\r\n return dataClient\r\n .fetch(DataType.GuideCategories, {\r\n searchPhrase: matchFilters.search ? phrase : undefined,\r\n tagId: matchFilters.tag ? tag : undefined,\r\n })\r\n .then(({ categories, matches }: CategoriesResult) => {\r\n const parent = findParentAndSiblings(\r\n categories,\r\n {\r\n matches,\r\n id: '0',\r\n title: rootCategoryHeader,\r\n items: categories,\r\n },\r\n guideCategory\r\n );\r\n\r\n return next({\r\n parent,\r\n categories: parent?.items?.filter(filterEmptyCategories),\r\n });\r\n });\r\n });\r\n });\r\n });\r\n })\r\n .then(() => {\r\n unsubscribe();\r\n });\r\n};\r\n"],"names":[],"mappings":";;;AAMA,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/guide-category-dropdown-component.ts"],"sourcesContent":["import { MatchFilterProperties } from '@telia-ace/knowledge-widget-component-utilities';\r\nimport { Category, createEventSubscriber, extendComponent } from '@telia-ace/knowledge-widget-core';\r\nimport { CategoriesResult, DataType } from '@telia-ace/knowledge-widget-types-grid';\r\nimport { createReactComponent } from '@telia-ace/knowledge-widget-ui';\r\nimport { Container } from '@webprovisions/platform';\r\n\r\nconst findParentAndSiblings = (\r\n categories: Category[],\r\n root: Category,\r\n currentCategoryId: string\r\n): Category | undefined => {\r\n if (!currentCategoryId || currentCategoryId.length < 1) {\r\n return root;\r\n }\r\n return findRecursive(categories, root, null, currentCategoryId);\r\n};\r\n\r\nconst findRecursive = (\r\n categories: Category[],\r\n root: Category,\r\n previous: Category | null,\r\n currentCategoryId: string\r\n): Category | undefined => {\r\n const filtered = categories.find((c) => c.id === currentCategoryId);\r\n if (filtered || !currentCategoryId) {\r\n if (!previous) {\r\n return root;\r\n }\r\n return previous;\r\n }\r\n\r\n for (let i = 0; i < categories.length; i += 1) {\r\n const cat = categories[i];\r\n if (cat.items) {\r\n const result = findRecursive(cat.items, root, cat, currentCategoryId);\r\n if (result) {\r\n return result;\r\n }\r\n }\r\n }\r\n};\r\n\r\nconst filterEmptyCategories = (category: Category) => category.matches && category.matches > 0;\r\n\r\nexport type GuideCategoryDropdownComponentProps = {\r\n matchFilters?: Partial<MatchFilterProperties>;\r\n rootCategoryHeader: string;\r\n route?: string;\r\n categoryAriaLabel?: string;\r\n activeCategoryAriaLabel?: string;\r\n parent?: Category; // internal\r\n categories?: Category[]; // internal\r\n showMatchCount?: boolean;\r\n fallbackOnInitialRoute?: boolean;\r\n};\r\n\r\nexport default (container: Container) => {\r\n const { events } = container.get('$widget');\r\n const [subscribe, unsubscribe] = createEventSubscriber(events);\r\n\r\n return createReactComponent(\r\n container,\r\n 'guide-category-dropdown',\r\n import('./guide-category-dropdown'),\r\n (component) => {\r\n const fetch = (params: { [key: string]: any }) => {\r\n component.writeProperties({ loading: true });\r\n component.actions.dispatch('fetch', { params }).then(() => {\r\n component.writeProperties({ loading: false });\r\n });\r\n };\r\n\r\n component.actions.create('fetch', ({ parent, categories }) => {\r\n component.writeProperties({\r\n parent,\r\n categories,\r\n loading: false,\r\n });\r\n });\r\n\r\n container.getAsync('router').then((router) => {\r\n const { params } = router.getRouteData();\r\n fetch(params);\r\n });\r\n\r\n subscribe('router:changed', (event: any, { current }: any) => {\r\n fetch(current.routeData.params);\r\n });\r\n }\r\n )\r\n .then(() => {\r\n return extendComponent(container, 'guide-category-dropdown', (component) => {\r\n component.actions.watch('guide-category-dropdown.fetch', (input, next) => {\r\n const {\r\n matchFilters = {\r\n search: false,\r\n tag: false,\r\n },\r\n rootCategoryHeader,\r\n } = component.properties<GuideCategoryDropdownComponentProps>();\r\n const {\r\n params: { phrase, guideCategory, tag },\r\n } = input;\r\n return container.getAsync('dataClient').then((dataClient) => {\r\n return dataClient\r\n .fetch(DataType.GuideCategories, {\r\n searchPhrase: matchFilters.search ? phrase : undefined,\r\n tagId: matchFilters.tag ? tag : undefined,\r\n })\r\n .then(({ categories, matches }: CategoriesResult) => {\r\n const parent = findParentAndSiblings(\r\n categories,\r\n {\r\n matches,\r\n id: '0',\r\n title: rootCategoryHeader,\r\n items: categories,\r\n },\r\n guideCategory\r\n );\r\n\r\n return next({\r\n parent,\r\n categories: parent?.items?.filter(filterEmptyCategories),\r\n });\r\n });\r\n });\r\n });\r\n });\r\n })\r\n .then(() => {\r\n unsubscribe();\r\n });\r\n};\r\n"],"names":[],"mappings":";;;AAMA,MAAM,IAAwB,CAC1B,GACA,GACA,MAEI,CAAC,KAAqB,EAAkB,SAAS,IAC1C,IAEJ,EAAc,GAAY,GAAM,MAAM,CAAiB,GAG5D,IAAgB,CAClB,GACA,GACA,GACA,MACuB;AAEnB,MAAA,AADa,EAAW,KAAK,CAAC,MAAM,EAAE,OAAO,CAAiB,KAClD,CAAC;AACb,WAAK,KACM;AAKf,WAAS,IAAI,GAAG,IAAI,EAAW,QAAQ,KAAK,GAAG;AAC3C,UAAM,IAAM,EAAW;AACvB,QAAI,EAAI,OAAO;AACX,YAAM,IAAS,EAAc,EAAI,OAAO,GAAM,GAAK,CAAiB;AACpE,UAAI;AACO,eAAA;AAAA,IAEf;AAAA,EACJ;AACJ,GAEM,IAAwB,CAAC,MAAuB,EAAS,WAAW,EAAS,UAAU,GAc9E,IAAA,CAAC,MAAyB;AACrC,QAAM,EAAE,cAAW,EAAU,IAAI,SAAS,GACpC,CAAC,GAAW,KAAe,EAAsB,CAAM;AAE7D,SAAO,EACH,GACA,2BACA,OAAO,0CACP,CAAC,MAAc;AACL,UAAA,IAAQ,CAAC,MAAmC;AAC9C,QAAU,gBAAgB,EAAE,SAAS,GAAM,CAAA,GACjC,EAAA,QAAQ,SAAS,SAAS,EAAE,UAAQ,CAAA,EAAE,KAAK,MAAM;AACvD,UAAU,gBAAgB,EAAE,SAAS,GAAO,CAAA;AAAA,MAAA,CAC/C;AAAA,IAAA;AAGL,MAAU,QAAQ,OAAO,SAAS,CAAC,EAAE,WAAQ,oBAAiB;AAC1D,QAAU,gBAAgB;AAAA,QACtB;AAAA,QACA;AAAA,QACA,SAAS;AAAA,MAAA,CACZ;AAAA,IAAA,CACJ,GAED,EAAU,SAAS,QAAQ,EAAE,KAAK,CAAC,MAAW;AACpC,YAAA,EAAE,cAAW,EAAO,aAAa;AACvC,QAAM,CAAM;AAAA,IAAA,CACf,GAED,EAAU,kBAAkB,CAAC,GAAY,EAAE,iBAAmB;AACpD,QAAA,EAAQ,UAAU,MAAM;AAAA,IAAA,CACjC;AAAA,EAAA,CAET,EACK,KAAK,MACK,EAAgB,GAAW,2BAA2B,CAAC,MAAc;AACxE,MAAU,QAAQ,MAAM,iCAAiC,CAAC,GAAO,MAAS;AAChE,YAAA;AAAA,QACF,kBAAe;AAAA,UACX,QAAQ;AAAA,UACR,KAAK;AAAA,QACT;AAAA,QACA;AAAA,UACA,EAAU,cACR;AAAA,QACF,QAAQ,EAAE,WAAQ,kBAAe;AAAA,UACjC;AACJ,aAAO,EAAU,SAAS,YAAY,EAAE,KAAK,CAAC,MACnC,EACF,MAAM,EAAS,iBAAiB;AAAA,QAC7B,cAAc,EAAa,SAAS,IAAS;AAAA,QAC7C,OAAO,EAAa,MAAM,IAAM;AAAA,MACnC,CAAA,EACA,KAAK,CAAC,EAAE,eAAY,iBAAgC;;AAC3C,cAAA,IAAS,EACX,GACA;AAAA,UACI;AAAA,UACA,IAAI;AAAA,UACJ,OAAO;AAAA,UACP,OAAO;AAAA,WAEX,CACJ;AAEA,eAAO,EAAK;AAAA,UACR;AAAA,UACA,YAAY,4BAAQ,UAAR,kBAAe,OAAO;AAAA,QAAqB,CAC1D;AAAA,MAAA,CACJ,CACR;AAAA,IAAA,CACJ;AAAA,EAAA,CACJ,CACJ,EACA,KAAK,MAAM;AACI;EAAA,CACf;AACT;"}
|
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telia-ace/knowledge-widget-components-guide-category-dropdown",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.19",
|
|
4
4
|
"description": "Guide category dropdown component for ACE Knowledge Widgets.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"author": "Telia Company AB",
|
|
7
7
|
"keywords": [
|
|
8
8
|
"telia"
|
|
9
9
|
],
|
|
10
|
-
"
|
|
11
|
-
"
|
|
10
|
+
"main": "dist/index.js",
|
|
11
|
+
"type": "module",
|
|
12
12
|
"types": "dist/index.d.ts",
|
|
13
13
|
"files": [
|
|
14
14
|
"LICENSE.txt",
|
|
@@ -25,10 +25,10 @@
|
|
|
25
25
|
},
|
|
26
26
|
"sideEffects": false,
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@telia-ace/knowledge-widget-component-utilities": "^1.0.
|
|
29
|
-
"@telia-ace/knowledge-widget-core": "^1.0.
|
|
30
|
-
"@telia-ace/knowledge-widget-types-grid": "^1.0.
|
|
31
|
-
"@telia-ace/knowledge-widget-ui": "^1.0.
|
|
28
|
+
"@telia-ace/knowledge-widget-component-utilities": "^1.0.19",
|
|
29
|
+
"@telia-ace/knowledge-widget-core": "^1.0.17",
|
|
30
|
+
"@telia-ace/knowledge-widget-types-grid": "^1.0.26",
|
|
31
|
+
"@telia-ace/knowledge-widget-ui": "^1.0.23",
|
|
32
32
|
"@telia-ace/widget-utilities": "^1.0.2",
|
|
33
33
|
"@webprovisions/platform": "^1.1.2"
|
|
34
34
|
},
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"@types/react-dom": "^16.8.0",
|
|
43
43
|
"@types/styled-components": "^5.1.7"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "44efbdca7f57d6997132792020922c89b013c44d"
|
|
46
46
|
}
|
|
@@ -1,323 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defProps = Object.defineProperties;
|
|
3
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
-
var __spreadValues = (a, b) => {
|
|
9
|
-
for (var prop in b || (b = {}))
|
|
10
|
-
if (__hasOwnProp.call(b, prop))
|
|
11
|
-
__defNormalProp(a, prop, b[prop]);
|
|
12
|
-
if (__getOwnPropSymbols)
|
|
13
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
-
if (__propIsEnum.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
}
|
|
17
|
-
return a;
|
|
18
|
-
};
|
|
19
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
var __objRest = (source, exclude) => {
|
|
21
|
-
var target = {};
|
|
22
|
-
for (var prop in source)
|
|
23
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
-
target[prop] = source[prop];
|
|
25
|
-
if (source != null && __getOwnPropSymbols)
|
|
26
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
}
|
|
30
|
-
return target;
|
|
31
|
-
};
|
|
32
|
-
import { loadingOpacity, contentBox, borderTabStyle, Link as Link$1, linkTabStyle, List as List$1, list, Text, useProperties, useHover, SymbolBadge, useRouteData, useContainer, createEmptyComponent } from "@telia-ace/knowledge-widget-ui";
|
|
33
|
-
import { appendClassNames, createParams, formatUrl } from "@telia-ace/widget-utilities";
|
|
34
|
-
import React, { useState, useEffect } from "react";
|
|
35
|
-
import { initialRouteFallback } from "@telia-ace/knowledge-widget-component-utilities";
|
|
36
|
-
import styled, { css } from "styled-components";
|
|
37
|
-
const Wrapper = styled.div`
|
|
38
|
-
${loadingOpacity}
|
|
39
|
-
${contentBox}
|
|
40
|
-
overflow: hidden;
|
|
41
|
-
min-height: 50px;
|
|
42
|
-
${(p) => {
|
|
43
|
-
var _a;
|
|
44
|
-
return p["data-toggler-in-focus"] && ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
|
|
45
|
-
&& {
|
|
46
|
-
${borderTabStyle}
|
|
47
|
-
}
|
|
48
|
-
`;
|
|
49
|
-
}};
|
|
50
|
-
`;
|
|
51
|
-
const Toggler = styled.button`
|
|
52
|
-
background: none;
|
|
53
|
-
border: 0;
|
|
54
|
-
outline: 0;
|
|
55
|
-
display: block;
|
|
56
|
-
cursor: pointer;
|
|
57
|
-
padding: 0;
|
|
58
|
-
font-size: ${(p) => {
|
|
59
|
-
var _a;
|
|
60
|
-
return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
|
|
61
|
-
}};
|
|
62
|
-
text-align: end;
|
|
63
|
-
flex: 1 0 auto;
|
|
64
|
-
svg {
|
|
65
|
-
path,
|
|
66
|
-
line {
|
|
67
|
-
stroke: ${(p) => {
|
|
68
|
-
var _a;
|
|
69
|
-
return (_a = p.theme.colors) == null ? void 0 : _a.text;
|
|
70
|
-
}};
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
`;
|
|
74
|
-
const styling = css`
|
|
75
|
-
font-size: ${(p) => {
|
|
76
|
-
var _a;
|
|
77
|
-
return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
|
|
78
|
-
}};
|
|
79
|
-
text-align: left;
|
|
80
|
-
text-align: left;
|
|
81
|
-
text-decoration: none;
|
|
82
|
-
font-weight: 300;
|
|
83
|
-
display: flex;
|
|
84
|
-
align-items: center;
|
|
85
|
-
padding: ${(p) => {
|
|
86
|
-
var _a;
|
|
87
|
-
return (_a = p.theme.sizes) == null ? void 0 : _a.small;
|
|
88
|
-
}};
|
|
89
|
-
padding-left: ${(p) => {
|
|
90
|
-
var _a;
|
|
91
|
-
return (_a = p.theme.sizes) == null ? void 0 : _a.large;
|
|
92
|
-
}};
|
|
93
|
-
cursor: pointer;
|
|
94
|
-
overflow: hidden;
|
|
95
|
-
${(p) => {
|
|
96
|
-
var _a, _b, _c;
|
|
97
|
-
return p.selected ? css`
|
|
98
|
-
border-left: 2px solid ${(_a = p.theme.colors) == null ? void 0 : _a.primary};
|
|
99
|
-
color: ${(_b = p.theme.colors) == null ? void 0 : _b.primary};
|
|
100
|
-
` : css`
|
|
101
|
-
color: ${(_c = p.theme.colors) == null ? void 0 : _c.text};
|
|
102
|
-
`;
|
|
103
|
-
}};
|
|
104
|
-
|
|
105
|
-
span {
|
|
106
|
-
overflow: hidden;
|
|
107
|
-
text-overflow: ellipsis;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
i {
|
|
111
|
-
margin-right: ${(p) => {
|
|
112
|
-
var _a;
|
|
113
|
-
return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
|
|
114
|
-
}};
|
|
115
|
-
font-size: ${(p) => {
|
|
116
|
-
var _a;
|
|
117
|
-
return (_a = p.theme.fonts) == null ? void 0 : _a.medium;
|
|
118
|
-
}};
|
|
119
|
-
min-height: 1em;
|
|
120
|
-
min-width: 1em;
|
|
121
|
-
}
|
|
122
|
-
`;
|
|
123
|
-
const Item = styled.div`
|
|
124
|
-
${styling}
|
|
125
|
-
`;
|
|
126
|
-
const Link = styled(Link$1)`
|
|
127
|
-
${styling}
|
|
128
|
-
&:focus {
|
|
129
|
-
outline: none;
|
|
130
|
-
span {
|
|
131
|
-
${(p) => {
|
|
132
|
-
var _a;
|
|
133
|
-
return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && linkTabStyle;
|
|
134
|
-
}};
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
`;
|
|
138
|
-
const TopItem = styled.div`
|
|
139
|
-
display: flex;
|
|
140
|
-
justify-content: space-between;
|
|
141
|
-
padding-right: ${(p) => {
|
|
142
|
-
var _a;
|
|
143
|
-
return (_a = p.theme.sizes) == null ? void 0 : _a.large;
|
|
144
|
-
}};
|
|
145
|
-
min-height: 52px;
|
|
146
|
-
white-space: nowrap;
|
|
147
|
-
|
|
148
|
-
&& {
|
|
149
|
-
font-weight: normal;
|
|
150
|
-
|
|
151
|
-
a {
|
|
152
|
-
font-weight: normal;
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
${Item} {
|
|
156
|
-
font-weight: normal;
|
|
157
|
-
}
|
|
158
|
-
`;
|
|
159
|
-
const List = styled(List$1)`
|
|
160
|
-
${list}
|
|
161
|
-
display: flex;
|
|
162
|
-
justify-content: center;
|
|
163
|
-
flex-direction: column;
|
|
164
|
-
margin-right: ${(p) => {
|
|
165
|
-
var _a;
|
|
166
|
-
return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
|
|
167
|
-
}};
|
|
168
|
-
margin-left: ${(p) => {
|
|
169
|
-
var _a;
|
|
170
|
-
return (_a = p.theme.sizes) == null ? void 0 : _a.large;
|
|
171
|
-
}};
|
|
172
|
-
margin-bottom: 22px;
|
|
173
|
-
border-left: ${(p) => p.theme.border};
|
|
174
|
-
li {
|
|
175
|
-
margin: 0 0 ${(p) => {
|
|
176
|
-
var _a;
|
|
177
|
-
return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
|
|
178
|
-
}} -2px;
|
|
179
|
-
}
|
|
180
|
-
li:last-child {
|
|
181
|
-
margin: 0 0 0 -2px;
|
|
182
|
-
}
|
|
183
|
-
flex-basis: 100%;
|
|
184
|
-
border-width: 2px;
|
|
185
|
-
`;
|
|
186
|
-
const MatchCount = styled(Text)`
|
|
187
|
-
margin: 0 0 0 ${(p) => {
|
|
188
|
-
var _a;
|
|
189
|
-
return (_a = p.theme.sizes) == null ? void 0 : _a.small;
|
|
190
|
-
}};
|
|
191
|
-
`;
|
|
192
|
-
var Styled = {
|
|
193
|
-
Wrapper,
|
|
194
|
-
Toggler,
|
|
195
|
-
List,
|
|
196
|
-
Item,
|
|
197
|
-
Link,
|
|
198
|
-
TopItem,
|
|
199
|
-
MatchCount
|
|
200
|
-
};
|
|
201
|
-
const GuideCategoryDropdownMatchCount = ({ matches }) => {
|
|
202
|
-
const { showMatchCount = false } = useProperties();
|
|
203
|
-
if (!showMatchCount || typeof matches === "undefined") {
|
|
204
|
-
return null;
|
|
205
|
-
}
|
|
206
|
-
return /* @__PURE__ */ React.createElement(Styled.MatchCount, null, "(", matches, ")");
|
|
207
|
-
};
|
|
208
|
-
const GuideCategoryDropdownItem = ({ item, guideCategory }) => {
|
|
209
|
-
const {
|
|
210
|
-
route = "browse",
|
|
211
|
-
categoryAriaLabel = "",
|
|
212
|
-
activeCategoryAriaLabel = "",
|
|
213
|
-
fallbackOnInitialRoute = false
|
|
214
|
-
} = useProperties();
|
|
215
|
-
const [hovering, elem] = useHover();
|
|
216
|
-
const { id, title, symbol, activeSymbol } = item;
|
|
217
|
-
const selected = guideCategory === id;
|
|
218
|
-
return /* @__PURE__ */ React.createElement("li", {
|
|
219
|
-
ref: elem
|
|
220
|
-
}, /* @__PURE__ */ React.createElement(Styled.Link, __spreadProps(__spreadValues({}, initialRouteFallback(item, route, fallbackOnInitialRoute, "category")), {
|
|
221
|
-
"aria-pressed": selected,
|
|
222
|
-
"aria-label": (selected ? activeCategoryAriaLabel : categoryAriaLabel).replace("{{category}}", title),
|
|
223
|
-
className: "humany-guide-category-dropdown-link",
|
|
224
|
-
"aria-current": selected,
|
|
225
|
-
selected
|
|
226
|
-
}), (selected || hovering) && activeSymbol ? /* @__PURE__ */ React.createElement(SymbolBadge, {
|
|
227
|
-
symbol: activeSymbol
|
|
228
|
-
}) : symbol && /* @__PURE__ */ React.createElement(SymbolBadge, {
|
|
229
|
-
symbol
|
|
230
|
-
}), /* @__PURE__ */ React.createElement(Text, null, title), /* @__PURE__ */ React.createElement(GuideCategoryDropdownMatchCount, __spreadValues({}, item))));
|
|
231
|
-
};
|
|
232
|
-
const GuideCategoryDropdown = (_a) => {
|
|
233
|
-
var _b = _a, { className } = _b, other = __objRest(_b, ["className"]);
|
|
234
|
-
const routeData = useRouteData();
|
|
235
|
-
const [togglerFocus, setTogglerFocus] = useState(false);
|
|
236
|
-
const {
|
|
237
|
-
parent,
|
|
238
|
-
route = "browse",
|
|
239
|
-
categories = [],
|
|
240
|
-
loading = false
|
|
241
|
-
} = useProperties();
|
|
242
|
-
const container = useContainer();
|
|
243
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
244
|
-
const { params } = routeData;
|
|
245
|
-
const { guideCategory, tag, phrase, sorting } = params;
|
|
246
|
-
useEffect(() => {
|
|
247
|
-
if (isOpen) {
|
|
248
|
-
setIsOpen(false);
|
|
249
|
-
}
|
|
250
|
-
}, [guideCategory]);
|
|
251
|
-
if (loading || !parent || !categories.length) {
|
|
252
|
-
return createEmptyComponent(container, __spreadProps(__spreadValues({}, other), {
|
|
253
|
-
className: appendClassNames(className, "humany-guide-category-dropdown")
|
|
254
|
-
}));
|
|
255
|
-
}
|
|
256
|
-
const selected = categories.find((category) => category.id === guideCategory) || parent;
|
|
257
|
-
const selectedSymbol = selected.activeSymbol || selected.symbol;
|
|
258
|
-
return /* @__PURE__ */ React.createElement(Styled.Wrapper, __spreadProps(__spreadValues({}, other), {
|
|
259
|
-
"data-loading": false,
|
|
260
|
-
"data-toggler-in-focus": togglerFocus,
|
|
261
|
-
"aria-expanded": isOpen,
|
|
262
|
-
className: appendClassNames(className, "humany-guide-category-dropdown")
|
|
263
|
-
}), isOpen ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Styled.TopItem, {
|
|
264
|
-
className: "humany-guide-category-dropdown-top-item"
|
|
265
|
-
}, /* @__PURE__ */ React.createElement(Styled.Link, {
|
|
266
|
-
className: "humany-guide-category-dropdown-link",
|
|
267
|
-
routeName: route,
|
|
268
|
-
params: createParams({
|
|
269
|
-
tag,
|
|
270
|
-
phrase,
|
|
271
|
-
sorting,
|
|
272
|
-
guideCategory: parent.id,
|
|
273
|
-
uriName: formatUrl(parent.title)
|
|
274
|
-
}),
|
|
275
|
-
selected: false
|
|
276
|
-
}, parent.symbol ? /* @__PURE__ */ React.createElement(SymbolBadge, {
|
|
277
|
-
symbol: parent.symbol
|
|
278
|
-
}) : null, /* @__PURE__ */ React.createElement(Text, null, parent.title), /* @__PURE__ */ React.createElement(GuideCategoryDropdownMatchCount, __spreadValues({}, parent))), /* @__PURE__ */ React.createElement(Styled.Toggler, {
|
|
279
|
-
onBlur: () => setTogglerFocus(false),
|
|
280
|
-
onFocus: () => setTogglerFocus(true),
|
|
281
|
-
className: "humany-guide-category-dropdown-toggler",
|
|
282
|
-
onClick: () => {
|
|
283
|
-
setIsOpen(!isOpen);
|
|
284
|
-
},
|
|
285
|
-
"aria-expanded": "true",
|
|
286
|
-
"aria-label": selected.title
|
|
287
|
-
}, /* @__PURE__ */ React.createElement(SymbolBadge, {
|
|
288
|
-
size: 18,
|
|
289
|
-
symbol: { type: "Svg", content: "caret-up" }
|
|
290
|
-
}))), /* @__PURE__ */ React.createElement(Styled.List, {
|
|
291
|
-
className: "humany-guide-category-dropdown-open",
|
|
292
|
-
items: categories,
|
|
293
|
-
renderItem: (item) => /* @__PURE__ */ React.createElement(GuideCategoryDropdownItem, {
|
|
294
|
-
key: item.id,
|
|
295
|
-
item,
|
|
296
|
-
guideCategory
|
|
297
|
-
})
|
|
298
|
-
})) : /* @__PURE__ */ React.createElement(Styled.TopItem, {
|
|
299
|
-
className: "humany-guide-category-dropdown-top-item"
|
|
300
|
-
}, /* @__PURE__ */ React.createElement(Styled.Item, {
|
|
301
|
-
className: "humany-guide-category-dropdown-item",
|
|
302
|
-
onClick: () => {
|
|
303
|
-
setIsOpen(!isOpen);
|
|
304
|
-
},
|
|
305
|
-
selected: false
|
|
306
|
-
}, selectedSymbol ? /* @__PURE__ */ React.createElement(SymbolBadge, {
|
|
307
|
-
symbol: selectedSymbol
|
|
308
|
-
}) : null, /* @__PURE__ */ React.createElement(Text, null, selected.title), /* @__PURE__ */ React.createElement(GuideCategoryDropdownMatchCount, __spreadValues({}, selected))), /* @__PURE__ */ React.createElement(Styled.Toggler, {
|
|
309
|
-
onBlur: () => setTogglerFocus(false),
|
|
310
|
-
onFocus: () => setTogglerFocus(true),
|
|
311
|
-
className: "humany-guide-category-dropdown-toggler",
|
|
312
|
-
onClick: () => {
|
|
313
|
-
setIsOpen(!isOpen);
|
|
314
|
-
},
|
|
315
|
-
"aria-expanded": "false",
|
|
316
|
-
"aria-label": selected.title
|
|
317
|
-
}, /* @__PURE__ */ React.createElement(SymbolBadge, {
|
|
318
|
-
size: 18,
|
|
319
|
-
symbol: { type: "Svg", content: "caret-down" }
|
|
320
|
-
}))));
|
|
321
|
-
};
|
|
322
|
-
export { GuideCategoryDropdown as default };
|
|
323
|
-
//# sourceMappingURL=guide-category-dropdown.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"guide-category-dropdown.js","sources":["../src/guide-category-dropdown.styles.ts","../src/guide-category-dropdown-match-count.tsx","../src/guide-category-dropdown-item.tsx","../src/guide-category-dropdown.tsx"],"sourcesContent":["import {\r\n borderTabStyle,\r\n contentBox,\r\n Link as BaseLink,\r\n linkTabStyle,\r\n List as BaseList,\r\n list,\r\n loadingOpacity,\r\n Text,\r\n} from '@telia-ace/knowledge-widget-ui';\r\nimport styled, { css } from 'styled-components';\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst Wrapper: any = styled.div<any>`\r\n ${loadingOpacity}\r\n ${contentBox}\r\n overflow: hidden;\r\n min-height: 50px;\r\n ${(p) =>\r\n p['data-toggler-in-focus'] &&\r\n p.theme.accessibility?.isTabbing &&\r\n css`\r\n && {\r\n ${borderTabStyle}\r\n }\r\n `};\r\n`;\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst Toggler: any = styled.button`\r\n background: none;\r\n border: 0;\r\n outline: 0;\r\n display: block;\r\n cursor: pointer;\r\n padding: 0;\r\n font-size: ${(p) => p.theme.fonts?.normal};\r\n text-align: end;\r\n flex: 1 0 auto;\r\n svg {\r\n path,\r\n line {\r\n stroke: ${(p) => p.theme.colors?.text};\r\n }\r\n }\r\n`;\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst styling = css<{ selected: boolean }>`\r\n font-size: ${(p) => p.theme.fonts?.normal};\r\n text-align: left;\r\n text-align: left;\r\n text-decoration: none;\r\n font-weight: 300;\r\n display: flex;\r\n align-items: center;\r\n padding: ${(p) => p.theme.sizes?.small};\r\n padding-left: ${(p) => p.theme.sizes?.large};\r\n cursor: pointer;\r\n overflow: hidden;\r\n ${(p) =>\r\n p.selected\r\n ? css`\r\n border-left: 2px solid ${p.theme.colors?.primary};\r\n color: ${p.theme.colors?.primary};\r\n `\r\n : css`\r\n color: ${p.theme.colors?.text};\r\n `};\r\n\r\n span {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n i {\r\n margin-right: ${(p) => p.theme.sizes?.normal};\r\n font-size: ${(p) => p.theme.fonts?.medium};\r\n min-height: 1em;\r\n min-width: 1em;\r\n }\r\n`;\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst Item: any = styled.div`\r\n ${styling}\r\n`;\r\n\r\nconst Link: any = styled(BaseLink)<any>`\r\n ${styling}\r\n &:focus {\r\n outline: none;\r\n span {\r\n ${(p) => p.theme.accessibility?.isTabbing && linkTabStyle};\r\n }\r\n }\r\n`;\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst TopItem: any = styled.div`\r\n display: flex;\r\n justify-content: space-between;\r\n padding-right: ${(p) => p.theme.sizes?.large};\r\n min-height: 52px;\r\n white-space: nowrap;\r\n\r\n && {\r\n font-weight: normal;\r\n\r\n a {\r\n font-weight: normal;\r\n }\r\n }\r\n ${Item} {\r\n font-weight: normal;\r\n }\r\n`;\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst List: any = styled(BaseList)<any>`\r\n ${list}\r\n display: flex;\r\n justify-content: center;\r\n flex-direction: column;\r\n margin-right: ${(p) => p.theme.sizes?.medium};\r\n margin-left: ${(p) => p.theme.sizes?.large};\r\n margin-bottom: 22px;\r\n border-left: ${(p) => p.theme.border};\r\n li {\r\n margin: 0 0 ${(p) => p.theme.sizes?.normal} -2px;\r\n }\r\n li:last-child {\r\n margin: 0 0 0 -2px;\r\n }\r\n flex-basis: 100%;\r\n border-width: 2px;\r\n`;\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst MatchCount: any = styled(Text)`\r\n margin: 0 0 0 ${(p) => p.theme.sizes?.small};\r\n`;\r\n\r\nexport default {\r\n Wrapper,\r\n Toggler,\r\n List,\r\n Item,\r\n Link,\r\n TopItem,\r\n MatchCount,\r\n};\r\n","import { Category } from '@telia-ace/knowledge-widget-core';\r\nimport { useProperties } from '@telia-ace/knowledge-widget-ui';\r\nimport React from 'react';\r\nimport { GuideCategoryDropdownComponentProps } from './guide-category-dropdown-component';\r\nimport Styled from './guide-category-dropdown.styles';\r\n\r\nconst GuideCategoryDropdownMatchCount: React.FC<Category> = ({ matches }) => {\r\n const { showMatchCount = false } = useProperties<GuideCategoryDropdownComponentProps>();\r\n\r\n if (!showMatchCount || typeof matches === 'undefined') {\r\n return null;\r\n }\r\n\r\n return <Styled.MatchCount>({matches})</Styled.MatchCount>;\r\n};\r\n\r\nexport default GuideCategoryDropdownMatchCount;\r\n","import { initialRouteFallback } from '@telia-ace/knowledge-widget-component-utilities';\r\nimport { Category } from '@telia-ace/knowledge-widget-core';\r\nimport { SymbolBadge, Text, useHover, useProperties } from '@telia-ace/knowledge-widget-ui';\r\nimport React from 'react';\r\nimport { GuideCategoryDropdownComponentProps } from './guide-category-dropdown-component';\r\nimport GuideCategoryDropdownMatchCount from './guide-category-dropdown-match-count';\r\nimport Styled from './guide-category-dropdown.styles';\r\n\r\ntype Props = {\r\n item: Category;\r\n guideCategory: string;\r\n};\r\n\r\nconst GuideCategoryDropdownItem: React.FC<Props> = ({ item, guideCategory }) => {\r\n const {\r\n route = 'browse',\r\n categoryAriaLabel = '',\r\n activeCategoryAriaLabel = '',\r\n fallbackOnInitialRoute = false,\r\n } = useProperties<GuideCategoryDropdownComponentProps>();\r\n const [hovering, elem] = useHover();\r\n const { id, title, symbol, activeSymbol } = item;\r\n\r\n const selected = guideCategory === id;\r\n return (\r\n <li ref={elem as any}>\r\n <Styled.Link\r\n {...initialRouteFallback(item, route, fallbackOnInitialRoute, 'category')}\r\n aria-pressed={selected}\r\n aria-label={(selected ? activeCategoryAriaLabel : categoryAriaLabel).replace(\r\n '{{category}}',\r\n title\r\n )}\r\n className=\"humany-guide-category-dropdown-link\"\r\n aria-current={selected}\r\n selected={selected}\r\n >\r\n {(selected || hovering) && activeSymbol ? (\r\n <SymbolBadge symbol={activeSymbol} />\r\n ) : (\r\n symbol && <SymbolBadge symbol={symbol} />\r\n )}\r\n <Text>{title}</Text>\r\n <GuideCategoryDropdownMatchCount {...item} />\r\n </Styled.Link>\r\n </li>\r\n );\r\n};\r\n\r\nexport default GuideCategoryDropdownItem;\r\n","import { Category } from '@telia-ace/knowledge-widget-core';\r\nimport {\r\n createEmptyComponent,\r\n SymbolBadge,\r\n Text,\r\n useContainer,\r\n useProperties,\r\n useRouteData,\r\n} from '@telia-ace/knowledge-widget-ui';\r\nimport { appendClassNames, createParams, formatUrl } from '@telia-ace/widget-utilities';\r\nimport React, { useEffect, useState } from 'react';\r\nimport { GuideCategoryDropdownComponentProps } from './guide-category-dropdown-component';\r\nimport GuideCategoryDropdownItem from './guide-category-dropdown-item';\r\nimport GuideCategoryDropdownMatchCount from './guide-category-dropdown-match-count';\r\nimport Styled from './guide-category-dropdown.styles';\r\n\r\ntype Props = {\r\n className: string;\r\n};\r\n\r\nconst GuideCategoryDropdown: React.SFC<Props> = ({ className, ...other }) => {\r\n const routeData = useRouteData();\r\n const [togglerFocus, setTogglerFocus] = useState(false);\r\n const {\r\n parent,\r\n route = 'browse',\r\n categories = [],\r\n loading = false,\r\n } = useProperties<GuideCategoryDropdownComponentProps>();\r\n const container = useContainer();\r\n const [isOpen, setIsOpen] = useState(false);\r\n const { params } = routeData;\r\n const { guideCategory, tag, phrase, sorting } = params;\r\n\r\n useEffect(() => {\r\n if (isOpen) {\r\n setIsOpen(false);\r\n }\r\n }, [guideCategory]);\r\n\r\n if (loading || !parent || !categories.length) {\r\n return createEmptyComponent(container, {\r\n ...other,\r\n className: appendClassNames(className, 'humany-guide-category-dropdown'),\r\n });\r\n }\r\n\r\n const selected = categories.find((category) => category.id === guideCategory) || parent;\r\n const selectedSymbol = selected.activeSymbol || selected.symbol;\r\n\r\n return (\r\n <Styled.Wrapper\r\n {...other}\r\n data-loading={false}\r\n data-toggler-in-focus={togglerFocus}\r\n aria-expanded={isOpen}\r\n className={appendClassNames(className, 'humany-guide-category-dropdown')}\r\n >\r\n {isOpen ? (\r\n <>\r\n <Styled.TopItem className=\"humany-guide-category-dropdown-top-item\">\r\n <Styled.Link\r\n className=\"humany-guide-category-dropdown-link\"\r\n routeName={route}\r\n params={createParams({\r\n tag,\r\n phrase,\r\n sorting,\r\n guideCategory: parent.id,\r\n uriName: formatUrl(parent.title),\r\n })}\r\n selected={false}\r\n >\r\n {parent.symbol ? <SymbolBadge symbol={parent.symbol} /> : null}\r\n <Text>{parent.title}</Text>\r\n <GuideCategoryDropdownMatchCount {...parent} />\r\n </Styled.Link>\r\n <Styled.Toggler\r\n onBlur={() => setTogglerFocus(false)}\r\n onFocus={() => setTogglerFocus(true)}\r\n className=\"humany-guide-category-dropdown-toggler\"\r\n onClick={() => {\r\n setIsOpen(!isOpen);\r\n }}\r\n aria-expanded=\"true\"\r\n aria-label={selected.title}\r\n >\r\n <SymbolBadge size={18} symbol={{ type: 'Svg', content: 'caret-up' }} />\r\n </Styled.Toggler>\r\n </Styled.TopItem>\r\n <Styled.List\r\n className=\"humany-guide-category-dropdown-open\"\r\n items={categories}\r\n renderItem={(item: Category) => (\r\n <GuideCategoryDropdownItem\r\n key={item.id}\r\n item={item}\r\n guideCategory={guideCategory}\r\n />\r\n )}\r\n />\r\n </>\r\n ) : (\r\n <Styled.TopItem className=\"humany-guide-category-dropdown-top-item\">\r\n <Styled.Item\r\n className=\"humany-guide-category-dropdown-item\"\r\n onClick={() => {\r\n setIsOpen(!isOpen);\r\n }}\r\n selected={false}\r\n >\r\n {selectedSymbol ? <SymbolBadge symbol={selectedSymbol} /> : null}\r\n <Text>{selected.title}</Text>\r\n <GuideCategoryDropdownMatchCount {...selected} />\r\n </Styled.Item>\r\n <Styled.Toggler\r\n onBlur={() => setTogglerFocus(false)}\r\n onFocus={() => setTogglerFocus(true)}\r\n className=\"humany-guide-category-dropdown-toggler\"\r\n onClick={() => {\r\n setIsOpen(!isOpen);\r\n }}\r\n aria-expanded=\"false\"\r\n aria-label={selected.title}\r\n >\r\n <SymbolBadge size={18} symbol={{ type: 'Svg', content: 'caret-down' }} />\r\n </Styled.Toggler>\r\n </Styled.TopItem>\r\n )}\r\n </Styled.Wrapper>\r\n );\r\n};\r\n\r\nexport default GuideCategoryDropdown;\r\n"],"names":["BaseLink","BaseList"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,UAAe,OAAO;AAAA,MACtB;AAAA,MACA;AAAA;AAAA;AAAA,MAGA,CAAC;;AACC,WAAE,4BACF,SAAE,MAAM,kBAAR,mBAAuB,cACvB;AAAA;AAAA,kBAEU;AAAA;AAAA;AAAA;AAAA;AAMlB,MAAM,UAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAOX,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMjB,CAAC,MAAM;;AAAA,iBAAE,MAAM,WAAR,mBAAgB;AAAA;AAAA;AAAA;AAAA;AAM7C,MAAM,UAAU;AAAA,iBACC,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOxB,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA,oBACjB,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA;AAAA;AAAA,MAGpC,CAAC,MACC;;AAAA,WAAE,WACI;AAAA,2CAC6B,QAAE,MAAM,WAAR,mBAAgB;AAAA,2BAChC,QAAE,MAAM,WAAR,mBAAgB;AAAA,kBAE7B;AAAA,2BACa,QAAE,MAAM,WAAR,mBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASnB,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA,qBACzB,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,MAAM,OAAY,OAAO;AAAA,MACnB;AAAA;AAGN,MAAM,OAAY,OAAOA,MAAQ;AAAA,MAC3B;AAAA;AAAA;AAAA;AAAA,cAIQ,CAAC,MAAA;;AAAM,kBAAE,MAAM,kBAAR,mBAAuB,cAAa;AAAA;AAAA;AAAA;AAAA;AAMzD,MAAM,UAAe,OAAO;AAAA;AAAA;AAAA,qBAGP,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAWrC;AAAA;AAAA;AAAA;AAMN,MAAM,OAAY,OAAOC,MAAQ;AAAA,MAC3B;AAAA;AAAA;AAAA;AAAA,oBAIc,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA,mBACvB,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA;AAAA,mBAEtB,CAAC,MAAM,EAAE,MAAM;AAAA;AAAA,sBAEZ,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU5C,MAAM,aAAkB,OAAO,IAAI;AAAA,oBACf,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA;AAG1C,IAAe,SAAA;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;ACjJA,MAAM,kCAAsD,CAAC,EAAE,cAAc;AACnE,QAAA,EAAE,iBAAiB,UAAU,cAAmD;AAEtF,MAAI,CAAC,kBAAkB,OAAO,YAAY,aAAa;AAC5C,WAAA;AAAA,EACX;AAEA,6CAAQ,OAAO,YAAP,MAAkB,KAAE,SAAQ,GAAC;AACzC;ACDA,MAAM,4BAA6C,CAAC,EAAE,MAAM,oBAAoB;AACtE,QAAA;AAAA,IACF,QAAQ;AAAA,IACR,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,yBAAyB;AAAA,MACzB,cAAmD;AACjD,QAAA,CAAC,UAAU,QAAQ,SAAS;AAClC,QAAM,EAAE,IAAI,OAAO,QAAQ,iBAAiB;AAE5C,QAAM,WAAW,kBAAkB;AACnC,SACK,sBAAA,cAAA,MAAA;AAAA,IAAG,KAAK;AAAA,EACL,GAAA,sBAAA,cAAC,OAAO,MAAP,iCACO,qBAAqB,MAAM,OAAO,wBAAwB,UAAU,IAD3E;AAAA,IAEG,gBAAc;AAAA,IACd,cAAwB,YAAA,0BAA0B,mBAAmB,QACjE,gBACA,KACJ;AAAA,IACA,WAAU;AAAA,IACV,gBAAc;AAAA,IACd;AAAA,EAAA,IAEE,aAAY,aAAa,eACtB,sBAAA,cAAA,aAAA;AAAA,IAAY,QAAQ;AAAA,EAAc,CAAA,IAEnC,UAAW,sBAAA,cAAA,aAAA;AAAA,IAAY;AAAA,EAAA,CAAgB,GAE3C,sBAAA,cAAC,MAAM,MAAA,KAAM,GACZ,sBAAA,cAAA,iCAAA,mBAAoC,KAAM,CAC/C,CACJ;AAER;AC3BA,MAAM,wBAA0C,CAAC,OAA4B;AAA5B,eAAE,gBAAF,IAAgB,kBAAhB,IAAgB,CAAd;AAC/C,QAAM,YAAY;AAClB,QAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;AAChD,QAAA;AAAA,IACF;AAAA,IACA,QAAQ;AAAA,IACR,aAAa,CAAC;AAAA,IACd,UAAU;AAAA,MACV,cAAmD;AACvD,QAAM,YAAY;AAClB,QAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;AAC1C,QAAM,EAAE,WAAW;AACnB,QAAM,EAAE,eAAe,KAAK,QAAQ,YAAY;AAEhD,YAAU,MAAM;AACZ,QAAI,QAAQ;AACR,gBAAU,KAAK;AAAA,IACnB;AAAA,EAAA,GACD,CAAC,aAAa,CAAC;AAElB,MAAI,WAAW,CAAC,UAAU,CAAC,WAAW,QAAQ;AAC1C,WAAO,qBAAqB,WAAW,iCAChC,QADgC;AAAA,MAEnC,WAAW,iBAAiB,WAAW,gCAAgC;AAAA,IAAA,EAC1E;AAAA,EACL;AAEM,QAAA,WAAW,WAAW,KAAK,CAAC,aAAa,SAAS,OAAO,aAAa,KAAK;AAC3E,QAAA,iBAAiB,SAAS,gBAAgB,SAAS;AAGrD,SAAA,sBAAA,cAAC,OAAO,SAAP,iCACO,QADP;AAAA,IAEG,gBAAc;AAAA,IACd,yBAAuB;AAAA,IACvB,iBAAe;AAAA,IACf,WAAW,iBAAiB,WAAW,gCAAgC;AAAA,EAAA,IAEtE,SACG,sBAAA,cAAA,MAAA,UAAA,MACK,sBAAA,cAAA,OAAO,SAAP;AAAA,IAAe,WAAU;AAAA,EACtB,GAAA,sBAAA,cAAC,OAAO,MAAP;AAAA,IACG,WAAU;AAAA,IACV,WAAW;AAAA,IACX,QAAQ,aAAa;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe,OAAO;AAAA,MACtB,SAAS,UAAU,OAAO,KAAK;AAAA,IAAA,CAClC;AAAA,IACD,UAAU;AAAA,EAET,GAAA,OAAO,SAAU,sBAAA,cAAA,aAAA;AAAA,IAAY,QAAQ,OAAO;AAAA,EAAQ,CAAA,IAAK,MAC1D,sBAAA,cAAC,YAAM,OAAO,KAAM,GACnB,sBAAA,cAAA,iCAAA,mBAAoC,OAAQ,CACjD,GACC,sBAAA,cAAA,OAAO,SAAP;AAAA,IACG,QAAQ,MAAM,gBAAgB,KAAK;AAAA,IACnC,SAAS,MAAM,gBAAgB,IAAI;AAAA,IACnC,WAAU;AAAA,IACV,SAAS,MAAM;AACX,gBAAU,CAAC,MAAM;AAAA,IACrB;AAAA,IACA,iBAAc;AAAA,IACd,cAAY,SAAS;AAAA,EAAA,GAEpB,sBAAA,cAAA,aAAA;AAAA,IAAY,MAAM;AAAA,IAAI,QAAQ,EAAE,MAAM,OAAO,SAAS,WAAW;AAAA,EAAG,CAAA,CACzE,CACJ,GACA,sBAAA,cAAC,OAAO,MAAP;AAAA,IACG,WAAU;AAAA,IACV,OAAO;AAAA,IACP,YAAY,CAAC,SACR,sBAAA,cAAA,2BAAA;AAAA,MACG,KAAK,KAAK;AAAA,MACV;AAAA,MACA;AAAA,IAAA,CACJ;AAAA,EAER,CAAA,CACJ,IAEC,sBAAA,cAAA,OAAO,SAAP;AAAA,IAAe,WAAU;AAAA,EACtB,GAAA,sBAAA,cAAC,OAAO,MAAP;AAAA,IACG,WAAU;AAAA,IACV,SAAS,MAAM;AACX,gBAAU,CAAC,MAAM;AAAA,IACrB;AAAA,IACA,UAAU;AAAA,EAAA,GAET,iBAAkB,sBAAA,cAAA,aAAA;AAAA,IAAY,QAAQ;AAAA,EAAgB,CAAA,IAAK,MAC5D,sBAAA,cAAC,YAAM,SAAS,KAAM,GACrB,sBAAA,cAAA,iCAAA,mBAAoC,SAAU,CACnD,GACC,sBAAA,cAAA,OAAO,SAAP;AAAA,IACG,QAAQ,MAAM,gBAAgB,KAAK;AAAA,IACnC,SAAS,MAAM,gBAAgB,IAAI;AAAA,IACnC,WAAU;AAAA,IACV,SAAS,MAAM;AACX,gBAAU,CAAC,MAAM;AAAA,IACrB;AAAA,IACA,iBAAc;AAAA,IACd,cAAY,SAAS;AAAA,EAAA,GAEpB,sBAAA,cAAA,aAAA;AAAA,IAAY,MAAM;AAAA,IAAI,QAAQ,EAAE,MAAM,OAAO,SAAS,aAAa;AAAA,EAAA,CAAG,CAC3E,CACJ,CAER;AAER;;"}
|