@telia-ace/widget-ui 1.0.0

package/lib-esm/index.js

@@ -0,0 +1,7 @@
+import { AnchorLink, Button, Checkbox, Confirm, DateFormats, Drawer, DrawerAnimationType, Dropdown, Empty, Grid, Html, Icon, Input, ItemList, ItemTree, Lightbox, Link, List, Modal, NotFound, Overlay, Paragraph, Portal, RouteLink, SymbolBadge, TabStop, Text, TextLink, Timestamp, Tooltip, TransitionComponent, Typography, WidgetLink, } from './components';
+import { ColumnContext, ComponentNodeContext, ComponentPropertyContext, ContainerContext, RoutingContext, } from './contexts';
+import { default as createReactComponent } from './create-react-component';
+import { useAction, useChildren, useColumns, useComponent, useComponentDescriptor, useComponentNode, useComponentPlatform, useContainer, useContext, useDispatch, useEventListener, useEvents, useIsMounted, useKeyPress, useLayout, usePrevious, useProperties, useRenderState, useRouteData, useRouter, useScroll, useSettings, useToggle, useTransitionEnd, useUniqueMenu, useWidgetEvent, } from './hooks';
+import { borderTabStyle, buttonCss, contentBox, invertedHoverButton, itemList, linkTabStyle, list, paddedBorderTabStyle, StyledText, } from './styles';
+import { createEmptyComponent, filterCssProps, filterCssPropsStyle, headingElement, transitionComposer, } from './utils';
+export { AnchorLink, borderTabStyle, Button, buttonCss, Checkbox, ColumnContext, ComponentNodeContext, ComponentPropertyContext, Confirm, ContainerContext, contentBox, createEmptyComponent, createReactComponent, DateFormats, Drawer, DrawerAnimationType, Dropdown, filterCssProps, filterCssPropsStyle, Grid, headingElement, Html, Icon, Input, invertedHoverButton, ItemList, ItemTree, Lightbox, Link, linkTabStyle, List, paddedBorderTabStyle, RoutingContext, SymbolBadge, Text, TextLink, TransitionComponent, transitionComposer, Typography, useChildren, useColumns, useComponent, useComponentDescriptor, useComponentNode, useComponentPlatform, useContainer, useContext, useDispatch, useIsMounted, useLayout, useProperties, useRenderState, useRouteData, useRouter, useScroll, useTransitionEnd, useAction, useEventListener, useEvents, useKeyPress, usePrevious, useSettings, useToggle, useUniqueMenu, useWidgetEvent, Empty, Modal, NotFound, Overlay, Paragraph, Portal, RouteLink, TabStop, Timestamp, Tooltip, WidgetLink, itemList, list, StyledText, };

package/lib-esm/styles.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+declare type InvertedHoverButtonSettings = {
+    primaryColor: string;
+    secondaryColor: string;
+    active?: boolean;
+};
+export declare const contentBox: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+    'data-loading'?: boolean | undefined;
+}, any>>;
+export declare const buttonCss: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export declare const invertedHoverButton: ({ primaryColor, secondaryColor, active, }: InvertedHoverButtonSettings) => import("styled-components").FlattenInterpolation<any>;
+export declare const borderTabStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export declare const linkTabStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export declare const paddedBorderTabStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export declare const CloseButton: 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>;
+export declare const StyledText: import("styled-components").StyledComponent<import("react").FC<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>, any, {}, never>;
+export declare const list: import("styled-components").FlattenInterpolation<any>;
+export declare const itemList: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export {};

package/lib-esm/styles.js

