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

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

@@ -1,200 +0,0 @@
-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 __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 { ItemTree, Link, Text, useDispatch, useEventListener, useProperties, } from '@telia-ace/knowledge-widget-ui';
-import React, { useCallback, useEffect, useState } from 'react';
-import styled, { css } from 'styled-components';
-import { filterItems, match } from './utils';
-export 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; }),
-    };
-};
-var getInputElem = function (searchContainerRef) {
-    return searchContainerRef
-        ? searchContainerRef.querySelector('[data-type="search"], input[type="search"]')
-        : null;
-};
-export var focusInput = function (searchContainerRef) {
-    if (!searchContainerRef) {
-        return;
-    }
-    var inputElem = getInputElem(searchContainerRef);
-    if (inputElem) {
-        inputElem.focus();
-    }
-};
-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(useState(rawItems || []), 2), items = _b[0], setItems = _b[1];
-    var _c = __read(useState(null), 2), first = _c[0], setFirst = _c[1];
-    var dispatch = useDispatch();
-    var _d = useProperties(), activeFilterBadges = _d.activeFilterBadges, quickFilters = _d.quickFilters;
-    var autoSelect = (typeof quickFilters === 'object' && !!quickFilters.autoSelect) ||
-        (typeof quickFilters === 'boolean' && !!quickFilters);
-    useEffect(function () {
-        setItems(filterItems(rawItems, filterType, filterPhrase));
-    }, [filterPhrase, filterType, rawItems]);
-    useEffect(function () {
-        var _a;
-        if (filterContainer) {
-            var anchors = 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 = 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.createElement(StyledLink, { autoSelect: autoSelect && inputHasFocus && item.id === first, disabled: !match(item.title, filterPhrase), tabIndex: !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.createElement(Title, { title: item.title, phrase: filterPhrase, matches: match(item.title, filterPhrase) }))); },
-            };
-        }
-        return {
-            renderLi: true,
-            renderItem: function (item) { return (React.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.createElement(Title, { symbol: "#", title: item.title, phrase: filterPhrase, matches: match(item.title, filterPhrase) }))); },
-        };
-    };
-    useEventListener('keydown', function (e) {
-        var _a;
-        var key = e.key;
-        if (!filterContainer ||
-            !(key === 'ArrowDown' || key === 'ArrowUp' || key === 'Enter')) {
-            return;
-        }
-        var _b = 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 {
-                    focusInput(searchContainer);
-                }
-            }
-            else {
-                if (focusedIndex - 1 < 0) {
-                    focusInput(searchContainer);
-                }
-                else {
-                    focusPrev();
-                }
-            }
-        }
-    }, window);
-    return (React.createElement(ItemTree, __assign({ tree: items, renderEmpty: false, ulProps: { role: 'listbox' }, liProps: { role: 'option' } }, buildListProps(filterType))));
-};
-export 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.createElement(Text, null,
-        symbol,
-        start,
-        bold ? React.createElement("strong", null, bold) : null,
-        end ? end : null));
-};
-var disabledCss = 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 = 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 = styled(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-esm/quick-filter.js

@@ -1,65 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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 { contentBox, Loader, useContainer, useProperties, useScroll, } from '@telia-ace/knowledge-widget-ui';
-import { appendClassNames } from '@telia-ace/widget-utilities';
-import React, { useCallback, useRef } from 'react';
-import styled from 'styled-components';
-import QuickFilterItemList, { focusInput, getFocusedIndex } from './quick-filter-item-list';
-export default (function (_a) {
-    var _b = _a.phrase, phrase = _b === void 0 ? '' : _b, inputHasFocus = _a.inputHasFocus, searchContainerRef = _a.searchContainerRef;
-    var _c = useProperties().quickFilter, quickFilter = _c === void 0 ? {
-        open: false,
-        loading: false,
-        symbol: '',
-        type: '',
-        items: [],
-    } : _c;
-    var _d = __read(useScroll(true), 2), css = _d[0], ref = _d[1];
-    var container = useContainer();
-    var events = container.get('$widget').events;
-    var wrapperRef = useRef();
-    var setWrapperRef = useCallback(function (node) {
-        if (node) {
-            node.addEventListener('keydown', function () {
-                var listItemFocused = getFocusedIndex(node).focusedIndex > -1;
-                if (listItemFocused) {
-                    events.subscribeOnce('router:changed', function () {
-                        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.createElement(Wrapper, { ref: setWrapperRef, "data-loading": loading, className: appendClassNames('humany-quick-filter-dropdown', [type === 'guideCategory', 'humany-quick-filter-guide-categories'], [type === 'tag', 'humany-quick-filter-tags']) },
-        React.createElement(Inner, { className: "humany-quick-filter-dropdown-inner", css: css, ref: ref },
-            React.createElement(QuickFilterItemList, { filterType: type, items: items, filterPhrase: filterPhrase, filterContainer: ref.current, searchContainer: searchContainerRef, inputHasFocus: inputHasFocus })),
-        React.createElement(Loader, { loading: loading })));
-});
-var Wrapper = styled.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"])), contentBox, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
-var Inner = styled.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-esm/search-component.js

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