@telia-ace/widget-ui 1.0.0

package/lib/hooks/use-unique-menu.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var use_widget_event_1 = __importDefault(require("./use-widget-event"));
+var useUniqueMenu = function (id, callback) {
+    var dispatch = (0, use_widget_event_1.default)('widget:menu-toggled', function (_, triggeredId) {
+        if (triggeredId !== id) {
+            callback();
+        }
+    });
+    return function () { return dispatch(id); };
+};
+exports.default = useUniqueMenu;

package/lib/hooks/use-widget-event.d.ts

@@ -0,0 +1,3 @@
+import { Container, EventListener } from '@webprovisions/platform';
+declare const useWidgetEvent: (event: string, callback: EventListener, dependencies?: any[], passedContainer?: Container | undefined) => (data: any) => void;
+export default useWidgetEvent;

package/lib/hooks/use-widget-event.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var use_events_1 = __importDefault(require("./use-events"));
+var useWidgetEvent = function (event, callback, dependencies, passedContainer) {
+    if (dependencies === void 0) { dependencies = []; }
+    var events = (0, use_events_1.default)(passedContainer);
+    (0, react_1.useEffect)(function () {
+        if (events) {
+            var unsubscribe_1 = events.subscribe(event, callback);
+            return function () {
+                unsubscribe_1();
+            };
+        }
+    }, [events].concat(dependencies));
+    return function (data) { return events === null || events === void 0 ? void 0 : events.dispatch(event, data); };
+};
+exports.default = useWidgetEvent;

package/lib/index.d.ts

@@ -0,0 +1,9 @@
+import { AnchorLink, Button, ButtonProps, Checkbox, CheckboxProps, Confirm, DateFormats, Drawer, DrawerAnimationType, Dropdown, DropdownProps, Empty, EmptyProps, Grid, GridProps, Html, HtmlIconProps, HtmlParseInstruction, HtmlProps, Icon, IconProps, Input, InputProps, ItemList, ItemListProps, ItemRenderer, ItemTree, ItemTreeProps, Lightbox, LightboxProps, Link, LinkProps, List, ListProps, Modal, ModalProps, NotFound, NotFoundProps, Overlay, OverlayProps, Paragraph, ParagraphProps, Portal, PortalProps, RouteLink, RouteLinkProps, Symbol, SymbolBadge, SymbolBadgeProps, TabStop, TabStopProps, Text, TextLink, TextLinkProps, TextProps, Timestamp, TimestampProps, Tooltip, TooltipProps, TransitionComponent, TransitionComponentProps, Typography, TypographyProps, WidgetLink, WidgetLinkProps } from './components';
+import { ColumnContext, ComponentNodeContext, ComponentPropertyContext, ContainerContext, RoutingContext } from './contexts';
+import { default as createReactComponent } from './create-react-component';
+import { DispatchAction, 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, };
+export type { ButtonProps, CheckboxProps, DropdownProps, EmptyProps, GridProps, HtmlIconProps, HtmlParseInstruction, HtmlProps, IconProps, InputProps, ItemListProps, ItemRenderer, ItemTreeProps, LightboxProps, LinkProps, ListProps, ModalProps, NotFoundProps, OverlayProps, ParagraphProps, PortalProps, RouteLinkProps, Symbol, SymbolBadgeProps, TabStopProps, TextLinkProps, TextProps, TimestampProps, TooltipProps, TransitionComponentProps, TypographyProps, WidgetLinkProps, };
+export type { DispatchAction };

package/lib/index.js

