@telia-ace/knowledge-widget-components-tag-list 0.0.1

package/index.d.ts

@@ -0,0 +1,3 @@
+import { default as TagListComponent } from './tag-list-component';
+
+export default TagListComponent;

package/index.js

@@ -0,0 +1 @@
+"use strict";const d=require("@telia-ace/knowledge-data-client"),g=require("@telia-ace/knowledge-widget-core"),p=require("@telia-ace/knowledge-widget-ui"),b=s=>p.createReactComponent(s,"tag-list",Promise.resolve().then(()=>require("./tag-list-bd4c0029.js")),t=>{const{events:o}=s.get("$widget"),[c,u]=g.createEventSubscriber(o);t.actions.create("fetch",({items:e=[]})=>t.actions.dispatch("fetched",{items:e,loading:!0})),t.actions.create("fetched",e=>t.writeProperties({...e,loading:!1}));const a=(e={})=>{t.writeProperties({loading:!0,error:void 0}),t.actions.dispatch("fetch",e)};return s.getAsync("router").then(e=>{const{params:i}=e.getRouteData();a(i)}),c("router:changed",(e,{current:i})=>{a(i.routeData.params)}),()=>{u()}}).then(()=>g.extendComponent(s,"tag-list",t=>{t.actions.watch("tag-list.fetch",(o,c)=>d.DataClient.getInstance(s).then(u=>{const{static:a=!1,rootTagLabel:e=""}=t.properties(),{phrase:i,guideCategory:h,tag:l}=o;return u.fetch(a?d.DataType.Tags:d.DataType.TagsOnGuides,{searchPhrase:i,categories:h,tagId:l}).then((n=[])=>{if(a){const r=n.findIndex(f=>f.id==="0");r>-1&&n.unshift(n.splice(r,1)[0])}return c({items:n.map(r=>(r.id==="0"&&(r.title=e),r))})}).catch(n=>c({items:[]}))}))}));module.exports=b;

package/index.mjs

@@ -0,0 +1,48 @@
+import { DataClient as p, DataType as d } from "@telia-ace/knowledge-data-client";
+import { createEventSubscriber as l, extendComponent as m } from "@telia-ace/knowledge-widget-core";
+import { createReactComponent as b } from "@telia-ace/knowledge-widget-ui";
+const w = (a) => b(
+  a,
+  "tag-list",
+  import("./tag-list-d143c7b3.mjs"),
+  (e) => {
+    const { events: o } = a.get("$widget"), [n, u] = l(o);
+    e.actions.create("fetch", ({ items: t = [] }) => e.actions.dispatch("fetched", {
+      items: t,
+      loading: !0
+    })), e.actions.create("fetched", (t) => e.writeProperties({ ...t, loading: !1 }));
+    const s = (t = {}) => {
+      e.writeProperties({ loading: !0, error: void 0 }), e.actions.dispatch("fetch", t);
+    };
+    return a.getAsync("router").then((t) => {
+      const { params: i } = t.getRouteData();
+      s(i);
+    }), n("router:changed", (t, { current: i }) => {
+      s(i.routeData.params);
+    }), () => {
+      u();
+    };
+  }
+).then(() => m(a, "tag-list", (e) => {
+  e.actions.watch("tag-list.fetch", (o, n) => p.getInstance(a).then(
+    (u) => {
+      const { static: s = !1, rootTagLabel: t = "" } = e.properties(), { phrase: i, guideCategory: h, tag: f } = o;
+      return u.fetch(s ? d.Tags : d.TagsOnGuides, {
+        searchPhrase: i,
+        categories: h,
+        tagId: f
+      }).then((c = []) => {
+        if (s) {
+          const r = c.findIndex((g) => g.id === "0");
+          r > -1 && c.unshift(c.splice(r, 1)[0]);
+        }
+        return n({
+          items: c.map((r) => (r.id === "0" && (r.title = t), r))
+        });
+      }).catch((c) => n({ items: [] }));
+    }
+  ));
+}));
+export {
+  w as default
+};

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@telia-ace/knowledge-widget-components-tag-list",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  },
+  "dependencies": {
+    "@telia-ace/knowledge-widget-core": "*",
+    "@telia-ace/knowledge-data-client": "*",
+    "@telia-ace/knowledge-widget-ui": "*",
+    "@telia-ace/widget-utilities": "*",
+    "@telia-ace/knowledge-widget-component-utilities": "*",
+    "@webprovisions/platform": "^1.1.4"
+  },
+  "peerDependencies": {
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0",
+    "react": "18.2.0"
+  }
+}

