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

package/lib-esm/search-component.js

@@ -0,0 +1,249 @@
+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 { createEventSubscriber } from '@telia-ace/knowledge-widget-core';
+import { DataType, } from '@telia-ace/knowledge-widget-types-grid';
+import { createReactComponent } from '@telia-ace/knowledge-widget-ui';
+import { categoryTrail, createParams, deepClone, findCategoryById, getCategoryTrailAsObjects, } from '@telia-ace/widget-utilities';
+var hasActiveFilterBadge = function (filters) {
+    return !!filters.guideCategory || !!filters.tag;
+};
+var getTooltip = function (categoryId, categories) {
+    var trailIds = categoryTrail(categoryId, categories);
+    var categoryMap = 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 = 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 createReactComponent(container, 'search', import('./search'), function (component) {
+        var events = container.get('$widget').events;
+        var _a = __read(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, 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 = 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 = deepClone(items);
+                        component.writeProperties({
+                            quickFilter: {
+                                items: sortRecursive(clone),
+                                loading: false,
+                            },
+                        });
+                    });
+                }
+                if (type === 'tag') {
+                    return fetchTags({
+                        categories: guideCategory,
+                        searchPhrase: phrase,
+                    }).then(function (items) {
+                        var clone = deepClone(items);
+                        component.writeProperties({
+                            quickFilter: {
+                                items: sortRecursive(clone),
+                                loading: false,
+                            },
+                        });
+                    });
+                }
+            });
+        });
+        var fetchCategories = function (params) {
+            return container
+                .getAsync('dataClient')
+                .then(function (dataClient) {
+                return dataClient.fetch(DataType.GuideCategories, params);
+            })
+                .then(function (categoriesResult) { return categoriesResult.categories || []; });
+        };
+        var fetchTags = function (params) {
+            return container
+                .getAsync('dataClient')
+                .then(function (dataClient) { return dataClient.fetch(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();
+        };
+    });
+};
+export default SearchComponent;

package/lib-esm/search.d.ts

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

package/lib-esm/search.js

