@altinn/altinn-components 0.67.5 → 0.67.6
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/LayoutBase-CrlzKACr.js +19 -0
- package/dist/assets/GlobalHeader.css +1 -1
- package/dist/assets/HeaderDrawer.css +1 -1
- package/dist/assets/LayoutBase.css +1 -1
- package/dist/components/AccountSelector/AccountSelector.js +66 -59
- package/dist/components/GlobalHeader/GlobalHeader.js +33 -33
- package/dist/components/GlobalHeader/HeaderDrawer.js +22 -22
- package/dist/components/Layout/Layout.js +35 -27
- package/dist/components/Layout/LayoutBase.js +1 -1
- package/dist/components/Layout/index.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/hooks/useLockBodyScroll.js +16 -9
- package/dist/index.js +1 -1
- package/dist/types/lib/hooks/useLockBodyScroll.d.ts +17 -0
- package/package.json +1 -1
- package/dist/LayoutBase-CAdjuw9Q.js +0 -18
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import './assets/LayoutBase.css';const o = "_base_1084c_1", c = "_bannerWrapperPinned_1084c_14", d = {
|
|
3
|
+
base: o,
|
|
4
|
+
bannerWrapperPinned: c
|
|
5
|
+
}, i = ({ currentId: e, color: n, theme: s, bannerHeight: a, children: r }) => /* @__PURE__ */ t(
|
|
6
|
+
"div",
|
|
7
|
+
{
|
|
8
|
+
className: d.base,
|
|
9
|
+
"data-color": n,
|
|
10
|
+
"data-theme": s,
|
|
11
|
+
"data-current-id": e,
|
|
12
|
+
style: a ? { "--altinn-banner-height": `${a}px` } : void 0,
|
|
13
|
+
children: r
|
|
14
|
+
}
|
|
15
|
+
);
|
|
16
|
+
export {
|
|
17
|
+
i as L,
|
|
18
|
+
d as s
|
|
19
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._header_1apfp_1{z-index:1;background-color:#fff;width:100%}._header_1apfp_1[data-current-id=account],._header_1apfp_1[data-current-id=menu],._header_1apfp_1[data-current-id=locale]{position:fixed;top:var(--altinn-banner-height, 0px);left:0;right:0}._container_1apfp_21{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:.625rem;width:100%;max-width:1512px;margin:0 auto}._backdrop_1apfp_33{display:none}._header_1apfp_1[data-current-id=menu],._header_1apfp_1[data-current-id=locale]{background-color:#fff}@media(min-width:1024px){._header_1apfp_1[data-current-id=menu] ._backdrop_1apfp_33,._header_1apfp_1[data-current-id=locale] ._backdrop_1apfp_33{display:block}}@media(max-width:1023px){._header_1apfp_1{gap:0}}._header_1apfp_1{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}._nav_1apfp_67{position:relative;display:flex;align-items:center;justify-content:end;column-gap:1rem;width:100%}._logo_1apfp_76{margin-right:auto}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
html:has(dialog[open]){overflow:hidden;scrollbar-gutter:stable}.
|
|
1
|
+
html:has(dialog[open]){overflow:hidden;scrollbar-gutter:stable}._backdrop_c7eii_11{display:block;z-index:1;background-color:#111d4640;position:fixed;top:calc(4.5rem + var(--altinn-banner-height, 0px));right:0;bottom:0;left:0;width:100%;height:100%}._backdrop_c7eii_11[aria-hidden=true]{display:none}._drawer_c7eii_28{position:fixed;z-index:2;background-color:#fff;width:100%;max-width:100vw;height:auto;max-height:none;box-sizing:border-box;padding:0;margin:0;border:0;top:calc(4.5rem + var(--altinn-banner-height, 0px));bottom:0;display:flex;flex-direction:column;overflow-y:scroll;overscroll-behavior:contain}._drawer_c7eii_28::backdrop{background-color:transparent}._drawer_c7eii_28:not([data-open=true]){display:none}._footer_c7eii_62{display:none}._body_c7eii_66{padding:0 .5rem}@media(min-width:1024px){._body_c7eii_66{padding:0 1rem}._drawer_c7eii_28{inset:auto;position:fixed;top:calc(4.5rem + var(--altinn-banner-height, 0px));left:0;right:0;margin:0;height:auto;max-height:55vh;overflow-y:auto}._drawer_c7eii_28[data-expanded=true]{bottom:0;height:auto;max-height:none;overflow-y:scroll}._footer_c7eii_62{position:sticky;z-index:2000;display:flex;bottom:0;left:0;right:0;justify-content:center;align-items:center;background-color:#fff}._toggleButton_c7eii_106{margin:1rem 0}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._base_1084c_1{position:relative;display:flex;flex-direction:column;min-height:100vh;background-color:var(--altinn-layout-background);--altinn-banner-height: 0px}._bannerWrapperPinned_1084c_14{position:fixed;top:0;left:0;right:0;z-index:2}._base_1084c_1[data-theme=default]{--altinn-layout-background: var(--ds-color-background-default)}._base_1084c_1[data-theme=subtle]{--altinn-layout-background: var(--ds-color-background-tinted)}._base_1084c_1[data-theme=neutral]{--altinn-layout-background: var(--ds-color-neutral-background-tinted)}._base_1084c_1[data-theme=inbox]{--altinn-layout-background: var(--ds-color-background-tinted)}._base_1084c_1[data-theme=inbox][data-color=person],._base_1084c_1[data-theme=settings]{--altinn-layout-background: var(--ds-color-neutral-background-tinted)}
|
|
@@ -1,97 +1,104 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { c as
|
|
3
|
-
import { useState as i, useRef as
|
|
4
|
-
import { AccountMenu as
|
|
5
|
-
import { r as
|
|
1
|
+
import { jsx as r, jsxs as w } from "react/jsx-runtime";
|
|
2
|
+
import { c as A } from "../../index-p1eeF8LQ.js";
|
|
3
|
+
import { useState as i, useRef as l, useEffect as T } from "react";
|
|
4
|
+
import { AccountMenu as M } from "../Account/AccountMenu.js";
|
|
5
|
+
import { r as O, H as E } from "../../tooltip-Ct39-719.js";
|
|
6
6
|
import "../Typography/Link.js";
|
|
7
7
|
import "../Button/Button.js";
|
|
8
8
|
import "react-dom";
|
|
9
|
-
import { w as
|
|
9
|
+
import { w as q, S as P } from "../../ToolbarSearch-DyVcALSw.js";
|
|
10
10
|
import "../GlobalMenu/GlobalMenuBase.js";
|
|
11
11
|
import "../Snackbar/useSnackbar.js";
|
|
12
|
-
import { Switch as
|
|
13
|
-
import '../../assets/AccountSelector.css';const
|
|
14
|
-
accountSelector:
|
|
15
|
-
heading:
|
|
16
|
-
searchSection:
|
|
12
|
+
import { Switch as V } from "../Forms/Switch.js";
|
|
13
|
+
import '../../assets/AccountSelector.css';const W = "_accountSelector_ttjvg_1", $ = "_heading_ttjvg_11", B = "_searchSection_ttjvg_17", K = "_searchField_ttjvg_30", U = "_accountMenu_ttjvg_34", X = "_virtualized_ttjvg_42", Y = "_spinner_ttjvg_51", o = {
|
|
14
|
+
accountSelector: W,
|
|
15
|
+
heading: $,
|
|
16
|
+
searchSection: B,
|
|
17
17
|
searchField: K,
|
|
18
18
|
accountMenu: U,
|
|
19
19
|
virtualized: X,
|
|
20
|
-
spinner:
|
|
21
|
-
},
|
|
20
|
+
spinner: Y
|
|
21
|
+
}, D = 5, G = typeof navigator < "u" && (/iP(hone|ad|od)/.test(navigator.userAgent) || // iPadOS 13+ reports itself as Mac
|
|
22
|
+
navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1), de = ({
|
|
22
23
|
accountMenu: e,
|
|
23
24
|
forceOpenFullScreen: n,
|
|
24
|
-
className:
|
|
25
|
-
loading:
|
|
26
|
-
showDeletedUnits:
|
|
27
|
-
onShowDeletedUnitsChange:
|
|
28
|
-
isFullScreen:
|
|
29
|
-
accountCount:
|
|
25
|
+
className: a,
|
|
26
|
+
loading: x,
|
|
27
|
+
showDeletedUnits: u,
|
|
28
|
+
onShowDeletedUnitsChange: j,
|
|
29
|
+
isFullScreen: k,
|
|
30
|
+
accountCount: C
|
|
30
31
|
}) => {
|
|
31
|
-
const { closeAll:
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
32
|
+
const { closeAll: d, languageCode: h, currentId: N } = q(), c = N === "account" || !!n, g = (C ?? e.items.length) > D, m = u !== void 0, [v, f] = i(""), [z, S] = i(n), [F, I] = i(0), p = l(c), _ = l(null), b = l(null);
|
|
33
|
+
T(() => {
|
|
34
|
+
c && !p.current && (I((t) => t + 1), requestAnimationFrame(() => {
|
|
35
|
+
b.current?.scrollTo({ top: 0 }), _.current?.closest("dialog")?.scrollTo({ top: 0 });
|
|
36
|
+
})), p.current = c;
|
|
37
|
+
}, [c]), T(() => {
|
|
38
|
+
!n && z && d(), S(n);
|
|
36
39
|
}, [n]);
|
|
37
|
-
const { searchText:
|
|
38
|
-
|
|
40
|
+
const { searchText: s, heading: L, switchLabel: R } = J(h), H = () => {
|
|
41
|
+
G && requestAnimationFrame(() => window.scrollTo({ top: -window.scrollY, behavior: "instant" }));
|
|
42
|
+
}, y = (t) => {
|
|
43
|
+
e.onSelectAccount?.(t), d(), S(!1);
|
|
39
44
|
};
|
|
40
|
-
return
|
|
41
|
-
/* @__PURE__ */
|
|
42
|
-
(
|
|
43
|
-
|
|
44
|
-
|
|
45
|
+
return x ? /* @__PURE__ */ r(O, { "aria-hidden": !0, "data-color": "neutral", className: o.spinner }) : /* @__PURE__ */ w("div", { ref: _, className: A(a, o.accountSelector), children: [
|
|
46
|
+
/* @__PURE__ */ r(E, { "data-size": "sm", level: 2, className: o.heading, id: "account-selector-heading", children: L }),
|
|
47
|
+
(g || m) && /* @__PURE__ */ w("div", { className: o.searchSection, children: [
|
|
48
|
+
g && /* @__PURE__ */ r(
|
|
49
|
+
P,
|
|
45
50
|
{
|
|
46
51
|
size: "sm",
|
|
47
52
|
"aria-labelledby": "account-selector-heading",
|
|
48
|
-
label:
|
|
53
|
+
label: s,
|
|
49
54
|
hideLabel: !0,
|
|
50
|
-
name:
|
|
51
|
-
placeholder:
|
|
52
|
-
value:
|
|
53
|
-
onChange: (t) =>
|
|
54
|
-
onClear: () =>
|
|
55
|
-
|
|
55
|
+
name: s,
|
|
56
|
+
placeholder: s,
|
|
57
|
+
value: v,
|
|
58
|
+
onChange: (t) => f(t.target.value),
|
|
59
|
+
onClear: () => f(""),
|
|
60
|
+
onBlur: H,
|
|
61
|
+
className: o.searchField
|
|
56
62
|
}
|
|
57
63
|
),
|
|
58
|
-
|
|
59
|
-
|
|
64
|
+
m && /* @__PURE__ */ r(
|
|
65
|
+
V,
|
|
60
66
|
{
|
|
61
67
|
size: "sm",
|
|
62
|
-
checked:
|
|
63
|
-
onChange: (t) =>
|
|
64
|
-
label:
|
|
68
|
+
checked: u,
|
|
69
|
+
onChange: (t) => j?.(t.target.checked),
|
|
70
|
+
label: R
|
|
65
71
|
}
|
|
66
72
|
)
|
|
67
73
|
] }),
|
|
68
|
-
/* @__PURE__ */
|
|
74
|
+
/* @__PURE__ */ r(
|
|
69
75
|
"div",
|
|
70
76
|
{
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
77
|
+
ref: b,
|
|
78
|
+
className: A(
|
|
79
|
+
o.accountMenu,
|
|
80
|
+
k && o.fullScreen,
|
|
81
|
+
e.virtualized && o.virtualized
|
|
75
82
|
),
|
|
76
|
-
children: /* @__PURE__ */
|
|
77
|
-
|
|
83
|
+
children: /* @__PURE__ */ r(
|
|
84
|
+
M,
|
|
78
85
|
{
|
|
79
86
|
...e,
|
|
80
|
-
onSelectAccount:
|
|
87
|
+
onSelectAccount: y,
|
|
81
88
|
keyboardEvents: !1,
|
|
82
89
|
search: {
|
|
83
90
|
hidden: !0,
|
|
84
91
|
name: "",
|
|
85
|
-
value:
|
|
86
|
-
getResultsLabel: (t) =>
|
|
92
|
+
value: v,
|
|
93
|
+
getResultsLabel: (t) => Q(t, h)
|
|
87
94
|
}
|
|
88
95
|
},
|
|
89
|
-
|
|
96
|
+
F
|
|
90
97
|
)
|
|
91
98
|
}
|
|
92
99
|
)
|
|
93
100
|
] });
|
|
94
|
-
},
|
|
101
|
+
}, J = (e) => {
|
|
95
102
|
switch (e) {
|
|
96
103
|
case "nn":
|
|
97
104
|
return {
|
|
@@ -112,10 +119,10 @@ import '../../assets/AccountSelector.css';const V = "_accountSelector_ttjvg_1",
|
|
|
112
119
|
switchLabel: "Vis slettede"
|
|
113
120
|
};
|
|
114
121
|
}
|
|
115
|
-
},
|
|
116
|
-
const
|
|
117
|
-
return e === 0 ?
|
|
122
|
+
}, Q = (e, n) => {
|
|
123
|
+
const a = n === "nb" || n === "nn";
|
|
124
|
+
return e === 0 ? a ? "Ingen treff" : "No hits" : a ? `${e} treff` : e === 1 ? "1 hit" : `${e} hits`;
|
|
118
125
|
};
|
|
119
126
|
export {
|
|
120
|
-
|
|
127
|
+
de as AccountSelector
|
|
121
128
|
};
|
|
@@ -1,46 +1,46 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as n, jsxs as
|
|
3
|
-
import { useState as
|
|
4
|
-
import { useIsDesktop as
|
|
5
|
-
import { AccountSelector as
|
|
2
|
+
import { jsx as n, jsxs as i, Fragment as O } from "react/jsx-runtime";
|
|
3
|
+
import { useState as b } from "react";
|
|
4
|
+
import { useIsDesktop as F } from "../../hooks/useIsDesktop.js";
|
|
5
|
+
import { AccountSelector as v } from "../AccountSelector/AccountSelector.js";
|
|
6
6
|
import { GlobalMenu as C } from "../GlobalMenu/GlobalMenu.js";
|
|
7
7
|
import "../../index-p1eeF8LQ.js";
|
|
8
8
|
import "../../tooltip-Ct39-719.js";
|
|
9
9
|
import "../Typography/Link.js";
|
|
10
10
|
import "../Button/Button.js";
|
|
11
11
|
import "react-dom";
|
|
12
|
-
import { w } from "../../ToolbarSearch-DyVcALSw.js";
|
|
13
|
-
import { GlobalMenuButton as
|
|
14
|
-
import { GlobalAccountButton as
|
|
12
|
+
import { w as D } from "../../ToolbarSearch-DyVcALSw.js";
|
|
13
|
+
import { GlobalMenuButton as M } from "./GlobalMenuButton.js";
|
|
14
|
+
import { GlobalAccountButton as N } from "./GlobalAccountButton.js";
|
|
15
15
|
import "../Snackbar/useSnackbar.js";
|
|
16
|
-
import { HeaderDrawer as
|
|
17
|
-
import { HeaderDropdown as
|
|
18
|
-
import { HeaderLogo as
|
|
19
|
-
import '../../assets/GlobalHeader.css';const
|
|
20
|
-
header:
|
|
21
|
-
container:
|
|
22
|
-
nav:
|
|
23
|
-
logo:
|
|
24
|
-
},
|
|
16
|
+
import { HeaderDrawer as E } from "./HeaderDrawer.js";
|
|
17
|
+
import { HeaderDropdown as I } from "./HeaderDropdown.js";
|
|
18
|
+
import { HeaderLogo as k } from "./HeaderLogo.js";
|
|
19
|
+
import '../../assets/GlobalHeader.css';const w = "_header_1apfp_1", y = "_container_1apfp_21", B = "_nav_1apfp_67", G = "_logo_1apfp_76", a = {
|
|
20
|
+
header: w,
|
|
21
|
+
container: y,
|
|
22
|
+
nav: B,
|
|
23
|
+
logo: G
|
|
24
|
+
}, H = 5, $ = ({
|
|
25
25
|
globalMenu: r,
|
|
26
|
-
desktopMenu:
|
|
27
|
-
mobileMenu:
|
|
26
|
+
desktopMenu: d,
|
|
27
|
+
mobileMenu: p,
|
|
28
28
|
locale: m,
|
|
29
29
|
accountSelector: e,
|
|
30
30
|
logo: u = {},
|
|
31
31
|
badge: f,
|
|
32
32
|
onLoginClick: g
|
|
33
33
|
}) => {
|
|
34
|
-
const { currentId: o, toggleId: l, closeAll: t } =
|
|
35
|
-
|
|
34
|
+
const { currentId: o, toggleId: l, closeAll: t } = D(), h = () => {
|
|
35
|
+
l("account");
|
|
36
36
|
}, _ = () => {
|
|
37
37
|
l("menu");
|
|
38
|
-
}, c = o === "account" || e?.forceOpenFullScreen || !1, [
|
|
39
|
-
return /* @__PURE__ */ n("header", { className: a.header, "data-current-id": o, children: /* @__PURE__ */ n("div", { className: a.container, children: /* @__PURE__ */
|
|
40
|
-
/* @__PURE__ */ n(
|
|
41
|
-
e && /* @__PURE__ */
|
|
38
|
+
}, c = o === "account" || e?.forceOpenFullScreen || !1, [s, x] = b(!1), A = F();
|
|
39
|
+
return /* @__PURE__ */ n("header", { className: a.header, "data-current-id": o, children: /* @__PURE__ */ n("div", { className: a.container, children: /* @__PURE__ */ i("nav", { className: a.nav, "aria-label": "hovednavigasjon", children: [
|
|
40
|
+
/* @__PURE__ */ n(k, { ...u, badge: f, className: a.logo }),
|
|
41
|
+
e && /* @__PURE__ */ i(O, { children: [
|
|
42
42
|
/* @__PURE__ */ n(
|
|
43
|
-
|
|
43
|
+
N,
|
|
44
44
|
{
|
|
45
45
|
currentAccount: e.accountMenu?.currentAccount,
|
|
46
46
|
onClick: e.accountMenu?.currentAccount ? h : g,
|
|
@@ -50,28 +50,28 @@ import '../../assets/GlobalHeader.css';const T = "_header_17ppp_1", k = "_contai
|
|
|
50
50
|
}
|
|
51
51
|
),
|
|
52
52
|
/* @__PURE__ */ n(
|
|
53
|
-
|
|
53
|
+
E,
|
|
54
54
|
{
|
|
55
55
|
id: "header-account",
|
|
56
56
|
open: c,
|
|
57
57
|
onClose: t,
|
|
58
58
|
closedBy: e?.forceOpenFullScreen ? "none" : "any",
|
|
59
59
|
ariaLabelledby: "account-selector-heading",
|
|
60
|
-
expanded: e?.forceOpenFullScreen ||
|
|
61
|
-
onToggle: () =>
|
|
62
|
-
expandable: (e.accountCount ?? e.accountMenu.items.length) >
|
|
63
|
-
children: /* @__PURE__ */ n(
|
|
60
|
+
expanded: e?.forceOpenFullScreen || s,
|
|
61
|
+
onToggle: () => x(!s),
|
|
62
|
+
expandable: (e.accountCount ?? e.accountMenu.items.length) > H,
|
|
63
|
+
children: /* @__PURE__ */ n(v, { ...e, forceOpenFullScreen: e.forceOpenFullScreen })
|
|
64
64
|
}
|
|
65
65
|
)
|
|
66
66
|
] }),
|
|
67
67
|
/* @__PURE__ */ n(
|
|
68
|
-
|
|
68
|
+
I,
|
|
69
69
|
{
|
|
70
70
|
id: "header-menu",
|
|
71
71
|
open: o === "menu",
|
|
72
72
|
onClose: t,
|
|
73
73
|
trigger: /* @__PURE__ */ n(
|
|
74
|
-
|
|
74
|
+
M,
|
|
75
75
|
{
|
|
76
76
|
onClick: _,
|
|
77
77
|
expanded: o === "menu",
|
|
@@ -83,7 +83,7 @@ import '../../assets/GlobalHeader.css';const T = "_header_17ppp_1", k = "_contai
|
|
|
83
83
|
C,
|
|
84
84
|
{
|
|
85
85
|
...r,
|
|
86
|
-
menu:
|
|
86
|
+
menu: A ? d || r?.menu : p || r?.menu,
|
|
87
87
|
onClose: t,
|
|
88
88
|
localeSwitcher: m,
|
|
89
89
|
isOpen: o === "menu"
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsxs as a, Fragment as l, jsx as
|
|
1
|
+
import { jsxs as a, Fragment as l, jsx as n } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as D, useEffect as h } from "react";
|
|
3
3
|
import { Button as j } from "../Button/Button.js";
|
|
4
4
|
import "../../index-p1eeF8LQ.js";
|
|
@@ -10,7 +10,7 @@ import "../GlobalMenu/GlobalMenuBase.js";
|
|
|
10
10
|
import "../Snackbar/useSnackbar.js";
|
|
11
11
|
import { S as L } from "../../ChevronUp-hn05LboH.js";
|
|
12
12
|
import { S as M } from "../../ChevronDown-D_a7nb-G.js";
|
|
13
|
-
import '../../assets/HeaderDrawer.css';const R = "
|
|
13
|
+
import '../../assets/HeaderDrawer.css';const R = "_backdrop_c7eii_11", B = "_drawer_c7eii_28", F = "_footer_c7eii_62", V = "_body_c7eii_66", q = "_toggleButton_c7eii_106", t = {
|
|
14
14
|
backdrop: R,
|
|
15
15
|
drawer: B,
|
|
16
16
|
footer: F,
|
|
@@ -18,7 +18,7 @@ import '../../assets/HeaderDrawer.css';const R = "_backdrop_yn0zc_11", B = "_dra
|
|
|
18
18
|
toggleButton: q
|
|
19
19
|
}, $ = ({
|
|
20
20
|
id: c,
|
|
21
|
-
open:
|
|
21
|
+
open: i,
|
|
22
22
|
onClose: v,
|
|
23
23
|
closedBy: o = "any",
|
|
24
24
|
expanded: d,
|
|
@@ -27,31 +27,31 @@ import '../../assets/HeaderDrawer.css';const R = "_backdrop_yn0zc_11", B = "_dra
|
|
|
27
27
|
children: w,
|
|
28
28
|
ariaLabelledby: k
|
|
29
29
|
}) => {
|
|
30
|
-
const { languageCode:
|
|
30
|
+
const { languageCode: C } = I(), m = A(C), s = D(null);
|
|
31
31
|
h(() => {
|
|
32
|
-
const e = s.current, u = (
|
|
32
|
+
const e = s.current, u = (r) => {
|
|
33
33
|
if (window.getSelection()?.toString()) return;
|
|
34
|
-
const { clientY: g, clientX: p, target:
|
|
35
|
-
if (e &&
|
|
36
|
-
const { top:
|
|
37
|
-
|
|
34
|
+
const { clientY: g, clientX: p, target: S } = r;
|
|
35
|
+
if (e && S === e && o === "any") {
|
|
36
|
+
const { top: N, left: y, right: z, bottom: E } = e.getBoundingClientRect();
|
|
37
|
+
N <= g && g <= E && y <= p && p <= z || e.close();
|
|
38
38
|
}
|
|
39
39
|
}, f = () => {
|
|
40
|
-
const
|
|
41
|
-
document.activeElement !==
|
|
40
|
+
const r = e?.querySelector("[autofocus]");
|
|
41
|
+
document.activeElement !== r && r?.focus();
|
|
42
42
|
};
|
|
43
43
|
return e?.addEventListener("animationend", f), e?.addEventListener("click", u), () => {
|
|
44
44
|
e?.removeEventListener("animationend", f), e?.removeEventListener("click", u);
|
|
45
45
|
};
|
|
46
46
|
}, [o]), h(() => {
|
|
47
47
|
const e = s.current;
|
|
48
|
-
e && (
|
|
49
|
-
}, [
|
|
50
|
-
const
|
|
48
|
+
e && (i ? e.open || e.showModal() : e.open && e.close());
|
|
49
|
+
}, [i]);
|
|
50
|
+
const x = (e) => {
|
|
51
51
|
o === "none" && e.preventDefault();
|
|
52
52
|
};
|
|
53
53
|
return /* @__PURE__ */ a(l, { children: [
|
|
54
|
-
/* @__PURE__ */
|
|
54
|
+
/* @__PURE__ */ n("div", { className: t.backdrop, "aria-hidden": !i }),
|
|
55
55
|
/* @__PURE__ */ a(
|
|
56
56
|
"dialog",
|
|
57
57
|
{
|
|
@@ -59,18 +59,18 @@ import '../../assets/HeaderDrawer.css';const R = "_backdrop_yn0zc_11", B = "_dra
|
|
|
59
59
|
ref: s,
|
|
60
60
|
"aria-modal": "true",
|
|
61
61
|
"aria-labelledby": k,
|
|
62
|
-
"data-open":
|
|
62
|
+
"data-open": i,
|
|
63
63
|
"data-expanded": d,
|
|
64
|
-
onCancel:
|
|
65
|
-
className:
|
|
64
|
+
onCancel: x,
|
|
65
|
+
className: t.drawer,
|
|
66
66
|
onClose: o !== "none" ? v : void 0,
|
|
67
67
|
children: [
|
|
68
|
-
/* @__PURE__ */
|
|
69
|
-
o !== "none" && _ && /* @__PURE__ */
|
|
70
|
-
/* @__PURE__ */
|
|
68
|
+
/* @__PURE__ */ n("div", { className: t.body, children: w }),
|
|
69
|
+
o !== "none" && _ && /* @__PURE__ */ n("footer", { className: t.footer, children: /* @__PURE__ */ n(j, { className: t.toggleButton, size: "xs", variant: "outline", onClick: b, children: d ? /* @__PURE__ */ a(l, { children: [
|
|
70
|
+
/* @__PURE__ */ n(L, { className: t.btnIcon, "aria-hidden": "true" }),
|
|
71
71
|
m.minimize
|
|
72
72
|
] }) : /* @__PURE__ */ a(l, { children: [
|
|
73
|
-
/* @__PURE__ */
|
|
73
|
+
/* @__PURE__ */ n(M, { className: t.btnIcon, "aria-hidden": "true" }),
|
|
74
74
|
m.fullscreen
|
|
75
75
|
] }) }) })
|
|
76
76
|
]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import { useRef as
|
|
4
|
-
import { L as R, s as S } from "../../LayoutBase-
|
|
2
|
+
import { jsxs as i, jsx as t, Fragment as v } from "react/jsx-runtime";
|
|
3
|
+
import { useRef as L, useState as B, useEffect as x } from "react";
|
|
4
|
+
import { L as R, s as S } from "../../LayoutBase-CrlzKACr.js";
|
|
5
5
|
import { LayoutGrid as H } from "./LayoutGrid.js";
|
|
6
6
|
import { LayoutBody as z } from "./LayoutBody.js";
|
|
7
7
|
import { LayoutContent as j } from "./LayoutContent.js";
|
|
@@ -22,16 +22,16 @@ import { SkipLink as N } from "../SkipLink/SkipLink.js";
|
|
|
22
22
|
const ro = ({
|
|
23
23
|
banner: o,
|
|
24
24
|
color: u,
|
|
25
|
-
theme:
|
|
25
|
+
theme: d = "subtle",
|
|
26
26
|
header: n,
|
|
27
|
-
footer:
|
|
27
|
+
footer: c,
|
|
28
28
|
sidebar: r,
|
|
29
|
-
content:
|
|
29
|
+
content: h = {},
|
|
30
30
|
children: y,
|
|
31
|
-
skipLink:
|
|
31
|
+
skipLink: m,
|
|
32
32
|
breadcrumbs: l
|
|
33
33
|
}) => {
|
|
34
|
-
const { currentId:
|
|
34
|
+
const { currentId: e } = E(), s = L(null), [k, g] = B(0);
|
|
35
35
|
return x(() => {
|
|
36
36
|
const f = s.current;
|
|
37
37
|
if (!f) return;
|
|
@@ -39,27 +39,35 @@ const ro = ({
|
|
|
39
39
|
g(a.borderBoxSize[0]?.blockSize ?? a.contentRect.height);
|
|
40
40
|
});
|
|
41
41
|
return p.observe(f), () => p.disconnect();
|
|
42
|
-
}, []), /* @__PURE__ */
|
|
43
|
-
|
|
44
|
-
o && /* @__PURE__ */ t(
|
|
45
|
-
|
|
42
|
+
}, []), /* @__PURE__ */ i(R, { color: u, theme: d, currentId: e, bannerHeight: o ? k : 0, children: [
|
|
43
|
+
m && /* @__PURE__ */ t(N, { ...m }),
|
|
44
|
+
o && /* @__PURE__ */ t(
|
|
45
|
+
"div",
|
|
46
46
|
{
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
47
|
+
ref: s,
|
|
48
|
+
className: e === "account" || e === "menu" || e === "locale" ? S.bannerWrapperPinned : void 0,
|
|
49
|
+
"data-color": "company",
|
|
50
|
+
children: /* @__PURE__ */ t(
|
|
51
|
+
C,
|
|
52
|
+
{
|
|
53
|
+
title: o.link ? /* @__PURE__ */ i(v, { children: [
|
|
54
|
+
o.title,
|
|
55
|
+
" ",
|
|
56
|
+
/* @__PURE__ */ t("a", { href: o.link.href, target: "_blank", rel: "noreferrer", children: o.link.label })
|
|
57
|
+
] }) : o.title,
|
|
58
|
+
color: o.color,
|
|
59
|
+
variant: o.variant || "strong",
|
|
60
|
+
icon: o.icon,
|
|
61
|
+
sticky: !1
|
|
62
|
+
}
|
|
63
|
+
)
|
|
56
64
|
}
|
|
57
|
-
)
|
|
65
|
+
),
|
|
58
66
|
n && /* @__PURE__ */ t(M, { ...n }),
|
|
59
|
-
/* @__PURE__ */
|
|
67
|
+
/* @__PURE__ */ i(H, { currentId: e, children: [
|
|
60
68
|
l && /* @__PURE__ */ t(F, { ...l }),
|
|
61
|
-
/* @__PURE__ */
|
|
62
|
-
r && /* @__PURE__ */
|
|
69
|
+
/* @__PURE__ */ i(z, { currentId: e, children: [
|
|
70
|
+
r && /* @__PURE__ */ i(
|
|
63
71
|
w,
|
|
64
72
|
{
|
|
65
73
|
sticky: r?.sticky,
|
|
@@ -72,10 +80,10 @@ const ro = ({
|
|
|
72
80
|
]
|
|
73
81
|
}
|
|
74
82
|
),
|
|
75
|
-
/* @__PURE__ */ t(j, { color:
|
|
83
|
+
/* @__PURE__ */ t(j, { color: h?.color, id: "main-content", children: y })
|
|
76
84
|
] })
|
|
77
85
|
] }),
|
|
78
|
-
|
|
86
|
+
c && /* @__PURE__ */ t(G, { ...c })
|
|
79
87
|
] });
|
|
80
88
|
};
|
|
81
89
|
export {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { L as t } from "../../LayoutBase-
|
|
1
|
+
import { L as t } from "../../LayoutBase-CrlzKACr.js";
|
|
2
2
|
import { LayoutGrid as e } from "./LayoutGrid.js";
|
|
3
3
|
import { LayoutBody as L } from "./LayoutBody.js";
|
|
4
4
|
import { LayoutContent as m } from "./LayoutContent.js";
|
package/dist/components/index.js
CHANGED
|
@@ -69,7 +69,7 @@ import { ItemControls as pe } from "./Item/ItemControls.js";
|
|
|
69
69
|
import { ItemSelect as xe } from "./Item/ItemSelect.js";
|
|
70
70
|
import { ItemBase as se } from "./Item/ItemBase.js";
|
|
71
71
|
import { ItemLink as le } from "./Item/ItemLink.js";
|
|
72
|
-
import { L as ue } from "../LayoutBase-
|
|
72
|
+
import { L as ue } from "../LayoutBase-CrlzKACr.js";
|
|
73
73
|
import { LayoutGrid as ge } from "./Layout/LayoutGrid.js";
|
|
74
74
|
import { LayoutBody as Le } from "./Layout/LayoutBody.js";
|
|
75
75
|
import { LayoutContent as Ie } from "./Layout/LayoutContent.js";
|
|
@@ -1,14 +1,21 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { useEffect as
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
import { useEffect as s } from "react";
|
|
3
|
+
const l = typeof navigator < "u" && (/iP(hone|ad|od)/.test(navigator.userAgent) || // iPadOS 13+ reports itself as Mac
|
|
4
|
+
navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1), r = (e) => {
|
|
5
|
+
s(() => {
|
|
6
|
+
if (!e || !l) return;
|
|
7
|
+
const { body: t } = document, { scrollY: i } = window, o = {
|
|
8
|
+
position: t.style.position,
|
|
9
|
+
top: t.style.top,
|
|
10
|
+
left: t.style.left,
|
|
11
|
+
right: t.style.right,
|
|
12
|
+
width: t.style.width
|
|
9
13
|
};
|
|
10
|
-
|
|
14
|
+
return t.style.position = "fixed", t.style.top = `-${i}px`, t.style.left = "0", t.style.right = "0", t.style.width = "100%", () => {
|
|
15
|
+
t.style.position = o.position, t.style.top = o.top, t.style.left = o.left, t.style.right = o.right, t.style.width = o.width, window.scrollTo(0, i);
|
|
16
|
+
};
|
|
17
|
+
}, [e]);
|
|
11
18
|
};
|
|
12
19
|
export {
|
|
13
|
-
|
|
20
|
+
r as useLockBodyScroll
|
|
14
21
|
};
|
package/dist/index.js
CHANGED
|
@@ -69,7 +69,7 @@ import { ItemControls as pe } from "./components/Item/ItemControls.js";
|
|
|
69
69
|
import { ItemSelect as ie } from "./components/Item/ItemSelect.js";
|
|
70
70
|
import { ItemBase as se } from "./components/Item/ItemBase.js";
|
|
71
71
|
import { ItemLink as ce } from "./components/Item/ItemLink.js";
|
|
72
|
-
import { L as ue } from "./LayoutBase-
|
|
72
|
+
import { L as ue } from "./LayoutBase-CrlzKACr.js";
|
|
73
73
|
import { LayoutGrid as ge } from "./components/Layout/LayoutGrid.js";
|
|
74
74
|
import { LayoutBody as Le } from "./components/Layout/LayoutBody.js";
|
|
75
75
|
import { LayoutContent as Ie } from "./components/Layout/LayoutContent.js";
|
|
@@ -1 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Locks background scroll while a header overlay (drawer) is open.
|
|
3
|
+
*
|
|
4
|
+
* Non-iOS platforms are already handled globally by the
|
|
5
|
+
* `html:has(dialog[open]) { overflow: hidden }` rule, so this hook only adds the
|
|
6
|
+
* part CSS can't do: iOS Safari ignores `overflow: hidden` on body/html for
|
|
7
|
+
* touch scrolling, so a short / non-scrollable overlay lets the gesture chain to
|
|
8
|
+
* the page behind it (and rubber-band the whole viewport). Pinning <body> with
|
|
9
|
+
* `position: fixed` removes it from the scroll flow entirely — the only reliable
|
|
10
|
+
* lock on iOS.
|
|
11
|
+
*
|
|
12
|
+
* The page keeps its scroll position (`top: -scrollY`); it doesn't need to be at
|
|
13
|
+
* the top because the header is pinned independently (via `position: fixed`
|
|
14
|
+
* while the overlay is open, see globalHeader.module.css), so the overlay stays
|
|
15
|
+
* aligned regardless of scroll. The locked background is covered by the overlay
|
|
16
|
+
* anyway. The scroll position is restored on close.
|
|
17
|
+
*/
|
|
1
18
|
export declare const useLockBodyScroll: (locked: boolean) => void;
|
package/package.json
CHANGED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import './assets/LayoutBase.css';const n = "_base_1hj0u_1", c = {
|
|
3
|
-
base: n
|
|
4
|
-
}, i = ({ currentId: s, color: t, theme: e, bannerHeight: a, children: o }) => /* @__PURE__ */ r(
|
|
5
|
-
"div",
|
|
6
|
-
{
|
|
7
|
-
className: c.base,
|
|
8
|
-
"data-color": t,
|
|
9
|
-
"data-theme": e,
|
|
10
|
-
"data-current-id": s,
|
|
11
|
-
style: a ? { "--altinn-banner-height": `${a}px` } : void 0,
|
|
12
|
-
children: o
|
|
13
|
-
}
|
|
14
|
-
);
|
|
15
|
-
export {
|
|
16
|
-
i as L,
|
|
17
|
-
c as s
|
|
18
|
-
};
|