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

package/lib/search.js

@@ -1,194 +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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var knowledge_widget_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 react_1 = __importStar(require("react"));
-var styled_components_1 = __importStar(require("styled-components"));
-var filter_badges_1 = __importDefault(require("./filter-badges"));
-var quick_filter_1 = __importDefault(require("./quick-filter"));
-var use_search_1 = __importDefault(require("./use-search"));
-var Search = function (_a) {
-    var className = _a.className, other = __rest(_a, ["className"]);
-    var _b = (0, knowledge_widget_ui_1.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 = (0, knowledge_widget_ui_1.useRouteData)().params;
-    var _g = __read((0, react_1.useState)(false), 2), hasFocus = _g[0], setHasFocus = _g[1];
-    var _h = __read((0, react_1.useState)(params.phrase || ''), 2), phrase = _h[0], setPhrase = _h[1];
-    var _j = __read((0, react_1.useState)({
-        guideCategory: false,
-        tag: false,
-    }), 2), showFilterBadges = _j[0], setShowFilterBadges = _j[1];
-    var container = (0, knowledge_widget_ui_1.useContainer)();
-    var children = (0, knowledge_widget_ui_1.useChildren)();
-    var dispatch = (0, knowledge_widget_ui_1.useDispatch)();
-    var _k = (typeof filterBadges === 'object' ? filterBadges : {}).position, filterBadgePosition = _k === void 0 ? 'inside' : _k;
-    (0, react_1.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
-    (0, knowledge_widget_ui_1.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((0, use_search_1.default)(phrase, params, !!incremental), 3), search = _l[0], clear = _l[1], elem = _l[2];
-    (0, react_1.useEffect)(function () {
-        setPhrase(params.phrase || '');
-    }, [params.phrase]);
-    var onChange = (0, react_1.useCallback)(function (value) {
-        setPhrase(value);
-    }, [setPhrase]);
-    var onEscape = (0, react_1.useCallback)(function () {
-        dispatch('quick-filter:close').then(function () { return clear(true); });
-    }, [dispatch, clear]);
-    var autoFocusHandler = (0, react_1.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 = (0, react_1.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_1.default.createElement(filter_badges_1.default, { position: position, inputHasFocus: hasFocus, showGuideCategory: showFilterBadges.guideCategory, showTag: showFilterBadges.tag, searchContainerRef: elem.current }));
-        }
-    };
-    (0, knowledge_widget_ui_1.useTransitionEnd)(autoFocusHandler);
-    var showClear = showClearButton && (showFilterBadges.guideCategory || showFilterBadges.tag || phrase);
-    var quickFilterAccessibilityProps = quickFiltersEnabled
-        ? (0, knowledge_widget_ui_1.convertToStringAttributes)({
-            role: 'combobox',
-            'aria-autocomplete': 'list',
-            autoComplete: 'off',
-            'aria-haspopup': 'listbox',
-        })
-        : {};
-    return (react_1.default.createElement(StyledSearchWrapper, __assign({}, other, { ref: elem, role: role, className: (0, widget_utilities_1.appendClassNames)(className, 'humany-search'), "data-has-phrase": !!phrase, "data-has-focus": hasFocus, "data-has-search-symbol": showSearchButton ? 'true' : 'false' }),
-        react_1.default.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_1.default.createElement(SearchButton, { "aria-label": searchButtonLabel, type: "submit", title: searchButtonLabel, disabled: !phrase, onClick: search, "data-has-phrase": !!phrase, "data-has-focus": hasFocus },
-                react_1.default.createElement(knowledge_widget_ui_1.SymbolBadge, { size: 32, symbol: { type: 'Svg', content: 'search' } }))),
-            renderFilterBadges('inside'),
-            react_1.default.createElement(knowledge_widget_ui_1.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_1.default.createElement(ClearButton, { "aria-label": clearButtonLabel, type: "reset", hasFocus: hasFocus, title: clearButtonLabel, onClick: onClearButtonClick },
-                react_1.default.createElement(knowledge_widget_ui_1.SymbolBadge, { size: 27, symbol: { type: 'Svg', content: 'clear' } }))),
-            showChildren &&
-                !showClear &&
-                children.map(function (child) { return (react_1.default.createElement(knowledge_widget_types_grid_1.Component, { key: child.id, id: child.id, branch: "default" })); }),
-            react_1.default.createElement(quick_filter_1.default, { inputHasFocus: hasFocus, phrase: phrase, searchContainerRef: elem.current })),
-        renderFilterBadges('below')));
-};
-exports.default = Search;
-var StyledSearchWrapper = styled_components_1.default.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"])), knowledge_widget_ui_1.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_components_1.default.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'] && (0, styled_components_1.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)
-            ? knowledge_widget_ui_1.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 = (0, styled_components_1.default)(knowledge_widget_ui_1.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 = (0, styled_components_1.default)(knowledge_widget_ui_1.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) && knowledge_widget_ui_1.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/use-search.d.ts

@@ -1,10 +0,0 @@
-/// <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/use-search.js

@@ -1,99 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
-var react_1 = require("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;
-};
-exports.default = (function (phrase, params, debounce) {
-    if (params === void 0) { params = {}; }
-    if (debounce === void 0) { debounce = true; }
-    var dispatch = (0, knowledge_widget_ui_1.useDispatch)();
-    var _a = (0, knowledge_widget_ui_1.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 = (0, knowledge_widget_ui_1.useDebounce)(phrase, typeof incremental === 'boolean' ? 600 : incremental);
-    var previousDebouncedPhrase = (0, knowledge_widget_ui_1.usePrevious)(debouncedPhrase);
-    var previousFilters = (0, knowledge_widget_ui_1.usePrevious)(activeFilterBadges);
-    var ref = (0, react_1.useRef)(null);
-    var dispatchSearch = (0, react_1.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 = (0, react_1.useCallback)(function (navigateToHome) {
-        dispatch('clear', { navigateToHome: navigateToHome });
-    }, [dispatch]);
-    var removeFilterKeywords = function (input) {
-        if (quickFilters) {
-            return input.replace(/([@#].*)/g, '');
-        }
-        return input;
-    };
-    var submitSearch = (0, react_1.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]);
-    (0, react_1.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]);
-    (0, react_1.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/utils.d.ts

@@ -1,3 +0,0 @@
-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/utils.js

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.filterItems = exports.match = void 0;
-var widget_utilities_1 = require("@telia-ace/widget-utilities");
-var match = function (title, phrase) {
-    if (!phrase || !title) {
-        return true;
-    }
-    return !!(title.toLowerCase().indexOf(phrase.toLowerCase()) > -1);
-};
-exports.match = match;
-var filterItems = function (items, type, phrase) {
-    if (items === void 0) { items = []; }
-    if (!phrase) {
-        return items;
-    }
-    var cloned = (0, widget_utilities_1.deepClone)(items);
-    if (type === 'tag') {
-        return cloned.filter(function (i) { return (0, exports.match)(i.title, phrase); });
-    }
-    var matchTrail = buildMatchTrail(cloned, phrase);
-    var filtered = recursiveFilter(cloned, function (c) { return matchTrail.indexOf(c.id) > -1; });
-    return filtered;
-};
-exports.filterItems = filterItems;
-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 (0, exports.match)(c.title, phrase); }).map(function (c) { return c.id; });
-    var res = [];
-    matching.forEach(function (id) {
-        var trail = (0, widget_utilities_1.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/lib-esm/filter-badges.js

@@ -1,210 +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 __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 { borderTabStyle, Link, SymbolBadge, Text, Tooltip, useDispatch, useEventListener, useKeyPress, useProperties, useRouteData, } from '@telia-ace/knowledge-widget-ui';
-import { appendClassNames } from '@telia-ace/widget-utilities';
-import React, { useCallback, useRef, useState } from 'react';
-import styled, { css } from 'styled-components';
-var FilterBadge = function (_a) {
-    var text = _a.text, className = _a.className, forceFocusStyle = _a.forceFocusStyle, filterType = _a.filterType, handleClick = _a.handleClick, _b = _a.deleteAriaLabel, deleteAriaLabel = _b === void 0 ? '' : _b, p = __rest(_a, ["text", "className", "forceFocusStyle", "filterType", "handleClick", "deleteAriaLabel"]);
-    var ref = useRef();
-    return (React.createElement(Text, { className: appendClassNames(className, 'humany-filter-badge'), onKeyDown: function (e) {
-            if (e.key === 'Enter') {
-                handleClick(e, filterType);
-            }
-        } },
-        text,
-        React.createElement(Link, __assign({}, p, { ref: ref, tabIndex: 0, role: "button", "aria-label": deleteAriaLabel.replace('{{item}}', text), onClick: function (e) { return handleClick(e, filterType); } }),
-            React.createElement(SymbolBadge, { size: 13, symbol: { type: 'Svg', content: 'close' } }))));
-};
-var FilterBadges = function (_a) {
-    var inputHasFocus = _a.inputHasFocus, searchContainerRef = _a.searchContainerRef, showTag = _a.showTag, showGuideCategory = _a.showGuideCategory, position = _a.position;
-    var _b = useProperties(), _c = _b.activeFilterBadges, activeFilterBadges = _c === void 0 ? {} : _c, _d = _b.deleteFilterBadgeAriaLabel, deleteFilterBadgeAriaLabel = _d === void 0 ? '' : _d;
-    var dispatch = useDispatch();
-    var _e = useRouteData(), name = _e.name, params = _e.params;
-    var _f = __read(useState(false), 2), isNavigatingWithKeyBoard = _f[0], setIsNavigatingWithKeyboard = _f[1];
-    var onKeyDown = useCallback(function (event) {
-        var key = event.key;
-        if (['ArrowLeft', 'ArrowRight'].indexOf(key) === -1) {
-            setIsNavigatingWithKeyboard(false);
-        }
-    }, []);
-    useEventListener('keydown', onKeyDown, window);
-    useEventListener('click', onKeyDown, window);
-    var guideCategory = activeFilterBadges.guideCategory, tag = activeFilterBadges.tag, tooltip = activeFilterBadges.tooltip;
-    var getFocusedFilterBadge = function (container) {
-        var badges = container.querySelectorAll('.humany-filter-badge');
-        return {
-            badges: badges,
-            index: Array.from(badges).findIndex(function (e) { return document.activeElement === e; }),
-        };
-    };
-    var handleFilterBadgeClick = function (event, filterType) {
-        event.preventDefault();
-        dispatch('quick-filter:remove', { types: [filterType] });
-    };
-    var keyboardNavigation = function (direction, inputElem) {
-        if (!searchContainerRef) {
-            return;
-        }
-        var _a = getFocusedFilterBadge(searchContainerRef), badges = _a.badges, currentFocusedIndex = _a.index;
-        if (badges.length) {
-            var toFocus = null;
-            if (direction === 'left') {
-                if (currentFocusedIndex === -1) {
-                    // if no badge is focused and direction is left
-                    // focus last badge
-                    toFocus = badges.item(badges.length - 1);
-                }
-                else if (currentFocusedIndex > 0) {
-                    // if there are more badges to the left, go one step back
-                    // do nothing if already focusing the most left badge
-                    toFocus = badges.item(currentFocusedIndex - 1);
-                }
-            }
-            else if (direction === 'right') {
-                if (currentFocusedIndex === badges.length - 1) {
-                    // if currently focusing the last badge, move focus to search input
-                    inputElem && inputElem.focus();
-                }
-                else if (badges.item(currentFocusedIndex + 1)) {
-                    toFocus = badges.item(currentFocusedIndex + 1);
-                }
-            }
-            if (toFocus) {
-                toFocus.focus();
-                setIsNavigatingWithKeyboard(true);
-            }
-        }
-    };
-    useKeyPress('ArrowLeft', useCallback(function () {
-        if (!searchContainerRef) {
-            return;
-        }
-        var focusedBadgeIndex = getFocusedFilterBadge(searchContainerRef).index;
-        if (inputHasFocus || focusedBadgeIndex > -1) {
-            var inputElem = searchContainerRef.querySelector('[data-type="search"]');
-            var isAtBeginningOfInput = inputElem && inputElem.selectionStart !== null && inputElem.selectionStart <= 0;
-            var isFocusingAFilterBadge = focusedBadgeIndex > -1;
-            if (isAtBeginningOfInput || isFocusingAFilterBadge) {
-                keyboardNavigation('left', inputElem);
-            }
-        }
-    }, [inputHasFocus, searchContainerRef]));
-    useKeyPress('ArrowRight', useCallback(function () {
-        if (!searchContainerRef) {
-            return;
-        }
-        var focusedBadgeIndex = getFocusedFilterBadge(searchContainerRef).index;
-        if (focusedBadgeIndex > -1) {
-            var inputElem = searchContainerRef.querySelector('[data-type="search"]');
-            var isFocusingAFilterBadge = focusedBadgeIndex > -1;
-            if (isFocusingAFilterBadge) {
-                keyboardNavigation('right', inputElem);
-            }
-        }
-    }, [searchContainerRef]));
-    useKeyPress('Backspace', useCallback(function (event) {
-        if (!searchContainerRef) {
-            return;
-        }
-        var filtersToRemove = [];
-        var focusedBadgeIndex = getFocusedFilterBadge(searchContainerRef).index;
-        var inputElem = searchContainerRef.querySelector('[data-type="search"]');
-        var isFocusingAFilterBadge = focusedBadgeIndex > -1;
-        if (isFocusingAFilterBadge) {
-            if (focusedBadgeIndex === 0) {
-                if (showGuideCategory) {
-                    filtersToRemove = ['guideCategory'];
-                }
-                else if (showTag) {
-                    filtersToRemove = ['tag'];
-                }
-            }
-            else if (focusedBadgeIndex === 1) {
-                filtersToRemove = ['tag'];
-            }
-        }
-        else {
-            var isAtBeginningOfInput = inputElem &&
-                inputElem.selectionStart !== null &&
-                inputElem.selectionStart <= 0;
-            if (isAtBeginningOfInput) {
-                if (activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.tag) {
-                    filtersToRemove = ['tag'];
-                }
-                else if (activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.guideCategory) {
-                    filtersToRemove = ['guideCategory'];
-                }
-            }
-        }
-        if (filtersToRemove.length > 0) {
-            event.preventDefault();
-            dispatch('quick-filter:remove', { types: filtersToRemove });
-        }
-    }, [searchContainerRef, activeFilterBadges, showTag, showGuideCategory]));
-    var renderBadge = useCallback(function (type) {
-        if (type === 'guideCategory' && guideCategory && showGuideCategory) {
-            return (React.createElement(StyledFilterBadge, { text: "@".concat(guideCategory.title), routeName: name, filterType: "guideCategory", handleClick: handleFilterBadgeClick, forceFocusStyle: isNavigatingWithKeyBoard, deleteAriaLabel: deleteFilterBadgeAriaLabel, params: __assign(__assign({}, params), { guideCategory: undefined }) }));
-        }
-        if (type === 'tag' && tag && showTag) {
-            return (React.createElement(StyledFilterBadge, { className: "humany-filter-badge", text: "#".concat(tag.title), routeName: name, filterType: "tag", handleClick: handleFilterBadgeClick, forceFocusStyle: isNavigatingWithKeyBoard, deleteAriaLabel: deleteFilterBadgeAriaLabel, params: __assign(__assign({}, params), { tag: undefined }) }));
-        }
-        return null;
-    }, [guideCategory, tag, name, params, showGuideCategory, showTag, isNavigatingWithKeyBoard]);
-    if (!guideCategory && !tag) {
-        return null;
-    }
-    return (React.createElement(Wrapper, { className: "humany-filter-badges", position: position },
-        guideCategory && tooltip ? (React.createElement(Tooltip, { content: React.createElement(React.Fragment, null, tooltip), sticky: false }, renderBadge('guideCategory'))) : (renderBadge('guideCategory')),
-        tag && renderBadge('tag')));
-};
-export default FilterBadges;
-var Wrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    ", "\n"], ["\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    ", "\n"])), function (p) {
-    return p.position === 'inside'
-        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                  &:not(:first-child) {\n                      margin: 0 0 0 ", ";\n                  }\n              "], ["\n                  &:not(:first-child) {\n                      margin: 0 0 0 ", ";\n                  }\n              "])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                  margin: ", " 0 0 0;\n                  span:first-child {\n                      margin-left: 0;\n                  }\n              "], ["\n                  margin: ", " 0 0 0;\n                  span:first-child {\n                      margin-left: 0;\n                  }\n              "])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
-});
-var StyledFilterBadge = styled(FilterBadge)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    padding: ", ";\n    background-color: ", ";\n    border-radius: ", ";\n    font-weight: 300;\n    font-size: ", ";\n    font-style: italic;\n    color: #ffffff;\n    text-decoration: none;\n    white-space: nowrap;\n\n    margin: calc(", " / 2);\n\n    &:focus-within {\n        ", ";\n        a {\n            outline: none;\n        }\n    }\n\n    svg {\n        width: 17px;\n        height: 11px;\n        margin: 1px 0 0 ", ";\n        path {\n            stroke: #ffffff;\n            stroke-width: 2px;\n        }\n        order: 1;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    padding: ", ";\n    background-color: ", ";\n    border-radius: ", ";\n    font-weight: 300;\n    font-size: ", ";\n    font-style: italic;\n    color: #ffffff;\n    text-decoration: none;\n    white-space: nowrap;\n\n    margin: calc(", " / 2);\n\n    &:focus-within {\n        ", ";\n        a {\n            outline: none;\n        }\n    }\n\n    svg {\n        width: 17px;\n        height: 11px;\n        margin: 1px 0 0 ", ";\n        path {\n            stroke: #ffffff;\n            stroke-width: 2px;\n        }\n        order: 1;\n    }\n"])), function (p) { var _a, _b; return "".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small, " calc(").concat((_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.normal, "/2) "); }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) { return p.theme.borderRadius; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) {
-    var _a;
-    return (((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) || p.forceFocusStyle) && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                ", "\n                background-color: transparent;\n\n                svg {\n                    path {\n                        stroke: ", ";\n                    }\n                }\n            "], ["\n                ", "\n                background-color: transparent;\n\n                svg {\n                    path {\n                        stroke: ", ";\n                    }\n                }\n            "])), borderTabStyle, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; });
-}, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/lib-esm/index.js

@@ -1,2 +0,0 @@
-import SearchComponent from './search-component';
-export default SearchComponent;