@telia-ace/knowledge-widget-ui 1.0.1

package/lib/components/guide-list.js

@@ -0,0 +1,202 @@
+"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 });
+exports.AccordionListItem = void 0;
+var widget_ui_1 = require("@telia-ace/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 hooks_1 = require("../hooks");
+var favorite_button_1 = __importDefault(require("./favorite-button"));
+var metadata_1 = __importDefault(require("./metadata"));
+var Tags = function (_a) {
+    var tags = _a.tags;
+    if (!tags.filter(function (t) { return t.symbol; }).length) {
+        return null;
+    }
+    return (react_1.default.createElement(StyledTagList, { className: "humany-guide-list-tags", items: tags, renderItem: function (_a) {
+            var id = _a.id, symbol = _a.symbol, title = _a.title;
+            return symbol && (react_1.default.createElement("li", { key: id, "data-tag": id },
+                react_1.default.createElement(StyledTagIcon, { size: 18, symbol: symbol, title: title })));
+        } }));
+};
+exports.AccordionListItem = (0, react_1.forwardRef)(function (_a, ref) {
+    var title = _a.title, id = _a.id, route = _a.route, symbolSize = _a.symbolSize, collapseUri = _a.collapseUri, children = _a.children;
+    var params = (0, widget_ui_1.useRouteData)().params;
+    return (react_1.default.createElement(ActiveAccordionListItem, { ref: ref, "data-guide": id },
+        react_1.default.createElement(widget_ui_1.TextLink, { title: title, "aria-label": title, routeName: route, params: (0, widget_utilities_1.createParams)(__assign(__assign({}, params), { uriName: collapseUri ? collapseUri : undefined, id: undefined, guide: undefined, accordion: undefined })), text: title },
+            react_1.default.createElement(widget_ui_1.SymbolBadge, { size: symbolSize, symbol: { type: 'Svg', content: 'caret-up' } })),
+        children));
+});
+var ActiveAccordionListItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  > a { \n    grid-column: 1 / -1\n    font-weight: bold;\n    margin: 0 0 ", " 0;\n  }\n\n  > div {\n    grid-column: 1 / -1\n  }\n"], ["\n  > a { \n    grid-column: 1 / -1\n    font-weight: bold;\n    margin: 0 0 ", " 0;\n  }\n\n  > div {\n    grid-column: 1 / -1\n  }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
+exports.default = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b = _a.expandable, expandable = _b === void 0 ? false : _b, _c = _a.routing, routing = _c === void 0 ? {} : _c, _d = _a.paramMappers, paramMappers = _d === void 0 ? {} : _d, _e = _a.symbolSize, symbolSize = _e === void 0 ? 11 : _e, _f = _a.pageRole, pageRole = _f === void 0 ? 'link' : _f, _g = _a.pageCaret, pageCaret = _g === void 0 ? 'down' : _g, _h = _a.showTags, showTags = _h === void 0 ? false : _h, _j = _a.showFavoriteToggle, showFavoriteToggle = _j === void 0 ? false : _j, _k = _a.localPaging, localPaging = _k === void 0 ? false : _k, _l = _a.onItemClick, onItemClick = _l === void 0 ? function () { } : _l, _m = _a.dispatch, dispatch = _m === void 0 ? function () { } : _m, _o = _a.metadata, metadata = _o === void 0 ? {} : _o, pageLabel = _a.pageLabel, className = _a.className, children = _a.children, items = _a.items, renderItem = _a.renderItem, addFavoriteTooltip = _a.addFavoriteTooltip, removeFavoriteCancelLabel = _a.removeFavoriteCancelLabel, removeFavoriteConfirmLabel = _a.removeFavoriteConfirmLabel, removeFavoriteHeader = _a.removeFavoriteHeader, removeFavoriteLabel = _a.removeFavoriteLabel, removeFavoriteTooltip = _a.removeFavoriteTooltip, other = __rest(_a, ["expandable", "routing", "paramMappers", "symbolSize", "pageRole", "pageCaret", "showTags", "showFavoriteToggle", "localPaging", "onItemClick", "dispatch", "metadata", "pageLabel", "className", "children", "items", "renderItem", "addFavoriteTooltip", "removeFavoriteCancelLabel", "removeFavoriteConfirmLabel", "removeFavoriteHeader", "removeFavoriteLabel", "removeFavoriteTooltip"]);
+    var _p = (0, react_1.useContext)(styled_components_1.ThemeContext).accessibility.isTabbing, isTabbing = _p === void 0 ? false : _p;
+    var innerRef = (0, react_1.useRef)();
+    var prevItems = (0, widget_ui_1.usePrevious)(items);
+    var _q = routing.guide, guideRoute = _q === void 0 ? 'guide' : _q, _r = routing.page, pageRoute = _r === void 0 ? 'index' : _r;
+    var _s = paramMappers.guide, mapGuideParams = _s === void 0 ? function (_a) {
+        var id = _a.id;
+        return (0, widget_utilities_1.createParams)({ guide: id });
+    } : _s, _t = paramMappers.page, mapPageParams = _t === void 0 ? function () { return (0, widget_utilities_1.createParams)(); } : _t;
+    var _u = __read((0, hooks_1.useFavorites)(), 2), favorites = _u[0], actions = _u[1];
+    (0, react_1.useImperativeHandle)(ref, function () { return innerRef.current; });
+    var defaultRenderer = function (guide) {
+        var id = guide.id, title = guide.title, tags = guide.tags, published = guide.published, modified = guide.modified, publishedBy = guide.publishedBy, modifiedBy = guide.modifiedBy;
+        return (react_1.default.createElement("li", { key: id, "data-guide": id, "has-metadata": ((!!(metadata === null || metadata === void 0 ? void 0 : metadata.showPublished) && !!published) ||
+                (!!(metadata === null || metadata === void 0 ? void 0 : metadata.showModified) && !!modified)).toString() },
+            react_1.default.createElement(widget_ui_1.TextLink, { className: "humany-guide-link", title: title, "aria-label": title, routeName: guideRoute, onClick: function (e) { return onItemClick(e, guide); }, params: mapGuideParams(guide), text: title },
+                react_1.default.createElement(widget_ui_1.SymbolBadge, { size: symbolSize, symbol: {
+                        type: 'Svg',
+                        content: expandable ? 'caret-down' : 'caret-right',
+                    } })),
+            showFavoriteToggle && (react_1.default.createElement(favorite_button_1.default, { guideTitle: title, addFavoriteTooltip: addFavoriteTooltip, removeFavoriteCancelLabel: removeFavoriteCancelLabel, removeFavoriteConfirmLabel: removeFavoriteConfirmLabel, removeFavoriteHeader: removeFavoriteHeader, removeFavoriteLabel: removeFavoriteLabel, removeFavoriteTooltip: removeFavoriteTooltip, isFavorite: favorites.indexOf(id) > -1, actions: actions, id: id })),
+            showTags && react_1.default.createElement(Tags, { tags: tags }),
+            react_1.default.createElement(StyledMetadata, __assign({}, metadata, { indent: expandable ? undefined : symbolSize, modified: modified, published: published, publishedBy: publishedBy, modifiedBy: modifiedBy }))));
+    };
+    var renderer = (0, react_1.useCallback)(function (guide, index, items) {
+        if (renderItem) {
+            return renderItem(guide, index, items, defaultRenderer);
+        }
+        return defaultRenderer(guide, index, items);
+    }, [renderItem, defaultRenderer]);
+    var onPageClick = (0, react_1.useCallback)(function (e) {
+        if (localPaging) {
+            e.preventDefault();
+            dispatch('page', mapPageParams());
+        }
+    }, [dispatch, localPaging]);
+    (0, react_1.useEffect)(function () {
+        if (isTabbing && prevItems && prevItems.length < items.length && innerRef.current) {
+            var elements = innerRef.current.querySelectorAll('.humany-guide-list > ul > li');
+            var listItemElem = elements[prevItems.length];
+            if (elements.length === items.length && prevItems.length) {
+                var nextListItem = elements[prevItems.length];
+                if (nextListItem) {
+                    var focusNext = nextListItem.querySelector('.humany-guide-link');
+                    focusNext && focusNext.focus();
+                }
+            }
+            else if (listItemElem) {
+                var observer = new MutationObserver(function (mutations, observer) {
+                    mutations.forEach(function (mutation) {
+                        if (mutation.addedNodes) {
+                            var found = Array.from(mutation.addedNodes).find(function (node) { return node.tagName === 'A'; });
+                            if (found &&
+                                (0, widget_utilities_1.htmlParentContains)(innerRef.current, document.activeElement)) {
+                                isTabbing && found.focus();
+                                observer.disconnect();
+                            }
+                        }
+                    });
+                });
+                observer.observe(listItemElem, {
+                    attributes: false,
+                    characterData: false,
+                    childList: true,
+                    subtree: true,
+                    attributeOldValue: false,
+                    characterDataOldValue: false,
+                });
+            }
+        }
+    });
+    var hasMetaData = !!Object.keys(metadata).filter(function (k) { return typeof metadata[k] !== 'undefined'; }).length;
+    return (react_1.default.createElement(StyledItemList, __assign({ className: (0, widget_utilities_1.appendClassNames)(className, 'humany-guide-list'), "data-item-count": items.length, items: items, renderItem: renderer, expandable: expandable ? 'true' : 'false', "grid-items": showTags || showFavoriteToggle || hasMetaData ? 'true' : 'false' }, (0, widget_ui_1.convertToStringAttributes)(other), { ref: innerRef }),
+        pageLabel ? (react_1.default.createElement(widget_ui_1.TextLink, { text: pageLabel, title: pageLabel, "aria-label": pageLabel, routeName: pageRoute, role: pageRole, params: mapPageParams(), onClick: onPageClick },
+            react_1.default.createElement(widget_ui_1.SymbolBadge, { size: symbolSize, symbol: { type: 'Svg', content: "caret-".concat(pageCaret) } }))) : null,
+        children));
+});
+var StyledItemList = (0, styled_components_1.default)(widget_ui_1.ItemList)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    ", "\n    padding: ", ";\n    overflow: auto;\n    justify-content: flex-start;\n    white-space: nowrap;\n    font-weight: 300;\n    text-decoration: none;\n\n    > div {\n        ", "\n    }\n\n    > ul > li {\n        ", "\n        > a {\n            color: ", ";\n            overflow: hidden;\n            text-overflow: ellipsis;\n            max-width: 100%;\n            display: inline-block;\n\n            svg {\n                margin: 0 calc(", "*2) 0 0;\n                line {\n                    stroke: ", ";\n                }\n            }\n\n            ", "\n\n            &:focus {\n                ", ";\n            }\n\n            @media (hover: hover) {\n                &:hover {\n                    text-decoration: underline;\n                }\n            }\n        }\n    }\n\n    > a {\n        color: ", ";\n        margin: ", " 0 0;\n        align-self: flex-start;\n        align-items: center;\n        display: flex;\n\n        span {\n            text-decoration: underline;\n        }\n\n        svg {\n            margin: 0 calc(", "*2) 0 0;\n            line {\n                stroke: ", ";\n            }\n        }\n\n        &:focus {\n            ", ";\n        }\n    }\n"], ["\n    ", "\n    padding: ", ";\n    overflow: auto;\n    justify-content: flex-start;\n    white-space: nowrap;\n    font-weight: 300;\n    text-decoration: none;\n\n    > div {\n        ", "\n    }\n\n    > ul > li {\n        ", "\n        > a {\n            color: ", ";\n            overflow: hidden;\n            text-overflow: ellipsis;\n            max-width: 100%;\n            display: inline-block;\n\n            svg {\n                margin: 0 calc(", "*2) 0 0;\n                line {\n                    stroke: ", ";\n                }\n            }\n\n            ", "\n\n            &:focus {\n                ", ";\n            }\n\n            @media (hover: hover) {\n                &:hover {\n                    text-decoration: underline;\n                }\n            }\n        }\n    }\n\n    > a {\n        color: ", ";\n        margin: ", " 0 0;\n        align-self: flex-start;\n        align-items: center;\n        display: flex;\n\n        span {\n            text-decoration: underline;\n        }\n\n        svg {\n            margin: 0 calc(", "*2) 0 0;\n            line {\n                stroke: ", ";\n            }\n        }\n\n        &:focus {\n            ", ";\n        }\n    }\n"])), widget_ui_1.itemList, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large; }, (0, widget_ui_1.headingElement)('> h1', (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                white-space: pre-wrap;\n            "], ["\n                white-space: pre-wrap;\n            "])))), function (p) {
+    return p['grid-items'] === 'true' && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                display: grid;\n                grid-template-columns: auto 1fr 1fr;\n                gap: 0px 0px;\n                grid-template-areas: '. favorite tags';\n                align-items: center;\n\n                > button {\n                    margin: 0 0 0 ", ";\n\n                    &[data-favorite='false'] {\n                        ", ";\n                        &:focus {\n                            opacity: 1;\n                        }\n                    }\n                }\n\n                > span {\n                    font-size: ", ";\n                }\n\n                &:hover {\n                    button[data-favorite='false'] {\n                        display: flex;\n                        justify-self: flex-start;\n                    }\n                }\n\n                &[has-metadata='true'] {\n                    grid-template-rows: 1fr 1fr;\n                    grid-template-areas:\n                        '. favorite tags'\n                        'metadata metadata metadata';\n                }\n            "], ["\n                display: grid;\n                grid-template-columns: auto 1fr 1fr;\n                gap: 0px 0px;\n                grid-template-areas: '. favorite tags';\n                align-items: center;\n\n                > button {\n                    margin: 0 0 0 ", ";\n\n                    &[data-favorite='false'] {\n                        ", ";\n                        &:focus {\n                            opacity: 1;\n                        }\n                    }\n                }\n\n                > span {\n                    font-size: ", ";\n                }\n\n                &:hover {\n                    button[data-favorite='false'] {\n                        display: flex;\n                        justify-self: flex-start;\n                    }\n                }\n\n                &[has-metadata='true'] {\n                    grid-template-rows: 1fr 1fr;\n                    grid-template-areas:\n                        '. favorite tags'\n                        'metadata metadata metadata';\n                }\n            "])), 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) ? 'opacity: 0;' : 'display: none;'; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; });
+}, 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; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) {
+    return p.expandable === 'true' && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    display: flex;\n                    flex-direction: row-reverse;\n                    justify-content: flex-end;\n                    align-items: center;\n\n                    span {\n                        overflow: hidden;\n                        text-overflow: ellipsis;\n                    }\n\n                    svg {\n                        margin: 0 0 0 ", ";\n                    }\n                "], ["\n                    display: flex;\n                    flex-direction: row-reverse;\n                    justify-content: flex-end;\n                    align-items: center;\n\n                    span {\n                        overflow: hidden;\n                        text-overflow: ellipsis;\n                    }\n\n                    svg {\n                        margin: 0 0 0 ", ";\n                    }\n                "])), 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) && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                        ", "\n                        text-decoration: underline;\n                    "], ["\n                        ", "\n                        text-decoration: underline;\n                    "])), widget_ui_1.borderTabStyle);
+}, 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.sizes) === 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.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) {
+    var _a;
+    return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                    ", "\n                    text-decoration: underline;\n                "], ["\n                    ", "\n                    text-decoration: underline;\n                "])), widget_ui_1.borderTabStyle);
+});
+var StyledTagList = (0, styled_components_1.default)(widget_ui_1.List)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    ", "\n    display: flex;\n    margin: 0 0 0 auto;\n    grid-area: tags;\n\n    li,\n    li:last-child {\n        margin: 0 0 0 ", ";\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n    }\n"], ["\n    ", "\n    display: flex;\n    margin: 0 0 0 auto;\n    grid-area: tags;\n\n    li,\n    li:last-child {\n        margin: 0 0 0 ", ";\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n    }\n"])), widget_ui_1.list, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
+var StyledTagIcon = (0, styled_components_1.default)(widget_ui_1.SymbolBadge)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: block;\n    color: ", ";\n    ", "\n"], ["\n    display: block;\n    color: ", ";\n    ", "\n"])), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) {
+    if (p.symbol.type === 'Uri') {
+        return "\n        width: ".concat(p.size, "px;\n        height: ").concat(p.size, "px;\n      ");
+    }
+    if (p.symbol.type === 'FontAwesome') {
+        return "\n        font-size: ".concat(p.size, "px;\n      ");
+    }
+});
+var StyledMetadata = (0, styled_components_1.default)(metadata_1.default)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    grid-area: metadata;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    font-size: ", ";\n    ", "\n"], ["\n    grid-area: metadata;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    font-size: ", ";\n    ", "\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; }, function (p) {
+    var _a;
+    return typeof p.indent === 'number' &&
+        "text-indent: calc(".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small, " * 2 + ").concat(p.indent, "px);");
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

