@telia-ace/knowledge-widget-components-guide-category-dropdown 1.0.1

package/LICENSE.txt

@@ -0,0 +1,6 @@
+Copyright © 2021, Telia Company AB. All rights reserved.
+
+THIS PACKAGE AND CONTAINING SOFTWARE IS PART OF
+THE HUMANY SERVICE. BY USING THIS SOFTWARE YOU
+AGREE TO THE FOLLOWING TERMS AND CONDITIONS:
+http://www.humany.com/legal

package/README.md

@@ -0,0 +1,3 @@
+# `@telia-ace/widget-services`
+
+Services for ACE Widgets.

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

@@ -0,0 +1,16 @@
+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;

package/lib/guide-category-dropdown-component.js

@@ -0,0 +1,132 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var knowledge_widget_core_1 = require("@telia-ace/knowledge-widget-core");
+var knowledge_widget_types_grid_1 = require("@telia-ace/knowledge-widget-types-grid");
+var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
+var findParentAndSiblings = function (categories, root, currentCategoryId) {
+    if (!currentCategoryId || currentCategoryId.length < 1) {
+        return root;
+    }
+    return findRecursive(categories, root, null, currentCategoryId);
+};
+var findRecursive = function (categories, root, previous, currentCategoryId) {
+    var filtered = categories.find(function (c) { return c.id === currentCategoryId; });
+    if (filtered || !currentCategoryId) {
+        if (!previous) {
+            return root;
+        }
+        return previous;
+    }
+    for (var i = 0; i < categories.length; i += 1) {
+        var cat = categories[i];
+        if (cat.items) {
+            var result = findRecursive(cat.items, root, cat, currentCategoryId);
+            if (result) {
+                return result;
+            }
+        }
+    }
+};
+var filterEmptyCategories = function (category) { return category.matches && category.matches > 0; };
+exports.default = (function (container) {
+    var events = container.get('$widget').events;
+    var _a = __read((0, knowledge_widget_core_1.createEventSubscriber)(events), 2), subscribe = _a[0], unsubscribe = _a[1];
+    return (0, knowledge_widget_ui_1.createReactComponent)(container, 'guide-category-dropdown', Promise.resolve().then(function () { return __importStar(require('./guide-category-dropdown')); }), function (component) {
+        var fetch = function (params) {
+            component.writeProperties({ loading: true });
+            component.actions.dispatch('fetch', { params: params }).then(function () {
+                component.writeProperties({ loading: false });
+            });
+        };
+        component.actions.create('fetch', function (_a) {
+            var parent = _a.parent, categories = _a.categories;
+            component.writeProperties({
+                parent: parent,
+                categories: categories,
+                loading: false,
+            });
+        });
+        container.getAsync('router').then(function (router) {
+            var params = router.getRouteData().params;
+            fetch(params);
+        });
+        subscribe('router:changed', function (event, _a) {
+            var current = _a.current;
+            fetch(current.routeData.params);
+        });
+    })
+        .then(function () {
+        return (0, knowledge_widget_core_1.extendComponent)(container, 'guide-category-dropdown', function (component) {
+            component.actions.watch('guide-category-dropdown.fetch', function (input, next) {
+                var _a = component.properties(), _b = _a.matchFilters, matchFilters = _b === void 0 ? {
+                    search: false,
+                    tag: false,
+                } : _b, rootCategoryHeader = _a.rootCategoryHeader;
+                var _c = input.params, phrase = _c.phrase, guideCategory = _c.guideCategory, tag = _c.tag;
+                return container.getAsync('dataClient').then(function (dataClient) {
+                    return dataClient
+                        .fetch(knowledge_widget_types_grid_1.DataType.GuideCategories, {
+                        searchPhrase: matchFilters.search ? phrase : undefined,
+                        tagId: matchFilters.tag ? tag : undefined,
+                    })
+                        .then(function (_a) {
+                        var _b;
+                        var categories = _a.categories, matches = _a.matches;
+                        var parent = findParentAndSiblings(categories, {
+                            matches: matches,
+                            id: '0',
+                            title: rootCategoryHeader,
+                            items: categories,
+                        }, guideCategory);
+                        return next({
+                            parent: parent,
+                            categories: (_b = parent === null || parent === void 0 ? void 0 : parent.items) === null || _b === void 0 ? void 0 : _b.filter(filterEmptyCategories),
+                        });
+                    });
+                });
+            });
+        });
+    })
+        .then(function () {
+        unsubscribe();
+    });
+});

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

@@ -0,0 +1,8 @@
+import { Category } from '@telia-ace/knowledge-widget-core';
+import React from 'react';
+declare type Props = {
+    item: Category;
+    guideCategory: string;
+};
+declare const GuideCategoryDropdownItem: React.FC<Props>;
+export default GuideCategoryDropdownItem;

package/lib/guide-category-dropdown-item.js

