@telia-ace/knowledge-widget-components-guide-category-dropdown 1.0.24-next.2 → 1.0.24-next.4
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.
|
@@ -0,0 +1,273 @@
|
|
|
1
|
+
var P = Object.defineProperty, W = Object.defineProperties;
|
|
2
|
+
var H = Object.getOwnPropertyDescriptors;
|
|
3
|
+
var E = Object.getOwnPropertySymbols;
|
|
4
|
+
var L = Object.prototype.hasOwnProperty, S = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var I = (e, t, a) => t in e ? P(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a, c = (e, t) => {
|
|
6
|
+
for (var a in t || (t = {}))
|
|
7
|
+
L.call(t, a) && I(e, a, t[a]);
|
|
8
|
+
if (E)
|
|
9
|
+
for (var a of E(t))
|
|
10
|
+
S.call(t, a) && I(e, a, t[a]);
|
|
11
|
+
return e;
|
|
12
|
+
}, x = (e, t) => W(e, H(t));
|
|
13
|
+
var D = (e, t) => {
|
|
14
|
+
var a = {};
|
|
15
|
+
for (var n in e)
|
|
16
|
+
L.call(e, n) && t.indexOf(n) < 0 && (a[n] = e[n]);
|
|
17
|
+
if (e != null && E)
|
|
18
|
+
for (var n of E(e))
|
|
19
|
+
t.indexOf(n) < 0 && S.call(e, n) && (a[n] = e[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 k, useProperties as T, useHover as Y, SymbolBadge as f, useRouteData as Z, useContainer as _, useIsTabbing as ee, createEmptyComponent as te } from "@telia-ace/knowledge-widget-ui";
|
|
23
|
+
import { appendClassNames as F, createParams as oe, formatUrl as ae } from "@telia-ace/widget-utilities";
|
|
24
|
+
import o, { useState as G, useEffect as ne } from "react";
|
|
25
|
+
import { initialRouteFallback as re } from "@telia-ace/knowledge-widget-component-utilities";
|
|
26
|
+
import { css as C } from "@emotion/react";
|
|
27
|
+
import m from "@emotion/styled";
|
|
28
|
+
const le = m.div`
|
|
29
|
+
${U}
|
|
30
|
+
${q}
|
|
31
|
+
overflow: hidden;
|
|
32
|
+
min-height: 50px;
|
|
33
|
+
${(e) => e["data-toggler-in-focus"] && e.isTabbing && C`
|
|
34
|
+
&& {
|
|
35
|
+
${J(e)}
|
|
36
|
+
}
|
|
37
|
+
`};
|
|
38
|
+
`, ie = m.button`
|
|
39
|
+
background: none;
|
|
40
|
+
border: 0;
|
|
41
|
+
outline: 0;
|
|
42
|
+
display: block;
|
|
43
|
+
cursor: pointer;
|
|
44
|
+
padding: 0;
|
|
45
|
+
font-size: ${(e) => {
|
|
46
|
+
var t;
|
|
47
|
+
return (t = e.theme.fonts) == null ? void 0 : t.normal;
|
|
48
|
+
}};
|
|
49
|
+
text-align: end;
|
|
50
|
+
flex: 1 0 auto;
|
|
51
|
+
svg {
|
|
52
|
+
path,
|
|
53
|
+
line {
|
|
54
|
+
stroke: ${(e) => {
|
|
55
|
+
var t;
|
|
56
|
+
return (t = e.theme.colors) == null ? void 0 : t.text;
|
|
57
|
+
}};
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
`, M = (e) => {
|
|
61
|
+
var t, a, n, d, g, s, r, u;
|
|
62
|
+
return C`
|
|
63
|
+
font-size: ${(t = e.theme.fonts) == null ? void 0 : t.normal};
|
|
64
|
+
text-align: left;
|
|
65
|
+
text-align: left;
|
|
66
|
+
text-decoration: none;
|
|
67
|
+
font-weight: 300;
|
|
68
|
+
display: flex;
|
|
69
|
+
align-items: center;
|
|
70
|
+
padding: ${(a = e.theme.sizes) == null ? void 0 : a.small};
|
|
71
|
+
padding-left: ${(n = e.theme.sizes) == null ? void 0 : n.large};
|
|
72
|
+
cursor: pointer;
|
|
73
|
+
overflow: hidden;
|
|
74
|
+
${e.selected ? C`
|
|
75
|
+
border-left: 2px solid ${(d = e.theme.colors) == null ? void 0 : d.primary};
|
|
76
|
+
color: ${(g = e.theme.colors) == null ? void 0 : g.primary};
|
|
77
|
+
` : C`
|
|
78
|
+
color: ${(s = e.theme.colors) == null ? void 0 : s.text};
|
|
79
|
+
`};
|
|
80
|
+
|
|
81
|
+
span {
|
|
82
|
+
overflow: hidden;
|
|
83
|
+
text-overflow: ellipsis;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
i {
|
|
87
|
+
margin-right: ${(r = e.theme.sizes) == null ? void 0 : r.normal};
|
|
88
|
+
font-size: ${(u = e.theme.fonts) == null ? void 0 : u.medium};
|
|
89
|
+
min-height: 1em;
|
|
90
|
+
min-width: 1em;
|
|
91
|
+
}
|
|
92
|
+
`;
|
|
93
|
+
}, se = m.div`
|
|
94
|
+
${M}
|
|
95
|
+
`, ce = m(K)`
|
|
96
|
+
${M}
|
|
97
|
+
&:focus {
|
|
98
|
+
outline: none;
|
|
99
|
+
}
|
|
100
|
+
&:focus-visible {
|
|
101
|
+
span {
|
|
102
|
+
${Q};
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
`, me = m.div`
|
|
106
|
+
display: flex;
|
|
107
|
+
justify-content: space-between;
|
|
108
|
+
padding-right: ${(e) => {
|
|
109
|
+
var t;
|
|
110
|
+
return (t = e.theme.sizes) == null ? void 0 : t.large;
|
|
111
|
+
}};
|
|
112
|
+
min-height: 52px;
|
|
113
|
+
white-space: nowrap;
|
|
114
|
+
|
|
115
|
+
&& {
|
|
116
|
+
font-weight: normal;
|
|
117
|
+
|
|
118
|
+
a {
|
|
119
|
+
font-weight: normal;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
.humany-guide-category-dropdown-item {
|
|
123
|
+
font-weight: normal;
|
|
124
|
+
}
|
|
125
|
+
`, de = m(V)`
|
|
126
|
+
${X}
|
|
127
|
+
display: flex;
|
|
128
|
+
justify-content: center;
|
|
129
|
+
flex-direction: column;
|
|
130
|
+
margin-right: ${(e) => {
|
|
131
|
+
var t;
|
|
132
|
+
return (t = e.theme.sizes) == null ? void 0 : t.medium;
|
|
133
|
+
}};
|
|
134
|
+
margin-left: ${(e) => {
|
|
135
|
+
var t;
|
|
136
|
+
return (t = e.theme.sizes) == null ? void 0 : t.large;
|
|
137
|
+
}};
|
|
138
|
+
margin-bottom: 22px;
|
|
139
|
+
border-left: ${(e) => e.theme.border};
|
|
140
|
+
li {
|
|
141
|
+
margin: 0 0 ${(e) => {
|
|
142
|
+
var t;
|
|
143
|
+
return (t = e.theme.sizes) == null ? void 0 : t.normal;
|
|
144
|
+
}} -2px;
|
|
145
|
+
}
|
|
146
|
+
li:last-child {
|
|
147
|
+
margin: 0 0 0 -2px;
|
|
148
|
+
}
|
|
149
|
+
flex-basis: 100%;
|
|
150
|
+
border-width: 2px;
|
|
151
|
+
`, ge = m(k)`
|
|
152
|
+
margin: 0 0 0 ${(e) => {
|
|
153
|
+
var t;
|
|
154
|
+
return (t = e.theme.sizes) == null ? void 0 : t.small;
|
|
155
|
+
}};
|
|
156
|
+
`, i = {
|
|
157
|
+
Wrapper: le,
|
|
158
|
+
Toggler: ie,
|
|
159
|
+
List: de,
|
|
160
|
+
Item: se,
|
|
161
|
+
Link: ce,
|
|
162
|
+
TopItem: me,
|
|
163
|
+
MatchCount: ge
|
|
164
|
+
}, ue = ({ matches: e }) => {
|
|
165
|
+
const { showMatchCount: t = !1 } = T();
|
|
166
|
+
return !t || typeof e == "undefined" ? null : /* @__PURE__ */ o.createElement(i.MatchCount, null, "(", e, ")");
|
|
167
|
+
}, z = ue, pe = ({ item: e, guideCategory: t }) => {
|
|
168
|
+
const {
|
|
169
|
+
route: a = "browse",
|
|
170
|
+
categoryAriaLabel: n = "",
|
|
171
|
+
activeCategoryAriaLabel: d = "",
|
|
172
|
+
fallbackOnInitialRoute: g = !1
|
|
173
|
+
} = T(), [s, r] = Y(), { id: u, title: p, symbol: h, activeSymbol: b } = e, l = t === u;
|
|
174
|
+
return /* @__PURE__ */ o.createElement("li", {
|
|
175
|
+
ref: r
|
|
176
|
+
}, /* @__PURE__ */ o.createElement(i.Link, x(c({}, re(e, a, g, "category")), {
|
|
177
|
+
"aria-pressed": l,
|
|
178
|
+
"aria-label": (l ? d : n).replace(
|
|
179
|
+
"{{category}}",
|
|
180
|
+
p
|
|
181
|
+
),
|
|
182
|
+
className: "humany-guide-category-dropdown-link",
|
|
183
|
+
"aria-current": l,
|
|
184
|
+
selected: l
|
|
185
|
+
}), (l || s) && b ? /* @__PURE__ */ o.createElement(f, {
|
|
186
|
+
symbol: b
|
|
187
|
+
}) : h && /* @__PURE__ */ o.createElement(f, {
|
|
188
|
+
symbol: h
|
|
189
|
+
}), /* @__PURE__ */ o.createElement(k, null, p), /* @__PURE__ */ o.createElement(z, c({}, e))));
|
|
190
|
+
}, ye = pe, Ce = (a) => {
|
|
191
|
+
var n = a, { className: e } = n, t = D(n, ["className"]);
|
|
192
|
+
const d = Z(), [g, s] = G(!1), {
|
|
193
|
+
parent: r,
|
|
194
|
+
route: u = "browse",
|
|
195
|
+
categories: p = [],
|
|
196
|
+
loading: h = !1
|
|
197
|
+
} = T(), b = _(), [l, w] = G(!1), { params: B } = d, O = ee(), { guideCategory: v, tag: R, phrase: j, sorting: A } = B;
|
|
198
|
+
if (ne(() => {
|
|
199
|
+
l && w(!1);
|
|
200
|
+
}, [v]), h || !r || !p.length)
|
|
201
|
+
return te(b, x(c({}, t), {
|
|
202
|
+
className: F(e, "humany-guide-category-dropdown")
|
|
203
|
+
}));
|
|
204
|
+
const y = p.find(($) => $.id === v) || r, N = y.activeSymbol || y.symbol;
|
|
205
|
+
return /* @__PURE__ */ o.createElement(i.Wrapper, x(c({}, t), {
|
|
206
|
+
"data-loading": !1,
|
|
207
|
+
"data-toggler-in-focus": g,
|
|
208
|
+
"aria-expanded": l,
|
|
209
|
+
isTabbing: O,
|
|
210
|
+
className: F(e, "humany-guide-category-dropdown")
|
|
211
|
+
}), l ? /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(i.TopItem, {
|
|
212
|
+
className: "humany-guide-category-dropdown-top-item"
|
|
213
|
+
}, /* @__PURE__ */ o.createElement(i.Link, {
|
|
214
|
+
className: "humany-guide-category-dropdown-link",
|
|
215
|
+
routeName: u,
|
|
216
|
+
params: oe({
|
|
217
|
+
tag: R,
|
|
218
|
+
phrase: j,
|
|
219
|
+
sorting: A,
|
|
220
|
+
guideCategory: r.id,
|
|
221
|
+
uriName: ae(r.title)
|
|
222
|
+
}),
|
|
223
|
+
selected: !1
|
|
224
|
+
}, r.symbol ? /* @__PURE__ */ o.createElement(f, {
|
|
225
|
+
symbol: r.symbol
|
|
226
|
+
}) : null, /* @__PURE__ */ o.createElement(k, null, r.title), /* @__PURE__ */ o.createElement(z, c({}, r))), /* @__PURE__ */ o.createElement(i.Toggler, {
|
|
227
|
+
onBlur: () => s(!1),
|
|
228
|
+
onFocus: () => s(!0),
|
|
229
|
+
className: "humany-guide-category-dropdown-toggler",
|
|
230
|
+
onClick: () => {
|
|
231
|
+
w(!l);
|
|
232
|
+
},
|
|
233
|
+
"aria-expanded": "true",
|
|
234
|
+
"aria-label": y.title
|
|
235
|
+
}, /* @__PURE__ */ o.createElement(f, {
|
|
236
|
+
size: 18,
|
|
237
|
+
symbol: { type: "Svg", content: "caret-up" }
|
|
238
|
+
}))), /* @__PURE__ */ o.createElement(i.List, {
|
|
239
|
+
className: "humany-guide-category-dropdown-open",
|
|
240
|
+
items: p,
|
|
241
|
+
renderItem: ($) => /* @__PURE__ */ o.createElement(ye, {
|
|
242
|
+
key: $.id,
|
|
243
|
+
item: $,
|
|
244
|
+
guideCategory: v
|
|
245
|
+
})
|
|
246
|
+
})) : /* @__PURE__ */ o.createElement(i.TopItem, {
|
|
247
|
+
className: "humany-guide-category-dropdown-top-item"
|
|
248
|
+
}, /* @__PURE__ */ o.createElement(i.Item, {
|
|
249
|
+
className: "humany-guide-category-dropdown-item",
|
|
250
|
+
onClick: () => {
|
|
251
|
+
w(!l);
|
|
252
|
+
},
|
|
253
|
+
selected: !1
|
|
254
|
+
}, N ? /* @__PURE__ */ o.createElement(f, {
|
|
255
|
+
symbol: N
|
|
256
|
+
}) : null, /* @__PURE__ */ o.createElement(k, null, y.title), /* @__PURE__ */ o.createElement(z, c({}, y))), /* @__PURE__ */ o.createElement(i.Toggler, {
|
|
257
|
+
onBlur: () => s(!1),
|
|
258
|
+
onFocus: () => s(!0),
|
|
259
|
+
className: "humany-guide-category-dropdown-toggler",
|
|
260
|
+
onClick: () => {
|
|
261
|
+
w(!l);
|
|
262
|
+
},
|
|
263
|
+
"aria-expanded": "false",
|
|
264
|
+
"aria-label": y.title
|
|
265
|
+
}, /* @__PURE__ */ o.createElement(f, {
|
|
266
|
+
size: 18,
|
|
267
|
+
symbol: { type: "Svg", content: "caret-down" }
|
|
268
|
+
}))));
|
|
269
|
+
};
|
|
270
|
+
export {
|
|
271
|
+
Ce as default
|
|
272
|
+
};
|
|
273
|
+
//# sourceMappingURL=guide-category-dropdown.4f6333ff.js.map
|
package/dist/{guide-category-dropdown.a0feefa0.js.map → guide-category-dropdown.4f6333ff.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"guide-category-dropdown.a0feefa0.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 {\n borderTabStyle,\n contentBox,\n Link as BaseLink,\n linkTabStyle,\n List as BaseList,\n list,\n loadingOpacity,\n Text,\n} from '@telia-ace/knowledge-widget-ui';\nimport styled, { css } from 'styled-components';\n\n// FUTURE TODO: Look into the typescript error when removing \": any\".\nconst Wrapper: any = styled.div<any>`\n ${loadingOpacity}\n ${contentBox}\n overflow: hidden;\n min-height: 50px;\n ${(p) =>\n p['data-toggler-in-focus'] &&\n p.isTabbing &&\n css`\n && {\n ${borderTabStyle}\n }\n `};\n`;\n\n// FUTURE TODO: Look into the typescript error when removing \": any\".\nconst Toggler: any = styled.button`\n background: none;\n border: 0;\n outline: 0;\n display: block;\n cursor: pointer;\n padding: 0;\n font-size: ${(p) => p.theme.fonts?.normal};\n text-align: end;\n flex: 1 0 auto;\n svg {\n path,\n line {\n stroke: ${(p) => p.theme.colors?.text};\n }\n }\n`;\n\n// FUTURE TODO: Look into the typescript error when removing \": any\".\nconst styling = css<{ selected: boolean }>`\n font-size: ${(p) => p.theme.fonts?.normal};\n text-align: left;\n text-align: left;\n text-decoration: none;\n font-weight: 300;\n display: flex;\n align-items: center;\n padding: ${(p) => p.theme.sizes?.small};\n padding-left: ${(p) => p.theme.sizes?.large};\n cursor: pointer;\n overflow: hidden;\n ${(p) =>\n p.selected\n ? css`\n border-left: 2px solid ${p.theme.colors?.primary};\n color: ${p.theme.colors?.primary};\n `\n : css`\n color: ${p.theme.colors?.text};\n `};\n\n span {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n i {\n margin-right: ${(p) => p.theme.sizes?.normal};\n font-size: ${(p) => p.theme.fonts?.medium};\n min-height: 1em;\n min-width: 1em;\n }\n`;\n\n// FUTURE TODO: Look into the typescript error when removing \": any\".\nconst Item: any = styled.div`\n ${styling}\n`;\n\nconst Link: any = styled(BaseLink)<any>`\n ${styling}\n &:focus {\n outline: none;\n }\n &:focus-visible {\n span {\n ${linkTabStyle};\n }\n }\n`;\n\n// FUTURE TODO: Look into the typescript error when removing \": any\".\nconst TopItem: any = styled.div`\n display: flex;\n justify-content: space-between;\n padding-right: ${(p) => p.theme.sizes?.large};\n min-height: 52px;\n white-space: nowrap;\n\n && {\n font-weight: normal;\n\n a {\n font-weight: normal;\n }\n }\n ${Item} {\n font-weight: normal;\n }\n`;\n\n// FUTURE TODO: Look into the typescript error when removing \": any\".\nconst List: any = styled(BaseList)<any>`\n ${list}\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-right: ${(p) => p.theme.sizes?.medium};\n margin-left: ${(p) => p.theme.sizes?.large};\n margin-bottom: 22px;\n border-left: ${(p) => p.theme.border};\n li {\n margin: 0 0 ${(p) => p.theme.sizes?.normal} -2px;\n }\n li:last-child {\n margin: 0 0 0 -2px;\n }\n flex-basis: 100%;\n border-width: 2px;\n`;\n\n// FUTURE TODO: Look into the typescript error when removing \": any\".\nconst MatchCount: any = styled(Text)`\n margin: 0 0 0 ${(p) => p.theme.sizes?.small};\n`;\n\nexport default {\n Wrapper,\n Toggler,\n List,\n Item,\n Link,\n TopItem,\n MatchCount,\n};\n","import { Category } from '@telia-ace/knowledge-widget-core';\nimport { useProperties } from '@telia-ace/knowledge-widget-ui';\nimport React from 'react';\nimport { GuideCategoryDropdownComponentProps } from './guide-category-dropdown-component';\nimport Styled from './guide-category-dropdown.styles';\n\nconst GuideCategoryDropdownMatchCount: React.FC<Category> = ({ matches }) => {\n const { showMatchCount = false } = useProperties<GuideCategoryDropdownComponentProps>();\n\n if (!showMatchCount || typeof matches === 'undefined') {\n return null;\n }\n\n return <Styled.MatchCount>({matches})</Styled.MatchCount>;\n};\n\nexport default GuideCategoryDropdownMatchCount;\n","import { initialRouteFallback } from '@telia-ace/knowledge-widget-component-utilities';\nimport { Category } from '@telia-ace/knowledge-widget-core';\nimport { SymbolBadge, Text, useHover, useProperties } from '@telia-ace/knowledge-widget-ui';\nimport React from 'react';\nimport { GuideCategoryDropdownComponentProps } from './guide-category-dropdown-component';\nimport GuideCategoryDropdownMatchCount from './guide-category-dropdown-match-count';\nimport Styled from './guide-category-dropdown.styles';\n\ntype Props = {\n item: Category;\n guideCategory: string;\n};\n\nconst GuideCategoryDropdownItem: React.FC<Props> = ({ item, guideCategory }) => {\n const {\n route = 'browse',\n categoryAriaLabel = '',\n activeCategoryAriaLabel = '',\n fallbackOnInitialRoute = false,\n } = useProperties<GuideCategoryDropdownComponentProps>();\n const [hovering, elem] = useHover();\n const { id, title, symbol, activeSymbol } = item;\n\n const selected = guideCategory === id;\n return (\n <li ref={elem as any}>\n <Styled.Link\n {...initialRouteFallback(item, route, fallbackOnInitialRoute, 'category')}\n aria-pressed={selected}\n aria-label={(selected ? activeCategoryAriaLabel : categoryAriaLabel).replace(\n '{{category}}',\n title\n )}\n className=\"humany-guide-category-dropdown-link\"\n aria-current={selected}\n selected={selected}\n >\n {(selected || hovering) && activeSymbol ? (\n <SymbolBadge symbol={activeSymbol} />\n ) : (\n symbol && <SymbolBadge symbol={symbol} />\n )}\n <Text>{title}</Text>\n <GuideCategoryDropdownMatchCount {...item} />\n </Styled.Link>\n </li>\n );\n};\n\nexport default GuideCategoryDropdownItem;\n","import { Category } from '@telia-ace/knowledge-widget-core';\nimport {\n createEmptyComponent,\n SymbolBadge,\n Text,\n useContainer,\n useIsTabbing,\n useProperties,\n useRouteData,\n} from '@telia-ace/knowledge-widget-ui';\nimport { appendClassNames, createParams, formatUrl } from '@telia-ace/widget-utilities';\nimport React, { useEffect, useState } from 'react';\nimport { GuideCategoryDropdownComponentProps } from './guide-category-dropdown-component';\nimport GuideCategoryDropdownItem from './guide-category-dropdown-item';\nimport GuideCategoryDropdownMatchCount from './guide-category-dropdown-match-count';\nimport Styled from './guide-category-dropdown.styles';\n\ntype Props = {\n className: string;\n};\n\nconst GuideCategoryDropdown: React.FC<Props> = ({ className, ...other }) => {\n const routeData = useRouteData();\n const [togglerFocus, setTogglerFocus] = useState(false);\n const {\n parent,\n route = 'browse',\n categories = [],\n loading = false,\n } = useProperties<GuideCategoryDropdownComponentProps>();\n const container = useContainer();\n const [isOpen, setIsOpen] = useState(false);\n const { params } = routeData;\n const isTabbing = useIsTabbing();\n const { guideCategory, tag, phrase, sorting } = params;\n\n useEffect(() => {\n if (isOpen) {\n setIsOpen(false);\n }\n }, [guideCategory]);\n\n if (loading || !parent || !categories.length) {\n return createEmptyComponent(container, {\n ...other,\n className: appendClassNames(className, 'humany-guide-category-dropdown'),\n });\n }\n\n const selected = categories.find((category) => category.id === guideCategory) || parent;\n const selectedSymbol = selected.activeSymbol || selected.symbol;\n\n return (\n <Styled.Wrapper\n {...other}\n data-loading={false}\n data-toggler-in-focus={togglerFocus}\n aria-expanded={isOpen}\n isTabbing={isTabbing}\n className={appendClassNames(className, 'humany-guide-category-dropdown')}\n >\n {isOpen ? (\n <>\n <Styled.TopItem className=\"humany-guide-category-dropdown-top-item\">\n <Styled.Link\n className=\"humany-guide-category-dropdown-link\"\n routeName={route}\n params={createParams({\n tag,\n phrase,\n sorting,\n guideCategory: parent.id,\n uriName: formatUrl(parent.title),\n })}\n selected={false}\n >\n {parent.symbol ? <SymbolBadge symbol={parent.symbol} /> : null}\n <Text>{parent.title}</Text>\n <GuideCategoryDropdownMatchCount {...parent} />\n </Styled.Link>\n <Styled.Toggler\n onBlur={() => setTogglerFocus(false)}\n onFocus={() => setTogglerFocus(true)}\n className=\"humany-guide-category-dropdown-toggler\"\n onClick={() => {\n setIsOpen(!isOpen);\n }}\n aria-expanded=\"true\"\n aria-label={selected.title}\n >\n <SymbolBadge size={18} symbol={{ type: 'Svg', content: 'caret-up' }} />\n </Styled.Toggler>\n </Styled.TopItem>\n <Styled.List\n className=\"humany-guide-category-dropdown-open\"\n items={categories}\n renderItem={(item: Category) => (\n <GuideCategoryDropdownItem\n key={item.id}\n item={item}\n guideCategory={guideCategory}\n />\n )}\n />\n </>\n ) : (\n <Styled.TopItem className=\"humany-guide-category-dropdown-top-item\">\n <Styled.Item\n className=\"humany-guide-category-dropdown-item\"\n onClick={() => {\n setIsOpen(!isOpen);\n }}\n selected={false}\n >\n {selectedSymbol ? <SymbolBadge symbol={selectedSymbol} /> : null}\n <Text>{selected.title}</Text>\n <GuideCategoryDropdownMatchCount {...selected} />\n </Styled.Item>\n <Styled.Toggler\n onBlur={() => setTogglerFocus(false)}\n onFocus={() => setTogglerFocus(true)}\n className=\"humany-guide-category-dropdown-toggler\"\n onClick={() => {\n setIsOpen(!isOpen);\n }}\n aria-expanded=\"false\"\n aria-label={selected.title}\n >\n <SymbolBadge size={18} symbol={{ type: 'Svg', content: 'caret-down' }} />\n </Styled.Toggler>\n </Styled.TopItem>\n )}\n </Styled.Wrapper>\n );\n};\n\nexport default GuideCategoryDropdown;\n"],"names":["Wrapper","styled","loadingOpacity","contentBox","p","css","borderTabStyle","Toggler","_a","styling","_b","_c","Item","Link","BaseLink","linkTabStyle","TopItem","List","BaseList","list","MatchCount","Text","Styled","GuideCategoryDropdownMatchCount","matches","showMatchCount","useProperties","GuideCategoryDropdownItem","item","guideCategory","route","categoryAriaLabel","activeCategoryAriaLabel","fallbackOnInitialRoute","hovering","elem","useHover","id","title","symbol","activeSymbol","selected","React","__spreadProps","__spreadValues","initialRouteFallback","SymbolBadge","GuideCategoryDropdown","className","other","__objRest","routeData","useRouteData","togglerFocus","setTogglerFocus","useState","parent","categories","loading","container","useContainer","isOpen","setIsOpen","params","isTabbing","useIsTabbing","tag","phrase","sorting","useEffect","createEmptyComponent","appendClassNames","category","selectedSymbol","createParams","formatUrl"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"guide-category-dropdown.4f6333ff.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 { css, Theme } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {\n borderTabStyle,\n contentBox,\n Link as BaseLink,\n linkTabStyle,\n List as BaseList,\n list,\n loadingOpacity,\n Text,\n} from '@telia-ace/knowledge-widget-ui';\n\n// FUTURE TODO: Look into the typescript error when removing \": any\".\nconst Wrapper: any = styled.div<any>`\n ${loadingOpacity}\n ${contentBox}\n overflow: hidden;\n min-height: 50px;\n ${(p) =>\n p['data-toggler-in-focus'] &&\n p.isTabbing &&\n css`\n && {\n ${borderTabStyle(p)}\n }\n `};\n`;\n\n// FUTURE TODO: Look into the typescript error when removing \": any\".\nconst Toggler: any = styled.button`\n background: none;\n border: 0;\n outline: 0;\n display: block;\n cursor: pointer;\n padding: 0;\n font-size: ${(p) => p.theme.fonts?.normal};\n text-align: end;\n flex: 1 0 auto;\n svg {\n path,\n line {\n stroke: ${(p) => p.theme.colors?.text};\n }\n }\n`;\n\nconst styling = (p: { theme: Theme; selected: boolean }) => css`\n font-size: ${p.theme.fonts?.normal};\n text-align: left;\n text-align: left;\n text-decoration: none;\n font-weight: 300;\n display: flex;\n align-items: center;\n padding: ${p.theme.sizes?.small};\n padding-left: ${p.theme.sizes?.large};\n cursor: pointer;\n overflow: hidden;\n ${p.selected\n ? css`\n border-left: 2px solid ${p.theme.colors?.primary};\n color: ${p.theme.colors?.primary};\n `\n : css`\n color: ${p.theme.colors?.text};\n `};\n\n span {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n i {\n margin-right: ${p.theme.sizes?.normal};\n font-size: ${p.theme.fonts?.medium};\n min-height: 1em;\n min-width: 1em;\n }\n`;\n\n// FUTURE TODO: Look into the typescript error when removing \": any\".\nconst Item: any = styled.div`\n ${styling}\n`;\n\nconst Link: any = styled(BaseLink)<any>`\n ${styling}\n &:focus {\n outline: none;\n }\n &:focus-visible {\n span {\n ${linkTabStyle};\n }\n }\n`;\n\n// FUTURE TODO: Look into the typescript error when removing \": any\".\nconst TopItem: any = styled.div`\n display: flex;\n justify-content: space-between;\n padding-right: ${(p) => p.theme.sizes?.large};\n min-height: 52px;\n white-space: nowrap;\n\n && {\n font-weight: normal;\n\n a {\n font-weight: normal;\n }\n }\n .humany-guide-category-dropdown-item {\n font-weight: normal;\n }\n`;\n\n// FUTURE TODO: Look into the typescript error when removing \": any\".\nconst List: any = styled(BaseList)<any>`\n ${list}\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-right: ${(p) => p.theme.sizes?.medium};\n margin-left: ${(p) => p.theme.sizes?.large};\n margin-bottom: 22px;\n border-left: ${(p) => p.theme.border};\n li {\n margin: 0 0 ${(p) => p.theme.sizes?.normal} -2px;\n }\n li:last-child {\n margin: 0 0 0 -2px;\n }\n flex-basis: 100%;\n border-width: 2px;\n`;\n\n// FUTURE TODO: Look into the typescript error when removing \": any\".\nconst MatchCount: any = styled(Text)`\n margin: 0 0 0 ${(p) => p.theme.sizes?.small};\n`;\n\nexport default {\n Wrapper,\n Toggler,\n List,\n Item,\n Link,\n TopItem,\n MatchCount,\n};\n","import { Category } from '@telia-ace/knowledge-widget-core';\nimport { useProperties } from '@telia-ace/knowledge-widget-ui';\nimport React from 'react';\nimport { GuideCategoryDropdownComponentProps } from './guide-category-dropdown-component';\nimport Styled from './guide-category-dropdown.styles';\n\nconst GuideCategoryDropdownMatchCount: React.FC<Category> = ({ matches }) => {\n const { showMatchCount = false } = useProperties<GuideCategoryDropdownComponentProps>();\n\n if (!showMatchCount || typeof matches === 'undefined') {\n return null;\n }\n\n return <Styled.MatchCount>({matches})</Styled.MatchCount>;\n};\n\nexport default GuideCategoryDropdownMatchCount;\n","import { initialRouteFallback } from '@telia-ace/knowledge-widget-component-utilities';\nimport { Category } from '@telia-ace/knowledge-widget-core';\nimport { SymbolBadge, Text, useHover, useProperties } from '@telia-ace/knowledge-widget-ui';\nimport React from 'react';\nimport { GuideCategoryDropdownComponentProps } from './guide-category-dropdown-component';\nimport GuideCategoryDropdownMatchCount from './guide-category-dropdown-match-count';\nimport Styled from './guide-category-dropdown.styles';\n\ntype Props = {\n item: Category;\n guideCategory: string;\n};\n\nconst GuideCategoryDropdownItem: React.FC<Props> = ({ item, guideCategory }) => {\n const {\n route = 'browse',\n categoryAriaLabel = '',\n activeCategoryAriaLabel = '',\n fallbackOnInitialRoute = false,\n } = useProperties<GuideCategoryDropdownComponentProps>();\n const [hovering, elem] = useHover();\n const { id, title, symbol, activeSymbol } = item;\n\n const selected = guideCategory === id;\n return (\n <li ref={elem as any}>\n <Styled.Link\n {...initialRouteFallback(item, route, fallbackOnInitialRoute, 'category')}\n aria-pressed={selected}\n aria-label={(selected ? activeCategoryAriaLabel : categoryAriaLabel).replace(\n '{{category}}',\n title\n )}\n className=\"humany-guide-category-dropdown-link\"\n aria-current={selected}\n selected={selected}\n >\n {(selected || hovering) && activeSymbol ? (\n <SymbolBadge symbol={activeSymbol} />\n ) : (\n symbol && <SymbolBadge symbol={symbol} />\n )}\n <Text>{title}</Text>\n <GuideCategoryDropdownMatchCount {...item} />\n </Styled.Link>\n </li>\n );\n};\n\nexport default GuideCategoryDropdownItem;\n","import { Category } from '@telia-ace/knowledge-widget-core';\nimport {\n createEmptyComponent,\n SymbolBadge,\n Text,\n useContainer,\n useIsTabbing,\n useProperties,\n useRouteData,\n} from '@telia-ace/knowledge-widget-ui';\nimport { appendClassNames, createParams, formatUrl } from '@telia-ace/widget-utilities';\nimport React, { useEffect, useState } from 'react';\nimport { GuideCategoryDropdownComponentProps } from './guide-category-dropdown-component';\nimport GuideCategoryDropdownItem from './guide-category-dropdown-item';\nimport GuideCategoryDropdownMatchCount from './guide-category-dropdown-match-count';\nimport Styled from './guide-category-dropdown.styles';\n\ntype Props = {\n className: string;\n};\n\nconst GuideCategoryDropdown: React.FC<Props> = ({ className, ...other }) => {\n const routeData = useRouteData();\n const [togglerFocus, setTogglerFocus] = useState(false);\n const {\n parent,\n route = 'browse',\n categories = [],\n loading = false,\n } = useProperties<GuideCategoryDropdownComponentProps>();\n const container = useContainer();\n const [isOpen, setIsOpen] = useState(false);\n const { params } = routeData;\n const isTabbing = useIsTabbing();\n const { guideCategory, tag, phrase, sorting } = params;\n\n useEffect(() => {\n if (isOpen) {\n setIsOpen(false);\n }\n }, [guideCategory]);\n\n if (loading || !parent || !categories.length) {\n return createEmptyComponent(container, {\n ...other,\n className: appendClassNames(className, 'humany-guide-category-dropdown'),\n });\n }\n\n const selected = categories.find((category) => category.id === guideCategory) || parent;\n const selectedSymbol = selected.activeSymbol || selected.symbol;\n\n return (\n <Styled.Wrapper\n {...other}\n data-loading={false}\n data-toggler-in-focus={togglerFocus}\n aria-expanded={isOpen}\n isTabbing={isTabbing}\n className={appendClassNames(className, 'humany-guide-category-dropdown')}\n >\n {isOpen ? (\n <>\n <Styled.TopItem className=\"humany-guide-category-dropdown-top-item\">\n <Styled.Link\n className=\"humany-guide-category-dropdown-link\"\n routeName={route}\n params={createParams({\n tag,\n phrase,\n sorting,\n guideCategory: parent.id,\n uriName: formatUrl(parent.title),\n })}\n selected={false}\n >\n {parent.symbol ? <SymbolBadge symbol={parent.symbol} /> : null}\n <Text>{parent.title}</Text>\n <GuideCategoryDropdownMatchCount {...parent} />\n </Styled.Link>\n <Styled.Toggler\n onBlur={() => setTogglerFocus(false)}\n onFocus={() => setTogglerFocus(true)}\n className=\"humany-guide-category-dropdown-toggler\"\n onClick={() => {\n setIsOpen(!isOpen);\n }}\n aria-expanded=\"true\"\n aria-label={selected.title}\n >\n <SymbolBadge size={18} symbol={{ type: 'Svg', content: 'caret-up' }} />\n </Styled.Toggler>\n </Styled.TopItem>\n <Styled.List\n className=\"humany-guide-category-dropdown-open\"\n items={categories}\n renderItem={(item: Category) => (\n <GuideCategoryDropdownItem\n key={item.id}\n item={item}\n guideCategory={guideCategory}\n />\n )}\n />\n </>\n ) : (\n <Styled.TopItem className=\"humany-guide-category-dropdown-top-item\">\n <Styled.Item\n className=\"humany-guide-category-dropdown-item\"\n onClick={() => {\n setIsOpen(!isOpen);\n }}\n selected={false}\n >\n {selectedSymbol ? <SymbolBadge symbol={selectedSymbol} /> : null}\n <Text>{selected.title}</Text>\n <GuideCategoryDropdownMatchCount {...selected} />\n </Styled.Item>\n <Styled.Toggler\n onBlur={() => setTogglerFocus(false)}\n onFocus={() => setTogglerFocus(true)}\n className=\"humany-guide-category-dropdown-toggler\"\n onClick={() => {\n setIsOpen(!isOpen);\n }}\n aria-expanded=\"false\"\n aria-label={selected.title}\n >\n <SymbolBadge size={18} symbol={{ type: 'Svg', content: 'caret-down' }} />\n </Styled.Toggler>\n </Styled.TopItem>\n )}\n </Styled.Wrapper>\n );\n};\n\nexport default GuideCategoryDropdown;\n"],"names":["Wrapper","styled","loadingOpacity","contentBox","p","css","borderTabStyle","Toggler","_a","styling","_b","_c","_d","_e","_f","_g","_h","Item","Link","BaseLink","linkTabStyle","TopItem","List","BaseList","list","MatchCount","Text","Styled","GuideCategoryDropdownMatchCount","matches","showMatchCount","useProperties","GuideCategoryDropdownMatchCount$1","GuideCategoryDropdownItem","item","guideCategory","route","categoryAriaLabel","activeCategoryAriaLabel","fallbackOnInitialRoute","hovering","elem","useHover","id","title","symbol","activeSymbol","selected","React","__spreadProps","__spreadValues","initialRouteFallback","SymbolBadge","GuideCategoryDropdownItem$1","GuideCategoryDropdown","className","other","__objRest","routeData","useRouteData","togglerFocus","setTogglerFocus","useState","parent","categories","loading","container","useContainer","isOpen","setIsOpen","params","isTabbing","useIsTabbing","tag","phrase","sorting","useEffect","createEmptyComponent","appendClassNames","category","selectedSymbol","createParams","formatUrl"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -17,7 +17,7 @@ const P = (e, n, a) => !a || a.length < 1 ? n : h(e, n, null, a), h = (e, n, a,
|
|
|
17
17
|
return C(
|
|
18
18
|
e,
|
|
19
19
|
"guide-category-dropdown",
|
|
20
|
-
import("./guide-category-dropdown.
|
|
20
|
+
import("./guide-category-dropdown.4f6333ff.js"),
|
|
21
21
|
(i) => {
|
|
22
22
|
const s = (t) => {
|
|
23
23
|
i.writeProperties({ loading: !0 }), i.actions.dispatch("fetch", { params: t }).then(() => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telia-ace/knowledge-widget-components-guide-category-dropdown",
|
|
3
|
-
"version": "1.0.24-next.
|
|
3
|
+
"version": "1.0.24-next.4",
|
|
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",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
},
|
|
27
27
|
"sideEffects": false,
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@telia-ace/knowledge-widget-component-utilities": "^1.0.24-next.
|
|
29
|
+
"@telia-ace/knowledge-widget-component-utilities": "^1.0.24-next.4",
|
|
30
30
|
"@telia-ace/knowledge-widget-core": "next",
|
|
31
31
|
"@telia-ace/knowledge-widget-types-grid": "next",
|
|
32
32
|
"@telia-ace/knowledge-widget-ui": "next",
|
|
@@ -34,17 +34,18 @@
|
|
|
34
34
|
"@webprovisions/platform": "^1.1.2"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
|
+
"@emotion/react": "^11.10.4",
|
|
38
|
+
"@emotion/styled": "^11.10.4",
|
|
37
39
|
"react": "^18.2.0",
|
|
38
|
-
"react-dom": "^18.2.0"
|
|
39
|
-
"styled-components": "^5.3.6"
|
|
40
|
+
"react-dom": "^18.2.0"
|
|
40
41
|
},
|
|
41
42
|
"devDependencies": {
|
|
43
|
+
"@emotion/react": "^11.10.4",
|
|
44
|
+
"@emotion/styled": "^11.10.4",
|
|
42
45
|
"@types/react": "^18.0.21",
|
|
43
46
|
"@types/react-dom": "^18.0.6",
|
|
44
|
-
"@types/styled-components": "^5.1.26",
|
|
45
47
|
"react": "^18.2.0",
|
|
46
|
-
"react-dom": "^18.2.0"
|
|
47
|
-
"styled-components": "^5.3.6"
|
|
48
|
+
"react-dom": "^18.2.0"
|
|
48
49
|
},
|
|
49
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "a56bbf9adaca1b07bf91566001480e28e81a8306"
|
|
50
51
|
}
|
|
@@ -1,287 +0,0 @@
|
|
|
1
|
-
var W = Object.defineProperty, H = Object.defineProperties;
|
|
2
|
-
var U = Object.getOwnPropertyDescriptors;
|
|
3
|
-
var b = Object.getOwnPropertySymbols;
|
|
4
|
-
var I = Object.prototype.hasOwnProperty, S = Object.prototype.propertyIsEnumerable;
|
|
5
|
-
var L = (e, t, a) => t in e ? W(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a, i = (e, t) => {
|
|
6
|
-
for (var a in t || (t = {}))
|
|
7
|
-
I.call(t, a) && L(e, a, t[a]);
|
|
8
|
-
if (b)
|
|
9
|
-
for (var a of b(t))
|
|
10
|
-
S.call(t, a) && L(e, a, t[a]);
|
|
11
|
-
return e;
|
|
12
|
-
}, w = (e, t) => H(e, U(t));
|
|
13
|
-
var F = (e, t) => {
|
|
14
|
-
var a = {};
|
|
15
|
-
for (var n in e)
|
|
16
|
-
I.call(e, n) && t.indexOf(n) < 0 && (a[n] = e[n]);
|
|
17
|
-
if (e != null && b)
|
|
18
|
-
for (var n of b(e))
|
|
19
|
-
t.indexOf(n) < 0 && S.call(e, n) && (a[n] = e[n]);
|
|
20
|
-
return a;
|
|
21
|
-
};
|
|
22
|
-
import { loadingOpacity as q, contentBox as J, borderTabStyle as K, Link as Q, linkTabStyle as V, List as X, list as Y, Text as E, useProperties as T, useHover as Z, SymbolBadge as u, useRouteData as _, useContainer as ee, useIsTabbing as te, createEmptyComponent as oe } from "@telia-ace/knowledge-widget-ui";
|
|
23
|
-
import { appendClassNames as D, createParams as ae, formatUrl as ne } from "@telia-ace/widget-utilities";
|
|
24
|
-
import o, { useState as B, useEffect as re } from "react";
|
|
25
|
-
import { initialRouteFallback as le } from "@telia-ace/knowledge-widget-component-utilities";
|
|
26
|
-
import c, { css as $ } from "styled-components";
|
|
27
|
-
const se = c.div`
|
|
28
|
-
${q}
|
|
29
|
-
${J}
|
|
30
|
-
overflow: hidden;
|
|
31
|
-
min-height: 50px;
|
|
32
|
-
${(e) => e["data-toggler-in-focus"] && e.isTabbing && $`
|
|
33
|
-
&& {
|
|
34
|
-
${K}
|
|
35
|
-
}
|
|
36
|
-
`};
|
|
37
|
-
`, ie = c.button`
|
|
38
|
-
background: none;
|
|
39
|
-
border: 0;
|
|
40
|
-
outline: 0;
|
|
41
|
-
display: block;
|
|
42
|
-
cursor: pointer;
|
|
43
|
-
padding: 0;
|
|
44
|
-
font-size: ${(e) => {
|
|
45
|
-
var t;
|
|
46
|
-
return (t = e.theme.fonts) == null ? void 0 : t.normal;
|
|
47
|
-
}};
|
|
48
|
-
text-align: end;
|
|
49
|
-
flex: 1 0 auto;
|
|
50
|
-
svg {
|
|
51
|
-
path,
|
|
52
|
-
line {
|
|
53
|
-
stroke: ${(e) => {
|
|
54
|
-
var t;
|
|
55
|
-
return (t = e.theme.colors) == null ? void 0 : t.text;
|
|
56
|
-
}};
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
`, M = $`
|
|
60
|
-
font-size: ${(e) => {
|
|
61
|
-
var t;
|
|
62
|
-
return (t = e.theme.fonts) == null ? void 0 : t.normal;
|
|
63
|
-
}};
|
|
64
|
-
text-align: left;
|
|
65
|
-
text-align: left;
|
|
66
|
-
text-decoration: none;
|
|
67
|
-
font-weight: 300;
|
|
68
|
-
display: flex;
|
|
69
|
-
align-items: center;
|
|
70
|
-
padding: ${(e) => {
|
|
71
|
-
var t;
|
|
72
|
-
return (t = e.theme.sizes) == null ? void 0 : t.small;
|
|
73
|
-
}};
|
|
74
|
-
padding-left: ${(e) => {
|
|
75
|
-
var t;
|
|
76
|
-
return (t = e.theme.sizes) == null ? void 0 : t.large;
|
|
77
|
-
}};
|
|
78
|
-
cursor: pointer;
|
|
79
|
-
overflow: hidden;
|
|
80
|
-
${(e) => {
|
|
81
|
-
var t, a, n;
|
|
82
|
-
return e.selected ? $`
|
|
83
|
-
border-left: 2px solid ${(t = e.theme.colors) == null ? void 0 : t.primary};
|
|
84
|
-
color: ${(a = e.theme.colors) == null ? void 0 : a.primary};
|
|
85
|
-
` : $`
|
|
86
|
-
color: ${(n = e.theme.colors) == null ? void 0 : n.text};
|
|
87
|
-
`;
|
|
88
|
-
}};
|
|
89
|
-
|
|
90
|
-
span {
|
|
91
|
-
overflow: hidden;
|
|
92
|
-
text-overflow: ellipsis;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
i {
|
|
96
|
-
margin-right: ${(e) => {
|
|
97
|
-
var t;
|
|
98
|
-
return (t = e.theme.sizes) == null ? void 0 : t.normal;
|
|
99
|
-
}};
|
|
100
|
-
font-size: ${(e) => {
|
|
101
|
-
var t;
|
|
102
|
-
return (t = e.theme.fonts) == null ? void 0 : t.medium;
|
|
103
|
-
}};
|
|
104
|
-
min-height: 1em;
|
|
105
|
-
min-width: 1em;
|
|
106
|
-
}
|
|
107
|
-
`, O = c.div`
|
|
108
|
-
${M}
|
|
109
|
-
`, ce = c(Q)`
|
|
110
|
-
${M}
|
|
111
|
-
&:focus {
|
|
112
|
-
outline: none;
|
|
113
|
-
}
|
|
114
|
-
&:focus-visible {
|
|
115
|
-
span {
|
|
116
|
-
${V};
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
`, me = c.div`
|
|
120
|
-
display: flex;
|
|
121
|
-
justify-content: space-between;
|
|
122
|
-
padding-right: ${(e) => {
|
|
123
|
-
var t;
|
|
124
|
-
return (t = e.theme.sizes) == null ? void 0 : t.large;
|
|
125
|
-
}};
|
|
126
|
-
min-height: 52px;
|
|
127
|
-
white-space: nowrap;
|
|
128
|
-
|
|
129
|
-
&& {
|
|
130
|
-
font-weight: normal;
|
|
131
|
-
|
|
132
|
-
a {
|
|
133
|
-
font-weight: normal;
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
${O} {
|
|
137
|
-
font-weight: normal;
|
|
138
|
-
}
|
|
139
|
-
`, de = c(X)`
|
|
140
|
-
${Y}
|
|
141
|
-
display: flex;
|
|
142
|
-
justify-content: center;
|
|
143
|
-
flex-direction: column;
|
|
144
|
-
margin-right: ${(e) => {
|
|
145
|
-
var t;
|
|
146
|
-
return (t = e.theme.sizes) == null ? void 0 : t.medium;
|
|
147
|
-
}};
|
|
148
|
-
margin-left: ${(e) => {
|
|
149
|
-
var t;
|
|
150
|
-
return (t = e.theme.sizes) == null ? void 0 : t.large;
|
|
151
|
-
}};
|
|
152
|
-
margin-bottom: 22px;
|
|
153
|
-
border-left: ${(e) => e.theme.border};
|
|
154
|
-
li {
|
|
155
|
-
margin: 0 0 ${(e) => {
|
|
156
|
-
var t;
|
|
157
|
-
return (t = e.theme.sizes) == null ? void 0 : t.normal;
|
|
158
|
-
}} -2px;
|
|
159
|
-
}
|
|
160
|
-
li:last-child {
|
|
161
|
-
margin: 0 0 0 -2px;
|
|
162
|
-
}
|
|
163
|
-
flex-basis: 100%;
|
|
164
|
-
border-width: 2px;
|
|
165
|
-
`, ge = c(E)`
|
|
166
|
-
margin: 0 0 0 ${(e) => {
|
|
167
|
-
var t;
|
|
168
|
-
return (t = e.theme.sizes) == null ? void 0 : t.small;
|
|
169
|
-
}};
|
|
170
|
-
`, s = {
|
|
171
|
-
Wrapper: se,
|
|
172
|
-
Toggler: ie,
|
|
173
|
-
List: de,
|
|
174
|
-
Item: O,
|
|
175
|
-
Link: ce,
|
|
176
|
-
TopItem: me,
|
|
177
|
-
MatchCount: ge
|
|
178
|
-
}, z = ({ matches: e }) => {
|
|
179
|
-
const { showMatchCount: t = !1 } = T();
|
|
180
|
-
return !t || typeof e == "undefined" ? null : /* @__PURE__ */ o.createElement(s.MatchCount, null, "(", e, ")");
|
|
181
|
-
}, ue = ({ item: e, guideCategory: t }) => {
|
|
182
|
-
const {
|
|
183
|
-
route: a = "browse",
|
|
184
|
-
categoryAriaLabel: n = "",
|
|
185
|
-
activeCategoryAriaLabel: x = "",
|
|
186
|
-
fallbackOnInitialRoute: k = !1
|
|
187
|
-
} = T(), [m, l] = Z(), { id: v, title: d, symbol: p, activeSymbol: f } = e, r = t === v;
|
|
188
|
-
return /* @__PURE__ */ o.createElement("li", {
|
|
189
|
-
ref: l
|
|
190
|
-
}, /* @__PURE__ */ o.createElement(s.Link, w(i({}, le(e, a, k, "category")), {
|
|
191
|
-
"aria-pressed": r,
|
|
192
|
-
"aria-label": (r ? x : n).replace(
|
|
193
|
-
"{{category}}",
|
|
194
|
-
d
|
|
195
|
-
),
|
|
196
|
-
className: "humany-guide-category-dropdown-link",
|
|
197
|
-
"aria-current": r,
|
|
198
|
-
selected: r
|
|
199
|
-
}), (r || m) && f ? /* @__PURE__ */ o.createElement(u, {
|
|
200
|
-
symbol: f
|
|
201
|
-
}) : p && /* @__PURE__ */ o.createElement(u, {
|
|
202
|
-
symbol: p
|
|
203
|
-
}), /* @__PURE__ */ o.createElement(E, null, d), /* @__PURE__ */ o.createElement(z, i({}, e))));
|
|
204
|
-
}, $e = (a) => {
|
|
205
|
-
var n = a, { className: e } = n, t = F(n, ["className"]);
|
|
206
|
-
const x = _(), [k, m] = B(!1), {
|
|
207
|
-
parent: l,
|
|
208
|
-
route: v = "browse",
|
|
209
|
-
categories: d = [],
|
|
210
|
-
loading: p = !1
|
|
211
|
-
} = T(), f = ee(), [r, y] = B(!1), { params: R } = x, G = te(), { guideCategory: C, tag: j, phrase: A, sorting: P } = R;
|
|
212
|
-
if (re(() => {
|
|
213
|
-
r && y(!1);
|
|
214
|
-
}, [C]), p || !l || !d.length)
|
|
215
|
-
return oe(f, w(i({}, t), {
|
|
216
|
-
className: D(e, "humany-guide-category-dropdown")
|
|
217
|
-
}));
|
|
218
|
-
const g = d.find((h) => h.id === C) || l, N = g.activeSymbol || g.symbol;
|
|
219
|
-
return /* @__PURE__ */ o.createElement(s.Wrapper, w(i({}, t), {
|
|
220
|
-
"data-loading": !1,
|
|
221
|
-
"data-toggler-in-focus": k,
|
|
222
|
-
"aria-expanded": r,
|
|
223
|
-
isTabbing: G,
|
|
224
|
-
className: D(e, "humany-guide-category-dropdown")
|
|
225
|
-
}), r ? /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(s.TopItem, {
|
|
226
|
-
className: "humany-guide-category-dropdown-top-item"
|
|
227
|
-
}, /* @__PURE__ */ o.createElement(s.Link, {
|
|
228
|
-
className: "humany-guide-category-dropdown-link",
|
|
229
|
-
routeName: v,
|
|
230
|
-
params: ae({
|
|
231
|
-
tag: j,
|
|
232
|
-
phrase: A,
|
|
233
|
-
sorting: P,
|
|
234
|
-
guideCategory: l.id,
|
|
235
|
-
uriName: ne(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, i({}, l))), /* @__PURE__ */ o.createElement(s.Toggler, {
|
|
241
|
-
onBlur: () => m(!1),
|
|
242
|
-
onFocus: () => m(!0),
|
|
243
|
-
className: "humany-guide-category-dropdown-toggler",
|
|
244
|
-
onClick: () => {
|
|
245
|
-
y(!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(s.List, {
|
|
253
|
-
className: "humany-guide-category-dropdown-open",
|
|
254
|
-
items: d,
|
|
255
|
-
renderItem: (h) => /* @__PURE__ */ o.createElement(ue, {
|
|
256
|
-
key: h.id,
|
|
257
|
-
item: h,
|
|
258
|
-
guideCategory: C
|
|
259
|
-
})
|
|
260
|
-
})) : /* @__PURE__ */ o.createElement(s.TopItem, {
|
|
261
|
-
className: "humany-guide-category-dropdown-top-item"
|
|
262
|
-
}, /* @__PURE__ */ o.createElement(s.Item, {
|
|
263
|
-
className: "humany-guide-category-dropdown-item",
|
|
264
|
-
onClick: () => {
|
|
265
|
-
y(!r);
|
|
266
|
-
},
|
|
267
|
-
selected: !1
|
|
268
|
-
}, N ? /* @__PURE__ */ o.createElement(u, {
|
|
269
|
-
symbol: N
|
|
270
|
-
}) : null, /* @__PURE__ */ o.createElement(E, null, g.title), /* @__PURE__ */ o.createElement(z, i({}, g))), /* @__PURE__ */ o.createElement(s.Toggler, {
|
|
271
|
-
onBlur: () => m(!1),
|
|
272
|
-
onFocus: () => m(!0),
|
|
273
|
-
className: "humany-guide-category-dropdown-toggler",
|
|
274
|
-
onClick: () => {
|
|
275
|
-
y(!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
|
-
$e as default
|
|
286
|
-
};
|
|
287
|
-
//# sourceMappingURL=guide-category-dropdown.a0feefa0.js.map
|