@fremtind/jokul 0.24.0 → 0.25.0

package/build/cjs/components/datepicker/types.d.cts

@@ -0,0 +1,270 @@
+import { ButtonHTMLAttributes, ChangeEvent, FocusEvent, KeyboardEvent } from 'react';
+import { DataTestAutoId, Density } from '../../core/types.cjs;'
+import { InputGroupProps } from '../input-group/InputGroup.cjs;'
+import { LabelProps } from '../input-group/Label.cjs;'
+export type DateValidationError = "WRONG_FORMAT" | "OUTSIDE_LOWER_BOUND" | "OUTSIDE_UPPER_BOUND";
+export type DatePickerChangeEventHandler = (e: ChangeEvent<HTMLInputElement>, date: Date | null, meta: DatePickerMetadata) => void;
+export type DatePickerBlurEventHandler = (e: FocusEvent<HTMLInputElement>, date: Date | null, meta: DatePickerMetadata) => void;
+export type DatePickerFocusEventHandler = DatePickerBlurEventHandler;
+export type DatePickerKeyDownEventHandler = (e: KeyboardEvent<HTMLInputElement>, date: Date | null, meta: DatePickerMetadata) => void;
+export type DatePickerMetadata = {
+    error: DateValidationError | null;
+    /** Samme som event.target.value */
+    value: string;
+};
+export type YearsToShow = number | "all" | {
+    previous: number;
+    coming: number;
+};
+export interface DatePickerProps extends Omit<InputGroupProps, "label" | "children">, DataTestAutoId {
+    /** Settes på rotnivå. */
+    id?: string;
+    /** Settes på rotnivå. */
+    className?: string;
+    /**
+     * @default "Velg dato"
+     */
+    label?: string;
+    /**
+     * Bruk labelProps for å sette props som `variant` og `srOnly`.
+     *
+     * @example
+     *  ```tsx
+     *  <DatePicker
+     *      labelProps={{ srOnly: true }}
+     *  />
+     *  ```
+     */
+    labelProps?: Omit<LabelProps, "children">;
+    /**
+     * dd.mm.åååå
+     *
+     * Dersom komponenten ikke er _controlled_, send inn ønsket standardverdi her (hvis noen).
+     *
+     * @default undefined // tomt skjemafelt
+     */
+    defaultValue?: string;
+    /**
+     * Styr om du vil at kalenderen skal starte åpen.
+     * @default false
+     */
+    defaultShow?: boolean;
+    /**
+     * dd.mm.åååå
+     *
+     * Verdien til inputfeltet.
+     */
+    value?: string;
+    /**
+     * dd.mm.åååå
+     *
+     * Skru av knapper i kalenderen før denne datoen,
+     * og gi valideringsfeil om dato som har blitt skrevet inn er utenfor.
+     */
+    disableBeforeDate?: string;
+    /**
+     * dd.mm.åååå
+     *
+     * Skru av knapper i kalenderen etter denne datoen,
+     * og gi valideringsfeil om dato som har blitt skrevet inn er utenfor.
+     */
+    disableAfterDate?: string;
+    /**
+     * Angir hvor mange år som skal vises i nedtrekkslisten i kalenderen. Du kan angi samme verdi
+     * for kommende og foregående år ved å sende inn et tall, eller sende inn et objekt med separate
+     * verdier for kommende og foregående år. Hvis du sender inn "all" vil alle år mellom min. og
+     * maks. dato vises i listen (eller default antall år hvis ikke min./maks. dato er angitt).
+     * @default 3
+     */
+    yearsToShow?: YearsToShow;
+    /**
+     * Settes på inputfeltet.
+     */
+    name?: string;
+    /**
+     * Hjelpetekst som vises under inputfeltet.
+     */
+    helpLabel?: string;
+    /**
+     * Hvis datovelgeren har valideringsfeil må dette feltet settes. Inputfeltet
+     * merkes som ugyldig og teksten erstatter en eventuell hjelpetekst.
+     */
+    errorLabel?: string;
+    /**
+     * Merk som ugyldig uten å sende inn en errorLabel.
+     * NB! Brukes kun i tilfeller der valideringsfeil dukker opp andre steder, for eksempel i en FieldGroup.
+     */
+    invalid?: boolean;
+    density?: Density;
+    /**
+     * @deprecated Kalenderen viser nå alltid kontroller for å navigere mellom år og måneder. Denne prop'en gjør ikke lenger noe og kan fjernes.
+     */
+    extended?: boolean;
+    /**
+     * Om du ønsker andre labels for ukedagene kan du gi de her.
+     */
+    days?: string[];
+    /**
+     * Om du ønsker andre labels for måneder kan du gi de her.
+     */
+    months?: string[];
+    /**
+     * Overstyr hvordan vi omtaler "Måned".
+     * @default "Måned"
+     */
+    monthLabel?: string;
+    /**
+     * Overstyr hvordan vi omtaler "År".
+     * @default "År"
+     */
+    yearLabel?: string;
+    /**
+     * Vises i inputfeltet hvis det ikke har noen input, som hint for datoformat.
+     * @default "dd.mm.åååå"
+     */
+    placeholder?: string;
+    /**
+     * Bredden på inputfeltet, tilpasset typisk bredde for en dato i formatet `dd.mm.åååå`.
+     * @default "10ch"
+     */
+    width?: string;
+    /**
+     * Kalles ved change-event fra datovelgerens inputfelt. Verdien fra selve eventet vil
+     * alltid være teksten fra inputfeltet.
+     *
+     * Det er _ikke_ garantert at verdien fra `event.target.value` er en
+     * gyldig dato, eller i datoformat. Andre parameter vil enten være en gyldig
+     * `Date` eller `null`. Tredje parameter har informasjon om validering,
+     * men du kan også gjøre validering selv rett på `event.target.value`
+     * med utility-funksjoner som eksporteres fra pakka (se eksempel lenger ned).
+     *
+     * Kalles også når brukeren velger en dato fra kalendervisningen. Kallet
+     * prøver å simulere et vanlig change-event så nært som mulig.
+     *
+     * Bruk meta-objektet for å se om det er valideringsfeil, og i så fal hvilken type feil:
+     *
+     *  - ugyldig format på tekst
+     *  - dato utenfor minimum tillatte dato (satt med `disableBeforeDate`)
+     *  - dato utenfor maksimum tillatte dato (satt med `disableAfterDate`)
+     *
+     * @example
+     *
+     *  ```tsx
+     *  <DatePicker
+     *      value={value}
+     *      onChange={(e, date, meta) => {
+     *          setValue(e.target.value);
+     *
+     *          console.log("onChange", {
+     *              event: e,
+     *              date,
+     *              meta,
+     *          });
+     *      }}
+     *  />
+     *  ```
+     *
+     * @example
+     *
+     *  ```tsx
+     *  import {
+     *      DatePicker,
+     *      formatInput,
+     *      isCorrectFormat,
+     *      isWithinUpperBound,
+     *      isWithinLowerBound,
+     *      parseDateString
+     *  } from "@fremtind/jkl-datepicker-react";
+     *  import { formatDate } from "@fremtind/jkl-formatters-util";
+     *
+     *  <DatePicker
+     *      label="Fødselsdato"
+     *      errorLabel={formState.errors.fodselsdato?.message}
+     *      disableBefore="01.01.1970"
+     *      disableAfter={formatInput(new Date())}
+     *      {...register("fodselsdato", {
+     *          required: "Du må fylle ut fødselsdato",
+     *          validate: {
+     *              isCorrectFormat: (v) =>
+     *                  isCorrectFormat(v) ||
+     *                  `Datoen må være skrevet i formen ${formatDate(new Date())} eller kortformat`,
+     *              withinLowerBound: (v) =>
+     *                  isWithinLowerBound(v, parseDateString("01.01.1970") || "Datoen må være før 01.01.1970"",
+     *              withinUpperBound: (v) =>
+     *                  isWithinUpperBound(v, new Date()) || `Datoen må være før ${formatDate(new Date())}`,
+     *          },
+     *      })}
+     *  />
+     *  ```
+     */
+    onChange?: DatePickerChangeEventHandler;
+    /**
+     * Kalles ved focus-event fra datovelgerens inputfelt.
+     *
+     * @example
+     *  ```tsx
+     *  <DatePicker
+     *      onFocus={(e, date, meta) => {
+     *          console.log("onFocus", {
+     *              event: e,
+     *              date,
+     *              meta,
+     *          });
+     *      }}
+     *  />
+     *  ```
+     */
+    onFocus?: DatePickerFocusEventHandler;
+    /**
+     * Kalles ved blur-event fra datovelgerens inputfelt, og kommer når fokus flyttes ut
+     * av skjemaelementet.
+     *
+     * **NB!** Dette inkluderer når fokus flyttes inn i kalenderen, eller til kalenderknappen!
+     *
+     * Om du ønsker å gjøre ting når brukeren går videre fra hele DatePicker:
+     *   1. Ha en onBlur på DatePicker, men ignorere events når fokus er inni DatePicker
+     *   2. Ha en onBlur på DatePicker sin action-prop (kalenderknappen), og gjøre det samme
+     *
+     * Hjelpefunksjonen isBlurTargetOutside hjelper med detaljene.
+     *
+     * @example
+     *  ```tsx
+     *  import { DatePicker, isBlurTargetOutside } from "@fremtind/jkl-datepicker-react";
+     *
+     *  <DatePicker
+     *      onBlur={(e, date, meta) => {
+     *          // Ignorer blurs som går til kalenderknapper
+     *          if (isBlurTargetOutside(e)) {
+     *              console.log("onBlur");
+     *          }
+     *      }}
+     *      action={{
+     *          onBlur: (e) => {
+     *              // Ignorer blurs som går tilbake til inputfeltet
+     *              if (isBlurTargetOutside(e)) {
+     *                  console.log("action.onBlur");
+     *              }
+     *          },
+     *      }}
+     *  />
+     *  ```
+     */
+    onBlur?: DatePickerBlurEventHandler;
+    /**
+     * Kalles ved onKeyDown på datovelgerens inputfelt. Dersom du trenger å fange opp
+     * alle tastetrykk, inkludert Tab videre til knappen for å åpne/lukke kalenderen,
+     * så kan du bruke dette eventet.
+     *
+     * @deprecated Eventet har mye overlapp med onChange, men var tidligere eneste metode for å
+     * få tilbakemelding ved tastetrykk i inputfeltet. Foretrekk onChange for ny kode.
+     */
+    onKeyDown?: DatePickerKeyDownEventHandler;
+    /**
+     * Lar deg sette lyttere på kalenderknappen i skjemafeltet.
+     */
+    action?: DatePickerAction;
+    showCalendarLabel?: string;
+    hideCalendarLabel?: string;
+}
+export interface DatePickerAction extends Exclude<ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> {
+}

