@telia-ace/knowledge-widget-ui 1.0.1

package/lib-esm/hooks/use-favorites.js

@@ -0,0 +1,79 @@
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { useContainer } from '@telia-ace/widget-ui';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+var useFavorites = function () {
+    var container = useContainer();
+    var _a = __read(useState([]), 2), favorites = _a[0], setFavorites = _a[1];
+    var platform = container.get('favorites');
+    useEffect(function () {
+        if (platform) {
+            setFavorites(platform.get());
+            var events = container.get('$widget').events;
+            var unsubscribe = events.subscribe('widget:favorites-updated', function (_, _a) {
+                var updated = _a.updated;
+                setFavorites(__spreadArray([], __read(updated), false));
+            });
+            return unsubscribe;
+        }
+    }, []);
+    var add = function (guideId) {
+        if (!platform) {
+            return Promise.resolve([]);
+        }
+        return platform.add(guideId);
+    };
+    var remove = function (guideId) {
+        if (!platform) {
+            return Promise.resolve([]);
+        }
+        return platform.remove(guideId);
+    };
+    var clear = function () {
+        if (!platform) {
+            return Promise.resolve([]);
+        }
+        return platform.clear();
+    };
+    var toggle = useCallback(function (guideId) {
+        if (favorites.indexOf(guideId) > -1) {
+            return remove(guideId);
+        }
+        else {
+            return add(guideId);
+        }
+    }, [favorites]);
+    return [
+        favorites,
+        useMemo(function () { return ({
+            addFavorite: add,
+            removeFavorite: remove,
+            clearFavorites: clear,
+            toggleFavorite: toggle,
+        }); }, [favorites]),
+    ];
+};
+export default useFavorites;

package/lib-esm/hooks/use-hover.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => [boolean, React.MutableRefObject<HTMLElement | undefined>];
+export default _default;

package/lib-esm/hooks/use-hover.js

@@ -0,0 +1,27 @@
+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 { useEventListener } from '@telia-ace/widget-ui';
+import { useCallback, useRef, useState } from 'react';
+export default (function () {
+    var _a = __read(useState(false), 2), hovering = _a[0], setHovering = _a[1];
+    var elem = useRef();
+    var onMouseEnter = useCallback(function () { return setHovering(true); }, [setHovering]);
+    var onMouseLeave = useCallback(function () { return setHovering(false); }, [setHovering]);
+    useEventListener('mouseenter', onMouseEnter, elem.current);
+    useEventListener('mouseleave', onMouseLeave, elem.current);
+    return [hovering, elem];
+});

package/lib-esm/index.d.ts

@@ -0,0 +1,7 @@
+import { AccordionListItem, DialogLink, DialogList, DrawerList, DropdownActions, DropdownList, FavoriteButton, Feedback, GuideList, Loader, LoaderWrapper, Metadata } from './components';
+import { FavoriteActions, useArrowKeys, useDebounce, useFavorites, useHover } from './hooks';
+import { genericHtml, loadingOpacity, SmallCaret, StyledHeaderText, StyledListButton } from './styles';
+import { guideRenderInstructions } from './utils';
+export * from '@telia-ace/widget-ui';
+export { useFavorites, useDebounce, useArrowKeys, useHover, guideRenderInstructions, Metadata, AccordionListItem, GuideList, DialogLink, DialogList, FavoriteButton, Feedback, Loader, LoaderWrapper, DrawerList, DropdownActions, DropdownList, genericHtml, SmallCaret, StyledHeaderText, StyledListButton, loadingOpacity, };
+export type { FavoriteActions };

package/lib-esm/index.js

@@ -0,0 +1,6 @@
+import { AccordionListItem, DialogLink, DialogList, DrawerList, DropdownActions, DropdownList, FavoriteButton, Feedback, GuideList, Loader, LoaderWrapper, Metadata, } from './components';
+import { useArrowKeys, useDebounce, useFavorites, useHover } from './hooks';
+import { genericHtml, loadingOpacity, SmallCaret, StyledHeaderText, StyledListButton, } from './styles';
+import { guideRenderInstructions } from './utils';
+export * from '@telia-ace/widget-ui';
+export { useFavorites, useDebounce, useArrowKeys, useHover, guideRenderInstructions, Metadata, AccordionListItem, GuideList, DialogLink, DialogList, FavoriteButton, Feedback, Loader, LoaderWrapper, DrawerList, DropdownActions, DropdownList, genericHtml, SmallCaret, StyledHeaderText, StyledListButton, loadingOpacity, };