package/lib/components/index.d.ts

@@ -0,0 +1,10 @@
+export { default as DialogLink } from './dialog-link';
+export { default as DialogList } from './dialog-list';
+export { default as DrawerList } from './drawer-list';
+export { default as DropdownActions } from './dropdown-actions';
+export { default as DropdownList } from './dropdown-list';
+export { default as FavoriteButton } from './favorite-button';
+export { default as Feedback } from './feedback';
+export { AccordionListItem, default as GuideList } from './guide-list';
+export { default as Loader, Wrapper as LoaderWrapper } from './loader';
+export { default as Metadata } from './metadata';

package/lib/components/index.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Metadata = exports.LoaderWrapper = exports.Loader = exports.GuideList = exports.AccordionListItem = exports.Feedback = exports.FavoriteButton = exports.DropdownList = exports.DropdownActions = exports.DrawerList = exports.DialogList = exports.DialogLink = void 0;
+var dialog_link_1 = require("./dialog-link");
+Object.defineProperty(exports, "DialogLink", { enumerable: true, get: function () { return __importDefault(dialog_link_1).default; } });
+var dialog_list_1 = require("./dialog-list");
+Object.defineProperty(exports, "DialogList", { enumerable: true, get: function () { return __importDefault(dialog_list_1).default; } });
+var drawer_list_1 = require("./drawer-list");
+Object.defineProperty(exports, "DrawerList", { enumerable: true, get: function () { return __importDefault(drawer_list_1).default; } });
+var dropdown_actions_1 = require("./dropdown-actions");
+Object.defineProperty(exports, "DropdownActions", { enumerable: true, get: function () { return __importDefault(dropdown_actions_1).default; } });
+var dropdown_list_1 = require("./dropdown-list");
+Object.defineProperty(exports, "DropdownList", { enumerable: true, get: function () { return __importDefault(dropdown_list_1).default; } });
+var favorite_button_1 = require("./favorite-button");
+Object.defineProperty(exports, "FavoriteButton", { enumerable: true, get: function () { return __importDefault(favorite_button_1).default; } });
+var feedback_1 = require("./feedback");
+Object.defineProperty(exports, "Feedback", { enumerable: true, get: function () { return __importDefault(feedback_1).default; } });
+var guide_list_1 = require("./guide-list");
+Object.defineProperty(exports, "AccordionListItem", { enumerable: true, get: function () { return guide_list_1.AccordionListItem; } });
+Object.defineProperty(exports, "GuideList", { enumerable: true, get: function () { return __importDefault(guide_list_1).default; } });
+var loader_1 = require("./loader");
+Object.defineProperty(exports, "Loader", { enumerable: true, get: function () { return __importDefault(loader_1).default; } });
+Object.defineProperty(exports, "LoaderWrapper", { enumerable: true, get: function () { return loader_1.Wrapper; } });
+var metadata_1 = require("./metadata");
+Object.defineProperty(exports, "Metadata", { enumerable: true, get: function () { return __importDefault(metadata_1).default; } });

