@fremtind/jokul 3.3.0 → 3.4.0

package/build/cjs/shared/input-panel/BasePanel.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../../clsx-E3yX_9sL.cjs"),l=require("react"),n=require("../../hooks/useAnimatedHeight/useAutoAnimateHeight.cjs"),s=l.forwardRef(function({className:s,isChecked:t,children:i,alwaysOpen:r=!1,label:c,extraLabel:d,amount:p,type:u,...o},j){const x=`content-${l.useId()}`,h=`input-${l.useId()}`,m=l.Children.count(i)>0,_=n.useAutoAnimatedHeight(t);return e.jsxs("div",{className:a.clsx("jkl-input-panel",`jkl-${u}-panel`,s),children:[e.jsxs("label",{className:"jkl-input-panel__label",htmlFor:h,children:[e.jsx("input",{ref:j,id:h,className:"jkl-input-panel__input",type:u,"aria-controls":r?void 0:x,"aria-expanded":r?void 0:t,...o}),e.jsx("span",{"aria-hidden":"true",className:`jkl-${u}-panel__decorator`}),e.jsx("span",{className:"jkl-input-panel__main-label",children:c}),(d||p)&&e.jsx("span",{className:a.clsx("jkl-input-panel__extra-label",{"jkl-input-panel__extra-label--text":"string"==typeof d||p}),children:d||p})]}),m&&e.jsx("div",{ref:_,"aria-hidden":!t&&!r,children:e.jsx("div",{className:"jkl-input-panel__content",id:x,"data-alwaysopen":r,children:i})})]})});exports.BasePanel=s;
-//# sourceMappingURL=BasePanel.cjs.map

