highsoft-ui 1.0.23 → 1.0.25
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/components/Header/index.js +80 -76
- package/package.json +1 -1
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { jsx as e, jsxs as s, Fragment as
|
|
2
|
-
import { useState as
|
|
1
|
+
import { jsx as e, jsxs as s, Fragment as P } from "react/jsx-runtime";
|
|
2
|
+
import { useState as z, useEffect as V } from "react";
|
|
3
3
|
import { J as q } from "../../index-CMegByeX.js";
|
|
4
4
|
import { _ as d } from "../../extends-hS2Bh-Yp.js";
|
|
5
5
|
import { N as J, X as A } from "../../index-ChurKizy.js";
|
|
6
|
-
import { c as
|
|
6
|
+
import { c as v } from "../../clsx-OuTLNxxd.js";
|
|
7
7
|
import { Button as h } from "../Button/index.js";
|
|
8
|
-
import { Container as
|
|
9
|
-
import { ThemedLogo as
|
|
10
|
-
import { PrefPanel as
|
|
11
|
-
import { useMediaQuery as
|
|
8
|
+
import { Container as y } from "../Container/index.js";
|
|
9
|
+
import { ThemedLogo as L } from "../Logo/index.js";
|
|
10
|
+
import { PrefPanel as S } from "../PrefPanel/index.js";
|
|
11
|
+
import { useMediaQuery as N, useLocation as G } from "../../utils.js";
|
|
12
12
|
var F = function(t) {
|
|
13
13
|
return /* @__PURE__ */ e("svg", d({
|
|
14
14
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -121,7 +121,7 @@ var F = function(t) {
|
|
|
121
121
|
d: "M12 16v5m6 0-3.9514-3.2928c-.7288-.6074-1.0932-.911-1.4999-1.0271a2 2 0 0 0-1.0974 0c-.4067.1161-.7711.4197-1.4999 1.0271L6 21m2-10v1m4-3v3m4-5v5m6-9H2m1 0h18v8.2c0 1.6802 0 2.5202-.327 3.162a3 3 0 0 1-1.311 1.311C18.7202 16 17.8802 16 16.2 16H7.8c-1.6802 0-2.5202 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 13.7202 3 12.8802 3 11.2z"
|
|
122
122
|
})
|
|
123
123
|
}));
|
|
124
|
-
},
|
|
124
|
+
}, T = function(t) {
|
|
125
125
|
return /* @__PURE__ */ e("svg", d({
|
|
126
126
|
xmlns: "http://www.w3.org/2000/svg",
|
|
127
127
|
width: 24,
|
|
@@ -137,7 +137,7 @@ var F = function(t) {
|
|
|
137
137
|
d: "m21 21-4.35-4.35M19 11c0 4.4183-3.5817 8-8 8s-8-3.5817-8-8 3.5817-8 8-8 8 3.5817 8 8"
|
|
138
138
|
})
|
|
139
139
|
}));
|
|
140
|
-
},
|
|
140
|
+
}, B = function(t) {
|
|
141
141
|
return /* @__PURE__ */ e("svg", d({
|
|
142
142
|
xmlns: "http://www.w3.org/2000/svg",
|
|
143
143
|
width: 24,
|
|
@@ -153,7 +153,7 @@ var F = function(t) {
|
|
|
153
153
|
d: "M4.5 22v-5m0-10V2M2 4.5h5m-5 15h5M13 3l-1.7342 4.5089c-.282.7332-.423 1.0998-.6423 1.4082a3 3 0 0 1-.7064.7064c-.3084.2193-.675.3603-1.4082.6423L4 12l4.5089 1.7342c.7332.282 1.0998.423 1.4082.6423.2733.1943.5121.4331.7064.7064.2193.3084.3603.675.6423 1.4082L13 21l1.7342-4.5089c.282-.7332.423-1.0998.6423-1.4082a3 3 0 0 1 .7064-.7064c.3084-.2193.675-.3603 1.4082-.6423L22 12l-4.5089-1.7342c-.7332-.282-1.0998-.423-1.4082-.6423a3 3 0 0 1-.7064-.7064c-.2193-.3084-.3603-.675-.6423-1.4082z"
|
|
154
154
|
})
|
|
155
155
|
}));
|
|
156
|
-
},
|
|
156
|
+
}, W = function(t) {
|
|
157
157
|
return /* @__PURE__ */ e("svg", d({
|
|
158
158
|
xmlns: "http://www.w3.org/2000/svg",
|
|
159
159
|
width: 24,
|
|
@@ -207,7 +207,7 @@ const I = "_header_1vxsz_270", K = "_outer_1vxsz_281", Y = "_main_1vxsz_290", Z
|
|
|
207
207
|
slideUp: d1,
|
|
208
208
|
sub: u1,
|
|
209
209
|
gpt: m1
|
|
210
|
-
},
|
|
210
|
+
}, j = [
|
|
211
211
|
{
|
|
212
212
|
title: "Products",
|
|
213
213
|
url: "https://highcharts.com/products/",
|
|
@@ -245,70 +245,74 @@ function l(n, t) {
|
|
|
245
245
|
function w1({
|
|
246
246
|
items: n,
|
|
247
247
|
link: t = "a",
|
|
248
|
-
host:
|
|
248
|
+
host: p = "https://www.highcharts.com"
|
|
249
249
|
}) {
|
|
250
|
-
const
|
|
251
|
-
return /* @__PURE__ */ e("div", { className:
|
|
252
|
-
w = l(
|
|
253
|
-
|
|
250
|
+
const i = G();
|
|
251
|
+
return /* @__PURE__ */ e("div", { className: v(r.sub, r.outer), children: /* @__PURE__ */ e(y, { className: r.subContainer, as: "ul", children: n.map(({ title: a, url: f, icon: C, tag: x, tagVariant: m = "success" }, b) => {
|
|
252
|
+
const w = l(f, p);
|
|
253
|
+
let g = !1;
|
|
254
|
+
if (typeof window < "u" && i) {
|
|
255
|
+
const _ = window.location.origin, k = new URL(w, _);
|
|
256
|
+
g = (f.startsWith("/") || k.origin === _) && k.pathname === i.pathname;
|
|
257
|
+
}
|
|
254
258
|
return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ s(
|
|
255
259
|
t,
|
|
256
260
|
{
|
|
257
261
|
href: w,
|
|
258
|
-
className:
|
|
259
|
-
[r.selected]:
|
|
262
|
+
className: v({
|
|
263
|
+
[r.selected]: g
|
|
260
264
|
}),
|
|
261
265
|
children: [
|
|
262
|
-
|
|
266
|
+
C,
|
|
263
267
|
/* @__PURE__ */ s("span", { children: [
|
|
264
268
|
a,
|
|
265
|
-
|
|
269
|
+
x && /* @__PURE__ */ e(
|
|
266
270
|
"span",
|
|
267
271
|
{
|
|
268
|
-
className:
|
|
272
|
+
className: v(
|
|
269
273
|
r.subTag,
|
|
270
274
|
r[`subTag-${m}`]
|
|
271
275
|
),
|
|
272
|
-
children:
|
|
276
|
+
children: x
|
|
273
277
|
}
|
|
274
278
|
)
|
|
275
279
|
] })
|
|
276
280
|
]
|
|
277
281
|
}
|
|
278
|
-
) },
|
|
282
|
+
) }, b);
|
|
279
283
|
}) }) });
|
|
280
284
|
}
|
|
281
285
|
function z1({
|
|
282
286
|
subItems: n,
|
|
283
287
|
children: t,
|
|
284
|
-
notifications:
|
|
288
|
+
notifications: p = [],
|
|
285
289
|
// TODO: Fetch these from the internets
|
|
286
|
-
link:
|
|
290
|
+
link: i = "a",
|
|
287
291
|
host: a = "https://www.highcharts.com"
|
|
288
292
|
}) {
|
|
289
|
-
const
|
|
293
|
+
const f = N("(max-width: 374px)"), C = N("(max-width: 849px)"), x = N("(min-width: 850px) and (max-width: 999px)"), [m, b] = z(!1), [w, g] = z([]);
|
|
290
294
|
V(() => {
|
|
291
|
-
if (
|
|
295
|
+
if (p.length) {
|
|
292
296
|
const c = localStorage.getItem("notifications");
|
|
293
297
|
if (c) {
|
|
294
298
|
const u = JSON.parse(c);
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
(
|
|
299
|
+
g(
|
|
300
|
+
p.filter(
|
|
301
|
+
(o) => !o.id || !u.closed.includes(o.id)
|
|
298
302
|
)
|
|
299
303
|
);
|
|
300
304
|
} else
|
|
301
|
-
|
|
305
|
+
g(p);
|
|
302
306
|
}
|
|
303
|
-
}, [
|
|
304
|
-
const
|
|
305
|
-
|
|
306
|
-
},
|
|
307
|
-
|
|
307
|
+
}, [p]);
|
|
308
|
+
const _ = () => {
|
|
309
|
+
b(!m);
|
|
310
|
+
}, k = (c) => {
|
|
311
|
+
g(w.filter((o) => !o.id || o.id !== c));
|
|
308
312
|
const u = localStorage.getItem("notifications");
|
|
309
313
|
if (u) {
|
|
310
|
-
const
|
|
311
|
-
|
|
314
|
+
const o = JSON.parse(u);
|
|
315
|
+
o.closed.includes(c) || (o.closed.push(c), localStorage.setItem("notifications", JSON.stringify(o)));
|
|
312
316
|
} else
|
|
313
317
|
localStorage.setItem(
|
|
314
318
|
"notifications",
|
|
@@ -318,61 +322,61 @@ function z1({
|
|
|
318
322
|
);
|
|
319
323
|
};
|
|
320
324
|
return /* @__PURE__ */ e(q, { children: /* @__PURE__ */ s("header", { className: r.header, children: [
|
|
321
|
-
|
|
322
|
-
({ id: c, title: u, description:
|
|
325
|
+
w == null ? void 0 : w.map(
|
|
326
|
+
({ id: c, title: u, description: o, variant: M, closable: O }, U) => /* @__PURE__ */ e(
|
|
323
327
|
J,
|
|
324
328
|
{
|
|
325
|
-
description:
|
|
326
|
-
variant:
|
|
329
|
+
description: o,
|
|
330
|
+
variant: M,
|
|
327
331
|
closable: O,
|
|
328
|
-
onClose: () =>
|
|
332
|
+
onClose: () => k(c),
|
|
329
333
|
children: u
|
|
330
334
|
},
|
|
331
|
-
|
|
335
|
+
U
|
|
332
336
|
)
|
|
333
337
|
),
|
|
334
|
-
/* @__PURE__ */ e("div", { className:
|
|
338
|
+
/* @__PURE__ */ e("div", { className: v(r.main, r.outer), children: /* @__PURE__ */ s(y, { as: "nav", className: r.container, children: [
|
|
335
339
|
/* @__PURE__ */ e(
|
|
336
|
-
|
|
340
|
+
i,
|
|
337
341
|
{
|
|
338
342
|
className: r.logo,
|
|
339
343
|
href: l("https://www.highcharts.com/", a),
|
|
340
|
-
children: /* @__PURE__ */ e(
|
|
344
|
+
children: /* @__PURE__ */ e(L, { showText: !x && !f })
|
|
341
345
|
}
|
|
342
346
|
),
|
|
343
|
-
/* @__PURE__ */ e("ul", { className: r.links, children:
|
|
347
|
+
/* @__PURE__ */ e("ul", { className: r.links, children: j.map(({ title: c, url: u }, o) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
|
|
344
348
|
h,
|
|
345
349
|
{
|
|
346
350
|
variant: "plain",
|
|
347
351
|
size: 300,
|
|
348
|
-
as:
|
|
352
|
+
as: i,
|
|
349
353
|
href: l(u, a),
|
|
350
354
|
children: c
|
|
351
355
|
}
|
|
352
|
-
) },
|
|
356
|
+
) }, o)) }),
|
|
353
357
|
/* @__PURE__ */ s("div", { className: r.buttons, children: [
|
|
354
358
|
/* @__PURE__ */ s(
|
|
355
359
|
h,
|
|
356
360
|
{
|
|
357
361
|
variant: "transparent",
|
|
358
|
-
as:
|
|
362
|
+
as: i,
|
|
359
363
|
href: l(
|
|
360
364
|
"https://www.highcharts.com/chat/gpt/",
|
|
361
365
|
a
|
|
362
366
|
),
|
|
363
367
|
children: [
|
|
364
368
|
/* @__PURE__ */ e("span", { className: r.gpt, children: "Highcharts GPT" }),
|
|
365
|
-
/* @__PURE__ */ e(
|
|
369
|
+
/* @__PURE__ */ e(B, {})
|
|
366
370
|
]
|
|
367
371
|
}
|
|
368
372
|
),
|
|
369
|
-
/* @__PURE__ */ e(h, { variant: "transparent", "aria-label": "Search", children: /* @__PURE__ */ e(
|
|
370
|
-
/* @__PURE__ */ e(
|
|
373
|
+
/* @__PURE__ */ e(h, { variant: "transparent", "aria-label": "Search", children: /* @__PURE__ */ e(T, {}) }),
|
|
374
|
+
/* @__PURE__ */ e(S, {}),
|
|
371
375
|
/* @__PURE__ */ e(
|
|
372
376
|
h,
|
|
373
377
|
{
|
|
374
378
|
variant: "brand",
|
|
375
|
-
as:
|
|
379
|
+
as: i,
|
|
376
380
|
href: l("https://shop.highcharts.com/account", a),
|
|
377
381
|
"aria-label": "Login",
|
|
378
382
|
children: /* @__PURE__ */ e(H, {})
|
|
@@ -382,13 +386,13 @@ function z1({
|
|
|
382
386
|
h,
|
|
383
387
|
{
|
|
384
388
|
variant: "success",
|
|
385
|
-
as:
|
|
389
|
+
as: i,
|
|
386
390
|
href: l(
|
|
387
391
|
"https://www.highcharts.com/download/",
|
|
388
392
|
a
|
|
389
393
|
),
|
|
390
394
|
children: [
|
|
391
|
-
/* @__PURE__ */ e(
|
|
395
|
+
/* @__PURE__ */ e(W, {}),
|
|
392
396
|
"Get started"
|
|
393
397
|
]
|
|
394
398
|
}
|
|
@@ -398,7 +402,7 @@ function z1({
|
|
|
398
402
|
{
|
|
399
403
|
variant: m ? "white" : "transparent",
|
|
400
404
|
className: r.menu,
|
|
401
|
-
onClick:
|
|
405
|
+
onClick: _,
|
|
402
406
|
children: [
|
|
403
407
|
m ? "Close" : "Menu",
|
|
404
408
|
m ? /* @__PURE__ */ e(A, {}) : /* @__PURE__ */ e($, {})
|
|
@@ -407,30 +411,30 @@ function z1({
|
|
|
407
411
|
)
|
|
408
412
|
] })
|
|
409
413
|
] }) }),
|
|
410
|
-
!!(n != null && n.length) && /* @__PURE__ */ e(w1, { items: n, link:
|
|
414
|
+
!!(n != null && n.length) && /* @__PURE__ */ e(w1, { items: n, link: i, host: a }),
|
|
411
415
|
t,
|
|
412
|
-
|
|
416
|
+
C && /* @__PURE__ */ s(P, { children: [
|
|
413
417
|
/* @__PURE__ */ e(
|
|
414
418
|
"div",
|
|
415
419
|
{
|
|
416
|
-
className:
|
|
417
|
-
onClick:
|
|
420
|
+
className: v(r.mobileOverlay, { [r.open]: m }),
|
|
421
|
+
onClick: _
|
|
418
422
|
}
|
|
419
423
|
),
|
|
420
424
|
/* @__PURE__ */ s(
|
|
421
425
|
"nav",
|
|
422
426
|
{
|
|
423
|
-
className:
|
|
427
|
+
className: v(r.mobile, {
|
|
424
428
|
[r.open]: m
|
|
425
429
|
}),
|
|
426
430
|
children: [
|
|
427
431
|
/* @__PURE__ */ s("div", { className: r.container, children: [
|
|
428
432
|
/* @__PURE__ */ e(
|
|
429
|
-
|
|
433
|
+
i,
|
|
430
434
|
{
|
|
431
435
|
className: r.logo,
|
|
432
436
|
href: l("https://www.highcharts.com/", a),
|
|
433
|
-
children: /* @__PURE__ */ e(
|
|
437
|
+
children: /* @__PURE__ */ e(L, { showText: !f })
|
|
434
438
|
}
|
|
435
439
|
),
|
|
436
440
|
/* @__PURE__ */ s("div", { className: r.buttons, children: [
|
|
@@ -438,19 +442,19 @@ function z1({
|
|
|
438
442
|
h,
|
|
439
443
|
{
|
|
440
444
|
variant: "transparent",
|
|
441
|
-
as:
|
|
445
|
+
as: i,
|
|
442
446
|
href: l(
|
|
443
447
|
"https://www.highcharts.com/chat/gpt/",
|
|
444
448
|
a
|
|
445
449
|
),
|
|
446
450
|
children: [
|
|
447
451
|
/* @__PURE__ */ e("span", { className: r.gpt, children: "Highcharts GPT" }),
|
|
448
|
-
/* @__PURE__ */ e(
|
|
452
|
+
/* @__PURE__ */ e(B, {})
|
|
449
453
|
]
|
|
450
454
|
}
|
|
451
455
|
),
|
|
452
|
-
/* @__PURE__ */ e(h, { variant: "transparent", "aria-label": "Search", children: /* @__PURE__ */ e(
|
|
453
|
-
/* @__PURE__ */ e(
|
|
456
|
+
/* @__PURE__ */ e(h, { variant: "transparent", "aria-label": "Search", children: /* @__PURE__ */ e(T, {}) }),
|
|
457
|
+
/* @__PURE__ */ e(S, {})
|
|
454
458
|
] })
|
|
455
459
|
] }),
|
|
456
460
|
/* @__PURE__ */ s("div", { className: r.buttons, children: [
|
|
@@ -459,7 +463,7 @@ function z1({
|
|
|
459
463
|
{
|
|
460
464
|
variant: "brand",
|
|
461
465
|
fullWidth: !0,
|
|
462
|
-
as:
|
|
466
|
+
as: i,
|
|
463
467
|
href: l(
|
|
464
468
|
"https://shop.highcharts.com/account",
|
|
465
469
|
a
|
|
@@ -475,32 +479,32 @@ function z1({
|
|
|
475
479
|
{
|
|
476
480
|
variant: "success",
|
|
477
481
|
fullWidth: !0,
|
|
478
|
-
as:
|
|
482
|
+
as: i,
|
|
479
483
|
href: l(
|
|
480
484
|
"https://www.highcharts.com/download/",
|
|
481
485
|
a
|
|
482
486
|
),
|
|
483
487
|
children: [
|
|
484
|
-
/* @__PURE__ */ e(
|
|
488
|
+
/* @__PURE__ */ e(W, {}),
|
|
485
489
|
"Get started"
|
|
486
490
|
]
|
|
487
491
|
}
|
|
488
492
|
)
|
|
489
493
|
] }),
|
|
490
|
-
/* @__PURE__ */ e("ul", { className: r.links, children:
|
|
494
|
+
/* @__PURE__ */ e("ul", { className: r.links, children: j.map(({ title: c, url: u, icon: o }, M) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ s(
|
|
491
495
|
h,
|
|
492
496
|
{
|
|
493
497
|
variant: "plain",
|
|
494
498
|
size: 500,
|
|
495
499
|
fullWidth: !0,
|
|
496
|
-
as:
|
|
500
|
+
as: i,
|
|
497
501
|
href: l(u, a),
|
|
498
502
|
children: [
|
|
499
|
-
|
|
503
|
+
o,
|
|
500
504
|
c
|
|
501
505
|
]
|
|
502
506
|
}
|
|
503
|
-
) },
|
|
507
|
+
) }, M)) })
|
|
504
508
|
]
|
|
505
509
|
}
|
|
506
510
|
)
|