@telia-ace/widget-components-widget-header 1.1.2-rc.0 → 1.1.2-rc.10
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/index-26817dc9.mjs +76 -0
- package/index-f5cf633e.js +1 -0
- package/index.js +1 -1
- package/index.mjs +1 -1
- package/package.json +5 -5
- package/{widget-header-3dd8c261.mjs → widget-header-4a80764f.mjs} +96 -81
- package/{widget-header-393b5e28.js → widget-header-cf59f574.js} +65 -65
- package/widget-header-component.d.ts +2 -0
- package/index-8f0189a9.js +0 -1
- package/index-cc80e958.mjs +0 -72
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { createEventSubscriber as b } from "@telia-ace/widget-core";
|
|
2
|
+
import { createReactComponent as g } from "@telia-ace/widget-ui";
|
|
3
|
+
import { removeNullAndUndefinedValues as f } from "@telia-ace/widget-utilities";
|
|
4
|
+
const z = (i, r, s) => {
|
|
5
|
+
if (s !== "center")
|
|
6
|
+
return {};
|
|
7
|
+
const e = (o) => o.reduce((t, a) => {
|
|
8
|
+
const [u] = a.padding.split("px"), [p] = a.size.split("px");
|
|
9
|
+
return t + (+p + +u * 2);
|
|
10
|
+
}, 0), n = e(i), c = e(r), l = n - c;
|
|
11
|
+
return l === 0 ? {} : {
|
|
12
|
+
[n > c ? "right" : "left"]: `${Math.abs(l)}px`
|
|
13
|
+
};
|
|
14
|
+
}, y = (i) => Object.keys(i).reduce(
|
|
15
|
+
(r, s) => {
|
|
16
|
+
const e = i[s];
|
|
17
|
+
if (!e)
|
|
18
|
+
return r;
|
|
19
|
+
const [n, c] = r, l = e.position === "left" ? n : c;
|
|
20
|
+
return i[s].symbol, l.push({
|
|
21
|
+
symbol: e.symbol && typeof e.symbol == "string" ? { type: "Uri", content: e.symbol } : e.symbol,
|
|
22
|
+
type: s,
|
|
23
|
+
padding: e.padding || "10px",
|
|
24
|
+
label: e.label,
|
|
25
|
+
size: e.size || "64px",
|
|
26
|
+
tooltip: e.tooltip,
|
|
27
|
+
order: e.order || 0,
|
|
28
|
+
show: e.show
|
|
29
|
+
}), r;
|
|
30
|
+
},
|
|
31
|
+
[[], []]
|
|
32
|
+
), m = (i) => i.getAsync("router").then((r) => {
|
|
33
|
+
if (!r)
|
|
34
|
+
return !0;
|
|
35
|
+
const s = r.getInitialRoute(), { name: e, params: n } = r.getRouteData();
|
|
36
|
+
return f(n), !((s == null ? void 0 : s.name) !== e || Object.keys(n).length > 0);
|
|
37
|
+
}), v = (i) => g(
|
|
38
|
+
i,
|
|
39
|
+
"widget-header",
|
|
40
|
+
import("./widget-header-4a80764f.mjs"),
|
|
41
|
+
(r) => {
|
|
42
|
+
const { events: s } = i.get("$widget"), [e, n] = b(s), {
|
|
43
|
+
actions: c = {},
|
|
44
|
+
tooltipBackLabel: l = "",
|
|
45
|
+
tooltipMinimizeLabel: d = ""
|
|
46
|
+
} = r.properties();
|
|
47
|
+
if (r.actions.create("close", (o, t) => t.preventDefault ? void 0 : i.get("$widget").invoke("close")), r.actions.create("back", (o, t) => {
|
|
48
|
+
if (!t.preventDefault)
|
|
49
|
+
return i.getAsync("router").then((a) => {
|
|
50
|
+
a.goBack();
|
|
51
|
+
});
|
|
52
|
+
}), r.properties((o) => {
|
|
53
|
+
const { actions: t = {} } = o;
|
|
54
|
+
if (t != null && t.back && (t.back.tooltip = t.back.tooltip ? t.back.tooltip : l), t != null && t.minimize && (t.minimize.tooltip = t.minimize.tooltip ? t.minimize.tooltip : d), !!t.back)
|
|
55
|
+
return Object.keys(t).forEach((a) => {
|
|
56
|
+
const u = t[a];
|
|
57
|
+
a === "back" && (u.show = o.showBack);
|
|
58
|
+
}), { actions: t };
|
|
59
|
+
}), r.actions.create("show-back", (o) => {
|
|
60
|
+
r.writeProperties({ showBack: o });
|
|
61
|
+
}), c.back) {
|
|
62
|
+
const o = () => m(i).then(
|
|
63
|
+
(t) => r.actions.dispatch("show-back", !t)
|
|
64
|
+
);
|
|
65
|
+
o(), e("router:changed", o);
|
|
66
|
+
}
|
|
67
|
+
return r.actions.create("minimize", (o, t) => t.preventDefault ? void 0 : i.get("$widget").invoke("hide")), () => {
|
|
68
|
+
n();
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
);
|
|
72
|
+
export {
|
|
73
|
+
v as W,
|
|
74
|
+
z as a,
|
|
75
|
+
y as c
|
|
76
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const b=require("@telia-ace/widget-core"),p=require("@telia-ace/widget-ui"),f=require("@telia-ace/widget-utilities"),h=(r,i,o)=>{if(o!=="center")return{};const t=s=>s.reduce((e,a)=>{const[u]=a.padding.split("px"),[g]=a.size.split("px");return e+(+g+ +u*2)},0),n=t(r),c=t(i),l=n-c;return l===0?{}:{[n>c?"right":"left"]:`${Math.abs(l)}px`}},w=r=>Object.keys(r).reduce((i,o)=>{const t=r[o];if(!t)return i;const[n,c]=i,l=t.position==="left"?n:c;return r[o].symbol,l.push({symbol:t.symbol&&typeof t.symbol=="string"?{type:"Uri",content:t.symbol}:t.symbol,type:o,padding:t.padding||"10px",label:t.label,size:t.size||"64px",tooltip:t.tooltip,order:t.order||0,show:t.show}),i},[[],[]]),m=r=>r.getAsync("router").then(i=>{if(!i)return!0;const o=i.getInitialRoute(),{name:t,params:n}=i.getRouteData();return f.removeNullAndUndefinedValues(n),!((o==null?void 0:o.name)!==t||Object.keys(n).length>0)}),k=r=>p.createReactComponent(r,"widget-header",Promise.resolve().then(()=>require("./widget-header-cf59f574.js")),i=>{const{events:o}=r.get("$widget"),[t,n]=b.createEventSubscriber(o),{actions:c={},tooltipBackLabel:l="",tooltipMinimizeLabel:d=""}=i.properties();if(i.actions.create("close",(s,e)=>e.preventDefault?void 0:r.get("$widget").invoke("close")),i.actions.create("back",(s,e)=>{if(!e.preventDefault)return r.getAsync("router").then(a=>{a.goBack()})}),i.properties(s=>{const{actions:e={}}=s;if(e!=null&&e.back&&(e.back.tooltip=e.back.tooltip?e.back.tooltip:l),e!=null&&e.minimize&&(e.minimize.tooltip=e.minimize.tooltip?e.minimize.tooltip:d),!!e.back)return Object.keys(e).forEach(a=>{const u=e[a];a==="back"&&(u.show=s.showBack)}),{actions:e}}),i.actions.create("show-back",s=>{i.writeProperties({showBack:s})}),c.back){const s=()=>m(r).then(e=>i.actions.dispatch("show-back",!e));s(),t("router:changed",s)}return i.actions.create("minimize",(s,e)=>e.preventDefault?void 0:r.get("$widget").invoke("hide")),()=>{n()}});exports.WidgetHeaderComponent=k;exports.calculateMargin=h;exports.createNodes=w;
|
package/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const e=require("./index-
|
|
1
|
+
"use strict";const e=require("./index-f5cf633e.js");require("@telia-ace/widget-core");require("@telia-ace/widget-ui");require("@telia-ace/widget-utilities");module.exports=e.WidgetHeaderComponent;
|
package/index.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telia-ace/widget-components-widget-header",
|
|
3
|
-
"version": "1.1.2-rc.
|
|
3
|
+
"version": "1.1.2-rc.10",
|
|
4
4
|
"main": "./index.js",
|
|
5
5
|
"types": "./index.d.ts",
|
|
6
6
|
"exports": {
|
|
@@ -10,10 +10,10 @@
|
|
|
10
10
|
}
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@telia-ace/widget-core": "^1.1.2-rc.
|
|
14
|
-
"@telia-ace/widget-routing": "^1.1.2-rc.
|
|
15
|
-
"@telia-ace/widget-ui": "^1.1.2-rc.
|
|
16
|
-
"@telia-ace/widget-utilities": "^1.1.2-rc.
|
|
13
|
+
"@telia-ace/widget-core": "^1.1.2-rc.10",
|
|
14
|
+
"@telia-ace/widget-routing": "^1.1.2-rc.10",
|
|
15
|
+
"@telia-ace/widget-ui": "^1.1.2-rc.10",
|
|
16
|
+
"@telia-ace/widget-utilities": "^1.1.2-rc.10",
|
|
17
17
|
"@webprovisions/platform": "^1.1.4"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
@@ -3,7 +3,7 @@ import { css as y } from "@emotion/react";
|
|
|
3
3
|
import c from "@emotion/styled";
|
|
4
4
|
import { SymbolBadge as h, borderTabStyle as z, useDispatch as k, TransitionComponent as N, useProperties as S, Typography as f, headingElement as v, Link as C, linkTabStyle as w } from "@telia-ace/widget-ui";
|
|
5
5
|
import { appendClassNames as T } from "@telia-ace/widget-utilities";
|
|
6
|
-
import { c as A, a as W } from "./index-
|
|
6
|
+
import { c as A, a as W } from "./index-26817dc9.mjs";
|
|
7
7
|
import "@telia-ace/widget-core";
|
|
8
8
|
const B = ({ node: e }) => {
|
|
9
9
|
if (!e.symbol)
|
|
@@ -14,16 +14,24 @@ const B = ({ node: e }) => {
|
|
|
14
14
|
const o = parseInt(e.size, 10);
|
|
15
15
|
isNaN(o) || (t = o);
|
|
16
16
|
}
|
|
17
|
-
return /* @__PURE__ */ i(
|
|
17
|
+
return /* @__PURE__ */ i(
|
|
18
|
+
I,
|
|
19
|
+
{
|
|
20
|
+
symbol: e.symbol,
|
|
21
|
+
svg: r,
|
|
22
|
+
size: t,
|
|
23
|
+
backgroundSize: "cover"
|
|
24
|
+
}
|
|
25
|
+
);
|
|
18
26
|
}, I = c(({ svg: e, ...t }) => /* @__PURE__ */ i(h, { ...t }))`
|
|
19
|
-
|
|
27
|
+
color: ${(e) => {
|
|
20
28
|
var t;
|
|
21
29
|
return (t = e.theme.colors) == null ? void 0 : t.text;
|
|
22
30
|
}};
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
31
|
+
${(e) => !e.svg && y`
|
|
32
|
+
border-radius: 50%;
|
|
33
|
+
overflow: hidden;
|
|
34
|
+
`}
|
|
27
35
|
`, M = ({ node: e }) => {
|
|
28
36
|
const t = e.symbol || { type: "Svg", content: "back" };
|
|
29
37
|
return /* @__PURE__ */ i(h, { size: 20, symbol: t });
|
|
@@ -97,42 +105,42 @@ const B = ({ node: e }) => {
|
|
|
97
105
|
}
|
|
98
106
|
) : null;
|
|
99
107
|
}, $ = c.div`
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
+
flex: 1;
|
|
109
|
+
max-width: ${(e) => e.size};
|
|
110
|
+
${(e) => e.squareRatio && `max-height: ${e.size};`}
|
|
111
|
+
text-align: center;
|
|
112
|
+
padding: 0 ${(e) => e.padding};
|
|
113
|
+
&& {
|
|
114
|
+
box-sizing: content-box;
|
|
115
|
+
}
|
|
108
116
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
117
|
+
svg {
|
|
118
|
+
vertical-align: middle;
|
|
119
|
+
}
|
|
112
120
|
|
|
113
|
-
|
|
114
|
-
|
|
121
|
+
i {
|
|
122
|
+
color: ${(e) => {
|
|
115
123
|
var t;
|
|
116
124
|
return (t = e.theme.colors) == null ? void 0 : t.text;
|
|
117
125
|
}};
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
126
|
+
font-size: ${(e) => e.size};
|
|
127
|
+
min-width: 1em;
|
|
128
|
+
min-height: 1em;
|
|
129
|
+
display: inline-block;
|
|
130
|
+
}
|
|
123
131
|
`, b = c.button`
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
+
${(e) => !!e.animationCss && e.animationCss};
|
|
133
|
+
background: none;
|
|
134
|
+
border: none;
|
|
135
|
+
cursor: pointer;
|
|
136
|
+
padding: 0;
|
|
137
|
+
&:focus-visible {
|
|
138
|
+
${z};
|
|
139
|
+
border-color: ${(e) => {
|
|
132
140
|
var t, r;
|
|
133
141
|
return (r = (t = e.theme.accessibility) == null ? void 0 : t.colors) == null ? void 0 : r.inactiveText;
|
|
134
142
|
}};
|
|
135
|
-
|
|
143
|
+
}
|
|
136
144
|
`, O = ({ className: e, ...t }) => {
|
|
137
145
|
const {
|
|
138
146
|
header: r,
|
|
@@ -142,80 +150,87 @@ const B = ({ node: e }) => {
|
|
|
142
150
|
actions: a = {},
|
|
143
151
|
textAlign: g = "center"
|
|
144
152
|
} = S(), [d, p] = A(a);
|
|
145
|
-
return d.sort((s, l) => (s.order || 0) - (l.order || 0)), p.sort((s, l) => (s.order || 0) - (l.order || 0)), /* @__PURE__ */ u(
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
153
|
+
return d.sort((s, l) => (s.order || 0) - (l.order || 0)), p.sort((s, l) => (s.order || 0) - (l.order || 0)), /* @__PURE__ */ u(
|
|
154
|
+
L,
|
|
155
|
+
{
|
|
156
|
+
...t,
|
|
157
|
+
className: T(e, "humany-widget-header"),
|
|
158
|
+
children: [
|
|
159
|
+
d.map((s, l) => /* @__PURE__ */ i(x, { ...s }, `${s.type}+_${l}`)),
|
|
160
|
+
/* @__PURE__ */ u(
|
|
161
|
+
_,
|
|
162
|
+
{
|
|
163
|
+
textAlign: g,
|
|
164
|
+
margin: W(d, p, g),
|
|
165
|
+
children: [
|
|
166
|
+
m ? /* @__PURE__ */ i(D, { routeName: m, title: n, "aria-label": n, children: /* @__PURE__ */ i(f, { variant: "h1", children: r }) }) : /* @__PURE__ */ i(f, { variant: "h1", children: r }),
|
|
167
|
+
o && /* @__PURE__ */ i(R, { children: o })
|
|
168
|
+
]
|
|
169
|
+
}
|
|
170
|
+
),
|
|
171
|
+
p.map((s, l) => /* @__PURE__ */ i(x, { ...s }, `${s.type}+_${l}`))
|
|
172
|
+
]
|
|
173
|
+
}
|
|
174
|
+
);
|
|
160
175
|
}, L = c.div`
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
176
|
+
display: flex;
|
|
177
|
+
flex-direction: row;
|
|
178
|
+
align-items: center;
|
|
164
179
|
|
|
165
|
-
|
|
180
|
+
${(e) => {
|
|
166
181
|
var t, r;
|
|
167
182
|
return v(e)(
|
|
168
183
|
"h1",
|
|
169
184
|
y`
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
185
|
+
font-size: ${(t = e.theme.fonts) == null ? void 0 : t.huge};
|
|
186
|
+
margin: 0;
|
|
187
|
+
font-weight: 300;
|
|
188
|
+
color: ${(r = e.theme.colors) == null ? void 0 : r.text};
|
|
189
|
+
`
|
|
175
190
|
);
|
|
176
191
|
}}
|
|
177
192
|
|
|
178
|
-
|
|
179
|
-
|
|
193
|
+
p {
|
|
194
|
+
color: ${(e) => {
|
|
180
195
|
var t;
|
|
181
196
|
return (t = e.theme.colors) == null ? void 0 : t.text;
|
|
182
197
|
}};
|
|
183
|
-
|
|
184
|
-
|
|
198
|
+
margin: 0;
|
|
199
|
+
}
|
|
185
200
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
201
|
+
svg {
|
|
202
|
+
line,
|
|
203
|
+
path,
|
|
204
|
+
circle {
|
|
205
|
+
stroke: ${(e) => {
|
|
191
206
|
var t;
|
|
192
207
|
return (t = e.theme.colors) == null ? void 0 : t.text;
|
|
193
208
|
}};
|
|
194
|
-
}
|
|
195
209
|
}
|
|
210
|
+
}
|
|
196
211
|
`, R = c.p`
|
|
197
|
-
|
|
212
|
+
font-size: ${(e) => {
|
|
198
213
|
var t;
|
|
199
214
|
return (t = e.theme.fonts) == null ? void 0 : t.normal;
|
|
200
215
|
}};
|
|
201
|
-
|
|
216
|
+
font-weight: 300;
|
|
202
217
|
`, _ = c.div`
|
|
203
|
-
|
|
204
|
-
|
|
218
|
+
flex: 1;
|
|
219
|
+
text-align: ${(e) => e.textAlign};
|
|
205
220
|
|
|
206
|
-
|
|
207
|
-
|
|
221
|
+
margin-right: ${(e) => e.margin.right || 0};
|
|
222
|
+
margin-left: ${(e) => e.margin.left || 0};
|
|
208
223
|
`, D = c(C)`
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
224
|
+
text-decoration: none;
|
|
225
|
+
&:focus-visible {
|
|
226
|
+
${(e) => v(e)(
|
|
212
227
|
"h1",
|
|
213
228
|
y`
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
229
|
+
${w(e)}
|
|
230
|
+
display: inline-block;
|
|
231
|
+
`
|
|
217
232
|
)}
|
|
218
|
-
|
|
233
|
+
}
|
|
219
234
|
`;
|
|
220
235
|
export {
|
|
221
236
|
O as default
|
|
@@ -1,79 +1,79 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),u=require("@emotion/react"),m=require("@emotion/styled"),r=require("@telia-ace/widget-ui"),v=require("@telia-ace/widget-utilities"),b=require("./index-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),u=require("@emotion/react"),m=require("@emotion/styled"),r=require("@telia-ace/widget-ui"),v=require("@telia-ace/widget-utilities"),b=require("./index-f5cf633e.js");require("@telia-ace/widget-core");const j=({node:e})=>{if(!e.symbol)return null;let t;const s=e.symbol.type==="Svg";if(e.symbol.type==="Svg"){const o=parseInt(e.size,10);isNaN(o)||(t=o)}return i.jsx(f,{symbol:e.symbol,svg:s,size:t,backgroundSize:"cover"})},f=m(({svg:e,...t})=>i.jsx(r.SymbolBadge,{...t}))`
|
|
2
|
+
color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
|
|
3
|
+
${e=>!e.svg&&u.css`
|
|
4
|
+
border-radius: 50%;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
`}
|
|
7
7
|
`,z=({node:e})=>{const t=e.symbol||{type:"Svg",content:"back"};return i.jsx(r.SymbolBadge,{size:20,symbol:t})},S=({node:e})=>{const t=e.symbol||{type:"Svg",content:"close"},s=parseInt(e==null?void 0:e.size,10)||14;return i.jsx(r.SymbolBadge,{size:s,symbol:t})},k=({node:e})=>{const t=e.symbol||{type:"Svg",content:"minimize"},s=parseInt(e==null?void 0:e.size,10)||20;return i.jsx(r.SymbolBadge,{size:s,symbol:t})},y=({className:e="",...t})=>{const s=r.useDispatch(),{size:o,padding:g,type:a,tooltip:l,show:d=!0}=t;return a==="back"?i.jsx($,{size:o||"64px",padding:g||"10px",children:i.jsx(r.TransitionComponent,{in:d,timeout:300,transitions:{enter:{type:"scale",easing:"cubic-bezier(.08,.84,.74,1.84)"},exit:{type:"scale",easing:"ease-out"}},children:(h,x)=>i.jsx(p,{title:l,"aria-label":l,animationCss:x,onClick:()=>{s("back")},children:i.jsx(z,{node:t})})})}):d?i.jsxs($,{size:o||"64px",padding:g||"10px",squareRatio:a==="avatar",children:[a==="avatar"&&i.jsx(j,{node:t}),a==="close"&&i.jsx(p,{title:l,"aria-label":l,onClick:()=>{s("close")},children:i.jsx(S,{node:t})}),a==="minimize"&&i.jsx(p,{title:l,"aria-label":l,onClick:()=>{s("minimize")},children:i.jsx(k,{node:t})})]}):null},$=m.div`
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
8
|
+
flex: 1;
|
|
9
|
+
max-width: ${e=>e.size};
|
|
10
|
+
${e=>e.squareRatio&&`max-height: ${e.size};`}
|
|
11
|
+
text-align: center;
|
|
12
|
+
padding: 0 ${e=>e.padding};
|
|
13
|
+
&& {
|
|
14
|
+
box-sizing: content-box;
|
|
15
|
+
}
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
svg {
|
|
18
|
+
vertical-align: middle;
|
|
19
|
+
}
|
|
20
20
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
21
|
+
i {
|
|
22
|
+
color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
|
|
23
|
+
font-size: ${e=>e.size};
|
|
24
|
+
min-width: 1em;
|
|
25
|
+
min-height: 1em;
|
|
26
|
+
display: inline-block;
|
|
27
|
+
}
|
|
28
28
|
`,p=m.button`
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
29
|
+
${e=>!!e.animationCss&&e.animationCss};
|
|
30
|
+
background: none;
|
|
31
|
+
border: none;
|
|
32
|
+
cursor: pointer;
|
|
33
|
+
padding: 0;
|
|
34
|
+
&:focus-visible {
|
|
35
|
+
${r.borderTabStyle};
|
|
36
|
+
border-color: ${e=>{var t,s;return(s=(t=e.theme.accessibility)==null?void 0:t.colors)==null?void 0:s.inactiveText}};
|
|
37
|
+
}
|
|
38
38
|
`,N=({className:e,...t})=>{const{header:s,tagline:o,route:g,tooltip:a="",actions:l={},textAlign:d="center"}=r.useProperties(),[h,x]=b.createNodes(l);return h.sort((n,c)=>(n.order||0)-(c.order||0)),x.sort((n,c)=>(n.order||0)-(c.order||0)),i.jsxs(w,{...t,className:v.appendClassNames(e,"humany-widget-header"),children:[h.map((n,c)=>i.jsx(y,{...n},`${n.type}+_${c}`)),i.jsxs(C,{textAlign:d,margin:b.calculateMargin(h,x,d),children:[g?i.jsx(T,{routeName:g,title:a,"aria-label":a,children:i.jsx(r.Typography,{variant:"h1",children:s})}):i.jsx(r.Typography,{variant:"h1",children:s}),o&&i.jsx(q,{children:o})]}),x.map((n,c)=>i.jsx(y,{...n},`${n.type}+_${c}`))]})},w=m.div`
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: row;
|
|
41
|
+
align-items: center;
|
|
42
42
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
margin: 0;
|
|
46
|
-
font-weight: 300;
|
|
47
|
-
color: ${(s=e.theme.colors)==null?void 0:s.text};
|
|
48
|
-
`)}}
|
|
49
|
-
|
|
50
|
-
p {
|
|
51
|
-
color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
|
|
43
|
+
${e=>{var t,s;return r.headingElement(e)("h1",u.css`
|
|
44
|
+
font-size: ${(t=e.theme.fonts)==null?void 0:t.huge};
|
|
52
45
|
margin: 0;
|
|
53
|
-
|
|
46
|
+
font-weight: 300;
|
|
47
|
+
color: ${(s=e.theme.colors)==null?void 0:s.text};
|
|
48
|
+
`)}}
|
|
54
49
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
50
|
+
p {
|
|
51
|
+
color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
|
|
52
|
+
margin: 0;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
svg {
|
|
56
|
+
line,
|
|
57
|
+
path,
|
|
58
|
+
circle {
|
|
59
|
+
stroke: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
|
|
61
60
|
}
|
|
61
|
+
}
|
|
62
62
|
`,q=m.p`
|
|
63
|
-
|
|
64
|
-
|
|
63
|
+
font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
|
|
64
|
+
font-weight: 300;
|
|
65
65
|
`,C=m.div`
|
|
66
|
-
|
|
67
|
-
|
|
66
|
+
flex: 1;
|
|
67
|
+
text-align: ${e=>e.textAlign};
|
|
68
68
|
|
|
69
|
-
|
|
70
|
-
|
|
69
|
+
margin-right: ${e=>e.margin.right||0};
|
|
70
|
+
margin-left: ${e=>e.margin.left||0};
|
|
71
71
|
`,T=m(r.Link)`
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
72
|
+
text-decoration: none;
|
|
73
|
+
&:focus-visible {
|
|
74
|
+
${e=>r.headingElement(e)("h1",u.css`
|
|
75
|
+
${r.linkTabStyle(e)}
|
|
76
|
+
display: inline-block;
|
|
77
|
+
`)}
|
|
78
|
+
}
|
|
79
79
|
`;exports.default=N;
|
|
@@ -22,6 +22,8 @@ export type WidgetHeaderComponentProps = {
|
|
|
22
22
|
[key: string]: ActionNode;
|
|
23
23
|
};
|
|
24
24
|
tooltip?: string;
|
|
25
|
+
tooltipBackLabel?: string;
|
|
26
|
+
tooltipMinimizeLabel?: string;
|
|
25
27
|
route?: string;
|
|
26
28
|
};
|
|
27
29
|
declare const WidgetHeaderComponent: (container: Container) => Promise<void>;
|
package/index-8f0189a9.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";const b=require("@telia-ace/widget-core"),f=require("@telia-ace/widget-ui"),h=require("@telia-ace/widget-utilities"),p=(s,t,n)=>{if(n!=="center")return{};const e=c=>c.reduce((u,d)=>{const[l]=d.padding.split("px"),[g]=d.size.split("px");return u+(+g+ +l*2)},0),o=e(s),a=e(t),r=o-a;return r===0?{}:{[o>a?"right":"left"]:`${Math.abs(r)}px`}},w=s=>Object.keys(s).reduce((t,n)=>{const e=s[n];if(!e)return t;const[o,a]=t,r=e.position==="left"?o:a;return s[n].symbol,r.push({symbol:e.symbol&&typeof e.symbol=="string"?{type:"Uri",content:e.symbol}:e.symbol,type:n,padding:e.padding||"10px",label:e.label,size:e.size||"64px",tooltip:e.tooltip,order:e.order||0,show:e.show}),t},[[],[]]),k=s=>s.getAsync("router").then(t=>{if(!t)return!0;const n=t.getInitialRoute(),{name:e,params:o}=t.getRouteData();return h.removeNullAndUndefinedValues(o),!((n==null?void 0:n.name)!==e||Object.keys(o).length>0)}),y=s=>f.createReactComponent(s,"widget-header",Promise.resolve().then(()=>require("./widget-header-393b5e28.js")),t=>{const{events:n}=s.get("$widget"),[e,o]=b.createEventSubscriber(n),{actions:a={}}=t.properties();if(t.actions.create("close",(r,i)=>i.preventDefault?void 0:s.get("$widget").invoke("close")),t.actions.create("back",(r,i)=>{if(!i.preventDefault)return s.getAsync("router").then(c=>{c.goBack()})}),t.properties(r=>{const{actions:i={}}=r;if(i.back)return Object.keys(i).forEach(c=>{const u=i[c];c==="back"&&(u.show=r.showBack)}),{actions:i}}),t.actions.create("show-back",r=>{t.writeProperties({showBack:r})}),a.back){const r=()=>k(s).then(i=>t.actions.dispatch("show-back",!i));r(),e("router:changed",r)}return t.actions.create("minimize",(r,i)=>i.preventDefault?void 0:s.get("$widget").invoke("hide")),()=>{o()}});exports.WidgetHeaderComponent=y;exports.calculateMargin=p;exports.createNodes=w;
|
package/index-cc80e958.mjs
DELETED
|
@@ -1,72 +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(
|
|
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-3dd8c261.mjs"),
|
|
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
|
-
};
|