@altinn/altinn-components 0.32.0 → 0.33.1

package/dist/assets/Modal.css

@@ -0,0 +1 @@
+._dismiss_ps82p_1{position:absolute;top:0;right:0;margin:1rem}

package/dist/assets/ModalBase.css

@@ -1 +1 @@
-._modal_1jt70_1{padding:0;min-width:450px;border-radius:.5rem;box-shadow:var(--ds-shadow-xs);border:none}._modal_1jt70_1[data-backdrop-color=inherit]::backdrop{background-color:#111d4640}._modal_1jt70_1[data-backdrop-color=transparent]::backdrop{background-color:transparent}._modal_1jt70_1[data-variant=full]{width:100%;height:100%;min-width:unset;min-height:unset}._modal_1jt70_1[data-variant=content]{width:1056px;margin:auto}
+._modal_zkvhc_1{padding:0;width:100%;max-width:450px;border:none;background-color:#fff;border-radius:.5rem;box-shadow:var(--ds-shadow-xs)}._modal_zkvhc_1[data-backdrop-color=inherit]::backdrop{background-color:#111d4640}._modal_zkvhc_1[data-backdrop-color=transparent]::backdrop{background-color:transparent}._modal_zkvhc_1[data-variant=full]{width:100%;max-width:none;height:100%;min-height:unset}._modal_zkvhc_1[data-variant=content]{max-width:1056px;margin:auto}._content_zkvhc_30{position:relative}

package/dist/assets/ModalBody.css

@@ -0,0 +1 @@
+._body_1cilr_1{position:relative}

package/dist/assets/ModalHeader.css

@@ -0,0 +1 @@
+._header_7ty99_1{border-bottom:1px solid;border-color:var(--ds-color-border-subtle)}._sticky_7ty99_6{background-color:var(--ds-color-background-default);position:sticky;z-index:2;top:0}

package/dist/components/Account/AccountNotificationSettings.js

@@ -0,0 +1,26 @@
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "react";
+import "../RootProvider/RootProvider.js";
+import "../Searchbar/AutocompleteBase.js";
+import "../Snackbar/useSnackbar.js";
+import { Fieldset as d } from "../Forms/Fieldset.js";
+import { Switch as r } from "../Forms/Switch.js";
+import { TextField as i } from "../Forms/TextField.js";
+const j = ({
+  phone: m,
+  phoneLabel: p = "Varsle på SMS",
+  email: s,
+  emailLabel: a = "Varsle på e-post",
+  smsAlerts: o = !1,
+  emailAlerts: l = !1,
+  onChange: e
+}) => /* @__PURE__ */ c(d, { size: "sm", children: [
+  /* @__PURE__ */ t(r, { label: p, name: "smsAlerts", value: "SMS", checked: !!o, onChange: e }),
+  o && /* @__PURE__ */ t(i, { name: "phone", placeholder: "Mobiltelefon", value: m, onChange: e }),
+  /* @__PURE__ */ t(r, { label: a, name: "emailAlerts", value: "E-post", checked: !!l, onChange: e }),
+  l && /* @__PURE__ */ t(i, { name: "email", placeholder: "E-postadresse", value: s, onChange: e })
+] });
+export {
+  j as AccountNotificationSettings
+};

package/dist/components/Account/index.js

@@ -1,8 +1,10 @@
 import { AccountMenu as c } from "./AccountMenu.js";
 import { AccountListItem as e } from "./AccountListItem.js";
-import { AccountList as n } from "./AccountList.js";
+import { AccountList as i } from "./AccountList.js";
+import { AccountNotificationSettings as m } from "./AccountNotificationSettings.js";
 export {
-  n as AccountList,
+  i as AccountList,
   e as AccountListItem,
-  c as AccountMenu
+  c as AccountMenu,
+  m as AccountNotificationSettings
 };

package/dist/components/Button/ButtonGroup.js

@@ -0,0 +1,11 @@
+import { jsx as m } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "react";
+import "../RootProvider/RootProvider.js";
+import "../Searchbar/AutocompleteBase.js";
+import "../Snackbar/useSnackbar.js";
+import { Flex as i } from "../Page/Flex.js";
+const a = ({ color: o, size: r, children: t, ...p }) => /* @__PURE__ */ m(i, { spacing: 3, color: o, size: r, ...p, children: t });
+export {
+  a as ButtonGroup
+};

package/dist/components/Button/index.js

@@ -1,13 +1,15 @@
 import { ButtonBase as r } from "./ButtonBase.js";
 import { ButtonLabel as n } from "./ButtonLabel.js";
-import { ButtonIcon as B } from "./ButtonIcon.js";
-import { Button as p } from "./Button.js";
+import { ButtonIcon as p } from "./ButtonIcon.js";
+import { Button as B } from "./Button.js";
 import { ComboButton as x } from "./ComboButton.js";
 import { IconButton as b } from "./IconButton.js";
+import { ButtonGroup as I } from "./ButtonGroup.js";
 export {
-  p as Button,
+  B as Button,
   r as ButtonBase,
-  B as ButtonIcon,
+  I as ButtonGroup,
+  p as ButtonIcon,
   n as ButtonLabel,
   x as ComboButton,
   b as IconButton

package/dist/components/Modal/Modal.js

@@ -0,0 +1,28 @@
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "react";
+import { IconButton as a } from "../Button/IconButton.js";
+import "../RootProvider/RootProvider.js";
+import "../Searchbar/AutocompleteBase.js";
+import "../Snackbar/useSnackbar.js";
+import { ModalBase as c } from "./ModalBase.js";
+import { S as d } from "../../XMark-DIqxCTTQ.js";
+import '../../assets/Modal.css';const e = "_dismiss_ps82p_1", l = {
+  dismiss: e
+}, y = ({ open: s, onClose: i, dismissable: o, closeTitle: t, children: m, ...r }) => /* @__PURE__ */ p(c, { padding: 6, spacing: 6, ...r, open: s, onClose: i, children: [
+  typeof i == "function" && o && /* @__PURE__ */ n(
+    a,
+    {
+      className: l.dismiss,
+      icon: d,
+      variant: "outline",
+      onClick: i,
+      iconAltText: t ?? "Close",
+      size: "sm"
+    }
+  ),
+  m
+] });
+export {
+  y as Modal
+};

package/dist/components/Modal/ModalBase.js

@@ -1,37 +1,75 @@
 "use client";
-import { jsx as o } from "react/jsx-runtime";
-import { useRef as f, useEffect as m } from "react";
-import '../../assets/ModalBase.css';const u = "_modal_1jt70_1", t = {
-  modal: u
-}, g = ({
-  open: e,
-  onClose: n,
-  children: r,
-  backdropColor: c = "inherit",
-  size: d,
-  color: s,
-  variant: i = "default"
+import { jsx as f } from "react/jsx-runtime";
+import { useRef as S, useEffect as u } from "react";
+import "../../index-L8X2o7IH.js";
+import "../RootProvider/RootProvider.js";
+import "../Searchbar/AutocompleteBase.js";
+import "../Snackbar/useSnackbar.js";
+import { Section as x } from "../Page/Section.js";
+import '../../assets/ModalBase.css';const R = "_modal_zkvhc_1", z = "_content_zkvhc_30", d = {
+  modal: R,
+  content: z
+}, Y = ({
+  open: c,
+  onClose: a,
+  closedBy: n = "any",
+  children: p,
+  backdropColor: v = "inherit",
+  size: h,
+  color: E,
+  padding: k = 0,
+  spacing: y = 0,
+  variant: b = "default"
 }) => {
-  const l = f(null);
-  return m(() => {
-    const a = l.current;
-    a && (e ? a.open || a.showModal() : a.open && a.close());
-  }, [e]), /* @__PURE__ */ o(
+  const r = S(null);
+  return u(() => {
+    const e = r.current, o = (t) => {
+      var m;
+      const { clientY: s, clientX: l, target: L } = t;
+      if (t instanceof KeyboardEvent)
+        return n === "none" && t.key === "Escape" && t.preventDefault();
+      if (!((m = window.getSelection()) != null && m.toString()) && e && L === e && n === "any") {
+        const { top: _, left: w, right: C, bottom: D } = e.getBoundingClientRect();
+        _ <= s && s <= D && w <= l && l <= C || e == null || e.close();
+      }
+    }, i = () => {
+      const t = e == null ? void 0 : e.querySelector("[autofocus]");
+      document.activeElement !== t && (t == null || t.focus());
+    };
+    return e == null || e.addEventListener("animationend", i), e == null || e.addEventListener("click", o), e == null || e.addEventListener("keydown", o), () => {
+      e == null || e.removeEventListener("animationend", i), e == null || e.removeEventListener("click", o), e == null || e.removeEventListener("keydown", o);
+    };
+  }, [n]), u(() => {
+    const e = r.current;
+    e && (c ? e.open || e.showModal() : e.open && e.close());
+  }, [c]), /* @__PURE__ */ f(
     "dialog",
     {
-      ref: l,
+      ref: r,
       "aria-modal": "true",
       "aria-labelledby": "modal-title",
-      onCancel: (a) => {
-        a.preventDefault(), n();
+      onCancel: (e) => {
+        e.preventDefault(), n === "any" && a();
       },
-      "data-backdrop-color": c,
-      className: t.modal,
-      "data-variant": i,
-      children: /* @__PURE__ */ o("section", { className: t.content, "aria-label": "modal content", "data-size": d, "data-color": s, children: r })
+      "data-backdrop-color": v,
+      className: d.modal,
+      "data-variant": b,
+      onClose: n !== "none" ? a : void 0,
+      children: /* @__PURE__ */ f(
+        x,
+        {
+          className: d.content,
+          "aria-label": "modal content",
+          size: h,
+          color: E,
+          padding: k,
+          spacing: y,
+          children: p
+        }
+      )
     }
   );
 };
 export {
-  g as ModalBase
+  Y as ModalBase
 };

package/dist/components/Modal/ModalBody.js

@@ -1,11 +1,13 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { Section as i } from "../Page/Section.js";
-const s = ({ children: o, ...r }) => /* @__PURE__ */ t(i, { spacing: 2, padding: 2, ...r, children: o });
+import '../../assets/ModalBody.css';const m = "_body_1cilr_1", p = {
+  body: m
+}, b = ({ children: o, ...t }) => /* @__PURE__ */ r(i, { spacing: 6, padding: 6, ...t, className: p.body, children: o });
 export {
-  s as ModalBody
+  b as ModalBody
 };

package/dist/components/Modal/ModalFooter.js

@@ -0,0 +1,11 @@
+import { jsx as t } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "react";
+import "../RootProvider/RootProvider.js";
+import "../Searchbar/AutocompleteBase.js";
+import "../Snackbar/useSnackbar.js";
+import { Flex as p } from "../Page/Flex.js";
+const f = ({ children: o, ...r }) => /* @__PURE__ */ t(p, { as: "footer", spacing: 2, padding: 4, ...r, children: o });
+export {
+  f as ModalFooter
+};

package/dist/components/Modal/ModalHeader.js

@@ -1,30 +1,30 @@
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import "../../index-L8X2o7IH.js";
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { c as a } from "../../index-L8X2o7IH.js";
 import "react";
 import { IconButton as m } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
 import { Heading as p } from "../Typography/Heading.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as c } from "../Page/Flex.js";
-import { Section as a } from "../Page/Section.js";
-import { S as s } from "../../XMark-DIqxCTTQ.js";
-const w = ({ title: t, onClose: i, closeTitle: e, children: n }) => /* @__PURE__ */ o(a, { as: "header", spacing: 2, padding: 4, children: [
-  /* @__PURE__ */ o(c, { direction: "row", justify: "between", align: "center", spacing: 8, children: [
-    /* @__PURE__ */ r(p, { as: "h2", size: "lg", children: t }),
-    typeof i == "function" && /* @__PURE__ */ r(
-      m,
-      {
-        icon: s,
-        variant: "outline",
-        onClick: i,
-        iconAltText: e ?? "close",
-        size: "sm"
-      }
-    )
-  ] }),
-  n
-] });
+import { Flex as d } from "../Page/Flex.js";
+import { Section as l } from "../Page/Section.js";
+import { S as f } from "../../XMark-DIqxCTTQ.js";
+import '../../assets/ModalHeader.css';const h = "_header_7ty99_1", y = "_sticky_7ty99_6", o = {
+  header: h,
+  sticky: y
+}, M = ({ title: t, onClose: i, closeTitle: e, children: n, sticky: s = !0 }) => /* @__PURE__ */ r(l, { as: "header", spacing: 2, padding: 4, className: a(o.header, s && o.sticky), children: /* @__PURE__ */ c(d, { direction: "row", justify: "between", align: "center", spacing: 8, children: [
+  n || t && /* @__PURE__ */ r(p, { as: "h2", size: "lg", children: t }),
+  typeof i == "function" && /* @__PURE__ */ r(
+    m,
+    {
+      icon: f,
+      variant: "outline",
+      onClick: i,
+      iconAltText: e ?? "Close",
+      size: "sm"
+    }
+  )
+] }) });
 export {
-  w as ModalHeader
+  M as ModalHeader
 };

package/dist/components/Modal/index.js

@@ -1,7 +1,9 @@
 import { ModalBase as e } from "./ModalBase.js";
 import { ModalHeader as d } from "./ModalHeader.js";
 import { ModalBody as l } from "./ModalBody.js";
+import { Modal as p } from "./Modal.js";
 export {
+  p as Modal,
   e as ModalBase,
   l as ModalBody,
   d as ModalHeader