@@ -0,0 +1,92 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLayout = exports.useIsMounted = exports.useDispatch = exports.useContext = exports.useContainer = exports.useComponentPlatform = exports.useComponentNode = exports.useComponentDescriptor = exports.useComponent = exports.useColumns = exports.useChildren = exports.Typography = exports.transitionComposer = exports.TransitionComponent = exports.TextLink = exports.Text = exports.SymbolBadge = exports.RoutingContext = exports.paddedBorderTabStyle = exports.List = exports.linkTabStyle = exports.Link = exports.Lightbox = exports.ItemTree = exports.ItemList = exports.invertedHoverButton = exports.Input = exports.Icon = exports.Html = exports.headingElement = exports.Grid = exports.filterCssPropsStyle = exports.filterCssProps = exports.Dropdown = exports.DrawerAnimationType = exports.Drawer = exports.DateFormats = exports.createReactComponent = exports.createEmptyComponent = exports.contentBox = exports.ContainerContext = exports.Confirm = exports.ComponentPropertyContext = exports.ComponentNodeContext = exports.ColumnContext = exports.Checkbox = exports.buttonCss = exports.Button = exports.borderTabStyle = exports.AnchorLink = void 0;
+exports.StyledText = exports.list = exports.itemList = exports.WidgetLink = exports.Tooltip = exports.Timestamp = exports.TabStop = exports.RouteLink = exports.Portal = exports.Paragraph = exports.Overlay = exports.NotFound = exports.Modal = exports.Empty = exports.useWidgetEvent = exports.useUniqueMenu = exports.useToggle = exports.useSettings = exports.usePrevious = exports.useKeyPress = exports.useEvents = exports.useEventListener = exports.useAction = exports.useTransitionEnd = exports.useScroll = exports.useRouter = exports.useRouteData = exports.useRenderState = exports.useProperties = void 0;
+var components_1 = require("./components");
+Object.defineProperty(exports, "AnchorLink", { enumerable: true, get: function () { return components_1.AnchorLink; } });
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return components_1.Button; } });
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return components_1.Checkbox; } });
+Object.defineProperty(exports, "Confirm", { enumerable: true, get: function () { return components_1.Confirm; } });
+Object.defineProperty(exports, "DateFormats", { enumerable: true, get: function () { return components_1.DateFormats; } });
+Object.defineProperty(exports, "Drawer", { enumerable: true, get: function () { return components_1.Drawer; } });
+Object.defineProperty(exports, "DrawerAnimationType", { enumerable: true, get: function () { return components_1.DrawerAnimationType; } });
+Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return components_1.Dropdown; } });
+Object.defineProperty(exports, "Empty", { enumerable: true, get: function () { return components_1.Empty; } });
+Object.defineProperty(exports, "Grid", { enumerable: true, get: function () { return components_1.Grid; } });
+Object.defineProperty(exports, "Html", { enumerable: true, get: function () { return components_1.Html; } });
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return components_1.Icon; } });
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return components_1.Input; } });
+Object.defineProperty(exports, "ItemList", { enumerable: true, get: function () { return components_1.ItemList; } });
+Object.defineProperty(exports, "ItemTree", { enumerable: true, get: function () { return components_1.ItemTree; } });
+Object.defineProperty(exports, "Lightbox", { enumerable: true, get: function () { return components_1.Lightbox; } });
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return components_1.Link; } });
+Object.defineProperty(exports, "List", { enumerable: true, get: function () { return components_1.List; } });
+Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return components_1.Modal; } });
+Object.defineProperty(exports, "NotFound", { enumerable: true, get: function () { return components_1.NotFound; } });
+Object.defineProperty(exports, "Overlay", { enumerable: true, get: function () { return components_1.Overlay; } });
+Object.defineProperty(exports, "Paragraph", { enumerable: true, get: function () { return components_1.Paragraph; } });
+Object.defineProperty(exports, "Portal", { enumerable: true, get: function () { return components_1.Portal; } });
+Object.defineProperty(exports, "RouteLink", { enumerable: true, get: function () { return components_1.RouteLink; } });
+Object.defineProperty(exports, "SymbolBadge", { enumerable: true, get: function () { return components_1.SymbolBadge; } });
+Object.defineProperty(exports, "TabStop", { enumerable: true, get: function () { return components_1.TabStop; } });
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return components_1.Text; } });
+Object.defineProperty(exports, "TextLink", { enumerable: true, get: function () { return components_1.TextLink; } });
+Object.defineProperty(exports, "Timestamp", { enumerable: true, get: function () { return components_1.Timestamp; } });
+Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return components_1.Tooltip; } });
+Object.defineProperty(exports, "TransitionComponent", { enumerable: true, get: function () { return components_1.TransitionComponent; } });
+Object.defineProperty(exports, "Typography", { enumerable: true, get: function () { return components_1.Typography; } });
+Object.defineProperty(exports, "WidgetLink", { enumerable: true, get: function () { return components_1.WidgetLink; } });
+var contexts_1 = require("./contexts");
+Object.defineProperty(exports, "ColumnContext", { enumerable: true, get: function () { return contexts_1.ColumnContext; } });
+Object.defineProperty(exports, "ComponentNodeContext", { enumerable: true, get: function () { return contexts_1.ComponentNodeContext; } });
+Object.defineProperty(exports, "ComponentPropertyContext", { enumerable: true, get: function () { return contexts_1.ComponentPropertyContext; } });
+Object.defineProperty(exports, "ContainerContext", { enumerable: true, get: function () { return contexts_1.ContainerContext; } });
+Object.defineProperty(exports, "RoutingContext", { enumerable: true, get: function () { return contexts_1.RoutingContext; } });
+var create_react_component_1 = __importDefault(require("./create-react-component"));
+Object.defineProperty(exports, "createReactComponent", { enumerable: true, get: function () { return create_react_component_1.default; } });
+var hooks_1 = require("./hooks");
+Object.defineProperty(exports, "useAction", { enumerable: true, get: function () { return hooks_1.useAction; } });
+Object.defineProperty(exports, "useChildren", { enumerable: true, get: function () { return hooks_1.useChildren; } });
+Object.defineProperty(exports, "useColumns", { enumerable: true, get: function () { return hooks_1.useColumns; } });
+Object.defineProperty(exports, "useComponent", { enumerable: true, get: function () { return hooks_1.useComponent; } });
+Object.defineProperty(exports, "useComponentDescriptor", { enumerable: true, get: function () { return hooks_1.useComponentDescriptor; } });
+Object.defineProperty(exports, "useComponentNode", { enumerable: true, get: function () { return hooks_1.useComponentNode; } });
+Object.defineProperty(exports, "useComponentPlatform", { enumerable: true, get: function () { return hooks_1.useComponentPlatform; } });
+Object.defineProperty(exports, "useContainer", { enumerable: true, get: function () { return hooks_1.useContainer; } });
+Object.defineProperty(exports, "useContext", { enumerable: true, get: function () { return hooks_1.useContext; } });
+Object.defineProperty(exports, "useDispatch", { enumerable: true, get: function () { return hooks_1.useDispatch; } });
+Object.defineProperty(exports, "useEventListener", { enumerable: true, get: function () { return hooks_1.useEventListener; } });
+Object.defineProperty(exports, "useEvents", { enumerable: true, get: function () { return hooks_1.useEvents; } });
+Object.defineProperty(exports, "useIsMounted", { enumerable: true, get: function () { return hooks_1.useIsMounted; } });
+Object.defineProperty(exports, "useKeyPress", { enumerable: true, get: function () { return hooks_1.useKeyPress; } });
+Object.defineProperty(exports, "useLayout", { enumerable: true, get: function () { return hooks_1.useLayout; } });
+Object.defineProperty(exports, "usePrevious", { enumerable: true, get: function () { return hooks_1.usePrevious; } });
+Object.defineProperty(exports, "useProperties", { enumerable: true, get: function () { return hooks_1.useProperties; } });
+Object.defineProperty(exports, "useRenderState", { enumerable: true, get: function () { return hooks_1.useRenderState; } });
+Object.defineProperty(exports, "useRouteData", { enumerable: true, get: function () { return hooks_1.useRouteData; } });
+Object.defineProperty(exports, "useRouter", { enumerable: true, get: function () { return hooks_1.useRouter; } });
+Object.defineProperty(exports, "useScroll", { enumerable: true, get: function () { return hooks_1.useScroll; } });
+Object.defineProperty(exports, "useSettings", { enumerable: true, get: function () { return hooks_1.useSettings; } });
+Object.defineProperty(exports, "useToggle", { enumerable: true, get: function () { return hooks_1.useToggle; } });
+Object.defineProperty(exports, "useTransitionEnd", { enumerable: true, get: function () { return hooks_1.useTransitionEnd; } });
+Object.defineProperty(exports, "useUniqueMenu", { enumerable: true, get: function () { return hooks_1.useUniqueMenu; } });
+Object.defineProperty(exports, "useWidgetEvent", { enumerable: true, get: function () { return hooks_1.useWidgetEvent; } });
+var styles_1 = require("./styles");
+Object.defineProperty(exports, "borderTabStyle", { enumerable: true, get: function () { return styles_1.borderTabStyle; } });
+Object.defineProperty(exports, "buttonCss", { enumerable: true, get: function () { return styles_1.buttonCss; } });
+Object.defineProperty(exports, "contentBox", { enumerable: true, get: function () { return styles_1.contentBox; } });
+Object.defineProperty(exports, "invertedHoverButton", { enumerable: true, get: function () { return styles_1.invertedHoverButton; } });
+Object.defineProperty(exports, "itemList", { enumerable: true, get: function () { return styles_1.itemList; } });
+Object.defineProperty(exports, "linkTabStyle", { enumerable: true, get: function () { return styles_1.linkTabStyle; } });
+Object.defineProperty(exports, "list", { enumerable: true, get: function () { return styles_1.list; } });
+Object.defineProperty(exports, "paddedBorderTabStyle", { enumerable: true, get: function () { return styles_1.paddedBorderTabStyle; } });
+Object.defineProperty(exports, "StyledText", { enumerable: true, get: function () { return styles_1.StyledText; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "createEmptyComponent", { enumerable: true, get: function () { return utils_1.createEmptyComponent; } });
+Object.defineProperty(exports, "filterCssProps", { enumerable: true, get: function () { return utils_1.filterCssProps; } });
+Object.defineProperty(exports, "filterCssPropsStyle", { enumerable: true, get: function () { return utils_1.filterCssPropsStyle; } });
+Object.defineProperty(exports, "headingElement", { enumerable: true, get: function () { return utils_1.headingElement; } });
+Object.defineProperty(exports, "transitionComposer", { enumerable: true, get: function () { return utils_1.transitionComposer; } });

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

@@ -0,0 +1,53 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.itemList = exports.list = exports.StyledText = exports.CloseButton = exports.paddedBorderTabStyle = exports.linkTabStyle = exports.borderTabStyle = exports.invertedHoverButton = exports.buttonCss = exports.contentBox = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var components_1 = require("./components");
+var utils_1 = require("./utils");
+exports.contentBox = (0, styled_components_1.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;'; });
+exports.buttonCss = (0, styled_components_1.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; });
+var invertedHoverButton = function (_a) {
+    var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, active = _a.active;
+    return (0, styled_components_1.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"])), exports.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 && (0, styled_components_1.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) && exports.borderTabStyle; });
+    });
+};
+exports.invertedHoverButton = invertedHoverButton;
+exports.borderTabStyle = (0, styled_components_1.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; });
+exports.linkTabStyle = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    ", "\n    text-decoration: underline;\n"], ["\n    ", "\n    text-decoration: underline;\n"])), exports.borderTabStyle);
+exports.paddedBorderTabStyle = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    ", "\n    outline-offset: ", ";\n"], ["\n    ", "\n    outline-offset: ", ";\n"])), exports.borderTabStyle, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
+exports.CloseButton = (0, styled_components_1.default)(components_1.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) && (0, styled_components_1.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            "])), exports.borderTabStyle, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
+});
+exports.StyledText = (0, styled_components_1.default)(components_1.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; });
+exports.list = (0, styled_components_1.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; });
+exports.itemList = (0, styled_components_1.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"])), (0, utils_1.headingElement)('> h1', (0, styled_components_1.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; })), exports.list, (0, utils_1.headingElement)('h1', (0, styled_components_1.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/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/utils/animations.js

@@ -0,0 +1,104 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transitionComposer = void 0;
+var styled_components_1 = require("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'];
+exports.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 (0, styled_components_1.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 && (0, styled_components_1.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 (0, styled_components_1.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 exports.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 exports.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/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/utils/browser.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Browsers = void 0;
+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 = exports.Browsers || (exports.Browsers = {}));
+exports.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/utils/convert-to-string-attributes.d.ts

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

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var types = ['string', 'number'];
+exports.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[(0, widget_utilities_1.kebabCase)(key)] = value.toString();
+            }
+            else if (key.substring(0, 4) !== 'css-') {
+                result[key] = value.toString();
+            }
+        }
+        else {
+            result[key] = value;
+        }
+        return result;
+    }, {});
+});

package/lib/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/utils/create-empty-component.js

@@ -0,0 +1,25 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var components_1 = require("../components");
+var createEmptyComponent = function (container, props) {
+    if (container.get('seoConfiguration')) {
+        return react_1.default.createElement(components_1.Empty, __assign({}, props));
+    }
+    return null;
+};
+exports.default = createEmptyComponent;

package/lib/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/utils/embedded-link-mapper.js

@@ -0,0 +1,62 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var components_1 = require("../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_1.default.createElement(components_1.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_1.default.createElement(components_1.WidgetLink, { widgetName: targetWidgetName }, children);
+            }
+        }
+        return react_1.default.createElement("a", __assign({}, props), children);
+    };
+};
+exports.default = embeddedLinkMapper;

package/lib/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/utils/filter-css-props.js

@@ -0,0 +1,28 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterCssPropsStyle = void 0;
+var styled_components_1 = require("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;
+};
+exports.filterCssPropsStyle = (0, styled_components_1.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;
+});
+exports.default = filterCssProps;
+var templateObject_1;

package/lib/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;