@@ -0,0 +1,166 @@
+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 __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 { Component } from '@telia-ace/knowledge-widget-types-grid';
+import { borderTabStyle, Button, contentBox, convertToStringAttributes, Input, SymbolBadge, useChildren, useContainer, useDispatch, useProperties, useRouteData, useTransitionEnd, useWidgetEvent, } from '@telia-ace/knowledge-widget-ui';
+import { appendClassNames } from '@telia-ace/widget-utilities';
+import React, { useCallback, useEffect, useState } from 'react';
+import styled, { css } from 'styled-components';
+import FilterBadges from './filter-badges';
+import QuickFilter from './quick-filter';
+import useSearch from './use-search';
+var Search = function (_a) {
+    var className = _a.className, other = __rest(_a, ["className"]);
+    var _b = useProperties(), showSearchButton = _b.showSearchButton, showClearButton = _b.showClearButton, _c = _b.role, role = _c === void 0 ? 'search' : _c, autoFocus = _b.autoFocus, placeholder = _b.placeholder, searchButtonLabel = _b.searchButtonLabel, clearButtonLabel = _b.clearButtonLabel, ariaLabel = _b.ariaLabel, _d = _b.route, searchRoute = _d === void 0 ? 'search' : _d, _e = _b.incremental, incremental = _e === void 0 ? true : _e, _f = _b.showChildren, showChildren = _f === void 0 ? false : _f, quickFilter = _b.quickFilter, quickFiltersEnabled = _b.quickFilters, filterBadges = _b.filterBadges;
+    var params = useRouteData().params;
+    var _g = __read(useState(false), 2), hasFocus = _g[0], setHasFocus = _g[1];
+    var _h = __read(useState(params.phrase || ''), 2), phrase = _h[0], setPhrase = _h[1];
+    var _j = __read(useState({
+        guideCategory: false,
+        tag: false,
+    }), 2), showFilterBadges = _j[0], setShowFilterBadges = _j[1];
+    var container = useContainer();
+    var children = useChildren();
+    var dispatch = useDispatch();
+    var _k = (typeof filterBadges === 'object' ? filterBadges : {}).position, filterBadgePosition = _k === void 0 ? 'inside' : _k;
+    useEffect(function () {
+        var guideCategory = params.guideCategory, tag = params.tag;
+        var showGuideCategory = typeof filterBadges === 'object' ? !!filterBadges.guideCategory : !!filterBadges;
+        var showTag = typeof filterBadges === 'object' ? !!filterBadges.tag : !!filterBadges;
+        setShowFilterBadges({
+            guideCategory: showGuideCategory && !!guideCategory,
+            tag: showTag && !!tag,
+        });
+    }, [filterBadges, params]);
+    // Remove quick-filter symbol, quick-filter phrase
+    // and close quick-filter when route changed
+    useWidgetEvent('router:changed', function () {
+        if (quickFilter) {
+            var open_1 = quickFilter.open, symbol = quickFilter.symbol;
+            if (open_1) {
+                if (symbol) {
+                    var cleaned = phrase.replace(phrase.slice(phrase.indexOf(symbol)), '');
+                    setPhrase(cleaned);
+                }
+                dispatch('quick-filter:close');
+            }
+        }
+    }, [quickFilter, phrase, setPhrase, dispatch]);
+    var _l = __read(useSearch(phrase, params, !!incremental), 3), search = _l[0], clear = _l[1], elem = _l[2];
+    useEffect(function () {
+        setPhrase(params.phrase || '');
+    }, [params.phrase]);
+    var onChange = useCallback(function (value) {
+        setPhrase(value);
+    }, [setPhrase]);
+    var onEscape = useCallback(function () {
+        dispatch('quick-filter:close').then(function () { return clear(true); });
+    }, [dispatch, clear]);
+    var autoFocusHandler = useCallback(function () {
+        var _a, _b;
+        if (autoFocus && !hasFocus) {
+            (_b = (_a = elem.current) === null || _a === void 0 ? void 0 : _a.getElementsByTagName('input')[0]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }, [autoFocus, hasFocus, elem]);
+    var onClearButtonClick = useCallback(function () {
+        container.getAsync('router').then(function (router) {
+            var initialRoute = router.getInitialRoute();
+            var currentRoute = router.getRouteData();
+            // if we already are on the initial route
+            // and it's not the search route, clear the search instead of navigate
+            if ((initialRoute === null || initialRoute === void 0 ? void 0 : initialRoute.name) === currentRoute.name && (initialRoute === null || initialRoute === void 0 ? void 0 : initialRoute.name) !== searchRoute) {
+                setPhrase('');
+            }
+            else {
+                clear(true);
+            }
+        });
+    }, [container, setPhrase, clear]);
+    var renderFilterBadges = function (position) {
+        if (position !== filterBadgePosition) {
+            return null;
+        }
+        if (!!showFilterBadges.guideCategory || !!showFilterBadges.tag) {
+            return (React.createElement(FilterBadges, { position: position, inputHasFocus: hasFocus, showGuideCategory: showFilterBadges.guideCategory, showTag: showFilterBadges.tag, searchContainerRef: elem.current }));
+        }
+    };
+    useTransitionEnd(autoFocusHandler);
+    var showClear = showClearButton && (showFilterBadges.guideCategory || showFilterBadges.tag || phrase);
+    var quickFilterAccessibilityProps = quickFiltersEnabled
+        ? convertToStringAttributes({
+            role: 'combobox',
+            'aria-autocomplete': 'list',
+            autoComplete: 'off',
+            'aria-haspopup': 'listbox',
+        })
+        : {};
+    return (React.createElement(StyledSearchWrapper, __assign({}, other, { ref: elem, role: role, className: appendClassNames(className, 'humany-search'), "data-has-phrase": !!phrase, "data-has-focus": hasFocus, "data-has-search-symbol": showSearchButton ? 'true' : 'false' }),
+        React.createElement(Inner, { action: ".", onSubmit: function (e) {
+                var _a, _b;
+                e.preventDefault();
+                (_b = (_a = elem.current) === null || _a === void 0 ? void 0 : _a.getElementsByTagName('input')[0]) === null || _b === void 0 ? void 0 : _b.blur();
+            }, "data-has-focus": hasFocus },
+            showSearchButton && (React.createElement(SearchButton, { "aria-label": searchButtonLabel, type: "submit", title: searchButtonLabel, disabled: !phrase, onClick: search, "data-has-phrase": !!phrase, "data-has-focus": hasFocus },
+                React.createElement(SymbolBadge, { size: 32, symbol: { type: 'Svg', content: 'search' } }))),
+            renderFilterBadges('inside'),
+            React.createElement(Input, __assign({ type: "search", "aria-label": ariaLabel }, quickFilterAccessibilityProps, { placeholder: showFilterBadges.guideCategory || showFilterBadges.tag ? '' : placeholder, onFocusChange: setHasFocus, onEscape: onEscape, onEnter: search, onChange: onChange, value: phrase })),
+            showClear && (React.createElement(ClearButton, { "aria-label": clearButtonLabel, type: "reset", hasFocus: hasFocus, title: clearButtonLabel, onClick: onClearButtonClick },
+                React.createElement(SymbolBadge, { size: 27, symbol: { type: 'Svg', content: 'clear' } }))),
+            showChildren &&
+                !showClear &&
+                children.map(function (child) { return (React.createElement(Component, { key: child.id, id: child.id, branch: "default" })); }),
+            React.createElement(QuickFilter, { inputHasFocus: hasFocus, phrase: phrase, searchContainerRef: elem.current })),
+        renderFilterBadges('below')));
+};
+export default Search;
+var StyledSearchWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", ";\n    width: 100%;\n    padding: ", ";\n\n    input {\n        background-color: transparent;\n        border: none;\n        outline: none;\n        min-width: 25%;\n        flex: 1;\n        font-size: ", ";\n        font-weight: 300;\n        font-style: italic;\n        padding: 1em 0;\n        color: ", ";\n        -webkit-appearance: none;\n\n        ", "\n\n        ::placeholder {\n            color: ", ";\n        }\n        /* removes the 'X' from IE */\n        &[type='search']::-ms-clear {\n            display: none;\n            width: 0;\n            height: 0;\n        }\n        &[type='search']::-ms-reveal {\n            display: none;\n            width: 0;\n            height: 0;\n        }\n\n        /* removes the 'X' from Chrome */\n        &[type='search']::-webkit-search-decoration,\n        &[type='search']::-webkit-search-cancel-button,\n        &[type='search']::-webkit-search-results-button,\n        &[type='search']::-webkit-search-results-decoration {\n            display: none;\n        }\n\n        &:focus {\n            outline: none;\n        }\n    }\n\n    button {\n        background: transparent;\n        border: none;\n        padding: 0;\n        font-size: ", ";\n        transition: color 200ms ease-out;\n        color: ", ";\n        cursor: pointer;\n        > svg {\n            height: 100%;\n        }\n    }\n"], ["\n    ", ";\n    width: 100%;\n    padding: ", ";\n\n    input {\n        background-color: transparent;\n        border: none;\n        outline: none;\n        min-width: 25%;\n        flex: 1;\n        font-size: ", ";\n        font-weight: 300;\n        font-style: italic;\n        padding: 1em 0;\n        color: ", ";\n        -webkit-appearance: none;\n\n        ", "\n\n        ::placeholder {\n            color: ", ";\n        }\n        /* removes the 'X' from IE */\n        &[type='search']::-ms-clear {\n            display: none;\n            width: 0;\n            height: 0;\n        }\n        &[type='search']::-ms-reveal {\n            display: none;\n            width: 0;\n            height: 0;\n        }\n\n        /* removes the 'X' from Chrome */\n        &[type='search']::-webkit-search-decoration,\n        &[type='search']::-webkit-search-cancel-button,\n        &[type='search']::-webkit-search-results-button,\n        &[type='search']::-webkit-search-results-decoration {\n            display: none;\n        }\n\n        &:focus {\n            outline: none;\n        }\n    }\n\n    button {\n        background: transparent;\n        border: none;\n        padding: 0;\n        font-size: ", ";\n        transition: color 200ms ease-out;\n        color: ", ";\n        cursor: pointer;\n        > svg {\n            height: 100%;\n        }\n    }\n"])), contentBox, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large; }, 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; }, function (p) { var _a; return p['data-has-search-symbol'] === 'true' && "text-indent: ".concat((_a = p.theme.sizes) === 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; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.large; }, function (p) { var _a; return p['data-has-focus'] || p['data-has-phrase'] ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary : '#000000'; });
+var Inner = styled.form(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: nowrap;\n    align-items: center;\n    border: ", ";\n    border-radius: ", ";\n    background-color: #ffffff;\n    position: relative;\n    padding: 0 ", ";\n\n    ", ";\n"], ["\n    display: flex;\n    flex-wrap: nowrap;\n    align-items: center;\n    border: ", ";\n    border-radius: ", ";\n    background-color: #ffffff;\n    position: relative;\n    padding: 0 ", ";\n\n    ", ";\n"])), function (p) { return p.theme.inputBorder; }, function (p) { return p.theme.borderRadius; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) {
+    return p['data-has-focus'] && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            ", "\n        "], ["\n            ", "\n        "])), function (p) {
+        var _a, _b;
+        return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing)
+            ? borderTabStyle
+            : "\n        border-color: ".concat((_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.primary, ";\n        outline: none;\n        input {\n          outline: none;\n        }\n      ");
+    });
+});
+var SearchButton = styled(Button)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    padding: 0;\n    height: 2em;\n\n    svg {\n        circle,\n        line {\n            stroke: ", ";\n        }\n    }\n"], ["\n    padding: 0;\n    height: 2em;\n\n    svg {\n        circle,\n        line {\n            stroke: ", ";\n        }\n    }\n"])), function (p) { var _a; return (p['data-has-focus'] ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary : '#000000'); });
+var ClearButton = styled(Button)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    &:focus svg {\n        ", "\n    }\n\n    svg {\n        vertical-align: top;\n\n        circle,\n        line,\n        path {\n            stroke: ", ";\n        }\n    }\n"], ["\n    &:focus svg {\n        ", "\n    }\n\n    svg {\n        vertical-align: top;\n\n        circle,\n        line,\n        path {\n            stroke: ", ";\n        }\n    }\n"])), function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && borderTabStyle; }, function (p) { var _a, _b; return (p.hasFocus ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary : (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.text); });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/lib-esm/use-search.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare type ReturnType = [
+    (arg: React.KeyboardEvent | React.MouseEvent | boolean) => void,
+    (navigateToHome: boolean) => void,
+    React.MutableRefObject<HTMLElement | null>
+];
+declare const _default: (phrase: string, params?: {
+    [key: string]: any;
+}, debounce?: boolean) => ReturnType;
+export default _default;