@@ -0,0 +1,26 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css } from 'styled-components';
+import { Button, Text } from './components';
+import { headingElement } from './utils';
+export var contentBox = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    background: #ffffff;\n    border-radius: ", ";\n    border: ", ";\n    box-shadow: ", ";\n    ", "\n"], ["\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    background: #ffffff;\n    border-radius: ", ";\n    border: ", ";\n    box-shadow: ", ";\n    ", "\n"])), function (p) { return p.theme.borderRadius; }, function (p) { return p.theme.border; }, function (p) { return p.theme.boxShadow || 'none'; }, function (p) { return p['data-loading'] && 'min-height: 150px;'; });
+export var buttonCss = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    cursor: pointer;\n    text-align: center;\n    border: none;\n    padding: ", ";\n    border-radius: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 300;\n"], ["\n    cursor: pointer;\n    text-align: center;\n    border: none;\n    padding: ", ";\n    border-radius: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 300;\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { return p.theme.borderRadius; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.type; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; });
+export var invertedHoverButton = function (_a) {
+    var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, active = _a.active;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    ", "\n    border: 1px solid ", ";\n    background-color: ", ";\n\n    color: ", ";\n    transition: background-color 200ms ease-out, color 200ms ease-out;\n\n    span,\n    i,\n    p,\n    a {\n        transition: color 200ms ease-out;\n        color: ", ";\n        font-size: ", ";\n    }\n\n    ", "\n"], ["\n    ", "\n    border: 1px solid ", ";\n    background-color: ", ";\n\n    color: ", ";\n    transition: background-color 200ms ease-out, color 200ms ease-out;\n\n    span,\n    i,\n    p,\n    a {\n        transition: color 200ms ease-out;\n        color: ", ";\n        font-size: ", ";\n    }\n\n    ", "\n"])), buttonCss, active ? secondaryColor : primaryColor, active ? primaryColor : secondaryColor, active ? secondaryColor : primaryColor, active ? secondaryColor : primaryColor, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) {
+        return !p.disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            &:hover {\n                background-color: ", ";\n                color: ", ";\n\n                span,\n                i,\n                p,\n                a {\n                    color: ", ";\n                }\n            }\n\n            &:focus {\n                ", ";\n            }\n        "], ["\n            &:hover {\n                background-color: ", ";\n                color: ", ";\n\n                span,\n                i,\n                p,\n                a {\n                    color: ", ";\n                }\n            }\n\n            &:focus {\n                ", ";\n            }\n        "])), primaryColor, secondaryColor, secondaryColor, function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && borderTabStyle; });
+    });
+};
+export var borderTabStyle = css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    outline: ", ";\n    color: ", ";\n    border-color: transparent;\n"], ["\n    outline: ", ";\n    color: ", ";\n    border-color: transparent;\n"])), function (p) { var _a; return (_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.border; }, function (p) { var _a, _b; return (_b = (_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.colors) === null || _b === void 0 ? void 0 : _b.inactiveText; });
+export var linkTabStyle = css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    ", "\n    text-decoration: underline;\n"], ["\n    ", "\n    text-decoration: underline;\n"])), borderTabStyle);
+export var paddedBorderTabStyle = css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    ", "\n    outline-offset: ", ";\n"], ["\n    ", "\n    outline-offset: ", ";\n"])), borderTabStyle, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
+export var CloseButton = styled(Button)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    position: absolute;\n    top: ", ";\n    right: ", ";\n    z-index: 1;\n\n    svg {\n        stroke: ", ";\n    }\n\n    &:focus {\n        ", ";\n    }\n"], ["\n    position: absolute;\n    top: ", ";\n    right: ", ";\n    z-index: 1;\n\n    svg {\n        stroke: ", ";\n    }\n\n    &:focus {\n        ", ";\n    }\n"])), 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.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) {
+    var _a;
+    return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n                ", "\n                padding: ", ";\n                height: 15px;\n                box-sizing: content-box;\n            "], ["\n                ", "\n                padding: ", ";\n                height: 15px;\n                box-sizing: content-box;\n            "])), borderTabStyle, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
+});
+export var StyledText = styled(Text)(templateObject_10 || (templateObject_10 = __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.normal; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
+export var list = css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    > li {\n        margin: 0 0 ", ";\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        min-width: 0;\n        &:focus {\n            outline-offset: -2px;\n        }\n        > a {\n            text-decoration: none;\n        }\n    }\n    > li:last-child {\n        margin: 0;\n    }\n"], ["\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    > li {\n        margin: 0 0 ", ";\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        min-width: 0;\n        &:focus {\n            outline-offset: -2px;\n        }\n        > a {\n            text-decoration: none;\n        }\n    }\n    > li:last-child {\n        margin: 0;\n    }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
+export var itemList = css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    > div {\n        ", "\n    }\n    > ul {\n        ", "\n    }\n\n    ", "\n"], ["\n    > div {\n        ", "\n    }\n    > ul {\n        ", "\n    }\n\n    ", "\n"])), headingElement('> h1', css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n                margin: 0 0 ", ";\n                font-size: ", ";\n                font-weight: normal;\n                line-height: 1.8em;\n                color: ", ";\n            "], ["\n                margin: 0 0 ", ";\n                font-size: ", ";\n                font-weight: normal;\n                line-height: 1.8em;\n                color: ", ";\n            "])), 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.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; })), list, headingElement('h1', css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n            display: flex;\n            align-items: center;\n\n            i {\n                margin: 7px ", " 0 0;\n                width: 24px;\n                display: inline-block;\n                vertical-align: text-bottom;\n                align-self: flex-start;\n                min-width: 24px;\n                min-height: 24px;\n                text-align: center;\n            }\n        "], ["\n            display: flex;\n            align-items: center;\n\n            i {\n                margin: 7px ", " 0 0;\n                width: 24px;\n                display: inline-block;\n                vertical-align: text-bottom;\n                align-self: flex-start;\n                min-width: 24px;\n                min-height: 24px;\n                text-align: center;\n            }\n        "])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; })));
+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, templateObject_14;

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

@@ -0,0 +1,18 @@
+import { TransitionStatus } from 'react-transition-group/Transition';
+import { FlattenInterpolation } from 'styled-components';
+export declare type CssTransitions = {
+    [key: string]: FlattenInterpolation<any>;
+};
+export declare type TransitionStateSettings = {
+    transitionKeys: string;
+    duration?: number;
+    easing?: string;
+};
+export declare const transitionComposer: {
+    compose: (status: TransitionStatus | undefined, definitions: {
+        enter: TransitionStateSettings;
+        exit: TransitionStateSettings;
+    }) => false | import("styled-components").FlattenSimpleInterpolation | "" | undefined;
+    composeViewTransition: (status: TransitionStatus, type: string, direction?: "forth" | "back" | undefined) => false | import("styled-components").FlattenSimpleInterpolation | "" | undefined;
+    get: (title: string) => any;
+};

package/lib-esm/utils/animations.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;
+};
+import { css } from 'styled-components';
+var inEnteringState = function (status) {
+    return status === 'entering' || status === 'entered';
+};
+var inExitingState = function (status) {
+    return status === 'exiting' || status === 'exited';
+};
+/**
+ * List of basic transition presets
+ */
+var partials = {
+    fade: {
+        in: 'opacity: 1;',
+        out: 'opacity: 0;',
+    },
+    'slide-left': {
+        in: 'transform: translateX(0);',
+        out: 'transform: translateX(-100%);',
+    },
+    'slide-right': {
+        in: 'transform: translateX(0);',
+        out: 'transform: translateX(100%);',
+    },
+    'slide-up': {
+        in: 'transform: translateY(0);',
+        out: 'transform: translateY(100%);',
+    },
+    'slide-down': {
+        in: 'transform: translateY(0);',
+        out: 'transform: translateY(-100%);',
+    },
+    scale: {
+        in: 'transform: scale(1);',
+        out: 'transform: scale(0);',
+    },
+};
+var transformTransitions = ['slide-up', 'slide-down', 'slide-left', 'slide-right', 'scale'];
+export var transitionComposer = {
+    compose: function (status, definitions) {
+        if (status === void 0) { status = 'exited'; }
+        var enter = definitions.enter, exit = definitions.exit;
+        var inKeys = enter.transitionKeys.split(' ');
+        var transitionProperty = transformTransitions.indexOf(inKeys[0]) > -1 ? 'transform' : 'opacity';
+        if (inEnteringState(status)) {
+            if (inKeys && inKeys.length > 0) {
+                return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    ", "\n                    transition: ", " ", "ms ", ";\n                "], ["\n                    ", "\n                    transition: ", " ", "ms ", ";\n                "])), inKeys &&
+                    inKeys.length > 0 &&
+                    inKeys.map(function (key) { return (partials[key] ? partials[key].in : ''); }), transitionProperty, enter.duration, enter.easing);
+            }
+            return '';
+        }
+        var inBase = inKeys &&
+            inKeys.length > 0 && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                ", "\n            "], ["\n                ", "\n            "])), inKeys.map(function (key) { return (partials[key] ? partials[key].out : ''); }));
+        if (inExitingState(status)) {
+            var outKeys = exit.transitionKeys.split(' ');
+            if (outKeys && outKeys.length > 0 && status === 'exiting') {
+                return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    ", ";\n                    ", "\n                    transition: ", " ", "ms ", ";\n                "], ["\n                    ", ";\n                    ", "\n                    transition: ", " ", "ms ", ";\n                "])), inBase, outKeys.map(function (key) { return (partials[key] ? partials[key].out : ''); }), transitionProperty, exit.duration, exit.easing);
+            }
+            /**
+             * When a component is mounted, it starts with the 'exited' state.
+             * So instead of forcing the component that utilizes this function to add the original state
+             * of the to-be-animated property, we apply the out-state values of the entering transitions.
+             */
+            return inBase;
+        }
+    },
+    composeViewTransition: function (status, type, direction) {
+        if (type === 'slide') {
+            return transitionComposer.compose(status, {
+                enter: {
+                    transitionKeys: direction === 'forth' ? 'slide-right' : 'slide-left',
+                    duration: 500,
+                },
+                exit: {
+                    transitionKeys: direction === 'forth' ? 'slide-left' : 'slide-right',
+                    duration: 500,
+                },
+            });
+        }
+        if (type === 'fade') {
+            return transitionComposer.compose(status, {
+                enter: {
+                    transitionKeys: 'fade',
+                    duration: 500,
+                },
+                exit: {
+                    transitionKeys: 'fade',
+                    duration: 500,
+                },
+            });
+        }
+    },
+    get: function (title) {
+        return partials[title];
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,12 @@
+export declare enum Browsers {
+    Opera = "opera",
+    Chrome = "chrome",
+    Firefox = "firefox",
+    Safari = "safari",
+    Edge = "edge",
+    EdgeChromium = "edge-chromium",
+    Blink = "blink",
+    IE = "internet-explorer"
+}
+declare const _default: () => Browsers | void;
+export default _default;

package/lib-esm/utils/browser.js

@@ -0,0 +1,51 @@
+export var Browsers;
+(function (Browsers) {
+    Browsers["Opera"] = "opera";
+    Browsers["Chrome"] = "chrome";
+    Browsers["Firefox"] = "firefox";
+    Browsers["Safari"] = "safari";
+    Browsers["Edge"] = "edge";
+    Browsers["EdgeChromium"] = "edge-chromium";
+    Browsers["Blink"] = "blink";
+    Browsers["IE"] = "internet-explorer";
+})(Browsers || (Browsers = {}));
+export default (function () {
+    var opr = window.opr, opera = window.opera, InstallTrigger = window.InstallTrigger, HTMLElement = window.HTMLElement, safari = window.safari, documentMode = window.documentMode, StyleMedia = window.StyleMedia, chrome = window.chrome, CSS = window.CSS;
+    // Opera 8.0+
+    var isOpera = (!!opr && !!opr.addons) || !!opera || navigator.userAgent.indexOf(' OPR/') >= 0;
+    if (isOpera) {
+        return Browsers.Opera;
+    }
+    // Firefox 1.0+
+    if (InstallTrigger) {
+        return Browsers.Firefox;
+    }
+    // Safari 3.0+ '[object HTMLElementConstructor]'
+    var safariCheck = (function (p) {
+        return p.toString() === '[object SafariRemoteNotification]';
+    })(!safari || (typeof safari !== 'undefined' && safari.pushNotification));
+    if (/constructor/i.test(HTMLElement) || safariCheck) {
+        return Browsers.Safari;
+    }
+    // Internet Explorer 6-11
+    var isIE = /*@cc_on!@*/ false || !!documentMode;
+    if (isIE) {
+        return Browsers.IE;
+    }
+    // Edge 20+
+    if (!isIE && !!StyleMedia) {
+        return Browsers.Edge;
+    }
+    // Chrome 1 - 79
+    var isChrome = !!chrome && (!!chrome.webstore || !!chrome.runtime);
+    if (isChrome) {
+        return Browsers.Chrome;
+    }
+    // Edge (based on chromium) detection
+    if (isChrome && navigator.userAgent.indexOf('Edg') !== -1) {
+        return Browsers.EdgeChromium;
+    }
+    if ((isChrome || isOpera) && !!CSS) {
+        return Browsers.Blink;
+    }
+});

package/lib-esm/utils/convert-to-string-attributes.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (props: any) => object;
+export default _default;

package/lib-esm/utils/convert-to-string-attributes.js

@@ -0,0 +1,21 @@
+import { kebabCase } from '@telia-ace/widget-utilities';
+var types = ['string', 'number'];
+export default (function (props) {
+    return Object.keys(props).reduce(function (result, key) {
+        var value = typeof props[key] === 'undefined' ? '' : props[key];
+        var type = typeof value;
+        if (types.indexOf(type) > -1) {
+            var sub = key.substring(0, 5);
+            if (sub === 'data-' || sub === 'aria-') {
+                result[kebabCase(key)] = value.toString();
+            }
+            else if (key.substring(0, 4) !== 'css-') {
+                result[key] = value.toString();
+            }
+        }
+        else {
+            result[key] = value;
+        }
+        return result;
+    }, {});
+});

package/lib-esm/utils/create-empty-component.d.ts

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

package/lib-esm/utils/create-empty-component.js

@@ -0,0 +1,20 @@
+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 React from 'react';
+import { Empty } from '../components';
+var createEmptyComponent = function (container, props) {
+    if (container.get('seoConfiguration')) {
+        return React.createElement(Empty, __assign({}, props));
+    }
+    return null;
+};
+export default createEmptyComponent;

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 React from 'react';
+import { AnchorLink, WidgetLink } from '../components';
+// 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/filter-css-props.d.ts

@@ -0,0 +1,8 @@
+declare const filterCssProps: (props: any) => {
+    [key: string]: any;
+};
+declare type FilterCssPropsStyle = {
+    [key: string]: any;
+};
+export declare const filterCssPropsStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<FilterCssPropsStyle, any>>;
+export default filterCssProps;

package/lib-esm/utils/filter-css-props.js

@@ -0,0 +1,25 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { css } from 'styled-components';
+var filterCssProps = function (props) {
+    var cssProps = {};
+    Object.keys(props).forEach(function (key) {
+        if (key.indexOf('css-') > -1) {
+            cssProps[key] = props[key];
+        }
+    });
+    return cssProps;
+};
+export var filterCssPropsStyle = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), function (p) {
+    var css = '';
+    Object.keys(filterCssProps(p)).forEach(function (key) {
+        if (key.indexOf('css-') > -1) {
+            css += "".concat(key.replace('css-', ''), ":").concat(p[key], ";");
+        }
+    });
+    return css;
+});
+export default filterCssProps;
+var templateObject_1;