package/build/cjs/components/datepicker/utils.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=/^(\d\d?)[\W](\d\d?)[\W](\d{4}|\d{2})$/,t=/^(\d{4}|\d{2})[\W](\d\d?)[\W](\d\d?)$/;exports.dayMonthYearRegex=e,exports.formatInput=function(e){return`${`${e.getDate()}`.padStart(2,"0")}.${`${e.getMonth()+1}`.padStart(2,"0")}.${e.getFullYear()}`},exports.isBlurTargetOutside=function(e){if(!e.relatedTarget)return!0;const t=e.target.closest(".jkl-datepicker__input-wrapper");return e.relatedTarget.closest(".jkl-datepicker__input-wrapper")!==t},exports.parseDateString=function(r){if(!r)return;const n=(r=>{const n=e.exec(r);if(n)return n.slice(1,4);const a=t.exec(r);if(!a)return;const o=a.slice(1,4);return o.reverse(),o})(r);if(!n)return;const a=parseInt((new Date).toLocaleString("no-NB",{year:"2-digit"})),o=parseInt(n[0],10),s=parseInt(n[1],10)-1,d=parseInt(n[2],10),i=d>99?d:(u=d)>a?u+1900:u+2e3,p=new Date(i,s,o,0,0,0);var u;return p.getMonth()===s&&p.getFullYear()===i?p:void 0};
+//# sourceMappingURL=utils.cjs.map

package/build/cjs/components/datepicker/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","sources":["../../../../src/components/datepicker/utils.ts"],"sourcesContent":["import React from \"react\";\n\nexport const dayMonthYearRegex = /^(\\d\\d?)[\\W](\\d\\d?)[\\W](\\d{4}|\\d{2})$/;\nconst yearMonthDayRegex = /^(\\d{4}|\\d{2})[\\W](\\d\\d?)[\\W](\\d\\d?)$/;\n\n/**\n * Format a Date object as a string in the format DatePicker expects.\n *\n * @param date the Date object to format\n * @return returns a date string with \"dd.mm.yyyy\"-format\n */\nexport function formatInput(date: Date): string {\n    const day = `${date.getDate()}`.padStart(2, \"0\");\n    const month = `${date.getMonth() + 1}`.padStart(2, \"0\");\n    return `${day}.${month}.${date.getFullYear()}`;\n}\n\n/**\n * Get the date segments from a string of unknown format\n *\n * @param input date as a string with unknown format\n * @returns an array of string elements [day, month, year]\n */\nconst getDateSegmentsFromString = (input: string): string[] | undefined => {\n    const dayMonthYear = dayMonthYearRegex.exec(input);\n\n    if (dayMonthYear) {\n        return dayMonthYear.slice(1, 4);\n    }\n\n    const yearMonthDay = yearMonthDayRegex.exec(input);\n\n    if (!yearMonthDay) {\n        return undefined;\n    }\n\n    // reverse to get the correct ordering\n    const slicedDateSegments = yearMonthDay.slice(1, 4);\n    slicedDateSegments.reverse();\n\n    return slicedDateSegments;\n};\n\n/**\n * Convert a date string to a Date object\n *\n * @param dateString date as string with format dd.mm.yyyy\n * @return a Date object representing the given date\n */\nexport function parseDateString(dateString?: string): Date | undefined {\n    if (!dateString) {\n        return undefined;\n    }\n\n    const inputDateSegments = getDateSegmentsFromString(dateString);\n\n    if (!inputDateSegments) {\n        return undefined;\n    }\n\n    const currentTwoDigitYear = parseInt(new Date().toLocaleString(\"no-NB\", { year: \"2-digit\" }));\n    const parseTwoDigitYear = (year: number) => (year > currentTwoDigitYear ? year + 1900 : year + 2000);\n\n    const day = parseInt(inputDateSegments[0], 10);\n    const month = parseInt(inputDateSegments[1], 10) - 1;\n    const yearIn = parseInt(inputDateSegments[2], 10);\n    const year = yearIn > 99 ? yearIn : parseTwoDigitYear(yearIn);\n\n    const generatedDate = new Date(year, month, day, 0, 0, 0);\n    // Days can \"overflow\" to next month/year in Date(). Return undefined if it does:\n    return generatedDate.getMonth() === month && generatedDate.getFullYear() === year ? generatedDate : undefined;\n}\n\n/**\n * Hjelpefunksjon for å se om en onBlur går utenfor DatePicker,\n * eller om den går til et interaktivt element inni DatePickeren.\n * @param {React.FocusEvent<HTMLButtonElement | HTMLInputElement>} e - Eventet fra onBlur og action.onBlur\n * @returns {boolean} true hvis e.relatedTarget er utenfor DatePicker\n */\nexport function isBlurTargetOutside(e: React.FocusEvent<HTMLButtonElement | HTMLInputElement>): boolean {\n    if (!e.relatedTarget) {\n        return true;\n    }\n\n    const targetRoot = e.target.closest(\".jkl-datepicker__input-wrapper\");\n    const relatedTargetRoot = e.relatedTarget.closest(\".jkl-datepicker__input-wrapper\");\n\n    return relatedTargetRoot !== targetRoot;\n}\n"],"names":["dayMonthYearRegex","yearMonthDayRegex","date","getDate","padStart","getMonth","getFullYear","e","relatedTarget","targetRoot","target","closest","dateString","inputDateSegments","input","dayMonthYear","exec","slice","yearMonthDay","slicedDateSegments","reverse","getDateSegmentsFromString","currentTwoDigitYear","parseInt","Date","toLocaleString","year","day","month","yearIn","generatedDate"],"mappings":"gFAEO,MAAMA,EAAoB,wCAC3BC,EAAoB,wFAQnB,SAAqBC,GAGxB,MAAO,GAFK,GAAGA,EAAKC,YAAYC,SAAS,EAAG,QAC9B,GAAGF,EAAKG,WAAa,IAAID,SAAS,EAAG,QACzBF,EAAKI,eACnC,8BAgEO,SAA6BC,GAC5B,IAACA,EAAEC,cACI,OAAA,EAGX,MAAMC,EAAaF,EAAEG,OAAOC,QAAQ,kCAGpC,OAF0BJ,EAAEC,cAAcG,QAAQ,oCAErBF,CACjC,0BAvCO,SAAyBG,GAC5B,IAAKA,EACM,OAGL,MAAAC,EA/ByBC,KACzB,MAAAC,EAAef,EAAkBgB,KAAKF,GAE5C,GAAIC,EACO,OAAAA,EAAaE,MAAM,EAAG,GAG3B,MAAAC,EAAejB,EAAkBe,KAAKF,GAE5C,IAAKI,EACM,OAIX,MAAMC,EAAqBD,EAAaD,MAAM,EAAG,GACjD,OAAAE,EAAmBC,UAEZD,GAcmBE,CAA0BT,GAEpD,IAAKC,EACM,OAGL,MAAAS,EAAsBC,UAAS,IAAIC,MAAOC,eAAe,QAAS,CAAEC,KAAM,aAG1EC,EAAMJ,SAASV,EAAkB,GAAI,IACrCe,EAAQL,SAASV,EAAkB,GAAI,IAAM,EAC7CgB,EAASN,SAASV,EAAkB,GAAI,IACxCa,EAAOG,EAAS,GAAKA,GALAH,EAK2BG,GALFP,EAAsBI,EAAO,KAAOA,EAAO,IAOzFI,EAAgB,IAAIN,KAAKE,EAAME,EAAOD,EAAK,EAAG,EAAG,GAP5BD,MASpB,OAAAI,EAAczB,aAAeuB,GAASE,EAAcxB,gBAAkBoB,EAAOI,OAAgB,CACxG"}