@@ -0,0 +1,50 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var knowledge_widget_component_utilities_1 = require("@telia-ace/knowledge-widget-component-utilities");
+var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
+var react_1 = __importDefault(require("react"));
+var guide_category_dropdown_match_count_1 = __importDefault(require("./guide-category-dropdown-match-count"));
+var guide_category_dropdown_styles_1 = __importDefault(require("./guide-category-dropdown.styles"));
+var GuideCategoryDropdownItem = function (_a) {
+    var item = _a.item, guideCategory = _a.guideCategory;
+    var _b = (0, knowledge_widget_ui_1.useProperties)(), _c = _b.route, route = _c === void 0 ? 'browse' : _c, _d = _b.categoryAriaLabel, categoryAriaLabel = _d === void 0 ? '' : _d, _e = _b.activeCategoryAriaLabel, activeCategoryAriaLabel = _e === void 0 ? '' : _e, _f = _b.fallbackOnInitialRoute, fallbackOnInitialRoute = _f === void 0 ? false : _f;
+    var _g = __read((0, knowledge_widget_ui_1.useHover)(), 2), hovering = _g[0], elem = _g[1];
+    var id = item.id, title = item.title, symbol = item.symbol, activeSymbol = item.activeSymbol;
+    var selected = guideCategory === id;
+    return (react_1.default.createElement("li", { ref: elem },
+        react_1.default.createElement(guide_category_dropdown_styles_1.default.Link, __assign({}, (0, knowledge_widget_component_utilities_1.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 }),
+            (selected || hovering) && activeSymbol ? (react_1.default.createElement(knowledge_widget_ui_1.SymbolBadge, { symbol: activeSymbol })) : (symbol && react_1.default.createElement(knowledge_widget_ui_1.SymbolBadge, { symbol: symbol })),
+            react_1.default.createElement(knowledge_widget_ui_1.Text, null, title),
+            react_1.default.createElement(guide_category_dropdown_match_count_1.default, __assign({}, item)))));
+};
+exports.default = GuideCategoryDropdownItem;

package/lib/guide-category-dropdown-match-count.d.ts

@@ -0,0 +1,4 @@
+import { Category } from '@telia-ace/knowledge-widget-core';
+import React from 'react';
+declare const GuideCategoryDropdownMatchCount: React.FC<Category>;
+export default GuideCategoryDropdownMatchCount;

package/lib/guide-category-dropdown-match-count.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
+var react_1 = __importDefault(require("react"));
+var guide_category_dropdown_styles_1 = __importDefault(require("./guide-category-dropdown.styles"));
+var GuideCategoryDropdownMatchCount = function (_a) {
+    var matches = _a.matches;
+    var _b = (0, knowledge_widget_ui_1.useProperties)().showMatchCount, showMatchCount = _b === void 0 ? false : _b;
+    if (!showMatchCount || typeof matches === 'undefined') {
+        return null;
+    }
+    return react_1.default.createElement(guide_category_dropdown_styles_1.default.MatchCount, null,
+        "(",
+        matches,
+        ")");
+};
+exports.default = GuideCategoryDropdownMatchCount;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+declare type Props = {
+    className: string;
+};
+declare const GuideCategoryDropdown: React.SFC<Props>;
+export default GuideCategoryDropdown;

package/lib/guide-category-dropdown.js