package/lib-esm/missing-type-exports.d.ts

@@ -0,0 +1,47 @@
+import { DrawerAnimationType, HtmlParseInstruction, ItemRenderer } from '@telia-ace/widget-ui';
+import { ReactElement } from 'react';
+export declare type LinkProps = Merge<React.ComponentProps<'a'>, {
+    disabled?: boolean;
+    routeName?: string;
+    params?: {
+        [key: string]: any;
+    };
+    to?: string;
+}>;
+export declare type DrawerProps = {
+    header?: string | React.ReactNode;
+    className?: string;
+    animation?: {
+        type: DrawerAnimationType;
+        duration?: number;
+    };
+    trigger: React.ReactElement;
+    fullScreen?: boolean;
+    closeButtonAriaLabel?: string;
+    onToggle?: (visible: boolean) => void;
+};
+export declare type ListProps = Merge<React.ComponentProps<'ul'>, {
+    renderItem: ItemRenderer;
+    items: any[];
+    renderLi?: boolean;
+}>;
+export declare type HtmlProps = Merge<React.ComponentProps<'div'>, {
+    html: string;
+    htmlParseInstruction?: HtmlParseInstruction;
+}>;
+export declare type ParagraphProps = Merge<HtmlProps, {
+    text?: string;
+    html?: string;
+    header?: string;
+    symbol?: Symbol;
+}>;
+export declare type ItemListProps = Merge<ListProps, ParagraphProps> & {
+    customHeader?: any;
+    ulProps?: any;
+};
+export declare type DropdownProps = {
+    className?: string;
+    children?: any;
+    trigger: ReactElement;
+    closeButtonAriaLabel?: string;
+};

package/lib-esm/missing-type-exports.js

@@ -0,0 +1,2 @@
+export {};
+// SHOULD BE EXPORTED FROM @telia-ace/widget-ui

package/lib-esm/styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const loadingOpacity: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+    'data-loading': boolean;
+}, any>>;
+export declare const genericHtml: import("styled-components").FlattenInterpolation<any>;
+export declare const SmallCaret: import("styled-components").StyledComponent<import("react").FC<import("@telia-ace/widget-ui").IconProps>, any, {}, never>;
+export declare const StyledHeaderText: import("styled-components").StyledComponent<import("react").FC<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>, any, {}, never>;
+export declare const StyledListButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & import("react").RefAttributes<HTMLButtonElement>>, any, any, never>;

package/lib-esm/styles.js

