@telia-ace/knowledge-widget-components-guide 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/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;

package/lib/answer-version-picker.js

@@ -0,0 +1,75 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 AnswerVersionPicker = function (_a) {
+    var className = _a.className, defaultAnswerVersionLabel = _a.defaultAnswerVersionLabel, _b = _a.guide, selectedPerspective = _b.perspective, guidePerspectives = _b.perspectives, _c = _a.availablePerspectives, availablePerspectives = _c === void 0 ? [] : _c;
+    var _d = (0, knowledge_widget_ui_1.useRouteData)(), name = _d.name, params = _d.params;
+    var perspectives = (0, react_1.useMemo)(function () {
+        if (!guidePerspectives || !availablePerspectives.length) {
+            return [];
+        }
+        return availablePerspectives
+            .filter(function (_a) {
+            var name = _a.name;
+            return !!guidePerspectives[name];
+        })
+            .map(function (_a) {
+            var name = _a.name, title = _a.title;
+            return { label: title, connection: guidePerspectives[name] };
+        });
+    }, [guidePerspectives, availablePerspectives]);
+    return (react_1.default.createElement(StyledList, { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-guide-answer-version-picker'), items: perspectives, renderItem: function (perspective) {
+            var label = perspective.label === 'Default' ? defaultAnswerVersionLabel : perspective.label;
+            var selected = selectedPerspective === perspective.connection;
+            var isRoot = selected && (!params.connection || selectedPerspective === params.connection);
+            return (react_1.default.createElement("li", { key: perspective.connection, "data-version": perspective.connection },
+                react_1.default.createElement(VersionLink, { key: perspective.connection, forwardedAs: isRoot ? 'span' : undefined, text: label, routeName: name, selected: selected, "aria-label": label, title: label, params: __assign(__assign({}, params), { connection: perspective.connection }) })));
+        } }));
+};
+exports.default = AnswerVersionPicker;
+var StyledList = (0, styled_components_1.default)(knowledge_widget_ui_1.List)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    list-style: none;\n    padding: 0;\n    margin: 0;\n\n    li:not(:last-child) {\n        margin: 0 calc(", " * 2) 0 0;\n    }\n\n    li > span {\n        cursor: default;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    list-style: none;\n    padding: 0;\n    margin: 0;\n\n    li:not(:last-child) {\n        margin: 0 calc(", " * 2) 0 0;\n    }\n\n    li > span {\n        cursor: default;\n    }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
+var VersionLink = (0, styled_components_1.default)(knowledge_widget_ui_1.TextLink)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-weight: 300;\n    color: ", ";\n    text-decoration: none;\n\n    ", "\n\n    &:focus {\n        ", ";\n    }\n"], ["\n    font-weight: 300;\n    color: ", ";\n    text-decoration: none;\n\n    ", "\n\n    &:focus {\n        ", ";\n    }\n"])), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) {
+    return p.selected && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            font-weight: bold;\n            text-decoration: underline;\n        "], ["\n            font-weight: bold;\n            text-decoration: underline;\n        "])));
+}, function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && knowledge_widget_ui_1.paddedBorderTabStyle; });
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/categories.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { GuideProps, ToolbarProps } from './guide-component';
+declare type Props = {
+    guide: GuideProps;
+    toolbar: ToolbarProps;
+};
+declare const Categories: React.FC<Props>;
+export default Categories;

package/lib/categories.js