@@ -0,0 +1,120 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = __importStar(require("react"));
+var guide_category_dropdown_item_1 = __importDefault(require("./guide-category-dropdown-item"));
+var guide_category_dropdown_match_count_1 = __importDefault(require("./guide-category-dropdown-match-count"));
+var guide_category_dropdown_styles_1 = __importDefault(require("./guide-category-dropdown.styles"));
+var GuideCategoryDropdown = function (_a) {
+    var className = _a.className, other = __rest(_a, ["className"]);
+    var routeData = (0, knowledge_widget_ui_1.useRouteData)();
+    var _b = __read((0, react_1.useState)(false), 2), togglerFocus = _b[0], setTogglerFocus = _b[1];
+    var _c = (0, knowledge_widget_ui_1.useProperties)(), parent = _c.parent, _d = _c.route, route = _d === void 0 ? 'browse' : _d, _e = _c.categories, categories = _e === void 0 ? [] : _e, _f = _c.loading, loading = _f === void 0 ? false : _f;
+    var container = (0, knowledge_widget_ui_1.useContainer)();
+    var _g = __read((0, react_1.useState)(false), 2), isOpen = _g[0], setIsOpen = _g[1];
+    var params = routeData.params;
+    var guideCategory = params.guideCategory, tag = params.tag, phrase = params.phrase, sorting = params.sorting;
+    (0, react_1.useEffect)(function () {
+        if (isOpen) {
+            setIsOpen(false);
+        }
+    }, [guideCategory]);
+    if (loading || !parent || !categories.length) {
+        return (0, knowledge_widget_ui_1.createEmptyComponent)(container, __assign(__assign({}, other), { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-guide-category-dropdown') }));
+    }
+    var selected = categories.find(function (category) { return category.id === guideCategory; }) || parent;
+    var selectedSymbol = selected.activeSymbol || selected.symbol;
+    return (react_1.default.createElement(guide_category_dropdown_styles_1.default.Wrapper, __assign({}, other, { "data-loading": false, "data-toggler-in-focus": togglerFocus, "aria-expanded": isOpen, className: (0, widget_utilities_1.appendClassNames)(className, 'humany-guide-category-dropdown') }), isOpen ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(guide_category_dropdown_styles_1.default.TopItem, { className: "humany-guide-category-dropdown-top-item" },
+            react_1.default.createElement(guide_category_dropdown_styles_1.default.Link, { className: "humany-guide-category-dropdown-link", routeName: route, params: (0, widget_utilities_1.createParams)({
+                    tag: tag,
+                    phrase: phrase,
+                    sorting: sorting,
+                    guideCategory: parent.id,
+                    uriName: (0, widget_utilities_1.formatUrl)(parent.title),
+                }), selected: false },
+                parent.symbol ? react_1.default.createElement(knowledge_widget_ui_1.SymbolBadge, { symbol: parent.symbol }) : null,
+                react_1.default.createElement(knowledge_widget_ui_1.Text, null, parent.title),
+                react_1.default.createElement(guide_category_dropdown_match_count_1.default, __assign({}, parent))),
+            react_1.default.createElement(guide_category_dropdown_styles_1.default.Toggler, { onBlur: function () { return setTogglerFocus(false); }, onFocus: function () { return setTogglerFocus(true); }, className: "humany-guide-category-dropdown-toggler", onClick: function () {
+                    setIsOpen(!isOpen);
+                }, "aria-expanded": "true", "aria-label": selected.title },
+                react_1.default.createElement(knowledge_widget_ui_1.SymbolBadge, { size: 18, symbol: { type: 'Svg', content: 'caret-up' } }))),
+        react_1.default.createElement(guide_category_dropdown_styles_1.default.List, { className: "humany-guide-category-dropdown-open", items: categories, renderItem: function (item) { return (react_1.default.createElement(guide_category_dropdown_item_1.default, { key: item.id, item: item, guideCategory: guideCategory })); } }))) : (react_1.default.createElement(guide_category_dropdown_styles_1.default.TopItem, { className: "humany-guide-category-dropdown-top-item" },
+        react_1.default.createElement(guide_category_dropdown_styles_1.default.Item, { className: "humany-guide-category-dropdown-item", onClick: function () {
+                setIsOpen(!isOpen);
+            }, selected: false },
+            selectedSymbol ? react_1.default.createElement(knowledge_widget_ui_1.SymbolBadge, { symbol: selectedSymbol }) : null,
+            react_1.default.createElement(knowledge_widget_ui_1.Text, null, selected.title),
+            react_1.default.createElement(guide_category_dropdown_match_count_1.default, __assign({}, selected))),
+        react_1.default.createElement(guide_category_dropdown_styles_1.default.Toggler, { onBlur: function () { return setTogglerFocus(false); }, onFocus: function () { return setTogglerFocus(true); }, className: "humany-guide-category-dropdown-toggler", onClick: function () {
+                setIsOpen(!isOpen);
+            }, "aria-expanded": "false", "aria-label": selected.title },
+            react_1.default.createElement(knowledge_widget_ui_1.SymbolBadge, { size: 18, symbol: { type: 'Svg', content: 'caret-down' } }))))));
+};
+exports.default = GuideCategoryDropdown;

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+declare const _default: {
+    Wrapper: import("styled-components").StyledComponent<"div", any, any, never>;
+    Toggler: import("styled-components").StyledComponent<"button", any, {}, never>;
+    List: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("@telia-ace/knowledge-widget-ui").ListProps, "key" | keyof import("react").HTMLAttributes<HTMLUListElement> | "renderItem" | "items" | "renderLi"> & import("react").RefAttributes<HTMLUListElement>>, any, any, never>;
+    Item: import("styled-components").StyledComponent<"div", any, {
+        selected: boolean;
+    }, never>;
+    Link: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("@telia-ace/knowledge-widget-ui").LinkProps, "key" | "disabled" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement> | "routeName" | "params" | "to"> & import("react").RefAttributes<HTMLAnchorElement>>, any, any, never>;
+    TopItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+    MatchCount: import("styled-components").StyledComponent<import("react").FC<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>, any, {}, never>;
+};
+export default _default;

package/lib/guide-category-dropdown.styles.js

@@ -0,0 +1,57 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
+var styled_components_1 = __importStar(require("styled-components"));
+var Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n    ", "\n  overflow: hidden;\n    min-height: 50px;\n    ", ";\n"], ["\n    ", "\n    ", "\n  overflow: hidden;\n    min-height: 50px;\n    ", ";\n"])), knowledge_widget_ui_1.loadingOpacity, knowledge_widget_ui_1.contentBox, function (p) {
+    var _a;
+    return p['data-toggler-in-focus'] &&
+        ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            && {\n                ", "\n            }\n        "], ["\n            && {\n                ", "\n            }\n        "])), knowledge_widget_ui_1.borderTabStyle);
+});
+var Toggler = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    background: none;\n    border: 0;\n    outline: 0;\n    display: block;\n    cursor: pointer;\n    padding: 0;\n    font-size: ", ";\n    text-align: end;\n    flex: 1 0 auto;\n    svg {\n        path,\n        line {\n            stroke: ", ";\n        }\n    }\n"], ["\n    background: none;\n    border: 0;\n    outline: 0;\n    display: block;\n    cursor: pointer;\n    padding: 0;\n    font-size: ", ";\n    text-align: end;\n    flex: 1 0 auto;\n    svg {\n        path,\n        line {\n            stroke: ", ";\n        }\n    }\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
+var styling = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font-size: ", ";\n    text-align: left;\n    text-align: left;\n    text-decoration: none;\n    font-weight: 300;\n    display: flex;\n    align-items: center;\n    padding: ", ";\n    padding-left: ", ";\n    cursor: pointer;\n    overflow: hidden;\n    ", ";\n\n    span {\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    i {\n        margin-right: ", ";\n        font-size: ", ";\n        min-height: 1em;\n        min-width: 1em;\n    }\n"], ["\n    font-size: ", ";\n    text-align: left;\n    text-align: left;\n    text-decoration: none;\n    font-weight: 300;\n    display: flex;\n    align-items: center;\n    padding: ", ";\n    padding-left: ", ";\n    cursor: pointer;\n    overflow: hidden;\n    ", ";\n\n    span {\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    i {\n        margin-right: ", ";\n        font-size: ", ";\n        min-height: 1em;\n        min-width: 1em;\n    }\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large; }, function (p) {
+    var _a, _b, _c;
+    return p.selected
+        ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                  border-left: 2px solid ", ";\n                  color: ", ";\n              "], ["\n                  border-left: 2px solid ", ";\n                  color: ", ";\n              "])), (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary, (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.primary) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                  color: ", ";\n              "], ["\n                  color: ", ";\n              "])), (_c = p.theme.colors) === null || _c === void 0 ? void 0 : _c.text);
+}, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.medium; });
+var Item = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), styling);
+var Link = (0, styled_components_1.default)(knowledge_widget_ui_1.Link)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    ", "\n    &:focus {\n        outline: none;\n        span {\n            ", ";\n        }\n    }\n"], ["\n    ", "\n    &:focus {\n        outline: none;\n        span {\n            ", ";\n        }\n    }\n"])), styling, function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && knowledge_widget_ui_1.linkTabStyle; });
+var TopItem = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: flex;\n    justify-content: space-between;\n    padding-right: ", ";\n    min-height: 52px;\n    white-space: nowrap;\n\n    && {\n        font-weight: normal;\n\n        a {\n            font-weight: normal;\n        }\n    }\n    ", " {\n        font-weight: normal;\n    }\n"], ["\n    display: flex;\n    justify-content: space-between;\n    padding-right: ", ";\n    min-height: 52px;\n    white-space: nowrap;\n\n    && {\n        font-weight: normal;\n\n        a {\n            font-weight: normal;\n        }\n    }\n    ", " {\n        font-weight: normal;\n    }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large; }, Item);
+var List = (0, styled_components_1.default)(knowledge_widget_ui_1.List)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    ", "\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    margin-right: ", ";\n    margin-left: ", ";\n    margin-bottom: 22px;\n    border-left: ", ";\n    li {\n        margin: 0 0 ", " -2px;\n    }\n    li:last-child {\n        margin: 0 0 0 -2px;\n    }\n    flex-basis: 100%;\n    border-width: 2px;\n"], ["\n    ", "\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    margin-right: ", ";\n    margin-left: ", ";\n    margin-bottom: 22px;\n    border-left: ", ";\n    li {\n        margin: 0 0 ", " -2px;\n    }\n    li:last-child {\n        margin: 0 0 0 -2px;\n    }\n    flex-basis: 100%;\n    border-width: 2px;\n"])), knowledge_widget_ui_1.list, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large; }, function (p) { return p.theme.border; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
+var MatchCount = (0, styled_components_1.default)(knowledge_widget_ui_1.Text)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    margin: 0 0 0 ", ";\n"], ["\n    margin: 0 0 0 ", ";\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
+exports.default = {
+    Wrapper: Wrapper,
+    Toggler: Toggler,
+    List: List,
+    Item: Item,
+    Link: Link,
+    TopItem: TopItem,
+    MatchCount: MatchCount,
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+import GuideCategoryDropdownComponent from './guide-category-dropdown-component';
+export default GuideCategoryDropdownComponent;

package/lib/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var guide_category_dropdown_component_1 = __importDefault(require("./guide-category-dropdown-component"));
+exports.default = guide_category_dropdown_component_1.default;

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

@@ -0,0 +1,16 @@
+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;

package/lib-esm/guide-category-dropdown-component.js

@@ -0,0 +1,107 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+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';
+var findParentAndSiblings = function (categories, root, currentCategoryId) {
+    if (!currentCategoryId || currentCategoryId.length < 1) {
+        return root;
+    }
+    return findRecursive(categories, root, null, currentCategoryId);
+};
+var findRecursive = function (categories, root, previous, currentCategoryId) {
+    var filtered = categories.find(function (c) { return c.id === currentCategoryId; });
+    if (filtered || !currentCategoryId) {
+        if (!previous) {
+            return root;
+        }
+        return previous;
+    }
+    for (var i = 0; i < categories.length; i += 1) {
+        var cat = categories[i];
+        if (cat.items) {
+            var result = findRecursive(cat.items, root, cat, currentCategoryId);
+            if (result) {
+                return result;
+            }
+        }
+    }
+};
+var filterEmptyCategories = function (category) { return category.matches && category.matches > 0; };
+export default (function (container) {
+    var events = container.get('$widget').events;
+    var _a = __read(createEventSubscriber(events), 2), subscribe = _a[0], unsubscribe = _a[1];
+    return createReactComponent(container, 'guide-category-dropdown', import('./guide-category-dropdown'), function (component) {
+        var fetch = function (params) {
+            component.writeProperties({ loading: true });
+            component.actions.dispatch('fetch', { params: params }).then(function () {
+                component.writeProperties({ loading: false });
+            });
+        };
+        component.actions.create('fetch', function (_a) {
+            var parent = _a.parent, categories = _a.categories;
+            component.writeProperties({
+                parent: parent,
+                categories: categories,
+                loading: false,
+            });
+        });
+        container.getAsync('router').then(function (router) {
+            var params = router.getRouteData().params;
+            fetch(params);
+        });
+        subscribe('router:changed', function (event, _a) {
+            var current = _a.current;
+            fetch(current.routeData.params);
+        });
+    })
+        .then(function () {
+        return extendComponent(container, 'guide-category-dropdown', function (component) {
+            component.actions.watch('guide-category-dropdown.fetch', function (input, next) {
+                var _a = component.properties(), _b = _a.matchFilters, matchFilters = _b === void 0 ? {
+                    search: false,
+                    tag: false,
+                } : _b, rootCategoryHeader = _a.rootCategoryHeader;
+                var _c = input.params, phrase = _c.phrase, guideCategory = _c.guideCategory, tag = _c.tag;
+                return container.getAsync('dataClient').then(function (dataClient) {
+                    return dataClient
+                        .fetch(DataType.GuideCategories, {
+                        searchPhrase: matchFilters.search ? phrase : undefined,
+                        tagId: matchFilters.tag ? tag : undefined,
+                    })
+                        .then(function (_a) {
+                        var _b;
+                        var categories = _a.categories, matches = _a.matches;
+                        var parent = findParentAndSiblings(categories, {
+                            matches: matches,
+                            id: '0',
+                            title: rootCategoryHeader,
+                            items: categories,
+                        }, guideCategory);
+                        return next({
+                            parent: parent,
+                            categories: (_b = parent === null || parent === void 0 ? void 0 : parent.items) === null || _b === void 0 ? void 0 : _b.filter(filterEmptyCategories),
+                        });
+                    });
+                });
+            });
+        });
+    })
+        .then(function () {
+        unsubscribe();
+    });
+});

package/lib-esm/guide-category-dropdown-item.d.ts

@@ -0,0 +1,8 @@
+import { Category } from '@telia-ace/knowledge-widget-core';
+import React from 'react';
+declare type Props = {
+    item: Category;
+    guideCategory: string;
+};
+declare const GuideCategoryDropdownItem: React.FC<Props>;
+export default GuideCategoryDropdownItem;

package/lib-esm/guide-category-dropdown-item.js

@@ -0,0 +1,45 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { initialRouteFallback } from '@telia-ace/knowledge-widget-component-utilities';
+import { SymbolBadge, Text, useHover, useProperties } from '@telia-ace/knowledge-widget-ui';
+import React from 'react';
+import GuideCategoryDropdownMatchCount from './guide-category-dropdown-match-count';
+import Styled from './guide-category-dropdown.styles';
+var GuideCategoryDropdownItem = function (_a) {
+    var item = _a.item, guideCategory = _a.guideCategory;
+    var _b = useProperties(), _c = _b.route, route = _c === void 0 ? 'browse' : _c, _d = _b.categoryAriaLabel, categoryAriaLabel = _d === void 0 ? '' : _d, _e = _b.activeCategoryAriaLabel, activeCategoryAriaLabel = _e === void 0 ? '' : _e, _f = _b.fallbackOnInitialRoute, fallbackOnInitialRoute = _f === void 0 ? false : _f;
+    var _g = __read(useHover(), 2), hovering = _g[0], elem = _g[1];
+    var id = item.id, title = item.title, symbol = item.symbol, activeSymbol = item.activeSymbol;
+    var selected = guideCategory === id;
+    return (React.createElement("li", { ref: elem },
+        React.createElement(Styled.Link, __assign({}, 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 }),
+            (selected || hovering) && activeSymbol ? (React.createElement(SymbolBadge, { symbol: activeSymbol })) : (symbol && React.createElement(SymbolBadge, { symbol: symbol })),
+            React.createElement(Text, null, title),
+            React.createElement(GuideCategoryDropdownMatchCount, __assign({}, item)))));
+};
+export default GuideCategoryDropdownItem;