package/lib-esm/utils/generic-hash-link.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type Props = Merge<React.ComponentProps<'a'>, {
+    disabled?: string;
+    to?: string;
+    smooth?: boolean;
+    scroll?: Function;
+}>;
+export declare const genericHashLink: (props: Props, As: any) => JSX.Element;

package/lib-esm/utils/generic-hash-link.js

@@ -0,0 +1,63 @@
+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 React from 'react';
+export var genericHashLink = function (props, As) {
+    var hashFragment = '';
+    var reset = function () {
+        hashFragment = '';
+    };
+    var getElementAndScroll = function (scrollFunction) {
+        var element = document.getElementById(hashFragment);
+        if (element !== null) {
+            scrollFunction(element);
+            reset();
+            return true;
+        }
+        return false;
+    };
+    var handleClick = function (e) {
+        e.preventDefault();
+        reset();
+        if (props.onClick)
+            props.onClick(e);
+        // try to get hash fragment
+        if (typeof props.to === 'string') {
+            hashFragment = props.to.split('#').slice(1).join('#');
+        }
+        // if hash fragment is present
+        if (hashFragment !== '') {
+            getElementAndScroll(props.scroll ||
+                (function (el) {
+                    return props.smooth
+                        ? el.scrollIntoView({ behavior: 'smooth' })
+                        : el.scrollIntoView();
+                }));
+        }
+        return false;
+    };
+    var scroll = props.scroll, smooth = props.smooth, to = props.to, filteredProps = __rest(props, ["scroll", "smooth", "to"]);
+    if (As === 'a') {
+        filteredProps.href = 'javascript:;';
+    }
+    return (React.createElement(As, __assign({}, filteredProps, { onClick: handleClick }), props.children));
+};