@@ -0,0 +1,80 @@
+"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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var knowledge_widget_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 = __importDefault(require("styled-components"));
+var Categories = function (_a) {
+    var _b = _a.guide.categories, categories = _b === void 0 ? [] : _b, _c = _a.toolbar.picker, picker = _c === void 0 ? knowledge_widget_core_1.PickerTypes.NONE : _c;
+    var _d = __read((0, react_1.useState)([]), 2), trail = _d[0], setTrail = _d[1];
+    var container = (0, knowledge_widget_ui_1.useContainer)();
+    (0, react_1.useEffect)(function () {
+        (0, widget_utilities_1.buildCategoryTrail)('index', categories.map(function (id) { return id.toString(); }), container).then(function (result) {
+            setTrail(result);
+        });
+    }, [categories]);
+    if (!trail.length) {
+        return null;
+    }
+    return (react_1.default.createElement(knowledge_widget_ui_1.Tooltip, { className: "humany-guide-category-tooltip", sticky: picker === knowledge_widget_core_1.PickerTypes.DRAWER, content: react_1.default.createElement(react_1.default.Fragment, null, trail.map(function (segments) {
+            return (react_1.default.createElement(CategoryTrail, { className: "humany-guide-category-trail", key: segments.map(function (c) { return c.id; }).join('.') }, segments.map(function (category, index) {
+                return (react_1.default.createElement(knowledge_widget_ui_1.Text, { className: "humany-guide-category-trail-segment", key: category.id },
+                    category.symbol && index === 0 && (react_1.default.createElement(knowledge_widget_ui_1.SymbolBadge, { size: 14, symbol: category.symbol })),
+                    category.title,
+                    index !== segments.length - 1 && (react_1.default.createElement(CategorySeparator, { className: "humany-category-separator" }, "/"))));
+            })));
+        })) }, picker === knowledge_widget_core_1.PickerTypes.DRAWER ? (react_1.default.createElement(knowledge_widget_ui_1.StyledListButton, { className: "humany-guide-category-tooltip-button", "data-has-label": "false", "data-has-symbol": "true" },
+        react_1.default.createElement(CategoriesSymbolBadge, { size: 19, symbol: { type: 'Svg', content: 'information' } }))) : (react_1.default.createElement(CategoriesSymbolBadge, { size: 19, symbol: { type: 'Svg', content: 'information' } }))));
+};
+exports.default = Categories;
+var CategoryTrail = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    i,\n    svg {\n        margin: 0 ", " 0 0;\n    }\n\n    &:not(:last-child) {\n        margin: 0 0 ", ";\n    }\n"], ["\n    i,\n    svg {\n        margin: 0 ", " 0 0;\n    }\n\n    &:not(:last-child) {\n        margin: 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.sizes) === null || _a === void 0 ? void 0 : _a.small; });
+var CategorySeparator = (0, styled_components_1.default)(knowledge_widget_ui_1.Text)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 0 ", ";\n"], ["\n    margin: 0 ", ";\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
+var CategoriesSymbolBadge = (0, styled_components_1.default)(knowledge_widget_ui_1.SymbolBadge)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/feedback.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type Props = {
+    backButtonShown?: boolean;
+    accordion?: boolean;
+};
+declare const Feedback: React.SFC<Props>;
+export default Feedback;

package/lib/feedback.js

