@altinn/altinn-components 0.42.4 → 0.42.6

package/dist/assets/Avatar.css

@@ -1 +1 @@
-._avatar_128b0_1{position:relative;overflow:hidden;box-sizing:border-box}._avatar_128b0_1[data-shape=circle]{border-radius:50%}._avatar_128b0_1[data-shape=square]{border-radius:5%}._avatar_128b0_1[data-outline=true]{outline:1px solid #ffffff;box-sizing:border-box}._shape_128b0_20{display:block;font-size:1em;width:1em;height:1em}._shape_128b0_20[data-variant=outline]{border:1px solid}._label_128b0_31{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;overflow:hidden;font-size:.575em}._image_128b0_41{display:block;width:100%;height:100%}@supports (-webkit-hyphens: none){._avatar_128b0_1[data-size=lg] ._label_128b0_31{font-size:1.58rem}._avatar_128b0_1[data-size=md] ._label_128b0_31{font-size:1.15rem}._avatar_128b0_1[data-size=sm] ._label_128b0_31{font-size:.85rem}}
+._avatar_1en7r_1{position:relative;overflow:hidden;box-sizing:border-box}._avatar_1en7r_1[data-shape=circle]{border-radius:50%}._avatar_1en7r_1[data-shape=square]{border-radius:5%}._avatar_1en7r_1{outline:1px solid #ffffff;box-sizing:border-box}._shape_1en7r_20{display:block;font-size:1em;width:1em;height:1em}._shape_1en7r_20[data-variant=outline]{border:1px solid}._label_1en7r_31{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;overflow:hidden;font-size:.575em}._image_1en7r_41{display:block;width:100%;height:100%}._deletedIcon_1en7r_47{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}@supports (-webkit-hyphens: none){._avatar_1en7r_1[data-size=lg] ._label_1en7r_31{font-size:1.58rem}._avatar_1en7r_1[data-size=md] ._label_1en7r_31{font-size:1.15rem}._avatar_1en7r_1[data-size=sm] ._label_1en7r_31{font-size:.85rem}}

package/dist/components/Avatar/Avatar.js

@@ -1,61 +1,78 @@
 "use client";
-import { jsx as e, jsxs as x } from "react/jsx-runtime";
+import { jsx as a, jsxs as S } from "react/jsx-runtime";
 import { c as j } from "../../index-L8X2o7IH.js";
-import { useState as A } from "react";
-import { Skeleton as E } from "../Skeleton/Skeleton.js";
-import { fromStringToColor as I } from "./color.js";
-import '../../assets/Avatar.css';const y = "_avatar_128b0_1", q = "_shape_128b0_20", z = "_label_128b0_31", H = "_image_128b0_41", r = {
-  avatar: y,
-  shape: q,
-  label: z,
-  image: H
-}, F = (a) => typeof a == "object" && a !== null && "name" in a, G = ({
-  type: a = "person",
-  size: m,
+import { useState as y } from "react";
+import { Skeleton as A } from "../Skeleton/Skeleton.js";
+import { fromStringToColor as E } from "./color.js";
+import '../../assets/Avatar.css';const q = "_avatar_1en7r_1", z = "_shape_1en7r_20", B = "_label_1en7r_31", H = "_image_1en7r_41", L = "_deletedIcon_1en7r_47", r = {
+  avatar: q,
+  shape: z,
+  label: B,
+  image: H,
+  deletedIcon: L
+}, G = (e) => typeof e == "object" && e !== null && "name" in e, J = ({
+  type: e = "person",
+  isParent: n,
+  isDeleted: m = !1,
+  size: h,
   name: l = "Avatar",
-  shape: d,
-  color: u,
-  variant: o = "solid",
-  outline: h = !0,
-  imageUrl: s,
-  imageUrlAlt: b,
-  customLabel: _,
-  loading: n,
-  className: g,
-  style: c = {}
+  shape: u,
+  color: g,
+  variant: _,
+  imageUrl: t,
+  imageUrlAlt: f,
+  customLabel: v,
+  loading: c,
+  className: b,
+  style: i = {}
 }) => {
-  const [f, v] = A(!1), C = d || a === "person" ? "circle" : "square", N = u || a === "person" ? "light" : "dark", { backgroundColor: i, foregroundColor: p } = I(l, N), S = (l[0] ?? "").toUpperCase(), t = s && !f, k = !n && !t ? {
-    ...c,
-    backgroundColor: o === "outline" ? p : i,
-    color: o === "outline" ? i : p
-  } : c;
-  return /* @__PURE__ */ e(
+  const [C, I] = y(!1), w = u || e === "person" ? "circle" : "square", x = g || e === "person" ? "light" : "dark";
+  let o = _;
+  e === "company" && typeof n == "boolean" && (o = n ? "solid" : "outline");
+  const { backgroundColor: p, foregroundColor: d } = E(l, x), N = (l[0] ?? "").toUpperCase(), s = t && !C, k = !c && !s ? {
+    ...i,
+    backgroundColor: o === "outline" ? d : p,
+    color: o === "outline" ? p : d
+  } : i;
+  return /* @__PURE__ */ a(
     "div",
     {
-      className: j(r.avatar, g),
+      className: j(r.avatar, b),
       style: k,
-      "data-shape": C,
-      "data-size": m,
-      "data-outline": h,
+      "data-shape": w,
+      "data-size": h,
       "aria-hidden": !0,
-      children: /* @__PURE__ */ x(E, { loading: n, className: r.shape, variant: "circle", children: [
-        /* @__PURE__ */ e("div", { className: r.shape, "data-variant": o, children: t && /* @__PURE__ */ e(
+      children: /* @__PURE__ */ S(A, { loading: c, className: r.shape, variant: "circle", children: [
+        /* @__PURE__ */ a("div", { className: r.shape, "data-variant": o, children: s && /* @__PURE__ */ a(
           "img",
           {
-            src: s,
+            src: t,
             className: r.image,
-            alt: b || s,
+            alt: f || t,
             onError: () => {
-              v(!0);
+              I(!0);
             }
           }
         ) }),
-        !t && /* @__PURE__ */ e("span", { className: r.label, children: _ || S })
+        !s && /* @__PURE__ */ a("span", { className: r.label, children: v || N }),
+        m && /* @__PURE__ */ a(
+          "svg",
+          {
+            "aria-hidden": "true",
+            className: r.deletedIcon,
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ a("path", { d: "M0 24L24 -1.20156e-06", stroke: "currentColor" })
+          }
+        )
       ] })
     }
   );
 };
 export {
-  G as Avatar,
-  F as isAvatarProps
+  J as Avatar,
+  G as isAvatarProps
 };

package/dist/components/Settings/SettingsItem.js

@@ -3,22 +3,22 @@ import "../../index-L8X2o7IH.js";
 import { useState as b } from "react";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { Input as x } from "../Forms/Input.js";
+import { Input as w } from "../Forms/Input.js";
 import { SettingsItemBase as n } from "./SettingsItemBase.js";
-import { SettingsModal as I } from "./SettingsModal.js";
-const O = ({
-  loading: a,
+import { SettingsModal as x } from "./SettingsModal.js";
+const M = ({
+  loading: u,
   variant: f = "default",
   id: c = "settings",
-  name: m,
-  checked: g,
-  onChange: h,
+  name: h,
+  checked: m,
+  onChange: g,
   modalProps: e,
   children: v,
   ...t
 }) => {
-  const [l, u] = b(!1);
-  if (a)
+  const [l, a] = b(!1);
+  if (u)
     return /* @__PURE__ */ i(n, { icon: t == null ? void 0 : t.icon, title: t == null ? void 0 : t.title, loading: !0 });
   switch (f) {
     case "switch":
@@ -34,36 +34,61 @@ const O = ({
           value: void 0,
           interactive: !1,
           controls: /* @__PURE__ */ i(
-            x,
+            w,
             {
               type: "checkbox",
               role: "switch",
               "aria-labelledby": c,
-              name: m,
+              name: h,
               value: t == null ? void 0 : t.value,
-              checked: g,
-              onChange: h,
+              checked: m,
+              onChange: g,
               style: { marginRight: "0.5em" }
             }
           )
         }
       );
     case "modal":
-      return /* @__PURE__ */ i(n, { ...t, as: "button", linkIcon: !0, onClick: () => u(!0), expanded: l, children: l && /* @__PURE__ */ i(
-        I,
+      return /* @__PURE__ */ i(
+        n,
         {
-          ...e,
-          icon: (e == null ? void 0 : e.icon) || (t == null ? void 0 : t.icon),
-          title: (e == null ? void 0 : e.title) || (t == null ? void 0 : t.title),
-          open: l,
-          onClose: () => u(!1),
-          children: v
+          ...t,
+          title: {
+            variant: "subtle",
+            weight: "normal",
+            children: t == null ? void 0 : t.title
+          },
+          as: "button",
+          linkIcon: !0,
+          onClick: () => a(!0),
+          expanded: l,
+          children: l && /* @__PURE__ */ i(
+            x,
+            {
+              ...e,
+              icon: (e == null ? void 0 : e.icon) || (t == null ? void 0 : t.icon),
+              title: (e == null ? void 0 : e.title) || (t == null ? void 0 : t.title),
+              open: l,
+              onClose: () => a(!1),
+              children: v
+            }
+          )
         }
-      ) });
+      );
     default:
-      return /* @__PURE__ */ i(n, { ...t });
+      return /* @__PURE__ */ i(
+        n,
+        {
+          ...t,
+          title: {
+            variant: "subtle",
+            weight: "normal",
+            children: t == null ? void 0 : t.title
+          }
+        }
+      );
   }
 };
 export {
-  O as SettingsItem
+  M as SettingsItem
 };

package/dist/types/lib/components/Account/AccountListItem.d.ts

@@ -13,6 +13,7 @@ export interface AccountListItemProps extends ListItemProps, AccountListItemCont
     accountIds?: string[];
     isCurrentEndUser?: boolean;
     isDeleted?: boolean;
+    isParent?: boolean;
     contextMenu?: ContextMenuProps;
     label?: string;
 }

package/dist/types/lib/components/Account/AccountListItem.stories.d.ts

@@ -25,6 +25,7 @@ declare const meta: {
         accountIds?: string[] | undefined;
         isCurrentEndUser?: boolean | undefined;
         isDeleted?: boolean | undefined;
+        isParent?: boolean | undefined;
         contextMenu?: import('..').ContextMenuProps | undefined;
         label?: string | undefined;
         variant?: import('..').ListItemVariant | undefined;

package/dist/types/lib/components/Avatar/Avatar.d.ts

@@ -14,6 +14,10 @@ export interface AvatarProps {
     name: string;
     /** The type of avatar. */
     type?: AvatarType;
+    /** Company is a parent. */
+    isParent?: boolean;
+    /** Company is a deleted. */
+    isDeleted?: boolean;
     /** Avatar shape. */
     shape?: AvatarColor;
     /** Avatar color. */
@@ -41,4 +45,4 @@ export declare const isAvatarProps: (icon: unknown) => icon is AvatarProps;
 /**
  * Avatar component to display user or company avatars with various customization options.
  */
-export declare const Avatar: ({ type, size, name, shape, color, variant, outline, imageUrl, imageUrlAlt, customLabel, loading, className, style, }: AvatarProps) => ReactElement;
+export declare const Avatar: ({ type, isParent, isDeleted, size, name, shape, color, variant, imageUrl, imageUrlAlt, customLabel, loading, className, style, }: AvatarProps) => ReactElement;

package/dist/types/lib/components/Avatar/Avatar.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
 import { AvatarProps } from '..';
 declare const meta: {
     title: string;
-    component: ({ type, size, name, shape, color, variant, outline, imageUrl, imageUrlAlt, customLabel, loading, className, style, }: AvatarProps) => React.ReactElement;
+    component: ({ type, isParent, isDeleted, size, name, shape, color, variant, imageUrl, imageUrlAlt, customLabel, loading, className, style, }: AvatarProps) => React.ReactElement;
     tags: string[];
     parameters: {
         layout: string;
@@ -10,12 +10,21 @@ declare const meta: {
     args: {
         name: string;
         type: "person";
+        style: {
+            fontSize: string;
+            width: string;
+            height: string;
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Person: Story;
 export declare const Company: Story;
+export declare const CompanyOutline: Story;
+export declare const DeletedCompany: Story;
+export declare const Subunit: Story;
+export declare const DeletedSubunit: Story;
 export declare const Logo: Story;
 export declare const Loading: Story;
 export declare const Sizes: ({ type, name, imageUrl }: AvatarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Dialog/SeenByLogItem.stories.d.ts

@@ -21,6 +21,8 @@ declare const meta: {
         size?: "sm" | "md" | undefined;
         name: string;
         type?: import('..').AvatarType | undefined;
+        isParent?: boolean | undefined;
+        isDeleted?: boolean | undefined;
         shape?: import('..').AvatarColor | undefined;
         color?: import('..').AvatarColor | undefined;
         variant?: import('..').AvatarVariant | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.42.4",
+  "version": "0.42.6",
   "main": "dist/index.js",
   "files": [
     "dist/",