package/lib-esm/guide-category-dropdown-match-count.d.ts

@@ -0,0 +1,4 @@
+import { Category } from '@telia-ace/knowledge-widget-core';
+import React from 'react';
+declare const GuideCategoryDropdownMatchCount: React.FC<Category>;
+export default GuideCategoryDropdownMatchCount;

package/lib-esm/guide-category-dropdown-match-count.js

@@ -0,0 +1,15 @@
+import { useProperties } from '@telia-ace/knowledge-widget-ui';
+import React from 'react';
+import Styled from './guide-category-dropdown.styles';
+var GuideCategoryDropdownMatchCount = function (_a) {
+    var matches = _a.matches;
+    var _b = useProperties().showMatchCount, showMatchCount = _b === void 0 ? false : _b;
+    if (!showMatchCount || typeof matches === 'undefined') {
+        return null;
+    }
+    return React.createElement(Styled.MatchCount, null,
+        "(",
+        matches,
+        ")");
+};
+export default GuideCategoryDropdownMatchCount;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+declare type Props = {
+    className: string;
+};
+declare const GuideCategoryDropdown: React.SFC<Props>;
+export default GuideCategoryDropdown;

package/lib-esm/guide-category-dropdown.js

@@ -0,0 +1,92 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { createEmptyComponent, SymbolBadge, Text, useContainer, useProperties, useRouteData, } from '@telia-ace/knowledge-widget-ui';
+import { appendClassNames, createParams, formatUrl } from '@telia-ace/widget-utilities';
+import React, { useEffect, useState } from 'react';
+import GuideCategoryDropdownItem from './guide-category-dropdown-item';
+import GuideCategoryDropdownMatchCount from './guide-category-dropdown-match-count';
+import Styled from './guide-category-dropdown.styles';
+var GuideCategoryDropdown = function (_a) {
+    var className = _a.className, other = __rest(_a, ["className"]);
+    var routeData = useRouteData();
+    var _b = __read(useState(false), 2), togglerFocus = _b[0], setTogglerFocus = _b[1];
+    var _c = useProperties(), parent = _c.parent, _d = _c.route, route = _d === void 0 ? 'browse' : _d, _e = _c.categories, categories = _e === void 0 ? [] : _e, _f = _c.loading, loading = _f === void 0 ? false : _f;
+    var container = useContainer();
+    var _g = __read(useState(false), 2), isOpen = _g[0], setIsOpen = _g[1];
+    var params = routeData.params;
+    var guideCategory = params.guideCategory, tag = params.tag, phrase = params.phrase, sorting = params.sorting;
+    useEffect(function () {
+        if (isOpen) {
+            setIsOpen(false);
+        }
+    }, [guideCategory]);
+    if (loading || !parent || !categories.length) {
+        return createEmptyComponent(container, __assign(__assign({}, other), { className: appendClassNames(className, 'humany-guide-category-dropdown') }));
+    }
+    var selected = categories.find(function (category) { return category.id === guideCategory; }) || parent;
+    var selectedSymbol = selected.activeSymbol || selected.symbol;
+    return (React.createElement(Styled.Wrapper, __assign({}, other, { "data-loading": false, "data-toggler-in-focus": togglerFocus, "aria-expanded": isOpen, className: appendClassNames(className, 'humany-guide-category-dropdown') }), isOpen ? (React.createElement(React.Fragment, null,
+        React.createElement(Styled.TopItem, { className: "humany-guide-category-dropdown-top-item" },
+            React.createElement(Styled.Link, { className: "humany-guide-category-dropdown-link", routeName: route, params: createParams({
+                    tag: tag,
+                    phrase: phrase,
+                    sorting: sorting,
+                    guideCategory: parent.id,
+                    uriName: formatUrl(parent.title),
+                }), selected: false },
+                parent.symbol ? React.createElement(SymbolBadge, { symbol: parent.symbol }) : null,
+                React.createElement(Text, null, parent.title),
+                React.createElement(GuideCategoryDropdownMatchCount, __assign({}, parent))),
+            React.createElement(Styled.Toggler, { onBlur: function () { return setTogglerFocus(false); }, onFocus: function () { return setTogglerFocus(true); }, className: "humany-guide-category-dropdown-toggler", onClick: function () {
+                    setIsOpen(!isOpen);
+                }, "aria-expanded": "true", "aria-label": selected.title },
+                React.createElement(SymbolBadge, { size: 18, symbol: { type: 'Svg', content: 'caret-up' } }))),
+        React.createElement(Styled.List, { className: "humany-guide-category-dropdown-open", items: categories, renderItem: function (item) { return (React.createElement(GuideCategoryDropdownItem, { key: item.id, item: item, guideCategory: guideCategory })); } }))) : (React.createElement(Styled.TopItem, { className: "humany-guide-category-dropdown-top-item" },
+        React.createElement(Styled.Item, { className: "humany-guide-category-dropdown-item", onClick: function () {
+                setIsOpen(!isOpen);
+            }, selected: false },
+            selectedSymbol ? React.createElement(SymbolBadge, { symbol: selectedSymbol }) : null,
+            React.createElement(Text, null, selected.title),
+            React.createElement(GuideCategoryDropdownMatchCount, __assign({}, selected))),
+        React.createElement(Styled.Toggler, { onBlur: function () { return setTogglerFocus(false); }, onFocus: function () { return setTogglerFocus(true); }, className: "humany-guide-category-dropdown-toggler", onClick: function () {
+                setIsOpen(!isOpen);
+            }, "aria-expanded": "false", "aria-label": selected.title },
+            React.createElement(SymbolBadge, { size: 18, symbol: { type: 'Svg', content: 'caret-down' } }))))));
+};
+export default GuideCategoryDropdown;

