@telia-ace/knowledge-widget-components-tag-list 1.0.43-next.5 → 1.0.44-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js
CHANGED
|
@@ -13,7 +13,7 @@ var g = (e, t, r) => t in e ? T(e, t, { enumerable: !0, configurable: !0, writab
|
|
|
13
13
|
import { DataClient as x, DataType as p } from "@telia-ace/knowledge-data-client";
|
|
14
14
|
import { createEventSubscriber as y, extendComponent as I } from "@telia-ace/knowledge-widget-core";
|
|
15
15
|
import { createReactComponent as L } from "@telia-ace/knowledge-widget-ui";
|
|
16
|
-
const P = (e) => L(e, "tag-list", import("./tag-list.
|
|
16
|
+
const P = (e) => L(e, "tag-list", import("./tag-list.3ebfa7b4.js"), (t) => {
|
|
17
17
|
const { events: r } = e.get("$widget"), [o, u] = y(r);
|
|
18
18
|
t.actions.create("fetch", ({ items: a = [] }) => t.actions.dispatch("fetched", {
|
|
19
19
|
items: a,
|
|
@@ -1,85 +1,85 @@
|
|
|
1
1
|
var P = Object.defineProperty, D = Object.defineProperties;
|
|
2
2
|
var U = Object.getOwnPropertyDescriptors;
|
|
3
|
-
var
|
|
4
|
-
var w = Object.prototype.hasOwnProperty,
|
|
5
|
-
var z = (e, t, o) => t in e ? P(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o,
|
|
3
|
+
var d = Object.getOwnPropertySymbols;
|
|
4
|
+
var w = Object.prototype.hasOwnProperty, v = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var z = (e, t, o) => t in e ? P(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, m = (e, t) => {
|
|
6
6
|
for (var o in t || (t = {}))
|
|
7
7
|
w.call(t, o) && z(e, o, t[o]);
|
|
8
|
-
if (
|
|
9
|
-
for (var o of
|
|
10
|
-
|
|
8
|
+
if (d)
|
|
9
|
+
for (var o of d(t))
|
|
10
|
+
v.call(t, o) && z(e, o, t[o]);
|
|
11
11
|
return e;
|
|
12
|
-
},
|
|
13
|
-
var
|
|
12
|
+
}, g = (e, t) => D(e, U(t));
|
|
13
|
+
var L = (e, t) => {
|
|
14
14
|
var o = {};
|
|
15
|
-
for (var
|
|
16
|
-
w.call(e,
|
|
17
|
-
if (e != null &&
|
|
18
|
-
for (var
|
|
19
|
-
t.indexOf(
|
|
15
|
+
for (var a in e)
|
|
16
|
+
w.call(e, a) && t.indexOf(a) < 0 && (o[a] = e[a]);
|
|
17
|
+
if (e != null && d)
|
|
18
|
+
for (var a of d(e))
|
|
19
|
+
t.indexOf(a) < 0 && v.call(e, a) && (o[a] = e[a]);
|
|
20
20
|
return o;
|
|
21
21
|
};
|
|
22
|
-
import { css as
|
|
23
|
-
import
|
|
22
|
+
import { css as u } from "@emotion/react";
|
|
23
|
+
import l from "@emotion/styled";
|
|
24
24
|
import { initialRouteFallback as q } from "@telia-ace/knowledge-widget-component-utilities";
|
|
25
|
-
import { useProperties as G, useContainer as H, useRouteData as J, createEmptyComponent as K, Loader as Q, ItemList as V, contentBox as W, itemList as X, loadingOpacity as Y, TextLink as
|
|
26
|
-
import { appendClassNames as
|
|
27
|
-
import
|
|
28
|
-
const ee = (e, t, o) => e && o ? /* @__PURE__ */
|
|
29
|
-
var
|
|
25
|
+
import { useProperties as G, useContainer as H, useRouteData as J, createEmptyComponent as K, Loader as Q, ItemList as V, contentBox as W, itemList as X, loadingOpacity as Y, TextLink as I, borderTabStyle as k, Text as Z, SymbolBadge as _ } from "@telia-ace/knowledge-widget-ui";
|
|
26
|
+
import { appendClassNames as S } from "@telia-ace/widget-utilities";
|
|
27
|
+
import r from "react";
|
|
28
|
+
const ee = (e, t, o) => e && o ? /* @__PURE__ */ r.createElement(E, { symbol: o, size: 18 }) : t ? /* @__PURE__ */ r.createElement(E, { symbol: t, size: 18 }) : null, fe = (o) => {
|
|
29
|
+
var a = o, { className: e } = a, t = L(a, ["className"]);
|
|
30
30
|
const {
|
|
31
|
-
route:
|
|
32
|
-
items:
|
|
33
|
-
header:
|
|
31
|
+
route: T = "search",
|
|
32
|
+
items: y = [],
|
|
33
|
+
header: C,
|
|
34
34
|
loading: i = !1,
|
|
35
|
-
style:
|
|
36
|
-
showMatchCount:
|
|
35
|
+
style: h = "badge",
|
|
36
|
+
showMatchCount: R = !1,
|
|
37
37
|
showIcons: A = !1,
|
|
38
|
-
static:
|
|
38
|
+
static: s = !1,
|
|
39
39
|
fallbackOnInitialRoute: B = !1,
|
|
40
|
-
itemAriaLabel:
|
|
41
|
-
} = G(), j = H(), { params:
|
|
42
|
-
if (!
|
|
43
|
-
return K(j,
|
|
44
|
-
className:
|
|
40
|
+
itemAriaLabel: b
|
|
41
|
+
} = G(), j = H(), { params: f } = J();
|
|
42
|
+
if (!y.length && (!i || s))
|
|
43
|
+
return K(j, g(m({}, t), {
|
|
44
|
+
className: S(e, "humany-tag-list")
|
|
45
45
|
}));
|
|
46
|
-
const F =
|
|
47
|
-
return /* @__PURE__ */
|
|
46
|
+
const F = h === "badge" ? oe : ae;
|
|
47
|
+
return /* @__PURE__ */ r.createElement(
|
|
48
48
|
te,
|
|
49
|
-
|
|
50
|
-
"data-loading": !
|
|
51
|
-
className:
|
|
52
|
-
header: !
|
|
53
|
-
items:
|
|
54
|
-
type:
|
|
49
|
+
g(m({}, t), {
|
|
50
|
+
"data-loading": !s && i,
|
|
51
|
+
className: S(e, "humany-tag-list"),
|
|
52
|
+
header: !s && i ? "" : C,
|
|
53
|
+
items: y,
|
|
54
|
+
type: h,
|
|
55
55
|
renderItem: (n) => {
|
|
56
|
-
const { id: $, title: x, defaultIcon: M, activeIcon: N, matches: c } = n,
|
|
57
|
-
return /* @__PURE__ */
|
|
58
|
-
|
|
56
|
+
const { id: $, title: x, defaultIcon: M, activeIcon: N, matches: c } = n, p = (f.tag ? f.tag.split(",") : []).includes(n.id) || !f.tag && n.id === "0", O = b && b.replace("{{title}}", x).replace("{{matches}}", `${c}`);
|
|
57
|
+
return /* @__PURE__ */ r.createElement(
|
|
58
|
+
se,
|
|
59
59
|
{
|
|
60
60
|
key: $,
|
|
61
|
-
notAllowed: (
|
|
61
|
+
notAllowed: (s && !c && h === "pill").toString(),
|
|
62
62
|
"data-tag": $
|
|
63
63
|
},
|
|
64
|
-
/* @__PURE__ */
|
|
64
|
+
/* @__PURE__ */ r.createElement(
|
|
65
65
|
F,
|
|
66
|
-
|
|
66
|
+
g(m({}, q(n, T, B, "tag")), {
|
|
67
67
|
role: "button",
|
|
68
|
-
"aria-pressed":
|
|
68
|
+
"aria-pressed": p,
|
|
69
69
|
"aria-label": O,
|
|
70
|
-
disabled:
|
|
71
|
-
selected:
|
|
70
|
+
disabled: s && !c,
|
|
71
|
+
selected: p,
|
|
72
72
|
text: x
|
|
73
73
|
}),
|
|
74
|
-
A && ee(
|
|
75
|
-
|
|
74
|
+
A && ee(p, M, N),
|
|
75
|
+
R && /* @__PURE__ */ r.createElement(re, null, `(${c})`)
|
|
76
76
|
)
|
|
77
77
|
);
|
|
78
78
|
}
|
|
79
79
|
}),
|
|
80
|
-
!
|
|
80
|
+
!s && /* @__PURE__ */ r.createElement(Q, { loading: i })
|
|
81
81
|
);
|
|
82
|
-
}, te =
|
|
82
|
+
}, te = l(V)`
|
|
83
83
|
${W}
|
|
84
84
|
${X}
|
|
85
85
|
${Y}
|
|
@@ -91,7 +91,7 @@ const ee = (e, t, o) => e && o ? /* @__PURE__ */ a.createElement(E, { symbol: o,
|
|
|
91
91
|
ul {
|
|
92
92
|
display: flex;
|
|
93
93
|
flex-wrap: wrap;
|
|
94
|
-
${(e) => e.type === "pill" &&
|
|
94
|
+
${(e) => e.type === "pill" && u`
|
|
95
95
|
justify-content: center;
|
|
96
96
|
`}
|
|
97
97
|
|
|
@@ -102,7 +102,7 @@ const ee = (e, t, o) => e && o ? /* @__PURE__ */ a.createElement(E, { symbol: o,
|
|
|
102
102
|
}} 0;
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
|
-
`, oe =
|
|
105
|
+
`, oe = l(I)`
|
|
106
106
|
padding: 8px 15px;
|
|
107
107
|
background-color: ${(e) => {
|
|
108
108
|
var t, o;
|
|
@@ -119,7 +119,7 @@ const ee = (e, t, o) => e && o ? /* @__PURE__ */ a.createElement(E, { symbol: o,
|
|
|
119
119
|
color: #ffffff;
|
|
120
120
|
|
|
121
121
|
&:focus-visible {
|
|
122
|
-
${
|
|
122
|
+
${k}
|
|
123
123
|
padding: 6px 15px;
|
|
124
124
|
background-color: transparent;
|
|
125
125
|
}
|
|
@@ -132,7 +132,7 @@ const ee = (e, t, o) => e && o ? /* @__PURE__ */ a.createElement(E, { symbol: o,
|
|
|
132
132
|
}};
|
|
133
133
|
}
|
|
134
134
|
}
|
|
135
|
-
`,
|
|
135
|
+
`, ae = l(I)`
|
|
136
136
|
border: 1px solid ${(e) => {
|
|
137
137
|
var t;
|
|
138
138
|
return e.selected ? (t = e.theme.colors) == null ? void 0 : t.text : "transparent";
|
|
@@ -156,7 +156,7 @@ const ee = (e, t, o) => e && o ? /* @__PURE__ */ a.createElement(E, { symbol: o,
|
|
|
156
156
|
}
|
|
157
157
|
|
|
158
158
|
&:focus-visible {
|
|
159
|
-
${
|
|
159
|
+
${k}
|
|
160
160
|
border-radius: 1em;
|
|
161
161
|
}
|
|
162
162
|
|
|
@@ -169,16 +169,16 @@ const ee = (e, t, o) => e && o ? /* @__PURE__ */ a.createElement(E, { symbol: o,
|
|
|
169
169
|
}
|
|
170
170
|
}
|
|
171
171
|
|
|
172
|
-
${(e) => e.disabled &&
|
|
172
|
+
${(e) => e.disabled && u`
|
|
173
173
|
opacity: 0.5;
|
|
174
174
|
`}
|
|
175
|
-
`,
|
|
175
|
+
`, re = l(Z)`
|
|
176
176
|
order: 2;
|
|
177
177
|
margin-left: ${(e) => {
|
|
178
178
|
var t;
|
|
179
179
|
return (t = e.theme.sizes) == null ? void 0 : t.small;
|
|
180
180
|
}};
|
|
181
|
-
`, E =
|
|
181
|
+
`, E = l(_)`
|
|
182
182
|
margin-right: ${(e) => {
|
|
183
183
|
var t;
|
|
184
184
|
return (t = e.theme.sizes) == null ? void 0 : t.small;
|
|
@@ -194,12 +194,12 @@ const ee = (e, t, o) => e && o ? /* @__PURE__ */ a.createElement(E, { symbol: o,
|
|
|
194
194
|
font-size: ${e.size}px;
|
|
195
195
|
`;
|
|
196
196
|
}}
|
|
197
|
-
`,
|
|
198
|
-
${(e) => e.notAllowed === "true" &&
|
|
197
|
+
`, se = l.li`
|
|
198
|
+
${(e) => e.notAllowed === "true" && u`
|
|
199
199
|
cursor: not-allowed;
|
|
200
200
|
`}
|
|
201
201
|
`;
|
|
202
202
|
export {
|
|
203
203
|
fe as default
|
|
204
204
|
};
|
|
205
|
-
//# sourceMappingURL=tag-list.
|
|
205
|
+
//# sourceMappingURL=tag-list.3ebfa7b4.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tag-list.3ebfa7b4.js","sources":["../src/tag-list.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { initialRouteFallback } from '@telia-ace/knowledge-widget-component-utilities';\nimport { Symbol, Tag } from '@telia-ace/knowledge-widget-core';\nimport {\n borderTabStyle,\n contentBox,\n createEmptyComponent,\n ItemList,\n itemList,\n Loader,\n loadingOpacity,\n SymbolBadge,\n Text,\n TextLink,\n useContainer,\n useProperties,\n useRouteData,\n} from '@telia-ace/knowledge-widget-ui';\nimport { appendClassNames } from '@telia-ace/widget-utilities';\nimport React from 'react';\nimport { TagListComponentProps } from './tag-list-component';\n\ntype Props = {\n className: string;\n};\n\nconst getIcon = (selected: boolean, defaultIcon?: Symbol, activeIcon?: Symbol) => {\n if (selected && activeIcon) {\n return <StyledSymbolBadge symbol={activeIcon} size={18} />;\n }\n if (defaultIcon) {\n return <StyledSymbolBadge symbol={defaultIcon} size={18} />;\n }\n return null;\n};\n\nconst TagList: React.FC<Props> = ({ className, ...other }) => {\n const {\n route = 'search',\n items = [],\n header,\n loading = false,\n style = 'badge',\n showMatchCount = false,\n showIcons = false,\n static: staticTags = false,\n fallbackOnInitialRoute = false,\n itemAriaLabel,\n } = useProperties<TagListComponentProps>();\n const container = useContainer();\n const { params } = useRouteData();\n\n if (!items.length && (!loading || staticTags)) {\n return createEmptyComponent(container, {\n ...other,\n className: appendClassNames(className, 'humany-tag-list'),\n });\n }\n\n const Component = style === 'badge' ? StyledBadge : StyledPill;\n\n return (\n <StyledItemList\n {...other}\n data-loading={!staticTags && loading}\n className={appendClassNames(className, 'humany-tag-list')}\n header={!staticTags && loading ? '' : header}\n items={items}\n type={style}\n renderItem={(item: Tag) => {\n const { id, title, defaultIcon, activeIcon, matches } = item;\n const activeTagIds = params.tag ? params.tag.split(',') : [];\n const selected = activeTagIds.includes(item.id) || (!params.tag && item.id === '0');\n\n const ariaLabel =\n itemAriaLabel &&\n itemAriaLabel.replace('{{title}}', title).replace('{{matches}}', `${matches}`);\n\n return (\n <StyledLi\n key={id}\n notAllowed={(staticTags && !matches && style === 'pill').toString()}\n data-tag={id}\n >\n <Component\n {...initialRouteFallback(item, route, fallbackOnInitialRoute, 'tag')}\n role=\"button\"\n aria-pressed={selected}\n aria-label={ariaLabel}\n disabled={staticTags && !matches}\n selected={selected}\n text={title}\n >\n {showIcons && getIcon(selected, defaultIcon, activeIcon)}\n {showMatchCount && (\n <StyledMatchCount>{`(${matches})`}</StyledMatchCount>\n )}\n </Component>\n </StyledLi>\n );\n }}\n >\n {!staticTags && <Loader loading={loading} />}\n </StyledItemList>\n );\n};\n\nexport default TagList;\n\nconst StyledItemList = styled(ItemList)<{ 'data-loading': boolean } & any>`\n ${contentBox}\n ${itemList}\n ${loadingOpacity}\n justify-content: flex-start;\n padding: ${(p) => p.theme.sizes?.large};\n ul {\n display: flex;\n flex-wrap: wrap;\n ${(p) =>\n p.type === 'pill' &&\n css`\n justify-content: center;\n `}\n\n li {\n margin: 0 ${(p) => `${p.theme.sizes?.small} ${p.theme.sizes?.small}`} 0;\n }\n }\n`;\n\nconst StyledBadge = styled(TextLink)<any>`\n padding: 8px 15px;\n background-color: ${(p) => (p.selected ? p.theme.colors?.text : p.theme.colors?.primary)};\n border-radius: ${(p) => p.theme.borderRadius};\n font-weight: 300;\n font-size: ${(p) => p.theme.fonts?.normal};\n display: flex;\n align-items: center;\n color: #ffffff;\n\n &:focus-visible {\n ${borderTabStyle}\n padding: 6px 15px;\n background-color: transparent;\n }\n\n @media (hover: hover) {\n &:hover {\n background-color: ${(p) =>\n p.selected ? p.theme.colors?.primary : p.theme.colors?.text};\n }\n }\n`;\n\nconst StyledPill = styled(TextLink)<any>`\n border: 1px solid ${(p) => (p.selected ? p.theme.colors?.text : 'transparent')};\n line-height: 2em;\n border-radius: 1em;\n padding: 0 0.5em;\n display: flex;\n align-items: center;\n font-weight: ${(p) => (p.selected ? 'normal' : 300)};\n color: ${(p) => p.theme.colors?.text};\n\n &:disabled {\n color: ${(p) => p.theme.colors?.textLight};\n }\n\n &:focus-visible {\n ${borderTabStyle}\n border-radius: 1em;\n }\n\n @media (hover: hover) {\n &:hover {\n border: 1px solid ${(p) => p.theme.colors?.text};\n }\n }\n\n ${(p) =>\n p.disabled &&\n css`\n opacity: 0.5;\n `}\n`;\n\nconst StyledMatchCount = styled(Text)<any>`\n order: 2;\n margin-left: ${(p) => p.theme.sizes?.small};\n`;\n\nconst StyledSymbolBadge = styled(SymbolBadge)<{ size: number; symbol: Symbol }>`\n margin-right: ${(p) => p.theme.sizes?.small};\n ${(p: any) => {\n if (p.symbol.type === 'Uri') {\n return `\n width: ${p.size}px;\n height: ${p.size}px;\n `;\n }\n\n if (p.symbol.type === 'FontAwesome') {\n return `\n font-size: ${p.size}px;\n `;\n }\n }}\n`;\n\nconst StyledLi = styled.li<{ notAllowed: string }>`\n ${(p) =>\n p.notAllowed === 'true' &&\n css`\n cursor: not-allowed;\n `}\n`;\n"],"names":["getIcon","selected","defaultIcon","activeIcon","React","StyledSymbolBadge","TagList","_a","_b","className","other","__objRest","route","items","header","loading","style","showMatchCount","showIcons","staticTags","fallbackOnInitialRoute","itemAriaLabel","useProperties","container","useContainer","params","useRouteData","createEmptyComponent","__spreadProps","__spreadValues","appendClassNames","Component","StyledBadge","StyledPill","StyledItemList","item","id","title","matches","ariaLabel","StyledLi","initialRouteFallback","StyledMatchCount","Loader","styled","ItemList","contentBox","itemList","loadingOpacity","p","css","TextLink","borderTabStyle","Text","SymbolBadge"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telia-ace/knowledge-widget-components-tag-list",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.44-next.0",
|
|
4
4
|
"description": "Tag list component for ACE Knowledge Widgets.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"author": "Telia Company AB",
|
|
@@ -21,11 +21,11 @@
|
|
|
21
21
|
},
|
|
22
22
|
"sideEffects": false,
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@telia-ace/knowledge-data-client": "1.0.
|
|
25
|
-
"@telia-ace/knowledge-widget-component-utilities": "1.0.
|
|
26
|
-
"@telia-ace/knowledge-widget-core": "1.0.
|
|
27
|
-
"@telia-ace/knowledge-widget-ui": "1.0.
|
|
28
|
-
"@telia-ace/widget-utilities": "^1.0.
|
|
24
|
+
"@telia-ace/knowledge-data-client": "1.0.7-next.0",
|
|
25
|
+
"@telia-ace/knowledge-widget-component-utilities": "1.0.44-next.0",
|
|
26
|
+
"@telia-ace/knowledge-widget-core": "1.0.40-next.0",
|
|
27
|
+
"@telia-ace/knowledge-widget-ui": "1.0.46-next.0",
|
|
28
|
+
"@telia-ace/widget-utilities": "^1.0.14-next.0",
|
|
29
29
|
"@webprovisions/platform": "^1.1.2"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@emotion/react": "^11.10.6",
|
|
39
39
|
"@emotion/styled": "^11.10.6",
|
|
40
|
-
"@types/react": "^18.0.
|
|
40
|
+
"@types/react": "^18.0.33",
|
|
41
41
|
"@types/react-dom": "^18.0.11",
|
|
42
42
|
"react": "^18.2.0",
|
|
43
43
|
"react-dom": "^18.2.0"
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tag-list.73b01dd5.js","sources":["../src/tag-list.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { initialRouteFallback } from '@telia-ace/knowledge-widget-component-utilities';\nimport { Symbol, Tag } from '@telia-ace/knowledge-widget-core';\nimport {\n borderTabStyle,\n contentBox,\n createEmptyComponent,\n ItemList,\n itemList,\n Loader,\n loadingOpacity,\n SymbolBadge,\n Text,\n TextLink,\n useContainer,\n useProperties,\n useRouteData,\n} from '@telia-ace/knowledge-widget-ui';\nimport { appendClassNames } from '@telia-ace/widget-utilities';\nimport React from 'react';\nimport { TagListComponentProps } from './tag-list-component';\n\ntype Props = {\n className: string;\n};\n\nconst getIcon = (selected: boolean, defaultIcon?: Symbol, activeIcon?: Symbol) => {\n if (selected && activeIcon) {\n return <StyledSymbolBadge symbol={activeIcon} size={18} />;\n }\n if (defaultIcon) {\n return <StyledSymbolBadge symbol={defaultIcon} size={18} />;\n }\n return null;\n};\n\nconst TagList: React.FC<Props> = ({ className, ...other }) => {\n const {\n route = 'search',\n items = [],\n header,\n loading = false,\n style = 'badge',\n showMatchCount = false,\n showIcons = false,\n static: staticTags = false,\n fallbackOnInitialRoute = false,\n itemAriaLabel,\n } = useProperties<TagListComponentProps>();\n const container = useContainer();\n const { params } = useRouteData();\n\n if (!items.length && (!loading || staticTags)) {\n return createEmptyComponent(container, {\n ...other,\n className: appendClassNames(className, 'humany-tag-list'),\n });\n }\n\n const Component = style === 'badge' ? StyledBadge : StyledPill;\n\n return (\n <StyledItemList\n {...other}\n data-loading={!staticTags && loading}\n className={appendClassNames(className, 'humany-tag-list')}\n header={!staticTags && loading ? '' : header}\n items={items}\n type={style}\n renderItem={(item: Tag) => {\n const { id, title, defaultIcon, activeIcon, matches } = item;\n const selected = params.tag === item.id || (!params.tag && item.id === '0');\n\n const ariaLabel =\n itemAriaLabel &&\n itemAriaLabel.replace('{{title}}', title).replace('{{matches}}', `${matches}`);\n\n return (\n <StyledLi\n key={id}\n notAllowed={(staticTags && !matches && style === 'pill').toString()}\n data-tag={id}\n >\n <Component\n {...initialRouteFallback(item, route, fallbackOnInitialRoute, 'tag')}\n role=\"button\"\n aria-pressed={selected}\n aria-label={ariaLabel}\n disabled={staticTags && !matches}\n selected={selected}\n text={title}\n >\n {showIcons && getIcon(selected, defaultIcon, activeIcon)}\n {showMatchCount && (\n <StyledMatchCount>{`(${matches})`}</StyledMatchCount>\n )}\n </Component>\n </StyledLi>\n );\n }}\n >\n {!staticTags && <Loader loading={loading} />}\n </StyledItemList>\n );\n};\n\nexport default TagList;\n\nconst StyledItemList = styled(ItemList)<{ 'data-loading': boolean } & any>`\n ${contentBox}\n ${itemList}\n ${loadingOpacity}\n justify-content: flex-start;\n padding: ${(p) => p.theme.sizes?.large};\n ul {\n display: flex;\n flex-wrap: wrap;\n ${(p) =>\n p.type === 'pill' &&\n css`\n justify-content: center;\n `}\n\n li {\n margin: 0 ${(p) => `${p.theme.sizes?.small} ${p.theme.sizes?.small}`} 0;\n }\n }\n`;\n\nconst StyledBadge = styled(TextLink)<any>`\n padding: 8px 15px;\n background-color: ${(p) => (p.selected ? p.theme.colors?.text : p.theme.colors?.primary)};\n border-radius: ${(p) => p.theme.borderRadius};\n font-weight: 300;\n font-size: ${(p) => p.theme.fonts?.normal};\n display: flex;\n align-items: center;\n color: #ffffff;\n\n &:focus-visible {\n ${borderTabStyle}\n padding: 6px 15px;\n background-color: transparent;\n }\n\n @media (hover: hover) {\n &:hover {\n background-color: ${(p) =>\n p.selected ? p.theme.colors?.primary : p.theme.colors?.text};\n }\n }\n`;\n\nconst StyledPill = styled(TextLink)<any>`\n border: 1px solid ${(p) => (p.selected ? p.theme.colors?.text : 'transparent')};\n line-height: 2em;\n border-radius: 1em;\n padding: 0 0.5em;\n display: flex;\n align-items: center;\n font-weight: ${(p) => (p.selected ? 'normal' : 300)};\n color: ${(p) => p.theme.colors?.text};\n\n &:disabled {\n color: ${(p) => p.theme.colors?.textLight};\n }\n\n &:focus-visible {\n ${borderTabStyle}\n border-radius: 1em;\n }\n\n @media (hover: hover) {\n &:hover {\n border: 1px solid ${(p) => p.theme.colors?.text};\n }\n }\n\n ${(p) =>\n p.disabled &&\n css`\n opacity: 0.5;\n `}\n`;\n\nconst StyledMatchCount = styled(Text)<any>`\n order: 2;\n margin-left: ${(p) => p.theme.sizes?.small};\n`;\n\nconst StyledSymbolBadge = styled(SymbolBadge)<{ size: number; symbol: Symbol }>`\n margin-right: ${(p) => p.theme.sizes?.small};\n ${(p: any) => {\n if (p.symbol.type === 'Uri') {\n return `\n width: ${p.size}px;\n height: ${p.size}px;\n `;\n }\n\n if (p.symbol.type === 'FontAwesome') {\n return `\n font-size: ${p.size}px;\n `;\n }\n }}\n`;\n\nconst StyledLi = styled.li<{ notAllowed: string }>`\n ${(p) =>\n p.notAllowed === 'true' &&\n css`\n cursor: not-allowed;\n `}\n`;\n"],"names":["getIcon","selected","defaultIcon","activeIcon","React","StyledSymbolBadge","TagList","_a","_b","className","other","__objRest","route","items","header","loading","style","showMatchCount","showIcons","staticTags","fallbackOnInitialRoute","itemAriaLabel","useProperties","container","useContainer","params","useRouteData","createEmptyComponent","__spreadProps","__spreadValues","appendClassNames","Component","StyledBadge","StyledPill","StyledItemList","item","id","title","matches","ariaLabel","StyledLi","initialRouteFallback","StyledMatchCount","Loader","styled","ItemList","contentBox","itemList","loadingOpacity","p","css","TextLink","borderTabStyle","Text","SymbolBadge"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAMA,KAAU,CAACC,GAAmBC,GAAsBC,MAClDF,KAAYE,IACJ,gBAAAC,EAAA,cAAAC,GAAA,EAAkB,QAAQF,GAAY,MAAM,GAAI,CAAA,IAExDD,IACQ,gBAAAE,EAAA,cAAAC,GAAA,EAAkB,QAAQH,GAAa,MAAM,GAAI,CAAA,IAEtD,MAGLI,KAA2B,CAACC,MAA4B;AAA5B,MAAAC,IAAAD,GAAE,aAAAE,MAAFD,GAAgBE,IAAAC,EAAhBH,GAAgB,CAAd;AAC1B,QAAA;AAAA,IACF,OAAAI,IAAQ;AAAA,IACR,OAAAC,IAAQ,CAAC;AAAA,IACT,QAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,OAAAC,IAAQ;AAAA,IACR,gBAAAC,IAAiB;AAAA,IACjB,WAAAC,IAAY;AAAA,IACZ,QAAQC,IAAa;AAAA,IACrB,wBAAAC,IAAyB;AAAA,IACzB,eAAAC;AAAA,MACAC,EAAqC,GACnCC,IAAYC,KACZ,EAAE,QAAAC,MAAWC;AAEnB,MAAI,CAACb,EAAM,WAAW,CAACE,KAAWI;AAC9B,WAAOQ,EAAqBJ,GAAWK,EAAAC,EAAA,IAChCnB,IADgC;AAAA,MAEnC,WAAWoB,EAAiBrB,GAAW,iBAAiB;AAAA,IAAA,EAC3D;AAGC,QAAAsB,IAAYf,MAAU,UAAUgB,KAAcC;AAGhD,SAAA,gBAAA7B,EAAA;AAAA,IAAC8B;AAAA,IAAAN,EAAAC,EAAA,IACOnB,IADP;AAAA,MAEG,gBAAc,CAACS,KAAcJ;AAAA,MAC7B,WAAWe,EAAiBrB,GAAW,iBAAiB;AAAA,MACxD,QAAQ,CAACU,KAAcJ,IAAU,KAAKD;AAAA,MACtC,OAAAD;AAAA,MACA,MAAMG;AAAA,MACN,YAAY,CAACmB,MAAc;AACvB,cAAM,EAAE,IAAAC,GAAI,OAAAC,GAAO,aAAAnC,GAAa,YAAAC,GAAY,SAAAmC,EAAY,IAAAH,GAClDlC,IAAWwB,EAAO,QAAQU,EAAK,MAAO,CAACV,EAAO,OAAOU,EAAK,OAAO,KAEjEI,IACFlB,KACAA,EAAc,QAAQ,aAAagB,CAAK,EAAE,QAAQ,eAAe,GAAGC,GAAS;AAG7E,eAAA,gBAAAlC,EAAA;AAAA,UAACoC;AAAA,UAAA;AAAA,YACG,KAAKJ;AAAA,YACL,aAAajB,KAAc,CAACmB,KAAWtB,MAAU,QAAQ,SAAS;AAAA,YAClE,YAAUoB;AAAA,UAAA;AAAA,UAEV,gBAAAhC,EAAA;AAAA,YAAC2B;AAAA,YAAAH,EAAAC,EAAA,IACOY,EAAqBN,GAAMvB,GAAOQ,GAAwB,KAAK,IADtE;AAAA,cAEG,MAAK;AAAA,cACL,gBAAcnB;AAAA,cACd,cAAYsC;AAAA,cACZ,UAAUpB,KAAc,CAACmB;AAAA,cACzB,UAAArC;AAAA,cACA,MAAMoC;AAAA,YAAA;AAAA,YAELnB,KAAalB,GAAQC,GAAUC,GAAaC,CAAU;AAAA,YACtDc,KACG,gBAAAb,EAAA,cAACsC,IAAkB,MAAA,IAAIJ,IAAW;AAAA,UAE1C;AAAA,QAAA;AAAA,MAGZ;AAAA,IAAA;AAAA,IAEC,CAACnB,KAAe,gBAAAf,EAAA,cAAAuC,GAAA,EAAO,SAAA5B,EAAkB,CAAA;AAAA,EAAA;AAGtD,GAIMmB,KAAiBU,EAAOC,CAAQ;AAAA,MAChCC;AAAA,MACAC;AAAA,IACFC;AAAA;AAAA,eAEW,CAACC,MAAM;;AAAA,UAAA1C,IAAA0C,EAAE,MAAM,UAAR,gBAAA1C,EAAe;AAAA;AAAA;AAAA;AAAA;AAAA,UAI3B,CAAC0C,MACCA,EAAE,SAAS,UACXC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKY,CAACD,MAAM;;AAAA,aAAG1C,IAAA0C,EAAE,MAAM,UAAR,gBAAA1C,EAAe,UAASC,IAAAyC,EAAE,MAAM,UAAR,gBAAAzC,EAAe;AAAA;AAAA;AAAA;AAAA,GAKnEwB,KAAcY,EAAOO,CAAQ;AAAA;AAAA,wBAEX,CAACF,MAAO;;AAAA,SAAAA,EAAE,YAAW1C,IAAA0C,EAAE,MAAM,WAAR,gBAAA1C,EAAgB,QAAOC,IAAAyC,EAAE,MAAM,WAAR,gBAAAzC,EAAgB;AAAA;AAAA,qBAC/D,CAACyC,MAAMA,EAAE,MAAM;AAAA;AAAA,iBAEnB,CAACA,MAAM;;AAAA,UAAA1C,IAAA0C,EAAE,MAAM,UAAR,gBAAA1C,EAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAM7B6C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAOsB,CAACH,MACjB;;AAAA,SAAAA,EAAE,YAAW1C,IAAA0C,EAAE,MAAM,WAAR,gBAAA1C,EAAgB,WAAUC,IAAAyC,EAAE,MAAM,WAAR,gBAAAzC,EAAgB;AAAA;AAAA;AAAA;AAAA,GAKjEyB,KAAaW,EAAOO,CAAQ;AAAA,wBACV,CAACF,MAAO;;AAAA,SAAAA,EAAE,YAAW1C,IAAA0C,EAAE,MAAM,WAAR,gBAAA1C,EAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAMjD,CAAC0C,MAAOA,EAAE,WAAW,WAAW;AAAA,aACtC,CAACA,MAAM;;AAAA,UAAA1C,IAAA0C,EAAE,MAAM,WAAR,gBAAA1C,EAAgB;AAAA;AAAA;AAAA;AAAA,iBAGnB,CAAC0C,MAAM;;AAAA,UAAA1C,IAAA0C,EAAE,MAAM,WAAR,gBAAA1C,EAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,UAI9B6C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAMsB,CAACH,MAAM;;AAAA,UAAA1C,IAAA0C,EAAE,MAAM,WAAR,gBAAA1C,EAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,MAIjD,CAAC0C,MACCA,EAAE,YACFC;AAAA;AAAA;AAAA,GAKFR,KAAmBE,EAAOS,CAAI;AAAA;AAAA,mBAEjB,CAACJ,MAAM;;AAAA,UAAA1C,IAAA0C,EAAE,MAAM,UAAR,gBAAA1C,EAAe;AAAA;AAAA,GAGnCF,IAAoBuC,EAAOU,CAAW;AAAA,oBACxB,CAACL,MAAM;;AAAA,UAAA1C,IAAA0C,EAAE,MAAM,UAAR,gBAAA1C,EAAe;AAAA;AAAA,MACpC,CAAC0C,MAAW;AACN,MAAAA,EAAE,OAAO,SAAS;AACX,WAAA;AAAA,iBACFA,EAAE;AAAA,kBACDA,EAAE;AAAA;AAIR,MAAAA,EAAE,OAAO,SAAS;AACX,WAAA;AAAA,qBACEA,EAAE;AAAA;AAGnB;AAAA,GAGET,KAAWI,EAAO;AAAA,MAClB,CAACK,MACCA,EAAE,eAAe,UACjBC;AAAA;AAAA;AAAA;"}
|