@telia-ace/widget-components-widget-header 1.0.16 → 1.0.18
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/dist/index.0ad4edcb.js +73 -0
- package/dist/{index.7df5456d.js.map → index.0ad4edcb.js.map} +1 -1
- package/dist/index.js +1 -1
- package/dist/{widget-header.95f2f17b.js → widget-header.ba71fd3f.js} +77 -78
- package/dist/widget-header.ba71fd3f.js.map +1 -0
- package/package.json +7 -6
- package/dist/index.7df5456d.js +0 -63
- package/dist/widget-header.95f2f17b.js.map +0 -1
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { createEventSubscriber as p } from "@telia-ace/widget-core";
|
|
2
|
+
import { createReactComponent as f } from "@telia-ace/widget-ui";
|
|
3
|
+
import { removeNullAndUndefinedValues as b } from "@telia-ace/widget-utilities";
|
|
4
|
+
const y = (s, e, n) => {
|
|
5
|
+
if (n !== "center")
|
|
6
|
+
return {};
|
|
7
|
+
const t = (a) => a.reduce((u, d) => {
|
|
8
|
+
const [l] = d.padding.split("px"), [g] = d.size.split("px");
|
|
9
|
+
return u + (+g + +l * 2);
|
|
10
|
+
}, 0), o = t(s), c = t(e), r = o - c;
|
|
11
|
+
return r === 0 ? {} : {
|
|
12
|
+
[o > c ? "right" : "left"]: `${Math.abs(r)}px`
|
|
13
|
+
};
|
|
14
|
+
}, v = (s) => Object.keys(s).reduce(
|
|
15
|
+
(e, n) => {
|
|
16
|
+
const t = s[n];
|
|
17
|
+
if (!t)
|
|
18
|
+
return e;
|
|
19
|
+
const [o, c] = e, r = t.position === "left" ? o : c;
|
|
20
|
+
return s[n].symbol, r.push({
|
|
21
|
+
symbol: t.symbol && typeof t.symbol == "string" ? { type: "Uri", content: t.symbol } : t.symbol,
|
|
22
|
+
type: n,
|
|
23
|
+
padding: t.padding || "10px",
|
|
24
|
+
label: t.label,
|
|
25
|
+
size: t.size || "64px",
|
|
26
|
+
tooltip: t.tooltip,
|
|
27
|
+
order: t.order || 0,
|
|
28
|
+
show: t.show
|
|
29
|
+
}), e;
|
|
30
|
+
},
|
|
31
|
+
[[], []]
|
|
32
|
+
), h = (s) => s.getAsync("router").then((e) => {
|
|
33
|
+
if (!e)
|
|
34
|
+
return !0;
|
|
35
|
+
const n = e.getInitialRoute(), { name: t, params: o } = e.getRouteData();
|
|
36
|
+
return b(o), !((n == null ? void 0 : n.name) !== t || Object.keys(o).length > 0);
|
|
37
|
+
}), z = (s) => f(
|
|
38
|
+
s,
|
|
39
|
+
"widget-header",
|
|
40
|
+
import("./widget-header.ba71fd3f.js"),
|
|
41
|
+
(e) => {
|
|
42
|
+
const { events: n } = s.get("$widget"), [t, o] = p(n), { actions: c = {} } = e.properties();
|
|
43
|
+
if (e.actions.create("close", (r, i) => i.preventDefault ? void 0 : s.get("$widget").invoke("close")), e.actions.create("back", (r, i) => {
|
|
44
|
+
if (!i.preventDefault)
|
|
45
|
+
return s.getAsync("router").then((a) => {
|
|
46
|
+
a.goBack();
|
|
47
|
+
});
|
|
48
|
+
}), e.properties((r) => {
|
|
49
|
+
const { actions: i = {} } = r;
|
|
50
|
+
if (!!i.back)
|
|
51
|
+
return Object.keys(i).forEach((a) => {
|
|
52
|
+
const u = i[a];
|
|
53
|
+
a === "back" && (u.show = r.showBack);
|
|
54
|
+
}), { actions: i };
|
|
55
|
+
}), e.actions.create("show-back", (r) => {
|
|
56
|
+
e.writeProperties({ showBack: r });
|
|
57
|
+
}), c.back) {
|
|
58
|
+
const r = () => h(s).then(
|
|
59
|
+
(i) => e.actions.dispatch("show-back", !i)
|
|
60
|
+
);
|
|
61
|
+
r(), t("router:changed", r);
|
|
62
|
+
}
|
|
63
|
+
return e.actions.create("minimize", (r, i) => i.preventDefault ? void 0 : s.get("$widget").invoke("hide")), () => {
|
|
64
|
+
o();
|
|
65
|
+
};
|
|
66
|
+
}
|
|
67
|
+
);
|
|
68
|
+
export {
|
|
69
|
+
z as W,
|
|
70
|
+
y as a,
|
|
71
|
+
v as c
|
|
72
|
+
};
|
|
73
|
+
//# sourceMappingURL=index.0ad4edcb.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.
|
|
1
|
+
{"version":3,"file":"index.0ad4edcb.js","sources":["../src/utils.ts","../src/widget-header-component.ts"],"sourcesContent":["import { RoutingService } from '@telia-ace/widget-routing';\r\nimport { removeNullAndUndefinedValues } from '@telia-ace/widget-utilities';\r\nimport { Container } from '@webprovisions/platform';\r\nimport { ActionNode, Symbol } from './widget-header-component';\r\n\r\nexport const calculateMargin = (\r\n leftNodes: ActionNode[],\r\n rightNodes: ActionNode[],\r\n textAlign: string\r\n) => {\r\n if (textAlign !== 'center') {\r\n return {};\r\n }\r\n\r\n const calculate = (nodes: ActionNode[]) => {\r\n return nodes.reduce<number>((acc, node) => {\r\n const [padding] = node.padding.split('px');\r\n const [size] = node.size.split('px');\r\n return acc + (+size + +padding * 2);\r\n }, 0);\r\n };\r\n const leftSize = calculate(leftNodes);\r\n const rightSize = calculate(rightNodes);\r\n\r\n const total = leftSize - rightSize;\r\n\r\n if (total === 0) {\r\n return {};\r\n }\r\n\r\n const direction = leftSize > rightSize ? 'right' : 'left';\r\n return {\r\n [direction]: `${Math.abs(total)}px`,\r\n };\r\n};\r\n\r\nexport const createNodes = (actions: { [key: string]: ActionNode }) => {\r\n return Object.keys(actions).reduce<[ActionNode[], ActionNode[]]>(\r\n (acc, key) => {\r\n const node = actions[key];\r\n if (!node) {\r\n return acc;\r\n }\r\n const [left, right] = acc;\r\n const arr = node.position === 'left' ? left : right;\r\n\r\n let symbol = actions[key].symbol;\r\n if (symbol && typeof symbol === 'string') {\r\n symbol = {\r\n type: 'Uri',\r\n content: symbol,\r\n };\r\n }\r\n\r\n arr.push({\r\n symbol:\r\n node.symbol && typeof node.symbol === 'string'\r\n ? { type: 'Uri', content: node.symbol }\r\n : (node.symbol as Symbol),\r\n type: key,\r\n padding: node.padding || '10px',\r\n label: node.label,\r\n size: node.size || '64px',\r\n tooltip: node.tooltip,\r\n order: node.order || 0,\r\n show: node.show,\r\n });\r\n\r\n return acc;\r\n },\r\n [[], []]\r\n );\r\n};\r\n\r\nexport const isOnInitialRoute = (container: Container) =>\r\n container.getAsync('router').then((router: RoutingService) => {\r\n if (!router) {\r\n return true;\r\n }\r\n const initialRoute = router.getInitialRoute();\r\n const { name, params } = router.getRouteData();\r\n\r\n removeNullAndUndefinedValues(params);\r\n\r\n if (initialRoute?.name !== name || Object.keys(params).length > 0) {\r\n return false;\r\n }\r\n\r\n return true;\r\n });\r\n","import { createEventSubscriber } from '@telia-ace/widget-core';\r\nimport { RoutingService } from '@telia-ace/widget-routing';\r\nimport { createReactComponent } from '@telia-ace/widget-ui';\r\nimport { Container } from '@webprovisions/platform';\r\nimport { isOnInitialRoute } from './utils';\r\n\r\nexport type Symbol = {\r\n type: 'Uri' | 'Svg' | 'FontAwesome' | 'Text' | string;\r\n content: string;\r\n};\r\n\r\nexport type ActionNode = {\r\n type: string;\r\n label?: string;\r\n position?: 'right' | 'left';\r\n symbol?: Symbol;\r\n size: string;\r\n padding: string;\r\n tooltip?: string;\r\n order?: number;\r\n show?: boolean;\r\n};\r\n\r\nexport type WidgetHeaderComponentProps = {\r\n header: string;\r\n tagline: string;\r\n textAlign?: string;\r\n actions?: { [key: string]: ActionNode };\r\n tooltip?: string;\r\n route?: string;\r\n};\r\n\r\nconst WidgetHeaderComponent = (container: Container) => {\r\n return createReactComponent(\r\n container,\r\n 'widget-header',\r\n import('./widget-header'),\r\n (component) => {\r\n const { events } = container.get('$widget');\r\n const [subscribe, unsubscribe] = createEventSubscriber(events);\r\n\r\n const { actions = {} } = component.properties<WidgetHeaderComponentProps>();\r\n\r\n component.actions.create('close', (data, options) => {\r\n if (options.preventDefault) {\r\n return;\r\n }\r\n\r\n const widget = container.get('$widget');\r\n return widget.invoke('close');\r\n });\r\n component.actions.create('back', (data, options) => {\r\n if (options.preventDefault) {\r\n return;\r\n }\r\n\r\n return container.getAsync('router').then((router: RoutingService) => {\r\n router.goBack();\r\n });\r\n });\r\n\r\n component.properties((properties) => {\r\n const { actions = {} } = properties;\r\n\r\n if (!actions.back) {\r\n return;\r\n }\r\n\r\n Object.keys(actions).forEach((key) => {\r\n const node = actions[key];\r\n if (key === 'back') {\r\n node.show = properties.showBack;\r\n }\r\n });\r\n\r\n return { actions };\r\n });\r\n\r\n component.actions.create('show-back', (showBack) => {\r\n component.writeProperties({ showBack });\r\n });\r\n\r\n if (actions.back) {\r\n const showBack = () =>\r\n isOnInitialRoute(container).then((onInitialRoute) =>\r\n component.actions.dispatch('show-back', !onInitialRoute)\r\n );\r\n\r\n showBack();\r\n subscribe('router:changed', showBack);\r\n }\r\n\r\n component.actions.create('minimize', (data, options) => {\r\n if (options.preventDefault) {\r\n return;\r\n }\r\n\r\n const widget = container.get('$widget');\r\n return widget.invoke('hide');\r\n });\r\n\r\n return () => {\r\n unsubscribe();\r\n };\r\n }\r\n );\r\n};\r\n\r\nexport default WidgetHeaderComponent;\r\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.js
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
1
|
var A = Object.defineProperty, W = Object.defineProperties;
|
|
2
2
|
var B = Object.getOwnPropertyDescriptors;
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
3
|
+
var h = Object.getOwnPropertySymbols;
|
|
4
|
+
var E = Object.prototype.hasOwnProperty, k = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var z = (e, t, i) => t in e ? A(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, u = (e, t) => {
|
|
6
6
|
for (var i in t || (t = {}))
|
|
7
|
-
|
|
8
|
-
if (
|
|
9
|
-
for (var i of
|
|
10
|
-
k.call(t, i) &&
|
|
7
|
+
E.call(t, i) && z(e, i, t[i]);
|
|
8
|
+
if (h)
|
|
9
|
+
for (var i of h(t))
|
|
10
|
+
k.call(t, i) && z(e, i, t[i]);
|
|
11
11
|
return e;
|
|
12
12
|
}, N = (e, t) => W(e, B(t));
|
|
13
13
|
var f = (e, t) => {
|
|
14
14
|
var i = {};
|
|
15
15
|
for (var a in e)
|
|
16
|
-
|
|
17
|
-
if (e != null &&
|
|
18
|
-
for (var a of
|
|
16
|
+
E.call(e, a) && t.indexOf(a) < 0 && (i[a] = e[a]);
|
|
17
|
+
if (e != null && h)
|
|
18
|
+
for (var a of h(e))
|
|
19
19
|
t.indexOf(a) < 0 && k.call(e, a) && (i[a] = e[a]);
|
|
20
20
|
return i;
|
|
21
21
|
};
|
|
22
|
-
import { SymbolBadge as
|
|
22
|
+
import { SymbolBadge as $, borderTabStyle as I, useDispatch as M, TransitionComponent as R, useProperties as q, Typography as S, headingElement as T, Link as L, linkTabStyle as _ } from "@telia-ace/widget-ui";
|
|
23
23
|
import { appendClassNames as D } from "@telia-ace/widget-utilities";
|
|
24
24
|
import r from "react";
|
|
25
|
-
import c, { css as
|
|
26
|
-
import { c as H, a as P } from "./index.
|
|
25
|
+
import c, { css as x } from "styled-components";
|
|
26
|
+
import { c as H, a as P } from "./index.0ad4edcb.js";
|
|
27
27
|
import "@telia-ace/widget-core";
|
|
28
28
|
const j = ({ node: e }) => {
|
|
29
29
|
if (!e.symbol)
|
|
@@ -42,40 +42,40 @@ const j = ({ node: e }) => {
|
|
|
42
42
|
});
|
|
43
43
|
}, F = c((i) => {
|
|
44
44
|
var a = i, { svg: e } = a, t = f(a, ["svg"]);
|
|
45
|
-
return /* @__PURE__ */ r.createElement(
|
|
45
|
+
return /* @__PURE__ */ r.createElement($, u({}, t));
|
|
46
46
|
})`
|
|
47
47
|
color: ${(e) => {
|
|
48
48
|
var t;
|
|
49
49
|
return (t = e.theme.colors) == null ? void 0 : t.text;
|
|
50
50
|
}};
|
|
51
|
-
${(e) => !e.svg &&
|
|
51
|
+
${(e) => !e.svg && x`
|
|
52
52
|
border-radius: 50%;
|
|
53
53
|
overflow: hidden;
|
|
54
54
|
`}
|
|
55
55
|
`, G = ({ node: e }) => {
|
|
56
56
|
const t = e.symbol || { type: "Svg", content: "back" };
|
|
57
|
-
return /* @__PURE__ */ r.createElement(
|
|
57
|
+
return /* @__PURE__ */ r.createElement($, {
|
|
58
58
|
size: 20,
|
|
59
59
|
symbol: t
|
|
60
60
|
});
|
|
61
61
|
}, J = ({ node: e }) => {
|
|
62
62
|
const t = e.symbol || { type: "Svg", content: "close" }, i = parseInt(e == null ? void 0 : e.size, 10) || 14;
|
|
63
|
-
return /* @__PURE__ */ r.createElement(
|
|
63
|
+
return /* @__PURE__ */ r.createElement($, {
|
|
64
64
|
size: i,
|
|
65
65
|
symbol: t
|
|
66
66
|
});
|
|
67
67
|
}, K = ({ node: e }) => {
|
|
68
68
|
const t = e.symbol || { type: "Svg", content: "minimize" }, i = parseInt(e == null ? void 0 : e.size, 10) || 20;
|
|
69
|
-
return /* @__PURE__ */ r.createElement(
|
|
69
|
+
return /* @__PURE__ */ r.createElement($, {
|
|
70
70
|
size: i,
|
|
71
71
|
symbol: t
|
|
72
72
|
});
|
|
73
73
|
}, C = (i) => {
|
|
74
74
|
var a = i, { className: e = "" } = a, t = f(a, ["className"]);
|
|
75
|
-
const m = M(), { size:
|
|
76
|
-
return
|
|
77
|
-
size:
|
|
78
|
-
padding:
|
|
75
|
+
const m = M(), { size: p, padding: g, type: o, tooltip: s, show: b = !0 } = t;
|
|
76
|
+
return o === "back" ? /* @__PURE__ */ r.createElement(w, {
|
|
77
|
+
size: p || "64px",
|
|
78
|
+
padding: g || "10px"
|
|
79
79
|
}, /* @__PURE__ */ r.createElement(R, {
|
|
80
80
|
in: b,
|
|
81
81
|
timeout: 300,
|
|
@@ -89,32 +89,32 @@ const j = ({ node: e }) => {
|
|
|
89
89
|
easing: "ease-out"
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
|
-
}, (
|
|
93
|
-
title:
|
|
94
|
-
"aria-label":
|
|
95
|
-
animationCss:
|
|
92
|
+
}, (y, d) => /* @__PURE__ */ r.createElement(v, {
|
|
93
|
+
title: s,
|
|
94
|
+
"aria-label": s,
|
|
95
|
+
animationCss: d,
|
|
96
96
|
onClick: () => {
|
|
97
97
|
m("back");
|
|
98
98
|
}
|
|
99
99
|
}, /* @__PURE__ */ r.createElement(G, {
|
|
100
100
|
node: t
|
|
101
101
|
})))) : b ? /* @__PURE__ */ r.createElement(w, {
|
|
102
|
-
size:
|
|
103
|
-
padding:
|
|
104
|
-
squareRatio:
|
|
105
|
-
},
|
|
102
|
+
size: p || "64px",
|
|
103
|
+
padding: g || "10px",
|
|
104
|
+
squareRatio: o === "avatar"
|
|
105
|
+
}, o === "avatar" && /* @__PURE__ */ r.createElement(j, {
|
|
106
106
|
node: t
|
|
107
|
-
}),
|
|
108
|
-
title:
|
|
109
|
-
"aria-label":
|
|
107
|
+
}), o === "close" && /* @__PURE__ */ r.createElement(v, {
|
|
108
|
+
title: s,
|
|
109
|
+
"aria-label": s,
|
|
110
110
|
onClick: () => {
|
|
111
111
|
m("close");
|
|
112
112
|
}
|
|
113
113
|
}, /* @__PURE__ */ r.createElement(J, {
|
|
114
114
|
node: t
|
|
115
|
-
})),
|
|
116
|
-
title:
|
|
117
|
-
"aria-label":
|
|
115
|
+
})), o === "minimize" && /* @__PURE__ */ r.createElement(v, {
|
|
116
|
+
title: s,
|
|
117
|
+
"aria-label": s,
|
|
118
118
|
onClick: () => {
|
|
119
119
|
m("minimize");
|
|
120
120
|
}
|
|
@@ -145,47 +145,45 @@ const j = ({ node: e }) => {
|
|
|
145
145
|
min-height: 1em;
|
|
146
146
|
display: inline-block;
|
|
147
147
|
}
|
|
148
|
-
`,
|
|
148
|
+
`, v = c.button`
|
|
149
149
|
${(e) => !!e.animationCss && e.animationCss};
|
|
150
150
|
background: none;
|
|
151
151
|
border: none;
|
|
152
152
|
cursor: pointer;
|
|
153
153
|
padding: 0;
|
|
154
|
-
&:focus {
|
|
155
|
-
${
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
border-color: ${(a = (i = e.theme.accessibility) == null ? void 0 : i.colors) == null ? void 0 : a.inactiveText};
|
|
160
|
-
`;
|
|
154
|
+
&:focus-visible {
|
|
155
|
+
${I};
|
|
156
|
+
border-color: ${(e) => {
|
|
157
|
+
var t, i;
|
|
158
|
+
return (i = (t = e.theme.accessibility) == null ? void 0 : t.colors) == null ? void 0 : i.inactiveText;
|
|
161
159
|
}};
|
|
162
160
|
}
|
|
163
|
-
`,
|
|
161
|
+
`, ae = (i) => {
|
|
164
162
|
var a = i, { className: e } = a, t = f(a, ["className"]);
|
|
165
163
|
const {
|
|
166
164
|
header: m,
|
|
167
|
-
tagline:
|
|
168
|
-
route:
|
|
169
|
-
tooltip:
|
|
170
|
-
actions:
|
|
165
|
+
tagline: p,
|
|
166
|
+
route: g,
|
|
167
|
+
tooltip: o = "",
|
|
168
|
+
actions: s = {},
|
|
171
169
|
textAlign: b = "center"
|
|
172
|
-
} = q(), [
|
|
173
|
-
return
|
|
170
|
+
} = q(), [y, d] = H(s);
|
|
171
|
+
return y.sort((n, l) => (n.order || 0) - (l.order || 0)), d.sort((n, l) => (n.order || 0) - (l.order || 0)), /* @__PURE__ */ r.createElement(O, N(u({}, t), {
|
|
174
172
|
className: D(e, "humany-widget-header")
|
|
175
|
-
}),
|
|
173
|
+
}), y.map((n, l) => /* @__PURE__ */ r.createElement(C, u({
|
|
176
174
|
key: `${n.type}+_${l}`
|
|
177
175
|
}, n))), /* @__PURE__ */ r.createElement(U, {
|
|
178
176
|
textAlign: b,
|
|
179
|
-
margin: P(
|
|
180
|
-
},
|
|
181
|
-
routeName:
|
|
182
|
-
title:
|
|
183
|
-
"aria-label":
|
|
177
|
+
margin: P(y, d, b)
|
|
178
|
+
}, g ? /* @__PURE__ */ r.createElement(V, {
|
|
179
|
+
routeName: g,
|
|
180
|
+
title: o,
|
|
181
|
+
"aria-label": o
|
|
184
182
|
}, /* @__PURE__ */ r.createElement(S, {
|
|
185
183
|
variant: "h1"
|
|
186
184
|
}, m)) : /* @__PURE__ */ r.createElement(S, {
|
|
187
185
|
variant: "h1"
|
|
188
|
-
}, m),
|
|
186
|
+
}, m), p && /* @__PURE__ */ r.createElement(Q, null, p)), d.map((n, l) => /* @__PURE__ */ r.createElement(C, u({
|
|
189
187
|
key: `${n.type}+_${l}`
|
|
190
188
|
}, n))));
|
|
191
189
|
}, O = c.div`
|
|
@@ -193,18 +191,21 @@ const j = ({ node: e }) => {
|
|
|
193
191
|
flex-direction: row;
|
|
194
192
|
align-items: center;
|
|
195
193
|
|
|
196
|
-
${T(
|
|
194
|
+
${T(
|
|
195
|
+
"h1",
|
|
196
|
+
x`
|
|
197
197
|
font-size: ${(e) => {
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
}};
|
|
198
|
+
var t;
|
|
199
|
+
return (t = e.theme.fonts) == null ? void 0 : t.huge;
|
|
200
|
+
}};
|
|
201
201
|
margin: 0;
|
|
202
202
|
font-weight: 300;
|
|
203
203
|
color: ${(e) => {
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
}};
|
|
207
|
-
`
|
|
204
|
+
var t;
|
|
205
|
+
return (t = e.theme.colors) == null ? void 0 : t.text;
|
|
206
|
+
}};
|
|
207
|
+
`
|
|
208
|
+
)}
|
|
208
209
|
|
|
209
210
|
p {
|
|
210
211
|
color: ${(e) => {
|
|
@@ -238,19 +239,17 @@ const j = ({ node: e }) => {
|
|
|
238
239
|
margin-left: ${(e) => e.margin.left || 0};
|
|
239
240
|
`, V = c(L)`
|
|
240
241
|
text-decoration: none;
|
|
241
|
-
&:focus {
|
|
242
|
-
${T(
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
}};
|
|
250
|
-
`)}
|
|
242
|
+
&:focus-visible {
|
|
243
|
+
${T(
|
|
244
|
+
"h1",
|
|
245
|
+
x`
|
|
246
|
+
${_}
|
|
247
|
+
display: inline-block;
|
|
248
|
+
`
|
|
249
|
+
)}
|
|
251
250
|
}
|
|
252
251
|
`;
|
|
253
252
|
export {
|
|
254
|
-
|
|
253
|
+
ae as default
|
|
255
254
|
};
|
|
256
|
-
//# sourceMappingURL=widget-header.
|
|
255
|
+
//# sourceMappingURL=widget-header.ba71fd3f.js.map
|
|
@@ -0,0 +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":"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"}
|
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.18",
|
|
4
4
|
"description": "Widget header component for ACE Widgets.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"author": "Telia Company AB",
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
"telia"
|
|
9
9
|
],
|
|
10
10
|
"main": "dist/index.js",
|
|
11
|
+
"sourceMain": "src/index.ts",
|
|
11
12
|
"type": "module",
|
|
12
13
|
"types": "dist/index.d.ts",
|
|
13
14
|
"files": [
|
|
@@ -25,10 +26,10 @@
|
|
|
25
26
|
},
|
|
26
27
|
"sideEffects": false,
|
|
27
28
|
"dependencies": {
|
|
28
|
-
"@telia-ace/widget-core": "^1.0.
|
|
29
|
-
"@telia-ace/widget-routing": "^1.0.
|
|
30
|
-
"@telia-ace/widget-ui": "^1.0.
|
|
31
|
-
"@telia-ace/widget-utilities": "^1.0.
|
|
29
|
+
"@telia-ace/widget-core": "^1.0.15",
|
|
30
|
+
"@telia-ace/widget-routing": "^1.0.16",
|
|
31
|
+
"@telia-ace/widget-ui": "^1.0.22",
|
|
32
|
+
"@telia-ace/widget-utilities": "^1.0.4",
|
|
32
33
|
"@webprovisions/platform": "^1.1.2"
|
|
33
34
|
},
|
|
34
35
|
"peerDependencies": {
|
|
@@ -41,5 +42,5 @@
|
|
|
41
42
|
"@types/react-dom": "^16.8.0",
|
|
42
43
|
"@types/styled-components": "^5.1.7"
|
|
43
44
|
},
|
|
44
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "c3045eebac4251ae8ba27333abd9b6aa3ccd5b38"
|
|
45
46
|
}
|
package/dist/index.7df5456d.js
DELETED
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import { createEventSubscriber as p } from "@telia-ace/widget-core";
|
|
2
|
-
import { createReactComponent as f } from "@telia-ace/widget-ui";
|
|
3
|
-
import { removeNullAndUndefinedValues as b } from "@telia-ace/widget-utilities";
|
|
4
|
-
const y = (s, e, n) => {
|
|
5
|
-
if (n !== "center")
|
|
6
|
-
return {};
|
|
7
|
-
const t = (a) => a.reduce((u, d) => {
|
|
8
|
-
const [l] = d.padding.split("px"), [g] = d.size.split("px");
|
|
9
|
-
return u + (+g + +l * 2);
|
|
10
|
-
}, 0), o = t(s), c = t(e), r = o - c;
|
|
11
|
-
return r === 0 ? {} : {
|
|
12
|
-
[o > c ? "right" : "left"]: `${Math.abs(r)}px`
|
|
13
|
-
};
|
|
14
|
-
}, v = (s) => Object.keys(s).reduce((e, n) => {
|
|
15
|
-
const t = s[n];
|
|
16
|
-
if (!t)
|
|
17
|
-
return e;
|
|
18
|
-
const [o, c] = e, r = t.position === "left" ? o : c;
|
|
19
|
-
return s[n].symbol, r.push({
|
|
20
|
-
symbol: t.symbol && typeof t.symbol == "string" ? { type: "Uri", content: t.symbol } : t.symbol,
|
|
21
|
-
type: n,
|
|
22
|
-
padding: t.padding || "10px",
|
|
23
|
-
label: t.label,
|
|
24
|
-
size: t.size || "64px",
|
|
25
|
-
tooltip: t.tooltip,
|
|
26
|
-
order: t.order || 0,
|
|
27
|
-
show: t.show
|
|
28
|
-
}), e;
|
|
29
|
-
}, [[], []]), h = (s) => s.getAsync("router").then((e) => {
|
|
30
|
-
if (!e)
|
|
31
|
-
return !0;
|
|
32
|
-
const n = e.getInitialRoute(), { name: t, params: o } = e.getRouteData();
|
|
33
|
-
return b(o), !((n == null ? void 0 : n.name) !== t || Object.keys(o).length > 0);
|
|
34
|
-
}), z = (s) => f(s, "widget-header", import("./widget-header.95f2f17b.js"), (e) => {
|
|
35
|
-
const { events: n } = s.get("$widget"), [t, o] = p(n), { actions: c = {} } = e.properties();
|
|
36
|
-
if (e.actions.create("close", (r, i) => i.preventDefault ? void 0 : s.get("$widget").invoke("close")), e.actions.create("back", (r, i) => {
|
|
37
|
-
if (!i.preventDefault)
|
|
38
|
-
return s.getAsync("router").then((a) => {
|
|
39
|
-
a.goBack();
|
|
40
|
-
});
|
|
41
|
-
}), e.properties((r) => {
|
|
42
|
-
const { actions: i = {} } = r;
|
|
43
|
-
if (!!i.back)
|
|
44
|
-
return Object.keys(i).forEach((a) => {
|
|
45
|
-
const u = i[a];
|
|
46
|
-
a === "back" && (u.show = r.showBack);
|
|
47
|
-
}), { actions: i };
|
|
48
|
-
}), e.actions.create("show-back", (r) => {
|
|
49
|
-
e.writeProperties({ showBack: r });
|
|
50
|
-
}), c.back) {
|
|
51
|
-
const r = () => h(s).then((i) => e.actions.dispatch("show-back", !i));
|
|
52
|
-
r(), t("router:changed", r);
|
|
53
|
-
}
|
|
54
|
-
return e.actions.create("minimize", (r, i) => i.preventDefault ? void 0 : s.get("$widget").invoke("hide")), () => {
|
|
55
|
-
o();
|
|
56
|
-
};
|
|
57
|
-
});
|
|
58
|
-
export {
|
|
59
|
-
z as W,
|
|
60
|
-
y as a,
|
|
61
|
-
v as c
|
|
62
|
-
};
|
|
63
|
-
//# sourceMappingURL=index.7df5456d.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"widget-header.95f2f17b.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, { css } 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 {\r\n ${(p) =>\r\n p.theme.accessibility?.isTabbing &&\r\n css`\r\n ${borderTabStyle};\r\n border-color: ${p.theme.accessibility?.colors?.inactiveText};\r\n `};\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 {\r\n ${headingElement(\r\n 'h1',\r\n css`\r\n ${(p) =>\r\n p.theme.accessibility?.isTabbing &&\r\n css`\r\n ${linkTabStyle}\r\n display: inline-block;\r\n `};\r\n `\r\n )}\r\n }\r\n`;\r\n"],"names":["Wrapper"],"mappings":"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"}
|