package/lib-esm/utils/heading-styles.d.ts

@@ -0,0 +1 @@
+export declare const headingElement: (element: string, style: any) => import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;

package/lib-esm/utils/heading-styles.js

@@ -0,0 +1,44 @@
+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 { css } from 'styled-components';
+export var headingElement = function (element, style) {
+    var defaultTag = element;
+    var prefix = '';
+    if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(element)) {
+        defaultTag = element;
+    }
+    else {
+        var match = element.match(/h1|h2|h3|h4|h5|h6/);
+        if (match === null || match === void 0 ? void 0 : match[0]) {
+            defaultTag = match[0];
+            var _a = __read(element.split(defaultTag), 1), pre = _a[0];
+            prefix = pre;
+        }
+    }
+    var renderTag = function (element, pre, mapping) {
+        if (mapping[element]) {
+            return "".concat(pre).concat(mapping[element]);
+        }
+        return "".concat(pre).concat(element);
+    };
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        ", " {\n            ", "\n        }\n    "], ["\n        ", " {\n            ", "\n        }\n    "])), function (p) { return renderTag(defaultTag, prefix, p.theme.typographyVariantMapping || {}); }, style);
+};
+var templateObject_1;

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

@@ -0,0 +1,12 @@
+export { transitionComposer } from './animations';
+export type { TransitionStateSettings } from './animations';
+export { Browsers, default as browser } from './browser';
+export { default as convertToStringAttributes } from './convert-to-string-attributes';
+export { default as createEmptyComponent } from './create-empty-component';
+export { default as embeddedLinkMapper } from './embedded-link-mapper';
+export { default as filterCssProps, filterCssPropsStyle } from './filter-css-props';
+export { genericHashLink } from './generic-hash-link';
+export type { Props as GenericHashLinkProps } from './generic-hash-link';
+export { headingElement } from './heading-styles';
+export { default as processHtmlString } from './process-html-string';
+export { defaultRenderInstructions } from './render-instructions';

