@telia-ace/knowledge-widget-components-guide-category-dropdown 1.0.4 → 1.0.8

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

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

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

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

package/lib-esm/index.js

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