@telia-ace/knowledge-widget-components-search 1.0.4 → 1.0.9

package/lib/quick-filter-item-list.js

@@ -1,228 +0,0 @@
-"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 __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 __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 });
-exports.focusInput = exports.getFocusedIndex = void 0;
-var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
-var react_1 = __importStar(require("react"));
-var styled_components_1 = __importStar(require("styled-components"));
-var utils_1 = require("./utils");
-var getFocusedIndex = function (elem) {
-    var anchors = Array.from((elem === null || elem === void 0 ? void 0 : elem.getElementsByTagName('A')) || []).filter(function (a) { return a.getAttribute('disabled') === null; });
-    return {
-        anchors: anchors,
-        focusedIndex: anchors.findIndex(function (e) { return document.activeElement === e; }),
-    };
-};
-exports.getFocusedIndex = getFocusedIndex;
-var getInputElem = function (searchContainerRef) {
-    return searchContainerRef
-        ? searchContainerRef.querySelector('[data-type="search"], input[type="search"]')
-        : null;
-};
-var focusInput = function (searchContainerRef) {
-    if (!searchContainerRef) {
-        return;
-    }
-    var inputElem = getInputElem(searchContainerRef);
-    if (inputElem) {
-        inputElem.focus();
-    }
-};
-exports.focusInput = focusInput;
-var QuickFilterItemList = function (_a) {
-    var filterPhrase = _a.filterPhrase, rawItems = _a.items, filterType = _a.filterType, filterContainer = _a.filterContainer, searchContainer = _a.searchContainer, inputHasFocus = _a.inputHasFocus;
-    var _b = __read((0, react_1.useState)(rawItems || []), 2), items = _b[0], setItems = _b[1];
-    var _c = __read((0, react_1.useState)(null), 2), first = _c[0], setFirst = _c[1];
-    var dispatch = (0, knowledge_widget_ui_1.useDispatch)();
-    var _d = (0, knowledge_widget_ui_1.useProperties)(), activeFilterBadges = _d.activeFilterBadges, quickFilters = _d.quickFilters;
-    var autoSelect = (typeof quickFilters === 'object' && !!quickFilters.autoSelect) ||
-        (typeof quickFilters === 'boolean' && !!quickFilters);
-    (0, react_1.useEffect)(function () {
-        setItems((0, utils_1.filterItems)(rawItems, filterType, filterPhrase));
-    }, [filterPhrase, filterType, rawItems]);
-    (0, react_1.useEffect)(function () {
-        var _a;
-        if (filterContainer) {
-            var anchors = (0, exports.getFocusedIndex)(filterContainer).anchors;
-            var id = (_a = anchors[0]) === null || _a === void 0 ? void 0 : _a.getAttribute('data-id');
-            if (id) {
-                setFirst(id);
-            }
-        }
-    }, [items, filterContainer]);
-    var handleItemClicked = (0, react_1.useCallback)(function (item, type) {
-        var data = {
-            category: (activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.guideCategory)
-                ? activeFilterBadges.guideCategory.id
-                : undefined,
-            tag: (activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.tag) ? activeFilterBadges.tag.id : undefined,
-        };
-        if (type === 'guideCategory') {
-            data.category = item.id;
-        }
-        else if (type === 'tag') {
-            data.tag = item.id;
-        }
-        dispatch('quick-filter:add', data);
-    }, [activeFilterBadges, dispatch]);
-    var buildListProps = function (type) {
-        if (type === 'guideCategory') {
-            return {
-                renderItem: function (item, level) { return (react_1.default.createElement(StyledLink, { autoSelect: autoSelect && inputHasFocus && item.id === first, disabled: !(0, utils_1.match)(item.title, filterPhrase), tabIndex: !(0, utils_1.match)(item.title, filterPhrase) ? -1 : 0, onKeyDown: function (e) {
-                        if (e.key === 'Enter') {
-                            handleItemClicked(item, type);
-                        }
-                    }, "data-level": level, onClick: function () {
-                        handleItemClicked(item, type);
-                    }, "data-id": item.id },
-                    react_1.default.createElement(Title, { title: item.title, phrase: filterPhrase, matches: (0, utils_1.match)(item.title, filterPhrase) }))); },
-            };
-        }
-        return {
-            renderLi: true,
-            renderItem: function (item) { return (react_1.default.createElement(StyledLink, { autoSelect: autoSelect && inputHasFocus && item.id === first, onKeyDown: function (e) {
-                    if (e.key === 'Enter') {
-                        handleItemClicked(item, type);
-                    }
-                }, onClick: function () {
-                    handleItemClicked(item, type);
-                }, "data-id": item.id },
-                react_1.default.createElement(Title, { symbol: "#", title: item.title, phrase: filterPhrase, matches: (0, utils_1.match)(item.title, filterPhrase) }))); },
-        };
-    };
-    (0, knowledge_widget_ui_1.useEventListener)('keydown', function (e) {
-        var _a;
-        var key = e.key;
-        if (!filterContainer ||
-            !(key === 'ArrowDown' || key === 'ArrowUp' || key === 'Enter')) {
-            return;
-        }
-        var _b = (0, exports.getFocusedIndex)(filterContainer), anchors = _b.anchors, focusedIndex = _b.focusedIndex;
-        if (key === 'Enter') {
-            if (inputHasFocus && autoSelect) {
-                var id = (_a = anchors[0]) === null || _a === void 0 ? void 0 : _a.getAttribute('data-id');
-                if (id) {
-                    handleItemClicked({ id: id }, filterType);
-                }
-            }
-            return;
-        }
-        var focusFirst = function () { var _a; return (_a = anchors[0]) === null || _a === void 0 ? void 0 : _a.focus(); };
-        var focusLast = function () { var _a; return (_a = anchors[anchors.length - 1]) === null || _a === void 0 ? void 0 : _a.focus(); };
-        var focusNext = function () { var _a; return (_a = anchors[focusedIndex + 1]) === null || _a === void 0 ? void 0 : _a.focus(); };
-        var focusPrev = function () { var _a; return (_a = anchors[focusedIndex - 1]) === null || _a === void 0 ? void 0 : _a.focus(); };
-        if (inputHasFocus) {
-            // Input is focused
-            e.preventDefault();
-            if (key === 'ArrowDown') {
-                focusFirst();
-            }
-            else {
-                focusLast();
-            }
-        }
-        else if (focusedIndex > -1) {
-            // A quick-filter-item is focused
-            e.preventDefault();
-            if (key === 'ArrowDown') {
-                if (anchors.length > focusedIndex + 1) {
-                    focusNext();
-                }
-                else {
-                    (0, exports.focusInput)(searchContainer);
-                }
-            }
-            else {
-                if (focusedIndex - 1 < 0) {
-                    (0, exports.focusInput)(searchContainer);
-                }
-                else {
-                    focusPrev();
-                }
-            }
-        }
-    }, window);
-    return (react_1.default.createElement(knowledge_widget_ui_1.ItemTree, __assign({ tree: items, renderEmpty: false, ulProps: { role: 'listbox' }, liProps: { role: 'option' } }, buildListProps(filterType))));
-};
-exports.default = QuickFilterItemList;
-var Title = function (_a) {
-    var title = _a.title, phrase = _a.phrase, matches = _a.matches, _b = _a.symbol, symbol = _b === void 0 ? '' : _b;
-    var createTitle = function () {
-        if (!matches || !phrase) {
-            return [title];
-        }
-        var index = title.toLowerCase().indexOf(phrase.toLowerCase());
-        var start = title.substr(0, index);
-        var bold = title.slice(index, index + phrase.length);
-        var end = title.substr(index + phrase.length);
-        return [start, bold, end];
-    };
-    var _c = __read(createTitle(), 3), start = _c[0], bold = _c[1], end = _c[2];
-    return (react_1.default.createElement(knowledge_widget_ui_1.Text, null,
-        symbol,
-        start,
-        bold ? react_1.default.createElement("strong", null, bold) : null,
-        end ? end : null));
-};
-var disabledCss = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    opacity: 0.5;\n    pointer-events: none;\n"], ["\n    opacity: 0.5;\n    pointer-events: none;\n"])));
-var focused = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    color: #ffffff;\n    outline: none;\n\n    span:first-child {\n        border-color: ", ";\n    }\n"], ["\n    background-color: ", ";\n    color: #ffffff;\n    outline: none;\n\n    span:first-child {\n        border-color: ", ";\n    }\n"])), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
-var StyledLink = (0, styled_components_1.default)(knowledge_widget_ui_1.Link)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: block;\n    text-decoration: none;\n    font-size: ", ";\n\n    ", "\n    color: ", ";\n    background-color: transparent;\n\n    span {\n        display: block;\n        ", "\n        ", "\n    }\n\n    span:first-child {\n        border-color: #e7e7e7;\n    }\n\n    ", "\n\n    ", "\n\n  &:hover,\n  &:focus {\n        ", "\n    }\n"], ["\n    display: block;\n    text-decoration: none;\n    font-size: ", ";\n\n    ", "\n    color: ", ";\n    background-color: transparent;\n\n    span {\n        display: block;\n        ", "\n        ", "\n    }\n\n    span:first-child {\n        border-color: #e7e7e7;\n    }\n\n    ", "\n\n    ", "\n\n  &:hover,\n  &:focus {\n        ", "\n    }\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { return p.disabled && disabledCss; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) {
-    var _a, _b, _c, _d;
-    return p['data-level']
-        ? "padding: calc(".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal, " / 2) ").concat((_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.normal, ";")
-        : "padding: calc(".concat((_c = p.theme.sizes) === null || _c === void 0 ? void 0 : _c.normal, " / 2) ").concat((_d = p.theme.sizes) === null || _d === void 0 ? void 0 : _d.medium, ";  ");
-}, function (p) { return p['data-level'] && 'border-left: 2px solid'; }, function (p) { var _a; return p['data-level'] && "padding: 0 calc(".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium, " * ").concat(p['data-level'], ");"); }, function (p) { return p.autoSelect && focused; }, focused);
-var templateObject_1, templateObject_2, templateObject_3;