package/build/cjs/shared/input-panel/BasePanel.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"BasePanel.cjs","sources":["../../../../src/shared/input-panel/BasePanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    Children,\n    type ComponentPropsWithRef,\n    type ForwardedRef,\n    forwardRef,\n    type ReactNode,\n    useId,\n} from \"react\";\nimport { useAutoAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAutoAnimateHeight.js\";\n\ntype Props = ComponentPropsWithRef<\"input\"> & {\n    isChecked: boolean;\n    /**\n     * @deprecated bruk heller {@link amount} for å vise pris.\n     * Dersom du har behov utover dette ta kontakt med oss så finner vi en løsning sammen.\n     */\n    extraLabel?: ReactNode;\n    /**\n     * @deprecated vi ønsker ikke at content skal skjules for brukerne lenger\n     * @default true\n     */\n    alwaysOpen?: boolean;\n    /**\n     * Viser pris til høyre i panelet\n     */\n    amount?: string;\n    label: string;\n    type: \"radio\" | \"checkbox\";\n};\n\nexport const BasePanel = forwardRef(function BasePanel(\n    {\n        className,\n        isChecked,\n        children,\n        alwaysOpen = false,\n        label,\n        extraLabel,\n        amount,\n        type,\n        ...rest\n    }: Props,\n    ref: ForwardedRef<HTMLInputElement>,\n) {\n    const contentId = `content-${useId()}`;\n    const inputId = `input-${useId()}`;\n    const hasChildren = Children.count(children) > 0;\n    const animationRef = useAutoAnimatedHeight<HTMLDivElement>(isChecked);\n\n    return (\n        <div\n            className={clsx(\"jkl-input-panel\", `jkl-${type}-panel`, className)}\n        >\n            <label className=\"jkl-input-panel__label\" htmlFor={inputId}>\n                <input\n                    ref={ref}\n                    id={inputId}\n                    className=\"jkl-input-panel__input\"\n                    type={type}\n                    aria-controls={!alwaysOpen ? contentId : undefined}\n                    aria-expanded={!alwaysOpen ? isChecked : undefined}\n                    {...rest}\n                />\n                <span\n                    aria-hidden=\"true\"\n                    className={`jkl-${type}-panel__decorator`}\n                />\n                <span className=\"jkl-input-panel__main-label\">{label}</span>\n                {(extraLabel || amount) && (\n                    <span\n                        className={clsx(\"jkl-input-panel__extra-label\", {\n                            \"jkl-input-panel__extra-label--text\":\n                                typeof extraLabel === \"string\" || amount,\n                        })}\n                    >\n                        {extraLabel || amount}\n                    </span>\n                )}\n            </label>\n            {hasChildren && (\n                <div ref={animationRef} aria-hidden={!isChecked && !alwaysOpen}>\n                    <div\n                        className=\"jkl-input-panel__content\"\n                        id={contentId}\n                        data-alwaysopen={alwaysOpen}\n                    >\n                        {children}\n                    </div>\n                </div>\n            )}\n        </div>\n    );\n});\n"],"names":["BasePanel","forwardRef","className","isChecked","children","alwaysOpen","label","extraLabel","amount","type","rest","ref","contentId","useId","inputId","hasChildren","Children","count","animationRef","useAutoAnimatedHeight","jsxs","clsx","htmlFor","jsx","id"],"mappings":"oPA+BaA,EAAYC,EAAAA,WAAW,UAE5BC,UAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,WAAAA,GAAa,EACbC,MAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,KAAAA,KACGC,GAEPC,GAEA,MAAMC,EAAY,WAAWC,EAAAA,UACvBC,EAAU,SAASD,EAAAA,UACnBE,EAAcC,EAAAA,SAASC,MAAMb,GAAY,EACzCc,EAAeC,EAAAA,sBAAsChB,GAE3D,OACIiB,EAAAA,KAAC,MAAA,CACGlB,UAAWmB,EAAAA,KAAK,kBAAmB,OAAOZ,UAAcP,GAExDE,SAAA,CAAAgB,EAAAA,KAAC,QAAA,CAAMlB,UAAU,yBAAyBoB,QAASR,EAC/CV,SAAA,CAAAmB,EAAAA,IAAC,QAAA,CACGZ,IAAAA,EACAa,GAAIV,EACJZ,UAAU,yBACVO,KAAAA,EACA,gBAAgBJ,OAAyB,EAAZO,EAC7B,gBAAgBP,OAAyB,EAAZF,KACzBO,IAERa,EAAAA,IAAC,OAAA,CACG,cAAY,OACZrB,UAAW,OAAOO,uBAEtBc,EAAAA,IAAC,OAAA,CAAKrB,UAAU,8BAA+BE,SAAAE,KAC7CC,GAAcC,IACZe,EAAAA,IAAC,OAAA,CACGrB,UAAWmB,EAAAA,KAAK,+BAAgC,CAC5C,qCAC0B,iBAAfd,GAA2BC,IAGzCJ,SAAAG,GAAcC,OAI1BO,SACI,MAAA,CAAIJ,IAAKO,EAAc,eAAcf,IAAcE,EAChDD,SAAAmB,EAAAA,IAAC,MAAA,CACGrB,UAAU,2BACVsB,GAAIZ,EACJ,kBAAiBP,EAEhBD,SAAAA,QAMzB"}

package/build/cjs/shared/input-panel/BasePanel.d.cts

@@ -1,22 +0,0 @@
-import { default as React, ComponentPropsWithRef, ReactNode } from 'react';
-type Props = ComponentPropsWithRef<"input"> & {
-    isChecked: boolean;
-    /**
-     * @deprecated bruk heller {@link amount} for å vise pris.
-     * Dersom du har behov utover dette ta kontakt med oss så finner vi en løsning sammen.
-     */
-    extraLabel?: ReactNode;
-    /**
-     * @deprecated vi ønsker ikke at content skal skjules for brukerne lenger
-     * @default true
-     */
-    alwaysOpen?: boolean;
-    /**
-     * Viser pris til høyre i panelet
-     */
-    amount?: string;
-    label: string;
-    type: "radio" | "checkbox";
-};
-export declare const BasePanel: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export {};

package/build/es/shared/input-panel/BasePanel.d.ts

@@ -1,22 +0,0 @@
-import { default as React, ComponentPropsWithRef, ReactNode } from 'react';
-type Props = ComponentPropsWithRef<"input"> & {
-    isChecked: boolean;
-    /**
-     * @deprecated bruk heller {@link amount} for å vise pris.
-     * Dersom du har behov utover dette ta kontakt med oss så finner vi en løsning sammen.
-     */
-    extraLabel?: ReactNode;
-    /**
-     * @deprecated vi ønsker ikke at content skal skjules for brukerne lenger
-     * @default true
-     */
-    alwaysOpen?: boolean;
-    /**
-     * Viser pris til høyre i panelet
-     */
-    amount?: string;
-    label: string;
-    type: "radio" | "checkbox";
-};
-export declare const BasePanel: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export {};

