@telia-ace/widget-components-widget-header 1.0.18 → 1.0.19-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.txt +5 -5
- package/README.md +3 -3
- package/dist/avatar.d.ts +7 -7
- package/dist/back.d.ts +7 -7
- package/dist/close.d.ts +7 -7
- package/dist/index.0ad4edcb.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/minimize.d.ts +7 -7
- package/dist/node.d.ts +7 -7
- package/dist/utils.d.ts +9 -9
- package/dist/widget-header-component.d.ts +28 -28
- package/dist/widget-header.ba71fd3f.js.map +1 -1
- package/dist/widget-header.d.ts +7 -7
- package/package.json +11 -12
package/LICENSE.txt
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
Copyright © 2021, Telia Company AB. All rights reserved.
|
|
2
|
-
|
|
3
|
-
THIS PACKAGE AND CONTAINING SOFTWARE IS PART OF
|
|
4
|
-
THE HUMANY SERVICE. BY USING THIS SOFTWARE YOU
|
|
5
|
-
AGREE TO THE FOLLOWING TERMS AND CONDITIONS:
|
|
1
|
+
Copyright © 2021, Telia Company AB. All rights reserved.
|
|
2
|
+
|
|
3
|
+
THIS PACKAGE AND CONTAINING SOFTWARE IS PART OF
|
|
4
|
+
THE HUMANY SERVICE. BY USING THIS SOFTWARE YOU
|
|
5
|
+
AGREE TO THE FOLLOWING TERMS AND CONDITIONS:
|
|
6
6
|
http://www.humany.com/legal
|
package/README.md
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
# `@telia-ace/widget-components-widget-header`
|
|
2
|
-
|
|
3
|
-
Widget header component for ACE Widgets.
|
|
1
|
+
# `@telia-ace/widget-components-widget-header`
|
|
2
|
+
|
|
3
|
+
Widget header component for ACE Widgets.
|
package/dist/avatar.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ActionNode } from './widget-header-component';
|
|
3
|
-
declare type Props = {
|
|
4
|
-
node: ActionNode;
|
|
5
|
-
};
|
|
6
|
-
declare const Avatar: React.FC<Props>;
|
|
7
|
-
export default Avatar;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ActionNode } from './widget-header-component';
|
|
3
|
+
declare type Props = {
|
|
4
|
+
node: ActionNode;
|
|
5
|
+
};
|
|
6
|
+
declare const Avatar: React.FC<Props>;
|
|
7
|
+
export default Avatar;
|
package/dist/back.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ActionNode } from './widget-header-component';
|
|
3
|
-
declare type Props = {
|
|
4
|
-
node: ActionNode;
|
|
5
|
-
};
|
|
6
|
-
declare const Back: React.FC<Props>;
|
|
7
|
-
export default Back;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ActionNode } from './widget-header-component';
|
|
3
|
+
declare type Props = {
|
|
4
|
+
node: ActionNode;
|
|
5
|
+
};
|
|
6
|
+
declare const Back: React.FC<Props>;
|
|
7
|
+
export default Back;
|
package/dist/close.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ActionNode } from './widget-header-component';
|
|
3
|
-
declare type Props = {
|
|
4
|
-
node: ActionNode;
|
|
5
|
-
};
|
|
6
|
-
declare const Close: React.FC<Props>;
|
|
7
|
-
export default Close;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ActionNode } from './widget-header-component';
|
|
3
|
+
declare type Props = {
|
|
4
|
+
node: ActionNode;
|
|
5
|
+
};
|
|
6
|
+
declare const Close: React.FC<Props>;
|
|
7
|
+
export default Close;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.0ad4edcb.js","sources":["../src/utils.ts","../src/widget-header-component.ts"],"sourcesContent":["import { RoutingService } from '@telia-ace/widget-routing';\
|
|
1
|
+
{"version":3,"file":"index.0ad4edcb.js","sources":["../src/utils.ts","../src/widget-header-component.ts"],"sourcesContent":["import { RoutingService } from '@telia-ace/widget-routing';\nimport { removeNullAndUndefinedValues } from '@telia-ace/widget-utilities';\nimport { Container } from '@webprovisions/platform';\nimport { ActionNode, Symbol } from './widget-header-component';\n\nexport const calculateMargin = (\n leftNodes: ActionNode[],\n rightNodes: ActionNode[],\n textAlign: string\n) => {\n if (textAlign !== 'center') {\n return {};\n }\n\n const calculate = (nodes: ActionNode[]) => {\n return nodes.reduce<number>((acc, node) => {\n const [padding] = node.padding.split('px');\n const [size] = node.size.split('px');\n return acc + (+size + +padding * 2);\n }, 0);\n };\n const leftSize = calculate(leftNodes);\n const rightSize = calculate(rightNodes);\n\n const total = leftSize - rightSize;\n\n if (total === 0) {\n return {};\n }\n\n const direction = leftSize > rightSize ? 'right' : 'left';\n return {\n [direction]: `${Math.abs(total)}px`,\n };\n};\n\nexport const createNodes = (actions: { [key: string]: ActionNode }) => {\n return Object.keys(actions).reduce<[ActionNode[], ActionNode[]]>(\n (acc, key) => {\n const node = actions[key];\n if (!node) {\n return acc;\n }\n const [left, right] = acc;\n const arr = node.position === 'left' ? left : right;\n\n let symbol = actions[key].symbol;\n if (symbol && typeof symbol === 'string') {\n symbol = {\n type: 'Uri',\n content: symbol,\n };\n }\n\n arr.push({\n symbol:\n node.symbol && typeof node.symbol === 'string'\n ? { type: 'Uri', content: node.symbol }\n : (node.symbol as Symbol),\n type: key,\n padding: node.padding || '10px',\n label: node.label,\n size: node.size || '64px',\n tooltip: node.tooltip,\n order: node.order || 0,\n show: node.show,\n });\n\n return acc;\n },\n [[], []]\n );\n};\n\nexport const isOnInitialRoute = (container: Container) =>\n container.getAsync('router').then((router: RoutingService) => {\n if (!router) {\n return true;\n }\n const initialRoute = router.getInitialRoute();\n const { name, params } = router.getRouteData();\n\n removeNullAndUndefinedValues(params);\n\n if (initialRoute?.name !== name || Object.keys(params).length > 0) {\n return false;\n }\n\n return true;\n });\n","import { createEventSubscriber } from '@telia-ace/widget-core';\nimport { RoutingService } from '@telia-ace/widget-routing';\nimport { createReactComponent } from '@telia-ace/widget-ui';\nimport { Container } from '@webprovisions/platform';\nimport { isOnInitialRoute } from './utils';\n\nexport type Symbol = {\n type: 'Uri' | 'Svg' | 'FontAwesome' | 'Text' | string;\n content: string;\n};\n\nexport type ActionNode = {\n type: string;\n label?: string;\n position?: 'right' | 'left';\n symbol?: Symbol;\n size: string;\n padding: string;\n tooltip?: string;\n order?: number;\n show?: boolean;\n};\n\nexport type WidgetHeaderComponentProps = {\n header: string;\n tagline: string;\n textAlign?: string;\n actions?: { [key: string]: ActionNode };\n tooltip?: string;\n route?: string;\n};\n\nconst WidgetHeaderComponent = (container: Container) => {\n return createReactComponent(\n container,\n 'widget-header',\n import('./widget-header'),\n (component) => {\n const { events } = container.get('$widget');\n const [subscribe, unsubscribe] = createEventSubscriber(events);\n\n const { actions = {} } = component.properties<WidgetHeaderComponentProps>();\n\n component.actions.create('close', (data, options) => {\n if (options.preventDefault) {\n return;\n }\n\n const widget = container.get('$widget');\n return widget.invoke('close');\n });\n component.actions.create('back', (data, options) => {\n if (options.preventDefault) {\n return;\n }\n\n return container.getAsync('router').then((router: RoutingService) => {\n router.goBack();\n });\n });\n\n component.properties((properties) => {\n const { actions = {} } = properties;\n\n if (!actions.back) {\n return;\n }\n\n Object.keys(actions).forEach((key) => {\n const node = actions[key];\n if (key === 'back') {\n node.show = properties.showBack;\n }\n });\n\n return { actions };\n });\n\n component.actions.create('show-back', (showBack) => {\n component.writeProperties({ showBack });\n });\n\n if (actions.back) {\n const showBack = () =>\n isOnInitialRoute(container).then((onInitialRoute) =>\n component.actions.dispatch('show-back', !onInitialRoute)\n );\n\n showBack();\n subscribe('router:changed', showBack);\n }\n\n component.actions.create('minimize', (data, options) => {\n if (options.preventDefault) {\n return;\n }\n\n const widget = container.get('$widget');\n return widget.invoke('hide');\n });\n\n return () => {\n unsubscribe();\n };\n }\n );\n};\n\nexport default WidgetHeaderComponent;\n"],"names":["calculateMargin","leftNodes","rightNodes","textAlign","calculate","nodes","acc","node","padding","size","leftSize","rightSize","total","createNodes","actions","key","left","right","arr","isOnInitialRoute","container","router","initialRoute","name","params","removeNullAndUndefinedValues","WidgetHeaderComponent","createReactComponent","component","events","subscribe","unsubscribe","createEventSubscriber","data","options","properties","showBack","onInitialRoute"],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import WidgetHeaderComponent from './widget-header-component';
|
|
2
|
-
export default WidgetHeaderComponent;
|
|
1
|
+
import WidgetHeaderComponent from './widget-header-component';
|
|
2
|
+
export default WidgetHeaderComponent;
|
package/dist/minimize.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ActionNode } from './widget-header-component';
|
|
3
|
-
declare type Props = {
|
|
4
|
-
node: ActionNode;
|
|
5
|
-
};
|
|
6
|
-
declare const Minimize: React.FC<Props>;
|
|
7
|
-
export default Minimize;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ActionNode } from './widget-header-component';
|
|
3
|
+
declare type Props = {
|
|
4
|
+
node: ActionNode;
|
|
5
|
+
};
|
|
6
|
+
declare const Minimize: React.FC<Props>;
|
|
7
|
+
export default Minimize;
|
package/dist/node.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ActionNode } from './widget-header-component';
|
|
3
|
-
declare type Props = Merge<ActionNode, {
|
|
4
|
-
className?: string;
|
|
5
|
-
}>;
|
|
6
|
-
declare const Node: React.FC<Props>;
|
|
7
|
-
export default Node;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ActionNode } from './widget-header-component';
|
|
3
|
+
declare type Props = Merge<ActionNode, {
|
|
4
|
+
className?: string;
|
|
5
|
+
}>;
|
|
6
|
+
declare const Node: React.FC<Props>;
|
|
7
|
+
export default Node;
|
package/dist/utils.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { Container } from '@webprovisions/platform';
|
|
2
|
-
import { ActionNode } from './widget-header-component';
|
|
3
|
-
export declare const calculateMargin: (leftNodes: ActionNode[], rightNodes: ActionNode[], textAlign: string) => {
|
|
4
|
-
[x: string]: string;
|
|
5
|
-
};
|
|
6
|
-
export declare const createNodes: (actions: {
|
|
7
|
-
[key: string]: ActionNode;
|
|
8
|
-
}) => [ActionNode[], ActionNode[]];
|
|
9
|
-
export declare const isOnInitialRoute: (container: Container) => Promise<boolean>;
|
|
1
|
+
import { Container } from '@webprovisions/platform';
|
|
2
|
+
import { ActionNode } from './widget-header-component';
|
|
3
|
+
export declare const calculateMargin: (leftNodes: ActionNode[], rightNodes: ActionNode[], textAlign: string) => {
|
|
4
|
+
[x: string]: string;
|
|
5
|
+
};
|
|
6
|
+
export declare const createNodes: (actions: {
|
|
7
|
+
[key: string]: ActionNode;
|
|
8
|
+
}) => [ActionNode[], ActionNode[]];
|
|
9
|
+
export declare const isOnInitialRoute: (container: Container) => Promise<boolean>;
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
import { Container } from '@webprovisions/platform';
|
|
2
|
-
export declare type Symbol = {
|
|
3
|
-
type: 'Uri' | 'Svg' | 'FontAwesome' | 'Text' | string;
|
|
4
|
-
content: string;
|
|
5
|
-
};
|
|
6
|
-
export declare type ActionNode = {
|
|
7
|
-
type: string;
|
|
8
|
-
label?: string;
|
|
9
|
-
position?: 'right' | 'left';
|
|
10
|
-
symbol?: Symbol;
|
|
11
|
-
size: string;
|
|
12
|
-
padding: string;
|
|
13
|
-
tooltip?: string;
|
|
14
|
-
order?: number;
|
|
15
|
-
show?: boolean;
|
|
16
|
-
};
|
|
17
|
-
export declare type WidgetHeaderComponentProps = {
|
|
18
|
-
header: string;
|
|
19
|
-
tagline: string;
|
|
20
|
-
textAlign?: string;
|
|
21
|
-
actions?: {
|
|
22
|
-
[key: string]: ActionNode;
|
|
23
|
-
};
|
|
24
|
-
tooltip?: string;
|
|
25
|
-
route?: string;
|
|
26
|
-
};
|
|
27
|
-
declare const WidgetHeaderComponent: (container: Container) => Promise<void>;
|
|
28
|
-
export default WidgetHeaderComponent;
|
|
1
|
+
import { Container } from '@webprovisions/platform';
|
|
2
|
+
export declare type Symbol = {
|
|
3
|
+
type: 'Uri' | 'Svg' | 'FontAwesome' | 'Text' | string;
|
|
4
|
+
content: string;
|
|
5
|
+
};
|
|
6
|
+
export declare type ActionNode = {
|
|
7
|
+
type: string;
|
|
8
|
+
label?: string;
|
|
9
|
+
position?: 'right' | 'left';
|
|
10
|
+
symbol?: Symbol;
|
|
11
|
+
size: string;
|
|
12
|
+
padding: string;
|
|
13
|
+
tooltip?: string;
|
|
14
|
+
order?: number;
|
|
15
|
+
show?: boolean;
|
|
16
|
+
};
|
|
17
|
+
export declare type WidgetHeaderComponentProps = {
|
|
18
|
+
header: string;
|
|
19
|
+
tagline: string;
|
|
20
|
+
textAlign?: string;
|
|
21
|
+
actions?: {
|
|
22
|
+
[key: string]: ActionNode;
|
|
23
|
+
};
|
|
24
|
+
tooltip?: string;
|
|
25
|
+
route?: string;
|
|
26
|
+
};
|
|
27
|
+
declare const WidgetHeaderComponent: (container: Container) => Promise<void>;
|
|
28
|
+
export default WidgetHeaderComponent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"widget-header.ba71fd3f.js","sources":["../src/avatar.tsx","../src/back.tsx","../src/close.tsx","../src/minimize.tsx","../src/node.tsx","../src/widget-header.tsx"],"sourcesContent":["import { SymbolBadge } from '@telia-ace/widget-ui';\r\nimport React from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { ActionNode } from './widget-header-component';\r\n\r\ntype Props = { node: ActionNode };\r\nconst Avatar: React.FC<Props> = ({ node }) => {\r\n if (!node.symbol) {\r\n return null;\r\n }\r\n\r\n let size;\r\n const isSvg = node.symbol.type === 'Svg';\r\n if (node.symbol.type === 'Svg') {\r\n const sizeNumber = parseInt(node.size, 10);\r\n\r\n if (!isNaN(sizeNumber)) {\r\n size = sizeNumber;\r\n }\r\n }\r\n\r\n return <Wrapper symbol={node.symbol} svg={isSvg} size={size} backgroundSize=\"cover\" />;\r\n};\r\n\r\nexport default Avatar;\r\n\r\nconst Wrapper = styled(({ svg, ...other }) => <SymbolBadge {...other} />)`\r\n color: ${(p) => p.theme.colors?.text};\r\n ${(p) =>\r\n !p.svg &&\r\n css`\r\n border-radius: 50%;\r\n overflow: hidden;\r\n `}\r\n`;\r\n","import { SymbolBadge } from '@telia-ace/widget-ui';\r\nimport React from 'react';\r\nimport { ActionNode } from './widget-header-component';\r\n\r\ntype Props = {\r\n node: ActionNode;\r\n};\r\nconst Back: React.FC<Props> = ({ node }) => {\r\n const symbol = node.symbol || { type: 'Svg', content: 'back' };\r\n return <SymbolBadge size={20} symbol={symbol} />;\r\n};\r\n\r\nexport default Back;\r\n","import { SymbolBadge } from '@telia-ace/widget-ui';\r\nimport React from 'react';\r\nimport { ActionNode } from './widget-header-component';\r\n\r\ntype Props = {\r\n node: ActionNode;\r\n};\r\nconst Close: React.FC<Props> = ({ node }) => {\r\n const symbol = node.symbol || { type: 'Svg', content: 'close' };\r\n const size = parseInt(node?.size, 10) || 14;\r\n return <SymbolBadge size={size} symbol={symbol} />;\r\n};\r\n\r\nexport default Close;\r\n","import { SymbolBadge } from '@telia-ace/widget-ui';\r\nimport React from 'react';\r\nimport { ActionNode } from './widget-header-component';\r\n\r\ntype Props = {\r\n node: ActionNode;\r\n};\r\nconst Minimize: React.FC<Props> = ({ node }) => {\r\n const symbol = node.symbol || { type: 'Svg', content: 'minimize' };\r\n const size = parseInt(node?.size, 10) || 20;\r\n return <SymbolBadge size={size} symbol={symbol} />;\r\n};\r\n\r\nexport default Minimize;\r\n","import { borderTabStyle, TransitionComponent, useDispatch } from '@telia-ace/widget-ui';\r\nimport React from 'react';\r\nimport styled from 'styled-components';\r\nimport Avatar from './avatar';\r\nimport Back from './back';\r\nimport Close from './close';\r\nimport Minimize from './minimize';\r\nimport { ActionNode } from './widget-header-component';\r\n\r\ntype Props = Merge<\r\n ActionNode,\r\n {\r\n className?: string;\r\n }\r\n>;\r\n\r\nconst Node: React.FC<Props> = ({ className = '', ...node }) => {\r\n const dispatch = useDispatch();\r\n\r\n const { size, padding, type, tooltip, show = true } = node;\r\n\r\n if (type === 'back') {\r\n return (\r\n <NodeWrapper size={size || '64px'} padding={padding || '10px'}>\r\n <TransitionComponent\r\n in={show}\r\n timeout={300}\r\n transitions={{\r\n enter: {\r\n type: 'scale',\r\n easing: 'cubic-bezier(.08,.84,.74,1.84)',\r\n },\r\n exit: {\r\n type: 'scale',\r\n easing: 'ease-out',\r\n },\r\n }}\r\n >\r\n {(state: any, css: any) => (\r\n <ActionButton\r\n title={tooltip}\r\n aria-label={tooltip}\r\n animationCss={css}\r\n onClick={() => {\r\n dispatch('back');\r\n }}\r\n >\r\n <Back node={node} />\r\n </ActionButton>\r\n )}\r\n </TransitionComponent>\r\n </NodeWrapper>\r\n );\r\n }\r\n\r\n if (!show) {\r\n return null;\r\n }\r\n\r\n return (\r\n <NodeWrapper\r\n size={size || '64px'}\r\n padding={padding || '10px'}\r\n squareRatio={type === 'avatar'}\r\n >\r\n {type === 'avatar' && <Avatar node={node} />}\r\n {type === 'close' && (\r\n <ActionButton\r\n title={tooltip}\r\n aria-label={tooltip}\r\n onClick={() => {\r\n dispatch('close');\r\n }}\r\n >\r\n <Close node={node} />\r\n </ActionButton>\r\n )}\r\n {type === 'minimize' && (\r\n <ActionButton\r\n title={tooltip}\r\n aria-label={tooltip}\r\n onClick={() => {\r\n dispatch('minimize');\r\n }}\r\n >\r\n <Minimize node={node} />\r\n </ActionButton>\r\n )}\r\n </NodeWrapper>\r\n );\r\n};\r\n\r\nexport default Node;\r\n\r\nconst NodeWrapper = styled.div<{ size: string; padding: string; squareRatio?: boolean }>`\r\n flex: 1;\r\n max-width: ${(p) => p.size};\r\n ${(p) => p.squareRatio && `max-height: ${p.size};`}\r\n text-align: center;\r\n padding: 0 ${(p) => p.padding};\r\n && {\r\n box-sizing: content-box;\r\n }\r\n\r\n svg {\r\n vertical-align: middle;\r\n }\r\n\r\n i {\r\n color: ${(p) => p.theme.colors?.text};\r\n font-size: ${(p) => p.size};\r\n min-width: 1em;\r\n min-height: 1em;\r\n display: inline-block;\r\n }\r\n`;\r\nconst ActionButton = styled.button<any>`\r\n ${(p) => !!p.animationCss && p.animationCss};\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 0;\r\n &:focus-visible {\r\n ${borderTabStyle};\r\n border-color: ${(p) => p.theme.accessibility?.colors?.inactiveText};\r\n }\r\n`;\r\n","import {\r\n headingElement,\r\n Link,\r\n linkTabStyle,\r\n Typography,\r\n useProperties,\r\n} from '@telia-ace/widget-ui';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport Node from './node';\r\nimport { calculateMargin, createNodes } from './utils';\r\nimport { WidgetHeaderComponentProps } from './widget-header-component';\r\n\r\ntype Props = {\r\n className: string;\r\n role?: string;\r\n};\r\n\r\nconst WidgetHeader: React.FC<Props> = ({ className, ...other }) => {\r\n const {\r\n header,\r\n tagline,\r\n route,\r\n tooltip = '',\r\n actions = {},\r\n textAlign = 'center',\r\n } = useProperties<WidgetHeaderComponentProps>();\r\n\r\n const [leftNodes, rightNodes] = createNodes(actions);\r\n leftNodes.sort((a, b) => (a.order || 0) - (b.order || 0));\r\n rightNodes.sort((a, b) => (a.order || 0) - (b.order || 0));\r\n return (\r\n <Wrapper {...other} className={appendClassNames(className, 'humany-widget-header')}>\r\n {leftNodes.map((node, key) => (\r\n <Node key={`${node.type}+_${key}`} {...node} />\r\n ))}\r\n\r\n <MainNode\r\n textAlign={textAlign}\r\n margin={calculateMargin(leftNodes, rightNodes, textAlign)}\r\n >\r\n {route ? (\r\n <StyledLink routeName={route} title={tooltip} aria-label={tooltip}>\r\n <Typography variant=\"h1\">{header}</Typography>\r\n </StyledLink>\r\n ) : (\r\n <Typography variant=\"h1\">{header}</Typography>\r\n )}\r\n {tagline && <Tagline>{tagline}</Tagline>}\r\n </MainNode>\r\n\r\n {rightNodes.map((node, key) => (\r\n <Node key={`${node.type}+_${key}`} {...node} />\r\n ))}\r\n </Wrapper>\r\n );\r\n};\r\n\r\nexport default WidgetHeader;\r\n\r\nconst Wrapper = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n ${headingElement(\r\n 'h1',\r\n css`\r\n font-size: ${(p) => p.theme.fonts?.huge};\r\n margin: 0;\r\n font-weight: 300;\r\n color: ${(p) => p.theme.colors?.text};\r\n `\r\n )}\r\n\r\n p {\r\n color: ${(p) => p.theme.colors?.text};\r\n margin: 0;\r\n }\r\n\r\n svg {\r\n line,\r\n path,\r\n circle {\r\n stroke: ${(p) => p.theme.colors?.text};\r\n }\r\n }\r\n`;\r\n\r\nconst Tagline = styled.p`\r\n font-size: ${(p) => p.theme.fonts?.normal};\r\n font-weight: 300;\r\n`;\r\n\r\nconst MainNode = styled.div<{\r\n textAlign: string;\r\n margin: { left?: string; right?: string };\r\n}>`\r\n flex: 1;\r\n text-align: ${(p) => p.textAlign};\r\n\r\n margin-right: ${(p) => p.margin.right || 0};\r\n margin-left: ${(p) => p.margin.left || 0};\r\n`;\r\n\r\nconst StyledLink = styled(Link)<any>`\r\n text-decoration: none;\r\n &:focus-visible {\r\n ${headingElement(\r\n 'h1',\r\n css`\r\n ${linkTabStyle}\r\n display: inline-block;\r\n `\r\n )}\r\n }\r\n`;\r\n"],"names":["Avatar","node","size","isSvg","sizeNumber","React","Wrapper","styled","_a","_b","svg","other","__objRest","SymbolBadge","__spreadValues","p","css","Back","symbol","Close","Minimize","Node","className","dispatch","useDispatch","padding","type","tooltip","show","NodeWrapper","TransitionComponent","state","ActionButton","borderTabStyle","WidgetHeader","header","tagline","route","actions","textAlign","useProperties","leftNodes","rightNodes","createNodes","a","b","__spreadProps","appendClassNames","key","MainNode","calculateMargin","StyledLink","Typography","Tagline","headingElement","Link","linkTabStyle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAMA,IAA0B,CAAC,EAAE,MAAAC,QAAW;AACtC,MAAA,CAACA,EAAK;AACC,WAAA;AAGP,MAAAC;AACE,QAAAC,IAAQF,EAAK,OAAO,SAAS;AAC/B,MAAAA,EAAK,OAAO,SAAS,OAAO;AAC5B,UAAMG,IAAa,SAASH,EAAK,MAAM,EAAE;AAErC,IAAC,MAAMG,CAAU,MACVF,IAAAE;AAAA,EAEf;AAEA,SAAQ,gBAAAC,EAAA,cAAAC,GAAA;AAAA,IAAQ,QAAQL,EAAK;AAAA,IAAQ,KAAKE;AAAA,IAAO,MAAAD;AAAA,IAAY,gBAAe;AAAA,EAAA,CAAQ;AACxF,GAIMI,IAAUC,EAAO,CAACC,MAAuB;AAAvB,MAAAC,IAAAD,GAAE,OAAAE,MAAFD,GAAUE,IAAAC,EAAVH,GAAU,CAAR;AAAqB,yBAAAJ,EAAA,cAAAQ,GAAAC,EAAA,IAAgBH,EAAO;AAAA,CAAE;AAAA,aAC3D,CAACI,MAAM;;AAAA,UAAAP,IAAAO,EAAE,MAAM,WAAR,gBAAAP,EAAgB;AAAA;AAAA,MAC9B,CAACO,MACC,CAACA,EAAE,OACHC;AAAA;AAAA;AAAA;AAAA,GCvBFC,IAAwB,CAAC,EAAE,MAAAhB,QAAW;AACxC,QAAMiB,IAASjB,EAAK,UAAU,EAAE,MAAM,OAAO,SAAS;AACtD,SAAQ,gBAAAI,EAAA,cAAAQ,GAAA;AAAA,IAAY,MAAM;AAAA,IAAI,QAAAK;AAAA,EAAA,CAAgB;AAClD,GCHMC,IAAyB,CAAC,EAAE,MAAAlB,QAAW;AACzC,QAAMiB,IAASjB,EAAK,UAAU,EAAE,MAAM,OAAO,SAAS,WAChDC,IAAO,SAASD,KAAA,gBAAAA,EAAM,MAAM,EAAE,KAAK;AACzC,SAAQ,gBAAAI,EAAA,cAAAQ,GAAA;AAAA,IAAY,MAAAX;AAAA,IAAY,QAAAgB;AAAA,EAAA,CAAgB;AACpD,GCJME,IAA4B,CAAC,EAAE,MAAAnB,QAAW;AAC5C,QAAMiB,IAASjB,EAAK,UAAU,EAAE,MAAM,OAAO,SAAS,cAChDC,IAAO,SAASD,KAAA,gBAAAA,EAAM,MAAM,EAAE,KAAK;AACzC,SAAQ,gBAAAI,EAAA,cAAAQ,GAAA;AAAA,IAAY,MAAAX;AAAA,IAAY,QAAAgB;AAAA,EAAA,CAAgB;AACpD,GCKMG,IAAwB,CAACb,MAAgC;AAAhC,MAAAC,IAAAD,GAAE,aAAAc,IAAY,OAAdb,GAAqBR,IAAAW,EAArBH,GAAqB,CAAnB;AAC7B,QAAMc,IAAWC,KAEX,EAAE,MAAAtB,GAAM,SAAAuB,GAAS,MAAAC,GAAM,SAAAC,GAAS,MAAAC,IAAO,GAAS,IAAA3B;AAEtD,SAAIyB,MAAS,SAEJ,gBAAArB,EAAA,cAAAwB,GAAA;AAAA,IAAY,MAAM3B,KAAQ;AAAA,IAAQ,SAASuB,KAAW;AAAA,EAAA,GAClD,gBAAApB,EAAA,cAAAyB,GAAA;AAAA,IACG,IAAIF;AAAA,IACJ,SAAS;AAAA,IACT,aAAa;AAAA,MACT,OAAO;AAAA,QACH,MAAM;AAAA,QACN,QAAQ;AAAA,MACZ;AAAA,MACA,MAAM;AAAA,QACF,MAAM;AAAA,QACN,QAAQ;AAAA,MACZ;AAAA,IACJ;AAAA,EAEC,GAAA,CAACG,GAAYf,MACT,gBAAAX,EAAA,cAAA2B,GAAA;AAAA,IACG,OAAOL;AAAA,IACP,cAAYA;AAAA,IACZ,cAAcX;AAAA,IACd,SAAS,MAAM;AACX,MAAAO,EAAS,MAAM;AAAA,IACnB;AAAA,EAAA,GAEC,gBAAAlB,EAAA,cAAAY,GAAA;AAAA,IAAK,MAAAhB;AAAA,EAAA,CAAY,CACtB,CAER,CACJ,IAIH2B,IAKA,gBAAAvB,EAAA,cAAAwB,GAAA;AAAA,IACG,MAAM3B,KAAQ;AAAA,IACd,SAASuB,KAAW;AAAA,IACpB,aAAaC,MAAS;AAAA,EAErB,GAAAA,MAAS,YAAa,gBAAArB,EAAA,cAAAL,GAAA;AAAA,IAAO,MAAAC;AAAA,EAAY,CAAA,GACzCyB,MAAS,WACL,gBAAArB,EAAA,cAAA2B,GAAA;AAAA,IACG,OAAOL;AAAA,IACP,cAAYA;AAAA,IACZ,SAAS,MAAM;AACX,MAAAJ,EAAS,OAAO;AAAA,IACpB;AAAA,EAAA,GAEC,gBAAAlB,EAAA,cAAAc,GAAA;AAAA,IAAM,MAAAlB;AAAA,EAAA,CAAY,CACvB,GAEHyB,MAAS,cACL,gBAAArB,EAAA,cAAA2B,GAAA;AAAA,IACG,OAAOL;AAAA,IACP,cAAYA;AAAA,IACZ,SAAS,MAAM;AACX,MAAAJ,EAAS,UAAU;AAAA,IACvB;AAAA,EAAA,GAEC,gBAAAlB,EAAA,cAAAe,GAAA;AAAA,IAAS,MAAAnB;AAAA,EAAY,CAAA,CAC1B,CAER,IAhCO;AAkCf,GAIM4B,IAActB,EAAO;AAAA;AAAA,iBAEV,CAACQ,MAAMA,EAAE;AAAA,MACpB,CAACA,MAAMA,EAAE,eAAe,eAAeA,EAAE;AAAA;AAAA,iBAE9B,CAACA,MAAMA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAUT,CAACA,MAAM;;AAAA,UAAAP,IAAAO,EAAE,MAAM,WAAR,gBAAAP,EAAgB;AAAA;AAAA,qBACnB,CAACO,MAAMA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,GAMxBiB,IAAezB,EAAO;AAAA,MACtB,CAACQ,MAAM,CAAC,CAACA,EAAE,gBAAgBA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMzBkB;AAAA,wBACc,CAAClB,MAAA;;AAAM,UAAAN,KAAAD,IAAAO,EAAE,MAAM,kBAAR,gBAAAP,EAAuB,WAAvB,gBAAAC,EAA+B;AAAA;AAAA;AAAA,GCzGxDyB,KAAgC,CAAC1B,MAA4B;AAA5B,MAAAC,IAAAD,GAAE,aAAAc,MAAFb,GAAgBE,IAAAC,EAAhBH,GAAgB,CAAd;AAC/B,QAAA;AAAA,IACF,QAAA0B;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAV,IAAU;AAAA,IACV,SAAAW,IAAU,CAAC;AAAA,IACX,WAAAC,IAAY;AAAA,MACZC,EAA0C,GAExC,CAACC,GAAWC,CAAU,IAAIC,EAAYL,CAAO;AACzC,SAAAG,EAAA,KAAK,CAACG,GAAGC,OAAOD,EAAE,SAAS,MAAMC,EAAE,SAAS,EAAE,GAC7CH,EAAA,KAAK,CAACE,GAAGC,OAAOD,EAAE,SAAS,MAAMC,EAAE,SAAS,EAAE,GAEpD,gBAAAxC,EAAA,cAAAC,GAAAwC,EAAAhC,EAAA,IAAYH,IAAZ;AAAA,IAAmB,WAAWoC,EAAiBzB,GAAW,sBAAsB;AAAA,EAAA,IAC5EmB,EAAU,IAAI,CAACxC,GAAM+C,MACjB,gBAAA3C,EAAA,cAAAgB,GAAAP,EAAA;AAAA,IAAK,KAAK,GAAGb,EAAK,SAAS+C;AAAA,KAAW/C,EAAM,CAChD,GAEA,gBAAAI,EAAA,cAAA4C,GAAA;AAAA,IACG,WAAAV;AAAA,IACA,QAAQW,EAAgBT,GAAWC,GAAYH,CAAS;AAAA,EAAA,GAEvDF,IACI,gBAAAhC,EAAA,cAAA8C,GAAA;AAAA,IAAW,WAAWd;AAAA,IAAO,OAAOV;AAAA,IAAS,cAAYA;AAAA,EAAA,GACrD,gBAAAtB,EAAA,cAAA+C,GAAA;AAAA,IAAW,SAAQ;AAAA,EAAM,GAAAjB,CAAO,CACrC,IAEC,gBAAA9B,EAAA,cAAA+C,GAAA;AAAA,IAAW,SAAQ;AAAA,EAAA,GAAMjB,CAAO,GAEpCC,KAAW,gBAAA/B,EAAA,cAACgD,GAAS,MAAAjB,CAAQ,CAClC,GAECM,EAAW,IAAI,CAACzC,GAAM+C,MAClB,gBAAA3C,EAAA,cAAAgB,GAAAP,EAAA;AAAA,IAAK,KAAK,GAAGb,EAAK,SAAS+C;AAAA,KAAW/C,EAAM,CAChD,CACL;AAER,GAIMK,IAAUC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,MAKjB+C;AAAA,EACE;AAAA,EACAtC;AAAA,yBACiB,CAACD,MAAM;;AAAA,YAAAP,IAAAO,EAAE,MAAM,UAAR,gBAAAP,EAAe;AAAA;AAAA;AAAA;AAAA,qBAG1B,CAACO,MAAM;;AAAA,YAAAP,IAAAO,EAAE,MAAM,WAAR,gBAAAP,EAAgB;AAAA;AAAA;AAExC;AAAA;AAAA;AAAA,iBAGa,CAACO,MAAM;;AAAA,UAAAP,IAAAO,EAAE,MAAM,WAAR,gBAAAP,EAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAQlB,CAACO,MAAM;;AAAA,UAAAP,IAAAO,EAAE,MAAM,WAAR,gBAAAP,EAAgB;AAAA;AAAA;AAAA;AAAA,GAKvC6C,IAAU9C,EAAO;AAAA,iBACN,CAACQ,MAAM;;AAAA,UAAAP,IAAAO,EAAE,MAAM,UAAR,gBAAAP,EAAe;AAAA;AAAA;AAAA,GAIjCyC,IAAW1C,EAAO;AAAA;AAAA,kBAKN,CAACQ,MAAMA,EAAE;AAAA;AAAA,oBAEP,CAACA,MAAMA,EAAE,OAAO,SAAS;AAAA,mBAC1B,CAACA,MAAMA,EAAE,OAAO,QAAQ;AAAA,GAGrCoC,IAAa5C,EAAOgD,CAAI;AAAA;AAAA;AAAA,UAGpBD;AAAA,EACE;AAAA,EACAtC;AAAA,kBACMwC;AAAA;AAAA;AAGV;AAAA;AAAA;"}
|
|
1
|
+
{"version":3,"file":"widget-header.ba71fd3f.js","sources":["../src/avatar.tsx","../src/back.tsx","../src/close.tsx","../src/minimize.tsx","../src/node.tsx","../src/widget-header.tsx"],"sourcesContent":["import { SymbolBadge } from '@telia-ace/widget-ui';\nimport React from 'react';\nimport styled, { css } from 'styled-components';\nimport { ActionNode } from './widget-header-component';\n\ntype Props = { node: ActionNode };\nconst Avatar: React.FC<Props> = ({ node }) => {\n if (!node.symbol) {\n return null;\n }\n\n let size;\n const isSvg = node.symbol.type === 'Svg';\n if (node.symbol.type === 'Svg') {\n const sizeNumber = parseInt(node.size, 10);\n\n if (!isNaN(sizeNumber)) {\n size = sizeNumber;\n }\n }\n\n return <Wrapper symbol={node.symbol} svg={isSvg} size={size} backgroundSize=\"cover\" />;\n};\n\nexport default Avatar;\n\nconst Wrapper = styled(({ svg, ...other }) => <SymbolBadge {...other} />)`\n color: ${(p) => p.theme.colors?.text};\n ${(p) =>\n !p.svg &&\n css`\n border-radius: 50%;\n overflow: hidden;\n `}\n`;\n","import { SymbolBadge } from '@telia-ace/widget-ui';\nimport React from 'react';\nimport { ActionNode } from './widget-header-component';\n\ntype Props = {\n node: ActionNode;\n};\nconst Back: React.FC<Props> = ({ node }) => {\n const symbol = node.symbol || { type: 'Svg', content: 'back' };\n return <SymbolBadge size={20} symbol={symbol} />;\n};\n\nexport default Back;\n","import { SymbolBadge } from '@telia-ace/widget-ui';\nimport React from 'react';\nimport { ActionNode } from './widget-header-component';\n\ntype Props = {\n node: ActionNode;\n};\nconst Close: React.FC<Props> = ({ node }) => {\n const symbol = node.symbol || { type: 'Svg', content: 'close' };\n const size = parseInt(node?.size, 10) || 14;\n return <SymbolBadge size={size} symbol={symbol} />;\n};\n\nexport default Close;\n","import { SymbolBadge } from '@telia-ace/widget-ui';\nimport React from 'react';\nimport { ActionNode } from './widget-header-component';\n\ntype Props = {\n node: ActionNode;\n};\nconst Minimize: React.FC<Props> = ({ node }) => {\n const symbol = node.symbol || { type: 'Svg', content: 'minimize' };\n const size = parseInt(node?.size, 10) || 20;\n return <SymbolBadge size={size} symbol={symbol} />;\n};\n\nexport default Minimize;\n","import { borderTabStyle, TransitionComponent, useDispatch } from '@telia-ace/widget-ui';\nimport React from 'react';\nimport styled from 'styled-components';\nimport Avatar from './avatar';\nimport Back from './back';\nimport Close from './close';\nimport Minimize from './minimize';\nimport { ActionNode } from './widget-header-component';\n\ntype Props = Merge<\n ActionNode,\n {\n className?: string;\n }\n>;\n\nconst Node: React.FC<Props> = ({ className = '', ...node }) => {\n const dispatch = useDispatch();\n\n const { size, padding, type, tooltip, show = true } = node;\n\n if (type === 'back') {\n return (\n <NodeWrapper size={size || '64px'} padding={padding || '10px'}>\n <TransitionComponent\n in={show}\n timeout={300}\n transitions={{\n enter: {\n type: 'scale',\n easing: 'cubic-bezier(.08,.84,.74,1.84)',\n },\n exit: {\n type: 'scale',\n easing: 'ease-out',\n },\n }}\n >\n {(state: any, css: any) => (\n <ActionButton\n title={tooltip}\n aria-label={tooltip}\n animationCss={css}\n onClick={() => {\n dispatch('back');\n }}\n >\n <Back node={node} />\n </ActionButton>\n )}\n </TransitionComponent>\n </NodeWrapper>\n );\n }\n\n if (!show) {\n return null;\n }\n\n return (\n <NodeWrapper\n size={size || '64px'}\n padding={padding || '10px'}\n squareRatio={type === 'avatar'}\n >\n {type === 'avatar' && <Avatar node={node} />}\n {type === 'close' && (\n <ActionButton\n title={tooltip}\n aria-label={tooltip}\n onClick={() => {\n dispatch('close');\n }}\n >\n <Close node={node} />\n </ActionButton>\n )}\n {type === 'minimize' && (\n <ActionButton\n title={tooltip}\n aria-label={tooltip}\n onClick={() => {\n dispatch('minimize');\n }}\n >\n <Minimize node={node} />\n </ActionButton>\n )}\n </NodeWrapper>\n );\n};\n\nexport default Node;\n\nconst NodeWrapper = styled.div<{ size: string; padding: string; squareRatio?: boolean }>`\n flex: 1;\n max-width: ${(p) => p.size};\n ${(p) => p.squareRatio && `max-height: ${p.size};`}\n text-align: center;\n padding: 0 ${(p) => p.padding};\n && {\n box-sizing: content-box;\n }\n\n svg {\n vertical-align: middle;\n }\n\n i {\n color: ${(p) => p.theme.colors?.text};\n font-size: ${(p) => p.size};\n min-width: 1em;\n min-height: 1em;\n display: inline-block;\n }\n`;\nconst ActionButton = styled.button<any>`\n ${(p) => !!p.animationCss && p.animationCss};\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n &:focus-visible {\n ${borderTabStyle};\n border-color: ${(p) => p.theme.accessibility?.colors?.inactiveText};\n }\n`;\n","import {\n headingElement,\n Link,\n linkTabStyle,\n Typography,\n useProperties,\n} from '@telia-ace/widget-ui';\nimport { appendClassNames } from '@telia-ace/widget-utilities';\nimport React from 'react';\nimport styled, { css } from 'styled-components';\nimport Node from './node';\nimport { calculateMargin, createNodes } from './utils';\nimport { WidgetHeaderComponentProps } from './widget-header-component';\n\ntype Props = {\n className: string;\n role?: string;\n};\n\nconst WidgetHeader: React.FC<Props> = ({ className, ...other }) => {\n const {\n header,\n tagline,\n route,\n tooltip = '',\n actions = {},\n textAlign = 'center',\n } = useProperties<WidgetHeaderComponentProps>();\n\n const [leftNodes, rightNodes] = createNodes(actions);\n leftNodes.sort((a, b) => (a.order || 0) - (b.order || 0));\n rightNodes.sort((a, b) => (a.order || 0) - (b.order || 0));\n return (\n <Wrapper {...other} className={appendClassNames(className, 'humany-widget-header')}>\n {leftNodes.map((node, key) => (\n <Node key={`${node.type}+_${key}`} {...node} />\n ))}\n\n <MainNode\n textAlign={textAlign}\n margin={calculateMargin(leftNodes, rightNodes, textAlign)}\n >\n {route ? (\n <StyledLink routeName={route} title={tooltip} aria-label={tooltip}>\n <Typography variant=\"h1\">{header}</Typography>\n </StyledLink>\n ) : (\n <Typography variant=\"h1\">{header}</Typography>\n )}\n {tagline && <Tagline>{tagline}</Tagline>}\n </MainNode>\n\n {rightNodes.map((node, key) => (\n <Node key={`${node.type}+_${key}`} {...node} />\n ))}\n </Wrapper>\n );\n};\n\nexport default WidgetHeader;\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n ${headingElement(\n 'h1',\n css`\n font-size: ${(p) => p.theme.fonts?.huge};\n margin: 0;\n font-weight: 300;\n color: ${(p) => p.theme.colors?.text};\n `\n )}\n\n p {\n color: ${(p) => p.theme.colors?.text};\n margin: 0;\n }\n\n svg {\n line,\n path,\n circle {\n stroke: ${(p) => p.theme.colors?.text};\n }\n }\n`;\n\nconst Tagline = styled.p`\n font-size: ${(p) => p.theme.fonts?.normal};\n font-weight: 300;\n`;\n\nconst MainNode = styled.div<{\n textAlign: string;\n margin: { left?: string; right?: string };\n}>`\n flex: 1;\n text-align: ${(p) => p.textAlign};\n\n margin-right: ${(p) => p.margin.right || 0};\n margin-left: ${(p) => p.margin.left || 0};\n`;\n\nconst StyledLink = styled(Link)<any>`\n text-decoration: none;\n &:focus-visible {\n ${headingElement(\n 'h1',\n css`\n ${linkTabStyle}\n display: inline-block;\n `\n )}\n }\n`;\n"],"names":["Avatar","node","size","isSvg","sizeNumber","React","Wrapper","styled","_a","_b","svg","other","__objRest","SymbolBadge","__spreadValues","p","css","Back","symbol","Close","Minimize","Node","className","dispatch","useDispatch","padding","type","tooltip","show","NodeWrapper","TransitionComponent","state","ActionButton","borderTabStyle","WidgetHeader","header","tagline","route","actions","textAlign","useProperties","leftNodes","rightNodes","createNodes","a","b","__spreadProps","appendClassNames","key","MainNode","calculateMargin","StyledLink","Typography","Tagline","headingElement","Link","linkTabStyle"],"mappings":"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"}
|
package/dist/widget-header.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
declare type Props = {
|
|
3
|
-
className: string;
|
|
4
|
-
role?: string;
|
|
5
|
-
};
|
|
6
|
-
declare const WidgetHeader: React.FC<Props>;
|
|
7
|
-
export default WidgetHeader;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
declare type Props = {
|
|
3
|
+
className: string;
|
|
4
|
+
role?: string;
|
|
5
|
+
};
|
|
6
|
+
declare const WidgetHeader: React.FC<Props>;
|
|
7
|
+
export default WidgetHeader;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telia-ace/widget-components-widget-header",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.19-next.1",
|
|
4
4
|
"description": "Widget header component for ACE Widgets.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"author": "Telia Company AB",
|
|
@@ -26,21 +26,20 @@
|
|
|
26
26
|
},
|
|
27
27
|
"sideEffects": false,
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@telia-ace/widget-core": "^1.0.
|
|
30
|
-
"@telia-ace/widget-routing": "^1.0.
|
|
31
|
-
"@telia-ace/widget-ui": "^1.0.
|
|
32
|
-
"@telia-ace/widget-utilities": "^1.0.
|
|
29
|
+
"@telia-ace/widget-core": "^1.0.16-next.2",
|
|
30
|
+
"@telia-ace/widget-routing": "^1.0.17-next.2",
|
|
31
|
+
"@telia-ace/widget-ui": "^1.0.23-next.2",
|
|
32
|
+
"@telia-ace/widget-utilities": "^1.0.5-next.1",
|
|
33
33
|
"@webprovisions/platform": "^1.1.2"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
|
-
"react": "^
|
|
37
|
-
"react-dom": "^
|
|
38
|
-
"styled-components": "^
|
|
36
|
+
"react": "^18.2.0",
|
|
37
|
+
"react-dom": "^18.2.0",
|
|
38
|
+
"styled-components": "^5.3.6"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@types/react": "^
|
|
42
|
-
"@types/
|
|
43
|
-
"@types/styled-components": "^5.1.7"
|
|
41
|
+
"@types/react-dom": "^18.0.6",
|
|
42
|
+
"@types/styled-components": "^5.1.26"
|
|
44
43
|
},
|
|
45
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "9dcb367fa548527b87978ec739d49a4c5c00ef22"
|
|
46
45
|
}
|