package/lib/quick-filter.d.ts

@@ -1,7 +0,0 @@
-declare type Props = {
-    phrase: string;
-    inputHasFocus: boolean;
-    searchContainerRef: HTMLElement | null;
-};
-declare const _default: ({ phrase, inputHasFocus, searchContainerRef }: Props) => JSX.Element | null;
-export default _default;

package/lib/quick-filter.js

@@ -1,93 +0,0 @@
-"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;
-};
-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 styled_components_1 = __importDefault(require("styled-components"));
-var quick_filter_item_list_1 = __importStar(require("./quick-filter-item-list"));
-exports.default = (function (_a) {
-    var _b = _a.phrase, phrase = _b === void 0 ? '' : _b, inputHasFocus = _a.inputHasFocus, searchContainerRef = _a.searchContainerRef;
-    var _c = (0, knowledge_widget_ui_1.useProperties)().quickFilter, quickFilter = _c === void 0 ? {
-        open: false,
-        loading: false,
-        symbol: '',
-        type: '',
-        items: [],
-    } : _c;
-    var _d = __read((0, knowledge_widget_ui_1.useScroll)(true), 2), css = _d[0], ref = _d[1];
-    var container = (0, knowledge_widget_ui_1.useContainer)();
-    var events = container.get('$widget').events;
-    var wrapperRef = (0, react_1.useRef)();
-    var setWrapperRef = (0, react_1.useCallback)(function (node) {
-        if (node) {
-            node.addEventListener('keydown', function () {
-                var listItemFocused = (0, quick_filter_item_list_1.getFocusedIndex)(node).focusedIndex > -1;
-                if (listItemFocused) {
-                    events.subscribeOnce('router:changed', function () {
-                        (0, quick_filter_item_list_1.focusInput)(searchContainerRef);
-                    });
-                }
-            }, true);
-        }
-        wrapperRef.current = node;
-        return node;
-    }, [searchContainerRef]);
-    var _e = quickFilter.items, items = _e === void 0 ? [] : _e, symbol = quickFilter.symbol, type = quickFilter.type, open = quickFilter.open, loading = quickFilter.loading;
-    if (!open || !symbol) {
-        return null;
-    }
-    var filterPhrase = phrase.slice(phrase.indexOf(symbol) + 1);
-    return (react_1.default.createElement(Wrapper, { ref: setWrapperRef, "data-loading": loading, className: (0, widget_utilities_1.appendClassNames)('humany-quick-filter-dropdown', [type === 'guideCategory', 'humany-quick-filter-guide-categories'], [type === 'tag', 'humany-quick-filter-tags']) },
-        react_1.default.createElement(Inner, { className: "humany-quick-filter-dropdown-inner", css: css, ref: ref },
-            react_1.default.createElement(quick_filter_item_list_1.default, { filterType: type, items: items, filterPhrase: filterPhrase, filterContainer: ref.current, searchContainer: searchContainerRef, inputHasFocus: inputHasFocus })),
-        react_1.default.createElement(knowledge_widget_ui_1.Loader, { loading: loading })));
-});
-var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", ";\n    position: absolute;\n    top: calc(100% + ", ");\n    left: 0;\n    right: 0;\n    z-index: 1;\n    overflow: hidden;\n"], ["\n    ", ";\n    position: absolute;\n    top: calc(100% + ", ");\n    left: 0;\n    right: 0;\n    z-index: 1;\n    overflow: hidden;\n"])), knowledge_widget_ui_1.contentBox, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
-var Inner = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    max-height: 300px;\n    overflow: auto;\n    padding: ", " 0;\n    ", "\n    ul {\n        list-style: none;\n        padding: 0;\n        margin: 0;\n    }\n    li div {\n        ", "\n    }\n"], ["\n    max-height: 300px;\n    overflow: auto;\n    padding: ", " 0;\n    ", "\n    ul {\n        list-style: none;\n        padding: 0;\n        margin: 0;\n    }\n    li div {\n        ", "\n    }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { return p.css; }, function (p) { var _a; return "margin: ".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal, " 0;"); });
-var templateObject_1, templateObject_2;