package/lib-esm/utils/index.js

@@ -0,0 +1,10 @@
+export { transitionComposer } from './animations';
+export { Browsers, default as browser } from './browser';
+export { default as convertToStringAttributes } from './convert-to-string-attributes';
+export { default as createEmptyComponent } from './create-empty-component';
+export { default as embeddedLinkMapper } from './embedded-link-mapper';
+export { default as filterCssProps, filterCssPropsStyle } from './filter-css-props';
+export { genericHashLink } from './generic-hash-link';
+export { headingElement } from './heading-styles';
+export { default as processHtmlString } from './process-html-string';
+export { defaultRenderInstructions } from './render-instructions';

package/lib-esm/utils/process-html-string.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Converts a html chunk to managed React nodes.
+ */
+export default function parseHtmlString(html: any, instruction: any): any;

package/lib-esm/utils/process-html-string.js

@@ -0,0 +1,10 @@
+import convert from 'htmr';
+/**
+ * Converts a html chunk to managed React nodes.
+ */
+export default function parseHtmlString(html, instruction) {
+    if (instruction) {
+        return convert(html, instruction);
+    }
+    return convert(html);
+}

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

@@ -0,0 +1,8 @@
+import { Container } from '@webprovisions/platform';
+import React from 'react';
+export declare const defaultRenderInstructions: (container: Container) => {
+    transform: {
+        a: ({ children, ...props }: any) => JSX.Element;
+        img: (attrs: React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLImageElement>, HTMLImageElement>) => JSX.Element;
+    };
+};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Lightbox } from '../components';
+import embeddedLinkMapper from './embedded-link-mapper';
+var imageLightboxRenderer = function (attrs) { return React.createElement(Lightbox, { attrs: attrs }); };
+export var defaultRenderInstructions = function (container) {
+    return {
+        transform: {
+            a: embeddedLinkMapper(container),
+            img: imageLightboxRenderer,
+        },
+    };
+};