package/lib-esm/use-search.js

@@ -0,0 +1,97 @@
+import { useDebounce, useDispatch, usePrevious, useProperties, } from '@telia-ace/knowledge-widget-ui';
+import { useCallback, useEffect, useRef } from 'react';
+var filterChanged = function (newValue, oldValue) {
+    if (newValue && !oldValue) {
+        return true;
+    }
+    if (!newValue && oldValue) {
+        return true;
+    }
+    if (newValue && oldValue) {
+        if (newValue.id !== oldValue.id) {
+            return true;
+        }
+    }
+    return false;
+};
+export default (function (phrase, params, debounce) {
+    if (params === void 0) { params = {}; }
+    if (debounce === void 0) { debounce = true; }
+    var dispatch = useDispatch();
+    var _a = useProperties(), _b = _a.quickFilters, quickFilters = _b === void 0 ? false : _b, _c = _a.quickFilter, quickFilter = _c === void 0 ? { open: false } : _c, activeFilterBadges = _a.activeFilterBadges, _d = _a.filterBadges, filterBadges = _d === void 0 ? false : _d, _e = _a.incremental, incremental = _e === void 0 ? 600 : _e;
+    var debouncedPhrase = useDebounce(phrase, typeof incremental === 'boolean' ? 600 : incremental);
+    var previousDebouncedPhrase = usePrevious(debouncedPhrase);
+    var previousFilters = usePrevious(activeFilterBadges);
+    var ref = useRef(null);
+    var dispatchSearch = useCallback(function (value) {
+        if (value === void 0) { value = ''; }
+        if (filterBadges) {
+            var filtersChanged = filterChanged(activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.guideCategory, previousFilters === null || previousFilters === void 0 ? void 0 : previousFilters.guideCategory) || filterChanged(activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.tag, previousFilters === null || previousFilters === void 0 ? void 0 : previousFilters.tag);
+            return dispatch('search', { value: value, filtersChanged: filtersChanged, filters: activeFilterBadges });
+        }
+        return dispatch('search', { value: value });
+    }, [dispatch, activeFilterBadges]);
+    var dispatchClear = useCallback(function (navigateToHome) {
+        dispatch('clear', { navigateToHome: navigateToHome });
+    }, [dispatch]);
+    var removeFilterKeywords = function (input) {
+        if (quickFilters) {
+            return input.replace(/([@#].*)/g, '');
+        }
+        return input;
+    };
+    var submitSearch = useCallback(function (arg) {
+        if (quickFilter.open && arg.preventDefault) {
+            arg.preventDefault();
+            return;
+        }
+        var activeElement = document.activeElement;
+        var isSearching = ref.current && typeof ref.current.contains === 'function'
+            ? ref.current.contains(activeElement)
+            : false;
+        var cleanedPhrase = removeFilterKeywords(phrase);
+        if ((typeof arg === 'boolean' && arg) ||
+            (cleanedPhrase.length && isSearching) ||
+            (activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.guideCategory) ||
+            ((activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.tag) && isSearching)) {
+            dispatchSearch(cleanedPhrase);
+        }
+        else {
+            dispatchClear(isSearching);
+        }
+    }, [ref, phrase, quickFilter, dispatchClear, activeFilterBadges, dispatchSearch]);
+    useEffect(function () {
+        var filtersChanged = filterChanged(activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.guideCategory, previousFilters === null || previousFilters === void 0 ? void 0 : previousFilters.guideCategory) ||
+            filterChanged(activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.tag, previousFilters === null || previousFilters === void 0 ? void 0 : previousFilters.tag);
+        var phrase = debouncedPhrase ? removeFilterKeywords(debouncedPhrase) : debouncedPhrase;
+        var previousPhrase = previousDebouncedPhrase
+            ? removeFilterKeywords(previousDebouncedPhrase)
+            : previousDebouncedPhrase;
+        if ((typeof previousPhrase !== 'undefined' &&
+            previousPhrase !== phrase &&
+            phrase !== params.phrase &&
+            debounce &&
+            !quickFilter.open) ||
+            (filtersChanged && !(activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.initial))) {
+            submitSearch(filtersChanged);
+        }
+    }, [debouncedPhrase, quickFilter.open, activeFilterBadges, submitSearch]);
+    useEffect(function () {
+        if (phrase && quickFilters) {
+            var quickFiltersGuideCategory = (typeof quickFilters === 'boolean' && !!quickFilters) ||
+                (typeof quickFilters === 'object' && !!quickFilters.guideCategory);
+            var quickFiltersTag = (typeof quickFilters === 'boolean' && !!quickFilters) ||
+                (typeof quickFilters === 'object' && !!quickFilters.tag);
+            if (quickFiltersGuideCategory && phrase.indexOf('@') === phrase.length - 1) {
+                dispatch('quick-filter:open', { type: 'guideCategory', symbol: '@' });
+            }
+            if (quickFiltersTag && phrase.indexOf('#') === phrase.length - 1) {
+                dispatch('quick-filter:open', { type: 'tag', symbol: '#' });
+            }
+        }
+        if (quickFilter.open && phrase.indexOf('@') === -1 && phrase.indexOf('#') === -1) {
+            dispatch('quick-filter:close');
+        }
+    }, [phrase]);
+    return [submitSearch, dispatchClear, ref];
+});

package/lib-esm/utils.d.ts

@@ -0,0 +1,3 @@
+import { Category, Tag } from '@telia-ace/knowledge-widget-core';
+export declare const match: (title: string, phrase: string) => boolean;
+export declare const filterItems: (items: (Category | Tag)[] | undefined, type: 'tag' | 'guideCategory', phrase: string) => any[];

package/lib-esm/utils.js

@@ -0,0 +1,48 @@
+import { categoryTrail, deepClone } from '@telia-ace/widget-utilities';
+export var match = function (title, phrase) {
+    if (!phrase || !title) {
+        return true;
+    }
+    return !!(title.toLowerCase().indexOf(phrase.toLowerCase()) > -1);
+};
+export var filterItems = function (items, type, phrase) {
+    if (items === void 0) { items = []; }
+    if (!phrase) {
+        return items;
+    }
+    var cloned = deepClone(items);
+    if (type === 'tag') {
+        return cloned.filter(function (i) { return match(i.title, phrase); });
+    }
+    var matchTrail = buildMatchTrail(cloned, phrase);
+    var filtered = recursiveFilter(cloned, function (c) { return matchTrail.indexOf(c.id) > -1; });
+    return filtered;
+};
+var recursiveFilter = function (items, fn) {
+    return items.filter(function (i) {
+        if (i.items && i.items.length) {
+            i.items = recursiveFilter(i.items, fn);
+        }
+        return fn(i);
+    });
+};
+var buildMatchTrail = function (categories, phrase) {
+    var flattened = flatten(categories);
+    var matching = flattened.filter(function (c) { return match(c.title, phrase); }).map(function (c) { return c.id; });
+    var res = [];
+    matching.forEach(function (id) {
+        var trail = categoryTrail(id, categories);
+        res = res.concat(trail);
+    });
+    return res;
+};
+var flatten = function (categories) {
+    var result = [];
+    categories.forEach(function (category) {
+        result.push(category);
+        if (Array.isArray(category.items)) {
+            result = result.concat(flatten(category.items));
+        }
+    });
+    return result;
+};

package/package.json

@@ -0,0 +1,44 @@
+{
+    "name": "@telia-ace/knowledge-widget-components-search",
+    "version": "1.0.1",
+    "description": "Search 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-core": "^1.0.1",
+        "@telia-ace/knowledge-widget-types-grid": "^1.0.1",
+        "@telia-ace/knowledge-widget-ui": "^1.0.1",
+        "@telia-ace/widget-routing": "^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"
+}