@altinn/altinn-components 0.41.3 → 0.41.4

package/dist/components/Settings/SettingsItem.js

@@ -1,45 +1,54 @@
-import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import "react";
+import { useState as h } from "react";
 import "../RootProvider/RootProvider.js";
-import { getAriaLabelFromTitle as L } from "../Menu/MenuItemLabel.js";
-import { ListItemBase as d } from "../List/ListItemBase.js";
-import { ListItemHeader as f } from "../List/ListItemHeader.js";
-import { ListItemLabel as g } from "../List/ListItemLabel.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/SettingsItem.css';const I = "_item_lk1g7_1", k = "_label_lk1g7_20", N = "_header_lk1g7_24", e = {
-  item: I,
-  label: k,
-  header: N
-}, T = ({
-  color: i,
-  size: l,
-  expanded: t,
-  icon: o,
-  label: s,
-  title: r,
-  value: c,
-  description: n,
-  children: _,
-  highlightWords: b,
-  ...m
+import { Input as v } from "../Forms/Input.js";
+import { SettingsItemBase as i } from "./SettingsItemBase.js";
+import { SettingsModal as b } from "./SettingsModal.js";
+const B = ({
+  loading: a,
+  variant: c = "default",
+  id: m = "settings",
+  name: u,
+  checked: f,
+  onChange: d,
+  children: g,
+  ...t
 }) => {
-  const h = m.ariaLabel || L(r);
-  return /* @__PURE__ */ p(d, { className: e.item, color: i, size: l, expanded: t, children: [
-    /* @__PURE__ */ a(f, { ...m, ariaLabel: h, className: e.header, icon: o, children: /* @__PURE__ */ a(
-      g,
-      {
-        highlightWords: b,
-        className: e.label,
-        title: r,
-        value: c,
-        description: n,
-        children: s
-      }
-    ) }),
-    t && _
-  ] });
+  const [n, l] = h(!1);
+  if (a)
+    return /* @__PURE__ */ e(i, { icon: t == null ? void 0 : t.icon, title: t == null ? void 0 : t.title, loading: !0 });
+  switch (c) {
+    case "switch":
+      return /* @__PURE__ */ e(
+        i,
+        {
+          ...t,
+          title: [t == null ? void 0 : t.title, t == null ? void 0 : t.value].join(": "),
+          value: void 0,
+          interactive: !1,
+          controls: /* @__PURE__ */ e(
+            v,
+            {
+              type: "checkbox",
+              role: "switch",
+              "aria-labelledby": m,
+              name: u,
+              value: t == null ? void 0 : t.value,
+              checked: f,
+              onChange: d,
+              style: { marginRight: "0.5em" }
+            }
+          )
+        }
+      );
+    case "modal":
+      return /* @__PURE__ */ e(i, { ...t, as: "button", linkIcon: !0, onClick: () => l(!0), expanded: n, children: n && /* @__PURE__ */ e(b, { icon: t == null ? void 0 : t.icon, title: t == null ? void 0 : t.title, open: n, onClose: () => l(!1), children: g }) });
+    default:
+      return /* @__PURE__ */ e(i, { ...t });
+  }
 };
 export {
-  T as SettingsItem
+  B as SettingsItem
 };

package/dist/components/Settings/SettingsItemBase.js

@@ -0,0 +1,47 @@
+import { jsxs as L, jsx as i } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "react";
+import "../RootProvider/RootProvider.js";
+import { getAriaLabelFromTitle as d } from "../Menu/MenuItemLabel.js";
+import { ListItemBase as f } from "../List/ListItemBase.js";
+import { ListItemHeader as g } from "../List/ListItemHeader.js";
+import { ListItemLabel as I } from "../List/ListItemLabel.js";
+import "../Snackbar/useSnackbar.js";
+import '../../assets/SettingsItemBase.css';const k = "_item_lk1g7_1", N = "_label_lk1g7_20", j = "_header_lk1g7_24", e = {
+  item: k,
+  label: N,
+  header: j
+}, q = ({
+  loading: t,
+  color: s,
+  size: l,
+  expanded: r,
+  icon: o,
+  label: c,
+  title: m,
+  value: n,
+  description: _,
+  children: b,
+  highlightWords: h,
+  ...a
+}) => {
+  const p = a.ariaLabel || d(m);
+  return /* @__PURE__ */ L(f, { className: e.item, color: s, size: l, expanded: r, children: [
+    /* @__PURE__ */ i(g, { ...a, loading: t, ariaLabel: p, className: e.header, icon: o, children: /* @__PURE__ */ i(
+      I,
+      {
+        loading: t,
+        highlightWords: h,
+        className: e.label,
+        title: m,
+        value: n,
+        description: _,
+        children: c
+      }
+    ) }),
+    r && b
+  ] });
+};
+export {
+  q as SettingsItemBase
+};

package/dist/components/Settings/SettingsList.js

@@ -8,8 +8,8 @@ import { Divider as y } from "../Divider/Divider.js";
 import { List as S } from "../List/List.js";
 import "../Snackbar/useSnackbar.js";
 import { Flex as v } from "../Page/Flex.js";
-import { SettingsSection as j } from "./SettingsSection.js";
-import { SettingsItem as k } from "./SettingsItem.js";
+import { SettingsItem as j } from "./SettingsItem.js";
+import { SettingsSection as k } from "./SettingsSection.js";
 const q = ({ items: n, groups: p = {}, sortGroupBy: c }) => {
   const { menu: r } = h({
     items: n,
@@ -22,11 +22,11 @@ const q = ({ items: n, groups: p = {}, sortGroupBy: c }) => {
     const e = i.props || {};
     return /* @__PURE__ */ o(s, { children: [
       (e == null ? void 0 : e.title) && /* @__PURE__ */ t(g, { size: "lg", children: e.title }),
-      /* @__PURE__ */ t(j, { children: /* @__PURE__ */ t(S, { size: "sm", children: i == null ? void 0 : i.items.map((a, m) => {
+      /* @__PURE__ */ t(k, { children: /* @__PURE__ */ t(S, { size: "sm", children: i == null ? void 0 : i.items.map((a, m) => {
         const d = a.props || {};
         return /* @__PURE__ */ o(s, { children: [
           m > 0 && /* @__PURE__ */ t(y, { as: "li" }),
-          /* @__PURE__ */ f(k, { ...d, key: "settings-list-item" + m })
+          /* @__PURE__ */ f(j, { ...d, key: "settings-list-item" + m })
         ] }, m);
       }) }) })
     ] }, l);

package/dist/components/Settings/SettingsSection.js

@@ -11,9 +11,9 @@ import '../../assets/SettingsSection.css';const m = "_section_kd6sc_1", p = {
   theme: o = "default",
   shadow: s = "xs",
   as: i,
-  color: e,
-  children: c
-}) => /* @__PURE__ */ n(r, { as: i, size: t, color: e, theme: o, shadow: s, className: p.section, children: c });
+  color: c,
+  children: e
+}) => /* @__PURE__ */ n(r, { as: i, size: t, color: c, theme: o, shadow: s, className: p.section, spacing: 2, children: e });
 export {
   d as SettingsSection
 };

package/dist/components/Settings/index.js

@@ -1,14 +1,20 @@
-import { SettingsSection as e } from "./SettingsSection.js";
-import { SettingsItem as m } from "./SettingsItem.js";
-import { SettingsList as f } from "./SettingsList.js";
-import { SettingsModal as i } from "./SettingsModal.js";
-import { UsedByLog as x } from "./UsedByLog.js";
-import { UsedByLogItem as S } from "./UsedByLogItem.js";
+import { SettingsItem as e } from "./SettingsItem.js";
+import { SettingsItemBase as m } from "./SettingsItemBase.js";
+import { SettingsList as i } from "./SettingsList.js";
+import { SettingsSection as g } from "./SettingsSection.js";
+import { SettingsModal as x } from "./SettingsModal.js";
+import { UsedByLog as S } from "./UsedByLog.js";
+import { UsedByLogItem as a } from "./UsedByLogItem.js";
+import { BookmarksSettingsItem as I } from "./BookmarksSettingsItem.js";
+import { BookmarksSettingsList as d } from "./BookmarksSettingsList.js";
 export {
-  m as SettingsItem,
-  f as SettingsList,
-  i as SettingsModal,
-  e as SettingsSection,
-  x as UsedByLog,
-  S as UsedByLogItem
+  I as BookmarksSettingsItem,
+  d as BookmarksSettingsList,
+  e as SettingsItem,
+  m as SettingsItemBase,
+  i as SettingsList,
+  x as SettingsModal,
+  g as SettingsSection,
+  S as UsedByLog,
+  a as UsedByLogItem
 };