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

package/lib-esm/answer-version-picker.js

@@ -0,0 +1,50 @@
+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);
+};
+import { List, paddedBorderTabStyle, TextLink, useRouteData } from '@telia-ace/knowledge-widget-ui';
+import { appendClassNames } from '@telia-ace/widget-utilities';
+import React, { useMemo } from 'react';
+import styled, { css } from '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 = useRouteData(), name = _d.name, params = _d.params;
+    var perspectives = 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.createElement(StyledList, { className: 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.createElement("li", { key: perspective.connection, "data-version": perspective.connection },
+                React.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 }) })));
+        } }));
+};
+export default AnswerVersionPicker;
+var StyledList = styled(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 = styled(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 && 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) && paddedBorderTabStyle; });
+var templateObject_1, templateObject_2, templateObject_3;

package/lib-esm/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-esm/categories.js

@@ -0,0 +1,52 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 { PickerTypes } from '@telia-ace/knowledge-widget-core';
+import { StyledListButton, SymbolBadge, Text, Tooltip, useContainer, } from '@telia-ace/knowledge-widget-ui';
+import { buildCategoryTrail } from '@telia-ace/widget-utilities';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+var Categories = function (_a) {
+    var _b = _a.guide.categories, categories = _b === void 0 ? [] : _b, _c = _a.toolbar.picker, picker = _c === void 0 ? PickerTypes.NONE : _c;
+    var _d = __read(useState([]), 2), trail = _d[0], setTrail = _d[1];
+    var container = useContainer();
+    useEffect(function () {
+        buildCategoryTrail('index', categories.map(function (id) { return id.toString(); }), container).then(function (result) {
+            setTrail(result);
+        });
+    }, [categories]);
+    if (!trail.length) {
+        return null;
+    }
+    return (React.createElement(Tooltip, { className: "humany-guide-category-tooltip", sticky: picker === PickerTypes.DRAWER, content: React.createElement(React.Fragment, null, trail.map(function (segments) {
+            return (React.createElement(CategoryTrail, { className: "humany-guide-category-trail", key: segments.map(function (c) { return c.id; }).join('.') }, segments.map(function (category, index) {
+                return (React.createElement(Text, { className: "humany-guide-category-trail-segment", key: category.id },
+                    category.symbol && index === 0 && (React.createElement(SymbolBadge, { size: 14, symbol: category.symbol })),
+                    category.title,
+                    index !== segments.length - 1 && (React.createElement(CategorySeparator, { className: "humany-category-separator" }, "/"))));
+            })));
+        })) }, picker === PickerTypes.DRAWER ? (React.createElement(StyledListButton, { className: "humany-guide-category-tooltip-button", "data-has-label": "false", "data-has-symbol": "true" },
+        React.createElement(CategoriesSymbolBadge, { size: 19, symbol: { type: 'Svg', content: 'information' } }))) : (React.createElement(CategoriesSymbolBadge, { size: 19, symbol: { type: 'Svg', content: 'information' } }))));
+};
+export default Categories;
+var CategoryTrail = styled.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 = styled(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 = styled(SymbolBadge)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

package/lib-esm/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-esm/feedback.js

@@ -0,0 +1,29 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { ContactList } from '@telia-ace/knowledge-widget-adapters';
+import { Feedback as FeedbackUi, StyledHeaderText, useDispatch, useProperties, } from '@telia-ace/knowledge-widget-ui';
+import React from 'react';
+import styled from 'styled-components';
+var StyledContactList = styled(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 = styled(FeedbackUi)(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 = styled(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 = useDispatch();
+    var _d = 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.createElement(Recognition, { accordion: accordion ? 'true' : 'false' }, feedbackRecognitionLabel));
+    }
+    return guide.hasHandover && handoverContactMethods.length ? (React.createElement(StyledContactList, { backButtonShown: backButtonShown ? 'true' : 'false', accordion: accordion ? 'true' : 'false', header: contactHeader, contactMethods: handoverContactMethods, dispatch: dispatch })) : (React.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 }));
+};
+export default Feedback;
+var templateObject_1, templateObject_2, templateObject_3;

package/lib-esm/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-esm/functions.js

