@telia-ace/knowledge-widget-components-guide 1.0.1

package/lib/guide-component.js

@@ -0,0 +1,196 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GuideComponent = 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 clipboard = __importStar(require("clipboard-polyfill"));
+var use_feedback_1 = __importDefault(require("./use-feedback"));
+var buildPlainText = function (_a) {
+    var title = _a.title, body = _a.body;
+    var processedHtml = '';
+    if (title && title.length) {
+        processedHtml = title.trim();
+    }
+    if (body && body.length) {
+        processedHtml = "".concat(processedHtml.trim(), "\n").concat(body.trim());
+    }
+    var div = document.createElement('div');
+    div.innerHTML = processedHtml;
+    var links = Array.from(div.getElementsByTagName('a'));
+    var plainText = div.innerText;
+    links.forEach(function (a) {
+        plainText = plainText.replace(a.innerText, "[".concat(a.href, "] (").concat(a.innerText, ")"));
+    });
+    return plainText;
+};
+var buildHtml = function (_a) {
+    var title = _a.title, body = _a.body;
+    var processedHtml = '';
+    if (title && title.length) {
+        processedHtml = "<h2>".concat(title.trim(), "</h2>");
+    }
+    if (body && body.length) {
+        processedHtml = "".concat(processedHtml.trim()).concat(body.trim());
+    }
+    return processedHtml.trim();
+};
+var GuideComponent = 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, 'guide', Promise.resolve().then(function () { return __importStar(require('./guide')); }), function (component) {
+        var fetch = function (params) {
+            component.writeProperties({
+                loading: true,
+                error: undefined,
+                guide: undefined,
+            });
+            component.actions.dispatch('fetch', { params: params });
+        };
+        component.actions.create('copy', function (guide) {
+            var item = new clipboard.ClipboardItem({
+                'text/html': new Blob([buildHtml(guide)], { type: 'text/html' }),
+                'text/plain': new Blob([buildPlainText(guide)], { type: 'text/plain' }),
+            });
+            return clipboard.write([item]).then(function () {
+                events.dispatch('widget:menu-toggled', null);
+            });
+        });
+        component.actions.create('print', function () {
+            var elem = document.querySelector('.humany-guide .humany-paragraph');
+            var a = window.open('', '', 'height=500, width=500');
+            events.dispatch('widget:menu-toggled', null);
+            if (elem && a) {
+                a.document.write("<html><body>".concat(elem.innerHTML, "</body></html>"));
+                a.document.close();
+                a.print();
+            }
+        });
+        component.actions.create('back', function (data, options) {
+            if (options.preventDefault) {
+                return;
+            }
+            return container.getAsync('router').then(function (router) {
+                router.goBack();
+            });
+        });
+        component.actions.create('fetch', function (_a) {
+            var _b = _a.contactMethods, contactMethods = _b === void 0 ? [] : _b, _c = _a.dialog, dialog = _c === void 0 ? [] : _c, guide = _a.guide, error = _a.error;
+            if (error) {
+                return component.actions.dispatch('fetched', {
+                    error: error,
+                    guide: undefined,
+                    contactMethods: [],
+                    feedbackGiven: undefined,
+                    handoverContactMethods: [],
+                    showFeedback: false,
+                    loading: true,
+                });
+            }
+            var _d = component.properties(), _e = _d.showFeedback, showFeedback = _e === void 0 ? true : _e, _f = _d.submitButtonLabel, submitButtonLabel = _f === void 0 ? 'Submit' : _f;
+            var properties = {
+                showFeedback: showFeedback,
+                dialog: dialog,
+                guide: guide,
+                feedbackGiven: undefined,
+                handoverContactMethods: [],
+                contactMethods: 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({}, properties), { loading: true }));
+        });
+        component.actions.create('fetched', function (input) {
+            return component.writeProperties(__assign(__assign({}, input), { 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, use_feedback_1.default)(container, component);
+        (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, 'guide', function (component) {
+            component.actions.watch('guide.fetch', function (input, next) {
+                var _a = input.params, guide = _a.guide, connection = _a.connection;
+                if (guide) {
+                    return container
+                        .getAsync('dataClient')
+                        .then(function (dataClient) {
+                        return dataClient.fetch(knowledge_widget_types_grid_1.DataType.Guide, { connection: connection, guideId: guide });
+                    })
+                        .then(next)
+                        .catch(function (error) {
+                        if (error) {
+                            return next(error);
+                        }
+                    });
+                }
+                return next(input);
+            });
+        });
+    })
+        .then(function () {
+        unsubscribe();
+    });
+};
+exports.GuideComponent = GuideComponent;
+exports.default = exports.GuideComponent;

package/lib/guide.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type Props = {
+    className: string;
+    accordion?: boolean;
+};
+declare const Guide: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default Guide;

package/lib/guide.js

@@ -0,0 +1,117 @@
+"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_adapters_1 = require("@telia-ace/knowledge-widget-adapters");
+var knowledge_widget_types_grid_1 = require("@telia-ace/knowledge-widget-types-grid");
+var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var answer_version_picker_1 = __importDefault(require("./answer-version-picker"));
+var feedback_1 = __importDefault(require("./feedback"));
+var toolbar_1 = __importDefault(require("./toolbar"));
+var Guide = (0, react_1.forwardRef)(function (_a, ref) {
+    var className = _a.className, _b = _a.accordion, accordion = _b === void 0 ? false : _b, other = __rest(_a, ["className", "accordion"]);
+    var _c = (0, knowledge_widget_ui_1.useProperties)(), _d = _c.loading, loading = _d === void 0 ? false : _d, _e = _c.dialog, dialog = _e === void 0 ? [] : _e, _f = _c.contactMethods, contactMethods = _f === void 0 ? [] : _f, _g = _c.showHeader, showHeader = _g === void 0 ? true : _g, _h = _c.showAnswerVersions, showAnswerVersions = _h === void 0 ? false : _h, _j = _c.defaultAnswerVersionLabel, defaultAnswerVersionLabel = _j === void 0 ? 'Default' : _j, backButtonLabel = _c.backButtonLabel, metadataByLabel = _c.metadataByLabel, metadataModifiedLabel = _c.metadataModifiedLabel, metadataPublishedLabel = _c.metadataPublishedLabel, availablePerspectives = _c.availablePerspectives, metadata = _c.metadata, toolbar = _c.toolbar, guide = _c.guide, error = _c.error;
+    var connection = (0, knowledge_widget_ui_1.useRouteData)().params.connection;
+    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 handleBackButtonClick = (0, react_1.useCallback)(function () {
+        dispatch('back');
+    }, [dispatch]);
+    if (!guide && !error && !loading) {
+        return (0, knowledge_widget_ui_1.createEmptyComponent)(container, __assign(__assign({}, other), { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-guide') }));
+    }
+    var _k = guide || {}, _l = _k.id, id = _l === void 0 ? '' : _l, _m = _k.title, title = _m === void 0 ? '' : _m, _o = _k.body, body = _o === void 0 ? '' : _o, _p = _k.translations, translations = _p === void 0 ? {} : _p;
+    if (error && error.status === 404) {
+        return react_1.default.createElement(knowledge_widget_types_grid_1.NotFound, { showSearch: false });
+    }
+    var showBackButton = !!accordion && !!connection;
+    var language = Object.keys(translations).find(function (key) { return translations[key] === "".concat(id); });
+    return (react_1.default.createElement(Wrapper, __assign({ ref: ref }, other, { "data-loading": loading, className: (0, widget_utilities_1.appendClassNames)(className, 'humany-guide') }),
+        react_1.default.createElement(Content, { "data-loading": loading, accordion: accordion ? 'true' : 'false', className: "humany-guide-content" },
+            ((showAnswerVersions && guide) || !!toolbar) && (react_1.default.createElement(Top, { className: "humany-guide-top" },
+                showAnswerVersions && guide && (react_1.default.createElement(answer_version_picker_1.default, { defaultAnswerVersionLabel: defaultAnswerVersionLabel, availablePerspectives: availablePerspectives, guide: guide })),
+                !!toolbar && react_1.default.createElement(toolbar_1.default, { dispatch: dispatch }))),
+            !!(title || body) && (react_1.default.createElement(Body, { className: "humany-guide-body", accordion: accordion ? 'true' : 'false', header: (showHeader && title) || undefined, html: body, htmlParseInstruction: (0, knowledge_widget_ui_1.guideRenderInstructions)(container, dialog), lang: language })),
+            dialog && body.indexOf('h-option-link') === -1 && (react_1.default.createElement(StyledDialogList, { dialog: dialog })),
+            react_1.default.createElement(StyledContactList, { backButtonShown: showBackButton ? 'true' : 'false', contactMethods: contactMethods, dispatch: dispatch, guideId: guide && guide.id }),
+            !contactMethods.length && (react_1.default.createElement(feedback_1.default, { backButtonShown: showBackButton, accordion: accordion })),
+            showBackButton && (react_1.default.createElement(BackButton, { "aria-label": backButtonLabel, onClick: handleBackButtonClick },
+                react_1.default.createElement(Caret, { width: "7", height: "13", viewBox: "0 0 7 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                    react_1.default.createElement("line", { x1: "6.64645", y1: "12.5513", x2: "0.648357", y2: "6.55319" }),
+                    react_1.default.createElement("line", { x1: "0.646447", y1: "6.64455", x2: "6.64454", y2: "0.646465" })),
+                backButtonLabel && react_1.default.createElement("span", null, backButtonLabel))),
+            metadata && (react_1.default.createElement(StyledMetadata, __assign({}, metadata, { modified: guide === null || guide === void 0 ? void 0 : guide.modified, published: guide === null || guide === void 0 ? void 0 : guide.published, modifiedBy: guide === null || guide === void 0 ? void 0 : guide.modifiedBy, publishedBy: guide === null || guide === void 0 ? void 0 : guide.publishedBy, byLabel: metadataByLabel, modifiedLabel: metadataModifiedLabel, publishedLabel: metadataPublishedLabel }))),
+            children.map(function (child) { return (react_1.default.createElement(StyledComponents, __assign({ key: child.id, id: child.id, branch: "default" }, { embedded: true }))); })),
+        react_1.default.createElement(knowledge_widget_ui_1.Loader, { loading: loading })));
+});
+exports.default = Guide;
+var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    min-width: 0;\n"], ["\n    ", "\n    min-width: 0;\n"])), knowledge_widget_ui_1.loadingOpacity);
+var Body = (0, styled_components_1.default)(knowledge_widget_ui_1.Paragraph)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", "\n    ", "\n  display: block;\n    line-height: 1.6em;\n    ", "\n\n    p {\n        font-weight: 300;\n        font-size: ", ";\n        color: ", ";\n        a {\n            display: inline;\n        }\n    }\n"], ["\n    ", "\n    ", "\n  display: block;\n    line-height: 1.6em;\n    ", "\n\n    p {\n        font-weight: 300;\n        font-size: ", ";\n        color: ", ";\n        a {\n            display: inline;\n        }\n    }\n"])), knowledge_widget_ui_1.genericHtml, function (p) { var _a; return "padding: ".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large, ";"); }, (0, knowledge_widget_ui_1.headingElement)('h1', (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            font-size: ", ";\n            font-weight: normal;\n            line-height: 1.6em;\n            line-height: 1.6em;\n            margin: 0 0 ", ";\n        "], ["\n            font-size: ", ";\n            font-weight: normal;\n            line-height: 1.6em;\n            line-height: 1.6em;\n            margin: 0 0 ", ";\n        "])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.large; }, 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.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; });
+var StyledContactList = (0, styled_components_1.default)(knowledge_widget_adapters_1.ContactList)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    border-top: ", ";\n    ", "\n"], ["\n    border-top: ", ";\n    ", "\n"])), function (p) { return p.theme.border; }, function (p) { return p.backButtonShown === 'true' && "border-bottom: ".concat(p.theme.border, ";"); });
+var StyledDialogList = (0, styled_components_1.default)(knowledge_widget_ui_1.DialogList)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    ", "\n    display: block;\n"], ["\n    ", "\n    display: block;\n"])), function (p) { var _a, _b; return "padding: 0 ".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large, " ").concat((_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.large, ";"); });
+var Top = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    ", "\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-bottom: ", ";\n    border-radius: ", " 0 0;\n    background-color: #ffffff;\n"], ["\n    ", "\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-bottom: ", ";\n    border-radius: ", " 0 0;\n    background-color: #ffffff;\n"])), function (p) { var _a, _b; return "padding: calc(".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal, "*2) ").concat((_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.large, ";"); }, function (p) { return p.theme.border; }, function (p) { return "".concat(p.theme.borderRadius, " ").concat(p.theme.borderRadius); });
+var Content = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    ", "\n    display: block;\n    > a {\n        ", "\n    }\n\n    ", "\n"], ["\n    ", "\n    display: block;\n    > a {\n        ", "\n    }\n\n    ", "\n"])), knowledge_widget_ui_1.contentBox, knowledge_widget_adapters_1.contactLink, function (p) {
+    return p.accordion === 'true' && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n            white-space: normal;\n            box-shadow: none;\n            background-color: #fafafa;\n        "], ["\n            white-space: normal;\n            box-shadow: none;\n            background-color: #fafafa;\n        "])));
+});
+var StyledMetadata = (0, styled_components_1.default)(knowledge_widget_ui_1.Metadata)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: block;\n    ", "\n    font-weight: 300;\n    font-size: ", ";\n    color: ", ";\n    border-top: ", ";\n"], ["\n    display: block;\n    ", "\n    font-weight: 300;\n    font-size: ", ";\n    color: ", ";\n    border-top: ", ";\n"])), function (p) { var _a, _b; return "padding: calc(".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal, "*2) ").concat((_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.large, ";"); }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { return p.theme.border; });
+var StyledComponents = (0, styled_components_1.default)(knowledge_widget_types_grid_1.Component)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    border-top: ", ";\n"], ["\n    border-top: ", ";\n"])), function (p) { return p.theme.border; });
+var BackButton = (0, styled_components_1.default)(knowledge_widget_ui_1.Button)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    ", "\n    color: ", ";\n    text-decoration: underline;\n    font-size: ", ";\n    span {\n        font-weight: 300;\n    }\n    &:focus {\n        ", ";\n    }\n"], ["\n    ", "\n    color: ", ";\n    text-decoration: underline;\n    font-size: ", ";\n    span {\n        font-weight: 300;\n    }\n    &:focus {\n        ", ";\n    }\n"])), function (p) { var _a, _b; return "padding: ".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal, " calc(").concat((_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.normal, " * 2);"); }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) {
+    var _a;
+    return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n                ", "\n                padding: ", ";\n            "], ["\n                ", "\n                padding: ", ";\n            "])), knowledge_widget_ui_1.linkTabStyle, function (p) { var _a, _b; return "calc(".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small, " / 2) ").concat((_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.small); });
+});
+var Caret = styled_components_1.default.svg(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    margin-right: ", ";\n    line {\n        stroke: ", ";\n    }\n"], ["\n    margin-right: ", ";\n    line {\n        stroke: ", ";\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.colors) === null || _a === void 0 ? void 0 : _a.primary; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

package/lib/index.d.ts

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

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 guide_component_1 = __importDefault(require("./guide-component"));
+exports.default = guide_component_1.default;

package/lib/languages.d.ts

@@ -0,0 +1,17 @@
+import { LanguageProperties } from '@telia-ace/knowledge-widget-component-utilities';
+import { PickerTypes } from '@telia-ace/knowledge-widget-core';
+import React from 'react';
+import { GuideProps } from './guide-component';
+export declare type LanguageListItem = {
+    id: string;
+    key: string;
+    label: string;
+};
+declare type Props = Merge<{
+    header?: string;
+    tooltip?: string;
+    guide: GuideProps;
+    picker?: PickerTypes;
+}, LanguageProperties>;
+declare const Languages: React.FC<Props>;
+export default Languages;

package/lib/languages.js

@@ -0,0 +1,110 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var knowledge_widget_core_1 = require("@telia-ace/knowledge-widget-core");
+var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var getCurrentLanguageLabel = function (guide, languages) {
+    var _a;
+    return ((_a = languages.find(function (l) { return l.id === guide.id; })) === null || _a === void 0 ? void 0 : _a.label) || '';
+};
+var Languages = function (_a) {
+    var header = _a.header, tooltip = _a.tooltip, _b = _a.picker, picker = _b === void 0 ? knowledge_widget_core_1.PickerTypes.NONE : _b, guide = _a.guide, other = __rest(_a, ["header", "tooltip", "picker", "guide"]);
+    var _c = (0, knowledge_widget_ui_1.useRouteData)(), name = _c.name, params = _c.params;
+    var items = (0, react_1.useMemo)(function () {
+        return Object.keys(guide.translations || {}).reduce(function (acc, key) {
+            var item = {};
+            item.key = key;
+            item.id = (guide.translations || {})[key];
+            item.label = other["".concat(key, "LanguageLabel")];
+            if (item.id || item.label) {
+                acc.push(item);
+            }
+            return acc;
+        }, []);
+    }, [guide, other]);
+    if (!items.length) {
+        return null;
+    }
+    var currentLanguage = getCurrentLanguageLabel(guide, items);
+    var trigger = (react_1.default.createElement(Trigger, { tabIndex: 0, title: tooltip, "data-has-symbol": "true", "data-has-label": picker === knowledge_widget_core_1.PickerTypes.DROPDOWN && currentLanguage ? 'true' : 'false' },
+        picker === knowledge_widget_core_1.PickerTypes.DROPDOWN && (react_1.default.createElement(react_1.default.Fragment, null,
+            currentLanguage && react_1.default.createElement(LanguageButtonText, null, currentLanguage),
+            react_1.default.createElement(LanguageCaretSymbolBadge, { symbol: { type: 'Svg', content: 'caret-down' }, size: 11 }))),
+        picker === knowledge_widget_core_1.PickerTypes.DRAWER && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(ColoredSymbolBadge, { symbol: { type: 'Svg', content: 'language' }, size: 20 })))));
+    var renderListItem = function (_a) {
+        var label = _a.label, key = _a.key, id = _a.id;
+        return (react_1.default.createElement("li", { key: key, "data-language": key },
+            react_1.default.createElement(LanguageLink, { tabIndex: 0, text: label, routeName: name, selected: guide.id === id, params: (0, widget_utilities_1.createParams)(__assign(__assign({}, params), { connection: undefined, guide: id })) })));
+    };
+    if (picker === knowledge_widget_core_1.PickerTypes.DROPDOWN) {
+        return (react_1.default.createElement(StyledDropdownList, { className: "humany-guide-languages-dropdown-list", header: header, items: items, trigger: trigger, renderItem: renderListItem }));
+    }
+    if (picker === knowledge_widget_core_1.PickerTypes.DRAWER) {
+        return (react_1.default.createElement(knowledge_widget_ui_1.DrawerList, { className: "humany-guide-languages-drawer-list", animation: { type: knowledge_widget_ui_1.DrawerAnimationType.SlideInBottom }, header: header, items: items, trigger: trigger, renderItem: renderListItem }));
+    }
+    return null;
+};
+exports.default = Languages;
+var Trigger = (0, styled_components_1.default)(knowledge_widget_ui_1.StyledListButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    &&& {\n        margin: 0 ", " 0 0;\n    }\n"], ["\n    &&& {\n        margin: 0 ", " 0 0;\n    }\n"])), function (p) { var _a; return "calc(".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small, " * 2)"); });
+var ColoredSymbolBadge = (0, styled_components_1.default)(knowledge_widget_ui_1.SymbolBadge)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    circle {\n        fill: ", ";\n    }\n\n    line,\n    path,\n    rect {\n        stroke: ", ";\n    }\n"], ["\n    circle {\n        fill: ", ";\n    }\n\n    line,\n    path,\n    rect {\n        stroke: ", ";\n    }\n"])), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
+var LanguageButtonText = (0, styled_components_1.default)(knowledge_widget_ui_1.Text)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    margin: 0 ", " 0 0;\n    font-size: ", ";\n"], ["\n    margin: 0 ", " 0 0;\n    font-size: ", ";\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.fonts) === null || _a === void 0 ? void 0 : _a.normal; });
+var LanguageCaretSymbolBadge = (0, styled_components_1.default)(knowledge_widget_ui_1.SymbolBadge)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    align-self: flex-end;\n    stroke-width: 2px;\n    stroke-linecap: round;\n\n    && {\n        width: 0.6em;\n        height: 1em;\n    }\n    line {\n        stroke: ", ";\n    }\n"], ["\n    align-self: flex-end;\n    stroke-width: 2px;\n    stroke-linecap: round;\n\n    && {\n        width: 0.6em;\n        height: 1em;\n    }\n    line {\n        stroke: ", ";\n    }\n"])), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
+var StyledDropdownList = (0, styled_components_1.default)(knowledge_widget_ui_1.DropdownList)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: block;\n    min-height: auto;\n"], ["\n    display: block;\n    min-height: auto;\n"])));
+var LanguageLink = (0, styled_components_1.default)(knowledge_widget_ui_1.TextLink)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    color: ", ";\n    ", "\n\n    &:focus {\n        ", "\n    }\n"], ["\n    color: ", ";\n    ", "\n\n    &:focus {\n        ", "\n    }\n"])), function (p) { var _a, _b; return (p.selected ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary : (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.text); }, function (p) { return p.selected && 'font-weight: bold;'; }, 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                  "])), knowledge_widget_ui_1.paddedBorderTabStyle) : 'outline: none;';
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/lib/toolbar.d.ts

