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

package/lib-esm/index.js

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

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

@@ -0,0 +1,85 @@
+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 { PickerTypes } from '@telia-ace/knowledge-widget-core';
+import { DrawerAnimationType, DrawerList, DropdownList, paddedBorderTabStyle, StyledListButton, SymbolBadge, Text, TextLink, useRouteData, } from '@telia-ace/knowledge-widget-ui';
+import { createParams } from '@telia-ace/widget-utilities';
+import React, { useMemo } from 'react';
+import styled, { css } from '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 ? PickerTypes.NONE : _b, guide = _a.guide, other = __rest(_a, ["header", "tooltip", "picker", "guide"]);
+    var _c = useRouteData(), name = _c.name, params = _c.params;
+    var items = 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.createElement(Trigger, { tabIndex: 0, title: tooltip, "data-has-symbol": "true", "data-has-label": picker === PickerTypes.DROPDOWN && currentLanguage ? 'true' : 'false' },
+        picker === PickerTypes.DROPDOWN && (React.createElement(React.Fragment, null,
+            currentLanguage && React.createElement(LanguageButtonText, null, currentLanguage),
+            React.createElement(LanguageCaretSymbolBadge, { symbol: { type: 'Svg', content: 'caret-down' }, size: 11 }))),
+        picker === PickerTypes.DRAWER && (React.createElement(React.Fragment, null,
+            React.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.createElement("li", { key: key, "data-language": key },
+            React.createElement(LanguageLink, { tabIndex: 0, text: label, routeName: name, selected: guide.id === id, params: createParams(__assign(__assign({}, params), { connection: undefined, guide: id })) })));
+    };
+    if (picker === PickerTypes.DROPDOWN) {
+        return (React.createElement(StyledDropdownList, { className: "humany-guide-languages-dropdown-list", header: header, items: items, trigger: trigger, renderItem: renderListItem }));
+    }
+    if (picker === PickerTypes.DRAWER) {
+        return (React.createElement(DrawerList, { className: "humany-guide-languages-drawer-list", animation: { type: DrawerAnimationType.SlideInBottom }, header: header, items: items, trigger: trigger, renderItem: renderListItem }));
+    }
+    return null;
+};
+export default Languages;
+var Trigger = styled(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 = styled(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 = styled(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 = styled(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 = styled(DropdownList)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: block;\n    min-height: auto;\n"], ["\n    display: block;\n    min-height: auto;\n"])));
+var LanguageLink = styled(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)
+        ? css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                      ", "\n                      text-decoration: underline;\n                  "], ["\n                      ", "\n                      text-decoration: underline;\n                  "])), paddedBorderTabStyle) : 'outline: none;';
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

@@ -0,0 +1,57 @@
+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 { PickerTypes } from '@telia-ace/knowledge-widget-core';
+import { useProperties } from '@telia-ace/knowledge-widget-ui';
+import { appendClassNames } from '@telia-ace/widget-utilities';
+import React from 'react';
+import styled from 'styled-components';
+import Categories from './categories';
+import Functions from './functions';
+import Languages from './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 ? PickerTypes.NONE : _f;
+    if ((!allowCopy && !allowPrint && !language && !showFavoriteToggle && !guideCategories) ||
+        picker === PickerTypes.NONE) {
+        return true;
+    }
+    return false;
+};
+var Toolbar = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, dispatch = _a.dispatch;
+    var _c = 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.createElement(Wrapper, { className: appendClassNames('humany-guide-toolbar', className) },
+        language && Object.keys(guide.translations || {}).length > 1 && (React.createElement(Languages, __assign({ guide: guide, header: toolbarLanguageHeader, tooltip: toolbarLanguageTooltip, picker: picker }, other))),
+        guideCategories && React.createElement(Categories, { guide: guide, toolbar: toolbar }),
+        (allowCopy || allowPrint || showFavoriteToggle) && (React.createElement(Functions, { 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 }))));
+};
+export default Toolbar;
+var Wrapper = styled.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-esm/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-esm/use-feedback.js

@@ -0,0 +1,52 @@
+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 { updateForm } from '@telia-ace/knowledge-widget-component-utilities';
+import { DataType, FeedbackType, } from '@telia-ace/knowledge-widget-types-grid';
+export default (function (container, controller) {
+    controller.actions.create('feedback', function (input) {
+        var type = input === 'negative' ? FeedbackType.Negative : 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 === 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 === FeedbackType.Negative) {
+                        return dataClient
+                            .fetch(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: updateForm(cm, {
+                                        submit: submitButtonLabel,
+                                    }) })); }),
+                                loading: false,
+                            });
+                        });
+                    }
+                });
+            });
+        }
+    });
+    controller.actions.create('handover', function (input) {
+        return controller.writeProperties(__assign(__assign({}, input), { loading: false }));
+    });
+});

package/package.json

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