@telia-ace/knowledge-widget-components-contact-list 1.0.1

package/LICENSE.txt

@@ -0,0 +1,6 @@
+Copyright © 2021, Telia Company AB. All rights reserved.
+
+THIS PACKAGE AND CONTAINING SOFTWARE IS PART OF
+THE HUMANY SERVICE. BY USING THIS SOFTWARE YOU
+AGREE TO THE FOLLOWING TERMS AND CONDITIONS:
+http://www.humany.com/legal

package/README.md

@@ -0,0 +1,3 @@
+# `@telia-ace/widget-services`
+
+Services for ACE Widgets.

package/lib/contact-list-component.d.ts

@@ -0,0 +1,21 @@
+import { ContactMethodType } from '@telia-ace/knowledge-widget-adapters';
+import { Category, Guide } from '@telia-ace/knowledge-widget-core';
+import { FormComponentInstanceProperties } from '@telia-ace/widget-forms';
+import { Container } from '@webprovisions/platform';
+export declare type ContactListComponentProps = {
+    deflectionHeader?: string;
+    deflection?: {
+        [contactCategoryId: string]: string[];
+    };
+    deflectionPageSize?: number;
+    routes?: {
+        contactCategory?: string;
+        guide?: string;
+    };
+    categories?: Category[];
+    contactMethods?: ContactMethodType[];
+    guides?: Guide[];
+    deflectionAccordion?: boolean;
+} & FormComponentInstanceProperties;
+export declare const ContactListComponent: (container: Container) => Promise<void>;
+export default ContactListComponent;

package/lib/contact-list-component.js

@@ -0,0 +1,135 @@
+"use strict";
+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 __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 });
+exports.ContactListComponent = void 0;
+var knowledge_widget_component_utilities_1 = require("@telia-ace/knowledge-widget-component-utilities");
+var knowledge_widget_core_1 = require("@telia-ace/knowledge-widget-core");
+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 ContactListComponent = function (container) {
+    var events = container.get('$widget').events;
+    var _a = __read((0, knowledge_widget_core_1.createEventSubscriber)(events), 2), subscribe = _a[0], unsubscribe = _a[1];
+    return (0, knowledge_widget_ui_1.createReactComponent)(container, 'contact-list', Promise.resolve().then(function () { return __importStar(require('./contact-list')); }), function (component) {
+        var fetch = function (params) {
+            component.writeProperties({ loading: true, contactMethods: [], categories: [] });
+            component.actions.dispatch('fetch', { params: params });
+        };
+        component.actions.create('fetch', function (data) {
+            var _a = component.properties().submitButtonLabel, submitButtonLabel = _a === void 0 ? 'Submit' : _a;
+            var contactMethods = (data.contactMethods || []).map(function (cm) { return (__assign(__assign({}, cm), { body: (0, knowledge_widget_component_utilities_1.updateForm)(cm, { submit: submitButtonLabel }) })); });
+            return component.actions.dispatch('fetched', __assign(__assign({}, data), { contactMethods: contactMethods, loading: true }));
+        });
+        component.actions.create('fetched', function (input) {
+            return component.writeProperties(__assign(__assign({}, input), { guides: input.guides || [], loading: false }));
+        });
+        container.getAsync('router').then(function (router) {
+            var params = router.getRouteData().params;
+            fetch(params);
+        });
+        subscribe('router:changed', function (event, _a) {
+            var current = _a.current;
+            fetch(current.routeData.params);
+        });
+        (0, knowledge_widget_component_utilities_1.useForm)(container, component);
+        (0, knowledge_widget_component_utilities_1.useExpand)(component);
+    })
+        .then(function () {
+        return (0, knowledge_widget_core_1.extendComponent)(container, 'contact-list', function (component) {
+            component.actions.watch('contact-list.fetch', function (input, next) {
+                var _a = component.properties(), _b = _a.deflection, deflection = _b === void 0 ? {} : _b, _c = _a.deflectionPageSize, deflectionPageSize = _c === void 0 ? 5 : _c, deflectionAccordion = _a.deflectionAccordion;
+                var _d = input.params, params = _d === void 0 ? {} : _d;
+                var contactCategory = params.contactCategory, guideParam = params.guide, accordionParam = params.accordion;
+                return container.getAsync('dataClient').then(function (dataClient) {
+                    return dataClient
+                        .fetch(knowledge_widget_types_grid_1.DataType.ContactMethodCategories, {
+                        contactMethodCategoryId: contactCategory,
+                    })
+                        .then(function (_a) {
+                        var _b;
+                        var contactMethods = _a.contactMethods, categories = _a.categories;
+                        var deflectionKeys = Object.keys(deflection);
+                        var currentCategory = deflectionKeys.length === 1 && !contactCategory
+                            ? deflectionKeys[0]
+                            : contactCategory;
+                        if ((_b = deflection[currentCategory]) === null || _b === void 0 ? void 0 : _b.length) {
+                            return dataClient
+                                .fetch(knowledge_widget_types_grid_1.DataType.Guides, {
+                                categories: deflection[currentCategory],
+                                take: deflectionPageSize,
+                            })
+                                .then(function (data) {
+                                if (deflectionAccordion &&
+                                    guideParam &&
+                                    accordionParam === component.node.name) {
+                                    return (0, knowledge_widget_component_utilities_1.fetchAccordionGuideIfMissing)(data, dataClient, { guide: guideParam });
+                                }
+                                return new Promise(function (resolve) {
+                                    return resolve(data);
+                                });
+                            })
+                                .then(function (_a) {
+                                var guides = _a.guides;
+                                return next({ guides: guides, contactMethods: contactMethods, categories: categories });
+                            });
+                        }
+                        return next({ contactMethods: contactMethods, categories: categories });
+                    });
+                });
+            });
+        });
+    })
+        .then(function () {
+        unsubscribe();
+    });
+};
+exports.ContactListComponent = ContactListComponent;
+exports.default = exports.ContactListComponent;