@@ -0,0 +1,8 @@
+import { DispatchAction } from '@telia-ace/knowledge-widget-ui';
+import React from 'react';
+declare type Props = {
+    className?: string;
+    dispatch: DispatchAction;
+};
+declare const Toolbar: React.FC<Props>;
+export default Toolbar;

package/lib/toolbar.js

@@ -0,0 +1,62 @@
+"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_core_1 = require("@telia-ace/knowledge-widget-core");
+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 categories_1 = __importDefault(require("./categories"));
+var functions_1 = __importDefault(require("./functions"));
+var languages_1 = __importDefault(require("./languages"));
+var isEmpty = function (toolbar) {
+    var _a = toolbar.allowCopy, allowCopy = _a === void 0 ? false : _a, _b = toolbar.allowPrint, allowPrint = _b === void 0 ? false : _b, _c = toolbar.guideCategories, guideCategories = _c === void 0 ? false : _c, _d = toolbar.language, language = _d === void 0 ? false : _d, _e = toolbar.showFavoriteToggle, showFavoriteToggle = _e === void 0 ? false : _e, _f = toolbar.picker, picker = _f === void 0 ? knowledge_widget_core_1.PickerTypes.NONE : _f;
+    if ((!allowCopy && !allowPrint && !language && !showFavoriteToggle && !guideCategories) ||
+        picker === knowledge_widget_core_1.PickerTypes.NONE) {
+        return true;
+    }
+    return false;
+};
+var Toolbar = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, dispatch = _a.dispatch;
+    var _c = (0, knowledge_widget_ui_1.useProperties)(), toolbarLanguageHeader = _c.toolbarLanguageHeader, toolbarFunctionsHeader = _c.toolbarFunctionsHeader, toolbarLanguageTooltip = _c.toolbarLanguageTooltip, toolbarFunctionsTooltip = _c.toolbarFunctionsTooltip, toolbarFunctionsCloseButtonAriaLabel = _c.toolbarFunctionsCloseButtonAriaLabel, printActionLabel = _c.printActionLabel, copyActionLabel = _c.copyActionLabel, addFavoriteTooltip = _c.addFavoriteTooltip, removeFavoriteCancelLabel = _c.removeFavoriteCancelLabel, removeFavoriteConfirmLabel = _c.removeFavoriteConfirmLabel, removeFavoriteHeader = _c.removeFavoriteHeader, removeFavoriteLabel = _c.removeFavoriteLabel, removeFavoriteTooltip = _c.removeFavoriteTooltip, guide = _c.guide, toolbar = _c.toolbar, other = __rest(_c, ["toolbarLanguageHeader", "toolbarFunctionsHeader", "toolbarLanguageTooltip", "toolbarFunctionsTooltip", "toolbarFunctionsCloseButtonAriaLabel", "printActionLabel", "copyActionLabel", "addFavoriteTooltip", "removeFavoriteCancelLabel", "removeFavoriteConfirmLabel", "removeFavoriteHeader", "removeFavoriteLabel", "removeFavoriteTooltip", "guide", "toolbar"]);
+    if (!guide || !toolbar || isEmpty(toolbar)) {
+        return null;
+    }
+    var language = toolbar.language, guideCategories = toolbar.guideCategories, allowCopy = toolbar.allowCopy, allowPrint = toolbar.allowPrint, showFavoriteToggle = toolbar.showFavoriteToggle, picker = toolbar.picker;
+    return (react_1.default.createElement(Wrapper, { className: (0, widget_utilities_1.appendClassNames)('humany-guide-toolbar', className) },
+        language && Object.keys(guide.translations || {}).length > 1 && (react_1.default.createElement(languages_1.default, __assign({ guide: guide, header: toolbarLanguageHeader, tooltip: toolbarLanguageTooltip, picker: picker }, other))),
+        guideCategories && react_1.default.createElement(categories_1.default, { guide: guide, toolbar: toolbar }),
+        (allowCopy || allowPrint || showFavoriteToggle) && (react_1.default.createElement(functions_1.default, { guide: guide, header: toolbarFunctionsHeader, tooltip: toolbarFunctionsTooltip, printActionLabel: printActionLabel, copyActionLabel: copyActionLabel, addFavoriteTooltip: addFavoriteTooltip, removeFavoriteCancelLabel: removeFavoriteCancelLabel, removeFavoriteConfirmLabel: removeFavoriteConfirmLabel, removeFavoriteHeader: removeFavoriteHeader, removeFavoriteLabel: removeFavoriteLabel, removeFavoriteTooltip: removeFavoriteTooltip, toolbarFunctionsCloseButtonAriaLabel: toolbarFunctionsCloseButtonAriaLabel, allowCopy: allowCopy, allowPrint: allowPrint, showFavoriteToggle: showFavoriteToggle, picker: picker, dispatch: dispatch }))));
+};
+exports.default = Toolbar;
+var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin: 0 0 0 auto;\n\n    > :not(:last-child) {\n        margin: 0 calc(", " * 2) 0 0;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin: 0 0 0 auto;\n\n    > :not(:last-child) {\n        margin: 0 calc(", " * 2) 0 0;\n    }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
+var templateObject_1;

package/lib/use-feedback.d.ts

@@ -0,0 +1,4 @@
+import { ComponentNodeController } from '@telia-ace/knowledge-widget-core';
+import { Container } from '@webprovisions/platform';
+declare const _default: (container: Container, controller: ComponentNodeController) => void;
+export default _default;

package/lib/use-feedback.js

@@ -0,0 +1,54 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var knowledge_widget_component_utilities_1 = require("@telia-ace/knowledge-widget-component-utilities");
+var knowledge_widget_types_grid_1 = require("@telia-ace/knowledge-widget-types-grid");
+exports.default = (function (container, controller) {
+    controller.actions.create('feedback', function (input) {
+        var type = input === 'negative' ? knowledge_widget_types_grid_1.FeedbackType.Negative : knowledge_widget_types_grid_1.FeedbackType.Positive;
+        var _a = controller.properties(), guide = _a.guide, _b = _a.submitButtonLabel, submitButtonLabel = _b === void 0 ? 'Submit' : _b;
+        if (guide) {
+            var connection_1 = guide.connection, id_1 = guide.id, hasHandover_1 = guide.hasHandover;
+            controller.writeProperties({
+                feedbackGiven: input,
+                loading: hasHandover_1 && type === knowledge_widget_types_grid_1.FeedbackType.Negative,
+            });
+            var events = container.get('$widget').events;
+            events.dispatch('tracking:feedback-given', {
+                guide: guide,
+                categories: guide.categories,
+                feedbackType: type.toLowerCase(),
+            });
+            return container.getAsync('dataClient').then(function (dataClient) {
+                return dataClient.feedback(id_1, connection_1, type).then(function () {
+                    if (hasHandover_1 && type === knowledge_widget_types_grid_1.FeedbackType.Negative) {
+                        return dataClient
+                            .fetch(knowledge_widget_types_grid_1.DataType.ContactMethods, { guideId: id_1 })
+                            .then(function (_a) {
+                            var contactMethods = _a.contactMethods;
+                            return controller.actions.dispatch('handover', {
+                                handoverContactMethods: contactMethods.map(function (cm) { return (__assign(__assign({}, cm), { body: (0, knowledge_widget_component_utilities_1.updateForm)(cm, {
+                                        submit: submitButtonLabel,
+                                    }) })); }),
+                                loading: false,
+                            });
+                        });
+                    }
+                });
+            });
+        }
+    });
+    controller.actions.create('handover', function (input) {
+        return controller.writeProperties(__assign(__assign({}, input), { loading: false }));
+    });
+});

package/lib-esm/answer-version-picker.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { AvailablePerspectives, GuideProps } from './guide-component';
+declare type Props = {
+    className?: string;
+    defaultAnswerVersionLabel: string;
+    availablePerspectives?: AvailablePerspectives[];
+    guide: GuideProps;
+};
+declare const AnswerVersionPicker: React.FC<Props>;
+export default AnswerVersionPicker;