@telia-ace/knowledge-widget-components-search 0.0.1

package/filter-badges.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+
+type Props = {
+    inputHasFocus: boolean;
+    searchContainerRef: HTMLElement | null;
+    showGuideCategory: boolean;
+    showTag: boolean;
+    position: 'inside' | 'below';
+};
+declare const FilterBadges: React.FC<Props>;
+export default FilterBadges;

package/index.d.ts

@@ -0,0 +1,3 @@
+import { default as SearchComponent } from './search-component';
+
+export default SearchComponent;

package/index.js

@@ -0,0 +1 @@
+"use strict";const p=require("@telia-ace/knowledge-data-client"),T=require("@telia-ace/knowledge-widget-core"),R=require("@telia-ace/knowledge-widget-ui"),d=require("@telia-ace/widget-utilities"),b=n=>!!n.guideCategoryId||n.tagIds.length>0,A=(n,r)=>{const c=d.categoryTrail(n,r),l=d.getCategoryTrailAsObjects(c,r);return c.map(C=>{var h;return((h=l.get(C))==null?void 0:h.title)||""}).join(" / ")},y=n=>{const r=d.deepClone(n);return r.sort((c,l)=>c.title>l.title?1:-1),r.forEach(c=>{c.items&&(c.items=y(c.items))}),r},m=n=>R.createReactComponent(n,"search",Promise.resolve().then(()=>require("./search-9f532628.js")),r=>{const{events:c}=n.get("$widget"),[l,I]=T.createEventSubscriber(c),C=async a=>{const t=a.tag?a.tag.split(","):[],e=a.guideCategory,s=a.phrase||"",{activeFilterBadges:g}=r.properties(),o=await v({}),i=await w({tagId:a.tag,searchPhrase:s}),f=e?d.findCategoryById(e,i):null,u=t.reduce((P,k)=>{const q=o.find(D=>D.id===k);return q&&P.push(q),P},[]);r.writeProperties({activeFilterBadges:{...g,tag:u,guideCategory:f,tooltip:A(e,i)||null}})};r.actions.create("search",async a=>{const{route:t="search",patchParams:e=!1}=r.properties(),{filters:s,filtersChanged:g,value:o}=a;if(o.length>0||(b(s)||g)&&!s.initial){const i=await n.getAsync("router"),{params:f}=i.getRouteData();let u={guide:void 0,id:void 0,accordion:void 0,contactMethod:void 0};u.phrase=o.length>0?encodeURIComponent(o):"",e&&(u={...f,...u}),(s!=null&&s.guideCategoryId||g)&&(u.guideCategory=s.guideCategoryId||void 0),((s==null?void 0:s.tagIds.length)>0||g)&&(s.tagIds.length>0?u.tag=s.tagIds.join(","):u.tag=void 0),i.navigate(t,d.createParams(u))}}),r.actions.create("clear",(a,t)=>{a.navigateToHome&&n.getAsync("router").then(e=>{const{name:s}=e.getInitialRoute();e.navigate(s)})});const h=()=>n.getAsync("router").then(a=>a.getRouteData().params);r.actions.create("quick-filter:add",async a=>{const{category:t,tagIds:e=[],initial:s}=a,g=await n.getAsync("router"),{params:o}=g.getRouteData(),i=o.tag?o.tag.split(","):[];r.actions.dispatch("search",{filtersChanged:!0,filters:{guideCategoryId:t,tagIds:[...new Set([...i,...e])]},value:o.phrase||""})}),r.actions.create("quick-filter:remove",({types:a,ids:t=[]})=>{const{activeFilterBadges:e}=r.properties();n.getAsync("router").then(s=>{var o;const{params:g}=s.getRouteData();r.actions.dispatch("search",{filtersChanged:!0,filters:{guideCategoryId:a.indexOf("guideCategory")>-1?null:(o=e==null?void 0:e.guideCategory)==null?void 0:o.id,tagIds:a.indexOf("tag")>-1?((e==null?void 0:e.tag)||[]).filter(i=>!(t!=null&&t.includes(i.id))).map(i=>i.id):(e==null?void 0:e.tag.map(i=>i.id))||[]},value:g.phrase||""})})}),r.actions.create("quick-filter:close",()=>r.writeProperties({quickFilter:{items:[],loading:!1,open:!1}})),r.actions.create("quick-filter:open",({symbol:a,type:t})=>(r.writeProperties({quickFilter:{type:t,symbol:a,items:[],loading:!0,open:!0}}),h().then(({tag:e,guideCategory:s,phrase:g})=>{if(t==="guideCategory")return w({tagId:e,searchPhrase:g}).then(o=>{const i=d.deepClone(o);r.writeProperties({quickFilter:{items:y(i),loading:!1}})});if(t==="tag")return v({categories:s,searchPhrase:g}).then(o=>{const i=d.deepClone(o);r.writeProperties({quickFilter:{items:y(i),loading:!1}})})})));const w=a=>p.DataClient.getInstance(n).then(t=>t.fetch(p.DataType.GuideCategories,a)).then(t=>t.categories||[]),v=a=>p.DataClient.getInstance(n).then(t=>t.fetch(p.DataType.TagsOnGuides,a)).then((t=[])=>t);return h().then(a=>{C(a)}),l("router:changed",(a,{current:t})=>{const{routeData:{params:e}}=t;C(e)}),l("data-client:fetched",(a,t)=>{const{filterBadges:e}=r.properties(),s=typeof e=="object"?!!e.tag:!!e;t.type==="match"&&s&&h().then(({tag:g})=>{const{tags:o=[]}=t.response,i=o.find(f=>f.id===g)||null;r.writeProperties({filters:{tag:i}})})}),()=>{I()}});module.exports=m;

