@telia-ace/knowledge-widget-components-tag-list 1.0.15 → 1.0.18

package/dist/index.js

@@ -1,84 +1,54 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { createEventSubscriber, extendComponent } from "@telia-ace/knowledge-widget-core";
-import { DataType } from "@telia-ace/knowledge-widget-types-grid";
-import { createReactComponent } from "@telia-ace/knowledge-widget-ui";
-const TagListComponent = (container) => {
-  return createReactComponent(container, "tag-list", import("./tag-list.js"), (component) => {
-    const { events } = container.get("$widget");
-    const [subscribe, unsubscribe] = createEventSubscriber(events);
-    component.actions.create("fetch", ({ items = [] }) => {
-      return component.actions.dispatch("fetched", {
-        items,
-        loading: true
-      });
-    });
-    component.actions.create("fetched", (input) => {
-      return component.writeProperties(__spreadProps(__spreadValues({}, input), { loading: false }));
-    });
-    const fetch = (input = {}) => {
-      component.writeProperties({ loading: true, error: void 0 });
-      component.actions.dispatch("fetch", input);
-    };
-    container.getAsync("router").then((router) => {
-      const { params } = router.getRouteData();
-      fetch(params);
-    });
-    subscribe("router:changed", (event, { current }) => {
-      fetch(current.routeData.params);
-    });
-    return () => {
-      unsubscribe();
-    };
-  }).then(() => {
-    return extendComponent(container, "tag-list", (component) => {
-      component.actions.watch("tag-list.fetch", (input, next) => {
-        return container.getAsync("dataClient").then((dataClient) => {
-          const { static: staticTags = false, rootTagLabel = "" } = component.properties();
-          const { phrase, guideCategory, tag } = input;
-          return dataClient.fetch(staticTags ? DataType.Tags : DataType.TagsOnGuides, {
-            searchPhrase: phrase,
-            categories: guideCategory,
-            tagId: tag
-          }).then((tags = []) => {
-            if (staticTags) {
-              const indexOfRoot = tags.findIndex((tag2) => tag2.id === "0");
-              if (indexOfRoot > -1) {
-                tags.unshift(tags.splice(indexOfRoot, 1)[0]);
-              }
-            }
-            return next({
-              items: tags.map((t) => {
-                if (t.id === "0") {
-                  t.title = rootTagLabel;
-                }
-                return t;
-              })
-            });
-          }).catch((e) => {
-            return next({ items: [] });
-          });
-        });
+var T = Object.defineProperty, C = Object.defineProperties;
+var v = Object.getOwnPropertyDescriptors;
+var d = Object.getOwnPropertySymbols;
+var w = Object.prototype.hasOwnProperty, y = Object.prototype.propertyIsEnumerable;
+var h = (e, t, r) => t in e ? T(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, f = (e, t) => {
+  for (var r in t || (t = {}))
+    w.call(t, r) && h(e, r, t[r]);
+  if (d)
+    for (var r of d(t))
+      y.call(t, r) && h(e, r, t[r]);
+  return e;
+}, g = (e, t) => C(e, v(t));
+import { createEventSubscriber as x, extendComponent as D } from "@telia-ace/knowledge-widget-core";
+import { DataType as p } from "@telia-ace/knowledge-widget-types-grid";
+import { createReactComponent as P } from "@telia-ace/knowledge-widget-ui";
+const O = (e) => P(e, "tag-list", import("./tag-list.316a76ef.js"), (t) => {
+  const { events: r } = e.get("$widget"), [o, u] = x(r);
+  t.actions.create("fetch", ({ items: a = [] }) => t.actions.dispatch("fetched", {
+    items: a,
+    loading: !0
+  })), t.actions.create("fetched", (a) => t.writeProperties(g(f({}, a), { loading: !1 })));
+  const i = (a = {}) => {
+    t.writeProperties({ loading: !0, error: void 0 }), t.actions.dispatch("fetch", a);
+  };
+  return e.getAsync("router").then((a) => {
+    const { params: c } = a.getRouteData();
+    i(c);
+  }), o("router:changed", (a, { current: c }) => {
+    i(c.routeData.params);
+  }), () => {
+    u();
+  };
+}).then(() => D(e, "tag-list", (t) => {
+  t.actions.watch("tag-list.fetch", (r, o) => e.getAsync("dataClient").then((u) => {
+    const { static: i = !1, rootTagLabel: a = "" } = t.properties(), { phrase: c, guideCategory: l, tag: m } = r;
+    return u.fetch(i ? p.Tags : p.TagsOnGuides, {
+      searchPhrase: c,
+      categories: l,
+      tagId: m
+    }).then((n = []) => {
+      if (i) {
+        const s = n.findIndex((b) => b.id === "0");
+        s > -1 && n.unshift(n.splice(s, 1)[0]);
+      }
+      return o({
+        items: n.map((s) => (s.id === "0" && (s.title = a), s))
       });
-    });
-  });
+    }).catch((n) => o({ items: [] }));
+  }));
+}));
+export {
+  O as default
 };
-export { TagListComponent as default };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/tag-list-component.ts"],"sourcesContent":["import { createEventSubscriber, extendComponent, Tag } from '@telia-ace/knowledge-widget-core';\r\nimport { DataClient, DataType, TagsResult } from '@telia-ace/knowledge-widget-types-grid';\r\nimport { createReactComponent } from '@telia-ace/knowledge-widget-ui';\r\nimport { Params } from '@telia-ace/widget-utilities';\r\nimport { Container } from '@webprovisions/platform';\r\n\r\nexport type TagListComponentProps = {\r\n    header: string;\r\n    route?: string;\r\n    items: Tag[]; // internal\r\n    style?: 'badge' | 'pill';\r\n    showMatchCount?: boolean;\r\n    showIcons?: boolean;\r\n    static?: boolean;\r\n    rootTagLabel?: string;\r\n    fallbackOnInitialRoute?: boolean;\r\n    itemAriaLabel?: string;\r\n};\r\n\r\nconst TagListComponent = (container: Container) => {\r\n    return createReactComponent(container, 'tag-list', import('./tag-list'), (component) => {\r\n        const { events } = container.get('$widget');\r\n        const [subscribe, unsubscribe] = createEventSubscriber(events);\r\n\r\n        component.actions.create('fetch', ({ items = [] }) => {\r\n            return component.actions.dispatch('fetched', {\r\n                items,\r\n                loading: true,\r\n            });\r\n        });\r\n\r\n        component.actions.create('fetched', (input) => {\r\n            return component.writeProperties({ ...input, loading: false });\r\n        });\r\n\r\n        const fetch = (input: Params = {}) => {\r\n            component.writeProperties({ loading: true, error: undefined });\r\n\r\n            component.actions.dispatch('fetch', input);\r\n        };\r\n\r\n        container.getAsync('router').then((router) => {\r\n            const { params } = router.getRouteData();\r\n            fetch(params);\r\n        });\r\n\r\n        subscribe('router:changed', (event: any, { current }: any) => {\r\n            fetch(current.routeData.params);\r\n        });\r\n\r\n        return () => {\r\n            unsubscribe();\r\n        };\r\n    }).then(() => {\r\n        return extendComponent(container, 'tag-list', (component) => {\r\n            component.actions.watch('tag-list.fetch', (input, next) => {\r\n                return container.getAsync('dataClient').then((dataClient: DataClient) => {\r\n                    const { static: staticTags = false, rootTagLabel = '' } =\r\n                        component.properties() as TagListComponentProps;\r\n\r\n                    const { phrase, guideCategory, tag } = input;\r\n\r\n                    return dataClient\r\n                        .fetch(staticTags ? DataType.Tags : DataType.TagsOnGuides, {\r\n                            searchPhrase: phrase,\r\n                            categories: guideCategory,\r\n                            tagId: tag,\r\n                        })\r\n                        .then((tags: TagsResult = []) => {\r\n                            if (staticTags) {\r\n                                const indexOfRoot = tags.findIndex((tag) => tag.id === '0');\r\n\r\n                                if (indexOfRoot > -1) {\r\n                                    tags.unshift(tags.splice(indexOfRoot, 1)[0]);\r\n                                }\r\n                            }\r\n\r\n                            return next({\r\n                                items: tags.map((t) => {\r\n                                    if (t.id === '0') {\r\n                                        t.title = rootTagLabel;\r\n                                    }\r\n\r\n                                    return t;\r\n                                }),\r\n                            });\r\n                        })\r\n                        .catch((e) => {\r\n                            return next({ items: [] });\r\n                        });\r\n                });\r\n            });\r\n        });\r\n    });\r\n};\r\n\r\nexport default TagListComponent;\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmBM,MAAA,mBAAmB,CAAC,cAAyB;AAC/C,SAAO,qBAAqB,WAAW,YAAY,OAAO,kBAAe,CAAC,cAAc;AACpF,UAAM,EAAE,WAAW,UAAU,IAAI,SAAS;AAC1C,UAAM,CAAC,WAAW,eAAe,sBAAsB,MAAM;AAE7D,cAAU,QAAQ,OAAO,SAAS,CAAC,EAAE,QAAQ,CAAA,QAAS;AAC3C,aAAA,UAAU,QAAQ,SAAS,WAAW;AAAA,QACzC;AAAA,QACA,SAAS;AAAA,MAAA,CACZ;AAAA,IAAA,CACJ;AAED,cAAU,QAAQ,OAAO,WAAW,CAAC,UAAU;AAC3C,aAAO,UAAU,gBAAgB,iCAAK,QAAL,EAAY,SAAS,QAAO;AAAA,IAAA,CAChE;AAED,UAAM,QAAQ,CAAC,QAAgB,OAAO;AAClC,gBAAU,gBAAgB,EAAE,SAAS,MAAM,OAAO,QAAW;AAEnD,gBAAA,QAAQ,SAAS,SAAS,KAAK;AAAA,IAAA;AAG7C,cAAU,SAAS,QAAQ,EAAE,KAAK,CAAC,WAAW;AACpC,YAAA,EAAE,WAAW,OAAO,aAAa;AACvC,YAAM,MAAM;AAAA,IAAA,CACf;AAED,cAAU,kBAAkB,CAAC,OAAY,EAAE,cAAmB;AACpD,YAAA,QAAQ,UAAU,MAAM;AAAA,IAAA,CACjC;AAED,WAAO,MAAM;AACG;IAAA;AAAA,EAChB,CACH,EAAE,KAAK,MAAM;AACV,WAAO,gBAAgB,WAAW,YAAY,CAAC,cAAc;AACzD,gBAAU,QAAQ,MAAM,kBAAkB,CAAC,OAAO,SAAS;AACvD,eAAO,UAAU,SAAS,YAAY,EAAE,KAAK,CAAC,eAA2B;AACrE,gBAAM,EAAE,QAAQ,aAAa,OAAO,eAAe,OAC/C,UAAU;AAER,gBAAA,EAAE,QAAQ,eAAe,QAAQ;AAEvC,iBAAO,WACF,MAAM,aAAa,SAAS,OAAO,SAAS,cAAc;AAAA,YACvD,cAAc;AAAA,YACd,YAAY;AAAA,YACZ,OAAO;AAAA,UACV,CAAA,EACA,KAAK,CAAC,OAAmB,OAAO;AAC7B,gBAAI,YAAY;AACZ,oBAAM,cAAc,KAAK,UAAU,CAAC,SAAQ,KAAI,OAAO,GAAG;AAE1D,kBAAI,cAAc,IAAI;AAClB,qBAAK,QAAQ,KAAK,OAAO,aAAa,CAAC,EAAE,EAAE;AAAA,cAC/C;AAAA,YACJ;AAEA,mBAAO,KAAK;AAAA,cACR,OAAO,KAAK,IAAI,CAAC,MAAM;AACf,oBAAA,EAAE,OAAO,KAAK;AACd,oBAAE,QAAQ;AAAA,gBACd;AAEO,uBAAA;AAAA,cAAA,CACV;AAAA,YAAA,CACJ;AAAA,UAAA,CACJ,EACA,MAAM,CAAC,MAAM;AACV,mBAAO,KAAK,EAAE,OAAO,CAAA,EAAI,CAAA;AAAA,UAAA,CAC5B;AAAA,QAAA,CACR;AAAA,MAAA,CACJ;AAAA,IAAA,CACJ;AAAA,EAAA,CACJ;AACL;;"}
+{"version":3,"file":"index.js","sources":["../src/tag-list-component.ts"],"sourcesContent":["import { createEventSubscriber, extendComponent, Tag } from '@telia-ace/knowledge-widget-core';\r\nimport { DataClient, DataType, TagsResult } from '@telia-ace/knowledge-widget-types-grid';\r\nimport { createReactComponent } from '@telia-ace/knowledge-widget-ui';\r\nimport { Params } from '@telia-ace/widget-utilities';\r\nimport { Container } from '@webprovisions/platform';\r\n\r\nexport type TagListComponentProps = {\r\n    header: string;\r\n    route?: string;\r\n    items: Tag[]; // internal\r\n    style?: 'badge' | 'pill';\r\n    showMatchCount?: boolean;\r\n    showIcons?: boolean;\r\n    static?: boolean;\r\n    rootTagLabel?: string;\r\n    fallbackOnInitialRoute?: boolean;\r\n    itemAriaLabel?: string;\r\n};\r\n\r\nconst TagListComponent = (container: Container) => {\r\n    return createReactComponent(container, 'tag-list', import('./tag-list'), (component) => {\r\n        const { events } = container.get('$widget');\r\n        const [subscribe, unsubscribe] = createEventSubscriber(events);\r\n\r\n        component.actions.create('fetch', ({ items = [] }) => {\r\n            return component.actions.dispatch('fetched', {\r\n                items,\r\n                loading: true,\r\n            });\r\n        });\r\n\r\n        component.actions.create('fetched', (input) => {\r\n            return component.writeProperties({ ...input, loading: false });\r\n        });\r\n\r\n        const fetch = (input: Params = {}) => {\r\n            component.writeProperties({ loading: true, error: undefined });\r\n\r\n            component.actions.dispatch('fetch', input);\r\n        };\r\n\r\n        container.getAsync('router').then((router) => {\r\n            const { params } = router.getRouteData();\r\n            fetch(params);\r\n        });\r\n\r\n        subscribe('router:changed', (event: any, { current }: any) => {\r\n            fetch(current.routeData.params);\r\n        });\r\n\r\n        return () => {\r\n            unsubscribe();\r\n        };\r\n    }).then(() => {\r\n        return extendComponent(container, 'tag-list', (component) => {\r\n            component.actions.watch('tag-list.fetch', (input, next) => {\r\n                return container.getAsync('dataClient').then((dataClient: DataClient) => {\r\n                    const { static: staticTags = false, rootTagLabel = '' } =\r\n                        component.properties() as TagListComponentProps;\r\n\r\n                    const { phrase, guideCategory, tag } = input;\r\n\r\n                    return dataClient\r\n                        .fetch(staticTags ? DataType.Tags : DataType.TagsOnGuides, {\r\n                            searchPhrase: phrase,\r\n                            categories: guideCategory,\r\n                            tagId: tag,\r\n                        })\r\n                        .then((tags: TagsResult = []) => {\r\n                            if (staticTags) {\r\n                                const indexOfRoot = tags.findIndex((tag) => tag.id === '0');\r\n\r\n                                if (indexOfRoot > -1) {\r\n                                    tags.unshift(tags.splice(indexOfRoot, 1)[0]);\r\n                                }\r\n                            }\r\n\r\n                            return next({\r\n                                items: tags.map((t) => {\r\n                                    if (t.id === '0') {\r\n                                        t.title = rootTagLabel;\r\n                                    }\r\n\r\n                                    return t;\r\n                                }),\r\n                            });\r\n                        })\r\n                        .catch((e) => {\r\n                            return next({ items: [] });\r\n                        });\r\n                });\r\n            });\r\n        });\r\n    });\r\n};\r\n\r\nexport default TagListComponent;\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAmBM,MAAA,IAAmB,CAAC,MACf,EAAqB,GAAW,YAAY,OAAO,2BAAe,CAAC,MAAc;AACpF,QAAM,EAAE,cAAW,EAAU,IAAI,SAAS,GACpC,CAAC,GAAW,KAAe,EAAsB,CAAM;AAE7D,IAAU,QAAQ,OAAO,SAAS,CAAC,EAAE,WAAQ,CAAA,QAClC,EAAU,QAAQ,SAAS,WAAW;AAAA,IACzC;AAAA,IACA,SAAS;AAAA,EAAA,CACZ,CACJ,GAED,EAAU,QAAQ,OAAO,WAAW,CAAC,MAC1B,EAAU,gBAAgB,QAAK,IAAL,EAAY,SAAS,KAAO,CAChE;AAED,QAAM,IAAQ,CAAC,IAAgB,OAAO;AAClC,MAAU,gBAAgB,EAAE,SAAS,IAAM,OAAO,QAAW,GAEnD,EAAA,QAAQ,SAAS,SAAS,CAAK;AAAA,EAAA;AAG7C,WAAU,SAAS,QAAQ,EAAE,KAAK,CAAC,MAAW;AACpC,UAAA,EAAE,cAAW,EAAO,aAAa;AACvC,MAAM,CAAM;AAAA,EAAA,CACf,GAED,EAAU,kBAAkB,CAAC,GAAY,EAAE,iBAAmB;AACpD,MAAA,EAAQ,UAAU,MAAM;AAAA,EAAA,CACjC,GAEM,MAAM;AACG;EAAA;AAChB,CACH,EAAE,KAAK,MACG,EAAgB,GAAW,YAAY,CAAC,MAAc;AACzD,IAAU,QAAQ,MAAM,kBAAkB,CAAC,GAAO,MACvC,EAAU,SAAS,YAAY,EAAE,KAAK,CAAC,MAA2B;AACrE,UAAM,EAAE,QAAQ,IAAa,IAAO,kBAAe,OAC/C,EAAU,cAER,EAAE,WAAQ,kBAAe,WAAQ;AAEvC,WAAO,EACF,MAAM,IAAa,EAAS,OAAO,EAAS,cAAc;AAAA,MACvD,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,OAAO;AAAA,IACV,CAAA,EACA,KAAK,CAAC,IAAmB,OAAO;AAC7B,UAAI,GAAY;AACZ,cAAM,IAAc,EAAK,UAAU,CAAC,MAAQ,EAAI,OAAO,GAAG;AAE1D,QAAI,IAAc,MACd,EAAK,QAAQ,EAAK,OAAO,GAAa,CAAC,EAAE,EAAE;AAAA,MAEnD;AAEA,aAAO,EAAK;AAAA,QACR,OAAO,EAAK,IAAI,CAAC,MACT,GAAE,OAAO,OACT,GAAE,QAAQ,IAGP,EACV;AAAA,MAAA,CACJ;AAAA,IAAA,CACJ,EACA,MAAM,CAAC,MACG,EAAK,EAAE,OAAO,CAAA,EAAI,CAAA,CAC5B;AAAA,EAAA,CACR,CACJ;AAAA,CACJ,CACJ;"}

package/dist/tag-list.316a76ef.js

@@ -0,0 +1,206 @@
+var P = Object.defineProperty, D = Object.defineProperties;
+var U = Object.getOwnPropertyDescriptors;
+var d = Object.getOwnPropertySymbols;
+var w = Object.prototype.hasOwnProperty, L = Object.prototype.propertyIsEnumerable;
+var z = (e, t, a) => t in e ? P(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a, h = (e, t) => {
+  for (var a in t || (t = {}))
+    w.call(t, a) && z(e, a, t[a]);
+  if (d)
+    for (var a of d(t))
+      L.call(t, a) && z(e, a, t[a]);
+  return e;
+}, g = (e, t) => D(e, U(t));
+var S = (e, t) => {
+  var a = {};
+  for (var o in e)
+    w.call(e, o) && t.indexOf(o) < 0 && (a[o] = e[o]);
+  if (e != null && d)
+    for (var o of d(e))
+      t.indexOf(o) < 0 && L.call(e, o) && (a[o] = e[o]);
+  return a;
+};
+import { initialRouteFallback as q } from "@telia-ace/knowledge-widget-component-utilities";
+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 T, borderTabStyle as v, Text as Z, SymbolBadge as _ } from "@telia-ace/knowledge-widget-ui";
+import { appendClassNames as E } from "@telia-ace/widget-utilities";
+import r from "react";
+import l, { css as i } from "styled-components";
+const ee = (e, t, a) => e && a ? /* @__PURE__ */ r.createElement(k, {
+  symbol: a,
+  size: 18
+}) : t ? /* @__PURE__ */ r.createElement(k, {
+  symbol: t,
+  size: 18
+}) : null, he = (a) => {
+  var o = a, { className: e } = o, t = S(o, ["className"]);
+  const {
+    route: C = "search",
+    items: p = [],
+    header: I,
+    loading: n = !1,
+    style: f = "badge",
+    showMatchCount: R = !1,
+    showIcons: A = !1,
+    static: s = !1,
+    fallbackOnInitialRoute: B = !1,
+    itemAriaLabel: b
+  } = G(), j = H(), { params: y } = J();
+  if (!p.length && (!n || s))
+    return K(j, g(h({}, t), {
+      className: E(e, "humany-tag-list")
+    }));
+  const F = f === "badge" ? ae : oe;
+  return /* @__PURE__ */ r.createElement(te, g(h({}, t), {
+    "data-loading": !s && n,
+    className: E(e, "humany-tag-list"),
+    header: !s && n ? "" : I,
+    items: p,
+    type: f,
+    renderItem: (c) => {
+      const { id: $, title: x, defaultIcon: M, activeIcon: N, matches: m } = c, u = y.tag === c.id || !y.tag && c.id === "0", O = b && b.replace("{{title}}", x).replace("{{matches}}", `${m}`);
+      return /* @__PURE__ */ r.createElement(se, {
+        key: $,
+        notAllowed: (s && !m && f === "pill").toString(),
+        "data-tag": $
+      }, /* @__PURE__ */ r.createElement(F, g(h({}, q(c, C, B, "tag")), {
+        role: "button",
+        "aria-pressed": u,
+        "aria-label": O,
+        disabled: s && !m,
+        selected: u,
+        text: x
+      }), A && ee(u, M, N), R && /* @__PURE__ */ r.createElement(re, null, `(${m})`)));
+    }
+  }), !s && /* @__PURE__ */ r.createElement(Q, {
+    loading: n
+  }));
+}, te = l(V)`
+    ${W}
+    ${X}
+  ${Y}
+  justify-content: flex-start;
+    padding: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.large;
+}};
+    ul {
+        display: flex;
+        flex-wrap: wrap;
+        ${(e) => e.type === "pill" && i`
+                justify-content: center;
+            `}
+
+        li {
+            margin: 0 ${(e) => {
+  var t, a;
+  return `${(t = e.theme.sizes) == null ? void 0 : t.small} ${(a = e.theme.sizes) == null ? void 0 : a.small}`;
+}} 0;
+        }
+    }
+`, ae = l(T)`
+    padding: 8px 15px;
+    background-color: ${(e) => {
+  var t, a;
+  return e.selected ? (t = e.theme.colors) == null ? void 0 : t.text : (a = e.theme.colors) == null ? void 0 : a.primary;
+}};
+    border-radius: ${(e) => e.theme.borderRadius};
+    font-weight: 300;
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+    display: flex;
+    align-items: center;
+    color: #ffffff;
+
+    &:focus {
+        ${(e) => {
+  var t;
+  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && i`
+                ${v}
+                padding: 6px 15px;
+                background-color: transparent;
+            `;
+}};
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            background-color: ${(e) => {
+  var t, a;
+  return e.selected ? (t = e.theme.colors) == null ? void 0 : t.primary : (a = e.theme.colors) == null ? void 0 : a.text;
+}};
+        }
+    }
+`, oe = l(T)`
+    border: 1px solid ${(e) => {
+  var t;
+  return e.selected ? (t = e.theme.colors) == null ? void 0 : t.text : "transparent";
+}};
+    line-height: 2em;
+    border-radius: 1em;
+    padding: 0 0.5em;
+    display: flex;
+    align-items: center;
+    font-weight: ${(e) => e.selected ? "normal" : 300};
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+
+    &:disabled {
+        color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.textLight;
+}};
+    }
+
+    &:focus {
+        ${(e) => {
+  var t;
+  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && i`
+                ${v}
+                border-radius: 1em;
+            `;
+}}
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            border: 1px solid ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+        }
+    }
+
+    ${(e) => e.disabled && i`
+            opacity: 0.5;
+        `}
+`, re = l(Z)`
+    order: 2;
+    margin-left: ${(e) => e.theme.sizes.small};
+`, k = l(_)`
+    margin-right: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}};
+    ${(e) => {
+  if (e.symbol.type === "Uri")
+    return `
+        width: ${e.size}px;
+        height: ${e.size}px;
+      `;
+  if (e.symbol.type === "FontAwesome")
+    return `
+        font-size: ${e.size}px;
+      `;
+}}
+`, se = l.li`
+    ${(e) => e.notAllowed === "true" && i`
+            cursor: not-allowed;
+        `}
+`;
+export {
+  he as default
+};
+//# sourceMappingURL=tag-list.316a76ef.js.map

package/dist/tag-list.316a76ef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-list.316a76ef.js","sources":["../src/tag-list.tsx"],"sourcesContent":["import { initialRouteFallback } from '@telia-ace/knowledge-widget-component-utilities';\r\nimport { Symbol, Tag } from '@telia-ace/knowledge-widget-core';\r\nimport {\r\n    borderTabStyle,\r\n    contentBox,\r\n    createEmptyComponent,\r\n    ItemList,\r\n    itemList,\r\n    Loader,\r\n    loadingOpacity,\r\n    SymbolBadge,\r\n    Text,\r\n    TextLink,\r\n    useContainer,\r\n    useProperties,\r\n    useRouteData,\r\n} from '@telia-ace/knowledge-widget-ui';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { TagListComponentProps } from './tag-list-component';\r\n\r\ntype Props = {\r\n    className: string;\r\n};\r\n\r\nconst getIcon = (selected: boolean, defaultIcon?: Symbol, activeIcon?: Symbol) => {\r\n    if (selected && activeIcon) {\r\n        return <StyledSymbolBadge symbol={activeIcon} size={18} />;\r\n    }\r\n    if (defaultIcon) {\r\n        return <StyledSymbolBadge symbol={defaultIcon} size={18} />;\r\n    }\r\n    return null;\r\n};\r\n\r\nconst TagList: React.SFC<Props> = ({ className, ...other }) => {\r\n    const {\r\n        route = 'search',\r\n        items = [],\r\n        header,\r\n        loading = false,\r\n        style = 'badge',\r\n        showMatchCount = false,\r\n        showIcons = false,\r\n        static: staticTags = false,\r\n        fallbackOnInitialRoute = false,\r\n        itemAriaLabel,\r\n    } = useProperties<TagListComponentProps>();\r\n    const container = useContainer();\r\n    const { params } = useRouteData();\r\n\r\n    if (!items.length && (!loading || staticTags)) {\r\n        return createEmptyComponent(container, {\r\n            ...other,\r\n            className: appendClassNames(className, 'humany-tag-list'),\r\n        });\r\n    }\r\n\r\n    const Component = style === 'badge' ? StyledBadge : StyledPill;\r\n\r\n    return (\r\n        <StyledItemList\r\n            {...other}\r\n            data-loading={!staticTags && loading}\r\n            className={appendClassNames(className, 'humany-tag-list')}\r\n            header={!staticTags && loading ? '' : header}\r\n            items={items}\r\n            type={style}\r\n            renderItem={(item: Tag) => {\r\n                const { id, title, defaultIcon, activeIcon, matches } = item;\r\n                const selected = params.tag === item.id || (!params.tag && item.id === '0');\r\n\r\n                const ariaLabel =\r\n                    itemAriaLabel &&\r\n                    itemAriaLabel.replace('{{title}}', title).replace('{{matches}}', `${matches}`);\r\n\r\n                return (\r\n                    <StyledLi\r\n                        key={id}\r\n                        notAllowed={(staticTags && !matches && style === 'pill').toString()}\r\n                        data-tag={id}\r\n                    >\r\n                        <Component\r\n                            {...initialRouteFallback(item, route, fallbackOnInitialRoute, 'tag')}\r\n                            role=\"button\"\r\n                            aria-pressed={selected}\r\n                            aria-label={ariaLabel}\r\n                            disabled={staticTags && !matches}\r\n                            selected={selected}\r\n                            text={title}\r\n                        >\r\n                            {showIcons && getIcon(selected, defaultIcon, activeIcon)}\r\n                            {showMatchCount && (\r\n                                <StyledMatchCount>{`(${matches})`}</StyledMatchCount>\r\n                            )}\r\n                        </Component>\r\n                    </StyledLi>\r\n                );\r\n            }}\r\n        >\r\n            {!staticTags && <Loader loading={loading} />}\r\n        </StyledItemList>\r\n    );\r\n};\r\n\r\nexport default TagList;\r\n\r\nconst StyledItemList = styled(ItemList)<{ 'data-loading': boolean } & any>`\r\n    ${contentBox}\r\n    ${itemList}\r\n  ${loadingOpacity}\r\n  justify-content: flex-start;\r\n    padding: ${(p) => p.theme.sizes?.large};\r\n    ul {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        ${(p) =>\r\n            p.type === 'pill' &&\r\n            css`\r\n                justify-content: center;\r\n            `}\r\n\r\n        li {\r\n            margin: 0 ${(p) => `${p.theme.sizes?.small} ${p.theme.sizes?.small}`} 0;\r\n        }\r\n    }\r\n`;\r\n\r\nconst StyledBadge = styled(TextLink)<any>`\r\n    padding: 8px 15px;\r\n    background-color: ${(p) => (p.selected ? p.theme.colors?.text : p.theme.colors?.primary)};\r\n    border-radius: ${(p) => p.theme.borderRadius};\r\n    font-weight: 300;\r\n    font-size: ${(p) => p.theme.fonts?.normal};\r\n    display: flex;\r\n    align-items: center;\r\n    color: #ffffff;\r\n\r\n    &:focus {\r\n        ${(p) =>\r\n            p.theme.accessibility?.isTabbing &&\r\n            css`\r\n                ${borderTabStyle}\r\n                padding: 6px 15px;\r\n                background-color: transparent;\r\n            `};\r\n    }\r\n\r\n    @media (hover: hover) {\r\n        &:hover {\r\n            background-color: ${(p) =>\r\n                p.selected ? p.theme.colors?.primary : p.theme.colors?.text};\r\n        }\r\n    }\r\n`;\r\n\r\nconst StyledPill = styled(TextLink)<any>`\r\n    border: 1px solid ${(p) => (p.selected ? p.theme.colors?.text : 'transparent')};\r\n    line-height: 2em;\r\n    border-radius: 1em;\r\n    padding: 0 0.5em;\r\n    display: flex;\r\n    align-items: center;\r\n    font-weight: ${(p) => (p.selected ? 'normal' : 300)};\r\n    color: ${(p) => p.theme.colors?.text};\r\n\r\n    &:disabled {\r\n        color: ${(p) => p.theme.colors?.textLight};\r\n    }\r\n\r\n    &:focus {\r\n        ${(p) =>\r\n            p.theme.accessibility?.isTabbing &&\r\n            css`\r\n                ${borderTabStyle}\r\n                border-radius: 1em;\r\n            `}\r\n    }\r\n\r\n    @media (hover: hover) {\r\n        &:hover {\r\n            border: 1px solid ${(p) => p.theme.colors?.text};\r\n        }\r\n    }\r\n\r\n    ${(p) =>\r\n        p.disabled &&\r\n        css`\r\n            opacity: 0.5;\r\n        `}\r\n`;\r\n\r\nconst StyledMatchCount = styled(Text)<any>`\r\n    order: 2;\r\n    margin-left: ${(p) => p.theme.sizes.small};\r\n`;\r\n\r\nconst StyledSymbolBadge = styled(SymbolBadge)<{ size: number; symbol: Symbol }>`\r\n    margin-right: ${(p) => p.theme.sizes?.small};\r\n    ${(p: any) => {\r\n        if (p.symbol.type === 'Uri') {\r\n            return `\r\n        width: ${p.size}px;\r\n        height: ${p.size}px;\r\n      `;\r\n        }\r\n\r\n        if (p.symbol.type === 'FontAwesome') {\r\n            return `\r\n        font-size: ${p.size}px;\r\n      `;\r\n        }\r\n    }}\r\n`;\r\n\r\nconst StyledLi = styled.li<{ notAllowed: string }>`\r\n    ${(p) =>\r\n        p.notAllowed === 'true' &&\r\n        css`\r\n            cursor: not-allowed;\r\n        `}\r\n`;\r\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,13 +1,17 @@
 {
     "name": "@telia-ace/knowledge-widget-components-tag-list",
-    "version": "1.0.15",
+    "version": "1.0.18",
     "description": "Tag list component for ACE Knowledge Widgets.",
     "license": "SEE LICENSE IN LICENSE.txt",
     "author": "Telia Company AB",
     "keywords": [
         "telia"
     ],
-    "module": "dist/index.js",
+    "exports": {
+        "development": "./src/index.ts",
+        "default": "./dist/index.js"
+    },
+    "type": "module",
     "types": "dist/index.d.ts",
     "files": [
         "LICENSE.txt",
@@ -24,10 +28,10 @@
     },
     "sideEffects": false,
     "dependencies": {
-        "@telia-ace/knowledge-widget-component-utilities": "^1.0.15",
-        "@telia-ace/knowledge-widget-core": "^1.0.12",
-        "@telia-ace/knowledge-widget-types-grid": "^1.0.21",
-        "@telia-ace/knowledge-widget-ui": "^1.0.18",
+        "@telia-ace/knowledge-widget-component-utilities": "^1.0.18",
+        "@telia-ace/knowledge-widget-core": "^1.0.16",
+        "@telia-ace/knowledge-widget-types-grid": "^1.0.25",
+        "@telia-ace/knowledge-widget-ui": "^1.0.22",
         "@telia-ace/widget-utilities": "^1.0.2",
         "@webprovisions/platform": "^1.1.2"
     },
@@ -41,5 +45,5 @@
         "@types/react-dom": "^16.8.0",
         "@types/styled-components": "^5.1.7"
     },
-    "gitHead": "92437eea9b29ae367ef7794b1b214e42072fb0d1"
+    "gitHead": "2bb53be0a4e6971998cc1d1c91f0e980df2ad485"
 }

package/dist/tag-list.js

@@ -1,236 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-import { initialRouteFallback } from "@telia-ace/knowledge-widget-component-utilities";
-import { useProperties, useContainer, useRouteData, createEmptyComponent, Loader, ItemList, contentBox, itemList, loadingOpacity, TextLink, borderTabStyle, Text, SymbolBadge } from "@telia-ace/knowledge-widget-ui";
-import { appendClassNames } from "@telia-ace/widget-utilities";
-import React from "react";
-import styled, { css } from "styled-components";
-const getIcon = (selected, defaultIcon, activeIcon) => {
-  if (selected && activeIcon) {
-    return /* @__PURE__ */ React.createElement(StyledSymbolBadge, {
-      symbol: activeIcon,
-      size: 18
-    });
-  }
-  if (defaultIcon) {
-    return /* @__PURE__ */ React.createElement(StyledSymbolBadge, {
-      symbol: defaultIcon,
-      size: 18
-    });
-  }
-  return null;
-};
-const TagList = (_a) => {
-  var _b = _a, { className } = _b, other = __objRest(_b, ["className"]);
-  const {
-    route = "search",
-    items = [],
-    header,
-    loading = false,
-    style = "badge",
-    showMatchCount = false,
-    showIcons = false,
-    static: staticTags = false,
-    fallbackOnInitialRoute = false,
-    itemAriaLabel
-  } = useProperties();
-  const container = useContainer();
-  const { params } = useRouteData();
-  if (!items.length && (!loading || staticTags)) {
-    return createEmptyComponent(container, __spreadProps(__spreadValues({}, other), {
-      className: appendClassNames(className, "humany-tag-list")
-    }));
-  }
-  const Component = style === "badge" ? StyledBadge : StyledPill;
-  return /* @__PURE__ */ React.createElement(StyledItemList, __spreadProps(__spreadValues({}, other), {
-    "data-loading": !staticTags && loading,
-    className: appendClassNames(className, "humany-tag-list"),
-    header: !staticTags && loading ? "" : header,
-    items,
-    type: style,
-    renderItem: (item) => {
-      const { id, title, defaultIcon, activeIcon, matches } = item;
-      const selected = params.tag === item.id || !params.tag && item.id === "0";
-      const ariaLabel = itemAriaLabel && itemAriaLabel.replace("{{title}}", title).replace("{{matches}}", `${matches}`);
-      return /* @__PURE__ */ React.createElement(StyledLi, {
-        key: id,
-        notAllowed: (staticTags && !matches && style === "pill").toString(),
-        "data-tag": id
-      }, /* @__PURE__ */ React.createElement(Component, __spreadProps(__spreadValues({}, initialRouteFallback(item, route, fallbackOnInitialRoute, "tag")), {
-        role: "button",
-        "aria-pressed": selected,
-        "aria-label": ariaLabel,
-        disabled: staticTags && !matches,
-        selected,
-        text: title
-      }), showIcons && getIcon(selected, defaultIcon, activeIcon), showMatchCount && /* @__PURE__ */ React.createElement(StyledMatchCount, null, `(${matches})`)));
-    }
-  }), !staticTags && /* @__PURE__ */ React.createElement(Loader, {
-    loading
-  }));
-};
-const StyledItemList = styled(ItemList)`
-    ${contentBox}
-    ${itemList}
-  ${loadingOpacity}
-  justify-content: flex-start;
-    padding: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
-}};
-    ul {
-        display: flex;
-        flex-wrap: wrap;
-        ${(p) => p.type === "pill" && css`
-                justify-content: center;
-            `}
-
-        li {
-            margin: 0 ${(p) => {
-  var _a, _b;
-  return `${(_a = p.theme.sizes) == null ? void 0 : _a.small} ${(_b = p.theme.sizes) == null ? void 0 : _b.small}`;
-}} 0;
-        }
-    }
-`;
-const StyledBadge = styled(TextLink)`
-    padding: 8px 15px;
-    background-color: ${(p) => {
-  var _a, _b;
-  return p.selected ? (_a = p.theme.colors) == null ? void 0 : _a.text : (_b = p.theme.colors) == null ? void 0 : _b.primary;
-}};
-    border-radius: ${(p) => p.theme.borderRadius};
-    font-weight: 300;
-    font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
-}};
-    display: flex;
-    align-items: center;
-    color: #ffffff;
-
-    &:focus {
-        ${(p) => {
-  var _a;
-  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
-                ${borderTabStyle}
-                padding: 6px 15px;
-                background-color: transparent;
-            `;
-}};
-    }
-
-    @media (hover: hover) {
-        &:hover {
-            background-color: ${(p) => {
-  var _a, _b;
-  return p.selected ? (_a = p.theme.colors) == null ? void 0 : _a.primary : (_b = p.theme.colors) == null ? void 0 : _b.text;
-}};
-        }
-    }
-`;
-const StyledPill = styled(TextLink)`
-    border: 1px solid ${(p) => {
-  var _a;
-  return p.selected ? (_a = p.theme.colors) == null ? void 0 : _a.text : "transparent";
-}};
-    line-height: 2em;
-    border-radius: 1em;
-    padding: 0 0.5em;
-    display: flex;
-    align-items: center;
-    font-weight: ${(p) => p.selected ? "normal" : 300};
-    color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-
-    &:disabled {
-        color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.textLight;
-}};
-    }
-
-    &:focus {
-        ${(p) => {
-  var _a;
-  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
-                ${borderTabStyle}
-                border-radius: 1em;
-            `;
-}}
-    }
-
-    @media (hover: hover) {
-        &:hover {
-            border: 1px solid ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-        }
-    }
-
-    ${(p) => p.disabled && css`
-            opacity: 0.5;
-        `}
-`;
-const StyledMatchCount = styled(Text)`
-    order: 2;
-    margin-left: ${(p) => p.theme.sizes.small};
-`;
-const StyledSymbolBadge = styled(SymbolBadge)`
-    margin-right: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
-}};
-    ${(p) => {
-  if (p.symbol.type === "Uri") {
-    return `
-        width: ${p.size}px;
-        height: ${p.size}px;
-      `;
-  }
-  if (p.symbol.type === "FontAwesome") {
-    return `
-        font-size: ${p.size}px;
-      `;
-  }
-}}
-`;
-const StyledLi = styled.li`
-    ${(p) => p.notAllowed === "true" && css`
-            cursor: not-allowed;
-        `}
-`;
-export { TagList as default };
-//# sourceMappingURL=tag-list.js.map

package/dist/tag-list.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tag-list.js","sources":["../src/tag-list.tsx"],"sourcesContent":["import { initialRouteFallback } from '@telia-ace/knowledge-widget-component-utilities';\r\nimport { Symbol, Tag } from '@telia-ace/knowledge-widget-core';\r\nimport {\r\n    borderTabStyle,\r\n    contentBox,\r\n    createEmptyComponent,\r\n    ItemList,\r\n    itemList,\r\n    Loader,\r\n    loadingOpacity,\r\n    SymbolBadge,\r\n    Text,\r\n    TextLink,\r\n    useContainer,\r\n    useProperties,\r\n    useRouteData,\r\n} from '@telia-ace/knowledge-widget-ui';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { TagListComponentProps } from './tag-list-component';\r\n\r\ntype Props = {\r\n    className: string;\r\n};\r\n\r\nconst getIcon = (selected: boolean, defaultIcon?: Symbol, activeIcon?: Symbol) => {\r\n    if (selected && activeIcon) {\r\n        return <StyledSymbolBadge symbol={activeIcon} size={18} />;\r\n    }\r\n    if (defaultIcon) {\r\n        return <StyledSymbolBadge symbol={defaultIcon} size={18} />;\r\n    }\r\n    return null;\r\n};\r\n\r\nconst TagList: React.SFC<Props> = ({ className, ...other }) => {\r\n    const {\r\n        route = 'search',\r\n        items = [],\r\n        header,\r\n        loading = false,\r\n        style = 'badge',\r\n        showMatchCount = false,\r\n        showIcons = false,\r\n        static: staticTags = false,\r\n        fallbackOnInitialRoute = false,\r\n        itemAriaLabel,\r\n    } = useProperties<TagListComponentProps>();\r\n    const container = useContainer();\r\n    const { params } = useRouteData();\r\n\r\n    if (!items.length && (!loading || staticTags)) {\r\n        return createEmptyComponent(container, {\r\n            ...other,\r\n            className: appendClassNames(className, 'humany-tag-list'),\r\n        });\r\n    }\r\n\r\n    const Component = style === 'badge' ? StyledBadge : StyledPill;\r\n\r\n    return (\r\n        <StyledItemList\r\n            {...other}\r\n            data-loading={!staticTags && loading}\r\n            className={appendClassNames(className, 'humany-tag-list')}\r\n            header={!staticTags && loading ? '' : header}\r\n            items={items}\r\n            type={style}\r\n            renderItem={(item: Tag) => {\r\n                const { id, title, defaultIcon, activeIcon, matches } = item;\r\n                const selected = params.tag === item.id || (!params.tag && item.id === '0');\r\n\r\n                const ariaLabel =\r\n                    itemAriaLabel &&\r\n                    itemAriaLabel.replace('{{title}}', title).replace('{{matches}}', `${matches}`);\r\n\r\n                return (\r\n                    <StyledLi\r\n                        key={id}\r\n                        notAllowed={(staticTags && !matches && style === 'pill').toString()}\r\n                        data-tag={id}\r\n                    >\r\n                        <Component\r\n                            {...initialRouteFallback(item, route, fallbackOnInitialRoute, 'tag')}\r\n                            role=\"button\"\r\n                            aria-pressed={selected}\r\n                            aria-label={ariaLabel}\r\n                            disabled={staticTags && !matches}\r\n                            selected={selected}\r\n                            text={title}\r\n                        >\r\n                            {showIcons && getIcon(selected, defaultIcon, activeIcon)}\r\n                            {showMatchCount && (\r\n                                <StyledMatchCount>{`(${matches})`}</StyledMatchCount>\r\n                            )}\r\n                        </Component>\r\n                    </StyledLi>\r\n                );\r\n            }}\r\n        >\r\n            {!staticTags && <Loader loading={loading} />}\r\n        </StyledItemList>\r\n    );\r\n};\r\n\r\nexport default TagList;\r\n\r\nconst StyledItemList = styled(ItemList)<{ 'data-loading': boolean } & any>`\r\n    ${contentBox}\r\n    ${itemList}\r\n  ${loadingOpacity}\r\n  justify-content: flex-start;\r\n    padding: ${(p) => p.theme.sizes?.large};\r\n    ul {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        ${(p) =>\r\n            p.type === 'pill' &&\r\n            css`\r\n                justify-content: center;\r\n            `}\r\n\r\n        li {\r\n            margin: 0 ${(p) => `${p.theme.sizes?.small} ${p.theme.sizes?.small}`} 0;\r\n        }\r\n    }\r\n`;\r\n\r\nconst StyledBadge = styled(TextLink)<any>`\r\n    padding: 8px 15px;\r\n    background-color: ${(p) => (p.selected ? p.theme.colors?.text : p.theme.colors?.primary)};\r\n    border-radius: ${(p) => p.theme.borderRadius};\r\n    font-weight: 300;\r\n    font-size: ${(p) => p.theme.fonts?.normal};\r\n    display: flex;\r\n    align-items: center;\r\n    color: #ffffff;\r\n\r\n    &:focus {\r\n        ${(p) =>\r\n            p.theme.accessibility?.isTabbing &&\r\n            css`\r\n                ${borderTabStyle}\r\n                padding: 6px 15px;\r\n                background-color: transparent;\r\n            `};\r\n    }\r\n\r\n    @media (hover: hover) {\r\n        &:hover {\r\n            background-color: ${(p) =>\r\n                p.selected ? p.theme.colors?.primary : p.theme.colors?.text};\r\n        }\r\n    }\r\n`;\r\n\r\nconst StyledPill = styled(TextLink)<any>`\r\n    border: 1px solid ${(p) => (p.selected ? p.theme.colors?.text : 'transparent')};\r\n    line-height: 2em;\r\n    border-radius: 1em;\r\n    padding: 0 0.5em;\r\n    display: flex;\r\n    align-items: center;\r\n    font-weight: ${(p) => (p.selected ? 'normal' : 300)};\r\n    color: ${(p) => p.theme.colors?.text};\r\n\r\n    &:disabled {\r\n        color: ${(p) => p.theme.colors?.textLight};\r\n    }\r\n\r\n    &:focus {\r\n        ${(p) =>\r\n            p.theme.accessibility?.isTabbing &&\r\n            css`\r\n                ${borderTabStyle}\r\n                border-radius: 1em;\r\n            `}\r\n    }\r\n\r\n    @media (hover: hover) {\r\n        &:hover {\r\n            border: 1px solid ${(p) => p.theme.colors?.text};\r\n        }\r\n    }\r\n\r\n    ${(p) =>\r\n        p.disabled &&\r\n        css`\r\n            opacity: 0.5;\r\n        `}\r\n`;\r\n\r\nconst StyledMatchCount = styled(Text)<any>`\r\n    order: 2;\r\n    margin-left: ${(p) => p.theme.sizes.small};\r\n`;\r\n\r\nconst StyledSymbolBadge = styled(SymbolBadge)<{ size: number; symbol: Symbol }>`\r\n    margin-right: ${(p) => p.theme.sizes?.small};\r\n    ${(p: any) => {\r\n        if (p.symbol.type === 'Uri') {\r\n            return `\r\n        width: ${p.size}px;\r\n        height: ${p.size}px;\r\n      `;\r\n        }\r\n\r\n        if (p.symbol.type === 'FontAwesome') {\r\n            return `\r\n        font-size: ${p.size}px;\r\n      `;\r\n        }\r\n    }}\r\n`;\r\n\r\nconst StyledLi = styled.li<{ notAllowed: string }>`\r\n    ${(p) =>\r\n        p.notAllowed === 'true' &&\r\n        css`\r\n            cursor: not-allowed;\r\n        `}\r\n`;\r\n"],"names":[],"mappings":"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"}