package/build/cjs/components/datepicker/validation.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./utils.cjs");exports.isCorrectFormat=function(e){return!!e&&!!t.parseDateString(e)},exports.isWithinLowerBound=function(e,r,i={inclusive:!1}){const n="string"==typeof e?t.parseDateString(e):e;return!!n&&(i.inclusive?n>=r:n>r)},exports.isWithinUpperBound=function(e,r,i={inclusive:!1}){const n="string"==typeof e?t.parseDateString(e):e;return!!n&&(i.inclusive?n<=r:n<r)};
+//# sourceMappingURL=validation.cjs.map

package/build/cjs/components/datepicker/validation.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.cjs","sources":["../../../../src/components/datepicker/validation.ts"],"sourcesContent":["import { parseDateString } from \"./utils.js\";\n\nexport function isCorrectFormat(value: string | undefined): boolean {\n    if (!value) {\n        return false;\n    }\n    const val = parseDateString(value);\n    return Boolean(val);\n}\n\ntype ComparisonOptions = {\n    /**\n     * Kontroller om testen skal godkjennes om verdien er lik\n     * @default false\n     */\n    inclusive: boolean;\n};\n\nexport function isWithinLowerBound(\n    value: Date | string | undefined,\n    minDate: Date,\n    options: ComparisonOptions = { inclusive: false },\n): boolean {\n    const val = typeof value === \"string\" ? parseDateString(value) : value;\n\n    if (!val) {\n        return false;\n    }\n\n    if (options.inclusive) {\n        return val >= minDate;\n    }\n\n    return val > minDate;\n}\n\nexport function isWithinUpperBound(\n    value: Date | string | undefined,\n    maxDate: Date,\n    options: ComparisonOptions = { inclusive: false },\n): boolean {\n    const val = typeof value === \"string\" ? parseDateString(value) : value;\n\n    if (!val) {\n        return false;\n    }\n\n    if (options.inclusive) {\n        return val <= maxDate;\n    }\n\n    return val < maxDate;\n}\n"],"names":["value","parseDateString","minDate","options","inclusive","val","maxDate"],"mappings":"uIAEO,SAAyBA,GAC5B,QAAKA,KAGOC,kBAAgBD,EAEhC,6BAUO,SACHA,EACAE,EACAC,EAA6B,CAAEC,WAAW,IAE1C,MAAMC,EAAuB,iBAAVL,EAAqBC,EAAAA,gBAAgBD,GAASA,EAEjE,QAAKK,IAIDF,EAAQC,UACDC,GAAOH,EAGXG,EAAMH,EACjB,6BAEO,SACHF,EACAM,EACAH,EAA6B,CAAEC,WAAW,IAE1C,MAAMC,EAAuB,iBAAVL,EAAqBC,EAAAA,gBAAgBD,GAASA,EAEjE,QAAKK,IAIDF,EAAQC,UACDC,GAAOC,EAGXD,EAAMC,EACjB"}

package/build/cjs/components/description-list/DescriptionList.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../../clsx-E3yX_9sL.cjs");exports.DescriptionDetail=({children:i,className:l,...r})=>e.jsx("dd",{...r,className:s.clsx("jkl-description-list__detail",l),children:i}),exports.DescriptionList=({children:i,className:l,...r})=>e.jsx("dl",{...r,className:s.clsx("jkl-description-list",l),children:i}),exports.DescriptionTerm=({children:i,className:l,...r})=>e.jsx("dt",{...r,className:s.clsx("jkl-description-list__term",l),children:i});
+//# sourceMappingURL=DescriptionList.cjs.map

package/build/cjs/components/description-list/DescriptionList.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DescriptionList.cjs","sources":["../../../../src/components/description-list/DescriptionList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { FC } from \"react\";\nimport { WithChildren } from \"../../core/types.js\";\n\nexport interface DescriptionListProps extends WithChildren {\n    className?: string;\n}\n\nexport const DescriptionList: FC<DescriptionListProps> = ({ children, className, ...rest }) => {\n    return (\n        <dl {...rest} className={clsx(\"jkl-description-list\", className)}>\n            {children}\n        </dl>\n    );\n};\n\nexport interface DescriptionTermProps extends WithChildren {\n    className?: string;\n}\n\nexport const DescriptionTerm: FC<DescriptionTermProps> = ({ children, className, ...rest }) => {\n    return (\n        <dt {...rest} className={clsx(\"jkl-description-list__term\", className)}>\n            {children}\n        </dt>\n    );\n};\n\nexport interface DescriptionDetailProps extends WithChildren {\n    className?: string;\n}\n\nexport const DescriptionDetail: FC<DescriptionDetailProps> = ({ children, className, ...rest }) => {\n    return (\n        <dd {...rest} className={clsx(\"jkl-description-list__detail\", className)}>\n            {children}\n        </dd>\n    );\n};\n"],"names":["children","className","rest","jsx","clsx"],"mappings":"uLAgC6D,EAAGA,SAAAA,EAAUC,UAAAA,KAAcC,KAEhFC,MAAC,SAAOD,EAAMD,UAAWG,EAAKA,KAAA,+BAAgCH,GACzDD,SAAAA,4BA3B4C,EAAGA,SAAAA,EAAUC,UAAAA,KAAcC,KAE5EC,MAAC,SAAOD,EAAMD,UAAWG,EAAKA,KAAA,uBAAwBH,GACjDD,SAAAA,4BAS4C,EAAGA,SAAAA,EAAUC,UAAAA,KAAcC,KAE5EC,MAAC,SAAOD,EAAMD,UAAWG,EAAKA,KAAA,6BAA8BH,GACvDD,SAAAA"}

package/build/cjs/components/description-list/DescriptionList.d.cts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { WithChildren } from '../../core/types.cjs;'
+export interface DescriptionListProps extends WithChildren {
+    className?: string;
+}
+export declare const DescriptionList: FC<DescriptionListProps>;
+export interface DescriptionTermProps extends WithChildren {
+    className?: string;
+}
+export declare const DescriptionTerm: FC<DescriptionTermProps>;
+export interface DescriptionDetailProps extends WithChildren {
+    className?: string;
+}
+export declare const DescriptionDetail: FC<DescriptionDetailProps>;

package/build/cjs/components/description-list/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DescriptionList.cjs");exports.DescriptionDetail=e.DescriptionDetail,exports.DescriptionList=e.DescriptionList,exports.DescriptionTerm=e.DescriptionTerm;
+//# sourceMappingURL=index.cjs.map

package/build/cjs/components/description-list/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/cjs/components/description-list/index.d.cts

@@ -0,0 +1 @@
+export * from './DescriptionList.cjs;'

package/build/cjs/components/expander/ExpandSection.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../../clsx-E3yX_9sL.cjs"),t=require("react"),n=require("../../hooks/useAnimatedDetails/useAnimatedDetails.cjs"),a=require("./Expander.cjs");exports.ExpandSection=({children:i,className:r,expandButtonProps:d,isExpanded:c=!1,density:l,onClick:o,title:p,useAnimatedHeightOptions:x,...u})=>{const[m,j]=t.useState(c);t.useEffect((()=>{j(c)}),[c]);const{detailsRef:f,summaryRef:k,contentRef:h,onSummaryClick:y}=n.useAnimatedDetails({onOpenChange:(e,s)=>{j(e),o&&o(s,e)},isExpanded:c});return e.jsxs("details",{"data-testid":"jkl-expand-section",className:s.clsx("jkl-expand-section",r),...u,ref:f,children:[e.jsx(a.Expander,{as:"summary",...d,density:l,isExpanded:m,onClick:y,ref:k,children:p}),e.jsx("div",{"data-testid":"jkl-expand-section__content-wrapper",className:"jkl-expand-section__content-wrapper",ref:h,children:e.jsx("div",{className:"jkl-expand-section__content",children:i})})]})};
+//# sourceMappingURL=ExpandSection.cjs.map