package/build/es/shared/input-panel/BasePanel.js

@@ -1,2 +0,0 @@
-import{jsxs as a,jsx as e}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import{forwardRef as l,useId as t,Children as s}from"react";import{useAutoAnimatedHeight as i}from"../../hooks/useAnimatedHeight/useAutoAnimateHeight.js";const r=l(function({className:l,isChecked:r,children:p,alwaysOpen:o=!1,label:c,extraLabel:d,amount:m,type:u,...h},j){const _=`content-${t()}`,k=`input-${t()}`,f=s.count(p)>0,x=i(r);return a("div",{className:n("jkl-input-panel",`jkl-${u}-panel`,l),children:[a("label",{className:"jkl-input-panel__label",htmlFor:k,children:[e("input",{ref:j,id:k,className:"jkl-input-panel__input",type:u,"aria-controls":o?void 0:_,"aria-expanded":o?void 0:r,...h}),e("span",{"aria-hidden":"true",className:`jkl-${u}-panel__decorator`}),e("span",{className:"jkl-input-panel__main-label",children:c}),(d||m)&&e("span",{className:n("jkl-input-panel__extra-label",{"jkl-input-panel__extra-label--text":"string"==typeof d||m}),children:d||m})]}),f&&e("div",{ref:x,"aria-hidden":!r&&!o,children:e("div",{className:"jkl-input-panel__content",id:_,"data-alwaysopen":o,children:p})})]})});export{r as BasePanel};
-//# sourceMappingURL=BasePanel.js.map

