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

package/index.d.ts

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

package/index.js

@@ -0,0 +1 @@
+"use strict";const o=require("@telia-ace/knowledge-data-client"),d=require("@telia-ace/knowledge-widget-core"),u=require("@telia-ace/knowledge-widget-ui"),g=a=>u.createReactComponent(a,"related-tag-list",Promise.resolve().then(()=>require("./related-tag-list-23f3dee2.js")),t=>{const{events:s}=a.get("$widget"),[i,n]=d.createEventSubscriber(s),c=e=>{t.writeProperties({loading:!0,error:void 0}),t.actions.dispatch("fetch",{params:e})};return t.actions.create("fetch",({items:e=[]})=>t.actions.dispatch("fetched",{items:e,loading:!0})),t.actions.create("fetched",e=>t.writeProperties({...e,loading:!1})),a.getAsync("router").then(e=>{const{params:r}=e.getRouteData();c(r)}),i("router:changed",(e,{current:r})=>{c(r.routeData.params)}),()=>{n()}}).then(()=>d.extendComponent(a,"related-tag-list",t=>{t.actions.watch("related-tag-list.fetch",(s,i)=>{const{params:{guide:n,connection:c}}=s;if(typeof n<"u")return o.DataClient.getInstance(a).then(e=>e.fetch(o.DataType.Guide,{connection:c,guideId:n}).then(({tags:r})=>i({...s,items:r||[]})).catch(r=>i(s)))})}));module.exports=g;

package/index.mjs

@@ -0,0 +1,38 @@
+import { DataClient as o, DataType as d } from "@telia-ace/knowledge-data-client";
+import { createEventSubscriber as u, extendComponent as h } from "@telia-ace/knowledge-widget-core";
+import { createReactComponent as f } from "@telia-ace/knowledge-widget-ui";
+const m = (a) => f(
+  a,
+  "related-tag-list",
+  import("./related-tag-list-49e465d4.mjs"),
+  (e) => {
+    const { events: s } = a.get("$widget"), [i, c] = u(s), n = (t) => {
+      e.writeProperties({ loading: !0, error: void 0 }), e.actions.dispatch("fetch", { params: t });
+    };
+    return e.actions.create("fetch", ({ items: t = [] }) => e.actions.dispatch("fetched", {
+      items: t,
+      loading: !0
+    })), e.actions.create("fetched", (t) => e.writeProperties({ ...t, loading: !1 })), a.getAsync("router").then((t) => {
+      const { params: r } = t.getRouteData();
+      n(r);
+    }), i("router:changed", (t, { current: r }) => {
+      n(r.routeData.params);
+    }), () => {
+      c();
+    };
+  }
+).then(() => h(a, "related-tag-list", (e) => {
+  e.actions.watch("related-tag-list.fetch", (s, i) => {
+    const {
+      params: { guide: c, connection: n }
+    } = s;
+    if (typeof c < "u")
+      return o.getInstance(a).then((t) => t.fetch(d.Guide, {
+        connection: n,
+        guideId: c
+      }).then(({ tags: r }) => i({ ...s, items: r || [] })).catch((r) => i(s)));
+  });
+}));
+export {
+  m as default
+};

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@telia-ace/knowledge-widget-components-related-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": "*",
+    "@webprovisions/platform": "^1.1.4"
+  },
+  "peerDependencies": {
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0",
+    "react": "18.2.0"
+  }
+}

package/related-tag-list-23f3dee2.js