package/build/cjs/components/expander/ExpandSection.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandSection.cjs","sources":["../../../../src/components/expander/ExpandSection.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { ReactNode, useEffect, useState } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { useAnimatedDetails } from \"../../hooks/useAnimatedDetails/useAnimatedDetails.js\";\nimport { UseAnimatedHeightOptions } from \"../../hooks/useAnimatedHeight/types.js\";\nimport { Expander, ExpanderProps } from \"./Expander.js\";\n\nexport interface ExpandSectionProps {\n    /**\n     * Innholdet som skal kunne ekspanderes og skjules.\n     * Om du ikke trenger at komponenten tar seg av visning og skjuling av\n     * innholdet skal du bruke `ExpandButton` direkte. Det sparer deg for\n     * å laste inn unødvendige avhengigheter.\n     */\n    children: ReactNode;\n    title: string;\n    className?: string;\n    density?: Density;\n    onClick?: (e: React.MouseEvent<HTMLElement>, isExpanded: boolean) => void;\n    expandButtonProps?: Omit<ExpanderProps, \"id\" | \"isExpanded\" | \"onClick\" | \"hideLabel\">;\n    useAnimatedHeightOptions?: UseAnimatedHeightOptions;\n    /** Om du ønsker å styre komponenten utenfra */\n    isExpanded?: boolean;\n}\n\nexport const ExpandSection = ({\n    children,\n    className,\n    expandButtonProps,\n    isExpanded = false,\n    density,\n    onClick,\n    title,\n    useAnimatedHeightOptions,\n    ...rest\n}: ExpandSectionProps): JSX.Element => {\n    const [expanded, setIsExpanded] = useState(isExpanded);\n\n    useEffect(() => {\n        setIsExpanded(isExpanded);\n    }, [isExpanded]);\n\n    const { detailsRef, summaryRef, contentRef, onSummaryClick } = useAnimatedDetails({\n        onOpenChange: (open, e) => {\n            setIsExpanded(open);\n            if (onClick) {\n                onClick(e, open);\n            }\n        },\n        isExpanded,\n    });\n\n    return (\n        <details\n            data-testid={\"jkl-expand-section\"}\n            className={clsx(\"jkl-expand-section\", className)}\n            {...rest}\n            ref={detailsRef}\n        >\n            <Expander\n                as={\"summary\"}\n                {...expandButtonProps}\n                density={density}\n                isExpanded={expanded}\n                onClick={onSummaryClick}\n                ref={summaryRef}\n            >\n                {title}\n            </Expander>\n            <div\n                data-testid=\"jkl-expand-section__content-wrapper\"\n                className=\"jkl-expand-section__content-wrapper\"\n                ref={contentRef}\n            >\n                <div className=\"jkl-expand-section__content\">{children}</div>\n            </div>\n        </details>\n    );\n};\n"],"names":["children","className","expandButtonProps","isExpanded","density","onClick","title","useAnimatedHeightOptions","rest","expanded","setIsExpanded","useState","useEffect","detailsRef","summaryRef","contentRef","onSummaryClick","useAnimatedDetails","onOpenChange","open","e","jsxs","clsx","ref","jsx","Expander","as"],"mappings":"qSAyB6B,EACzBA,SAAAA,EACAC,UAAAA,EACAC,kBAAAA,EACAC,WAAAA,GAAa,EACbC,QAAAA,EACAC,QAAAA,EACAC,MAAAA,EACAC,yBAAAA,KACGC,MAEH,MAAOC,EAAUC,GAAiBC,WAASR,GAE3CS,EAAAA,WAAU,KACNF,EAAcP,EAAU,GACzB,CAACA,IAEJ,MAAQU,WAAAA,EAAYC,WAAAA,EAAYC,WAAAA,EAAYC,eAAAA,GAAmBC,EAAAA,mBAAmB,CAC9EC,aAAc,CAACC,EAAMC,KACjBV,EAAcS,GACVd,GACAA,EAAQe,EAAGD,EAAI,EAGvBhB,WAAAA,IAIA,OAAAkB,EAAAA,KAAC,UAAA,CACG,cAAa,qBACbpB,UAAWqB,EAAAA,KAAK,qBAAsBrB,MAClCO,EACJe,IAAKV,EAELb,SAAA,CAAAwB,EAAAA,IAACC,EAAAA,SAAA,CACGC,GAAI,aACAxB,EACJE,QAAAA,EACAD,WAAYM,EACZJ,QAASW,EACTO,IAAKT,EAEJd,SAAAM,IAELkB,EAAAA,IAAC,MAAA,CACG,cAAY,sCACZvB,UAAU,sCACVsB,IAAKR,EAELf,SAACwB,EAAAA,IAAA,MAAA,CAAIvB,UAAU,8BAA+BD,SAAAA,QAClD"}

package/build/cjs/components/expander/ExpandSection.d.cts

@@ -0,0 +1,22 @@
+import { default as React, ReactNode } from 'react';
+import { Density } from '../../core/types.cjs;'
+import { UseAnimatedHeightOptions } from '../../hooks/useAnimatedHeight/types.cjs;'
+import { ExpanderProps } from './Expander.cjs;'
+export interface ExpandSectionProps {
+    /**
+     * Innholdet som skal kunne ekspanderes og skjules.
+     * Om du ikke trenger at komponenten tar seg av visning og skjuling av
+     * innholdet skal du bruke `ExpandButton` direkte. Det sparer deg for
+     * å laste inn unødvendige avhengigheter.
+     */
+    children: ReactNode;
+    title: string;
+    className?: string;
+    density?: Density;
+    onClick?: (e: React.MouseEvent<HTMLElement>, isExpanded: boolean) => void;
+    expandButtonProps?: Omit<ExpanderProps, "id" | "isExpanded" | "onClick" | "hideLabel">;
+    useAnimatedHeightOptions?: UseAnimatedHeightOptions;
+    /** Om du ønsker å styre komponenten utenfra */
+    isExpanded?: boolean;
+}
+export declare const ExpandSection: ({ children, className, expandButtonProps, isExpanded, density, onClick, title, useAnimatedHeightOptions, ...rest }: ExpandSectionProps) => JSX.Element;

package/build/cjs/components/expander/Expander.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs"),c=require("react");require("../icon/Icon.cjs");const o=require("../icon/icons/animated/ArrowVerticalAnimated.cjs");require("../icon/icons/animated/ArrowHorizontalAnimated.cjs"),require("../icon/icons/animated/PlusRemoveAnimated.cjs"),require("../icon/icons/ArrowDownIcon.cjs"),require("../icon/icons/ArrowLeftIcon.cjs"),require("../icon/icons/ArrowNorthEastIcon.cjs"),require("../icon/icons/ArrowRightIcon.cjs"),require("../icon/icons/ArrowUpIcon.cjs"),require("../icon/icons/CalendarIcon.cjs"),require("../icon/icons/CheckIcon.cjs"),require("../icon/icons/ChevronDownIcon.cjs"),require("../icon/icons/ChevronLeftIcon.cjs"),require("../icon/icons/ChevronRightIcon.cjs"),require("../icon/icons/ChevronUpIcon.cjs"),require("../icon/icons/CloseIcon.cjs"),require("../icon/icons/CopyIcon.cjs"),require("../icon/icons/DotsIcon.cjs"),require("../icon/icons/DragIcon.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/GreenCheckIcon.cjs"),require("../icon/icons/HamburgerIcon.cjs"),require("../icon/icons/InfoIcon.cjs"),require("../icon/icons/LinkIcon.cjs"),require("../icon/icons/PlusIcon.cjs"),require("../icon/icons/QuestionIcon.cjs"),require("../icon/icons/RedCrossIcon.cjs"),require("../icon/icons/SearchIcon.cjs"),require("../icon/icons/SuccessIcon.cjs"),require("../icon/icons/WarningIcon.cjs"),require("../icon/icons/MinusIcon.cjs"),require("../icon/icons/ThumbDownIcon.cjs"),require("../icon/icons/ThumbUpIcon.cjs"),require("../icon/icons/TrashCanIcon.cjs"),require("../icon/icons/PenIcon.cjs");const r=require("../ScreenReaderOnly.cjs"),i=c.forwardRef((({as:i="button",className:s,children:a,density:u,expandDirection:t="down",isExpanded:j=!1,hideLabel:d=!1,...q},I)=>{const l=d?r.ScreenReaderOnly:c.Fragment,p="down"===t?!j:j,x=i,m="button"===x?"button":void 0;return n.jsxs(x,{"aria-expanded":j,"data-testid":"jkl-expander",type:m,className:e.clsx("jkl-expander",s,{"jkl-expander--expanded":j,"jkl-expander--icon-only":!a}),...q,"data-density":u,ref:I,children:[a&&n.jsx(l,{children:n.jsx("span",{className:"jkl-expander__text",children:a})}),n.jsx(o.ArrowVerticalAnimated,{className:"jkl-expander__arrow",pointingDown:p,bold:j})]})}));i.displayName="Expander",exports.Expander=i;
+//# sourceMappingURL=Expander.cjs.map