@@ -0,0 +1,34 @@
+"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 knowledge_widget_adapters_1 = require("@telia-ace/knowledge-widget-adapters");
+var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var StyledContactList = (0, styled_components_1.default)(knowledge_widget_adapters_1.ContactList)(templateObject_1 || (templateObject_1 = __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 StyledFeedback = (0, styled_components_1.default)(knowledge_widget_ui_1.Feedback)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), function (p) { var _a, _b; return "padding: ".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 Recognition = (0, styled_components_1.default)(knowledge_widget_ui_1.StyledHeaderText)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", "\n\n    display: block;\n    font-size: ", ";\n    font-weight: bold;\n"], ["\n    ", "\n\n    display: block;\n    font-size: ", ";\n    font-weight: bold;\n"])), function (p) { var _a, _b; return "padding: ".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, ";"); }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; });
+var Feedback = function (_a) {
+    var _b = _a.backButtonShown, backButtonShown = _b === void 0 ? false : _b, _c = _a.accordion, accordion = _c === void 0 ? false : _c;
+    var dispatch = (0, knowledge_widget_ui_1.useDispatch)();
+    var _d = (0, knowledge_widget_ui_1.useProperties)(), _e = _d.loading, loading = _e === void 0 ? false : _e, _f = _d.dialog, dialog = _f === void 0 ? [] : _f, guide = _d.guide, _g = _d.handoverContactMethods, handoverContactMethods = _g === void 0 ? [] : _g, contactHeader = _d.contactHeader, showFeedback = _d.showFeedback, _h = _d.feedbackDirection, feedbackDirection = _h === void 0 ? 'horizontal' : _h, feedbackRecognitionLabel = _d.feedbackRecognitionLabel, feedbackGiven = _d.feedbackGiven, feedbackHeader = _d.feedbackHeader, positiveFeedbackLabel = _d.positiveFeedbackLabel, negativeFeedbackLabel = _d.negativeFeedbackLabel, contactFeedbackLabel = _d.contactFeedbackLabel;
+    if (!showFeedback ||
+        !guide ||
+        !guide.allowFeedback ||
+        (loading && !feedbackGiven) ||
+        dialog.length) {
+        return null;
+    }
+    if (feedbackGiven && feedbackRecognitionLabel && !handoverContactMethods.length) {
+        return (react_1.default.createElement(Recognition, { accordion: accordion ? 'true' : 'false' }, feedbackRecognitionLabel));
+    }
+    return guide.hasHandover && handoverContactMethods.length ? (react_1.default.createElement(StyledContactList, { backButtonShown: backButtonShown ? 'true' : 'false', accordion: accordion ? 'true' : 'false', header: contactHeader, contactMethods: handoverContactMethods, dispatch: dispatch })) : (react_1.default.createElement(StyledFeedback, { accordion: accordion ? 'true' : 'false', positive: positiveFeedbackLabel, negative: guide.hasHandover ? contactFeedbackLabel : negativeFeedbackLabel, header: feedbackHeader, selected: feedbackGiven, onFeedback: function (feedback) { return dispatch('feedback', feedback); }, direction: feedbackDirection }));
+};
+exports.default = Feedback;
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/functions.d.ts

@@ -0,0 +1,29 @@
+import { PickerTypes } from '@telia-ace/knowledge-widget-core';
+import { DispatchAction } from '@telia-ace/knowledge-widget-ui';
+import React from 'react';
+import { GuideProps } from './guide-component';
+export declare type FunctionListItem = {
+    type: string;
+    child: React.ReactNode;
+};
+declare type Props = {
+    header?: string;
+    tooltip?: string;
+    printActionLabel?: string;
+    copyActionLabel?: string;
+    addFavoriteTooltip?: string;
+    removeFavoriteCancelLabel?: string;
+    removeFavoriteConfirmLabel?: string;
+    removeFavoriteHeader?: string;
+    removeFavoriteLabel?: string;
+    removeFavoriteTooltip?: string;
+    toolbarFunctionsCloseButtonAriaLabel?: string;
+    guide: GuideProps;
+    allowCopy?: boolean;
+    allowPrint?: boolean;
+    showFavoriteToggle?: boolean;
+    picker?: PickerTypes;
+    dispatch: DispatchAction;
+};
+declare const Functions: React.FC<Props>;
+export default Functions;

package/lib/functions.js

@@ -0,0 +1,129 @@
+"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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var knowledge_widget_core_1 = require("@telia-ace/knowledge-widget-core");
+var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var Functions = function (_a) {
+    var header = _a.header, tooltip = _a.tooltip, printActionLabel = _a.printActionLabel, copyActionLabel = _a.copyActionLabel, addFavoriteTooltip = _a.addFavoriteTooltip, removeFavoriteCancelLabel = _a.removeFavoriteCancelLabel, removeFavoriteConfirmLabel = _a.removeFavoriteConfirmLabel, removeFavoriteHeader = _a.removeFavoriteHeader, removeFavoriteLabel = _a.removeFavoriteLabel, removeFavoriteTooltip = _a.removeFavoriteTooltip, toolbarFunctionsCloseButtonAriaLabel = _a.toolbarFunctionsCloseButtonAriaLabel, _b = _a.allowCopy, allowCopy = _b === void 0 ? false : _b, _c = _a.allowPrint, allowPrint = _c === void 0 ? false : _c, _d = _a.showFavoriteToggle, showFavoriteToggle = _d === void 0 ? false : _d, _e = _a.picker, picker = _e === void 0 ? knowledge_widget_core_1.PickerTypes.NONE : _e, guide = _a.guide, dispatch = _a.dispatch;
+    var _f = __read((0, knowledge_widget_ui_1.useFavorites)(), 2), favorites = _f[0], actions = _f[1];
+    var handleCopy = (0, react_1.useCallback)(function (event) {
+        if (guide) {
+            dispatch('copy', guide);
+        }
+    }, [guide, dispatch]);
+    var handlePrint = (0, react_1.useCallback)(function () {
+        if (guide) {
+            dispatch('print');
+        }
+    }, [guide, dispatch]);
+    var items = (0, react_1.useMemo)(function () {
+        var id = guide.id, title = guide.title;
+        var items = [];
+        if (allowCopy) {
+            items.push({
+                type: 'copy',
+                child: (react_1.default.createElement(knowledge_widget_ui_1.StyledListButton, { "data-has-label": copyActionLabel ? 'true' : 'false', "data-has-symbol": "true", title: copyActionLabel, "aria-label": printActionLabel, onClick: handleCopy },
+                    react_1.default.createElement(ColoredSymbolBadge, { size: 16, symbol: { type: 'Svg', content: 'copy' } }),
+                    copyActionLabel && react_1.default.createElement(knowledge_widget_ui_1.StyledText, null, copyActionLabel))),
+            });
+        }
+        if (allowPrint) {
+            items.push({
+                type: 'print',
+                child: (react_1.default.createElement(knowledge_widget_ui_1.StyledListButton, { "data-has-label": printActionLabel ? 'true' : 'false', "data-has-symbol": "true", title: printActionLabel, "aria-label": printActionLabel, onClick: handlePrint },
+                    react_1.default.createElement(ColoredSymbolBadge, { size: 16, symbol: { type: 'Svg', content: 'print' } }),
+                    printActionLabel && react_1.default.createElement(knowledge_widget_ui_1.StyledText, null, printActionLabel))),
+            });
+        }
+        if (showFavoriteToggle) {
+            var isFavorite = favorites.indexOf(id) > -1;
+            items.push({
+                type: 'favorite',
+                child: (react_1.default.createElement(knowledge_widget_ui_1.FavoriteButton, { id: id, guideTitle: title, isFavorite: isFavorite, buttonLabel: isFavorite ? removeFavoriteTooltip : addFavoriteTooltip, addFavoriteTooltip: addFavoriteTooltip, removeFavoriteCancelLabel: removeFavoriteCancelLabel, removeFavoriteConfirmLabel: removeFavoriteConfirmLabel, removeFavoriteHeader: removeFavoriteHeader, removeFavoriteLabel: removeFavoriteLabel, removeFavoriteTooltip: removeFavoriteTooltip, actions: actions })),
+            });
+        }
+        return items;
+    }, [
+        favorites,
+        guide,
+        allowCopy,
+        allowPrint,
+        showFavoriteToggle,
+        printActionLabel,
+        copyActionLabel,
+        addFavoriteTooltip,
+        removeFavoriteCancelLabel,
+        removeFavoriteConfirmLabel,
+        removeFavoriteHeader,
+        removeFavoriteLabel,
+        removeFavoriteTooltip,
+    ]);
+    if (!items.length) {
+        return null;
+    }
+    var trigger = (react_1.default.createElement(StyledTriggerButton, { tabIndex: 0, title: tooltip, "data-has-symbol": "true", "data-has-label": "false" },
+        react_1.default.createElement(ColoredSymbolBadge, { symbol: { type: 'Svg', content: 'options' }, size: 18 })));
+    var renderListItem = function (_a) {
+        var type = _a.type, child = _a.child;
+        return (react_1.default.createElement("li", { key: type, "data-function-type": type }, child));
+    };
+    if (picker === knowledge_widget_core_1.PickerTypes.DROPDOWN) {
+        return (react_1.default.createElement(StyledDropdownList, { className: "humany-guide-functions-dropdown-list", header: header, items: items, trigger: trigger, renderItem: renderListItem, closeButtonAriaLabel: toolbarFunctionsCloseButtonAriaLabel }));
+    }
+    if (picker === knowledge_widget_core_1.PickerTypes.DRAWER) {
+        return (react_1.default.createElement(knowledge_widget_ui_1.DrawerList, { className: "humany-guide-functions-drawer-list", animation: { type: knowledge_widget_ui_1.DrawerAnimationType.SlideInBottom }, header: header, items: items, trigger: trigger, renderItem: renderListItem, closeButtonAriaLabel: toolbarFunctionsCloseButtonAriaLabel }));
+    }
+    return null;
+};
+exports.default = Functions;
+var ColoredSymbolBadge = (0, styled_components_1.default)(knowledge_widget_ui_1.SymbolBadge)(templateObject_1 || (templateObject_1 = __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 StyledDropdownList = (0, styled_components_1.default)(knowledge_widget_ui_1.DropdownList)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: block;\n    min-height: auto;\n"], ["\n    display: block;\n    min-height: auto;\n"])));
+var StyledTriggerButton = (0, styled_components_1.default)(knowledge_widget_ui_1.StyledListButton)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    padding: calc(", " * 2) 0;\n"], ["\n    padding: calc(", " * 2) 0;\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/guide-component.d.ts

@@ -0,0 +1,69 @@
+import { ContactMethodType } from '@telia-ace/knowledge-widget-adapters';
+import { FavoriteProperties, LanguageProperties, MetaDataProperties } from '@telia-ace/knowledge-widget-component-utilities';
+import { DialogItem, PickerTypes } from '@telia-ace/knowledge-widget-core';
+import { DataError } from '@telia-ace/knowledge-widget-types-grid';
+import { FormComponentInstanceProperties } from '@telia-ace/widget-forms';
+import { Container } from '@webprovisions/platform';
+export declare type GuideProps = {
+    id: string;
+    title: string;
+    body: string;
+    connection: string;
+    categories: number[];
+    hasHandover: boolean;
+    allowFeedback: boolean;
+    perspectives: {
+        [key: string]: string;
+    };
+    translations?: {
+        [key: string]: string;
+    };
+    modified?: string;
+    published?: string;
+    publishedBy?: string | null;
+    modifiedBy?: string | null;
+    perspective: string | null;
+};
+export declare type AvailablePerspectives = {
+    name: string;
+    title: string;
+};
+export declare type GuideComponentProps = {
+    showHeader?: boolean;
+    showFeedback?: boolean;
+    feedbackDirection?: 'horizontal' | 'vertical';
+    feedbackGiven?: 'positive' | 'negative';
+    contactMethods?: ContactMethodType[];
+    handoverContactMethods?: ContactMethodType[];
+    showAnswerVersions?: boolean;
+    feedbackHeader?: string;
+    contactHeader?: string;
+    toolbarFunctionsHeader?: string;
+    toolbarLanguageHeader?: string;
+    positiveFeedbackLabel?: string;
+    negativeFeedbackLabel?: string;
+    contactFeedbackLabel?: string;
+    feedbackRecognitionLabel?: string;
+    defaultAnswerVersionLabel?: string;
+    backButtonLabel?: string;
+    toolbarFunctionsTooltip?: string;
+    toolbarFunctionsCloseButtonAriaLabel?: string;
+    copyActionLabel?: string;
+    printActionLabel?: string;
+    toolbarLanguageTooltip?: string;
+    toolbar?: ToolbarProps;
+    guide?: GuideProps;
+    dialog?: DialogItem[];
+    error?: DataError;
+    availablePerspectives?: AvailablePerspectives[];
+} & FormComponentInstanceProperties & FavoriteProperties & MetaDataProperties & LanguageProperties;
+export declare type ToolbarProps = {
+    language?: boolean;
+    guideCategories?: boolean;
+    allowCopy?: boolean;
+    allowPrint?: boolean;
+    showFavoriteToggle?: boolean;
+    picker?: PickerTypes;
+};
+export declare const GuideComponent: (container: Container) => Promise<void>;
+export default GuideComponent;