package/lib/search-component.d.ts

@@ -1,42 +0,0 @@
-import { Category, Tag } from '@telia-ace/knowledge-widget-core';
-import { Container } from '@webprovisions/platform';
-export declare type SearchComponentProps = {
-    route?: string;
-    role?: string;
-    showSearchButton: boolean;
-    showClearButton: boolean;
-    showChildren: boolean;
-    searchButtonLabel: string;
-    clearButtonLabel: string;
-    ariaLabel?: string;
-    placeholder: string;
-    autoFocus: boolean;
-    incremental?: boolean | number;
-    filterBadges?: FilterConfig | boolean;
-    activeFilterBadges?: ActiveFilterBadges;
-    deleteFilterBadgeAriaLabel?: string;
-    quickFilters?: FilterConfig | boolean;
-    quickFilter?: Filter;
-    patchParams?: boolean;
-};
-export declare type Filter = {
-    items?: Category[] | Tag[];
-    type?: 'guideCategory' | 'tag';
-    symbol?: string;
-    loading: boolean;
-    open: boolean;
-};
-export declare type ActiveFilterBadges = {
-    guideCategory?: Category | null;
-    tag?: Tag | null;
-    tooltip?: string | null;
-    initial?: boolean;
-};
-export declare type FilterConfig = {
-    autoSelect?: boolean;
-    guideCategory?: boolean;
-    tag?: boolean;
-    position?: 'inside' | 'below';
-};
-declare const SearchComponent: (container: Container) => Promise<void>;
-export default SearchComponent;

