@telia-ace/knowledge-widget-components-guide-category-dropdown 1.1.1-rc.2 → 1.1.1-rc.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.
- package/guide-category-dropdown-2cb0c652.js +105 -0
- package/guide-category-dropdown-db6f2b55.mjs +301 -0
- package/index.js +1 -1
- package/index.mjs +76 -9
- package/package.json +6 -6
- package/guide-category-dropdown-6c4d5ab0.js +0 -105
- package/guide-category-dropdown-e6fca50c.mjs +0 -362
- package/index-373df3a5.js +0 -6
- package/index-5c9c2abf.mjs +0 -883
- package/index-77cc22b1.js +0 -1724
- package/index-a4f978a6.mjs +0 -7241
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),s=require("@telia-ace/knowledge-widget-ui"),b=require("@telia-ace/widget-utilities"),$=require("react"),I=require("@telia-ace/knowledge-widget-component-utilities"),w=require("@emotion/react"),g=require("@emotion/styled"),B=g.div`
|
|
2
|
+
${s.loadingOpacity}
|
|
3
|
+
${s.contentBox}
|
|
4
|
+
overflow: hidden;
|
|
5
|
+
min-height: 50px;
|
|
6
|
+
${e=>e["data-toggler-in-focus"]&&e.isTabbing&&w.css`
|
|
7
|
+
&& {
|
|
8
|
+
${s.borderTabStyle(e)}
|
|
9
|
+
}
|
|
10
|
+
`};
|
|
11
|
+
`,L=g.button`
|
|
12
|
+
background: none;
|
|
13
|
+
border: 0;
|
|
14
|
+
outline: 0;
|
|
15
|
+
display: block;
|
|
16
|
+
cursor: pointer;
|
|
17
|
+
padding: 0;
|
|
18
|
+
font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
|
|
19
|
+
text-align: end;
|
|
20
|
+
flex: 1 0 auto;
|
|
21
|
+
svg {
|
|
22
|
+
path,
|
|
23
|
+
line {
|
|
24
|
+
stroke: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
`,k=e=>{var t,m,u,i,n,y,l,h;return w.css`
|
|
28
|
+
font-size: ${(t=e.theme.fonts)==null?void 0:t.normal};
|
|
29
|
+
text-align: left;
|
|
30
|
+
text-align: left;
|
|
31
|
+
text-decoration: none;
|
|
32
|
+
font-weight: 300;
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
padding: ${(m=e.theme.sizes)==null?void 0:m.small};
|
|
36
|
+
padding-left: ${(u=e.theme.sizes)==null?void 0:u.large};
|
|
37
|
+
cursor: pointer;
|
|
38
|
+
overflow: hidden;
|
|
39
|
+
${e.selected?w.css`
|
|
40
|
+
border-left: 2px solid ${(i=e.theme.colors)==null?void 0:i.primary};
|
|
41
|
+
color: ${(n=e.theme.colors)==null?void 0:n.primary};
|
|
42
|
+
`:w.css`
|
|
43
|
+
color: ${(y=e.theme.colors)==null?void 0:y.text};
|
|
44
|
+
`};
|
|
45
|
+
|
|
46
|
+
span {
|
|
47
|
+
overflow: hidden;
|
|
48
|
+
text-overflow: ellipsis;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
i {
|
|
52
|
+
margin-right: ${(l=e.theme.sizes)==null?void 0:l.normal};
|
|
53
|
+
font-size: ${(h=e.theme.fonts)==null?void 0:h.medium};
|
|
54
|
+
min-height: 1em;
|
|
55
|
+
min-width: 1em;
|
|
56
|
+
}
|
|
57
|
+
`},q=g.div`
|
|
58
|
+
${k}
|
|
59
|
+
`,F=g(s.Link)`
|
|
60
|
+
${k}
|
|
61
|
+
&:focus {
|
|
62
|
+
outline: none;
|
|
63
|
+
}
|
|
64
|
+
&:focus-visible {
|
|
65
|
+
span {
|
|
66
|
+
${s.linkTabStyle};
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
`,D=g.div`
|
|
70
|
+
display: flex;
|
|
71
|
+
justify-content: space-between;
|
|
72
|
+
padding-right: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.large}};
|
|
73
|
+
min-height: 52px;
|
|
74
|
+
white-space: nowrap;
|
|
75
|
+
|
|
76
|
+
&& {
|
|
77
|
+
font-weight: normal;
|
|
78
|
+
|
|
79
|
+
a {
|
|
80
|
+
font-weight: normal;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
.humany-guide-category-dropdown-item {
|
|
84
|
+
font-weight: normal;
|
|
85
|
+
}
|
|
86
|
+
`,M=g(s.List)`
|
|
87
|
+
${s.list}
|
|
88
|
+
display: flex;
|
|
89
|
+
justify-content: center;
|
|
90
|
+
flex-direction: column;
|
|
91
|
+
margin-right: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.medium}};
|
|
92
|
+
margin-left: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.large}};
|
|
93
|
+
margin-bottom: 22px;
|
|
94
|
+
border-left: ${e=>e.theme.border};
|
|
95
|
+
li {
|
|
96
|
+
margin: 0 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}} -2px;
|
|
97
|
+
}
|
|
98
|
+
li:last-child {
|
|
99
|
+
margin: 0 0 0 -2px;
|
|
100
|
+
}
|
|
101
|
+
flex-basis: 100%;
|
|
102
|
+
border-width: 2px;
|
|
103
|
+
`,O=g(s.Text)`
|
|
104
|
+
margin: 0 0 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}};
|
|
105
|
+
`,a={Wrapper:B,Toggler:L,List:M,Item:q,Link:F,TopItem:D,MatchCount:O},C=({matches:e})=>{const{showMatchCount:t=!1}=s.useProperties();return!t||typeof e>"u"?null:o.jsxs(a.MatchCount,{children:["(",e,")"]})},P=({item:e,guideCategory:t})=>{const{route:m="browse",categoryAriaLabel:u="",activeCategoryAriaLabel:i="",fallbackOnInitialRoute:n=!1}=s.useProperties(),[y,l]=s.useHover(),{id:h,title:f,symbol:r,activeSymbol:d}=e,c=t===h;return o.jsx("li",{ref:l,children:o.jsxs(a.Link,{...I.initialRouteFallback(e,m,n,"category"),"aria-pressed":c,"aria-label":(c?i:u).replace("{{category}}",f),className:"humany-guide-category-dropdown-link","aria-current":c,selected:c,children:[(c||y)&&d?o.jsx(s.SymbolBadge,{symbol:d}):r&&o.jsx(s.SymbolBadge,{symbol:r}),o.jsx(s.Text,{children:f}),o.jsx(C,{...e})]})})},R=({className:e,...t})=>{const m=s.useRouteData(),[u,i]=$.useState(!1),{parent:n,route:y="browse",categories:l=[],loading:h=!1}=s.useProperties(),f=s.useContainer(),[r,d]=$.useState(!1),{params:c}=m,v=s.useIsTabbing(),{guideCategory:j,tag:T,phrase:z,sorting:N}=c;if($.useEffect(()=>{r&&d(!1)},[j]),h||!n||!l.length)return s.createEmptyComponent(f,{...t,className:b.appendClassNames(e,"humany-guide-category-dropdown")});const p=l.find(x=>x.id===j)||n,S=p.activeSymbol||p.symbol;return o.jsx(a.Wrapper,{...t,"data-loading":!1,"data-toggler-in-focus":u,"aria-expanded":r,isTabbing:v,className:b.appendClassNames(e,"humany-guide-category-dropdown"),children:r?o.jsxs(o.Fragment,{children:[o.jsxs(a.TopItem,{className:"humany-guide-category-dropdown-top-item",children:[o.jsxs(a.Link,{className:"humany-guide-category-dropdown-link",routeName:y,params:b.createParams({tag:T,phrase:z,sorting:N,guideCategory:n.id,uriName:b.formatUrl(n.title)}),selected:!1,children:[n.symbol?o.jsx(s.SymbolBadge,{symbol:n.symbol}):null,o.jsx(s.Text,{children:n.title}),o.jsx(C,{...n})]}),o.jsx(a.Toggler,{onBlur:()=>i(!1),onFocus:()=>i(!0),className:"humany-guide-category-dropdown-toggler",onClick:()=>{d(!r)},"aria-expanded":"true","aria-label":p.title,children:o.jsx(s.SymbolBadge,{size:18,symbol:{type:"Svg",content:"caret-up"}})})]}),o.jsx(a.List,{className:"humany-guide-category-dropdown-open",items:l,renderItem:x=>o.jsx(P,{item:x,guideCategory:j},x.id)})]}):o.jsxs(a.TopItem,{className:"humany-guide-category-dropdown-top-item",children:[o.jsxs(a.Item,{className:"humany-guide-category-dropdown-item",onClick:()=>{d(!r)},selected:!1,children:[S?o.jsx(s.SymbolBadge,{symbol:S}):null,o.jsx(s.Text,{children:p.title}),o.jsx(C,{...p})]}),o.jsx(a.Toggler,{onBlur:()=>i(!1),onFocus:()=>i(!0),className:"humany-guide-category-dropdown-toggler",onClick:()=>{d(!r)},"aria-expanded":"false","aria-label":p.title,children:o.jsx(s.SymbolBadge,{size:18,symbol:{type:"Svg",content:"caret-down"}})})]})})};exports.default=R;
|
|
@@ -0,0 +1,301 @@
|
|
|
1
|
+
import { jsxs as c, jsx as o, Fragment as j } from "react/jsx-runtime";
|
|
2
|
+
import { loadingOpacity as B, contentBox as M, borderTabStyle as O, Link as G, linkTabStyle as R, List as A, list as E, Text as $, useProperties as C, useHover as P, SymbolBadge as y, useRouteData as W, useContainer as H, useIsTabbing as U, createEmptyComponent as q } from "@telia-ace/knowledge-widget-ui";
|
|
3
|
+
import { appendClassNames as T, createParams as J, formatUrl as K } from "@telia-ace/widget-utilities";
|
|
4
|
+
import { useState as N, useEffect as Q } from "react";
|
|
5
|
+
import { initialRouteFallback as V } from "@telia-ace/knowledge-widget-component-utilities";
|
|
6
|
+
import { css as x } from "@emotion/react";
|
|
7
|
+
import m from "@emotion/styled";
|
|
8
|
+
const X = m.div`
|
|
9
|
+
${B}
|
|
10
|
+
${M}
|
|
11
|
+
overflow: hidden;
|
|
12
|
+
min-height: 50px;
|
|
13
|
+
${(e) => e["data-toggler-in-focus"] && e.isTabbing && x`
|
|
14
|
+
&& {
|
|
15
|
+
${O(e)}
|
|
16
|
+
}
|
|
17
|
+
`};
|
|
18
|
+
`, Y = m.button`
|
|
19
|
+
background: none;
|
|
20
|
+
border: 0;
|
|
21
|
+
outline: 0;
|
|
22
|
+
display: block;
|
|
23
|
+
cursor: pointer;
|
|
24
|
+
padding: 0;
|
|
25
|
+
font-size: ${(e) => {
|
|
26
|
+
var t;
|
|
27
|
+
return (t = e.theme.fonts) == null ? void 0 : t.normal;
|
|
28
|
+
}};
|
|
29
|
+
text-align: end;
|
|
30
|
+
flex: 1 0 auto;
|
|
31
|
+
svg {
|
|
32
|
+
path,
|
|
33
|
+
line {
|
|
34
|
+
stroke: ${(e) => {
|
|
35
|
+
var t;
|
|
36
|
+
return (t = e.theme.colors) == null ? void 0 : t.text;
|
|
37
|
+
}};
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
`, L = (e) => {
|
|
41
|
+
var t, g, u, r, n, p, s, h;
|
|
42
|
+
return x`
|
|
43
|
+
font-size: ${(t = e.theme.fonts) == null ? void 0 : t.normal};
|
|
44
|
+
text-align: left;
|
|
45
|
+
text-align: left;
|
|
46
|
+
text-decoration: none;
|
|
47
|
+
font-weight: 300;
|
|
48
|
+
display: flex;
|
|
49
|
+
align-items: center;
|
|
50
|
+
padding: ${(g = e.theme.sizes) == null ? void 0 : g.small};
|
|
51
|
+
padding-left: ${(u = e.theme.sizes) == null ? void 0 : u.large};
|
|
52
|
+
cursor: pointer;
|
|
53
|
+
overflow: hidden;
|
|
54
|
+
${e.selected ? x`
|
|
55
|
+
border-left: 2px solid ${(r = e.theme.colors) == null ? void 0 : r.primary};
|
|
56
|
+
color: ${(n = e.theme.colors) == null ? void 0 : n.primary};
|
|
57
|
+
` : x`
|
|
58
|
+
color: ${(p = e.theme.colors) == null ? void 0 : p.text};
|
|
59
|
+
`};
|
|
60
|
+
|
|
61
|
+
span {
|
|
62
|
+
overflow: hidden;
|
|
63
|
+
text-overflow: ellipsis;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
i {
|
|
67
|
+
margin-right: ${(s = e.theme.sizes) == null ? void 0 : s.normal};
|
|
68
|
+
font-size: ${(h = e.theme.fonts) == null ? void 0 : h.medium};
|
|
69
|
+
min-height: 1em;
|
|
70
|
+
min-width: 1em;
|
|
71
|
+
}
|
|
72
|
+
`;
|
|
73
|
+
}, Z = m.div`
|
|
74
|
+
${L}
|
|
75
|
+
`, _ = m(G)`
|
|
76
|
+
${L}
|
|
77
|
+
&:focus {
|
|
78
|
+
outline: none;
|
|
79
|
+
}
|
|
80
|
+
&:focus-visible {
|
|
81
|
+
span {
|
|
82
|
+
${R};
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
`, ee = m.div`
|
|
86
|
+
display: flex;
|
|
87
|
+
justify-content: space-between;
|
|
88
|
+
padding-right: ${(e) => {
|
|
89
|
+
var t;
|
|
90
|
+
return (t = e.theme.sizes) == null ? void 0 : t.large;
|
|
91
|
+
}};
|
|
92
|
+
min-height: 52px;
|
|
93
|
+
white-space: nowrap;
|
|
94
|
+
|
|
95
|
+
&& {
|
|
96
|
+
font-weight: normal;
|
|
97
|
+
|
|
98
|
+
a {
|
|
99
|
+
font-weight: normal;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
.humany-guide-category-dropdown-item {
|
|
103
|
+
font-weight: normal;
|
|
104
|
+
}
|
|
105
|
+
`, te = m(A)`
|
|
106
|
+
${E}
|
|
107
|
+
display: flex;
|
|
108
|
+
justify-content: center;
|
|
109
|
+
flex-direction: column;
|
|
110
|
+
margin-right: ${(e) => {
|
|
111
|
+
var t;
|
|
112
|
+
return (t = e.theme.sizes) == null ? void 0 : t.medium;
|
|
113
|
+
}};
|
|
114
|
+
margin-left: ${(e) => {
|
|
115
|
+
var t;
|
|
116
|
+
return (t = e.theme.sizes) == null ? void 0 : t.large;
|
|
117
|
+
}};
|
|
118
|
+
margin-bottom: 22px;
|
|
119
|
+
border-left: ${(e) => e.theme.border};
|
|
120
|
+
li {
|
|
121
|
+
margin: 0 0 ${(e) => {
|
|
122
|
+
var t;
|
|
123
|
+
return (t = e.theme.sizes) == null ? void 0 : t.normal;
|
|
124
|
+
}} -2px;
|
|
125
|
+
}
|
|
126
|
+
li:last-child {
|
|
127
|
+
margin: 0 0 0 -2px;
|
|
128
|
+
}
|
|
129
|
+
flex-basis: 100%;
|
|
130
|
+
border-width: 2px;
|
|
131
|
+
`, oe = m($)`
|
|
132
|
+
margin: 0 0 0 ${(e) => {
|
|
133
|
+
var t;
|
|
134
|
+
return (t = e.theme.sizes) == null ? void 0 : t.small;
|
|
135
|
+
}};
|
|
136
|
+
`, a = {
|
|
137
|
+
Wrapper: X,
|
|
138
|
+
Toggler: Y,
|
|
139
|
+
List: te,
|
|
140
|
+
Item: Z,
|
|
141
|
+
Link: _,
|
|
142
|
+
TopItem: ee,
|
|
143
|
+
MatchCount: oe
|
|
144
|
+
}, v = ({ matches: e }) => {
|
|
145
|
+
const { showMatchCount: t = !1 } = C();
|
|
146
|
+
return !t || typeof e > "u" ? null : /* @__PURE__ */ c(a.MatchCount, { children: [
|
|
147
|
+
"(",
|
|
148
|
+
e,
|
|
149
|
+
")"
|
|
150
|
+
] });
|
|
151
|
+
}, ne = ({ item: e, guideCategory: t }) => {
|
|
152
|
+
const {
|
|
153
|
+
route: g = "browse",
|
|
154
|
+
categoryAriaLabel: u = "",
|
|
155
|
+
activeCategoryAriaLabel: r = "",
|
|
156
|
+
fallbackOnInitialRoute: n = !1
|
|
157
|
+
} = C(), [p, s] = P(), { id: h, title: b, symbol: i, activeSymbol: l } = e, d = t === h;
|
|
158
|
+
return /* @__PURE__ */ o("li", { ref: s, children: /* @__PURE__ */ c(
|
|
159
|
+
a.Link,
|
|
160
|
+
{
|
|
161
|
+
...V(e, g, n, "category"),
|
|
162
|
+
"aria-pressed": d,
|
|
163
|
+
"aria-label": (d ? r : u).replace(
|
|
164
|
+
"{{category}}",
|
|
165
|
+
b
|
|
166
|
+
),
|
|
167
|
+
className: "humany-guide-category-dropdown-link",
|
|
168
|
+
"aria-current": d,
|
|
169
|
+
selected: d,
|
|
170
|
+
children: [
|
|
171
|
+
(d || p) && l ? /* @__PURE__ */ o(y, { symbol: l }) : i && /* @__PURE__ */ o(y, { symbol: i }),
|
|
172
|
+
/* @__PURE__ */ o($, { children: b }),
|
|
173
|
+
/* @__PURE__ */ o(v, { ...e })
|
|
174
|
+
]
|
|
175
|
+
}
|
|
176
|
+
) });
|
|
177
|
+
}, me = ({ className: e, ...t }) => {
|
|
178
|
+
const g = W(), [u, r] = N(!1), {
|
|
179
|
+
parent: n,
|
|
180
|
+
route: p = "browse",
|
|
181
|
+
categories: s = [],
|
|
182
|
+
loading: h = !1
|
|
183
|
+
} = C(), b = H(), [i, l] = N(!1), { params: d } = g, I = U(), { guideCategory: k, tag: S, phrase: F, sorting: D } = d;
|
|
184
|
+
if (Q(() => {
|
|
185
|
+
i && l(!1);
|
|
186
|
+
}, [k]), h || !n || !s.length)
|
|
187
|
+
return q(b, {
|
|
188
|
+
...t,
|
|
189
|
+
className: T(e, "humany-guide-category-dropdown")
|
|
190
|
+
});
|
|
191
|
+
const f = s.find((w) => w.id === k) || n, z = f.activeSymbol || f.symbol;
|
|
192
|
+
return /* @__PURE__ */ o(
|
|
193
|
+
a.Wrapper,
|
|
194
|
+
{
|
|
195
|
+
...t,
|
|
196
|
+
"data-loading": !1,
|
|
197
|
+
"data-toggler-in-focus": u,
|
|
198
|
+
"aria-expanded": i,
|
|
199
|
+
isTabbing: I,
|
|
200
|
+
className: T(e, "humany-guide-category-dropdown"),
|
|
201
|
+
children: i ? /* @__PURE__ */ c(j, { children: [
|
|
202
|
+
/* @__PURE__ */ c(a.TopItem, { className: "humany-guide-category-dropdown-top-item", children: [
|
|
203
|
+
/* @__PURE__ */ c(
|
|
204
|
+
a.Link,
|
|
205
|
+
{
|
|
206
|
+
className: "humany-guide-category-dropdown-link",
|
|
207
|
+
routeName: p,
|
|
208
|
+
params: J({
|
|
209
|
+
tag: S,
|
|
210
|
+
phrase: F,
|
|
211
|
+
sorting: D,
|
|
212
|
+
guideCategory: n.id,
|
|
213
|
+
uriName: K(n.title)
|
|
214
|
+
}),
|
|
215
|
+
selected: !1,
|
|
216
|
+
children: [
|
|
217
|
+
n.symbol ? /* @__PURE__ */ o(y, { symbol: n.symbol }) : null,
|
|
218
|
+
/* @__PURE__ */ o($, { children: n.title }),
|
|
219
|
+
/* @__PURE__ */ o(v, { ...n })
|
|
220
|
+
]
|
|
221
|
+
}
|
|
222
|
+
),
|
|
223
|
+
/* @__PURE__ */ o(
|
|
224
|
+
a.Toggler,
|
|
225
|
+
{
|
|
226
|
+
onBlur: () => r(!1),
|
|
227
|
+
onFocus: () => r(!0),
|
|
228
|
+
className: "humany-guide-category-dropdown-toggler",
|
|
229
|
+
onClick: () => {
|
|
230
|
+
l(!i);
|
|
231
|
+
},
|
|
232
|
+
"aria-expanded": "true",
|
|
233
|
+
"aria-label": f.title,
|
|
234
|
+
children: /* @__PURE__ */ o(
|
|
235
|
+
y,
|
|
236
|
+
{
|
|
237
|
+
size: 18,
|
|
238
|
+
symbol: { type: "Svg", content: "caret-up" }
|
|
239
|
+
}
|
|
240
|
+
)
|
|
241
|
+
}
|
|
242
|
+
)
|
|
243
|
+
] }),
|
|
244
|
+
/* @__PURE__ */ o(
|
|
245
|
+
a.List,
|
|
246
|
+
{
|
|
247
|
+
className: "humany-guide-category-dropdown-open",
|
|
248
|
+
items: s,
|
|
249
|
+
renderItem: (w) => /* @__PURE__ */ o(
|
|
250
|
+
ne,
|
|
251
|
+
{
|
|
252
|
+
item: w,
|
|
253
|
+
guideCategory: k
|
|
254
|
+
},
|
|
255
|
+
w.id
|
|
256
|
+
)
|
|
257
|
+
}
|
|
258
|
+
)
|
|
259
|
+
] }) : /* @__PURE__ */ c(a.TopItem, { className: "humany-guide-category-dropdown-top-item", children: [
|
|
260
|
+
/* @__PURE__ */ c(
|
|
261
|
+
a.Item,
|
|
262
|
+
{
|
|
263
|
+
className: "humany-guide-category-dropdown-item",
|
|
264
|
+
onClick: () => {
|
|
265
|
+
l(!i);
|
|
266
|
+
},
|
|
267
|
+
selected: !1,
|
|
268
|
+
children: [
|
|
269
|
+
z ? /* @__PURE__ */ o(y, { symbol: z }) : null,
|
|
270
|
+
/* @__PURE__ */ o($, { children: f.title }),
|
|
271
|
+
/* @__PURE__ */ o(v, { ...f })
|
|
272
|
+
]
|
|
273
|
+
}
|
|
274
|
+
),
|
|
275
|
+
/* @__PURE__ */ o(
|
|
276
|
+
a.Toggler,
|
|
277
|
+
{
|
|
278
|
+
onBlur: () => r(!1),
|
|
279
|
+
onFocus: () => r(!0),
|
|
280
|
+
className: "humany-guide-category-dropdown-toggler",
|
|
281
|
+
onClick: () => {
|
|
282
|
+
l(!i);
|
|
283
|
+
},
|
|
284
|
+
"aria-expanded": "false",
|
|
285
|
+
"aria-label": f.title,
|
|
286
|
+
children: /* @__PURE__ */ o(
|
|
287
|
+
y,
|
|
288
|
+
{
|
|
289
|
+
size: 18,
|
|
290
|
+
symbol: { type: "Svg", content: "caret-down" }
|
|
291
|
+
}
|
|
292
|
+
)
|
|
293
|
+
}
|
|
294
|
+
)
|
|
295
|
+
] })
|
|
296
|
+
}
|
|
297
|
+
);
|
|
298
|
+
};
|
|
299
|
+
export {
|
|
300
|
+
me as default
|
|
301
|
+
};
|
package/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const
|
|
1
|
+
"use strict";const g=require("@telia-ace/knowledge-data-client"),l=require("@telia-ace/knowledge-widget-core"),v=require("@telia-ace/knowledge-widget-ui"),D=(e,a,n)=>!n||n.length<1?a:h(e,a,null,n),h=(e,a,n,o)=>{if(e.find(s=>s.id===o)||!o)return n||a;for(let s=0;s<e.length;s+=1){const t=e[s];if(t.items){const r=h(t.items,a,t,o);if(r)return r}}},P=e=>e.matches&&e.matches>0,q=e=>{const{events:a}=e.get("$widget"),[n,o]=l.createEventSubscriber(a);return v.createReactComponent(e,"guide-category-dropdown",Promise.resolve().then(()=>require("./guide-category-dropdown-2cb0c652.js")),i=>{const s=t=>{i.writeProperties({loading:!0}),i.actions.dispatch("fetch",{params:t}).then(()=>{i.writeProperties({loading:!1})})};i.actions.create("fetch",({parent:t,categories:r})=>{i.writeProperties({parent:t,categories:r,loading:!1})}),e.getAsync("router").then(t=>{const{params:r}=t.getRouteData();s(r)}),n("router:changed",(t,{current:r})=>{s(r.routeData.params)})}).then(()=>l.extendComponent(e,"guide-category-dropdown",i=>{i.actions.watch("guide-category-dropdown.fetch",(s,t)=>{const{matchFilters:r={search:!1,tag:!1},rootCategoryHeader:f}=i.properties(),{params:{phrase:p,guideCategory:w,tag:m}}=s;return g.DataClient.getInstance(e).then(b=>b.fetch(g.DataType.GuideCategories,{searchPhrase:r.search?p:void 0,tagId:r.tag?m:void 0}).then(({categories:d,matches:C})=>{var u;const c=D(d,{matches:C,id:"0",title:f,items:d},w);return t({parent:c,categories:(u=c==null?void 0:c.items)==null?void 0:u.filter(P)})}))})})).then(()=>{o()})};module.exports=q;
|
package/index.mjs
CHANGED
|
@@ -1,11 +1,78 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import "
|
|
3
|
-
import "@
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { DataClient as b, DataType as v } from "@telia-ace/knowledge-data-client";
|
|
2
|
+
import { createEventSubscriber as C, extendComponent as D } from "@telia-ace/knowledge-widget-core";
|
|
3
|
+
import { createReactComponent as P } from "@telia-ace/knowledge-widget-ui";
|
|
4
|
+
const y = (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;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}, R = (e) => e.matches && e.matches > 0, G = (e) => {
|
|
16
|
+
const { events: n } = e.get("$widget"), [a, o] = C(n);
|
|
17
|
+
return P(
|
|
18
|
+
e,
|
|
19
|
+
"guide-category-dropdown",
|
|
20
|
+
import("./guide-category-dropdown-db6f2b55.mjs"),
|
|
21
|
+
(i) => {
|
|
22
|
+
const s = (t) => {
|
|
23
|
+
i.writeProperties({ loading: !0 }), i.actions.dispatch("fetch", { params: t }).then(() => {
|
|
24
|
+
i.writeProperties({ loading: !1 });
|
|
25
|
+
});
|
|
26
|
+
};
|
|
27
|
+
i.actions.create("fetch", ({ parent: t, categories: r }) => {
|
|
28
|
+
i.writeProperties({
|
|
29
|
+
parent: t,
|
|
30
|
+
categories: r,
|
|
31
|
+
loading: !1
|
|
32
|
+
});
|
|
33
|
+
}), e.getAsync("router").then((t) => {
|
|
34
|
+
const { params: r } = t.getRouteData();
|
|
35
|
+
s(r);
|
|
36
|
+
}), a("router:changed", (t, { current: r }) => {
|
|
37
|
+
s(r.routeData.params);
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
).then(() => D(e, "guide-category-dropdown", (i) => {
|
|
41
|
+
i.actions.watch("guide-category-dropdown.fetch", (s, t) => {
|
|
42
|
+
const {
|
|
43
|
+
matchFilters: r = {
|
|
44
|
+
search: !1,
|
|
45
|
+
tag: !1
|
|
46
|
+
},
|
|
47
|
+
rootCategoryHeader: u
|
|
48
|
+
} = i.properties(), {
|
|
49
|
+
params: { phrase: l, guideCategory: g, tag: p }
|
|
50
|
+
} = s;
|
|
51
|
+
return b.getInstance(e).then((m) => m.fetch(v.GuideCategories, {
|
|
52
|
+
searchPhrase: r.search ? l : void 0,
|
|
53
|
+
tagId: r.tag ? p : void 0
|
|
54
|
+
}).then(({ categories: d, matches: w }) => {
|
|
55
|
+
var f;
|
|
56
|
+
const c = y(
|
|
57
|
+
d,
|
|
58
|
+
{
|
|
59
|
+
matches: w,
|
|
60
|
+
id: "0",
|
|
61
|
+
title: u,
|
|
62
|
+
items: d
|
|
63
|
+
},
|
|
64
|
+
g
|
|
65
|
+
);
|
|
66
|
+
return t({
|
|
67
|
+
parent: c,
|
|
68
|
+
categories: (f = c == null ? void 0 : c.items) == null ? void 0 : f.filter(R)
|
|
69
|
+
});
|
|
70
|
+
}));
|
|
71
|
+
});
|
|
72
|
+
})).then(() => {
|
|
73
|
+
o();
|
|
74
|
+
});
|
|
75
|
+
};
|
|
9
76
|
export {
|
|
10
|
-
|
|
77
|
+
G as default
|
|
11
78
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telia-ace/knowledge-widget-components-guide-category-dropdown",
|
|
3
|
-
"version": "1.1.1-rc.
|
|
3
|
+
"version": "1.1.1-rc.4",
|
|
4
4
|
"main": "./index.js",
|
|
5
5
|
"types": "./index.d.ts",
|
|
6
6
|
"exports": {
|
|
@@ -10,11 +10,11 @@
|
|
|
10
10
|
}
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@telia-ace/knowledge-widget-core": "^1.1.1-rc.
|
|
14
|
-
"@telia-ace/knowledge-widget-component-utilities": "^1.1.1-rc.
|
|
15
|
-
"@telia-ace/knowledge-widget-ui": "^1.1.1-rc.
|
|
16
|
-
"@telia-ace/widget-utilities": "^1.1.1-rc.
|
|
17
|
-
"@telia-ace/knowledge-data-client": "^1.1.1-rc.
|
|
13
|
+
"@telia-ace/knowledge-widget-core": "^1.1.1-rc.4",
|
|
14
|
+
"@telia-ace/knowledge-widget-component-utilities": "^1.1.1-rc.4",
|
|
15
|
+
"@telia-ace/knowledge-widget-ui": "^1.1.1-rc.4",
|
|
16
|
+
"@telia-ace/widget-utilities": "^1.1.1-rc.4",
|
|
17
|
+
"@telia-ace/knowledge-data-client": "^1.1.1-rc.4",
|
|
18
18
|
"@webprovisions/platform": "^1.1.4"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),C=require("@emotion/react"),o=require("./index-77cc22b1.js"),x=require("react");require("react-dom");require("react-transition-group");const j=require("@emotion/styled");require("react-router-dom");const z=(e,t)=>e.get("seoConfiguration")?s.jsx(o.Empty,{...t}):null,N=()=>x.useContext(o.ComponentPropertyContext),L=()=>{const[e,t]=x.useState(!1),d=x.useRef(),g=x.useCallback(()=>t(!0),[t]),a=x.useCallback(()=>t(!1),[t]);return o.useEventListener("mouseenter",g,d.current),o.useEventListener("mouseleave",a,d.current),[e,d]},B=(e,t,d,g,a,n)=>{const y=o.useRouter();if(!y)return{routeName:t,params:{}};const{params:m}=y.getRouteData();let i={},u=[];if(g==="tag"){const{tag:l,...h}=m;u=l?l.split(","):[],i=h}else{const{guideCategory:l,uriName:h,...b}=m;u=[l],i=b}if(d&&(e.id==="0"||u.includes(e.id))&&u.length===1&&(!a||a.id==="0")&&Object.keys(i).length===0){const l=y.getInitialRoute();return{routeName:(l==null?void 0:l.name)||t,params:{}}}let r={};const f=n?n.findIndex(l=>l.id===e.id):-1,c=u.includes(e.id);if(g==="tag"){const l=u.filter(b=>b!==e.id);let h=[];e.id==="0"?h=[]:h=c?l:[...u,e.id].filter(b=>b!=="0"),r=o.createParams({...i,tag:h})}else n&&f>0?r=o.createParams({...i,guideCategory:n[f-1].id,uriName:o.formatUrl(n[f-1].title)}):a?r=o.createParams({...i,guideCategory:c?a.id:e.id,uriName:c?o.formatUrl(a.title):o.formatUrl(e.title)}):r=o.createParams({...i,uriName:c?void 0:o.formatUrl(e.title),guideCategory:c?void 0:e.id});return typeof r.tag=="string"&&(r.tag=r.tag.split(",")),{routeName:t,params:{...r,id:void 0,guide:void 0,contactMethod:void 0,connectionKey:void 0,connection:void 0}}},R=j.div`
|
|
2
|
-
${o.loadingOpacity}
|
|
3
|
-
${o.contentBox}
|
|
4
|
-
overflow: hidden;
|
|
5
|
-
min-height: 50px;
|
|
6
|
-
${e=>e["data-toggler-in-focus"]&&e.isTabbing&&C.css`
|
|
7
|
-
&& {
|
|
8
|
-
${o.borderTabStyle(e)}
|
|
9
|
-
}
|
|
10
|
-
`};
|
|
11
|
-
`,q=j.button`
|
|
12
|
-
background: none;
|
|
13
|
-
border: 0;
|
|
14
|
-
outline: 0;
|
|
15
|
-
display: block;
|
|
16
|
-
cursor: pointer;
|
|
17
|
-
padding: 0;
|
|
18
|
-
font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
|
|
19
|
-
text-align: end;
|
|
20
|
-
flex: 1 0 auto;
|
|
21
|
-
svg {
|
|
22
|
-
path,
|
|
23
|
-
line {
|
|
24
|
-
stroke: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
`,k=e=>{var t,d,g,a,n,y,m,i;return C.css`
|
|
28
|
-
font-size: ${(t=e.theme.fonts)==null?void 0:t.normal};
|
|
29
|
-
text-align: left;
|
|
30
|
-
text-align: left;
|
|
31
|
-
text-decoration: none;
|
|
32
|
-
font-weight: 300;
|
|
33
|
-
display: flex;
|
|
34
|
-
align-items: center;
|
|
35
|
-
padding: ${(d=e.theme.sizes)==null?void 0:d.small};
|
|
36
|
-
padding-left: ${(g=e.theme.sizes)==null?void 0:g.large};
|
|
37
|
-
cursor: pointer;
|
|
38
|
-
overflow: hidden;
|
|
39
|
-
${e.selected?C.css`
|
|
40
|
-
border-left: 2px solid ${(a=e.theme.colors)==null?void 0:a.primary};
|
|
41
|
-
color: ${(n=e.theme.colors)==null?void 0:n.primary};
|
|
42
|
-
`:C.css`
|
|
43
|
-
color: ${(y=e.theme.colors)==null?void 0:y.text};
|
|
44
|
-
`};
|
|
45
|
-
|
|
46
|
-
span {
|
|
47
|
-
overflow: hidden;
|
|
48
|
-
text-overflow: ellipsis;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
i {
|
|
52
|
-
margin-right: ${(m=e.theme.sizes)==null?void 0:m.normal};
|
|
53
|
-
font-size: ${(i=e.theme.fonts)==null?void 0:i.medium};
|
|
54
|
-
min-height: 1em;
|
|
55
|
-
min-width: 1em;
|
|
56
|
-
}
|
|
57
|
-
`},M=j.div`
|
|
58
|
-
${k}
|
|
59
|
-
`,P=j(o.BaseLink)`
|
|
60
|
-
${k}
|
|
61
|
-
&:focus {
|
|
62
|
-
outline: none;
|
|
63
|
-
}
|
|
64
|
-
&:focus-visible {
|
|
65
|
-
span {
|
|
66
|
-
${o.linkTabStyle};
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
`,D=j.div`
|
|
70
|
-
display: flex;
|
|
71
|
-
justify-content: space-between;
|
|
72
|
-
padding-right: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.large}};
|
|
73
|
-
min-height: 52px;
|
|
74
|
-
white-space: nowrap;
|
|
75
|
-
|
|
76
|
-
&& {
|
|
77
|
-
font-weight: normal;
|
|
78
|
-
|
|
79
|
-
a {
|
|
80
|
-
font-weight: normal;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
.humany-guide-category-dropdown-item {
|
|
84
|
-
font-weight: normal;
|
|
85
|
-
}
|
|
86
|
-
`,E=j(o.BaseList)`
|
|
87
|
-
${o.list}
|
|
88
|
-
display: flex;
|
|
89
|
-
justify-content: center;
|
|
90
|
-
flex-direction: column;
|
|
91
|
-
margin-right: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.medium}};
|
|
92
|
-
margin-left: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.large}};
|
|
93
|
-
margin-bottom: 22px;
|
|
94
|
-
border-left: ${e=>e.theme.border};
|
|
95
|
-
li {
|
|
96
|
-
margin: 0 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}} -2px;
|
|
97
|
-
}
|
|
98
|
-
li:last-child {
|
|
99
|
-
margin: 0 0 0 -2px;
|
|
100
|
-
}
|
|
101
|
-
flex-basis: 100%;
|
|
102
|
-
border-width: 2px;
|
|
103
|
-
`,F=j(o.Text)`
|
|
104
|
-
margin: 0 0 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}};
|
|
105
|
-
`,p={Wrapper:R,Toggler:q,List:E,Item:M,Link:P,TopItem:D,MatchCount:F},$=({matches:e})=>{const{showMatchCount:t=!1}=N();return!t||typeof e>"u"?null:s.jsxs(p.MatchCount,{children:["(",e,")"]})},O=({item:e,guideCategory:t})=>{const{route:d="browse",categoryAriaLabel:g="",activeCategoryAriaLabel:a="",fallbackOnInitialRoute:n=!1}=N(),[y,m]=L(),{id:i,title:u,symbol:r,activeSymbol:f}=e,c=t===i;return s.jsx("li",{ref:m,children:s.jsxs(p.Link,{...B(e,d,n,"category"),"aria-pressed":c,"aria-label":(c?a:g).replace("{{category}}",u),className:"humany-guide-category-dropdown-link","aria-current":c,selected:c,children:[(c||y)&&f?s.jsx(o.SymbolBadge,{symbol:f}):r&&s.jsx(o.SymbolBadge,{symbol:r}),s.jsx(o.Text,{children:u}),s.jsx($,{...e})]})})},U=({className:e,...t})=>{const d=o.useRouteData(),[g,a]=x.useState(!1),{parent:n,route:y="browse",categories:m=[],loading:i=!1}=N(),u=o.useContainer(),[r,f]=x.useState(!1),{params:c}=d,l=o.useIsTabbing(),{guideCategory:h,tag:b,phrase:T,sorting:I}=c;if(x.useEffect(()=>{r&&f(!1)},[h]),i||!n||!m.length)return z(u,{...t,className:o.appendClassNames(e,"humany-guide-category-dropdown")});const w=m.find(v=>v.id===h)||n,S=w.activeSymbol||w.symbol;return s.jsx(p.Wrapper,{...t,"data-loading":!1,"data-toggler-in-focus":g,"aria-expanded":r,isTabbing:l,className:o.appendClassNames(e,"humany-guide-category-dropdown"),children:r?s.jsxs(s.Fragment,{children:[s.jsxs(p.TopItem,{className:"humany-guide-category-dropdown-top-item",children:[s.jsxs(p.Link,{className:"humany-guide-category-dropdown-link",routeName:y,params:o.createParams({tag:b,phrase:T,sorting:I,guideCategory:n.id,uriName:o.formatUrl(n.title)}),selected:!1,children:[n.symbol?s.jsx(o.SymbolBadge,{symbol:n.symbol}):null,s.jsx(o.Text,{children:n.title}),s.jsx($,{...n})]}),s.jsx(p.Toggler,{onBlur:()=>a(!1),onFocus:()=>a(!0),className:"humany-guide-category-dropdown-toggler",onClick:()=>{f(!r)},"aria-expanded":"true","aria-label":w.title,children:s.jsx(o.SymbolBadge,{size:18,symbol:{type:"Svg",content:"caret-up"}})})]}),s.jsx(p.List,{className:"humany-guide-category-dropdown-open",items:m,renderItem:v=>s.jsx(O,{item:v,guideCategory:h},v.id)})]}):s.jsxs(p.TopItem,{className:"humany-guide-category-dropdown-top-item",children:[s.jsxs(p.Item,{className:"humany-guide-category-dropdown-item",onClick:()=>{f(!r)},selected:!1,children:[S?s.jsx(o.SymbolBadge,{symbol:S}):null,s.jsx(o.Text,{children:w.title}),s.jsx($,{...w})]}),s.jsx(p.Toggler,{onBlur:()=>a(!1),onFocus:()=>a(!0),className:"humany-guide-category-dropdown-toggler",onClick:()=>{f(!r)},"aria-expanded":"false","aria-label":w.title,children:s.jsx(o.SymbolBadge,{size:18,symbol:{type:"Svg",content:"caret-down"}})})]})})};exports.default=U;
|