@telia-ace/knowledge-widget-components-guide-category-dropdown 1.0.4 → 1.0.8

package/dist/guide-category-dropdown.js

@@ -0,0 +1,323 @@
+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 { loadingOpacity, contentBox, borderTabStyle, Link as Link$1, linkTabStyle, List as List$1, list, Text, useProperties, useHover, SymbolBadge, useRouteData, useContainer, createEmptyComponent } from "@telia-ace/knowledge-widget-ui";
+import { appendClassNames, createParams, formatUrl } from "@telia-ace/widget-utilities";
+import React, { useState, useEffect } from "react";
+import { initialRouteFallback } from "@telia-ace/knowledge-widget-component-utilities";
+import styled, { css } from "styled-components";
+const Wrapper = styled.div`
+    ${loadingOpacity}
+    ${contentBox}
+  overflow: hidden;
+    min-height: 50px;
+    ${(p) => {
+  var _a;
+  return p["data-toggler-in-focus"] && ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
+            && {
+                ${borderTabStyle}
+            }
+        `;
+}};
+`;
+const Toggler = styled.button`
+    background: none;
+    border: 0;
+    outline: 0;
+    display: block;
+    cursor: pointer;
+    padding: 0;
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+    text-align: end;
+    flex: 1 0 auto;
+    svg {
+        path,
+        line {
+            stroke: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+        }
+    }
+`;
+const styling = css`
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+    text-align: left;
+    text-align: left;
+    text-decoration: none;
+    font-weight: 300;
+    display: flex;
+    align-items: center;
+    padding: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}};
+    padding-left: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
+}};
+    cursor: pointer;
+    overflow: hidden;
+    ${(p) => {
+  var _a, _b, _c;
+  return p.selected ? css`
+                  border-left: 2px solid ${(_a = p.theme.colors) == null ? void 0 : _a.primary};
+                  color: ${(_b = p.theme.colors) == null ? void 0 : _b.primary};
+              ` : css`
+                  color: ${(_c = p.theme.colors) == null ? void 0 : _c.text};
+              `;
+}};
+
+    span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    i {
+        margin-right: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+        font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.medium;
+}};
+        min-height: 1em;
+        min-width: 1em;
+    }
+`;
+const Item = styled.div`
+    ${styling}
+`;
+const Link = styled(Link$1)`
+    ${styling}
+    &:focus {
+        outline: none;
+        span {
+            ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && linkTabStyle;
+}};
+        }
+    }
+`;
+const TopItem = styled.div`
+    display: flex;
+    justify-content: space-between;
+    padding-right: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
+}};
+    min-height: 52px;
+    white-space: nowrap;
+
+    && {
+        font-weight: normal;
+
+        a {
+            font-weight: normal;
+        }
+    }
+    ${Item} {
+        font-weight: normal;
+    }
+`;
+const List = styled(List$1)`
+    ${list}
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    margin-right: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}};
+    margin-left: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
+}};
+    margin-bottom: 22px;
+    border-left: ${(p) => p.theme.border};
+    li {
+        margin: 0 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}} -2px;
+    }
+    li:last-child {
+        margin: 0 0 0 -2px;
+    }
+    flex-basis: 100%;
+    border-width: 2px;
+`;
+const MatchCount = styled(Text)`
+    margin: 0 0 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}};
+`;
+var Styled = {
+  Wrapper,
+  Toggler,
+  List,
+  Item,
+  Link,
+  TopItem,
+  MatchCount
+};
+const GuideCategoryDropdownMatchCount = ({ matches }) => {
+  const { showMatchCount = false } = useProperties();
+  if (!showMatchCount || typeof matches === "undefined") {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Styled.MatchCount, null, "(", matches, ")");
+};
+const GuideCategoryDropdownItem = ({ item, guideCategory }) => {
+  const {
+    route = "browse",
+    categoryAriaLabel = "",
+    activeCategoryAriaLabel = "",
+    fallbackOnInitialRoute = false
+  } = useProperties();
+  const [hovering, elem] = useHover();
+  const { id, title, symbol, activeSymbol } = item;
+  const selected = guideCategory === id;
+  return /* @__PURE__ */ React.createElement("li", {
+    ref: elem
+  }, /* @__PURE__ */ React.createElement(Styled.Link, __spreadProps(__spreadValues({}, initialRouteFallback(item, route, fallbackOnInitialRoute, "category")), {
+    "aria-pressed": selected,
+    "aria-label": (selected ? activeCategoryAriaLabel : categoryAriaLabel).replace("{{category}}", title),
+    className: "humany-guide-category-dropdown-link",
+    "aria-current": selected,
+    selected
+  }), (selected || hovering) && activeSymbol ? /* @__PURE__ */ React.createElement(SymbolBadge, {
+    symbol: activeSymbol
+  }) : symbol && /* @__PURE__ */ React.createElement(SymbolBadge, {
+    symbol
+  }), /* @__PURE__ */ React.createElement(Text, null, title), /* @__PURE__ */ React.createElement(GuideCategoryDropdownMatchCount, __spreadValues({}, item))));
+};
+const GuideCategoryDropdown = (_a) => {
+  var _b = _a, { className } = _b, other = __objRest(_b, ["className"]);
+  const routeData = useRouteData();
+  const [togglerFocus, setTogglerFocus] = useState(false);
+  const {
+    parent,
+    route = "browse",
+    categories = [],
+    loading = false
+  } = useProperties();
+  const container = useContainer();
+  const [isOpen, setIsOpen] = useState(false);
+  const { params } = routeData;
+  const { guideCategory, tag, phrase, sorting } = params;
+  useEffect(() => {
+    if (isOpen) {
+      setIsOpen(false);
+    }
+  }, [guideCategory]);
+  if (loading || !parent || !categories.length) {
+    return createEmptyComponent(container, __spreadProps(__spreadValues({}, other), {
+      className: appendClassNames(className, "humany-guide-category-dropdown")
+    }));
+  }
+  const selected = categories.find((category) => category.id === guideCategory) || parent;
+  const selectedSymbol = selected.activeSymbol || selected.symbol;
+  return /* @__PURE__ */ React.createElement(Styled.Wrapper, __spreadProps(__spreadValues({}, other), {
+    "data-loading": false,
+    "data-toggler-in-focus": togglerFocus,
+    "aria-expanded": isOpen,
+    className: appendClassNames(className, "humany-guide-category-dropdown")
+  }), isOpen ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Styled.TopItem, {
+    className: "humany-guide-category-dropdown-top-item"
+  }, /* @__PURE__ */ React.createElement(Styled.Link, {
+    className: "humany-guide-category-dropdown-link",
+    routeName: route,
+    params: createParams({
+      tag,
+      phrase,
+      sorting,
+      guideCategory: parent.id,
+      uriName: formatUrl(parent.title)
+    }),
+    selected: false
+  }, parent.symbol ? /* @__PURE__ */ React.createElement(SymbolBadge, {
+    symbol: parent.symbol
+  }) : null, /* @__PURE__ */ React.createElement(Text, null, parent.title), /* @__PURE__ */ React.createElement(GuideCategoryDropdownMatchCount, __spreadValues({}, parent))), /* @__PURE__ */ React.createElement(Styled.Toggler, {
+    onBlur: () => setTogglerFocus(false),
+    onFocus: () => setTogglerFocus(true),
+    className: "humany-guide-category-dropdown-toggler",
+    onClick: () => {
+      setIsOpen(!isOpen);
+    },
+    "aria-expanded": "true",
+    "aria-label": selected.title
+  }, /* @__PURE__ */ React.createElement(SymbolBadge, {
+    size: 18,
+    symbol: { type: "Svg", content: "caret-up" }
+  }))), /* @__PURE__ */ React.createElement(Styled.List, {
+    className: "humany-guide-category-dropdown-open",
+    items: categories,
+    renderItem: (item) => /* @__PURE__ */ React.createElement(GuideCategoryDropdownItem, {
+      key: item.id,
+      item,
+      guideCategory
+    })
+  })) : /* @__PURE__ */ React.createElement(Styled.TopItem, {
+    className: "humany-guide-category-dropdown-top-item"
+  }, /* @__PURE__ */ React.createElement(Styled.Item, {
+    className: "humany-guide-category-dropdown-item",
+    onClick: () => {
+      setIsOpen(!isOpen);
+    },
+    selected: false
+  }, selectedSymbol ? /* @__PURE__ */ React.createElement(SymbolBadge, {
+    symbol: selectedSymbol
+  }) : null, /* @__PURE__ */ React.createElement(Text, null, selected.title), /* @__PURE__ */ React.createElement(GuideCategoryDropdownMatchCount, __spreadValues({}, selected))), /* @__PURE__ */ React.createElement(Styled.Toggler, {
+    onBlur: () => setTogglerFocus(false),
+    onFocus: () => setTogglerFocus(true),
+    className: "humany-guide-category-dropdown-toggler",
+    onClick: () => {
+      setIsOpen(!isOpen);
+    },
+    "aria-expanded": "false",
+    "aria-label": selected.title
+  }, /* @__PURE__ */ React.createElement(SymbolBadge, {
+    size: 18,
+    symbol: { type: "Svg", content: "caret-down" }
+  }))));
+};
+export { GuideCategoryDropdown as default };
+//# sourceMappingURL=guide-category-dropdown.js.map

package/dist/guide-category-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"guide-category-dropdown.js","sources":["../src/guide-category-dropdown.styles.ts","../src/guide-category-dropdown-match-count.tsx","../src/guide-category-dropdown-item.tsx","../src/guide-category-dropdown.tsx"],"sourcesContent":["import {\r\n    borderTabStyle,\r\n    contentBox,\r\n    Link as BaseLink,\r\n    linkTabStyle,\r\n    List as BaseList,\r\n    list,\r\n    loadingOpacity,\r\n    Text,\r\n} from '@telia-ace/knowledge-widget-ui';\r\nimport styled, { css } from 'styled-components';\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst Wrapper: any = styled.div<any>`\r\n    ${loadingOpacity}\r\n    ${contentBox}\r\n  overflow: hidden;\r\n    min-height: 50px;\r\n    ${(p) =>\r\n        p['data-toggler-in-focus'] &&\r\n        p.theme.accessibility?.isTabbing &&\r\n        css`\r\n            && {\r\n                ${borderTabStyle}\r\n            }\r\n        `};\r\n`;\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst Toggler: any = styled.button`\r\n    background: none;\r\n    border: 0;\r\n    outline: 0;\r\n    display: block;\r\n    cursor: pointer;\r\n    padding: 0;\r\n    font-size: ${(p) => p.theme.fonts?.normal};\r\n    text-align: end;\r\n    flex: 1 0 auto;\r\n    svg {\r\n        path,\r\n        line {\r\n            stroke: ${(p) => p.theme.colors?.text};\r\n        }\r\n    }\r\n`;\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst styling = css<{ selected: boolean }>`\r\n    font-size: ${(p) => p.theme.fonts?.normal};\r\n    text-align: left;\r\n    text-align: left;\r\n    text-decoration: none;\r\n    font-weight: 300;\r\n    display: flex;\r\n    align-items: center;\r\n    padding: ${(p) => p.theme.sizes?.small};\r\n    padding-left: ${(p) => p.theme.sizes?.large};\r\n    cursor: pointer;\r\n    overflow: hidden;\r\n    ${(p) =>\r\n        p.selected\r\n            ? css`\r\n                  border-left: 2px solid ${p.theme.colors?.primary};\r\n                  color: ${p.theme.colors?.primary};\r\n              `\r\n            : css`\r\n                  color: ${p.theme.colors?.text};\r\n              `};\r\n\r\n    span {\r\n        overflow: hidden;\r\n        text-overflow: ellipsis;\r\n    }\r\n\r\n    i {\r\n        margin-right: ${(p) => p.theme.sizes?.normal};\r\n        font-size: ${(p) => p.theme.fonts?.medium};\r\n        min-height: 1em;\r\n        min-width: 1em;\r\n    }\r\n`;\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst Item: any = styled.div`\r\n    ${styling}\r\n`;\r\n\r\nconst Link: any = styled(BaseLink)<any>`\r\n    ${styling}\r\n    &:focus {\r\n        outline: none;\r\n        span {\r\n            ${(p) => p.theme.accessibility?.isTabbing && linkTabStyle};\r\n        }\r\n    }\r\n`;\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst TopItem: any = styled.div`\r\n    display: flex;\r\n    justify-content: space-between;\r\n    padding-right: ${(p) => p.theme.sizes?.large};\r\n    min-height: 52px;\r\n    white-space: nowrap;\r\n\r\n    && {\r\n        font-weight: normal;\r\n\r\n        a {\r\n            font-weight: normal;\r\n        }\r\n    }\r\n    ${Item} {\r\n        font-weight: normal;\r\n    }\r\n`;\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst List: any = styled(BaseList)<any>`\r\n    ${list}\r\n    display: flex;\r\n    justify-content: center;\r\n    flex-direction: column;\r\n    margin-right: ${(p) => p.theme.sizes?.medium};\r\n    margin-left: ${(p) => p.theme.sizes?.large};\r\n    margin-bottom: 22px;\r\n    border-left: ${(p) => p.theme.border};\r\n    li {\r\n        margin: 0 0 ${(p) => p.theme.sizes?.normal} -2px;\r\n    }\r\n    li:last-child {\r\n        margin: 0 0 0 -2px;\r\n    }\r\n    flex-basis: 100%;\r\n    border-width: 2px;\r\n`;\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst MatchCount: any = styled(Text)`\r\n    margin: 0 0 0 ${(p) => p.theme.sizes?.small};\r\n`;\r\n\r\nexport default {\r\n    Wrapper,\r\n    Toggler,\r\n    List,\r\n    Item,\r\n    Link,\r\n    TopItem,\r\n    MatchCount,\r\n};\r\n","import { Category } from '@telia-ace/knowledge-widget-core';\r\nimport { useProperties } from '@telia-ace/knowledge-widget-ui';\r\nimport React from 'react';\r\nimport { GuideCategoryDropdownComponentProps } from './guide-category-dropdown-component';\r\nimport Styled from './guide-category-dropdown.styles';\r\n\r\nconst GuideCategoryDropdownMatchCount: React.FC<Category> = ({ matches }) => {\r\n    const { showMatchCount = false } = useProperties<GuideCategoryDropdownComponentProps>();\r\n\r\n    if (!showMatchCount || typeof matches === 'undefined') {\r\n        return null;\r\n    }\r\n\r\n    return <Styled.MatchCount>({matches})</Styled.MatchCount>;\r\n};\r\n\r\nexport default GuideCategoryDropdownMatchCount;\r\n","import { initialRouteFallback } from '@telia-ace/knowledge-widget-component-utilities';\r\nimport { Category } from '@telia-ace/knowledge-widget-core';\r\nimport { SymbolBadge, Text, useHover, useProperties } from '@telia-ace/knowledge-widget-ui';\r\nimport React from 'react';\r\nimport { GuideCategoryDropdownComponentProps } from './guide-category-dropdown-component';\r\nimport GuideCategoryDropdownMatchCount from './guide-category-dropdown-match-count';\r\nimport Styled from './guide-category-dropdown.styles';\r\n\r\ntype Props = {\r\n    item: Category;\r\n    guideCategory: string;\r\n};\r\n\r\nconst GuideCategoryDropdownItem: React.FC<Props> = ({ item, guideCategory }) => {\r\n    const {\r\n        route = 'browse',\r\n        categoryAriaLabel = '',\r\n        activeCategoryAriaLabel = '',\r\n        fallbackOnInitialRoute = false,\r\n    } = useProperties<GuideCategoryDropdownComponentProps>();\r\n    const [hovering, elem] = useHover();\r\n    const { id, title, symbol, activeSymbol } = item;\r\n\r\n    const selected = guideCategory === id;\r\n    return (\r\n        <li ref={elem as any}>\r\n            <Styled.Link\r\n                {...initialRouteFallback(item, route, fallbackOnInitialRoute, 'category')}\r\n                aria-pressed={selected}\r\n                aria-label={(selected ? activeCategoryAriaLabel : categoryAriaLabel).replace(\r\n                    '{{category}}',\r\n                    title\r\n                )}\r\n                className=\"humany-guide-category-dropdown-link\"\r\n                aria-current={selected}\r\n                selected={selected}\r\n            >\r\n                {(selected || hovering) && activeSymbol ? (\r\n                    <SymbolBadge symbol={activeSymbol} />\r\n                ) : (\r\n                    symbol && <SymbolBadge symbol={symbol} />\r\n                )}\r\n                <Text>{title}</Text>\r\n                <GuideCategoryDropdownMatchCount {...item} />\r\n            </Styled.Link>\r\n        </li>\r\n    );\r\n};\r\n\r\nexport default GuideCategoryDropdownItem;\r\n","import { Category } from '@telia-ace/knowledge-widget-core';\r\nimport {\r\n    createEmptyComponent,\r\n    SymbolBadge,\r\n    Text,\r\n    useContainer,\r\n    useProperties,\r\n    useRouteData,\r\n} from '@telia-ace/knowledge-widget-ui';\r\nimport { appendClassNames, createParams, formatUrl } from '@telia-ace/widget-utilities';\r\nimport React, { useEffect, useState } from 'react';\r\nimport { GuideCategoryDropdownComponentProps } from './guide-category-dropdown-component';\r\nimport GuideCategoryDropdownItem from './guide-category-dropdown-item';\r\nimport GuideCategoryDropdownMatchCount from './guide-category-dropdown-match-count';\r\nimport Styled from './guide-category-dropdown.styles';\r\n\r\ntype Props = {\r\n    className: string;\r\n};\r\n\r\nconst GuideCategoryDropdown: React.SFC<Props> = ({ className, ...other }) => {\r\n    const routeData = useRouteData();\r\n    const [togglerFocus, setTogglerFocus] = useState(false);\r\n    const {\r\n        parent,\r\n        route = 'browse',\r\n        categories = [],\r\n        loading = false,\r\n    } = useProperties<GuideCategoryDropdownComponentProps>();\r\n    const container = useContainer();\r\n    const [isOpen, setIsOpen] = useState(false);\r\n    const { params } = routeData;\r\n    const { guideCategory, tag, phrase, sorting } = params;\r\n\r\n    useEffect(() => {\r\n        if (isOpen) {\r\n            setIsOpen(false);\r\n        }\r\n    }, [guideCategory]);\r\n\r\n    if (loading || !parent || !categories.length) {\r\n        return createEmptyComponent(container, {\r\n            ...other,\r\n            className: appendClassNames(className, 'humany-guide-category-dropdown'),\r\n        });\r\n    }\r\n\r\n    const selected = categories.find((category) => category.id === guideCategory) || parent;\r\n    const selectedSymbol = selected.activeSymbol || selected.symbol;\r\n\r\n    return (\r\n        <Styled.Wrapper\r\n            {...other}\r\n            data-loading={false}\r\n            data-toggler-in-focus={togglerFocus}\r\n            aria-expanded={isOpen}\r\n            className={appendClassNames(className, 'humany-guide-category-dropdown')}\r\n        >\r\n            {isOpen ? (\r\n                <>\r\n                    <Styled.TopItem className=\"humany-guide-category-dropdown-top-item\">\r\n                        <Styled.Link\r\n                            className=\"humany-guide-category-dropdown-link\"\r\n                            routeName={route}\r\n                            params={createParams({\r\n                                tag,\r\n                                phrase,\r\n                                sorting,\r\n                                guideCategory: parent.id,\r\n                                uriName: formatUrl(parent.title),\r\n                            })}\r\n                            selected={false}\r\n                        >\r\n                            {parent.symbol ? <SymbolBadge symbol={parent.symbol} /> : null}\r\n                            <Text>{parent.title}</Text>\r\n                            <GuideCategoryDropdownMatchCount {...parent} />\r\n                        </Styled.Link>\r\n                        <Styled.Toggler\r\n                            onBlur={() => setTogglerFocus(false)}\r\n                            onFocus={() => setTogglerFocus(true)}\r\n                            className=\"humany-guide-category-dropdown-toggler\"\r\n                            onClick={() => {\r\n                                setIsOpen(!isOpen);\r\n                            }}\r\n                            aria-expanded=\"true\"\r\n                            aria-label={selected.title}\r\n                        >\r\n                            <SymbolBadge size={18} symbol={{ type: 'Svg', content: 'caret-up' }} />\r\n                        </Styled.Toggler>\r\n                    </Styled.TopItem>\r\n                    <Styled.List\r\n                        className=\"humany-guide-category-dropdown-open\"\r\n                        items={categories}\r\n                        renderItem={(item: Category) => (\r\n                            <GuideCategoryDropdownItem\r\n                                key={item.id}\r\n                                item={item}\r\n                                guideCategory={guideCategory}\r\n                            />\r\n                        )}\r\n                    />\r\n                </>\r\n            ) : (\r\n                <Styled.TopItem className=\"humany-guide-category-dropdown-top-item\">\r\n                    <Styled.Item\r\n                        className=\"humany-guide-category-dropdown-item\"\r\n                        onClick={() => {\r\n                            setIsOpen(!isOpen);\r\n                        }}\r\n                        selected={false}\r\n                    >\r\n                        {selectedSymbol ? <SymbolBadge symbol={selectedSymbol} /> : null}\r\n                        <Text>{selected.title}</Text>\r\n                        <GuideCategoryDropdownMatchCount {...selected} />\r\n                    </Styled.Item>\r\n                    <Styled.Toggler\r\n                        onBlur={() => setTogglerFocus(false)}\r\n                        onFocus={() => setTogglerFocus(true)}\r\n                        className=\"humany-guide-category-dropdown-toggler\"\r\n                        onClick={() => {\r\n                            setIsOpen(!isOpen);\r\n                        }}\r\n                        aria-expanded=\"false\"\r\n                        aria-label={selected.title}\r\n                    >\r\n                        <SymbolBadge size={18} symbol={{ type: 'Svg', content: 'caret-down' }} />\r\n                    </Styled.Toggler>\r\n                </Styled.TopItem>\r\n            )}\r\n        </Styled.Wrapper>\r\n    );\r\n};\r\n\r\nexport default GuideCategoryDropdown;\r\n"],"names":["BaseLink","BaseList"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,UAAe,OAAO;AAAA,MACtB;AAAA,MACA;AAAA;AAAA;AAAA,MAGA,CAAC;;AACC,WAAE,4BACF,SAAE,MAAM,kBAAR,mBAAuB,cACvB;AAAA;AAAA,kBAEU;AAAA;AAAA;AAAA;AAAA;AAMlB,MAAM,UAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAOX,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMjB,CAAC,MAAM;;AAAA,iBAAE,MAAM,WAAR,mBAAgB;AAAA;AAAA;AAAA;AAAA;AAM7C,MAAM,UAAU;AAAA,iBACC,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOxB,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA,oBACjB,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA;AAAA;AAAA,MAGpC,CAAC,MACC;;AAAA,WAAE,WACI;AAAA,2CAC6B,QAAE,MAAM,WAAR,mBAAgB;AAAA,2BAChC,QAAE,MAAM,WAAR,mBAAgB;AAAA,kBAE7B;AAAA,2BACa,QAAE,MAAM,WAAR,mBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASnB,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA,qBACzB,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,MAAM,OAAY,OAAO;AAAA,MACnB;AAAA;AAGN,MAAM,OAAY,OAAOA,MAAQ;AAAA,MAC3B;AAAA;AAAA;AAAA;AAAA,cAIQ,CAAC,MAAA;;AAAM,kBAAE,MAAM,kBAAR,mBAAuB,cAAa;AAAA;AAAA;AAAA;AAAA;AAMzD,MAAM,UAAe,OAAO;AAAA;AAAA;AAAA,qBAGP,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAWrC;AAAA;AAAA;AAAA;AAMN,MAAM,OAAY,OAAOC,MAAQ;AAAA,MAC3B;AAAA;AAAA;AAAA;AAAA,oBAIc,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA,mBACvB,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA;AAAA,mBAEtB,CAAC,MAAM,EAAE,MAAM;AAAA;AAAA,sBAEZ,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU5C,MAAM,aAAkB,OAAO,IAAI;AAAA,oBACf,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA;AAG1C,IAAe,SAAA;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;ACjJA,MAAM,kCAAsD,CAAC,EAAE,cAAc;AACnE,QAAA,EAAE,iBAAiB,UAAU,cAAmD;AAEtF,MAAI,CAAC,kBAAkB,OAAO,YAAY,aAAa;AAC5C,WAAA;AAAA,EACX;AAEA,6CAAQ,OAAO,YAAP,MAAkB,KAAE,SAAQ,GAAC;AACzC;ACDA,MAAM,4BAA6C,CAAC,EAAE,MAAM,oBAAoB;AACtE,QAAA;AAAA,IACF,QAAQ;AAAA,IACR,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,yBAAyB;AAAA,MACzB,cAAmD;AACjD,QAAA,CAAC,UAAU,QAAQ,SAAS;AAClC,QAAM,EAAE,IAAI,OAAO,QAAQ,iBAAiB;AAE5C,QAAM,WAAW,kBAAkB;AACnC,SACK,sBAAA,cAAA,MAAA;AAAA,IAAG,KAAK;AAAA,EACL,GAAA,sBAAA,cAAC,OAAO,MAAP,iCACO,qBAAqB,MAAM,OAAO,wBAAwB,UAAU,IAD3E;AAAA,IAEG,gBAAc;AAAA,IACd,cAAwB,YAAA,0BAA0B,mBAAmB,QACjE,gBACA,KACJ;AAAA,IACA,WAAU;AAAA,IACV,gBAAc;AAAA,IACd;AAAA,EAAA,IAEE,aAAY,aAAa,eACtB,sBAAA,cAAA,aAAA;AAAA,IAAY,QAAQ;AAAA,EAAc,CAAA,IAEnC,UAAW,sBAAA,cAAA,aAAA;AAAA,IAAY;AAAA,EAAA,CAAgB,GAE3C,sBAAA,cAAC,MAAM,MAAA,KAAM,GACZ,sBAAA,cAAA,iCAAA,mBAAoC,KAAM,CAC/C,CACJ;AAER;AC3BA,MAAM,wBAA0C,CAAC,OAA4B;AAA5B,eAAE,gBAAF,IAAgB,kBAAhB,IAAgB,CAAd;AAC/C,QAAM,YAAY;AAClB,QAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;AAChD,QAAA;AAAA,IACF;AAAA,IACA,QAAQ;AAAA,IACR,aAAa,CAAC;AAAA,IACd,UAAU;AAAA,MACV,cAAmD;AACvD,QAAM,YAAY;AAClB,QAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;AAC1C,QAAM,EAAE,WAAW;AACnB,QAAM,EAAE,eAAe,KAAK,QAAQ,YAAY;AAEhD,YAAU,MAAM;AACZ,QAAI,QAAQ;AACR,gBAAU,KAAK;AAAA,IACnB;AAAA,EAAA,GACD,CAAC,aAAa,CAAC;AAElB,MAAI,WAAW,CAAC,UAAU,CAAC,WAAW,QAAQ;AAC1C,WAAO,qBAAqB,WAAW,iCAChC,QADgC;AAAA,MAEnC,WAAW,iBAAiB,WAAW,gCAAgC;AAAA,IAAA,EAC1E;AAAA,EACL;AAEM,QAAA,WAAW,WAAW,KAAK,CAAC,aAAa,SAAS,OAAO,aAAa,KAAK;AAC3E,QAAA,iBAAiB,SAAS,gBAAgB,SAAS;AAGrD,SAAA,sBAAA,cAAC,OAAO,SAAP,iCACO,QADP;AAAA,IAEG,gBAAc;AAAA,IACd,yBAAuB;AAAA,IACvB,iBAAe;AAAA,IACf,WAAW,iBAAiB,WAAW,gCAAgC;AAAA,EAAA,IAEtE,SACG,sBAAA,cAAA,MAAA,UAAA,MACK,sBAAA,cAAA,OAAO,SAAP;AAAA,IAAe,WAAU;AAAA,EACtB,GAAA,sBAAA,cAAC,OAAO,MAAP;AAAA,IACG,WAAU;AAAA,IACV,WAAW;AAAA,IACX,QAAQ,aAAa;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe,OAAO;AAAA,MACtB,SAAS,UAAU,OAAO,KAAK;AAAA,IAAA,CAClC;AAAA,IACD,UAAU;AAAA,EAET,GAAA,OAAO,SAAU,sBAAA,cAAA,aAAA;AAAA,IAAY,QAAQ,OAAO;AAAA,EAAQ,CAAA,IAAK,MAC1D,sBAAA,cAAC,YAAM,OAAO,KAAM,GACnB,sBAAA,cAAA,iCAAA,mBAAoC,OAAQ,CACjD,GACC,sBAAA,cAAA,OAAO,SAAP;AAAA,IACG,QAAQ,MAAM,gBAAgB,KAAK;AAAA,IACnC,SAAS,MAAM,gBAAgB,IAAI;AAAA,IACnC,WAAU;AAAA,IACV,SAAS,MAAM;AACX,gBAAU,CAAC,MAAM;AAAA,IACrB;AAAA,IACA,iBAAc;AAAA,IACd,cAAY,SAAS;AAAA,EAAA,GAEpB,sBAAA,cAAA,aAAA;AAAA,IAAY,MAAM;AAAA,IAAI,QAAQ,EAAE,MAAM,OAAO,SAAS,WAAW;AAAA,EAAG,CAAA,CACzE,CACJ,GACA,sBAAA,cAAC,OAAO,MAAP;AAAA,IACG,WAAU;AAAA,IACV,OAAO;AAAA,IACP,YAAY,CAAC,SACR,sBAAA,cAAA,2BAAA;AAAA,MACG,KAAK,KAAK;AAAA,MACV;AAAA,MACA;AAAA,IAAA,CACJ;AAAA,EAER,CAAA,CACJ,IAEC,sBAAA,cAAA,OAAO,SAAP;AAAA,IAAe,WAAU;AAAA,EACtB,GAAA,sBAAA,cAAC,OAAO,MAAP;AAAA,IACG,WAAU;AAAA,IACV,SAAS,MAAM;AACX,gBAAU,CAAC,MAAM;AAAA,IACrB;AAAA,IACA,UAAU;AAAA,EAAA,GAET,iBAAkB,sBAAA,cAAA,aAAA;AAAA,IAAY,QAAQ;AAAA,EAAgB,CAAA,IAAK,MAC5D,sBAAA,cAAC,YAAM,SAAS,KAAM,GACrB,sBAAA,cAAA,iCAAA,mBAAoC,SAAU,CACnD,GACC,sBAAA,cAAA,OAAO,SAAP;AAAA,IACG,QAAQ,MAAM,gBAAgB,KAAK;AAAA,IACnC,SAAS,MAAM,gBAAgB,IAAI;AAAA,IACnC,WAAU;AAAA,IACV,SAAS,MAAM;AACX,gBAAU,CAAC,MAAM;AAAA,IACrB;AAAA,IACA,iBAAc;AAAA,IACd,cAAY,SAAS;AAAA,EAAA,GAEpB,sBAAA,cAAA,aAAA;AAAA,IAAY,MAAM;AAAA,IAAI,QAAQ,EAAE,MAAM,OAAO,SAAS,aAAa;AAAA,EAAA,CAAG,CAC3E,CACJ,CAER;AAER;;"}

package/dist/index.js

@@ -0,0 +1,91 @@
+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 findParentAndSiblings = (categories, root, currentCategoryId) => {
+  if (!currentCategoryId || currentCategoryId.length < 1) {
+    return root;
+  }
+  return findRecursive(categories, root, null, currentCategoryId);
+};
+const findRecursive = (categories, root, previous, currentCategoryId) => {
+  const filtered = categories.find((c) => c.id === currentCategoryId);
+  if (filtered || !currentCategoryId) {
+    if (!previous) {
+      return root;
+    }
+    return previous;
+  }
+  for (let i = 0; i < categories.length; i += 1) {
+    const cat = categories[i];
+    if (cat.items) {
+      const result = findRecursive(cat.items, root, cat, currentCategoryId);
+      if (result) {
+        return result;
+      }
+    }
+  }
+};
+const filterEmptyCategories = (category) => category.matches && category.matches > 0;
+var GuideCategoryDropdownComponent = (container) => {
+  const { events } = container.get("$widget");
+  const [subscribe, unsubscribe] = createEventSubscriber(events);
+  return createReactComponent(container, "guide-category-dropdown", import("./guide-category-dropdown.js"), (component) => {
+    const fetch = (params) => {
+      component.writeProperties({ loading: true });
+      component.actions.dispatch("fetch", { params }).then(() => {
+        component.writeProperties({ loading: false });
+      });
+    };
+    component.actions.create("fetch", ({ parent, categories }) => {
+      component.writeProperties({
+        parent,
+        categories,
+        loading: false
+      });
+    });
+    container.getAsync("router").then((router) => {
+      const { params } = router.getRouteData();
+      fetch(params);
+    });
+    subscribe("router:changed", (event, { current }) => {
+      fetch(current.routeData.params);
+    });
+  }).then(() => {
+    return extendComponent(container, "guide-category-dropdown", (component) => {
+      component.actions.watch("guide-category-dropdown.fetch", (input, next) => {
+        const {
+          matchFilters = {
+            search: false,
+            tag: false
+          },
+          rootCategoryHeader
+        } = component.properties();
+        const {
+          params: { phrase, guideCategory, tag }
+        } = input;
+        return container.getAsync("dataClient").then((dataClient) => {
+          return dataClient.fetch(DataType.GuideCategories, {
+            searchPhrase: matchFilters.search ? phrase : void 0,
+            tagId: matchFilters.tag ? tag : void 0
+          }).then(({ categories, matches }) => {
+            var _a;
+            const parent = findParentAndSiblings(categories, {
+              matches,
+              id: "0",
+              title: rootCategoryHeader,
+              items: categories
+            }, guideCategory);
+            return next({
+              parent,
+              categories: (_a = parent == null ? void 0 : parent.items) == null ? void 0 : _a.filter(filterEmptyCategories)
+            });
+          });
+        });
+      });
+    });
+  }).then(() => {
+    unsubscribe();
+  });
+};
+export { GuideCategoryDropdownComponent as default };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/guide-category-dropdown-component.ts"],"sourcesContent":["import { MatchFilterProperties } from '@telia-ace/knowledge-widget-component-utilities';\r\nimport { Category, createEventSubscriber, extendComponent } from '@telia-ace/knowledge-widget-core';\r\nimport { CategoriesResult, DataType } from '@telia-ace/knowledge-widget-types-grid';\r\nimport { createReactComponent } from '@telia-ace/knowledge-widget-ui';\r\nimport { Container } from '@webprovisions/platform';\r\n\r\nconst findParentAndSiblings = (\r\n    categories: Category[],\r\n    root: Category,\r\n    currentCategoryId: string\r\n): Category | undefined => {\r\n    if (!currentCategoryId || currentCategoryId.length < 1) {\r\n        return root;\r\n    }\r\n    return findRecursive(categories, root, null, currentCategoryId);\r\n};\r\n\r\nconst findRecursive = (\r\n    categories: Category[],\r\n    root: Category,\r\n    previous: Category | null,\r\n    currentCategoryId: string\r\n): Category | undefined => {\r\n    const filtered = categories.find((c) => c.id === currentCategoryId);\r\n    if (filtered || !currentCategoryId) {\r\n        if (!previous) {\r\n            return root;\r\n        }\r\n        return previous;\r\n    }\r\n\r\n    for (let i = 0; i < categories.length; i += 1) {\r\n        const cat = categories[i];\r\n        if (cat.items) {\r\n            const result = findRecursive(cat.items, root, cat, currentCategoryId);\r\n            if (result) {\r\n                return result;\r\n            }\r\n        }\r\n    }\r\n};\r\n\r\nconst filterEmptyCategories = (category: Category) => category.matches && category.matches > 0;\r\n\r\nexport type GuideCategoryDropdownComponentProps = {\r\n    matchFilters?: Partial<MatchFilterProperties>;\r\n    rootCategoryHeader: string;\r\n    route?: string;\r\n    categoryAriaLabel?: string;\r\n    activeCategoryAriaLabel?: string;\r\n    parent?: Category; // internal\r\n    categories?: Category[]; // internal\r\n    showMatchCount?: boolean;\r\n    fallbackOnInitialRoute?: boolean;\r\n};\r\n\r\nexport default (container: Container) => {\r\n    const { events } = container.get('$widget');\r\n    const [subscribe, unsubscribe] = createEventSubscriber(events);\r\n\r\n    return createReactComponent(\r\n        container,\r\n        'guide-category-dropdown',\r\n        import('./guide-category-dropdown'),\r\n        (component) => {\r\n            const fetch = (params: { [key: string]: any }) => {\r\n                component.writeProperties({ loading: true });\r\n                component.actions.dispatch('fetch', { params }).then(() => {\r\n                    component.writeProperties({ loading: false });\r\n                });\r\n            };\r\n\r\n            component.actions.create('fetch', ({ parent, categories }) => {\r\n                component.writeProperties({\r\n                    parent,\r\n                    categories,\r\n                    loading: false,\r\n                });\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    )\r\n        .then(() => {\r\n            return extendComponent(container, 'guide-category-dropdown', (component) => {\r\n                component.actions.watch('guide-category-dropdown.fetch', (input, next) => {\r\n                    const {\r\n                        matchFilters = {\r\n                            search: false,\r\n                            tag: false,\r\n                        },\r\n                        rootCategoryHeader,\r\n                    } = component.properties<GuideCategoryDropdownComponentProps>();\r\n                    const {\r\n                        params: { phrase, guideCategory, tag },\r\n                    } = input;\r\n                    return container.getAsync('dataClient').then((dataClient) => {\r\n                        return dataClient\r\n                            .fetch(DataType.GuideCategories, {\r\n                                searchPhrase: matchFilters.search ? phrase : undefined,\r\n                                tagId: matchFilters.tag ? tag : undefined,\r\n                            })\r\n                            .then(({ categories, matches }: CategoriesResult) => {\r\n                                const parent = findParentAndSiblings(\r\n                                    categories,\r\n                                    {\r\n                                        matches,\r\n                                        id: '0',\r\n                                        title: rootCategoryHeader,\r\n                                        items: categories,\r\n                                    },\r\n                                    guideCategory\r\n                                );\r\n\r\n                                return next({\r\n                                    parent,\r\n                                    categories: parent?.items?.filter(filterEmptyCategories),\r\n                                });\r\n                            });\r\n                    });\r\n                });\r\n            });\r\n        })\r\n        .then(() => {\r\n            unsubscribe();\r\n        });\r\n};\r\n"],"names":[],"mappings":";;;AAMA,MAAM,wBAAwB,CAC1B,YACA,MACA,sBACuB;AACvB,MAAI,CAAC,qBAAqB,kBAAkB,SAAS,GAAG;AAC7C,WAAA;AAAA,EACX;AACA,SAAO,cAAc,YAAY,MAAM,MAAM,iBAAiB;AAClE;AAEA,MAAM,gBAAgB,CAClB,YACA,MACA,UACA,sBACuB;AACvB,QAAM,WAAW,WAAW,KAAK,CAAC,MAAM,EAAE,OAAO,iBAAiB;AAC9D,MAAA,YAAY,CAAC,mBAAmB;AAChC,QAAI,CAAC,UAAU;AACJ,aAAA;AAAA,IACX;AACO,WAAA;AAAA,EACX;AAEA,WAAS,IAAI,GAAG,IAAI,WAAW,QAAQ,KAAK,GAAG;AAC3C,UAAM,MAAM,WAAW;AACvB,QAAI,IAAI,OAAO;AACX,YAAM,SAAS,cAAc,IAAI,OAAO,MAAM,KAAK,iBAAiB;AACpE,UAAI,QAAQ;AACD,eAAA;AAAA,MACX;AAAA,IACJ;AAAA,EACJ;AACJ;AAEA,MAAM,wBAAwB,CAAC,aAAuB,SAAS,WAAW,SAAS,UAAU;AAc7F,IAAe,iCAAA,CAAC,cAAyB;AACrC,QAAM,EAAE,WAAW,UAAU,IAAI,SAAS;AAC1C,QAAM,CAAC,WAAW,eAAe,sBAAsB,MAAM;AAE7D,SAAO,qBACH,WACA,2BACA,OAAO,iCACP,CAAC,cAAc;AACL,UAAA,QAAQ,CAAC,WAAmC;AAC9C,gBAAU,gBAAgB,EAAE,SAAS,KAAM,CAAA;AACjC,gBAAA,QAAQ,SAAS,SAAS,EAAE,OAAQ,CAAA,EAAE,KAAK,MAAM;AACvD,kBAAU,gBAAgB,EAAE,SAAS,MAAO,CAAA;AAAA,MAAA,CAC/C;AAAA,IAAA;AAGL,cAAU,QAAQ,OAAO,SAAS,CAAC,EAAE,QAAQ,iBAAiB;AAC1D,gBAAU,gBAAgB;AAAA,QACtB;AAAA,QACA;AAAA,QACA,SAAS;AAAA,MAAA,CACZ;AAAA,IAAA,CACJ;AAED,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;AAAA,EAAA,CAET,EACK,KAAK,MAAM;AACR,WAAO,gBAAgB,WAAW,2BAA2B,CAAC,cAAc;AACxE,gBAAU,QAAQ,MAAM,iCAAiC,CAAC,OAAO,SAAS;AAChE,cAAA;AAAA,UACF,eAAe;AAAA,YACX,QAAQ;AAAA,YACR,KAAK;AAAA,UACT;AAAA,UACA;AAAA,YACA,UAAU;AACR,cAAA;AAAA,UACF,QAAQ,EAAE,QAAQ,eAAe;AAAA,YACjC;AACJ,eAAO,UAAU,SAAS,YAAY,EAAE,KAAK,CAAC,eAAe;AAClD,iBAAA,WACF,MAAM,SAAS,iBAAiB;AAAA,YAC7B,cAAc,aAAa,SAAS,SAAS;AAAA,YAC7C,OAAO,aAAa,MAAM,MAAM;AAAA,UACnC,CAAA,EACA,KAAK,CAAC,EAAE,YAAY,cAAgC;;AAC3C,kBAAA,SAAS,sBACX,YACA;AAAA,cACI;AAAA,cACA,IAAI;AAAA,cACJ,OAAO;AAAA,cACP,OAAO;AAAA,eAEX,aACJ;AAEA,mBAAO,KAAK;AAAA,cACR;AAAA,cACA,YAAY,uCAAQ,UAAR,mBAAe,OAAO;AAAA,YAAqB,CAC1D;AAAA,UAAA,CACJ;AAAA,QAAA,CACR;AAAA,MAAA,CACJ;AAAA,IAAA,CACJ;AAAA,EAAA,CACJ,EACA,KAAK,MAAM;AACI;EAAA,CACf;AACT;;"}

package/package.json

@@ -1,34 +1,33 @@
 {
     "name": "@telia-ace/knowledge-widget-components-guide-category-dropdown",
-    "version": "1.0.4",
+    "version": "1.0.8",
     "description": "Guide category dropdown component for ACE Knowledge Widgets.",
     "license": "SEE LICENSE IN LICENSE.txt",
     "author": "Telia Company AB",
     "keywords": [
         "telia"
     ],
-    "main": "lib/index.js",
-    "module": "lib-esm/index.js",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
     "files": [
         "LICENSE.txt",
         "README.md",
-        "lib/",
-        "lib-esm/"
+        "dist/"
     ],
     "publishConfig": {
         "access": "public"
     },
     "scripts": {
-        "clean": "cleandir lib && cleandir lib-esm",
-        "compile": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json"
+        "clean": "rimraf ./dist",
+        "precompile": "tsc -emitDeclarationOnly",
+        "compile": "vite build"
     },
     "sideEffects": false,
-    "typings": "lib/index.d.ts",
     "dependencies": {
-        "@telia-ace/knowledge-widget-component-utilities": "^1.0.4",
-        "@telia-ace/knowledge-widget-core": "^1.0.6",
-        "@telia-ace/knowledge-widget-types-grid": "^1.0.7",
-        "@telia-ace/knowledge-widget-ui": "^1.0.7",
+        "@telia-ace/knowledge-widget-component-utilities": "^1.0.8",
+        "@telia-ace/knowledge-widget-core": "^1.0.7",
+        "@telia-ace/knowledge-widget-types-grid": "^1.0.14",
+        "@telia-ace/knowledge-widget-ui": "^1.0.11",
         "@telia-ace/widget-utilities": "^1.0.1",
         "@webprovisions/platform": "^1.1.2"
     },
@@ -42,5 +41,5 @@
         "@types/react-dom": "^16.8.0",
         "@types/styled-components": "^5.1.7"
     },
-    "gitHead": "1a636ff74ac4e57ca173aa800b88a7853ceb7678"
+    "gitHead": "15dba08c1ba1c3c117353e50a2586be05a966288"
 }

package/lib/guide-category-dropdown-component.d.ts

@@ -1,16 +0,0 @@
-import { MatchFilterProperties } from '@telia-ace/knowledge-widget-component-utilities';
-import { Category } from '@telia-ace/knowledge-widget-core';
-import { Container } from '@webprovisions/platform';
-export declare type GuideCategoryDropdownComponentProps = {
-    matchFilters?: Partial<MatchFilterProperties>;
-    rootCategoryHeader: string;
-    route?: string;
-    categoryAriaLabel?: string;
-    activeCategoryAriaLabel?: string;
-    parent?: Category;
-    categories?: Category[];
-    showMatchCount?: boolean;
-    fallbackOnInitialRoute?: boolean;
-};
-declare const _default: (container: Container) => Promise<void>;
-export default _default;