package/lib/search-component.js

@@ -1,274 +0,0 @@
-"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 __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 widget_utilities_1 = require("@telia-ace/widget-utilities");
-var hasActiveFilterBadge = function (filters) {
-    return !!filters.guideCategory || !!filters.tag;
-};
-var getTooltip = function (categoryId, categories) {
-    var trailIds = (0, widget_utilities_1.categoryTrail)(categoryId, categories);
-    var categoryMap = (0, widget_utilities_1.getCategoryTrailAsObjects)(trailIds, categories);
-    var trail = trailIds.map(function (id) { var _a; return ((_a = categoryMap.get(id)) === null || _a === void 0 ? void 0 : _a.title) || ''; }).join(' / ');
-    return trail;
-};
-var sortRecursive = function (items) {
-    var clone = (0, widget_utilities_1.deepClone)(items);
-    clone.sort(function (a, b) {
-        if (a.title > b.title) {
-            return 1;
-        }
-        return -1;
-    });
-    clone.forEach(function (item) {
-        if (item.items) {
-            item.items = sortRecursive(item.items);
-        }
-    });
-    return clone;
-};
-var SearchComponent = function (container) {
-    return (0, knowledge_widget_ui_1.createReactComponent)(container, 'search', Promise.resolve().then(function () { return __importStar(require('./search')); }), function (component) {
-        var events = container.get('$widget').events;
-        var _a = __read((0, knowledge_widget_core_1.createEventSubscriber)(events), 2), subscribe = _a[0], unsubscribe = _a[1];
-        var load = function (params) {
-            var _a, _b;
-            var activeFilterBadges = component.properties().activeFilterBadges;
-            if (((_a = activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.guideCategory) === null || _a === void 0 ? void 0 : _a.id) !== params.guideCategory ||
-                ((_b = activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.tag) === null || _b === void 0 ? void 0 : _b.id) !== params.tag) {
-                component.actions.dispatch('quick-filter:add', {
-                    tag: params.tag,
-                    category: params.guideCategory,
-                    initial: true,
-                });
-            }
-        };
-        component.actions.create('search', function (data) {
-            var value = data.value, filters = data.filters, filtersChanged = data.filtersChanged;
-            var _a = component.properties(), _b = _a.route, route = _b === void 0 ? 'search' : _b, _c = _a.patchParams, patchParams = _c === void 0 ? false : _c;
-            if (value.length > 0 ||
-                ((hasActiveFilterBadge(filters) || filtersChanged) && !(filters === null || filters === void 0 ? void 0 : filters.initial))) {
-                container.getAsync('router').then(function (router) {
-                    var _a, _b;
-                    var params = router.getRouteData().params;
-                    var searchParams = {
-                        guide: undefined,
-                        id: undefined,
-                        accordion: undefined,
-                        contactMethod: undefined,
-                    };
-                    searchParams.phrase = value.length > 0 ? encodeURIComponent(value) : '';
-                    if (patchParams) {
-                        searchParams = __assign(__assign({}, params), searchParams);
-                    }
-                    if ((filters === null || filters === void 0 ? void 0 : filters.guideCategory) || filtersChanged) {
-                        searchParams.guideCategory = ((_a = filters.guideCategory) === null || _a === void 0 ? void 0 : _a.id) || undefined;
-                    }
-                    if ((filters === null || filters === void 0 ? void 0 : filters.tag) || filtersChanged) {
-                        searchParams.tag = ((_b = filters.tag) === null || _b === void 0 ? void 0 : _b.id) || undefined;
-                    }
-                    router.navigate(route, (0, widget_utilities_1.createParams)(searchParams));
-                });
-            }
-        });
-        component.actions.create('clear', function (data, options) {
-            if (data.navigateToHome) {
-                container.getAsync('router').then(function (router) {
-                    var name = router.getInitialRoute().name;
-                    router.navigate(name);
-                });
-            }
-        });
-        var getRouterParams = function () {
-            return container
-                .getAsync('router')
-                .then(function (router) { return router.getRouteData().params; });
-        };
-        component.actions.create('quick-filter:add', function (data) {
-            var category = data.category, tag = data.tag, initial = data.initial;
-            var previous = component.properties().activeFilterBadges;
-            var activeFilterBadges = previous || {
-                initial: initial,
-                guideCategory: null,
-                tag: null,
-                tooltip: null,
-            };
-            return Promise.resolve()
-                .then(function () {
-                if (category) {
-                    return fetchCategories({}).then(function (categories) {
-                        var categoryItem = (0, widget_utilities_1.findCategoryById)(category, categories) || null;
-                        return __assign(__assign({}, activeFilterBadges), { guideCategory: categoryItem, tooltip: getTooltip(category, categories) || null });
-                    });
-                }
-                return __assign(__assign({}, activeFilterBadges), { guideCategory: null, tooltip: null });
-            })
-                .then(function (next) {
-                if (tag) {
-                    return fetchTags({}).then(function (tags) {
-                        return __assign(__assign({}, next), { tag: tags.find(function (t) { return t.id === tag; }) || null });
-                    });
-                }
-                return __assign(__assign({}, next), { tag: null });
-            })
-                .then(function (next) {
-                return component.writeProperties({
-                    activeFilterBadges: __assign(__assign({}, next), { initial: !!initial }),
-                });
-            });
-        });
-        component.actions.create('quick-filter:remove', function (_a) {
-            var types = _a.types;
-            var activeFilterBadges = component.properties().activeFilterBadges;
-            component.writeProperties({
-                activeFilterBadges: __assign(__assign({}, activeFilterBadges), { initial: false, guideCategory: types.indexOf('guideCategory') > -1
-                        ? null
-                        : activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.guideCategory, tag: types.indexOf('tag') > -1 ? null : activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.tag }),
-            });
-        });
-        component.actions.create('quick-filter:close', function () {
-            return component.writeProperties({
-                quickFilter: {
-                    items: [],
-                    loading: false,
-                    open: false,
-                },
-            });
-        });
-        component.actions.create('quick-filter:open', function (_a) {
-            var symbol = _a.symbol, type = _a.type;
-            component.writeProperties({
-                quickFilter: {
-                    type: type,
-                    symbol: symbol,
-                    items: [],
-                    loading: true,
-                    open: true,
-                },
-            });
-            return getRouterParams().then(function (_a) {
-                var tag = _a.tag, guideCategory = _a.guideCategory, phrase = _a.phrase;
-                if (type === 'guideCategory') {
-                    return fetchCategories({
-                        tagId: tag,
-                        searchPhrase: phrase,
-                    }).then(function (items) {
-                        var clone = (0, widget_utilities_1.deepClone)(items);
-                        component.writeProperties({
-                            quickFilter: {
-                                items: sortRecursive(clone),
-                                loading: false,
-                            },
-                        });
-                    });
-                }
-                if (type === 'tag') {
-                    return fetchTags({
-                        categories: guideCategory,
-                        searchPhrase: phrase,
-                    }).then(function (items) {
-                        var clone = (0, widget_utilities_1.deepClone)(items);
-                        component.writeProperties({
-                            quickFilter: {
-                                items: sortRecursive(clone),
-                                loading: false,
-                            },
-                        });
-                    });
-                }
-            });
-        });
-        var fetchCategories = function (params) {
-            return container
-                .getAsync('dataClient')
-                .then(function (dataClient) {
-                return dataClient.fetch(knowledge_widget_types_grid_1.DataType.GuideCategories, params);
-            })
-                .then(function (categoriesResult) { return categoriesResult.categories || []; });
-        };
-        var fetchTags = function (params) {
-            return container
-                .getAsync('dataClient')
-                .then(function (dataClient) { return dataClient.fetch(knowledge_widget_types_grid_1.DataType.TagsOnGuides, params); })
-                .then(function (tags) {
-                if (tags === void 0) { tags = []; }
-                return tags;
-            });
-        };
-        getRouterParams().then(function (params) {
-            load(params);
-        });
-        subscribe('router:changed', function (_, _a) {
-            var current = _a.current;
-            var params = current.routeData.params;
-            load(params);
-        });
-        subscribe('data-client:fetched', function (event, data) {
-            var filterBadges = component.properties().filterBadges;
-            var showTag = typeof filterBadges === 'object' ? !!filterBadges.tag : !!filterBadges;
-            if (data.type === 'match' && showTag) {
-                getRouterParams().then(function (_a) {
-                    var tagId = _a.tag;
-                    var _b = data.response.tags, tags = _b === void 0 ? [] : _b;
-                    var tag = tags.find(function (t) { return t.id === tagId; }) || null;
-                    component.writeProperties({ filters: { tag: tag } });
-                });
-            }
-        });
-        return function () {
-            unsubscribe();
-        };
-    });
-};
-exports.default = SearchComponent;

package/lib/search.d.ts

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