package/build/cjs/components/expander/Expander.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expander.cjs","sources":["../../../../src/components/expander/Expander.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { ForwardedRef } from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { ArrowVerticalAnimated } from \"../icon/index.js\";\nimport { ScreenReaderOnly } from \"../ScreenReaderOnly.js\";\n\nexport type ExpandDirection = \"up\" | \"down\";\n\nexport interface ExpanderProps extends WithChildren {\n    as?: \"summary\" | \"button\";\n    /** Må settes dersom du ikke bruker CoreToggle. Verdien skal være IDen til innholdet du ekspanderer. */\n    \"aria-controls\"?: string;\n    /** Må settes dersom du ikke bruker CoreToggle. IDen her skal brukes som verdien til aria-labelledby på innholdet du ekspanderer. */\n    id?: string;\n    className?: string;\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\n    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n    /**\n     * Styrer retningen til pila, som animeres ved endring. Styrer også aria-expanded.\n     * @default false\n     */\n    isExpanded?: boolean;\n    /** @default \"down\" */\n    expandDirection?: ExpandDirection;\n    density?: Density;\n    /**\n     * Skjul knappeteksten visuelt.\n     *\n     * @default false\n     */\n    hideLabel?: boolean;\n}\n\nexport const Expander = React.forwardRef(\n    (\n        {\n            as = \"button\",\n            className,\n            children,\n            density,\n            expandDirection = \"down\",\n            isExpanded = false,\n            hideLabel = false,\n            ...rest\n        }: ExpanderProps,\n        ref: ForwardedRef<HTMLButtonElement>,\n    ): JSX.Element => {\n        const ContentWrapper = hideLabel ? ScreenReaderOnly : React.Fragment;\n        const pointingDown = expandDirection === \"down\" ? !isExpanded : isExpanded;\n\n        const El = as;\n        const type = El === \"button\" ? \"button\" : undefined;\n\n        return (\n            <El\n                aria-expanded={isExpanded}\n                data-testid=\"jkl-expander\"\n                type={type}\n                className={clsx(\"jkl-expander\", className, {\n                    \"jkl-expander--expanded\": isExpanded,\n                    \"jkl-expander--icon-only\": !children,\n                })}\n                {...rest}\n                data-density={density}\n                ref={ref}\n            >\n                {children && (\n                    <ContentWrapper>\n                        <span className=\"jkl-expander__text\">{children}</span>\n                    </ContentWrapper>\n                )}\n                <ArrowVerticalAnimated className=\"jkl-expander__arrow\" pointingDown={pointingDown} bold={isExpanded} />\n            </El>\n        );\n    },\n);\n\nExpander.displayName = \"Expander\";\n"],"names":["Expander","React","forwardRef","as","className","children","density","expandDirection","isExpanded","hideLabel","rest","ref","ContentWrapper","ScreenReaderOnly","Fragment","pointingDown","El","type","jsxs","clsx","jsx","ArrowVerticalAnimated","bold","displayName"],"mappings":"krDAiCaA,EAAWC,EAAMC,YAC1B,EAEQC,GAAAA,EAAK,SACLC,UAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,gBAAAA,EAAkB,OAClBC,WAAAA,GAAa,EACbC,UAAAA,GAAY,KACTC,GAEPC,KAEM,MAAAC,EAAiBH,EAAYI,mBAAmBZ,EAAMa,SACtDC,EAAmC,SAApBR,GAA8BC,EAAaA,EAE1DQ,EAAKb,EACLc,EAAc,WAAPD,EAAkB,cAAW,EAGtC,OAAAE,EAAAA,KAACF,EAAA,CACG,gBAAeR,EACf,cAAY,eACZS,KAAAA,EACAb,UAAWe,EAAAA,KAAK,eAAgBf,EAAW,CACvC,yBAA0BI,EAC1B,2BAA4BH,OAE5BK,EACJ,eAAcJ,EACdK,IAAAA,EAECN,SAAA,CAAAA,SACIO,EACG,CAAAP,SAAAe,EAAAA,IAAC,QAAKhB,UAAU,qBAAsBC,SAAAA,YAG7CgB,EAAsBA,sBAAA,CAAAjB,UAAU,sBAAsBW,aAAAA,EAA4BO,KAAMd,MAAY,IAMrHR,EAASuB,YAAc"}

package/build/cjs/components/expander/Expander.d.cts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { Density, WithChildren } from '../../core/types.cjs;'
+export type ExpandDirection = "up" | "down";
+export interface ExpanderProps extends WithChildren {
+    as?: "summary" | "button";
+    /** Må settes dersom du ikke bruker CoreToggle. Verdien skal være IDen til innholdet du ekspanderer. */
+    "aria-controls"?: string;
+    /** Må settes dersom du ikke bruker CoreToggle. IDen her skal brukes som verdien til aria-labelledby på innholdet du ekspanderer. */
+    id?: string;
+    className?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+    /**
+     * Styrer retningen til pila, som animeres ved endring. Styrer også aria-expanded.
+     * @default false
+     */
+    isExpanded?: boolean;
+    /** @default "down" */
+    expandDirection?: ExpandDirection;
+    density?: Density;
+    /**
+     * Skjul knappeteksten visuelt.
+     *
+     * @default false
+     */
+    hideLabel?: boolean;
+}
+export declare const Expander: React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLButtonElement>>;

package/build/cjs/components/expander/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Expander.cjs"),r=require("./ExpandSection.cjs");exports.Expander=e.Expander,exports.ExpandSection=r.ExpandSection;
+//# sourceMappingURL=index.cjs.map

package/build/cjs/components/expander/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/cjs/components/expander/index.d.cts

@@ -0,0 +1,4 @@
+export type { ExpanderProps as ExpandButtonProps } from './Expander.cjs;'
+export { Expander } from './Expander.cjs;'
+export type { ExpandSectionProps } from './ExpandSection.cjs;'
+export { ExpandSection } from './ExpandSection.cjs;'

package/build/cjs/components/feedback/Feedback.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),o=require("./feedbackContext.cjs"),a=require("./followup/Followup.cjs"),s=require("./main-question/MainQuestion.cjs"),u=require("./questions/ContactQuestion.cjs");exports.Feedback=({className:i,followup:r,contactQuestion:l,counter:c,landmarkLabel:n,...d})=>{const[b,S]=t.useState(!1),[j,m]=t.useState(!1),[p,x]=t.useState(!1),[k,f]=t.useState(!1);return e.jsx("div",{className:`jkl-feedback ${i||""}`,"data-testid":"feedback",children:e.jsxs(o.FeedbackContextProvider,{value:{feedbackSubmitted:b,followupStarted:j,followupSubmitted:p,contactSubmitted:k,counter:c,landmarkLabel:n,setFeedbackSubmitted:S,setFollowupStarted:m,setFollowupSubmitted:x,setContactSubmitted:f},children:[!j&&e.jsx(s.MainQuestion,{...d}),b&&!k&&r&&e.jsx(a.Followup,{...r}),l&&e.jsx("div",{"aria-live":"polite",children:(!r&&b||p)&&e.jsx(u.ContactQuestion,{...l})})]})})};
+//# sourceMappingURL=Feedback.cjs.map