package/lib-esm/guide-category-dropdown.styles.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+declare const _default: {
+    Wrapper: import("styled-components").StyledComponent<"div", any, any, never>;
+    Toggler: import("styled-components").StyledComponent<"button", any, {}, never>;
+    List: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("@telia-ace/knowledge-widget-ui").ListProps, "key" | keyof import("react").HTMLAttributes<HTMLUListElement> | "renderItem" | "items" | "renderLi"> & import("react").RefAttributes<HTMLUListElement>>, any, any, never>;
+    Item: import("styled-components").StyledComponent<"div", any, {
+        selected: boolean;
+    }, never>;
+    Link: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("@telia-ace/knowledge-widget-ui").LinkProps, "key" | "disabled" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement> | "routeName" | "params" | "to"> & import("react").RefAttributes<HTMLAnchorElement>>, any, any, never>;
+    TopItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+    MatchCount: import("styled-components").StyledComponent<import("react").FC<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>, any, {}, never>;
+};
+export default _default;

package/lib-esm/guide-category-dropdown.styles.js

@@ -0,0 +1,32 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { borderTabStyle, contentBox, Link as BaseLink, linkTabStyle, List as BaseList, list, loadingOpacity, Text, } from '@telia-ace/knowledge-widget-ui';
+import styled, { css } from 'styled-components';
+var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n    ", "\n  overflow: hidden;\n    min-height: 50px;\n    ", ";\n"], ["\n    ", "\n    ", "\n  overflow: hidden;\n    min-height: 50px;\n    ", ";\n"])), loadingOpacity, contentBox, function (p) {
+    var _a;
+    return p['data-toggler-in-focus'] &&
+        ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            && {\n                ", "\n            }\n        "], ["\n            && {\n                ", "\n            }\n        "])), borderTabStyle);
+});
+var Toggler = styled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    background: none;\n    border: 0;\n    outline: 0;\n    display: block;\n    cursor: pointer;\n    padding: 0;\n    font-size: ", ";\n    text-align: end;\n    flex: 1 0 auto;\n    svg {\n        path,\n        line {\n            stroke: ", ";\n        }\n    }\n"], ["\n    background: none;\n    border: 0;\n    outline: 0;\n    display: block;\n    cursor: pointer;\n    padding: 0;\n    font-size: ", ";\n    text-align: end;\n    flex: 1 0 auto;\n    svg {\n        path,\n        line {\n            stroke: ", ";\n        }\n    }\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
+var styling = css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font-size: ", ";\n    text-align: left;\n    text-align: left;\n    text-decoration: none;\n    font-weight: 300;\n    display: flex;\n    align-items: center;\n    padding: ", ";\n    padding-left: ", ";\n    cursor: pointer;\n    overflow: hidden;\n    ", ";\n\n    span {\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    i {\n        margin-right: ", ";\n        font-size: ", ";\n        min-height: 1em;\n        min-width: 1em;\n    }\n"], ["\n    font-size: ", ";\n    text-align: left;\n    text-align: left;\n    text-decoration: none;\n    font-weight: 300;\n    display: flex;\n    align-items: center;\n    padding: ", ";\n    padding-left: ", ";\n    cursor: pointer;\n    overflow: hidden;\n    ", ";\n\n    span {\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    i {\n        margin-right: ", ";\n        font-size: ", ";\n        min-height: 1em;\n        min-width: 1em;\n    }\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large; }, function (p) {
+    var _a, _b, _c;
+    return p.selected
+        ? css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                  border-left: 2px solid ", ";\n                  color: ", ";\n              "], ["\n                  border-left: 2px solid ", ";\n                  color: ", ";\n              "])), (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary, (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.primary) : css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                  color: ", ";\n              "], ["\n                  color: ", ";\n              "])), (_c = p.theme.colors) === null || _c === void 0 ? void 0 : _c.text);
+}, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.medium; });
+var Item = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), styling);
+var Link = styled(BaseLink)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    ", "\n    &:focus {\n        outline: none;\n        span {\n            ", ";\n        }\n    }\n"], ["\n    ", "\n    &:focus {\n        outline: none;\n        span {\n            ", ";\n        }\n    }\n"])), styling, function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && linkTabStyle; });
+var TopItem = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: flex;\n    justify-content: space-between;\n    padding-right: ", ";\n    min-height: 52px;\n    white-space: nowrap;\n\n    && {\n        font-weight: normal;\n\n        a {\n            font-weight: normal;\n        }\n    }\n    ", " {\n        font-weight: normal;\n    }\n"], ["\n    display: flex;\n    justify-content: space-between;\n    padding-right: ", ";\n    min-height: 52px;\n    white-space: nowrap;\n\n    && {\n        font-weight: normal;\n\n        a {\n            font-weight: normal;\n        }\n    }\n    ", " {\n        font-weight: normal;\n    }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large; }, Item);
+var List = styled(BaseList)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    ", "\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    margin-right: ", ";\n    margin-left: ", ";\n    margin-bottom: 22px;\n    border-left: ", ";\n    li {\n        margin: 0 0 ", " -2px;\n    }\n    li:last-child {\n        margin: 0 0 0 -2px;\n    }\n    flex-basis: 100%;\n    border-width: 2px;\n"], ["\n    ", "\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    margin-right: ", ";\n    margin-left: ", ";\n    margin-bottom: 22px;\n    border-left: ", ";\n    li {\n        margin: 0 0 ", " -2px;\n    }\n    li:last-child {\n        margin: 0 0 0 -2px;\n    }\n    flex-basis: 100%;\n    border-width: 2px;\n"])), list, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large; }, function (p) { return p.theme.border; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
+var MatchCount = styled(Text)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    margin: 0 0 0 ", ";\n"], ["\n    margin: 0 0 0 ", ";\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
+export default {
+    Wrapper: Wrapper,
+    Toggler: Toggler,
+    List: List,
+    Item: Item,
+    Link: Link,
+    TopItem: TopItem,
+    MatchCount: MatchCount,
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/lib-esm/index.d.ts

@@ -0,0 +1,2 @@
+import GuideCategoryDropdownComponent from './guide-category-dropdown-component';
+export default GuideCategoryDropdownComponent;

package/lib-esm/index.js

@@ -0,0 +1,2 @@
+import GuideCategoryDropdownComponent from './guide-category-dropdown-component';
+export default GuideCategoryDropdownComponent;

package/package.json

@@ -0,0 +1,44 @@
+{
+    "name": "@telia-ace/knowledge-widget-components-guide-category-dropdown",
+    "version": "1.0.1",
+    "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",
+    "files": [
+        "LICENSE.txt",
+        "README.md",
+        "lib/",
+        "lib-esm/"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "clean": "cleandir lib && cleandir lib-esm",
+        "compile": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json"
+    },
+    "sideEffects": false,
+    "typings": "lib/index.d.ts",
+    "dependencies": {
+        "@telia-ace/knowledge-widget-component-utilities": "^1.0.1",
+        "@telia-ace/knowledge-widget-core": "^1.0.1",
+        "@telia-ace/knowledge-widget-types-grid": "^1.0.1",
+        "@telia-ace/knowledge-widget-ui": "^1.0.1",
+        "@telia-ace/widget-utilities": "^1.0.1",
+        "@webprovisions/platform": "^1.1.2",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "styled-components": "^4.3.2"
+    },
+    "devDependencies": {
+        "@types/react": "^17.0.39",
+        "@types/react-dom": "^17.0.13",
+        "@types/styled-components": "^5.1.7"
+    },
+    "gitHead": "58b00b80f6a1e4a3c13f4291cb29b9422ea1aa4a"
+}