package/lib/components/loader.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare type Props = {
+    loading: boolean | undefined;
+};
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
+    'data-loading': boolean;
+}, never>;
+declare const Loader: React.SFC<Props>;
+export default Loader;

package/lib/components/loader.js

@@ -0,0 +1,50 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrapper = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var spin = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  100% {\n    transform: rotate(360deg);\n  }\n"], ["\n  100% {\n    transform: rotate(360deg);\n  }\n"])));
+var dash = (0, styled_components_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  0% {\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -35px;\n  }\n  100% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -124px;\n  }\n"], ["\n  0% {\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -35px;\n  }\n  100% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -124px;\n  }\n"])));
+var SpinnerSvg = styled_components_1.default.svg(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    animation: ", " 2s linear infinite;\n    height: 100%;\n    transform-origin: center center;\n    width: 100%;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin: auto;\n    transition: 200ms ease-out opacity;\n"], ["\n    animation: ", " 2s linear infinite;\n    height: 100%;\n    transform-origin: center center;\n    width: 100%;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin: auto;\n    transition: 200ms ease-out opacity;\n"])), spin);
+exports.Wrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  width: 100%;\n  pointer-events: ", "\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  transition: 200ms ease-out opacity;\n  box-sizing: border-box;\n  overflow: hidden;\n  ", " {\n    opacity: ", "\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  width: 100%;\n  pointer-events: ", "\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  transition: 200ms ease-out opacity;\n  box-sizing: border-box;\n  overflow: hidden;\n  ", " {\n    opacity: ", "\n  }\n"])), function (p) { return (p['data-loading'] ? 'all' : 'none'); }, SpinnerSvg, function (p) { return (p['data-loading'] ? '1' : '0'); });
+var Spinner = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    position: relative;\n    margin: 0 auto;\n    width: 100px;\n    &:before {\n        content: '';\n        display: block;\n        padding-top: 100%;\n    }\n"], ["\n    position: relative;\n    margin: 0 auto;\n    width: 100px;\n    &:before {\n        content: '';\n        display: block;\n        padding-top: 100%;\n    }\n"])));
+var SpinnerCircle = styled_components_1.default.circle(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n    animation: ", " 1.5s ease-in-out infinite;\n    stroke-linecap: round;\n    stroke: ", ";\n    stroke-width: 2px;\n"], ["\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n    animation: ", " 1.5s ease-in-out infinite;\n    stroke-linecap: round;\n    stroke: ", ";\n    stroke-width: 2px;\n"])), dash, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; });
+var Loader = function (_a) {
+    var _b = _a.loading, loading = _b === void 0 ? false : _b;
+    return (react_1.default.createElement(exports.Wrapper, { className: "humany-loader", "data-loading": loading },
+        react_1.default.createElement(Spinner, { className: "humany-spinner" },
+            react_1.default.createElement(SpinnerSvg, { viewBox: "25 25 50 50" },
+                react_1.default.createElement(SpinnerCircle, { cx: "50", cy: "50", r: "20", fill: "none", "stroke-width": "2", "stroke-miterlimit": "10" })))));
+};
+exports.default = Loader;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/lib/components/metadata.d.ts

@@ -0,0 +1,17 @@
+import { DateFormats } from '@telia-ace/widget-ui';
+import React from 'react';
+export declare type Props = {
+    className?: string;
+    modified?: string;
+    published?: string;
+    modifiedBy?: string | null;
+    publishedBy?: string | null;
+    showModified?: boolean;
+    showPublished?: boolean;
+    modifiedLabel?: string;
+    publishedLabel?: string;
+    byLabel?: string;
+    format?: DateFormats;
+};
+declare const Metadata: React.FC<Props>;
+export default Metadata;

package/lib/components/metadata.js

@@ -0,0 +1,35 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var widget_ui_1 = require("@telia-ace/widget-ui");
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var Metadata = function (_a) {
+    var _b = _a.format, format = _b === void 0 ? widget_ui_1.DateFormats.YYYY_MM_DD_HH_MM : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.byLabel, byLabel = _d === void 0 ? '' : _d, _e = _a.modifiedLabel, modifiedLabel = _e === void 0 ? '' : _e, _f = _a.publishedLabel, publishedLabel = _f === void 0 ? '' : _f, _g = _a.modifiedBy, modifiedBy = _g === void 0 ? '' : _g, _h = _a.publishedBy, publishedBy = _h === void 0 ? '' : _h, _j = _a.showModified, showModified = _j === void 0 ? false : _j, _k = _a.showPublished, showPublished = _k === void 0 ? false : _k, modified = _a.modified, published = _a.published;
+    var publishedTimestamp = showPublished && published ? (react_1.default.createElement(StyledTimestamp, { format: format, timestamp: published })) : null;
+    var modifiedTimestamp = showModified && modified ? react_1.default.createElement(StyledTimestamp, { format: format, timestamp: modified }) : null;
+    if (!publishedTimestamp && !modifiedTimestamp) {
+        return null;
+    }
+    return (react_1.default.createElement(StyledText, { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-metadata') },
+        publishedTimestamp && (react_1.default.createElement(StyledText, { className: "humany-published" },
+            publishedLabel,
+            publishedTimestamp,
+            byLabel && publishedBy && " ".concat(byLabel.replace('{{editor}}', publishedBy)))),
+        modifiedTimestamp && (react_1.default.createElement(StyledText, { className: "humany-modified" },
+            publishedTimestamp && ', ',
+            modifiedLabel,
+            modifiedTimestamp,
+            byLabel && modifiedBy && " ".concat(byLabel.replace('{{editor}}', modifiedBy))))));
+};
+exports.default = Metadata;
+var StyledTimestamp = (0, styled_components_1.default)(widget_ui_1.Timestamp)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    &:not(:first-child) {\n        margin-left: 4px;\n    }\n    &:not(:last-child) {\n        margin-right: 4px;\n    }\n"], ["\n    &:not(:first-child) {\n        margin-left: 4px;\n    }\n    &:not(:last-child) {\n        margin-right: 4px;\n    }\n"])));
+var StyledText = (0, styled_components_1.default)(widget_ui_1.Text)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-style: italic;\n"], ["\n    font-style: italic;\n"])));
+var templateObject_1, templateObject_2;

package/lib/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export { default as useArrowKeys } from './use-arrow-keys';
+export { default as useDebounce } from './use-debounce';
+export { default as useFavorites } from './use-favorites';
+export type { FavoriteActions } from './use-favorites';
+export { default as useHover } from './use-hover';

package/lib/hooks/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHover = exports.useFavorites = exports.useDebounce = exports.useArrowKeys = void 0;
+var use_arrow_keys_1 = require("./use-arrow-keys");
+Object.defineProperty(exports, "useArrowKeys", { enumerable: true, get: function () { return __importDefault(use_arrow_keys_1).default; } });
+var use_debounce_1 = require("./use-debounce");
+Object.defineProperty(exports, "useDebounce", { enumerable: true, get: function () { return __importDefault(use_debounce_1).default; } });
+var use_favorites_1 = require("./use-favorites");
+Object.defineProperty(exports, "useFavorites", { enumerable: true, get: function () { return __importDefault(use_favorites_1).default; } });
+var use_hover_1 = require("./use-hover");
+Object.defineProperty(exports, "useHover", { enumerable: true, get: function () { return __importDefault(use_hover_1).default; } });

package/lib/hooks/use-arrow-keys.d.ts

@@ -0,0 +1,3 @@
+declare type ArrowKey = 'up' | 'down' | 'left' | 'right';
+declare const useArrowKeys: () => ArrowKey | null;
+export default useArrowKeys;

package/lib/hooks/use-arrow-keys.js

@@ -0,0 +1,48 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var widget_ui_1 = require("@telia-ace/widget-ui");
+var react_1 = require("react");
+var useArrowKeys = function () {
+    // State for keeping track of whether key is pressed
+    var _a = __read((0, react_1.useState)(null), 2), keyPressed = _a[0], setKeyPressed = _a[1];
+    var left = (0, widget_ui_1.useKeyPress)('ArrowLeft');
+    var right = (0, widget_ui_1.useKeyPress)('ArrowRight');
+    var up = (0, widget_ui_1.useKeyPress)('ArrowUp');
+    var down = (0, widget_ui_1.useKeyPress)('ArrowDown');
+    var effect = function () {
+        if (left) {
+            setKeyPressed('left');
+        }
+        else if (right) {
+            setKeyPressed('right');
+        }
+        else if (up) {
+            setKeyPressed('up');
+        }
+        else if (down) {
+            setKeyPressed('down');
+        }
+        else {
+            setKeyPressed(null);
+        }
+    };
+    (0, react_1.useEffect)(effect, [left, right, up, down]);
+    return keyPressed;
+};
+exports.default = useArrowKeys;

package/lib/hooks/use-debounce.d.ts

@@ -0,0 +1,2 @@
+declare const useDebounce: (value: string, delay: number) => string;
+export default useDebounce;

package/lib/hooks/use-debounce.js

@@ -0,0 +1,41 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var useDebounce = function (value, delay) {
+    // State and setters for debounced value
+    var _a = __read((0, react_1.useState)(value), 2), debouncedValue = _a[0], setDebouncedValue = _a[1];
+    var handler = (0, react_1.useCallback)(function () {
+        // Update debounced value after delay
+        return setTimeout(function () {
+            setDebouncedValue(value);
+        }, delay);
+    }, [delay, setDebouncedValue, value]);
+    (0, react_1.useEffect)(function () {
+        var timeout = handler();
+        // Cancel the timeout if value changes (also on delay change or unmount)
+        // This is how we prevent debounced value from updating if value is changed
+        // within the delay period. Timeout gets cleared and restarted.
+        return function () {
+            clearTimeout(timeout);
+        };
+    }, [handler] // Only re-call effect if value or delay changes
+    );
+    return debouncedValue;
+};
+exports.default = useDebounce;

package/lib/hooks/use-favorites.d.ts

@@ -0,0 +1,8 @@
+export declare type FavoriteActions = {
+    addFavorite: (guideId: string) => Promise<string[]>;
+    clearFavorites: () => Promise<string[]>;
+    removeFavorite: (guideId: string) => Promise<string[]>;
+    toggleFavorite: (guideId: string) => Promise<string[]>;
+};
+declare const useFavorites: () => [string[], FavoriteActions];
+export default useFavorites;

package/lib/hooks/use-favorites.js

@@ -0,0 +1,81 @@
+"use strict";
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var widget_ui_1 = require("@telia-ace/widget-ui");
+var react_1 = require("react");
+var useFavorites = function () {
+    var container = (0, widget_ui_1.useContainer)();
+    var _a = __read((0, react_1.useState)([]), 2), favorites = _a[0], setFavorites = _a[1];
+    var platform = container.get('favorites');
+    (0, react_1.useEffect)(function () {
+        if (platform) {
+            setFavorites(platform.get());
+            var events = container.get('$widget').events;
+            var unsubscribe = events.subscribe('widget:favorites-updated', function (_, _a) {
+                var updated = _a.updated;
+                setFavorites(__spreadArray([], __read(updated), false));
+            });
+            return unsubscribe;
+        }
+    }, []);
+    var add = function (guideId) {
+        if (!platform) {
+            return Promise.resolve([]);
+        }
+        return platform.add(guideId);
+    };
+    var remove = function (guideId) {
+        if (!platform) {
+            return Promise.resolve([]);
+        }
+        return platform.remove(guideId);
+    };
+    var clear = function () {
+        if (!platform) {
+            return Promise.resolve([]);
+        }
+        return platform.clear();
+    };
+    var toggle = (0, react_1.useCallback)(function (guideId) {
+        if (favorites.indexOf(guideId) > -1) {
+            return remove(guideId);
+        }
+        else {
+            return add(guideId);
+        }
+    }, [favorites]);
+    return [
+        favorites,
+        (0, react_1.useMemo)(function () { return ({
+            addFavorite: add,
+            removeFavorite: remove,
+            clearFavorites: clear,
+            toggleFavorite: toggle,
+        }); }, [favorites]),
+    ];
+};
+exports.default = useFavorites;

package/lib/hooks/use-hover.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => [boolean, React.MutableRefObject<HTMLElement | undefined>];
+export default _default;

package/lib/hooks/use-hover.js

@@ -0,0 +1,29 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var widget_ui_1 = require("@telia-ace/widget-ui");
+var react_1 = require("react");
+exports.default = (function () {
+    var _a = __read((0, react_1.useState)(false), 2), hovering = _a[0], setHovering = _a[1];
+    var elem = (0, react_1.useRef)();
+    var onMouseEnter = (0, react_1.useCallback)(function () { return setHovering(true); }, [setHovering]);
+    var onMouseLeave = (0, react_1.useCallback)(function () { return setHovering(false); }, [setHovering]);
+    (0, widget_ui_1.useEventListener)('mouseenter', onMouseEnter, elem.current);
+    (0, widget_ui_1.useEventListener)('mouseleave', onMouseLeave, elem.current);
+    return [hovering, elem];
+});