package/lib/contact-list.d.ts

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

package/lib/contact-list.js

@@ -0,0 +1,69 @@
+"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 __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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var knowledge_widget_adapters_1 = require("@telia-ace/knowledge-widget-adapters");
+var knowledge_widget_ui_1 = require("@telia-ace/knowledge-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 deflection_list_1 = __importDefault(require("./deflection-list"));
+var StyledContactList = (0, styled_components_1.default)(knowledge_widget_adapters_1.ContactList)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n"], ["\n    ", "\n    ", "\n"])), knowledge_widget_ui_1.loadingOpacity, knowledge_widget_ui_1.contentBox);
+var StyledItemList = (0, styled_components_1.default)(knowledge_widget_ui_1.ItemList)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n    ", "\n  ", "\n\n  && {\n        i {\n            font-size: 25px;\n            width: 1.28571429em;\n            text-align: center;\n        }\n    }\n"], ["\n    ", "\n    ", "\n  ", "\n\n  && {\n        i {\n            font-size: 25px;\n            width: 1.28571429em;\n            text-align: center;\n        }\n    }\n"])), knowledge_widget_ui_1.loadingOpacity, knowledge_widget_ui_1.contentBox, knowledge_widget_adapters_1.contactItemList);
+var StyledLink = (0, styled_components_1.default)(knowledge_widget_ui_1.Link)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    &:focus {\n        ", ";\n    }\n\n    ", "\n"], ["\n    &:focus {\n        ", ";\n    }\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; }, knowledge_widget_adapters_1.contactLink);
+var ContactList = function (_a) {
+    var className = _a.className, other = __rest(_a, ["className"]);
+    var dispatch = (0, knowledge_widget_ui_1.useDispatch)();
+    var container = (0, knowledge_widget_ui_1.useContainer)();
+    var routeData = (0, knowledge_widget_ui_1.useRouteData)();
+    var _b = (0, knowledge_widget_ui_1.useProperties)(), _c = _b.deflectionHeader, deflectionHeader = _c === void 0 ? '' : _c, _d = _b.routes, routes = _d === void 0 ? {} : _d, _e = _b.contactMethods, contactMethods = _e === void 0 ? [] : _e, _f = _b.categories, categories = _f === void 0 ? [] : _f, _g = _b.guides, guides = _g === void 0 ? [] : _g, _h = _b.deflectionAccordion, deflectionAccordion = _h === void 0 ? false : _h, _j = _b.loading, loading = _j === void 0 ? false : _j;
+    var contactCategoryRoute = routes.contactCategory, _k = routes.guide, guideRoute = _k === void 0 ? 'guide' : _k;
+    if (!categories.length && !contactMethods.length && !loading) {
+        return (0, knowledge_widget_ui_1.createEmptyComponent)(container, __assign(__assign({}, other), { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-contact-category-list') }));
+    }
+    var name = routeData.name, contactCategory = routeData.params.contactCategory;
+    var selectedCategory = (0, widget_utilities_1.findCategoryById)(contactCategory, categories);
+    return !contactMethods.length ? (react_1.default.createElement(StyledItemList, __assign({}, other, { "data-loading": loading, className: (0, widget_utilities_1.appendClassNames)(className, 'humany-contact-category-list'), items: (selectedCategory && selectedCategory.items) || categories, renderItem: function (_a) {
+            var id = _a.id, title = _a.title, symbol = _a.symbol, matches = _a.matches, items = _a.items;
+            return !!matches || (items && !!items.length) ? (react_1.default.createElement("li", { key: id, "data-contact-category": id },
+                react_1.default.createElement(StyledLink, { routeName: contactCategoryRoute || name, params: (0, widget_utilities_1.createParams)({
+                        contactCategory: id,
+                        uriName: (0, widget_utilities_1.formatUrl)(title),
+                    }) },
+                    symbol && react_1.default.createElement(knowledge_widget_ui_1.SymbolBadge, { symbol: symbol }),
+                    react_1.default.createElement(knowledge_widget_ui_1.StyledText, null, title)))) : null;
+        } }),
+        react_1.default.createElement(knowledge_widget_ui_1.Loader, { loading: loading }))) : (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(deflection_list_1.default, { className: className, guides: guides, categoryTitle: selectedCategory && selectedCategory.title, header: deflectionHeader, route: guideRoute, accordion: deflectionAccordion, loading: loading }),
+        react_1.default.createElement(StyledContactList, { "data-loading": loading, className: className, contactMethods: contactMethods, dispatch: dispatch },
+            react_1.default.createElement(knowledge_widget_ui_1.Loader, { loading: loading }))));
+};
+exports.default = ContactList;
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/deflection-list.d.ts

@@ -0,0 +1,13 @@
+import { Guide } from '@telia-ace/knowledge-widget-core';
+import React from 'react';
+declare type Props = {
+    className: string;
+    guides: Guide[];
+    header: string;
+    accordion?: boolean;
+    route?: string;
+    loading: boolean;
+    categoryTitle?: string;
+};
+declare const DeflectionList: React.SFC<Props>;
+export default DeflectionList;

package/lib/deflection-list.js

@@ -0,0 +1,94 @@
+"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 __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 = __importDefault(require("styled-components"));
+var DeflectionList = function (_a) {
+    var className = _a.className, guides = _a.guides, header = _a.header, accordion = _a.accordion, loading = _a.loading, _b = _a.route, route = _b === void 0 ? 'guide' : _b, categoryTitle = _a.categoryTitle, other = __rest(_a, ["className", "guides", "header", "accordion", "loading", "route", "categoryTitle"]);
+    var _c = (0, knowledge_widget_ui_1.useRouteData)(), routeName = _c.name, _d = _c.params, _e = _d.contactCategory, contactCategory = _e === void 0 ? 0 : _e, currentGuideId = _d.guide;
+    var componentName = (0, knowledge_widget_ui_1.useComponentDescriptor)().name;
+    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 renderItem = (0, react_1.useCallback)(function (guide, index, items, defaultRenderer) {
+        var id = guide.id, title = guide.title;
+        if (accordion && currentGuideId === id) {
+            return (react_1.default.createElement(knowledge_widget_ui_1.AccordionListItem, { key: id, id: id, title: title, route: routeName, collapseUri: categoryTitle && (0, widget_utilities_1.formatUrl)(categoryTitle) }, children.map(function (child) { return (react_1.default.createElement(knowledge_widget_types_grid_1.Component, __assign({ key: child.id, id: child.id, branch: "default" }, { accordion: accordion }))); })));
+        }
+        return defaultRenderer ? defaultRenderer(guide, index, items, defaultRenderer) : null;
+    }, [accordion, children, currentGuideId]);
+    if (!guides.length && !loading) {
+        return (0, knowledge_widget_ui_1.createEmptyComponent)(container, __assign(__assign({}, other), { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-deflection-list') }));
+    }
+    return (react_1.default.createElement(StyledGuideList, __assign({}, other, { "data-loading": loading, className: (0, widget_utilities_1.appendClassNames)(className, 'humany-deflection-list'), items: guides, header: header, expandable: !!accordion, renderItem: renderItem, dispatch: dispatch, routing: {
+            guide: route,
+        }, paramMappers: {
+            guide: function (_a) {
+                var id = _a.id, title = _a.title;
+                return (0, widget_utilities_1.createParams)({
+                    contactCategory: contactCategory,
+                    guide: id,
+                    accordion: accordion ? componentName : undefined,
+                    uriName: (0, widget_utilities_1.formatUrl)(title),
+                });
+            },
+        } }),
+        react_1.default.createElement(knowledge_widget_ui_1.Loader, { loading: loading })));
+};
+var StyledGuideList = (0, styled_components_1.default)(knowledge_widget_ui_1.GuideList)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n"], ["\n    ", "\n    ", "\n"])), knowledge_widget_ui_1.contentBox, knowledge_widget_ui_1.loadingOpacity);
+exports.default = DeflectionList;
+var templateObject_1;

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+import ContactListComponent from './contact-list-component';
+export default ContactListComponent;

package/lib/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var contact_list_component_1 = __importDefault(require("./contact-list-component"));
+exports.default = contact_list_component_1.default;

package/lib-esm/contact-list-component.d.ts

@@ -0,0 +1,21 @@
+import { ContactMethodType } from '@telia-ace/knowledge-widget-adapters';
+import { Category, Guide } from '@telia-ace/knowledge-widget-core';
+import { FormComponentInstanceProperties } from '@telia-ace/widget-forms';
+import { Container } from '@webprovisions/platform';
+export declare type ContactListComponentProps = {
+    deflectionHeader?: string;
+    deflection?: {
+        [contactCategoryId: string]: string[];
+    };
+    deflectionPageSize?: number;
+    routes?: {
+        contactCategory?: string;
+        guide?: string;
+    };
+    categories?: Category[];
+    contactMethods?: ContactMethodType[];
+    guides?: Guide[];
+    deflectionAccordion?: boolean;
+} & FormComponentInstanceProperties;
+export declare const ContactListComponent: (container: Container) => Promise<void>;
+export default ContactListComponent;

package/lib-esm/contact-list-component.js

@@ -0,0 +1,108 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { fetchAccordionGuideIfMissing, updateForm, useExpand, useForm, } from '@telia-ace/knowledge-widget-component-utilities';
+import { createEventSubscriber, extendComponent, } from '@telia-ace/knowledge-widget-core';
+import { DataType, } from '@telia-ace/knowledge-widget-types-grid';
+import { createReactComponent } from '@telia-ace/knowledge-widget-ui';
+export var ContactListComponent = function (container) {
+    var events = container.get('$widget').events;
+    var _a = __read(createEventSubscriber(events), 2), subscribe = _a[0], unsubscribe = _a[1];
+    return createReactComponent(container, 'contact-list', import('./contact-list'), function (component) {
+        var fetch = function (params) {
+            component.writeProperties({ loading: true, contactMethods: [], categories: [] });
+            component.actions.dispatch('fetch', { params: params });
+        };
+        component.actions.create('fetch', function (data) {
+            var _a = component.properties().submitButtonLabel, submitButtonLabel = _a === void 0 ? 'Submit' : _a;
+            var contactMethods = (data.contactMethods || []).map(function (cm) { return (__assign(__assign({}, cm), { body: updateForm(cm, { submit: submitButtonLabel }) })); });
+            return component.actions.dispatch('fetched', __assign(__assign({}, data), { contactMethods: contactMethods, loading: true }));
+        });
+        component.actions.create('fetched', function (input) {
+            return component.writeProperties(__assign(__assign({}, input), { guides: input.guides || [], loading: false }));
+        });
+        container.getAsync('router').then(function (router) {
+            var params = router.getRouteData().params;
+            fetch(params);
+        });
+        subscribe('router:changed', function (event, _a) {
+            var current = _a.current;
+            fetch(current.routeData.params);
+        });
+        useForm(container, component);
+        useExpand(component);
+    })
+        .then(function () {
+        return extendComponent(container, 'contact-list', function (component) {
+            component.actions.watch('contact-list.fetch', function (input, next) {
+                var _a = component.properties(), _b = _a.deflection, deflection = _b === void 0 ? {} : _b, _c = _a.deflectionPageSize, deflectionPageSize = _c === void 0 ? 5 : _c, deflectionAccordion = _a.deflectionAccordion;
+                var _d = input.params, params = _d === void 0 ? {} : _d;
+                var contactCategory = params.contactCategory, guideParam = params.guide, accordionParam = params.accordion;
+                return container.getAsync('dataClient').then(function (dataClient) {
+                    return dataClient
+                        .fetch(DataType.ContactMethodCategories, {
+                        contactMethodCategoryId: contactCategory,
+                    })
+                        .then(function (_a) {
+                        var _b;
+                        var contactMethods = _a.contactMethods, categories = _a.categories;
+                        var deflectionKeys = Object.keys(deflection);
+                        var currentCategory = deflectionKeys.length === 1 && !contactCategory
+                            ? deflectionKeys[0]
+                            : contactCategory;
+                        if ((_b = deflection[currentCategory]) === null || _b === void 0 ? void 0 : _b.length) {
+                            return dataClient
+                                .fetch(DataType.Guides, {
+                                categories: deflection[currentCategory],
+                                take: deflectionPageSize,
+                            })
+                                .then(function (data) {
+                                if (deflectionAccordion &&
+                                    guideParam &&
+                                    accordionParam === component.node.name) {
+                                    return fetchAccordionGuideIfMissing(data, dataClient, { guide: guideParam });
+                                }
+                                return new Promise(function (resolve) {
+                                    return resolve(data);
+                                });
+                            })
+                                .then(function (_a) {
+                                var guides = _a.guides;
+                                return next({ guides: guides, contactMethods: contactMethods, categories: categories });
+                            });
+                        }
+                        return next({ contactMethods: contactMethods, categories: categories });
+                    });
+                });
+            });
+        });
+    })
+        .then(function () {
+        unsubscribe();
+    });
+};
+export default ContactListComponent;

package/lib-esm/contact-list.d.ts

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

package/lib-esm/contact-list.js

@@ -0,0 +1,64 @@
+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;
+};
+import { contactItemList, contactLink, ContactList as ContactListUi, } from '@telia-ace/knowledge-widget-adapters';
+import { borderTabStyle, contentBox, createEmptyComponent, ItemList, Link, Loader, loadingOpacity, StyledText, SymbolBadge, useContainer, useDispatch, useProperties, useRouteData, } from '@telia-ace/knowledge-widget-ui';
+import { appendClassNames, createParams, findCategoryById, formatUrl, } from '@telia-ace/widget-utilities';
+import React from 'react';
+import styled from 'styled-components';
+import DeflectionList from './deflection-list';
+var StyledContactList = styled(ContactListUi)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n"], ["\n    ", "\n    ", "\n"])), loadingOpacity, contentBox);
+var StyledItemList = styled(ItemList)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n    ", "\n  ", "\n\n  && {\n        i {\n            font-size: 25px;\n            width: 1.28571429em;\n            text-align: center;\n        }\n    }\n"], ["\n    ", "\n    ", "\n  ", "\n\n  && {\n        i {\n            font-size: 25px;\n            width: 1.28571429em;\n            text-align: center;\n        }\n    }\n"])), loadingOpacity, contentBox, contactItemList);
+var StyledLink = styled(Link)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    &:focus {\n        ", ";\n    }\n\n    ", "\n"], ["\n    &:focus {\n        ", ";\n    }\n\n    ", "\n"])), function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && borderTabStyle; }, contactLink);
+var ContactList = function (_a) {
+    var className = _a.className, other = __rest(_a, ["className"]);
+    var dispatch = useDispatch();
+    var container = useContainer();
+    var routeData = useRouteData();
+    var _b = useProperties(), _c = _b.deflectionHeader, deflectionHeader = _c === void 0 ? '' : _c, _d = _b.routes, routes = _d === void 0 ? {} : _d, _e = _b.contactMethods, contactMethods = _e === void 0 ? [] : _e, _f = _b.categories, categories = _f === void 0 ? [] : _f, _g = _b.guides, guides = _g === void 0 ? [] : _g, _h = _b.deflectionAccordion, deflectionAccordion = _h === void 0 ? false : _h, _j = _b.loading, loading = _j === void 0 ? false : _j;
+    var contactCategoryRoute = routes.contactCategory, _k = routes.guide, guideRoute = _k === void 0 ? 'guide' : _k;
+    if (!categories.length && !contactMethods.length && !loading) {
+        return createEmptyComponent(container, __assign(__assign({}, other), { className: appendClassNames(className, 'humany-contact-category-list') }));
+    }
+    var name = routeData.name, contactCategory = routeData.params.contactCategory;
+    var selectedCategory = findCategoryById(contactCategory, categories);
+    return !contactMethods.length ? (React.createElement(StyledItemList, __assign({}, other, { "data-loading": loading, className: appendClassNames(className, 'humany-contact-category-list'), items: (selectedCategory && selectedCategory.items) || categories, renderItem: function (_a) {
+            var id = _a.id, title = _a.title, symbol = _a.symbol, matches = _a.matches, items = _a.items;
+            return !!matches || (items && !!items.length) ? (React.createElement("li", { key: id, "data-contact-category": id },
+                React.createElement(StyledLink, { routeName: contactCategoryRoute || name, params: createParams({
+                        contactCategory: id,
+                        uriName: formatUrl(title),
+                    }) },
+                    symbol && React.createElement(SymbolBadge, { symbol: symbol }),
+                    React.createElement(StyledText, null, title)))) : null;
+        } }),
+        React.createElement(Loader, { loading: loading }))) : (React.createElement(React.Fragment, null,
+        React.createElement(DeflectionList, { className: className, guides: guides, categoryTitle: selectedCategory && selectedCategory.title, header: deflectionHeader, route: guideRoute, accordion: deflectionAccordion, loading: loading }),
+        React.createElement(StyledContactList, { "data-loading": loading, className: className, contactMethods: contactMethods, dispatch: dispatch },
+            React.createElement(Loader, { loading: loading }))));
+};
+export default ContactList;
+var templateObject_1, templateObject_2, templateObject_3;

package/lib-esm/deflection-list.d.ts

@@ -0,0 +1,13 @@
+import { Guide } from '@telia-ace/knowledge-widget-core';
+import React from 'react';
+declare type Props = {
+    className: string;
+    guides: Guide[];
+    header: string;
+    accordion?: boolean;
+    route?: string;
+    loading: boolean;
+    categoryTitle?: string;
+};
+declare const DeflectionList: React.SFC<Props>;
+export default DeflectionList;

package/lib-esm/deflection-list.js

@@ -0,0 +1,66 @@
+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;
+};
+import { Component } from '@telia-ace/knowledge-widget-types-grid';
+import { AccordionListItem, contentBox, createEmptyComponent, GuideList, Loader, loadingOpacity, useChildren, useComponentDescriptor, useContainer, useDispatch, useRouteData, } from '@telia-ace/knowledge-widget-ui';
+import { appendClassNames, createParams, formatUrl } from '@telia-ace/widget-utilities';
+import React, { useCallback } from 'react';
+import styled from 'styled-components';
+var DeflectionList = function (_a) {
+    var className = _a.className, guides = _a.guides, header = _a.header, accordion = _a.accordion, loading = _a.loading, _b = _a.route, route = _b === void 0 ? 'guide' : _b, categoryTitle = _a.categoryTitle, other = __rest(_a, ["className", "guides", "header", "accordion", "loading", "route", "categoryTitle"]);
+    var _c = useRouteData(), routeName = _c.name, _d = _c.params, _e = _d.contactCategory, contactCategory = _e === void 0 ? 0 : _e, currentGuideId = _d.guide;
+    var componentName = useComponentDescriptor().name;
+    var container = useContainer();
+    var children = useChildren();
+    var dispatch = useDispatch();
+    var renderItem = useCallback(function (guide, index, items, defaultRenderer) {
+        var id = guide.id, title = guide.title;
+        if (accordion && currentGuideId === id) {
+            return (React.createElement(AccordionListItem, { key: id, id: id, title: title, route: routeName, collapseUri: categoryTitle && formatUrl(categoryTitle) }, children.map(function (child) { return (React.createElement(Component, __assign({ key: child.id, id: child.id, branch: "default" }, { accordion: accordion }))); })));
+        }
+        return defaultRenderer ? defaultRenderer(guide, index, items, defaultRenderer) : null;
+    }, [accordion, children, currentGuideId]);
+    if (!guides.length && !loading) {
+        return createEmptyComponent(container, __assign(__assign({}, other), { className: appendClassNames(className, 'humany-deflection-list') }));
+    }
+    return (React.createElement(StyledGuideList, __assign({}, other, { "data-loading": loading, className: appendClassNames(className, 'humany-deflection-list'), items: guides, header: header, expandable: !!accordion, renderItem: renderItem, dispatch: dispatch, routing: {
+            guide: route,
+        }, paramMappers: {
+            guide: function (_a) {
+                var id = _a.id, title = _a.title;
+                return createParams({
+                    contactCategory: contactCategory,
+                    guide: id,
+                    accordion: accordion ? componentName : undefined,
+                    uriName: formatUrl(title),
+                });
+            },
+        } }),
+        React.createElement(Loader, { loading: loading })));
+};
+var StyledGuideList = styled(GuideList)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n"], ["\n    ", "\n    ", "\n"])), contentBox, loadingOpacity);
+export default DeflectionList;
+var templateObject_1;

package/lib-esm/index.d.ts

@@ -0,0 +1,2 @@
+import ContactListComponent from './contact-list-component';
+export default ContactListComponent;

package/lib-esm/index.js

@@ -0,0 +1,2 @@
+import ContactListComponent from './contact-list-component';
+export default ContactListComponent;

package/package.json

@@ -0,0 +1,46 @@
+{
+    "name": "@telia-ace/knowledge-widget-components-contact-list",
+    "version": "1.0.1",
+    "description": "Contact list component for ACE Knowledge Widgets.",
+    "license": "SEE LICENSE IN LICENSE.txt",
+    "author": "Telia Company AB",
+    "keywords": [
+        "telia"
+    ],
+    "main": "lib/index.js",
+    "module": "lib-esm/index.js",
+    "files": [
+        "LICENSE.txt",
+        "README.md",
+        "lib/",
+        "lib-esm/"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "clean": "cleandir lib && cleandir lib-esm",
+        "compile": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json"
+    },
+    "sideEffects": false,
+    "typings": "lib/index.d.ts",
+    "dependencies": {
+        "@telia-ace/knowledge-widget-adapters": "^1.0.1",
+        "@telia-ace/knowledge-widget-component-utilities": "^1.0.1",
+        "@telia-ace/knowledge-widget-core": "^1.0.1",
+        "@telia-ace/knowledge-widget-types-grid": "^1.0.1",
+        "@telia-ace/knowledge-widget-ui": "^1.0.1",
+        "@telia-ace/widget-forms": "^1.0.1",
+        "@telia-ace/widget-utilities": "^1.0.1",
+        "@webprovisions/platform": "^1.1.2",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "styled-components": "^4.3.2"
+    },
+    "devDependencies": {
+        "@types/react": "^17.0.39",
+        "@types/react-dom": "^17.0.13",
+        "@types/styled-components": "^5.1.7"
+    },
+    "gitHead": "58b00b80f6a1e4a3c13f4291cb29b9422ea1aa4a"
+}