@@ -0,0 +1,24 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { Button, Icon, linkTabStyle, paddedBorderTabStyle, Text } from '@telia-ace/widget-ui';
+import styled, { css } from 'styled-components';
+import { Wrapper as LoaderWrapper } from './components/loader';
+export var loadingOpacity = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", ";\n    ", "\n    > * {\n        transition: 200ms ease-out opacity;\n        opacity: ", ";\n    }\n    ", " {\n        opacity: ", ";\n    }\n"], ["\n    ", ";\n    ", "\n    > * {\n        transition: 200ms ease-out opacity;\n        opacity: ", ";\n    }\n    ", " {\n        opacity: ", ";\n    }\n"])), function (p) { return p['data-loading'] && 'position: relative;'; }, function (p) { return p['data-loading'] && 'min-height: 150px;'; }, function (p) { return (p['data-loading'] ? '0.5' : '1'); }, LoaderWrapper, function (p) { return (p['data-loading'] ? '1' : '0'); });
+export var genericHtml = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-size: ", ";\n    font-weight: 300;\n    line-height: 1.5em;\n    color: ", ";\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n        word-break: break-word;\n        &:first-child {\n            margin-top: 0;\n        }\n        &:only-child {\n            margin: 0;\n        }\n        &:last-child {\n            margin-bottom: 0;\n        }\n    }\n\n    a {\n        color: ", ";\n        &:focus {\n            ", ";\n        }\n    }\n\n    img {\n        max-width: 100% !important;\n        height: auto !important;\n    }\n\n    p {\n        word-break: break-word;\n        margin: ", " 0;\n    }\n\n    p:first-child {\n        margin: 0 0 ", ";\n    }\n\n    p:last-child {\n        margin: ", " 0 0;\n    }\n\n    p:only-child {\n        margin: 0;\n    }\n"], ["\n    font-size: ", ";\n    font-weight: 300;\n    line-height: 1.5em;\n    color: ", ";\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n        word-break: break-word;\n        &:first-child {\n            margin-top: 0;\n        }\n        &:only-child {\n            margin: 0;\n        }\n        &:last-child {\n            margin-bottom: 0;\n        }\n    }\n\n    a {\n        color: ", ";\n        &:focus {\n            ", ";\n        }\n    }\n\n    img {\n        max-width: 100% !important;\n        height: auto !important;\n    }\n\n    p {\n        word-break: break-word;\n        margin: ", " 0;\n    }\n\n    p:first-child {\n        margin: 0 0 ", ";\n    }\n\n    p:last-child {\n        margin: ", " 0 0;\n    }\n\n    p:only-child {\n        margin: 0;\n    }\n"])), 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) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.link; }, function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && linkTabStyle; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
+export var SmallCaret = styled(Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    && {\n        font-size: ", ";\n    }\n    width: 1.2em;\n"], ["\n    && {\n        font-size: ", ";\n    }\n    width: 1.2em;\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; });
+export var StyledHeaderText = styled(Text)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-size: ", ";\n    font-weight: normal;\n    line-height: 1.2em;\n    color: ", ";\n"], ["\n    font-size: ", ";\n    font-weight: normal;\n    line-height: 1.2em;\n    color: ", ";\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
+export var StyledListButton = styled(Button)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n\n    ", "\n\n    &:focus {\n        ", ";\n    }\n\n    span {\n        flex: 1;\n        font-weight: 300;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n\n    ", "\n\n    &:focus {\n        ", ";\n    }\n\n    span {\n        flex: 1;\n        font-weight: 300;\n    }\n"])), function (p) {
+    var _a;
+    return p['data-has-label'] === 'true' &&
+        p['data-has-symbol'] === 'true' &&
+        "\n        svg, i    {\n            margin: 0 ".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small, " 0 0;\n        }\n    ");
+}, 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\n                svg, i {\n                    ", "\n                }\n            "], ["\n                ", "\n\n                svg, i {\n                    ", "\n                }\n            "])), function (p) { return p['data-has-label'] === 'true' && paddedBorderTabStyle; }, function (p) {
+        return p['data-has-label'] === 'false' &&
+            p['data-has-symbol'] === 'true' && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                            ", "\n                            box-sizing: content-box;\n                        "], ["\n                            ", "\n                            box-sizing: content-box;\n                        "])), paddedBorderTabStyle);
+    });
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/lib-esm/utils/embedded-link-mapper.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Container } from '@webprovisions/platform';
+declare const embeddedLinkMapper: (container: Container) => ({ children, ...props }: any) => JSX.Element;
+export default embeddedLinkMapper;

package/lib-esm/utils/embedded-link-mapper.js