@@ -0,0 +1,101 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 { PickerTypes } from '@telia-ace/knowledge-widget-core';
+import { DrawerAnimationType, DrawerList, DropdownList, FavoriteButton, StyledListButton, StyledText, SymbolBadge, useFavorites, } from '@telia-ace/knowledge-widget-ui';
+import React, { useCallback, useMemo } from 'react';
+import styled from '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 ? PickerTypes.NONE : _e, guide = _a.guide, dispatch = _a.dispatch;
+    var _f = __read(useFavorites(), 2), favorites = _f[0], actions = _f[1];
+    var handleCopy = useCallback(function (event) {
+        if (guide) {
+            dispatch('copy', guide);
+        }
+    }, [guide, dispatch]);
+    var handlePrint = useCallback(function () {
+        if (guide) {
+            dispatch('print');
+        }
+    }, [guide, dispatch]);
+    var items = useMemo(function () {
+        var id = guide.id, title = guide.title;
+        var items = [];
+        if (allowCopy) {
+            items.push({
+                type: 'copy',
+                child: (React.createElement(StyledListButton, { "data-has-label": copyActionLabel ? 'true' : 'false', "data-has-symbol": "true", title: copyActionLabel, "aria-label": printActionLabel, onClick: handleCopy },
+                    React.createElement(ColoredSymbolBadge, { size: 16, symbol: { type: 'Svg', content: 'copy' } }),
+                    copyActionLabel && React.createElement(StyledText, null, copyActionLabel))),
+            });
+        }
+        if (allowPrint) {
+            items.push({
+                type: 'print',
+                child: (React.createElement(StyledListButton, { "data-has-label": printActionLabel ? 'true' : 'false', "data-has-symbol": "true", title: printActionLabel, "aria-label": printActionLabel, onClick: handlePrint },
+                    React.createElement(ColoredSymbolBadge, { size: 16, symbol: { type: 'Svg', content: 'print' } }),
+                    printActionLabel && React.createElement(StyledText, null, printActionLabel))),
+            });
+        }
+        if (showFavoriteToggle) {
+            var isFavorite = favorites.indexOf(id) > -1;
+            items.push({
+                type: 'favorite',
+                child: (React.createElement(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.createElement(StyledTriggerButton, { tabIndex: 0, title: tooltip, "data-has-symbol": "true", "data-has-label": "false" },
+        React.createElement(ColoredSymbolBadge, { symbol: { type: 'Svg', content: 'options' }, size: 18 })));
+    var renderListItem = function (_a) {
+        var type = _a.type, child = _a.child;
+        return (React.createElement("li", { key: type, "data-function-type": type }, child));
+    };
+    if (picker === PickerTypes.DROPDOWN) {
+        return (React.createElement(StyledDropdownList, { className: "humany-guide-functions-dropdown-list", header: header, items: items, trigger: trigger, renderItem: renderListItem, closeButtonAriaLabel: toolbarFunctionsCloseButtonAriaLabel }));
+    }
+    if (picker === PickerTypes.DRAWER) {
+        return (React.createElement(DrawerList, { className: "humany-guide-functions-drawer-list", animation: { type: DrawerAnimationType.SlideInBottom }, header: header, items: items, trigger: trigger, renderItem: renderListItem, closeButtonAriaLabel: toolbarFunctionsCloseButtonAriaLabel }));
+    }
+    return null;
+};
+export default Functions;
+var ColoredSymbolBadge = styled(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 = styled(DropdownList)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: block;\n    min-height: auto;\n"], ["\n    display: block;\n    min-height: auto;\n"])));
+var StyledTriggerButton = styled(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-esm/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;

package/lib-esm/guide-component.js

@@ -0,0 +1,166 @@
+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 { 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';
+import * as clipboard from 'clipboard-polyfill';
+import useFeedback from './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();
+};
+export var GuideComponent = function (container) {
+    var events = container.get('$widget').events;
+    var _a = __read(createEventSubscriber(events), 2), subscribe = _a[0], unsubscribe = _a[1];
+    return createReactComponent(container, 'guide', import('./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: 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);
+        });
+        useFeedback(container, component);
+        useForm(container, component);
+        useExpand(component);
+    })
+        .then(function () {
+        return 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(DataType.Guide, { connection: connection, guideId: guide });
+                    })
+                        .then(next)
+                        .catch(function (error) {
+                        if (error) {
+                            return next(error);
+                        }
+                    });
+                }
+                return next(input);
+            });
+        });
+    })
+        .then(function () {
+        unsubscribe();
+    });
+};
+export default GuideComponent;

package/lib-esm/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-esm/guide.js

