@altinn/altinn-components 0.6.12 → 0.7.1

package/dist/components/List/{ListItemAction.d.ts → ListItemControls.d.ts}

@@ -2,12 +2,12 @@ import { ReactNode } from 'react';
 import { BadgeProps } from '../Badge';
 import { ContextMenuProps } from '../ContextMenu';
 import { IconName } from '../Icon';
-interface ListItemActionProps {
+interface ListItemControlsProps {
     badge?: BadgeProps;
-    menu?: ContextMenuProps;
     linkText?: string;
     linkIcon?: IconName;
+    menu?: ContextMenuProps;
     children?: ReactNode;
 }
-export declare const ListItemAction: ({ linkText, linkIcon, menu, badge, children }: ListItemActionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItemControls: ({ badge, linkText, linkIcon, menu, children }: ListItemControlsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/List/ListItemControls.js

@@ -0,0 +1,19 @@
+import { jsx as t, jsxs as l, Fragment as m } from "react/jsx-runtime";
+import { Badge as i } from "../Badge/Badge.js";
+import { ContextMenu as a } from "../ContextMenu/ContextMenu.js";
+import { Icon as d } from "../Icon/Icon.js";
+import "../Icon/SvgIcon.js";
+import "../../index-L8X2o7IH.js";
+import '../../assets/ListItemControls.css';const _ = "_controls_dduzt_1", p = "_linkText_dduzt_14", x = "_linkIcon_dduzt_19", o = {
+  controls: _,
+  linkText: p,
+  linkIcon: x
+}, T = ({ badge: s, linkText: r, linkIcon: c, menu: n, children: e }) => /* @__PURE__ */ t("div", { className: o.controls, "data-menu": n && !0, children: e || /* @__PURE__ */ l(m, { children: [
+  s && /* @__PURE__ */ t(i, { ...s }),
+  r && /* @__PURE__ */ t("span", { className: o.linkText, children: r }),
+  c && /* @__PURE__ */ t(d, { name: c, className: o.linkIcon }),
+  n && /* @__PURE__ */ t(a, { ...n, className: o.menu })
+] }) });
+export {
+  T as ListItemControls
+};

package/dist/components/List/ListItemHeader.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { ListItemSize } from './ListItemBase';
+export interface ListItemHeaderProps {
+    size?: ListItemSize;
+    className?: string;
+    children?: ReactNode;
+}
+export declare const ListItemHeader: ({ size, className, children }: ListItemHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/List/ListItemHeader.js

@@ -0,0 +1,8 @@
+import { jsx as a } from "react/jsx-runtime";
+import { c as t } from "../../index-L8X2o7IH.js";
+import '../../assets/ListItemHeader.css';const o = "_header_70chu_1", c = {
+  header: o
+}, h = ({ size: e = "sm", className: r, children: s }) => /* @__PURE__ */ a("header", { className: t(c.header, r), "data-size": e, children: s });
+export {
+  h as ListItemHeader
+};

package/dist/components/List/ListItemLabel.js

@@ -1,11 +1,11 @@
-import { jsx as s, jsxs as n, Fragment as c } from "react/jsx-runtime";
-import '../../assets/ListItemLabel.css';const r = "_label_1ajdw_3", d = "_title_1ajdw_33", o = "_description_1ajdw_46", e = {
+import { jsx as a, jsxs as n, Fragment as c } from "react/jsx-runtime";
+import '../../assets/ListItemLabel.css';const r = "_label_1aaut_3", o = "_title_1aaut_33", d = "_description_1aaut_46", s = {
   label: r,
-  title: d,
-  description: o
-}, m = ({ size: t = "sm", title: l, description: i, children: a }) => /* @__PURE__ */ s("span", { className: e.label, "data-size": t, children: a || /* @__PURE__ */ n(c, { children: [
-  /* @__PURE__ */ s("strong", { className: e.title, "data-size": t, children: l }),
-  /* @__PURE__ */ s("span", { className: e.description, "data-size": t, children: i })
+  title: o,
+  description: d
+}, m = ({ size: t = "sm", title: l, description: i, children: e }) => /* @__PURE__ */ a("span", { className: s.label, "data-size": t, children: e || /* @__PURE__ */ n(c, { children: [
+  /* @__PURE__ */ a("strong", { className: s.title, "data-size": t, children: l }),
+  /* @__PURE__ */ a("span", { className: s.description, "data-size": t, children: i })
 ] }) });
 export {
   m as ListItemLabel

package/dist/components/List/ListItemMedia.js

@@ -1,12 +1,12 @@
 import { jsxs as d, jsx as l } from "react/jsx-runtime";
 import { Avatar as n } from "../Avatar/Avatar.js";
 import { AvatarGroup as c } from "../Avatar/AvatarGroup.js";
-import { Icon as u } from "../Icon/Icon.js";
+import { Icon as x } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
 import "../../index-L8X2o7IH.js";
-import '../../assets/ListItemMedia.css';const x = "_media_pfuu4_3", f = "_icon_pfuu4_23", s = {
-  media: x,
-  icon: f
+import '../../assets/ListItemMedia.css';const f = "_media_14b0z_3", u = "_icon_14b0z_24", s = {
+  media: f,
+  icon: u
 }, a = {
   avatar: {
     xs: "xs",
@@ -22,7 +22,7 @@ import '../../assets/ListItemMedia.css';const x = "_media_pfuu4_3", f = "_icon_p
     lg: "md",
     xl: "lg"
   }
-}, A = ({
+}, j = ({
   size: t = "sm",
   color: i = "default",
   icon: m,
@@ -30,7 +30,7 @@ import '../../assets/ListItemMedia.css';const x = "_media_pfuu4_3", f = "_icon_p
   avatarGroup: r,
   children: e
 }) => !m && !o && !r && !e ? !1 : /* @__PURE__ */ d("div", { className: s.media, "data-size": t, "data-color": m ? i : null, children: [
-  m && /* @__PURE__ */ l(u, { name: m, variant: "outline", className: s.icon }) || o && /* @__PURE__ */ l(n, { ...o, size: a == null ? void 0 : a.avatar[t], className: s.avatar }) || r && /* @__PURE__ */ l(
+  m && /* @__PURE__ */ l(x, { name: m, variant: "outline", className: s.icon }) || o && /* @__PURE__ */ l(n, { ...o, size: a == null ? void 0 : a.avatar[t], className: s.avatar }) || r && /* @__PURE__ */ l(
     c,
     {
       ...r,
@@ -41,5 +41,5 @@ import '../../assets/ListItemMedia.css';const x = "_media_pfuu4_3", f = "_icon_p
   e
 ] });
 export {
-  A as ListItemMedia
+  j as ListItemMedia
 };

package/dist/components/List/ListItemSelect.d.ts

@@ -0,0 +1,12 @@
+import { ChangeEventHandler } from 'react';
+import { ListItemSize } from './ListItemBase';
+export type ListItemSelectProps = {
+    size?: ListItemSize;
+    checked?: boolean;
+    onChange?: ChangeEventHandler;
+    className?: string;
+};
+/**
+ * Dialog checkbox
+ */
+export declare const ListItemSelect: ({ size, checked, onChange, className }: ListItemSelectProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/List/ListItemSelect.js

@@ -0,0 +1,15 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { c as a } from "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import { CheckboxIcon as i } from "../Icon/CheckboxIcon.js";
+import '../../assets/ListItemSelect.css';const r = "_label_hd89l_1", m = "_input_hd89l_38", p = "_icon_hd89l_43", t = {
+  label: r,
+  input: m,
+  icon: p
+}, h = ({ size: l, checked: e = !1, onChange: s, className: c }) => /* @__PURE__ */ n("label", { className: a(t.label, c), "data-size": l, children: [
+  /* @__PURE__ */ o("input", { type: "checkbox", checked: e, onChange: s, className: t.input, tabIndex: -1 }),
+  /* @__PURE__ */ o(i, { hover: !0, checked: e, className: t.icon })
+] });
+export {
+  h as ListItemSelect
+};

package/dist/components/List/index.d.ts

@@ -1,7 +1,9 @@
 export * from './ListItemBase';
+export * from './ListItemHeader';
+export * from './ListItemLabel';
+export * from './ListItemMedia';
+export * from './ListItemControls';
+export * from './ListItemSelect';
 export * from './ListItem';
 export * from './ListBase';
 export * from './List';
-export * from './ListItemLabel';
-export * from './ListItemMedia';
-export * from './ListItemAction';

package/dist/components/List/index.js

@@ -1,16 +1,20 @@
 import { ListItemBase as o } from "./ListItemBase.js";
-import { ListItem as m } from "./ListItem.js";
-import { ListBase as s } from "./ListBase.js";
-import { List as f } from "./List.js";
-import { ListItemLabel as x } from "./ListItemLabel.js";
-import { ListItemMedia as a } from "./ListItemMedia.js";
-import { ListItemAction as b } from "./ListItemAction.js";
+import { ListItemHeader as m } from "./ListItemHeader.js";
+import { ListItemLabel as i } from "./ListItemLabel.js";
+import { ListItemMedia as f } from "./ListItemMedia.js";
+import { ListItemControls as x } from "./ListItemControls.js";
+import { ListItemSelect as a } from "./ListItemSelect.js";
+import { ListItem as d } from "./ListItem.js";
+import { ListBase as b } from "./ListBase.js";
+import { List as n } from "./List.js";
 export {
-  f as List,
-  s as ListBase,
-  m as ListItem,
-  b as ListItemAction,
+  n as List,
+  b as ListBase,
+  d as ListItem,
   o as ListItemBase,
-  x as ListItemLabel,
-  a as ListItemMedia
+  x as ListItemControls,
+  m as ListItemHeader,
+  i as ListItemLabel,
+  f as ListItemMedia,
+  a as ListItemSelect
 };

package/dist/components/Meta/MetaItemBase.d.ts

@@ -1,5 +1,5 @@
 import { ElementType, ReactNode } from 'react';
-export type MetaItemVariant = 'solid' | 'outline' | 'dotted' | 'text';
+export type MetaItemVariant = 'solid' | 'outline' | 'dotted' | 'rounded' | 'text';
 export type MetaItemSize = 'xs';
 export type MetaItemColor = 'subtle';
 export interface MetaItemBaseProps {

package/dist/components/Meta/MetaItemBase.js

@@ -1,29 +1,30 @@
-import { jsx as i } from "react/jsx-runtime";
-import { c } from "../../index-L8X2o7IH.js";
-import { s as d } from "../../metaItem.module-CfNiX769.js";
-const g = ({
+import { jsx as c } from "react/jsx-runtime";
+import { c as p } from "../../index-L8X2o7IH.js";
+import '../../assets/MetaItemBase.css';const d = "_item_o4xu8_1", x = {
+  item: d
+}, u = ({
   as: t,
-  variant: a = "text",
-  size: o,
-  color: e,
+  variant: e = "text",
+  size: a,
+  color: o,
   progress: s,
-  datetime: r,
-  className: m,
-  children: n,
-  ...p
-}) => /* @__PURE__ */ i(
+  datetime: m,
+  className: n,
+  children: r,
+  ...i
+}) => /* @__PURE__ */ c(
   t || "span",
   {
-    "data-size": o,
-    "data-color": e,
-    "data-variant": a,
+    "data-size": a,
+    "data-color": o,
+    "data-variant": e,
     "data-progress": s,
-    dateTime: r,
-    className: c(d.item, m),
-    ...p,
-    children: n
+    dateTime: m,
+    className: p(x.item, n),
+    ...i,
+    children: r
   }
 );
 export {
-  g as MetaItemBase
+  u as MetaItemBase
 };

package/dist/components/Meta/MetaItemLabel.js

@@ -1,6 +1,7 @@
-import { jsx as e } from "react/jsx-runtime";
-import { s as r } from "../../metaItem.module-CfNiX769.js";
-const l = ({ size: a = "xs", variant: t = "text", children: s }) => /* @__PURE__ */ e("span", { className: r.label, "data-variant": t, "data-size": a, children: s });
+import { jsx as l } from "react/jsx-runtime";
+import '../../assets/MetaItemLabel.css';const s = "_label_8431v_1", n = {
+  label: s
+}, r = ({ size: a = "xs", variant: t = "text", children: e }) => /* @__PURE__ */ l("span", { className: n.label, "data-variant": t, "data-size": a, children: e });
 export {
-  l as MetaItemLabel
+  r as MetaItemLabel
 };

package/dist/components/Meta/MetaItemMedia.js

@@ -1,12 +1,13 @@
-import { jsxs as t, jsx as s } from "react/jsx-runtime";
-import { Icon as o } from "../Icon/Icon.js";
+import { jsxs as o, jsx as s } from "react/jsx-runtime";
+import { Icon as i } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
-import { ProgressIcon as i } from "../Icon/ProgressIcon.js";
-import { s as m } from "../../metaItem.module-CfNiX769.js";
-const d = ({ size: r = "xs", icon: e, progress: a }) => !e && typeof a != "number" ? !1 : /* @__PURE__ */ t("span", { className: m.media, "data-size": r, children: [
-  e && /* @__PURE__ */ s(o, { name: e, className: m.icon }),
-  a && /* @__PURE__ */ s(i, { value: a, className: m.icon })
+import { ProgressIcon as r } from "../Icon/ProgressIcon.js";
+import '../../assets/MetaItemMedia.css';const n = "_media_m8ywm_1", a = {
+  media: n
+}, p = ({ size: t = "xs", icon: e, progress: m }) => !e && typeof m != "number" ? !1 : /* @__PURE__ */ o("span", { className: a.media, "data-size": t, children: [
+  e && /* @__PURE__ */ s(i, { name: e, className: a.icon }),
+  m && /* @__PURE__ */ s(r, { value: m, className: a.icon })
 ] });
 export {
-  d as MetaItemMedia
+  p as MetaItemMedia
 };

package/dist/components/Page/PageNav.js

@@ -1,8 +1,8 @@
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { Button as n } from "../Button/Button.js";
-import '../../assets/DialogNav.css';const i = "_nav_678a5_1", c = "_action_678a5_8", e = {
+import { Button as e } from "../Button/Button.js";
+import '../../assets/DialogNav.css';const i = "_nav_678a5_1", c = "_action_678a5_8", r = {
   nav: i,
   action: c
 }, _ = ({
@@ -10,10 +10,10 @@ import '../../assets/DialogNav.css';const i = "_nav_678a5_1", c = "_action_678a5
     as: "a",
     label: "Back"
   },
-  children: o
-}) => /* @__PURE__ */ s("nav", { className: e.nav, children: [
-  /* @__PURE__ */ r(n, { ...a, variant: "text", color: "secondary", icon: "arrow-left", reverse: !0, children: (a == null ? void 0 : a.label) || "Back" }),
-  /* @__PURE__ */ r("div", { className: e.action, children: o })
+  children: n
+}) => /* @__PURE__ */ s("nav", { className: r.nav, children: [
+  /* @__PURE__ */ o(e, { ...a, variant: "text", color: "secondary", icon: "arrow-left", children: (a == null ? void 0 : a.label) || "Back" }),
+  /* @__PURE__ */ o("div", { className: r.action, children: n })
 ] });
 export {
   _ as PageNav

package/dist/components/Searchbar/Autocomplete.stories.js

@@ -1,41 +1,137 @@
 import { jsxs as e, jsx as t } from "react/jsx-runtime";
-import { Autocomplete as r } from "./Autocomplete.js";
-const l = {
+import { Autocomplete as l } from "./Autocomplete.js";
+const o = {
   title: "Header/Autocomplete",
-  component: r,
+  component: l,
   tags: ["autodocs"],
   parameters: {},
   args: {}
-}, a = {
+}, p = {
   args: {
     groups: {},
     items: [
       {
         id: "1a",
-        groupId: "1",
+        type: "scope",
         href: "#",
         label: "Alt i innboks"
       },
       {
         id: "1b",
-        groupId: "1",
+        type: "scope",
         href: "#",
         label: "Alt i hele Altinn"
       }
     ]
   }
-}, n = {
+}, d = {
+  args: {
+    items: [
+      {
+        id: "1a",
+        type: "scope",
+        href: "#",
+        label: "Skriv minst 3 tegn for søke i innboks"
+      },
+      {
+        id: "1b",
+        type: "scope",
+        href: "#",
+        label: () => /* @__PURE__ */ e("span", { children: [
+          /* @__PURE__ */ t("mark", { children: "sk" }),
+          " i hele Altinn"
+        ] })
+      }
+    ]
+  }
+}, a = {
+  args: {
+    groups: {
+      3: {
+        title: "Mest relevante treff"
+      }
+    },
+    items: [
+      {
+        id: "1a",
+        groupId: "1",
+        type: "scope",
+        href: "#",
+        badge: {
+          label: "2 treff"
+        },
+        label: () => /* @__PURE__ */ e("span", { children: [
+          /* @__PURE__ */ t("mark", { children: "skatt" }),
+          " i innboks"
+        ] })
+      },
+      {
+        id: "1b",
+        groupId: "1",
+        type: "scope",
+        href: "#",
+        label: () => /* @__PURE__ */ e("span", { children: [
+          /* @__PURE__ */ t("mark", { children: "skatt" }),
+          " i hele Altinn"
+        ] })
+      },
+      {
+        id: "2a",
+        groupId: "3",
+        type: "dialog",
+        href: "#",
+        title: "Skattemeldingen 2023",
+        summary: "Skattemeldingen er klar for innsending."
+      },
+      {
+        id: "2b",
+        groupId: "3",
+        type: "dialog",
+        href: "#",
+        title: "Skatteoppgjør 2022",
+        summary: "Skatteoppgjøret ditt er klart."
+      }
+    ]
+  }
+}, r = {
+  args: {
+    ...a.args,
+    items: [
+      ...a.args.items,
+      {
+        id: "2c",
+        groupId: "4",
+        href: "#",
+        icon: "pie-chart",
+        title: "Skattemeldingen",
+        description: "Slik fyller du ut skattemeldingen din."
+      },
+      {
+        id: "2d",
+        groupId: "4",
+        icon: "sign-language-two-hands",
+        href: "#",
+        title: "Alt om skatteoppgjøret",
+        description: "Lorem ipsum dolor sit amet."
+      }
+    ]
+  }
+}, i = {
   args: {
     groups: {
       2: {
-        title: "2 treff i innboksen"
+        title: "Søkeforslag"
       }
     },
     items: [
       {
         id: "1a",
         groupId: "1",
+        type: "scope",
         href: "#",
+        badge: {
+          label: "2 treff"
+        },
         label: () => /* @__PURE__ */ e("span", { children: [
           /* @__PURE__ */ t("mark", { children: "skatt" }),
           " i innboks"
@@ -44,6 +140,7 @@ const l = {
       {
         id: "1b",
         groupId: "1",
+        type: "scope",
         href: "#",
         label: () => /* @__PURE__ */ e("span", { children: [
           /* @__PURE__ */ t("mark", { children: "skatt" }),
@@ -53,20 +150,151 @@ const l = {
       {
         id: "2a",
         groupId: "2",
+        type: "bookmark",
+        href: "#",
+        label: "Skattemeldingen 2023",
+        params: [
+          {
+            label: "skatt"
+          },
+          {
+            label: "inkasso"
+          },
+          {
+            type: "filter",
+            label: "Namsmannen"
+          },
+          {
+            type: "filter",
+            label: "Denne uken"
+          }
+        ]
+      },
+      {
+        id: "2b",
+        groupId: "2",
+        type: "bookmark",
+        href: "#",
+        params: [
+          {
+            type: "filter",
+            label: "Skatteetaten"
+          },
+          {
+            type: "filter",
+            label: "Denne uken"
+          }
+        ]
+      }
+    ]
+  }
+}, g = {
+  args: {
+    ...r.args,
+    groups: {
+      2: {
+        title: "Søkeforslag"
+      },
+      3: {
+        title: "Anbefalte treff"
+      }
+    },
+    items: [
+      ...r.args.items,
+      {
+        id: "2a",
+        groupId: "2",
+        type: "bookmark",
         href: "#",
-        label: "Skattemeldingen 2023"
+        label: "Skattemeldingen 2023",
+        params: [
+          {
+            label: "skatt"
+          },
+          {
+            label: "inkasso"
+          },
+          {
+            type: "filter",
+            label: "Namsmannen"
+          },
+          {
+            type: "filter",
+            label: "Denne uken"
+          }
+        ]
       },
       {
         id: "2b",
         groupId: "2",
+        type: "bookmark",
+        href: "#",
+        params: [
+          {
+            type: "filter",
+            label: "Skatteetaten"
+          },
+          {
+            type: "filter",
+            label: "Denne uken"
+          }
+        ]
+      }
+    ]
+  }
+}, k = {
+  args: {
+    ...i.args,
+    groups: {
+      noHits: {
+        title: "Ingen treff"
+      }
+    },
+    items: [
+      {
+        id: "1a",
+        groupId: "1",
+        type: "scope",
+        href: "#",
+        disabled: !0,
+        badge: {
+          label: "Ingen treff"
+        },
+        label: () => /* @__PURE__ */ e("span", { children: [
+          /* @__PURE__ */ t("mark", { children: "skatt" }),
+          " i innboks"
+        ] })
+      },
+      {
+        id: "1b",
+        groupId: "1",
+        type: "scope",
         href: "#",
-        label: "Skattemeldingen 2022"
+        label: () => /* @__PURE__ */ e("span", { children: [
+          /* @__PURE__ */ t("mark", { children: "skatt" }),
+          " i hele Altinn"
+        ] })
+      },
+      {
+        groupId: "noHits",
+        id: "2a",
+        type: "information",
+        label: () => /* @__PURE__ */ e("span", { children: [
+          "Søk etter ",
+          /* @__PURE__ */ t("mark", { children: "skatt" }),
+          " ga ingen treff."
+        ] })
       }
     ]
   }
 };
 export {
-  a as Scopes,
-  n as ScopesAndSuggestions,
-  l as default
+  k as NoHits,
+  p as Scopes,
+  r as ScopesAndMixedResults,
+  a as ScopesAndResults,
+  i as ScopesAndSuggestions,
+  g as ScopesResultsAndSuggestions,
+  d as TooFewWords,
+  o as default
 };

package/dist/components/Searchbar/AutocompleteBase.js

@@ -1,8 +1,8 @@
-import { jsx as c } from "react/jsx-runtime";
-import { c as a } from "../../index-L8X2o7IH.js";
-import '../../assets/AutocompleteBase.css';const s = "_autocomplete_1ccsg_1", m = {
-  autocomplete: s
-}, l = ({ expanded: o, children: t, className: e }) => /* @__PURE__ */ c("nav", { className: a(m.autocomplete, e), "aria-expanded": o, children: t });
+import { jsx as a } from "react/jsx-runtime";
+import { c } from "../../index-L8X2o7IH.js";
+import '../../assets/AutocompleteBase.css';const m = "_autocomplete_1yzw8_1", s = {
+  autocomplete: m
+}, l = ({ expanded: o, children: t, className: e }) => /* @__PURE__ */ a("nav", { className: c(s.autocomplete, e), "aria-expanded": o, children: t });
 export {
   l as AutocompleteBase
 };