@@ -0,0 +1,57 @@
+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 { AnchorLink, WidgetLink } from '@telia-ace/widget-ui';
+import React from 'react';
+// Determine if href starts with a hashtag
+var isAnchorLink = function (href) {
+    var re = new RegExp('^#', 'i');
+    var match = re.test(href);
+    return match;
+};
+var embeddedLinkMapper = function (container) {
+    return function (_a) {
+        var children = _a.children, props = __rest(_a, ["children"]);
+        var _b = container.get('$widget'), implementation = _b.implementation, currentWidgetName = _b.name;
+        var _c = props.href, href = _c === void 0 ? '' : _c;
+        if (isAnchorLink(href)) {
+            return (React.createElement(AnchorLink, { smooth: true, to: href }, children));
+        }
+        var escapedBindings = implementation.bindings
+            .map(function (binding) { return binding.replace(/\./g, '\\.'); })
+            .join('|');
+        var regexp = new RegExp("^((http[s]?:)?//)?(".concat(escapedBindings, ")/([^\\s]+)"));
+        var expArray = regexp.exec(href);
+        if (expArray && expArray.length >= 4) {
+            var targetWidgetName = expArray[4];
+            var targetWidget = implementation.widgets.get(targetWidgetName);
+            // blob links should not be treated as a widget link
+            if (targetWidget &&
+                !targetWidgetName.startsWith('blob?') &&
+                !targetWidgetName.startsWith(currentWidgetName)) {
+                return React.createElement(WidgetLink, { widgetName: targetWidgetName }, children);
+            }
+        }
+        return React.createElement("a", __assign({}, props), children);
+    };
+};
+export default embeddedLinkMapper;

package/lib-esm/utils/guide-render-instructions.d.ts

@@ -0,0 +1,9 @@
+import { Container } from '@webprovisions/platform';
+import React from 'react';
+declare const guideRenderInstructions: (container: Container, dialog?: any[]) => {
+    transform: {
+        img: (attrs: React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLImageElement>, HTMLImageElement>) => JSX.Element;
+        a: (attr: any) => JSX.Element;
+    };
+};
+export default guideRenderInstructions;

package/lib-esm/utils/guide-render-instructions.js

@@ -0,0 +1,51 @@
+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 { Lightbox } from '@telia-ace/widget-ui';
+import React from 'react';
+import { DialogLink } from '../components';
+import embeddedLinkMapper from './embedded-link-mapper';
+var imageLightboxRenderer = function (attrs) { return React.createElement(Lightbox, { attrs: attrs }); };
+var guideRenderInstructions = function (container, dialog) {
+    if (dialog === void 0) { dialog = []; }
+    return {
+        transform: {
+            img: imageLightboxRenderer,
+            a: function (attr) {
+                var children = attr.children, otherAttr = __rest(attr, ["children"]);
+                var connectionId = otherAttr['data-target'];
+                if (connectionId && dialog.length) {
+                    var item = dialog.find(function (_a) {
+                        var connection = _a.connection;
+                        return connection === connectionId;
+                    });
+                    if (item) {
+                        return React.createElement(DialogLink, __assign({}, item), children);
+                    }
+                }
+                var defaultInstructions = embeddedLinkMapper(container);
+                return defaultInstructions(attr);
+            },
+        },
+    };
+};
+export default guideRenderInstructions;

package/lib-esm/utils/index.d.ts

@@ -0,0 +1 @@
+export { default as guideRenderInstructions } from './guide-render-instructions';

package/lib-esm/utils/index.js

@@ -0,0 +1 @@
+export { default as guideRenderInstructions } from './guide-render-instructions';

package/package.json

@@ -0,0 +1,48 @@
+{
+    "name": "@telia-ace/knowledge-widget-ui",
+    "version": "1.0.1",
+    "description": "UI components used by 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-core": "^1.0.1",
+        "@telia-ace/widget-routing": "^1.0.1",
+        "@telia-ace/widget-ui": "^1.0.1",
+        "@telia-ace/widget-utilities": "^1.0.1",
+        "@webprovisions/platform": "^1.1.2",
+        "htmr": "0.8.8",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "react-router-dom": "^5.0.0",
+        "react-transition-group": "^4.0.1",
+        "styled-components": "^4.3.2"
+    },
+    "devDependencies": {
+        "@types/react": "^17.0.39",
+        "@types/react-dom": "^17.0.13",
+        "@types/react-router-dom": "^5.1.0",
+        "@types/react-transition-group": "^4.2.3",
+        "@types/styled-components": "^5.1.7"
+    },
+    "gitHead": "2df7de1fc7344c709b46911133e9e50f7cab8e5c"
+}