package/index.mjs

@@ -0,0 +1,163 @@
+import { DataClient as P, DataType as R } from "@telia-ace/knowledge-data-client";
+import { createEventSubscriber as k } from "@telia-ace/knowledge-widget-core";
+import { createReactComponent as q } from "@telia-ace/knowledge-widget-ui";
+import { createParams as A, deepClone as p, findCategoryById as D, categoryTrail as j, getCategoryTrailAsObjects as O } from "@telia-ace/widget-utilities";
+const x = (g) => !!g.guideCategoryId || g.tagIds.length > 0, F = (g, r) => {
+  const c = j(g, r), d = O(c, r);
+  return c.map((f) => {
+    var l;
+    return ((l = d.get(f)) == null ? void 0 : l.title) || "";
+  }).join(" / ");
+}, y = (g) => {
+  const r = p(g);
+  return r.sort((c, d) => c.title > d.title ? 1 : -1), r.forEach((c) => {
+    c.items && (c.items = y(c.items));
+  }), r;
+}, U = (g) => q(
+  g,
+  "search",
+  import("./search-9b2fdf13.mjs"),
+  (r) => {
+    const { events: c } = g.get("$widget"), [d, C] = k(c), f = async (a) => {
+      const e = a.tag ? a.tag.split(",") : [], t = a.guideCategory, s = a.phrase || "", { activeFilterBadges: n } = r.properties(), o = await v({}), i = await I({
+        tagId: a.tag,
+        searchPhrase: s
+      }), h = t ? D(
+        t,
+        i
+      ) : null, u = e.reduce((m, T) => {
+        const w = o.find((b) => b.id === T);
+        return w && m.push(w), m;
+      }, []);
+      r.writeProperties({
+        activeFilterBadges: {
+          ...n,
+          tag: u,
+          guideCategory: h,
+          tooltip: F(t, i) || null
+        }
+      });
+    };
+    r.actions.create(
+      "search",
+      async (a) => {
+        const { route: e = "search", patchParams: t = !1 } = r.properties(), { filters: s, filtersChanged: n, value: o } = a;
+        if (o.length > 0 || (x(s) || n) && !s.initial) {
+          const i = await g.getAsync("router"), { params: h } = i.getRouteData();
+          let u = {
+            guide: void 0,
+            id: void 0,
+            accordion: void 0,
+            contactMethod: void 0
+          };
+          u.phrase = o.length > 0 ? encodeURIComponent(o) : "", t && (u = {
+            ...h,
+            ...u
+          }), (s != null && s.guideCategoryId || n) && (u.guideCategory = s.guideCategoryId || void 0), ((s == null ? void 0 : s.tagIds.length) > 0 || n) && (s.tagIds.length > 0 ? u.tag = s.tagIds.join(",") : u.tag = void 0), i.navigate(e, A(u));
+        }
+      }
+    ), r.actions.create("clear", (a, e) => {
+      a.navigateToHome && g.getAsync("router").then((t) => {
+        const { name: s } = t.getInitialRoute();
+        t.navigate(s);
+      });
+    });
+    const l = () => g.getAsync("router").then((a) => a.getRouteData().params);
+    r.actions.create(
+      "quick-filter:add",
+      async (a) => {
+        const { category: e, tagIds: t = [], initial: s } = a, n = await g.getAsync("router"), { params: o } = n.getRouteData(), i = o.tag ? o.tag.split(",") : [];
+        r.actions.dispatch("search", {
+          filtersChanged: !0,
+          filters: {
+            guideCategoryId: e,
+            tagIds: [.../* @__PURE__ */ new Set([...i, ...t])]
+          },
+          value: o.phrase || ""
+        });
+      }
+    ), r.actions.create(
+      "quick-filter:remove",
+      ({ types: a, ids: e = [] }) => {
+        const { activeFilterBadges: t } = r.properties();
+        g.getAsync("router").then((s) => {
+          var o;
+          const { params: n } = s.getRouteData();
+          r.actions.dispatch("search", {
+            filtersChanged: !0,
+            filters: {
+              guideCategoryId: a.indexOf("guideCategory") > -1 ? null : (o = t == null ? void 0 : t.guideCategory) == null ? void 0 : o.id,
+              tagIds: a.indexOf("tag") > -1 ? ((t == null ? void 0 : t.tag) || []).filter((i) => !(e != null && e.includes(i.id))).map((i) => i.id) : (t == null ? void 0 : t.tag.map((i) => i.id)) || []
+            },
+            value: n.phrase || ""
+          });
+        });
+      }
+    ), r.actions.create("quick-filter:close", () => r.writeProperties({
+      quickFilter: {
+        items: [],
+        loading: !1,
+        open: !1
+      }
+    })), r.actions.create("quick-filter:open", ({ symbol: a, type: e }) => (r.writeProperties({
+      quickFilter: {
+        type: e,
+        symbol: a,
+        items: [],
+        loading: !0,
+        open: !0
+      }
+    }), l().then(({ tag: t, guideCategory: s, phrase: n }) => {
+      if (e === "guideCategory")
+        return I({
+          tagId: t,
+          searchPhrase: n
+        }).then((o) => {
+          const i = p(o);
+          r.writeProperties({
+            quickFilter: {
+              items: y(i),
+              loading: !1
+            }
+          });
+        });
+      if (e === "tag")
+        return v({
+          categories: s,
+          searchPhrase: n
+        }).then((o) => {
+          const i = p(o);
+          r.writeProperties({
+            quickFilter: {
+              items: y(i),
+              loading: !1
+            }
+          });
+        });
+    })));
+    const I = (a) => P.getInstance(g).then(
+      (e) => e.fetch(R.GuideCategories, a)
+    ).then(
+      (e) => e.categories || []
+    ), v = (a) => P.getInstance(g).then((e) => e.fetch(R.TagsOnGuides, a)).then((e = []) => e);
+    return l().then((a) => {
+      f(a);
+    }), d("router:changed", (a, { current: e }) => {
+      const {
+        routeData: { params: t }
+      } = e;
+      f(t);
+    }), d("data-client:fetched", (a, e) => {
+      const { filterBadges: t } = r.properties(), s = typeof t == "object" ? !!t.tag : !!t;
+      e.type === "match" && s && l().then(({ tag: n }) => {
+        const { tags: o = [] } = e.response, i = o.find((h) => h.id === n) || null;
+        r.writeProperties({ filters: { tag: i } });
+      });
+    }), () => {
+      C();
+    };
+  }
+);
+export {
+  U as default
+};

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@telia-ace/knowledge-widget-components-search",
+  "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-widget-ui": "*",
+    "@telia-ace/widget-utilities": "*",
+    "@telia-ace/knowledge-data-client": "*",
+    "@telia-ace/widget-routing": "*",
+    "@telia-ace/widget-types-grid": "*",
+    "@webprovisions/platform": "^1.1.4"
+  },
+  "peerDependencies": {
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0",
+    "react": "18.2.0"
+  }
+}

package/quick-filter-item-list.d.ts

@@ -0,0 +1,18 @@
+import { Category, Tag } from '../../../knowledge/core/src/index.ts';
+import { default as React } from 'react';
+
+type Props = {
+    filterPhrase: string;
+    items: Category[] | Tag[];
+    filterType: 'guideCategory' | 'tag';
+    searchContainer: HTMLElement | null;
+    filterContainer: HTMLElement | null;
+    inputHasFocus: boolean;
+};
+export declare const getFocusedIndex: (elem: HTMLElement) => {
+    anchors: HTMLAnchorElement[];
+    focusedIndex: number;
+};
+export declare const focusInput: (searchContainerRef: HTMLElement | null) => void;
+declare const QuickFilterItemList: React.FC<Props>;
+export default QuickFilterItemList;

package/quick-filter.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    phrase: string;
+    inputHasFocus: boolean;
+    searchContainerRef: HTMLElement | null;
+};
+declare const _default: ({ phrase, inputHasFocus, searchContainerRef }: Props) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element | null;
+export default _default;