package/build/cjs/components/feedback/Feedback.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Feedback.cjs","sources":["../../../../src/components/feedback/Feedback.tsx"],"sourcesContent":["import React, { ComponentProps, ReactElement, ReactNode, useState } from \"react\";\nimport { BaseTextAreaProps } from \"../text-input/BaseTextArea.js\";\nimport { FeedbackContextProvider } from \"./feedbackContext.js\";\nimport { Followup } from \"./followup/Followup.js\";\nimport { MainQuestion } from \"./main-question/MainQuestion.js\";\nimport { ContactQuestion } from \"./questions/ContactQuestion.js\";\nimport { FeedbackOption, FeedbackType } from \"./types.js\";\n\ntype FollowupProps = ComponentProps<typeof Followup>;\ntype ContactQuestionProps = ComponentProps<typeof ContactQuestion>;\n\ntype Props = {\n    className?: string;\n    /** Velg typen alternativer, Smiley eller RadioButtons. */\n    type: \"radio\" | \"smiley\";\n    /** Spørsmålet som stilles til brukeren */\n    label: string;\n    /** Hjelpetekst til hovedspørsmålet */\n    helpLabel?: string;\n    /** Svaralternativer til spørsmålet */\n    options: FeedbackOption[];\n    /** Dersom du vil stille et åpent spørsmål i tillegg kan du sette denne til en truthy verdi */\n    addOnQuestion?:\n        | {\n              /** Spørsmålet du vil stille */\n              label?: string;\n              /** Eventuell hjelpetekst. Om du ikke spesifiserer en vil det vises en påminnelse om å ikke skrive inn personling informasjon. */\n              helpLabel?: string;\n          }\n        | boolean;\n    /** Lar deg tilpasse meldingen som kommer når brukeren sender inn tilbakemeldingen.  */\n    successMessage?: {\n        title: string;\n        children: ReactNode;\n    };\n    /**\n     * Funksjon for å håndtere innsending av tilbakemelding\n     * @param value Verdien av tilbakemeldingen. Dette er et objekt med følgende egenskaper:\n     * - `feedbackValue`: Selve verdien av tilbakemeldingen (format varierer etter spørsmålstype)\n     * - `intentionalSubmit`: Er `true` hvis brukeren aktivt sendte inn skjemaet, `false` hvis skjemaet ble sendt inn automatisk\n     * - `message`: Eventuell utfyllende melding fra bruker. Blir kun sendt inn ved aktiv innsending\n     */\n    onSubmit: (value: FeedbackType) => void;\n    followup?: FollowupProps;\n    contactQuestion?: ContactQuestionProps;\n    /**\n     * Hvis du ønsker at Feedback formen skal eksponeres som et landmark kan du sende inn\n     * hva du ønsker at en skjermleser skal kalle den her. Bare eksponer Feedback som et\n     * landmark på sider der den er en viktig del av innholdet, feks en kvitteringsside\n     * eller et annet sted det å kunne gi tilbakemelding vil føles naturlig eller forventet\n     * for brukeren.\n     */\n    landmarkLabel?: string;\n} & Pick<BaseTextAreaProps, \"counter\">;\n\nexport const Feedback = ({\n    className,\n    followup,\n    contactQuestion,\n    counter,\n    landmarkLabel,\n    ...mainQuestionProps\n}: Props): ReactElement => {\n    const [feedbackSubmitted, setFeedbackSubmitted] = useState(false);\n    const [followupStarted, setFollowupStarted] = useState(false);\n    const [followupSubmitted, setFollowupSubmitted] = useState(false);\n    const [contactSubmitted, setContactSubmitted] = useState(false);\n\n    return (\n        <div className={`jkl-feedback ${className || \"\"}`} data-testid=\"feedback\">\n            <FeedbackContextProvider\n                value={{\n                    feedbackSubmitted,\n                    followupStarted,\n                    followupSubmitted,\n                    contactSubmitted,\n                    counter,\n                    landmarkLabel,\n                    setFeedbackSubmitted,\n                    setFollowupStarted,\n                    setFollowupSubmitted,\n                    setContactSubmitted,\n                }}\n            >\n                {!followupStarted && <MainQuestion {...mainQuestionProps} />}\n                {feedbackSubmitted && !contactSubmitted && followup && <Followup {...followup} />}\n                {contactQuestion && (\n                    <div aria-live=\"polite\">\n                        {/* Show contact question after followup, or after feedback if no followup */}\n                        {((!followup && feedbackSubmitted) || followupSubmitted) && (\n                            <ContactQuestion {...contactQuestion} />\n                        )}\n                    </div>\n                )}\n            </FeedbackContextProvider>\n        </div>\n    );\n};\n"],"names":["className","followup","contactQuestion","counter","landmarkLabel","mainQuestionProps","feedbackSubmitted","setFeedbackSubmitted","useState","followupStarted","setFollowupStarted","followupSubmitted","setFollowupSubmitted","contactSubmitted","setContactSubmitted","jsx","children","jsxs","FeedbackContextProvider","value","MainQuestion","Followup","ContactQuestion"],"mappings":"4TAuDwB,EACpBA,UAAAA,EACAC,SAAAA,EACAC,gBAAAA,EACAC,QAAAA,EACAC,cAAAA,KACGC,MAEH,MAAOC,EAAmBC,GAAwBC,YAAS,IACpDC,EAAiBC,GAAsBF,YAAS,IAChDG,EAAmBC,GAAwBJ,YAAS,IACpDK,EAAkBC,GAAuBN,YAAS,GAGrD,OAAAO,MAAC,OAAIf,UAAW,gBAAgBA,GAAa,KAAM,cAAY,WAC3DgB,SAAAC,EAAAA,KAACC,EAAAA,wBAAA,CACGC,MAAO,CACHb,kBAAAA,EACAG,gBAAAA,EACAE,kBAAAA,EACAE,iBAAAA,EACAV,QAAAA,EACAC,cAAAA,EACAG,qBAAAA,EACAG,mBAAAA,EACAE,qBAAAA,EACAE,oBAAAA,GAGHE,SAAA,EAACP,GAAmBM,EAAAA,IAACK,EAAcA,aAAA,IAAGf,IACtCC,IAAsBO,GAAoBZ,GAAac,EAAAA,IAAAM,WAAA,IAAapB,IACpEC,GACGa,EAAAA,IAAC,MAAI,CAAA,YAAU,SAERC,WAACf,GAAYK,GAAsBK,IAClCI,MAACO,EAAAA,gBAAiB,IAAGpB,UAKzC"}

package/build/cjs/components/feedback/Feedback.d.cts

@@ -0,0 +1,50 @@
+import { ComponentProps, ReactElement, ReactNode } from 'react';
+import { BaseTextAreaProps } from '../text-input/BaseTextArea.cjs;'
+import { Followup } from './followup/Followup.cjs;'
+import { ContactQuestion } from './questions/ContactQuestion.cjs;'
+import { FeedbackOption, FeedbackType } from './types.cjs;'
+type FollowupProps = ComponentProps<typeof Followup>;
+type ContactQuestionProps = ComponentProps<typeof ContactQuestion>;
+type Props = {
+    className?: string;
+    /** Velg typen alternativer, Smiley eller RadioButtons. */
+    type: "radio" | "smiley";
+    /** Spørsmålet som stilles til brukeren */
+    label: string;
+    /** Hjelpetekst til hovedspørsmålet */
+    helpLabel?: string;
+    /** Svaralternativer til spørsmålet */
+    options: FeedbackOption[];
+    /** Dersom du vil stille et åpent spørsmål i tillegg kan du sette denne til en truthy verdi */
+    addOnQuestion?: {
+        /** Spørsmålet du vil stille */
+        label?: string;
+        /** Eventuell hjelpetekst. Om du ikke spesifiserer en vil det vises en påminnelse om å ikke skrive inn personling informasjon. */
+        helpLabel?: string;
+    } | boolean;
+    /** Lar deg tilpasse meldingen som kommer når brukeren sender inn tilbakemeldingen.  */
+    successMessage?: {
+        title: string;
+        children: ReactNode;
+    };
+    /**
+     * Funksjon for å håndtere innsending av tilbakemelding
+     * @param value Verdien av tilbakemeldingen. Dette er et objekt med følgende egenskaper:
+     * - `feedbackValue`: Selve verdien av tilbakemeldingen (format varierer etter spørsmålstype)
+     * - `intentionalSubmit`: Er `true` hvis brukeren aktivt sendte inn skjemaet, `false` hvis skjemaet ble sendt inn automatisk
+     * - `message`: Eventuell utfyllende melding fra bruker. Blir kun sendt inn ved aktiv innsending
+     */
+    onSubmit: (value: FeedbackType) => void;
+    followup?: FollowupProps;
+    contactQuestion?: ContactQuestionProps;
+    /**
+     * Hvis du ønsker at Feedback formen skal eksponeres som et landmark kan du sende inn
+     * hva du ønsker at en skjermleser skal kalle den her. Bare eksponer Feedback som et
+     * landmark på sider der den er en viktig del av innholdet, feks en kvitteringsside
+     * eller et annet sted det å kunne gi tilbakemelding vil føles naturlig eller forventet
+     * for brukeren.
+     */
+    landmarkLabel?: string;
+} & Pick<BaseTextAreaProps, "counter">;
+export declare const Feedback: ({ className, followup, contactQuestion, counter, landmarkLabel, ...mainQuestionProps }: Props) => ReactElement;
+export {};

package/build/cjs/components/feedback/FeedbackSuccess.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../../clsx-E3yX_9sL.cjs"),c=require("../message/Message.cjs");exports.FeedbackSuccess=({children:r,className:a,...i})=>e.jsx(c.SuccessMessage,{className:s.clsx("jkl-feedback__fade-in",a),...i,"aria-live":"polite",children:r});
+//# sourceMappingURL=FeedbackSuccess.cjs.map

package/build/cjs/components/feedback/FeedbackSuccess.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackSuccess.cjs","sources":["../../../../src/components/feedback/FeedbackSuccess.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { FC } from \"react\";\nimport { MessageProps, SuccessMessage } from \"../message/Message.js\";\n\nexport const FeedbackSuccess: FC<MessageProps> = ({ children, className, ...rest }) => (\n    <SuccessMessage className={clsx(\"jkl-feedback__fade-in\", className)} {...rest} aria-live=\"polite\">\n        {children}\n    </SuccessMessage>\n);\n"],"names":["children","className","rest","jsx","SuccessMessage","clsx"],"mappings":"yNAIiD,EAAGA,SAAAA,EAAUC,UAAAA,KAAcC,KACxEC,EAAAA,IAACC,kBAAeH,UAAWI,EAAAA,KAAK,wBAAyBJ,MAAgBC,EAAM,YAAU,SACpFF,SAAAA"}