package/build/es/shared/input-panel/BasePanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BasePanel.js","sources":["../../../../src/shared/input-panel/BasePanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    Children,\n    type ComponentPropsWithRef,\n    type ForwardedRef,\n    forwardRef,\n    type ReactNode,\n    useId,\n} from \"react\";\nimport { useAutoAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAutoAnimateHeight.js\";\n\ntype Props = ComponentPropsWithRef<\"input\"> & {\n    isChecked: boolean;\n    /**\n     * @deprecated bruk heller {@link amount} for å vise pris.\n     * Dersom du har behov utover dette ta kontakt med oss så finner vi en løsning sammen.\n     */\n    extraLabel?: ReactNode;\n    /**\n     * @deprecated vi ønsker ikke at content skal skjules for brukerne lenger\n     * @default true\n     */\n    alwaysOpen?: boolean;\n    /**\n     * Viser pris til høyre i panelet\n     */\n    amount?: string;\n    label: string;\n    type: \"radio\" | \"checkbox\";\n};\n\nexport const BasePanel = forwardRef(function BasePanel(\n    {\n        className,\n        isChecked,\n        children,\n        alwaysOpen = false,\n        label,\n        extraLabel,\n        amount,\n        type,\n        ...rest\n    }: Props,\n    ref: ForwardedRef<HTMLInputElement>,\n) {\n    const contentId = `content-${useId()}`;\n    const inputId = `input-${useId()}`;\n    const hasChildren = Children.count(children) > 0;\n    const animationRef = useAutoAnimatedHeight<HTMLDivElement>(isChecked);\n\n    return (\n        <div\n            className={clsx(\"jkl-input-panel\", `jkl-${type}-panel`, className)}\n        >\n            <label className=\"jkl-input-panel__label\" htmlFor={inputId}>\n                <input\n                    ref={ref}\n                    id={inputId}\n                    className=\"jkl-input-panel__input\"\n                    type={type}\n                    aria-controls={!alwaysOpen ? contentId : undefined}\n                    aria-expanded={!alwaysOpen ? isChecked : undefined}\n                    {...rest}\n                />\n                <span\n                    aria-hidden=\"true\"\n                    className={`jkl-${type}-panel__decorator`}\n                />\n                <span className=\"jkl-input-panel__main-label\">{label}</span>\n                {(extraLabel || amount) && (\n                    <span\n                        className={clsx(\"jkl-input-panel__extra-label\", {\n                            \"jkl-input-panel__extra-label--text\":\n                                typeof extraLabel === \"string\" || amount,\n                        })}\n                    >\n                        {extraLabel || amount}\n                    </span>\n                )}\n            </label>\n            {hasChildren && (\n                <div ref={animationRef} aria-hidden={!isChecked && !alwaysOpen}>\n                    <div\n                        className=\"jkl-input-panel__content\"\n                        id={contentId}\n                        data-alwaysopen={alwaysOpen}\n                    >\n                        {children}\n                    </div>\n                </div>\n            )}\n        </div>\n    );\n});\n"],"names":["BasePanel","forwardRef","className","isChecked","children","alwaysOpen","label","extraLabel","amount","type","rest","ref","contentId","useId","inputId","hasChildren","Children","count","animationRef","useAutoAnimatedHeight","jsxs","clsx","htmlFor","jsx","id"],"mappings":"0PA+BO,MAAMA,EAAYC,EAAW,UAE5BC,UAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,WAAAA,GAAa,EACbC,MAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,KAAAA,KACGC,GAEPC,GAEA,MAAMC,EAAY,WAAWC,MACvBC,EAAU,SAASD,MACnBE,EAAcC,EAASC,MAAMb,GAAY,EACzCc,EAAeC,EAAsChB,GAE3D,OACIiB,EAAC,MAAA,CACGlB,UAAWmB,EAAK,kBAAmB,OAAOZ,UAAcP,GAExDE,SAAA,CAAAgB,EAAC,QAAA,CAAMlB,UAAU,yBAAyBoB,QAASR,EAC/CV,SAAA,CAAAmB,EAAC,QAAA,CACGZ,IAAAA,EACAa,GAAIV,EACJZ,UAAU,yBACVO,KAAAA,EACA,gBAAgBJ,OAAyB,EAAZO,EAC7B,gBAAgBP,OAAyB,EAAZF,KACzBO,IAERa,EAAC,OAAA,CACG,cAAY,OACZrB,UAAW,OAAOO,uBAEtBc,EAAC,OAAA,CAAKrB,UAAU,8BAA+BE,SAAAE,KAC7CC,GAAcC,IACZe,EAAC,OAAA,CACGrB,UAAWmB,EAAK,+BAAgC,CAC5C,qCAC0B,iBAAfd,GAA2BC,IAGzCJ,SAAAG,GAAcC,OAI1BO,KACI,MAAA,CAAIJ,IAAKO,EAAc,eAAcf,IAAcE,EAChDD,SAAAmB,EAAC,MAAA,CACGrB,UAAU,2BACVsB,GAAIZ,EACJ,kBAAiBP,EAEhBD,SAAAA,QAMzB"}

package/styles/shared/input-panel/shared.css

@@ -1,73 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-.jkl-input-panel {
-  --outer-border-color: var(--jkl-color-border-input);
-  --outer-border-thickness: 0.0625rem;
-  --padding-inline: var(--jkl-unit-20) var(--jkl-unit-30);
-  --padding-label-block: var(--jkl-unit-25);
-  --background-color: transparent;
-  box-shadow: inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);
-  border-radius: 4px;
-  background-color: var(--background-color);
-}
-.jkl-input-panel__input {
-  opacity: 0;
-  position: absolute;
-  top: -6px;
-}
-.jkl-input-panel__label {
-  display: grid;
-  grid-template-columns: min-content 1fr max-content;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  padding-inline: var(--padding-inline);
-}
-.jkl-input-panel__main-label {
-  padding-block: 1.5rem;
-}
-.jkl-input-panel__extra-label {
-  align-self: stretch;
-}
-.jkl-input-panel__extra-label > :first-child {
-  box-sizing: content-box;
-  padding-right: 1rem;
-}
-.jkl-input-panel__extra-label--text {
-  display: flex;
-  height: 100%;
-  align-items: center;
-}
-.jkl-input-panel__content {
-  height: 0;
-  overflow: hidden;
-  padding-inline: var(--padding-inline);
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  font-weight: 400;
-  --jkl-icon-weight: 300;
-}
-@media (min-width: 680px) {
-  .jkl-input-panel__content {
-    font-size: 1.25rem;
-    line-height: 2rem;
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-  }
-}
-.jkl-input-panel__content[data-alwaysopen=true], .jkl-input-panel:has([aria-expanded=true]) .jkl-input-panel__content {
-  padding-bottom: 24px;
-  height: auto;
-}
-.jkl-input-panel:has(:focus-visible) {
-  outline: 3px solid var(--jkl-color-border-action);
-  outline-offset: 3px;
-}
-.jkl-input-panel:has(:checked) {
-  --background-color: var(--jkl-color-background-container-high);
-}
-.jkl-input-panel:has(label:hover) {
-  --outer-border-color: var(--jkl-color-border-separator-hover);
-  --outer-border-thickness: 0.125rem;
-}