@@ -0,0 +1,89 @@
+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 { contactLink, ContactList } from '@telia-ace/knowledge-widget-adapters';
+import { Component, NotFound } from '@telia-ace/knowledge-widget-types-grid';
+import { Button, contentBox, createEmptyComponent, DialogList, genericHtml, guideRenderInstructions, headingElement, linkTabStyle, Loader, loadingOpacity, Metadata, Paragraph, useChildren, useContainer, useDispatch, useProperties, useRouteData, } from '@telia-ace/knowledge-widget-ui';
+import { appendClassNames } from '@telia-ace/widget-utilities';
+import React, { forwardRef, useCallback } from 'react';
+import styled, { css } from 'styled-components';
+import AnswerVersionPicker from './answer-version-picker';
+import Feedback from './feedback';
+import Toolbar from './toolbar';
+var Guide = forwardRef(function (_a, ref) {
+    var className = _a.className, _b = _a.accordion, accordion = _b === void 0 ? false : _b, other = __rest(_a, ["className", "accordion"]);
+    var _c = 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 = useRouteData().params.connection;
+    var container = useContainer();
+    var children = useChildren();
+    var dispatch = useDispatch();
+    var handleBackButtonClick = useCallback(function () {
+        dispatch('back');
+    }, [dispatch]);
+    if (!guide && !error && !loading) {
+        return createEmptyComponent(container, __assign(__assign({}, other), { className: 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.createElement(NotFound, { showSearch: false });
+    }
+    var showBackButton = !!accordion && !!connection;
+    var language = Object.keys(translations).find(function (key) { return translations[key] === "".concat(id); });
+    return (React.createElement(Wrapper, __assign({ ref: ref }, other, { "data-loading": loading, className: appendClassNames(className, 'humany-guide') }),
+        React.createElement(Content, { "data-loading": loading, accordion: accordion ? 'true' : 'false', className: "humany-guide-content" },
+            ((showAnswerVersions && guide) || !!toolbar) && (React.createElement(Top, { className: "humany-guide-top" },
+                showAnswerVersions && guide && (React.createElement(AnswerVersionPicker, { defaultAnswerVersionLabel: defaultAnswerVersionLabel, availablePerspectives: availablePerspectives, guide: guide })),
+                !!toolbar && React.createElement(Toolbar, { dispatch: dispatch }))),
+            !!(title || body) && (React.createElement(Body, { className: "humany-guide-body", accordion: accordion ? 'true' : 'false', header: (showHeader && title) || undefined, html: body, htmlParseInstruction: guideRenderInstructions(container, dialog), lang: language })),
+            dialog && body.indexOf('h-option-link') === -1 && (React.createElement(StyledDialogList, { dialog: dialog })),
+            React.createElement(StyledContactList, { backButtonShown: showBackButton ? 'true' : 'false', contactMethods: contactMethods, dispatch: dispatch, guideId: guide && guide.id }),
+            !contactMethods.length && (React.createElement(Feedback, { backButtonShown: showBackButton, accordion: accordion })),
+            showBackButton && (React.createElement(BackButton, { "aria-label": backButtonLabel, onClick: handleBackButtonClick },
+                React.createElement(Caret, { width: "7", height: "13", viewBox: "0 0 7 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                    React.createElement("line", { x1: "6.64645", y1: "12.5513", x2: "0.648357", y2: "6.55319" }),
+                    React.createElement("line", { x1: "0.646447", y1: "6.64455", x2: "6.64454", y2: "0.646465" })),
+                backButtonLabel && React.createElement("span", null, backButtonLabel))),
+            metadata && (React.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.createElement(StyledComponents, __assign({ key: child.id, id: child.id, branch: "default" }, { embedded: true }))); })),
+        React.createElement(Loader, { loading: loading })));
+});
+export default Guide;
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    min-width: 0;\n"], ["\n    ", "\n    min-width: 0;\n"])), loadingOpacity);
+var Body = styled(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"])), genericHtml, function (p) { var _a; return "padding: ".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large, ";"); }, headingElement('h1', 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 = styled(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 = styled(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.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.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"])), contentBox, contactLink, function (p) {
+    return p.accordion === 'true' && 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 = styled(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 = styled(Component)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    border-top: ", ";\n"], ["\n    border-top: ", ";\n"])), function (p) { return p.theme.border; });
+var BackButton = styled(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) && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n                ", "\n                padding: ", ";\n            "], ["\n                ", "\n                padding: ", ";\n            "])), 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.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-esm/index.d.ts

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