package/build/cjs/components/feedback/FeedbackSuccess.d.cts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { MessageProps } from '../message/Message.cjs;'
+export declare const FeedbackSuccess: FC<MessageProps>;

package/build/cjs/components/feedback/FeedbackValues.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});exports.HAPPY={label:"Fornøyd",value:4},exports.NEUTRAL={label:"Verken fornøyd eller misfornøyd",value:3},exports.UNHAPPY={label:"Ikke fornøyd",value:2},exports.VERY_HAPPY={label:"Veldig fornøyd",value:5},exports.VERY_UNHAPPY={label:"Ikke fornøyd i det hele tatt",value:1};
+//# sourceMappingURL=FeedbackValues.cjs.map

package/build/cjs/components/feedback/FeedbackValues.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackValues.cjs","sources":["../../../../src/components/feedback/FeedbackValues.tsx"],"sourcesContent":["import { FeedbackOption } from \"./types.js\";\n\nexport const VERY_UNHAPPY: FeedbackOption = { label: \"Ikke fornøyd i det hele tatt\", value: 1 };\nexport const UNHAPPY: FeedbackOption = { label: \"Ikke fornøyd\", value: 2 };\nexport const NEUTRAL: FeedbackOption = { label: \"Verken fornøyd eller misfornøyd\", value: 3 };\nexport const HAPPY: FeedbackOption = { label: \"Fornøyd\", value: 4 };\nexport const VERY_HAPPY: FeedbackOption = { label: \"Veldig fornøyd\", value: 5 };\n"],"names":["label","value"],"mappings":"8FAKqC,CAAEA,MAAO,UAAWC,MAAO,mBADzB,CAAED,MAAO,kCAAmCC,MAAO,mBADnD,CAAED,MAAO,eAAgBC,MAAO,sBAG7B,CAAED,MAAO,iBAAkBC,MAAO,wBAJhC,CAAED,MAAO,+BAAgCC,MAAO"}

package/build/cjs/components/feedback/FeedbackValues.d.cts

@@ -0,0 +1,6 @@
+import { FeedbackOption } from './types.cjs;'
+export declare const VERY_UNHAPPY: FeedbackOption;
+export declare const UNHAPPY: FeedbackOption;
+export declare const NEUTRAL: FeedbackOption;
+export declare const HAPPY: FeedbackOption;
+export declare const VERY_HAPPY: FeedbackOption;

package/build/cjs/components/feedback/feedbackContext.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),o=t.createContext({feedbackSubmitted:!1,followupStarted:!1,followupSubmitted:!1,contactSubmitted:!1,setFeedbackSubmitted:()=>null,setFollowupStarted:()=>null,setFollowupSubmitted:()=>null,setContactSubmitted:()=>null});exports.FeedbackContextProvider=({value:t,children:u})=>e.jsx(o.Provider,{value:t,children:u}),exports.useFeedbackContext=()=>t.useContext(o);
+//# sourceMappingURL=feedbackContext.cjs.map

package/build/cjs/components/feedback/feedbackContext.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedbackContext.cjs","sources":["../../../../src/components/feedback/feedbackContext.tsx"],"sourcesContent":["import React, { createContext, FC, useContext } from \"react\";\nimport { WithChildren } from \"../../core/types.js\";\nimport { BaseTextAreaProps } from \"../text-input/BaseTextArea.js\";\n\ntype FeedbackContext = {\n    feedbackSubmitted: boolean;\n    followupStarted: boolean;\n    followupSubmitted: boolean;\n    contactSubmitted: boolean;\n    landmarkLabel?: string;\n    setFeedbackSubmitted: (state: boolean) => void;\n    setFollowupStarted: (state: boolean) => void;\n    setFollowupSubmitted: (state: boolean) => void;\n    setContactSubmitted: (state: boolean) => void;\n} & Pick<BaseTextAreaProps, \"counter\">;\n\nconst initialState: FeedbackContext = {\n    feedbackSubmitted: false,\n    followupStarted: false,\n    followupSubmitted: false,\n    contactSubmitted: false,\n    setFeedbackSubmitted: () => null,\n    setFollowupStarted: () => null,\n    setFollowupSubmitted: () => null,\n    setContactSubmitted: () => null,\n};\n\nconst feedbackContext = createContext(initialState);\n\nexport const useFeedbackContext = (): FeedbackContext => useContext(feedbackContext);\n\ninterface FeedbackContextProviderProps extends WithChildren {\n    value: FeedbackContext;\n}\n\nexport const FeedbackContextProvider: FC<FeedbackContextProviderProps> = ({ value, children }) => (\n    <feedbackContext.Provider value={value}>{children}</feedbackContext.Provider>\n);\n"],"names":["feedbackContext","createContext","feedbackSubmitted","followupStarted","followupSubmitted","contactSubmitted","setFeedbackSubmitted","setFollowupStarted","setFollowupSubmitted","setContactSubmitted","value","children","jsx","Provider","useContext"],"mappings":"wIA2BMA,EAAkBC,EAAAA,cAXc,CAClCC,mBAAmB,EACnBC,iBAAiB,EACjBC,mBAAmB,EACnBC,kBAAkB,EAClBC,qBAAsB,IAAM,KAC5BC,mBAAoB,IAAM,KAC1BC,qBAAsB,IAAM,KAC5BC,oBAAqB,IAAM,uCAW0C,EAAGC,MAAAA,EAAOC,SAAAA,KAC/EC,MAACZ,EAAgBa,SAAhB,CAAyBH,MAAAA,EAAeC,SAAAA,+BAPX,IAAuBG,EAAAA,WAAWd"}

package/build/cjs/components/feedback/feedbackContext.d.cts

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { WithChildren } from '../../core/types.cjs;'
+import { BaseTextAreaProps } from '../text-input/BaseTextArea.cjs;'
+type FeedbackContext = {
+    feedbackSubmitted: boolean;
+    followupStarted: boolean;
+    followupSubmitted: boolean;
+    contactSubmitted: boolean;
+    landmarkLabel?: string;
+    setFeedbackSubmitted: (state: boolean) => void;
+    setFollowupStarted: (state: boolean) => void;
+    setFollowupSubmitted: (state: boolean) => void;
+    setContactSubmitted: (state: boolean) => void;
+} & Pick<BaseTextAreaProps, "counter">;
+export declare const useFeedbackContext: () => FeedbackContext;
+interface FeedbackContextProviderProps extends WithChildren {
+    value: FeedbackContext;
+}
+export declare const FeedbackContextProvider: FC<FeedbackContextProviderProps>;
+export {};

package/build/cjs/components/feedback/followup/Followup.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),s=require("../../button/Button.cjs"),r=require("../feedbackContext.cjs"),l=require("../FeedbackSuccess.cjs"),i=require("../utils.cjs"),n=require("./followupContext.cjs"),a=require("./useFollowup.cjs"),o={title:"Takk, igjen!",children:"Vi setter pris på at du tok deg tid til å svare på flere spørsmål. Det hjelper oss med å gjøre nettsidene bedre for deg og alle andre som bruker dem."};exports.Followup=({questions:c,successMessage:u=o,onSubmit:d})=>{const[j,p]=t.useState(!1),m=t.useRef(null),b=a.useFollowup(c,d),{handleAbort:k,handleNext:x,step:f,submitted:g}=b,{followupStarted:h,setFollowupStarted:S,setFollowupSubmitted:y,contactSubmitted:v,landmarkLabel:F}=r.useFeedbackContext();t.useEffect((()=>{0!==f.number&&m.current&&m.current.focus()}),[f]),t.useEffect((()=>{y(g)}),[g,y]);const N=i.getQuestionFromType(c[f.number].type),q=f.isLast?s.PrimaryButton:s.SecondaryButton;return j?null:e.jsx("div",{"aria-live":"polite",children:e.jsxs(n.FollowUpProvider,{state:b,children:[!h&&e.jsxs("div",{className:"jkl-feedback__fade-in",children:[e.jsx("p",{className:"jkl-heading-4 jkl-spacing-xl--top jkl-spacing-xs--bottom",children:"Har du tid til å svare på noen flere spørsmål?"}),e.jsx("p",{className:"jkl-body jkl-spacing-xl--bottom",children:"Det tar kun et minutt, og hjelper oss å lage bedre løsninger for deg."}),e.jsx(s.PrimaryButton,{onClick:()=>S(!0),className:"jkl-spacing-xl--right",children:"Jeg har tid!"}),e.jsx(s.TertiaryButton,{onClick:()=>p(!0),children:"Nei takk"})]}),!g&&h&&e.jsxs("form",{onSubmit:x,className:"jkl-feedback__fade-in","aria-label":F,children:[e.jsxs("p",{className:"jkl-feedback__step-counter",ref:m,children:["Steg ",f.number+1," av ",c.length]}),t.createElement(N,{...c[f.number],autoFocus:!0,key:f.number}),e.jsxs("div",{className:"jkl-spacing-xl--top","aria-live":"off",children:[e.jsx(q,{type:"submit",children:f.isLast?"Send inn":"Neste"}),e.jsx(s.TertiaryButton,{onClick:k,className:"jkl-spacing-xl--left",children:"Avbryt"})]})]}),g&&!v&&e.jsx(l.FeedbackSuccess,{...u})]})})};
+//# sourceMappingURL=Followup.cjs.map