package/tag-list-bd4c0029.js

@@ -0,0 +1,83 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),u=require("@emotion/react"),l=require("@emotion/styled"),C=require("@telia-ace/knowledge-widget-component-utilities"),s=require("@telia-ace/knowledge-widget-ui"),y=require("@telia-ace/widget-utilities"),I=(e,t,o)=>e&&o?r.jsx(x,{symbol:o,size:18}):t?r.jsx(x,{symbol:t,size:18}):null,q=({className:e,...t})=>{const{route:o="search",items:h=[],header:$,loading:a=!1,style:c="badge",showMatchCount:w=!1,showIcons:S=!1,static:i=!1,fallbackOnInitialRoute:z=!1,itemAriaLabel:p}=s.useProperties(),j=s.useContainer(),{params:m}=s.useRouteData();if(!h.length&&(!a||i))return s.createEmptyComponent(j,{...t,className:y.appendClassNames(e,"humany-tag-list")});const v=c==="badge"?A:B;return r.jsx(R,{...t,"data-loading":!i&&a,className:y.appendClassNames(e,"humany-tag-list"),header:!i&&a?"":$,items:h,type:c,renderItem:n=>{const{id:b,title:f,defaultIcon:L,activeIcon:T,matches:d}=n,g=(m.tag?m.tag.split(","):[]).includes(n.id)||!m.tag&&n.id==="0",k=p&&p.replace("{{title}}",f).replace("{{matches}}",`${d}`);return r.jsx(M,{notAllowed:(i&&!d&&c==="pill").toString(),"data-tag":b,children:r.jsxs(v,{...C.initialRouteFallback(n,o,z,"tag"),role:"button","aria-pressed":g,"aria-label":k,disabled:i&&!d,selected:g,text:f,children:[S&&I(g,L,T),w&&r.jsx(U,{children:`(${d})`})]})},b)},children:!i&&r.jsx(s.Loader,{loading:a})})},R=l(s.ItemList)`
+  ${s.contentBox}
+  ${s.itemList}
+  ${s.loadingOpacity}
+  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"&&u.css`
+        justify-content: center;
+      `}
+
+    li {
+      margin: 0 ${e=>{var t,o;return`${(t=e.theme.sizes)==null?void 0:t.small} ${(o=e.theme.sizes)==null?void 0:o.small}`}} 0;
+    }
+  }
+`,A=l(s.TextLink)`
+  padding: 8px 15px;
+  background-color: ${e=>{var t,o;return e.selected?(t=e.theme.colors)==null?void 0:t.text:(o=e.theme.colors)==null?void 0:o.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-visible {
+    ${s.borderTabStyle}
+    padding: 6px 15px;
+    background-color: transparent;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: ${e=>{var t,o;return e.selected?(t=e.theme.colors)==null?void 0:t.primary:(o=e.theme.colors)==null?void 0:o.text}};
+    }
+  }
+`,B=l(s.TextLink)`
+  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-visible {
+    ${s.borderTabStyle}
+    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&&u.css`
+      opacity: 0.5;
+    `}
+`,U=l(s.Text)`
+  order: 2;
+  margin-left: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}};
+`,x=l(s.SymbolBadge)`
+  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;
+      `}}
+`,M=l.li`
+  ${e=>e.notAllowed==="true"&&u.css`
+      cursor: not-allowed;
+    `}
+`;exports.default=q;

package/tag-list-component.d.ts

@@ -0,0 +1,17 @@
+import { Tag } from '../../../knowledge/core/src/index.ts';
+import { Container } from '@webprovisions/platform';
+
+export type TagListComponentProps = {
+    header: string;
+    route?: string;
+    items: Tag[];
+    style?: 'badge' | 'pill';
+    showMatchCount?: boolean;
+    showIcons?: boolean;
+    static?: boolean;
+    rootTagLabel?: string;
+    fallbackOnInitialRoute?: boolean;
+    itemAriaLabel?: string;
+};
+declare const TagListComponent: (container: Container) => Promise<void>;
+export default TagListComponent;

package/tag-list-d143c7b3.mjs

@@ -0,0 +1,193 @@
+import { jsx as r, jsxs as j } from "react/jsx-runtime";
+import { css as h } from "@emotion/react";
+import a from "@emotion/styled";
+import { initialRouteFallback as A } from "@telia-ace/knowledge-widget-component-utilities";
+import { useProperties as B, useContainer as R, useRouteData as F, createEmptyComponent as M, Loader as N, ItemList as O, contentBox as P, itemList as D, loadingOpacity as E, TextLink as $, borderTabStyle as x, Text as U, SymbolBadge as q } from "@telia-ace/knowledge-widget-ui";
+import { appendClassNames as y } from "@telia-ace/widget-utilities";
+const G = (e, t, o) => e && o ? /* @__PURE__ */ r(b, { symbol: o, size: 18 }) : t ? /* @__PURE__ */ r(b, { symbol: t, size: 18 }) : null, oe = ({ className: e, ...t }) => {
+  const {
+    route: o = "search",
+    items: g = [],
+    header: z,
+    loading: l = !1,
+    style: d = "badge",
+    showMatchCount: w = !1,
+    showIcons: v = !1,
+    static: s = !1,
+    fallbackOnInitialRoute: L = !1,
+    itemAriaLabel: f
+  } = B(), S = R(), { params: c } = F();
+  if (!g.length && (!l || s))
+    return M(S, {
+      ...t,
+      className: y(e, "humany-tag-list")
+    });
+  const I = d === "badge" ? J : K;
+  return /* @__PURE__ */ r(
+    H,
+    {
+      ...t,
+      "data-loading": !s && l,
+      className: y(e, "humany-tag-list"),
+      header: !s && l ? "" : z,
+      items: g,
+      type: d,
+      renderItem: (i) => {
+        const { id: p, title: u, defaultIcon: T, activeIcon: k, matches: n } = i, m = (c.tag ? c.tag.split(",") : []).includes(i.id) || !c.tag && i.id === "0", C = f && f.replace("{{title}}", u).replace("{{matches}}", `${n}`);
+        return /* @__PURE__ */ r(
+          V,
+          {
+            notAllowed: (s && !n && d === "pill").toString(),
+            "data-tag": p,
+            children: /* @__PURE__ */ j(
+              I,
+              {
+                ...A(
+                  i,
+                  o,
+                  L,
+                  "tag"
+                ),
+                role: "button",
+                "aria-pressed": m,
+                "aria-label": C,
+                disabled: s && !n,
+                selected: m,
+                text: u,
+                children: [
+                  v && G(m, T, k),
+                  w && /* @__PURE__ */ r(Q, { children: `(${n})` })
+                ]
+              }
+            )
+          },
+          p
+        );
+      },
+      children: !s && /* @__PURE__ */ r(N, { loading: l })
+    }
+  );
+}, H = a(O)`
+  ${P}
+  ${D}
+  ${E}
+  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" && h`
+        justify-content: center;
+      `}
+
+    li {
+      margin: 0 ${(e) => {
+  var t, o;
+  return `${(t = e.theme.sizes) == null ? void 0 : t.small} ${(o = e.theme.sizes) == null ? void 0 : o.small}`;
+}} 0;
+    }
+  }
+`, J = a($)`
+  padding: 8px 15px;
+  background-color: ${(e) => {
+  var t, o;
+  return e.selected ? (t = e.theme.colors) == null ? void 0 : t.text : (o = e.theme.colors) == null ? void 0 : o.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-visible {
+    ${x}
+    padding: 6px 15px;
+    background-color: transparent;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: ${(e) => {
+  var t, o;
+  return e.selected ? (t = e.theme.colors) == null ? void 0 : t.primary : (o = e.theme.colors) == null ? void 0 : o.text;
+}};
+    }
+  }
+`, K = a($)`
+  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-visible {
+    ${x}
+    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 && h`
+      opacity: 0.5;
+    `}
+`, Q = a(U)`
+  order: 2;
+  margin-left: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}};
+`, b = a(q)`
+  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;
+      `;
+}}
+`, V = a.li`
+  ${(e) => e.notAllowed === "true" && h`
+      cursor: not-allowed;
+    `}
+`;
+export {
+  oe as default
+};

package/tag-list.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+
+type Props = {
+    className: string;
+};
+declare const TagList: React.FC<Props>;
+export default TagList;