package/styles/shared/input-panel/shared.min.css

@@ -1 +0,0 @@
-.jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--padding-inline:var(--jkl-unit-20) var(--jkl-unit-30);--padding-label-block:var(--jkl-unit-25);--background-color:#0000;background-color:var(--background-color);border-radius:4px;box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color)}.jkl-input-panel__input{opacity:0;position:absolute;top:-6px}.jkl-input-panel__label{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:-webkit-min-content 1fr -webkit-max-content;grid-template-columns:min-content 1fr max-content;padding-inline:var(--padding-inline)}.jkl-input-panel__main-label{padding-block:1.5rem}.jkl-input-panel__extra-label{align-self:stretch}.jkl-input-panel__extra-label>:first-child{box-sizing:initial;padding-right:1rem}.jkl-input-panel__extra-label--text{align-items:center;display:flex;height:100%}.jkl-input-panel__content{font-size:1.125rem;font-weight:400;height:0;line-height:1.75rem;overflow:hidden;padding-inline:var(--padding-inline);--jkl-icon-weight:300}@media (min-width:680px){.jkl-input-panel__content{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-input-panel:has([aria-expanded=true]) .jkl-input-panel__content,.jkl-input-panel__content[data-alwaysopen=true]{height:auto;padding-bottom:24px}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-input-panel:has(:checked){--background-color:var(--jkl-color-background-container-high)}.jkl-input-panel:has(label:hover){--outer-border-color:var(--jkl-color-border-separator-hover);--outer-border-thickness:0.125rem}

package/styles/shared/input-panel/shared.scss

@@ -1,74 +0,0 @@
-@use "../../core/jkl/" as jkl;
-
-.jkl-input-panel {
-    --outer-border-color: var(--jkl-color-border-input);
-    --outer-border-thickness: #{jkl.rem(1px)};
-    --padding-inline: var(--jkl-unit-20) var(--jkl-unit-30);
-    --padding-label-block: var(--jkl-unit-25);
-    --background-color: transparent;
-
-    box-shadow: inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);
-    border-radius: 4px;
-    background-color: var(--background-color);
-
-    &__input {
-        opacity: 0;
-        position: absolute;
-        top: -6px;
-    }
-
-    &__label {
-        display: grid;
-        grid-template-columns: min-content 1fr max-content;
-        align-items: center;
-        gap: jkl.rem(8px);
-        cursor: pointer;
-        padding-inline: var(--padding-inline);
-    }
-
-    &__main-label {
-        padding-block: jkl.rem(24px);
-    }
-
-    &__extra-label {
-        align-self: stretch;
-
-        > :first-child {
-            box-sizing: content-box;
-            padding-right: jkl.rem(16px);
-        }
-
-        &--text {
-            display: flex;
-            height: 100%;
-            align-items: center;
-        }
-    }
-
-    &__content {
-        height: 0;
-        overflow: hidden;
-        padding-inline: var(--padding-inline);
-
-        @include jkl.text-style("body");
-
-        &[data-alwaysopen="true"],
-        .jkl-input-panel:has([aria-expanded="true"]) & {
-            padding-bottom: 24px;
-            height: auto;
-        }
-    }
-
-    &:has(:focus-visible) {
-        @include jkl.focus-outline;
-    }
-
-    &:has(:checked) {
-        --background-color: var(--jkl-color-background-container-high);
-    }
-
-    &:has(label:hover) {
-        --outer-border-color: var(--jkl-color-border-separator-hover);
-        --outer-border-thickness: #{jkl.rem(2px)};
-    }
-}