package/build/cjs/components/feedback/followup/Followup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Followup.cjs","sources":["../../../../../src/components/feedback/followup/Followup.tsx"],"sourcesContent":["import React, { FC, ReactNode, useEffect, useRef, useState } from \"react\";\nimport { PrimaryButton, SecondaryButton, TertiaryButton } from \"../../button/Button.js\";\nimport { useFeedbackContext } from \"../feedbackContext.js\";\nimport { FeedbackSuccess } from \"../FeedbackSuccess.js\";\nimport { FeedbackAnswer, FollowupQuestion } from \"../types.js\";\nimport { getQuestionFromType } from \"../utils.js\";\nimport { FollowUpProvider } from \"./followupContext.js\";\nimport { useFollowup } from \"./useFollowup.js\";\n\nconst defaultSuccessMessage = {\n    title: \"Takk, igjen!\",\n    children:\n        \"Vi setter pris på at du tok deg tid til å svare på flere spørsmål. Det hjelper oss med å gjøre nettsidene bedre for deg og alle andre som bruker dem.\",\n};\n\ninterface Props {\n    /** Spørsmålet/ene som skal stilles. Kan være av typen radio, checkbox eller text */\n    questions: FollowupQuestion[];\n    /** Lar deg tilpasse meldingen som kommer når brukeren har svart på spørsmålene.  */\n    successMessage?: {\n        title: string;\n        children: ReactNode;\n    };\n    onSubmit: (values: FeedbackAnswer[]) => void;\n}\n\nexport const Followup: FC<Props> = ({ questions, successMessage = defaultSuccessMessage, onSubmit }) => {\n    const [noThanks, setNoThanks] = useState(false);\n    const focusRef = useRef<HTMLParagraphElement>(null);\n    const followupState = useFollowup(questions, onSubmit);\n    const { handleAbort, handleNext, step, submitted } = followupState;\n    const { followupStarted, setFollowupStarted, setFollowupSubmitted, contactSubmitted, landmarkLabel } =\n        useFeedbackContext();\n\n    useEffect(() => {\n        if (step.number === 0) {\n            return;\n        }\n        focusRef.current && focusRef.current.focus();\n    }, [step]);\n\n    useEffect(() => {\n        setFollowupSubmitted(submitted);\n    }, [submitted, setFollowupSubmitted]);\n\n    const QuestionComponent = getQuestionFromType(questions[step.number].type);\n    const Button = step.isLast ? PrimaryButton : SecondaryButton;\n\n    if (noThanks) {\n        return null;\n    }\n\n    return (\n        <div aria-live=\"polite\">\n            <FollowUpProvider state={followupState}>\n                {!followupStarted && (\n                    <div className=\"jkl-feedback__fade-in\">\n                        <p className=\"jkl-heading-4 jkl-spacing-xl--top jkl-spacing-xs--bottom\">\n                            Har du tid til å svare på noen flere spørsmål?\n                        </p>\n                        <p className=\"jkl-body jkl-spacing-xl--bottom\">\n                            Det tar kun et minutt, og hjelper oss å lage bedre løsninger for deg.\n                        </p>\n                        <PrimaryButton onClick={() => setFollowupStarted(true)} className=\"jkl-spacing-xl--right\">\n                            Jeg har tid!\n                        </PrimaryButton>\n                        <TertiaryButton onClick={() => setNoThanks(true)}>Nei takk</TertiaryButton>\n                    </div>\n                )}\n                {!submitted && followupStarted && (\n                    <form onSubmit={handleNext} className=\"jkl-feedback__fade-in\" aria-label={landmarkLabel}>\n                        <p className=\"jkl-feedback__step-counter\" ref={focusRef}>\n                            Steg {step.number + 1} av {questions.length}\n                        </p>\n                        {/* eslint-disable-next-line jsx-a11y/no-autofocus */}\n                        <QuestionComponent {...questions[step.number]} autoFocus key={step.number} />\n                        <div className=\"jkl-spacing-xl--top\" aria-live=\"off\">\n                            <Button type=\"submit\">{step.isLast ? \"Send inn\" : \"Neste\"}</Button>\n                            <TertiaryButton onClick={handleAbort} className=\"jkl-spacing-xl--left\">\n                                Avbryt\n                            </TertiaryButton>\n                        </div>\n                    </form>\n                )}\n                {submitted && !contactSubmitted && <FeedbackSuccess {...successMessage} />}\n            </FollowUpProvider>\n        </div>\n    );\n};\n"],"names":["defaultSuccessMessage","title","children","questions","successMessage","onSubmit","noThanks","setNoThanks","useState","focusRef","useRef","followupState","useFollowup","handleAbort","handleNext","step","submitted","followupStarted","setFollowupStarted","setFollowupSubmitted","contactSubmitted","landmarkLabel","useFeedbackContext","useEffect","number","current","focus","QuestionComponent","getQuestionFromType","type","Button","isLast","PrimaryButton","SecondaryButton","jsxs","FollowUpProvider","state","className","jsx","onClick","TertiaryButton","ref","length","createElement","autoFocus","key","FeedbackSuccess"],"mappings":"iVASMA,EAAwB,CAC1BC,MAAO,eACPC,SACI,0KAc2B,EAAGC,UAAAA,EAAWC,eAAAA,EAAiBJ,EAAuBK,SAAAA,MACrF,MAAOC,EAAUC,GAAeC,YAAS,GACnCC,EAAWC,SAA6B,MACxCC,EAAgBC,EAAAA,YAAYT,EAAWE,IACrCQ,YAAAA,EAAaC,WAAAA,EAAYC,KAAAA,EAAMC,UAAAA,GAAcL,GAC7CM,gBAAAA,EAAiBC,mBAAAA,EAAoBC,qBAAAA,EAAsBC,iBAAAA,EAAkBC,cAAAA,GACjFC,EAAAA,qBAEJC,EAAAA,WAAU,KACc,IAAhBR,EAAKS,QAGAf,EAAAgB,SAAWhB,EAASgB,QAAQC,OAAM,GAC5C,CAACX,IAEJQ,EAAAA,WAAU,KACNJ,EAAqBH,EAAS,GAC/B,CAACA,EAAWG,IAEf,MAAMQ,EAAoBC,EAAAA,oBAAoBzB,EAAUY,EAAKS,QAAQK,MAC/DC,EAASf,EAAKgB,OAASC,EAAAA,cAAgBC,EAAAA,gBAE7C,OAAI3B,EACO,WAIN,MAAI,CAAA,YAAU,SACXJ,SAACgC,EAAAA,KAAAC,mBAAA,CAAiBC,MAAOzB,EACpBT,SAAA,EAACe,GACEiB,EAAAA,KAAC,MAAI,CAAAG,UAAU,wBACXnC,SAAA,CAACoC,EAAAA,IAAA,IAAA,CAAED,UAAU,2DAA2DnC,SAExE,mDACCoC,EAAAA,IAAA,IAAA,CAAED,UAAU,kCAAkCnC,SAE/C,0EACAoC,EAAAA,IAACN,iBAAcO,QAAS,IAAMrB,GAAmB,GAAOmB,UAAU,wBAAwBnC,SAE1F,uBACCsC,EAAAA,eAAe,CAAAD,QAAS,IAAMhC,GAAY,GAAOL,SAAQ,iBAGhEc,GAAaC,GACViB,EAAAA,KAAA,OAAA,CAAK7B,SAAUS,EAAYuB,UAAU,wBAAwB,aAAYhB,EACtEnB,SAAA,CAAAgC,EAAAA,KAAC,IAAE,CAAAG,UAAU,6BAA6BI,IAAKhC,EAAUP,SAAA,CAAA,QAC/Ca,EAAKS,OAAS,EAAE,OAAKrB,EAAUuC,UAGzCC,EAAAA,cAAChB,EAAmB,IAAGxB,EAAUY,EAAKS,QAASoB,WAAS,EAACC,IAAK9B,EAAKS,SAClEU,EAAAA,KAAA,MAAA,CAAIG,UAAU,sBAAsB,YAAU,MAC3CnC,SAAA,CAAAoC,MAACR,GAAOD,KAAK,SAAU3B,SAAKa,EAAAgB,OAAS,WAAa,gBACjDS,EAAAA,eAAe,CAAAD,QAAS1B,EAAawB,UAAU,uBAAuBnC,SAEvE,iBAIXc,IAAcI,GAAqBkB,EAAAA,IAAAQ,EAAAA,gBAAA,IAAoB1C,QAEhE"}