@@ -0,0 +1,45 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),l=require("@emotion/styled"),r=require("@telia-ace/knowledge-widget-ui"),n=require("@telia-ace/widget-utilities"),$=(e,t,s)=>e&&s?a.jsx(u,{symbol:s,size:18}):t?a.jsx(u,{symbol:t,size:18}):null,z=({className:e,embedded:t=!1,...s})=>{const g=r.useContainer(),{route:h="search",header:y,items:d=[],showIcons:f}=r.useProperties(),{params:m}=r.useRouteData();return d.length?a.jsx(j,{embedded:t?"true":"false",...s,className:n.appendClassNames(e,"humany-tag-list","humany-related-tag-list"),header:y,items:d,renderItem:o=>{const{id:i,title:x,defaultIcon:p,activeIcon:b}=o,c=m.tag===o.id||!m.tag&&o.id==="0";return a.jsx("li",{"data-tag":i,children:a.jsx(w,{routeName:h,selected:c,params:n.createParams({tag:i}),text:x,children:f&&$(c,p,b)})},i)}}):r.createEmptyComponent(g,{...s,className:n.appendClassNames(e,"humany-tag-list","humany-related-tag-list")})},u=l(r.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;
+      `}}
+`,j=l(r.ItemList)`
+  ${r.itemList}
+  ${e=>e.embedded==="false"&&r.contentBox}
+  ${e=>{var t;return`padding: ${(t=e.theme.sizes)==null?void 0:t.large};`}}
+  justify-content: flex-start;
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    li {
+      margin: 0 ${e=>{var t,s;return`${(t=e.theme.sizes)==null?void 0:t.small} ${(s=e.theme.sizes)==null?void 0:s.small}`}} 0;
+
+      a {
+        color: #fff;
+      }
+    }
+  }
+`,w=l(r.TextLink)`
+  padding: 8px 15px;
+  background-color: ${e=>{var t,s;return e.selected?(t=e.theme.colors)==null?void 0:t.text:(s=e.theme.colors)==null?void 0:s.primary}};
+  font-weight: 300;
+  border-radius: ${e=>e.theme.borderRadius};
+  display: block;
+  font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
+
+  &:focus-visible {
+    ${r.borderTabStyle}
+    padding: 6px 15px;
+    background-color: transparent;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: ${e=>{var t,s;return e.selected?(t=e.theme.colors)==null?void 0:t.primary:(s=e.theme.colors)==null?void 0:s.text}};
+    }
+  }
+`;exports.default=z;

package/related-tag-list-49e465d4.mjs

@@ -0,0 +1,122 @@
+import { jsx as s } from "react/jsx-runtime";
+import i from "@emotion/styled";
+import { useContainer as x, useProperties as $, useRouteData as z, createEmptyComponent as k, SymbolBadge as w, ItemList as L, itemList as S, contentBox as I, TextLink as v, borderTabStyle as B } from "@telia-ace/knowledge-widget-ui";
+import { appendClassNames as d, createParams as C } from "@telia-ace/widget-utilities";
+const N = (e, t, r) => e && r ? /* @__PURE__ */ s(c, { symbol: r, size: 18 }) : t ? /* @__PURE__ */ s(c, { symbol: t, size: 18 }) : null, E = ({
+  className: e,
+  embedded: t = !1,
+  ...r
+}) => {
+  const u = x(), {
+    route: h = "search",
+    header: f,
+    items: l = [],
+    showIcons: g
+  } = $(), { params: n } = z();
+  return l.length ? /* @__PURE__ */ s(
+    R,
+    {
+      embedded: t ? "true" : "false",
+      ...r,
+      className: d(
+        e,
+        "humany-tag-list",
+        "humany-related-tag-list"
+      ),
+      header: f,
+      items: l,
+      renderItem: (a) => {
+        const { id: o, title: y, defaultIcon: p, activeIcon: b } = a, m = n.tag === a.id || !n.tag && a.id === "0";
+        return /* @__PURE__ */ s("li", { "data-tag": o, children: /* @__PURE__ */ s(
+          T,
+          {
+            routeName: h,
+            selected: m,
+            params: C({
+              tag: o
+            }),
+            text: y,
+            children: g && N(m, p, b)
+          }
+        ) }, o);
+      }
+    }
+  ) : k(u, {
+    ...r,
+    className: d(
+      e,
+      "humany-tag-list",
+      "humany-related-tag-list"
+    )
+  });
+}, c = i(w)`
+  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;
+      `;
+}}
+`, R = i(L)`
+  ${S}
+  ${(e) => e.embedded === "false" && I}
+  ${(e) => {
+  var t;
+  return `padding: ${(t = e.theme.sizes) == null ? void 0 : t.large};`;
+}}
+  justify-content: flex-start;
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    li {
+      margin: 0 ${(e) => {
+  var t, r;
+  return `${(t = e.theme.sizes) == null ? void 0 : t.small} ${(r = e.theme.sizes) == null ? void 0 : r.small}`;
+}} 0;
+
+      a {
+        color: #fff;
+      }
+    }
+  }
+`, T = i(v)`
+  padding: 8px 15px;
+  background-color: ${(e) => {
+  var t, r;
+  return e.selected ? (t = e.theme.colors) == null ? void 0 : t.text : (r = e.theme.colors) == null ? void 0 : r.primary;
+}};
+  font-weight: 300;
+  border-radius: ${(e) => e.theme.borderRadius};
+  display: block;
+  font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+
+  &:focus-visible {
+    ${B}
+    padding: 6px 15px;
+    background-color: transparent;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: ${(e) => {
+  var t, r;
+  return e.selected ? (t = e.theme.colors) == null ? void 0 : t.primary : (r = e.theme.colors) == null ? void 0 : r.text;
+}};
+    }
+  }
+`;
+export {
+  E as default
+};

package/related-tag-list-component.d.ts

@@ -0,0 +1,10 @@
+import { Container } from '@webprovisions/platform';
+
+export type RelatedTagListComponentProps = {
+    header: string;
+    route?: string;
+    items?: any[];
+    showIcons?: boolean;
+};
+declare const RelatedTagListComponent: (container: Container) => Promise<void>;
+export default RelatedTagListComponent;

package/related-tag-list.d.ts

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