@norges-domstoler/dds-components 14.0.0 → 14.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +11 -0
- package/dist/index.d.ts +11 -0
- package/dist/index.js +297 -254
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +224 -178
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -4
package/dist/index.mjs
CHANGED
|
@@ -3160,8 +3160,7 @@ import {
|
|
|
3160
3160
|
import { jsx as jsx168 } from "react/jsx-runtime";
|
|
3161
3161
|
var AppShellContext = createContext({
|
|
3162
3162
|
isOpen: false,
|
|
3163
|
-
setOpen: () =>
|
|
3164
|
-
}
|
|
3163
|
+
setOpen: () => null
|
|
3165
3164
|
});
|
|
3166
3165
|
var AppShellContextProvider = ({
|
|
3167
3166
|
children
|
|
@@ -6987,13 +6986,10 @@ function createEmptyChangeEvent(inputElementId) {
|
|
|
6987
6986
|
defaultPrevented: false,
|
|
6988
6987
|
eventPhase: 0,
|
|
6989
6988
|
isTrusted: false,
|
|
6990
|
-
preventDefault: () =>
|
|
6991
|
-
|
|
6992
|
-
stopPropagation: () => {
|
|
6993
|
-
},
|
|
6989
|
+
preventDefault: () => null,
|
|
6990
|
+
stopPropagation: () => null,
|
|
6994
6991
|
nativeEvent: new Event("input"),
|
|
6995
|
-
persist: () =>
|
|
6996
|
-
},
|
|
6992
|
+
persist: () => null,
|
|
6997
6993
|
type: "change",
|
|
6998
6994
|
timeStamp: Date.now(),
|
|
6999
6995
|
isDefaultPrevented: () => false,
|
|
@@ -9540,8 +9536,7 @@ var Tooltip = forwardRef45(
|
|
|
9540
9536
|
}
|
|
9541
9537
|
return () => {
|
|
9542
9538
|
if (tooltipRef.current) {
|
|
9543
|
-
window.removeEventListener("scroll", () =>
|
|
9544
|
-
});
|
|
9539
|
+
window.removeEventListener("scroll", () => null);
|
|
9545
9540
|
}
|
|
9546
9541
|
};
|
|
9547
9542
|
}, []);
|
|
@@ -10720,6 +10715,7 @@ var DateInput = forwardRef50(
|
|
|
10720
10715
|
InputDiv,
|
|
10721
10716
|
{
|
|
10722
10717
|
...fieldProps,
|
|
10718
|
+
style,
|
|
10723
10719
|
disabled,
|
|
10724
10720
|
componentSize,
|
|
10725
10721
|
ref: internalRef,
|
|
@@ -10808,8 +10804,7 @@ var { popover: popoverTokens } = calendarTokens;
|
|
|
10808
10804
|
var CalendarPopoverContext = createContext5({
|
|
10809
10805
|
anchorRef: null,
|
|
10810
10806
|
isOpen: false,
|
|
10811
|
-
onClose: () =>
|
|
10812
|
-
}
|
|
10807
|
+
onClose: () => null
|
|
10813
10808
|
});
|
|
10814
10809
|
var CalendarPopover = ({
|
|
10815
10810
|
children,
|
|
@@ -10929,9 +10924,7 @@ DatePicker.displayName = "DatePicker";
|
|
|
10929
10924
|
|
|
10930
10925
|
// src/components/date-inputs/TimePicker/TimePicker.tsx
|
|
10931
10926
|
import { forwardRef as forwardRef53, useRef as useRef22 } from "react";
|
|
10932
|
-
import {
|
|
10933
|
-
useTimeField
|
|
10934
|
-
} from "@react-aria/datepicker";
|
|
10927
|
+
import { useTimeField } from "@react-aria/datepicker";
|
|
10935
10928
|
import { useTimeFieldState } from "@react-stately/datepicker";
|
|
10936
10929
|
import styled72 from "styled-components";
|
|
10937
10930
|
import { jsx as jsx236 } from "react/jsx-runtime";
|
|
@@ -10940,7 +10933,7 @@ var TimePickerIcon = styled72(Icon)`
|
|
|
10940
10933
|
width: ${({ $componentSize }) => datePickerTokens.calendarButton[$componentSize].size};
|
|
10941
10934
|
margin-left: -1px; // To align with TextInputs icons
|
|
10942
10935
|
`;
|
|
10943
|
-
function _TimePicker({ componentSize = "medium",
|
|
10936
|
+
function _TimePicker({ componentSize = "medium", ...props }, forwardedRef) {
|
|
10944
10937
|
const ref = useRef22(null);
|
|
10945
10938
|
const state = useTimeFieldState({
|
|
10946
10939
|
...props,
|
|
@@ -11498,8 +11491,51 @@ var tabsTokens = {
|
|
|
11498
11491
|
panel
|
|
11499
11492
|
};
|
|
11500
11493
|
|
|
11494
|
+
// src/components/Tabs/TabWidthContext.tsx
|
|
11495
|
+
import {
|
|
11496
|
+
createContext as createContext7,
|
|
11497
|
+
useContext as useContext9,
|
|
11498
|
+
useLayoutEffect as useLayoutEffect3
|
|
11499
|
+
} from "react";
|
|
11500
|
+
import { jsx as jsx242 } from "react/jsx-runtime";
|
|
11501
|
+
var TabContext = createContext7(null);
|
|
11502
|
+
function TabWidthContextProvider({
|
|
11503
|
+
children,
|
|
11504
|
+
onChangeWidths
|
|
11505
|
+
}) {
|
|
11506
|
+
return /* @__PURE__ */ jsx242(
|
|
11507
|
+
TabContext.Provider,
|
|
11508
|
+
{
|
|
11509
|
+
value: {
|
|
11510
|
+
updateWidth: (index, newWidth) => {
|
|
11511
|
+
onChangeWidths((prev) => {
|
|
11512
|
+
const newValue = [...prev];
|
|
11513
|
+
newValue[index] = newWidth;
|
|
11514
|
+
return newValue;
|
|
11515
|
+
});
|
|
11516
|
+
},
|
|
11517
|
+
removeTab: (index) => {
|
|
11518
|
+
onChangeWidths((prev) => {
|
|
11519
|
+
const newValue = [...prev];
|
|
11520
|
+
newValue.splice(index, 1);
|
|
11521
|
+
return newValue;
|
|
11522
|
+
});
|
|
11523
|
+
}
|
|
11524
|
+
},
|
|
11525
|
+
children
|
|
11526
|
+
}
|
|
11527
|
+
);
|
|
11528
|
+
}
|
|
11529
|
+
function useSetTabWidth(index, width) {
|
|
11530
|
+
const context = useContext9(TabContext);
|
|
11531
|
+
useLayoutEffect3(() => {
|
|
11532
|
+
context == null ? void 0 : context.updateWidth(index, width);
|
|
11533
|
+
return () => context == null ? void 0 : context.removeTab(index);
|
|
11534
|
+
}, [index, width]);
|
|
11535
|
+
}
|
|
11536
|
+
|
|
11501
11537
|
// src/components/Tabs/Tab.tsx
|
|
11502
|
-
import { jsx as
|
|
11538
|
+
import { jsx as jsx243, jsxs as jsxs59 } from "react/jsx-runtime";
|
|
11503
11539
|
var { tab: tab2 } = tabsTokens;
|
|
11504
11540
|
var Button2 = styled77.button`
|
|
11505
11541
|
${normalizeButton}
|
|
@@ -11557,8 +11593,10 @@ var Tab = forwardRef57((props, ref) => {
|
|
|
11557
11593
|
id,
|
|
11558
11594
|
className,
|
|
11559
11595
|
htmlProps,
|
|
11596
|
+
width = "1fr",
|
|
11560
11597
|
...rest
|
|
11561
11598
|
} = props;
|
|
11599
|
+
useSetTabWidth(index, width);
|
|
11562
11600
|
const itemRef = useRef25(null);
|
|
11563
11601
|
const combinedRef = useCombinedRef(ref, itemRef);
|
|
11564
11602
|
const { tabPanelsRef, setHasTabFocus, tabContentDirection } = useTabsContext();
|
|
@@ -11600,8 +11638,8 @@ var Tab = forwardRef57((props, ref) => {
|
|
|
11600
11638
|
onKeyDown: handleOnKeyDown,
|
|
11601
11639
|
tabIndex: focus ? 0 : -1,
|
|
11602
11640
|
children: [
|
|
11603
|
-
icon12 && /* @__PURE__ */
|
|
11604
|
-
/* @__PURE__ */
|
|
11641
|
+
icon12 && /* @__PURE__ */ jsx243(Icon, { icon: icon12, iconSize: "inherit" }),
|
|
11642
|
+
/* @__PURE__ */ jsx243("span", { children })
|
|
11605
11643
|
]
|
|
11606
11644
|
}
|
|
11607
11645
|
);
|
|
@@ -11613,16 +11651,23 @@ import {
|
|
|
11613
11651
|
forwardRef as forwardRef58,
|
|
11614
11652
|
Children as Children4,
|
|
11615
11653
|
isValidElement as isValidElement6,
|
|
11616
|
-
cloneElement as cloneElement6
|
|
11654
|
+
cloneElement as cloneElement6,
|
|
11655
|
+
useState as useState24
|
|
11617
11656
|
} from "react";
|
|
11618
|
-
import styled78 from "styled-components";
|
|
11619
|
-
import { jsx as
|
|
11657
|
+
import styled78, { css as css39 } from "styled-components";
|
|
11658
|
+
import { jsx as jsx244 } from "react/jsx-runtime";
|
|
11620
11659
|
var { tabList: tabList2 } = tabsTokens;
|
|
11660
|
+
var autoFlow = css39`
|
|
11661
|
+
grid-auto-flow: column;
|
|
11662
|
+
grid-auto-columns: 1fr;
|
|
11663
|
+
`;
|
|
11664
|
+
var templateColumns = (templateColumns2) => css39`
|
|
11665
|
+
grid-template-columns: ${templateColumns2};
|
|
11666
|
+
`;
|
|
11621
11667
|
var TabRow = styled78.div`
|
|
11622
11668
|
border-bottom: ${tabList2.borderBottom};
|
|
11623
11669
|
display: grid;
|
|
11624
|
-
|
|
11625
|
-
grid-auto-columns: 1fr;
|
|
11670
|
+
${({ $gridTemplateColumns }) => $gridTemplateColumns === "" ? autoFlow : templateColumns($gridTemplateColumns)}
|
|
11626
11671
|
overflow-x: auto;
|
|
11627
11672
|
${scrollbarStyling.webkit}
|
|
11628
11673
|
${scrollbarStyling.firefox}
|
|
@@ -11664,6 +11709,7 @@ var TabList = forwardRef58(
|
|
|
11664
11709
|
onClick: () => handleTabChange(index)
|
|
11665
11710
|
});
|
|
11666
11711
|
});
|
|
11712
|
+
const [widths, setWidths] = useState24([]);
|
|
11667
11713
|
useOnKeyDown("Tab", () => {
|
|
11668
11714
|
var _a;
|
|
11669
11715
|
setHasTabFocus(false);
|
|
@@ -11685,15 +11731,15 @@ var TabList = forwardRef58(
|
|
|
11685
11731
|
tabIndex: 0,
|
|
11686
11732
|
onFocus: handleOnFocus
|
|
11687
11733
|
};
|
|
11688
|
-
return /* @__PURE__ */
|
|
11734
|
+
return /* @__PURE__ */ jsx244(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ jsx244(TabRow, { ...tabListProps, $gridTemplateColumns: widths.join(" "), children: tabListChildren }) });
|
|
11689
11735
|
}
|
|
11690
11736
|
);
|
|
11691
11737
|
TabList.displayName = "TabList";
|
|
11692
11738
|
|
|
11693
11739
|
// src/components/Tabs/TabPanel.tsx
|
|
11694
11740
|
import { forwardRef as forwardRef59 } from "react";
|
|
11695
|
-
import styled79, { css as
|
|
11696
|
-
import { jsx as
|
|
11741
|
+
import styled79, { css as css40 } from "styled-components";
|
|
11742
|
+
import { jsx as jsx245 } from "react/jsx-runtime";
|
|
11697
11743
|
var { panel: panel2 } = tabsTokens;
|
|
11698
11744
|
var Panel = styled79.div`
|
|
11699
11745
|
padding: ${panel2.padding};
|
|
@@ -11701,7 +11747,7 @@ var Panel = styled79.div`
|
|
|
11701
11747
|
transition: ${focusVisibleTransitionValue};
|
|
11702
11748
|
}
|
|
11703
11749
|
|
|
11704
|
-
${({ $active }) => !$active &&
|
|
11750
|
+
${({ $active }) => !$active && css40`
|
|
11705
11751
|
display: none;
|
|
11706
11752
|
`}
|
|
11707
11753
|
&:focus-visible {
|
|
@@ -11710,7 +11756,7 @@ var Panel = styled79.div`
|
|
|
11710
11756
|
`;
|
|
11711
11757
|
var TabPanel = forwardRef59(
|
|
11712
11758
|
({ active = false, children, id, className, htmlProps, ...rest }, ref) => {
|
|
11713
|
-
return /* @__PURE__ */
|
|
11759
|
+
return /* @__PURE__ */ jsx245(
|
|
11714
11760
|
Panel,
|
|
11715
11761
|
{
|
|
11716
11762
|
...getBaseHTMLProps(id, className, htmlProps, rest),
|
|
@@ -11732,7 +11778,7 @@ import {
|
|
|
11732
11778
|
cloneElement as cloneElement7,
|
|
11733
11779
|
isValidElement as isValidElement7
|
|
11734
11780
|
} from "react";
|
|
11735
|
-
import { jsx as
|
|
11781
|
+
import { jsx as jsx246 } from "react/jsx-runtime";
|
|
11736
11782
|
var TabPanels = forwardRef60(
|
|
11737
11783
|
({ children, ...rest }, ref) => {
|
|
11738
11784
|
const { activeTab, tabsId, tabPanelsRef } = useTabsContext();
|
|
@@ -11746,14 +11792,14 @@ var TabPanels = forwardRef60(
|
|
|
11746
11792
|
"aria-expanded": active
|
|
11747
11793
|
});
|
|
11748
11794
|
});
|
|
11749
|
-
return /* @__PURE__ */
|
|
11795
|
+
return /* @__PURE__ */ jsx246("div", { ref: combinedRef, ...rest, children: panelChildren });
|
|
11750
11796
|
}
|
|
11751
11797
|
);
|
|
11752
11798
|
TabPanels.displayName = "TabPanels";
|
|
11753
11799
|
|
|
11754
11800
|
// src/components/Tag/Tag.tsx
|
|
11755
11801
|
import { forwardRef as forwardRef61 } from "react";
|
|
11756
|
-
import styled80, { css as
|
|
11802
|
+
import styled80, { css as css41 } from "styled-components";
|
|
11757
11803
|
|
|
11758
11804
|
// src/components/Tag/Tag.tokens.tsx
|
|
11759
11805
|
import { ddsBaseTokens as ddsBaseTokens48 } from "@norges-domstoler/dds-design-tokens";
|
|
@@ -11779,7 +11825,7 @@ var tagTokens = {
|
|
|
11779
11825
|
};
|
|
11780
11826
|
|
|
11781
11827
|
// src/components/Tag/Tag.tsx
|
|
11782
|
-
import { jsx as
|
|
11828
|
+
import { jsx as jsx247 } from "react/jsx-runtime";
|
|
11783
11829
|
var { wrapper: wrapper8 } = tagTokens;
|
|
11784
11830
|
var Wrapper7 = styled80(TextOverflowEllipsisWrapper)`
|
|
11785
11831
|
display: inline-flex;
|
|
@@ -11788,7 +11834,7 @@ var Wrapper7 = styled80(TextOverflowEllipsisWrapper)`
|
|
|
11788
11834
|
border-radius: ${wrapper8.borderRadius};
|
|
11789
11835
|
padding: ${wrapper8.padding};
|
|
11790
11836
|
${getFontStyling(typographyType5)}
|
|
11791
|
-
${({ $purpose }) =>
|
|
11837
|
+
${({ $purpose }) => css41`
|
|
11792
11838
|
background-color: ${wrapper8.purpose[$purpose].backgroundColor};
|
|
11793
11839
|
border-color: ${wrapper8.purpose[$purpose].borderColor};
|
|
11794
11840
|
`}
|
|
@@ -11802,20 +11848,20 @@ var Tag = forwardRef61((props, ref) => {
|
|
|
11802
11848
|
htmlProps,
|
|
11803
11849
|
...rest
|
|
11804
11850
|
} = props;
|
|
11805
|
-
return /* @__PURE__ */
|
|
11851
|
+
return /* @__PURE__ */ jsx247(
|
|
11806
11852
|
Wrapper7,
|
|
11807
11853
|
{
|
|
11808
11854
|
...getBaseHTMLProps(id, className, htmlProps, rest),
|
|
11809
11855
|
ref,
|
|
11810
11856
|
$purpose: purpose,
|
|
11811
|
-
children: /* @__PURE__ */
|
|
11857
|
+
children: /* @__PURE__ */ jsx247(TextOverflowEllipsisInner, { children: text })
|
|
11812
11858
|
}
|
|
11813
11859
|
);
|
|
11814
11860
|
});
|
|
11815
11861
|
Tag.displayName = "Tag";
|
|
11816
11862
|
|
|
11817
11863
|
// src/components/Chip/Chip.tsx
|
|
11818
|
-
import { forwardRef as forwardRef62, useState as
|
|
11864
|
+
import { forwardRef as forwardRef62, useState as useState25 } from "react";
|
|
11819
11865
|
import styled81 from "styled-components";
|
|
11820
11866
|
|
|
11821
11867
|
// src/components/Chip/Chip.tokens.tsx
|
|
@@ -11838,7 +11884,7 @@ var chipTokens = {
|
|
|
11838
11884
|
};
|
|
11839
11885
|
|
|
11840
11886
|
// src/components/Chip/Chip.tsx
|
|
11841
|
-
import { jsx as
|
|
11887
|
+
import { jsx as jsx248, jsxs as jsxs60 } from "react/jsx-runtime";
|
|
11842
11888
|
var { container: container17 } = chipTokens;
|
|
11843
11889
|
var Container15 = styled81(TextOverflowEllipsisWrapper)`
|
|
11844
11890
|
display: flex;
|
|
@@ -11854,7 +11900,7 @@ var Container15 = styled81(TextOverflowEllipsisWrapper)`
|
|
|
11854
11900
|
var Chip = forwardRef62((props, ref) => {
|
|
11855
11901
|
const { text, onClose, id, className, htmlProps = {}, ...rest } = props;
|
|
11856
11902
|
const { "aria-label": ariaLabel, ...restHTMLprops } = htmlProps;
|
|
11857
|
-
const [isOpen, setIsOpen] =
|
|
11903
|
+
const [isOpen, setIsOpen] = useState25(true);
|
|
11858
11904
|
const onClick = () => {
|
|
11859
11905
|
setIsOpen(false);
|
|
11860
11906
|
onClose && onClose();
|
|
@@ -11866,8 +11912,8 @@ var Chip = forwardRef62((props, ref) => {
|
|
|
11866
11912
|
ref,
|
|
11867
11913
|
as: "div",
|
|
11868
11914
|
children: [
|
|
11869
|
-
/* @__PURE__ */
|
|
11870
|
-
/* @__PURE__ */
|
|
11915
|
+
/* @__PURE__ */ jsx248(TextOverflowEllipsisInner, { children: text }),
|
|
11916
|
+
/* @__PURE__ */ jsx248(
|
|
11871
11917
|
Button,
|
|
11872
11918
|
{
|
|
11873
11919
|
size: "tiny",
|
|
@@ -11887,7 +11933,7 @@ Chip.displayName = "Chip";
|
|
|
11887
11933
|
// src/components/Chip/ChipGroup.tsx
|
|
11888
11934
|
import { forwardRef as forwardRef63, Children as Children6 } from "react";
|
|
11889
11935
|
import styled82 from "styled-components";
|
|
11890
|
-
import { jsx as
|
|
11936
|
+
import { jsx as jsx249 } from "react/jsx-runtime";
|
|
11891
11937
|
var Group2 = styled82.ul`
|
|
11892
11938
|
${removeListStyling}
|
|
11893
11939
|
display: flex;
|
|
@@ -11896,22 +11942,22 @@ var Group2 = styled82.ul`
|
|
|
11896
11942
|
var ChipGroup = forwardRef63(
|
|
11897
11943
|
({ children, ...rest }, ref) => {
|
|
11898
11944
|
const childrenArray = Children6.toArray(children);
|
|
11899
|
-
const groupChildren = childrenArray.map((item, index) => /* @__PURE__ */
|
|
11900
|
-
return /* @__PURE__ */
|
|
11945
|
+
const groupChildren = childrenArray.map((item, index) => /* @__PURE__ */ jsx249("li", { children: item }, `chip-${index}`));
|
|
11946
|
+
return /* @__PURE__ */ jsx249(Group2, { ...rest, ref, children: groupChildren });
|
|
11901
11947
|
}
|
|
11902
11948
|
);
|
|
11903
11949
|
ChipGroup.displayName = "ChipGroup";
|
|
11904
11950
|
|
|
11905
11951
|
// src/components/ToggleBar/ToggleBar.tsx
|
|
11906
|
-
import { useState as
|
|
11907
|
-
import styled83, { css as
|
|
11952
|
+
import { useState as useState26, useId as useId21 } from "react";
|
|
11953
|
+
import styled83, { css as css42 } from "styled-components";
|
|
11908
11954
|
|
|
11909
11955
|
// src/components/ToggleBar/ToggleBar.context.tsx
|
|
11910
|
-
import { createContext as
|
|
11911
|
-
var ToggleBarContext =
|
|
11956
|
+
import { createContext as createContext8, useContext as useContext10 } from "react";
|
|
11957
|
+
var ToggleBarContext = createContext8({
|
|
11912
11958
|
size: "medium"
|
|
11913
11959
|
});
|
|
11914
|
-
var useToggleBarContext = () =>
|
|
11960
|
+
var useToggleBarContext = () => useContext10(ToggleBarContext);
|
|
11915
11961
|
|
|
11916
11962
|
// src/components/ToggleBar/ToggleBar.tokens.tsx
|
|
11917
11963
|
import { ddsBaseTokens as ddsBaseTokens50 } from "@norges-domstoler/dds-design-tokens";
|
|
@@ -12020,7 +12066,7 @@ var toggleBarTokens = {
|
|
|
12020
12066
|
};
|
|
12021
12067
|
|
|
12022
12068
|
// src/components/ToggleBar/ToggleBar.tsx
|
|
12023
|
-
import { jsx as
|
|
12069
|
+
import { jsx as jsx250, jsxs as jsxs61 } from "react/jsx-runtime";
|
|
12024
12070
|
var OuterContainer4 = styled83.div`
|
|
12025
12071
|
display: flex;
|
|
12026
12072
|
flex-direction: column;
|
|
@@ -12029,7 +12075,7 @@ var OuterContainer4 = styled83.div`
|
|
|
12029
12075
|
*::selection {
|
|
12030
12076
|
${selection}
|
|
12031
12077
|
}
|
|
12032
|
-
${({ $width }) => $width &&
|
|
12078
|
+
${({ $width }) => $width && css42`
|
|
12033
12079
|
width: ${$width};
|
|
12034
12080
|
`}
|
|
12035
12081
|
`;
|
|
@@ -12054,13 +12100,13 @@ var ToggleBar = (props) => {
|
|
|
12054
12100
|
} = props;
|
|
12055
12101
|
const generatedId = useId21();
|
|
12056
12102
|
const uniqueId = id != null ? id : `${generatedId}-ToggleBar`;
|
|
12057
|
-
const [groupValue, setGroupValue] =
|
|
12103
|
+
const [groupValue, setGroupValue] = useState26(value);
|
|
12058
12104
|
const handleChange = combineHandlers(
|
|
12059
12105
|
(e) => setGroupValue(e.target.value),
|
|
12060
12106
|
(e) => onChange && onChange(e, e.target.value)
|
|
12061
12107
|
);
|
|
12062
12108
|
const labelId = label3 && `${uniqueId}-label`;
|
|
12063
|
-
return /* @__PURE__ */
|
|
12109
|
+
return /* @__PURE__ */ jsx250(
|
|
12064
12110
|
ToggleBarContext.Provider,
|
|
12065
12111
|
{
|
|
12066
12112
|
value: {
|
|
@@ -12077,8 +12123,8 @@ var ToggleBar = (props) => {
|
|
|
12077
12123
|
"aria-labelledby": labelId != null ? labelId : htmlProps == null ? void 0 : htmlProps["aria-labelledby"],
|
|
12078
12124
|
$width: width,
|
|
12079
12125
|
children: [
|
|
12080
|
-
label3 && /* @__PURE__ */
|
|
12081
|
-
/* @__PURE__ */
|
|
12126
|
+
label3 && /* @__PURE__ */ jsx250(Typography, { typographyType: "supportingStyleLabel01", id: labelId, children: label3 }),
|
|
12127
|
+
/* @__PURE__ */ jsx250(Bar2, { children })
|
|
12082
12128
|
]
|
|
12083
12129
|
}
|
|
12084
12130
|
)
|
|
@@ -12091,7 +12137,7 @@ ToggleBar.displayName = "ToggleBar";
|
|
|
12091
12137
|
import { forwardRef as forwardRef64, useId as useId22 } from "react";
|
|
12092
12138
|
|
|
12093
12139
|
// src/components/ToggleBar/ToggleRadio.styles.tsx
|
|
12094
|
-
import styled84, { css as
|
|
12140
|
+
import styled84, { css as css43 } from "styled-components";
|
|
12095
12141
|
var { content: content6, label: label2 } = toggleBarTokens;
|
|
12096
12142
|
var Content3 = styled84.span`
|
|
12097
12143
|
display: flex;
|
|
@@ -12111,11 +12157,11 @@ var Content3 = styled84.span`
|
|
|
12111
12157
|
}
|
|
12112
12158
|
background-color: ${content6.base.backgroundColor};
|
|
12113
12159
|
|
|
12114
|
-
${({ $size, $justIcon }) =>
|
|
12115
|
-
${$justIcon ?
|
|
12160
|
+
${({ $size, $justIcon }) => css43`
|
|
12161
|
+
${$justIcon ? css43`
|
|
12116
12162
|
font-size: ${content6.size[$size].justIcon.fontSize};
|
|
12117
12163
|
padding: ${content6.size[$size].justIcon.padding};
|
|
12118
|
-
` :
|
|
12164
|
+
` : css43`
|
|
12119
12165
|
gap: ${content6.size[$size].withText.gap};
|
|
12120
12166
|
padding: ${content6.size[$size].withText.padding};
|
|
12121
12167
|
${getFontStyling(typographyTypes6[$size])}
|
|
@@ -12160,7 +12206,7 @@ var Label3 = styled84.label`
|
|
|
12160
12206
|
`;
|
|
12161
12207
|
|
|
12162
12208
|
// src/components/ToggleBar/ToggleRadio.tsx
|
|
12163
|
-
import { jsx as
|
|
12209
|
+
import { jsx as jsx251, jsxs as jsxs62 } from "react/jsx-runtime";
|
|
12164
12210
|
var calculateChecked = (value, group4, checked) => {
|
|
12165
12211
|
if (typeof checked !== "undefined")
|
|
12166
12212
|
return checked;
|
|
@@ -12194,7 +12240,7 @@ var ToggleRadio = forwardRef64(
|
|
|
12194
12240
|
(group4 == null ? void 0 : group4.onChange) && group4.onChange(event);
|
|
12195
12241
|
};
|
|
12196
12242
|
return /* @__PURE__ */ jsxs62(Label3, { size: group4.size, htmlFor: uniqueId, children: [
|
|
12197
|
-
/* @__PURE__ */
|
|
12243
|
+
/* @__PURE__ */ jsx251(
|
|
12198
12244
|
HiddenInput,
|
|
12199
12245
|
{
|
|
12200
12246
|
...getBaseHTMLProps(uniqueId, className, htmlProps, rest),
|
|
@@ -12207,8 +12253,8 @@ var ToggleRadio = forwardRef64(
|
|
|
12207
12253
|
}
|
|
12208
12254
|
),
|
|
12209
12255
|
/* @__PURE__ */ jsxs62(Content3, { $size: group4.size, $justIcon: !!icon12 && !label3, children: [
|
|
12210
|
-
icon12 && /* @__PURE__ */
|
|
12211
|
-
label3 && /* @__PURE__ */
|
|
12256
|
+
icon12 && /* @__PURE__ */ jsx251(Icon, { icon: icon12, iconSize: "inherit" }),
|
|
12257
|
+
label3 && /* @__PURE__ */ jsx251("span", { children: label3 })
|
|
12212
12258
|
] })
|
|
12213
12259
|
] });
|
|
12214
12260
|
}
|
|
@@ -12216,7 +12262,7 @@ var ToggleRadio = forwardRef64(
|
|
|
12216
12262
|
ToggleRadio.displayName = "ToggleRadio";
|
|
12217
12263
|
|
|
12218
12264
|
// src/components/Grid/Grid.tsx
|
|
12219
|
-
import styled85, { css as
|
|
12265
|
+
import styled85, { css as css44 } from "styled-components";
|
|
12220
12266
|
|
|
12221
12267
|
// src/components/Grid/Grid.tokens.tsx
|
|
12222
12268
|
import { ddsBaseTokens as ddsBaseTokens51 } from "@norges-domstoler/dds-design-tokens";
|
|
@@ -12313,16 +12359,16 @@ var gridTokens2 = {
|
|
|
12313
12359
|
};
|
|
12314
12360
|
|
|
12315
12361
|
// src/components/Grid/Grid.context.tsx
|
|
12316
|
-
import { useContext as
|
|
12317
|
-
var GridContext =
|
|
12362
|
+
import { useContext as useContext11, createContext as createContext9 } from "react";
|
|
12363
|
+
var GridContext = createContext9({
|
|
12318
12364
|
screenSize: 3 /* Large */
|
|
12319
12365
|
});
|
|
12320
12366
|
var useGridContext = () => {
|
|
12321
|
-
return
|
|
12367
|
+
return useContext11(GridContext);
|
|
12322
12368
|
};
|
|
12323
12369
|
|
|
12324
12370
|
// src/components/Grid/Grid.tsx
|
|
12325
|
-
import { jsx as
|
|
12371
|
+
import { jsx as jsx252 } from "react/jsx-runtime";
|
|
12326
12372
|
var getHooksGridStyling = (screenSize, maxWidth, rowGap) => {
|
|
12327
12373
|
const tokens3 = gridTokens2[screenSize].grid;
|
|
12328
12374
|
return {
|
|
@@ -12345,7 +12391,7 @@ var StyledGrid = styled85.div.withConfig({
|
|
|
12345
12391
|
}
|
|
12346
12392
|
})`
|
|
12347
12393
|
display: grid;
|
|
12348
|
-
${({ maxWidth }) =>
|
|
12394
|
+
${({ maxWidth }) => css44`
|
|
12349
12395
|
max-width: ${maxWidth};
|
|
12350
12396
|
`}
|
|
12351
12397
|
${({ screenSize, maxWidth, rowGap }) => getHooksGridStyling(screenSize, maxWidth, rowGap)}
|
|
@@ -12353,14 +12399,14 @@ var StyledGrid = styled85.div.withConfig({
|
|
|
12353
12399
|
var Grid = (props) => {
|
|
12354
12400
|
const { id, className, children, htmlProps, as, ...rest } = props;
|
|
12355
12401
|
const screenSize = useScreenSize();
|
|
12356
|
-
return /* @__PURE__ */
|
|
12402
|
+
return /* @__PURE__ */ jsx252(GridContext.Provider, { value: { screenSize }, children: as === "div" ? /* @__PURE__ */ jsx252(
|
|
12357
12403
|
StyledGrid,
|
|
12358
12404
|
{
|
|
12359
12405
|
...getBaseHTMLProps(id, className, htmlProps, rest),
|
|
12360
12406
|
screenSize,
|
|
12361
12407
|
children
|
|
12362
12408
|
}
|
|
12363
|
-
) : /* @__PURE__ */
|
|
12409
|
+
) : /* @__PURE__ */ jsx252(
|
|
12364
12410
|
StyledGrid,
|
|
12365
12411
|
{
|
|
12366
12412
|
...getBaseHTMLProps(id, className, htmlProps, rest),
|
|
@@ -12374,7 +12420,7 @@ Grid.displayName = "Grid";
|
|
|
12374
12420
|
|
|
12375
12421
|
// src/components/Grid/GridChild.tsx
|
|
12376
12422
|
import styled86 from "styled-components";
|
|
12377
|
-
import { jsx as
|
|
12423
|
+
import { jsx as jsx253 } from "react/jsx-runtime";
|
|
12378
12424
|
var isRelativeGridColumn = (type) => {
|
|
12379
12425
|
return type === "all" || type === "firstHalf" || type === "secondHalf";
|
|
12380
12426
|
};
|
|
@@ -12400,7 +12446,7 @@ var StyledGridChild = styled86.div.withConfig({
|
|
|
12400
12446
|
var GridChild = (props) => {
|
|
12401
12447
|
const { id, className, htmlProps, children, ...rest } = props;
|
|
12402
12448
|
const { screenSize } = useGridContext();
|
|
12403
|
-
return /* @__PURE__ */
|
|
12449
|
+
return /* @__PURE__ */ jsx253(
|
|
12404
12450
|
StyledGridChild,
|
|
12405
12451
|
{
|
|
12406
12452
|
...getBaseHTMLProps(id, className, htmlProps, rest),
|
|
@@ -12419,19 +12465,19 @@ import {
|
|
|
12419
12465
|
Fragment as Fragment11,
|
|
12420
12466
|
isValidElement as isValidElement8,
|
|
12421
12467
|
useEffect as useEffect24,
|
|
12422
|
-
useState as
|
|
12468
|
+
useState as useState27,
|
|
12423
12469
|
useMemo as useMemo2
|
|
12424
12470
|
} from "react";
|
|
12425
12471
|
import styled88 from "styled-components";
|
|
12426
12472
|
|
|
12427
12473
|
// src/components/ProgressTracker/ProgressTracker.context.tsx
|
|
12428
|
-
import { createContext as
|
|
12429
|
-
var ProgressTrackerContext =
|
|
12474
|
+
import { createContext as createContext10, useContext as useContext12 } from "react";
|
|
12475
|
+
var ProgressTrackerContext = createContext10(
|
|
12430
12476
|
{
|
|
12431
12477
|
activeStep: 0
|
|
12432
12478
|
}
|
|
12433
12479
|
);
|
|
12434
|
-
var useProgressTrackerContext = () =>
|
|
12480
|
+
var useProgressTrackerContext = () => useContext12(ProgressTrackerContext);
|
|
12435
12481
|
|
|
12436
12482
|
// src/components/ProgressTracker/ProgressTracker.tokens.tsx
|
|
12437
12483
|
import { ddsBaseTokens as ddsBaseTokens52 } from "@norges-domstoler/dds-design-tokens";
|
|
@@ -12514,8 +12560,8 @@ var progressTrackerTokens = {
|
|
|
12514
12560
|
|
|
12515
12561
|
// src/components/ProgressTracker/ProgressTrackerItem.tsx
|
|
12516
12562
|
import { useMemo } from "react";
|
|
12517
|
-
import styled87, { css as
|
|
12518
|
-
import { jsx as
|
|
12563
|
+
import styled87, { css as css45 } from "styled-components";
|
|
12564
|
+
import { jsx as jsx254, jsxs as jsxs63 } from "react/jsx-runtime";
|
|
12519
12565
|
var toItemState = (active, completed, disabled) => {
|
|
12520
12566
|
if (disabled) {
|
|
12521
12567
|
return "disabled";
|
|
@@ -12552,31 +12598,31 @@ var ItemNumber = styled87.div`
|
|
|
12552
12598
|
${({ $state: state }) => {
|
|
12553
12599
|
switch (state) {
|
|
12554
12600
|
case "activeIncomplete":
|
|
12555
|
-
return
|
|
12601
|
+
return css45`
|
|
12556
12602
|
border-color: ${itemNumber2.active.borderColor};
|
|
12557
12603
|
color: ${itemNumber2.active.color};
|
|
12558
12604
|
background-color: ${itemNumber2.active.backgroundColor};
|
|
12559
12605
|
`;
|
|
12560
12606
|
case "activeCompleted":
|
|
12561
|
-
return
|
|
12607
|
+
return css45`
|
|
12562
12608
|
border-color: ${itemNumber2.completed.borderColor};
|
|
12563
12609
|
color: ${itemNumber2.completed.color};
|
|
12564
12610
|
background-color: ${itemNumber2.completed.backgroundColor};
|
|
12565
12611
|
`;
|
|
12566
12612
|
case "inactiveCompleted":
|
|
12567
|
-
return
|
|
12613
|
+
return css45`
|
|
12568
12614
|
border-color: ${itemNumber2.completed.borderColor};
|
|
12569
12615
|
color: ${itemNumber2.completed.color};
|
|
12570
12616
|
background-color: ${itemNumber2.completed.backgroundColor};
|
|
12571
12617
|
`;
|
|
12572
12618
|
case "inactiveIncomplete":
|
|
12573
|
-
return
|
|
12619
|
+
return css45`
|
|
12574
12620
|
border-color: ${itemNumber2.inactive.borderColor};
|
|
12575
12621
|
color: ${itemNumber2.inactive.color};
|
|
12576
12622
|
background-color: ${itemNumber2.inactive.backgroundColor};
|
|
12577
12623
|
`;
|
|
12578
12624
|
case "disabled":
|
|
12579
|
-
return
|
|
12625
|
+
return css45`
|
|
12580
12626
|
border-color: ${itemNumber2.disabled.borderColor};
|
|
12581
12627
|
color: ${itemNumber2.disabled.color};
|
|
12582
12628
|
background-color: ${itemNumber2.disabled.backgroundColor};
|
|
@@ -12594,18 +12640,18 @@ var ItemText = styled87.div`
|
|
|
12594
12640
|
switch (state) {
|
|
12595
12641
|
case "activeCompleted":
|
|
12596
12642
|
case "activeIncomplete":
|
|
12597
|
-
return
|
|
12643
|
+
return css45`
|
|
12598
12644
|
color: ${itemText2.active.color};
|
|
12599
12645
|
text-decoration-color: ${itemText2.active.textDecorationColor};
|
|
12600
12646
|
`;
|
|
12601
12647
|
case "inactiveCompleted":
|
|
12602
12648
|
case "inactiveIncomplete":
|
|
12603
|
-
return
|
|
12649
|
+
return css45`
|
|
12604
12650
|
color: ${itemText2.inactive.color};
|
|
12605
12651
|
text-decoration-color: ${itemText2.inactive.textDecorationColor};
|
|
12606
12652
|
`;
|
|
12607
12653
|
case "disabled":
|
|
12608
|
-
return
|
|
12654
|
+
return css45`
|
|
12609
12655
|
color: ${itemText2.disabled.color};
|
|
12610
12656
|
text-decoration: ${itemText2.disabled.textDecoration};
|
|
12611
12657
|
`;
|
|
@@ -12629,7 +12675,7 @@ var ItemContentWrapper = styled87.button`
|
|
|
12629
12675
|
${focusVisible}
|
|
12630
12676
|
}
|
|
12631
12677
|
|
|
12632
|
-
${({ $state: state }) => state !== "disabled" &&
|
|
12678
|
+
${({ $state: state }) => state !== "disabled" && css45`
|
|
12633
12679
|
cursor: pointer;
|
|
12634
12680
|
`}
|
|
12635
12681
|
`;
|
|
@@ -12649,14 +12695,14 @@ var ProgressTrackerItem = (props) => {
|
|
|
12649
12695
|
};
|
|
12650
12696
|
const stepNumberContent = useMemo(() => {
|
|
12651
12697
|
if (completed) {
|
|
12652
|
-
return /* @__PURE__ */
|
|
12698
|
+
return /* @__PURE__ */ jsx254(Icon, { icon: CheckIcon, iconSize: itemNumber2.iconSize });
|
|
12653
12699
|
}
|
|
12654
12700
|
if (icon12 !== void 0) {
|
|
12655
|
-
return /* @__PURE__ */
|
|
12701
|
+
return /* @__PURE__ */ jsx254(Icon, { icon: icon12, iconSize: itemNumber2.iconSize });
|
|
12656
12702
|
}
|
|
12657
12703
|
return index + 1;
|
|
12658
12704
|
}, [completed, icon12, index]);
|
|
12659
|
-
return /* @__PURE__ */
|
|
12705
|
+
return /* @__PURE__ */ jsx254(ItemWrapper, { "aria-current": active ? "step" : void 0, children: /* @__PURE__ */ jsxs63(
|
|
12660
12706
|
ItemContentWrapper,
|
|
12661
12707
|
{
|
|
12662
12708
|
...styleProps,
|
|
@@ -12664,9 +12710,9 @@ var ProgressTrackerItem = (props) => {
|
|
|
12664
12710
|
onClick: !disabled && handleStepChange ? () => handleStepChange(index) : void 0,
|
|
12665
12711
|
disabled,
|
|
12666
12712
|
children: [
|
|
12667
|
-
/* @__PURE__ */
|
|
12713
|
+
/* @__PURE__ */ jsx254(ItemNumber, { ...styleProps, "aria-hidden": true, children: stepNumberContent }),
|
|
12668
12714
|
/* @__PURE__ */ jsxs63(ItemText, { ...styleProps, children: [
|
|
12669
|
-
/* @__PURE__ */
|
|
12715
|
+
/* @__PURE__ */ jsx254(VisuallyHidden, { as: "span", children: getVisuallyHiddenText(active, completed, index) }),
|
|
12670
12716
|
children
|
|
12671
12717
|
] })
|
|
12672
12718
|
]
|
|
@@ -12676,7 +12722,7 @@ var ProgressTrackerItem = (props) => {
|
|
|
12676
12722
|
ProgressTrackerItem.displayName = "ProgressTracker.Item";
|
|
12677
12723
|
|
|
12678
12724
|
// src/components/ProgressTracker/ProgressTracker.tsx
|
|
12679
|
-
import { jsx as
|
|
12725
|
+
import { jsx as jsx255, jsxs as jsxs64 } from "react/jsx-runtime";
|
|
12680
12726
|
var ItemsWrapper = styled88.ol`
|
|
12681
12727
|
display: flex;
|
|
12682
12728
|
flex-direction: column;
|
|
@@ -12705,7 +12751,7 @@ var ProgressTracker = (() => {
|
|
|
12705
12751
|
htmlProps,
|
|
12706
12752
|
...rest
|
|
12707
12753
|
} = props;
|
|
12708
|
-
const [thisActiveStep, setActiveStep] =
|
|
12754
|
+
const [thisActiveStep, setActiveStep] = useState27(activeStep);
|
|
12709
12755
|
const handleChange = (step) => {
|
|
12710
12756
|
setActiveStep(step);
|
|
12711
12757
|
onStepChange && onStepChange(step);
|
|
@@ -12725,14 +12771,14 @@ var ProgressTracker = (() => {
|
|
|
12725
12771
|
const itemsWithConnectorsBetween = intersperseItemsWithConnector(itemsWithIndex);
|
|
12726
12772
|
return itemsWithConnectorsBetween;
|
|
12727
12773
|
}, [children]);
|
|
12728
|
-
return /* @__PURE__ */
|
|
12774
|
+
return /* @__PURE__ */ jsx255(
|
|
12729
12775
|
ProgressTrackerContext.Provider,
|
|
12730
12776
|
{
|
|
12731
12777
|
value: {
|
|
12732
12778
|
activeStep: thisActiveStep,
|
|
12733
12779
|
handleStepChange: handleChange
|
|
12734
12780
|
},
|
|
12735
|
-
children: /* @__PURE__ */
|
|
12781
|
+
children: /* @__PURE__ */ jsx255("div", { role: "group", "aria-label": "progress", ...containerProps, children: /* @__PURE__ */ jsx255(ItemsWrapper, { children: steps }) })
|
|
12736
12782
|
}
|
|
12737
12783
|
);
|
|
12738
12784
|
});
|
|
@@ -12757,7 +12803,7 @@ var intersperseItemsWithConnector = (children) => Children7.map(children, (child
|
|
|
12757
12803
|
return child;
|
|
12758
12804
|
}
|
|
12759
12805
|
return /* @__PURE__ */ jsxs64(Fragment11, { children: [
|
|
12760
|
-
/* @__PURE__ */
|
|
12806
|
+
/* @__PURE__ */ jsx255(ProgressTrackerConnector, { "aria-hidden": true }),
|
|
12761
12807
|
child
|
|
12762
12808
|
] }, index);
|
|
12763
12809
|
});
|
|
@@ -12767,12 +12813,12 @@ import { forwardRef as forwardRef67, useRef as useRef27 } from "react";
|
|
|
12767
12813
|
|
|
12768
12814
|
// src/components/InlineEdit/InlineEdit.tsx
|
|
12769
12815
|
import {
|
|
12770
|
-
useState as
|
|
12816
|
+
useState as useState28,
|
|
12771
12817
|
Children as Children8,
|
|
12772
12818
|
cloneElement as cloneElement9,
|
|
12773
12819
|
isValidElement as isValidElement9
|
|
12774
12820
|
} from "react";
|
|
12775
|
-
import { Fragment as Fragment12, jsx as
|
|
12821
|
+
import { Fragment as Fragment12, jsx as jsx256 } from "react/jsx-runtime";
|
|
12776
12822
|
var InlineEdit = (props) => {
|
|
12777
12823
|
const {
|
|
12778
12824
|
emptiable,
|
|
@@ -12784,8 +12830,8 @@ var InlineEdit = (props) => {
|
|
|
12784
12830
|
inputRef,
|
|
12785
12831
|
children
|
|
12786
12832
|
} = props;
|
|
12787
|
-
const [editingValue, setEditingValue] =
|
|
12788
|
-
const [isEditing, setIsEditing] =
|
|
12833
|
+
const [editingValue, setEditingValue] = useState28(value != null ? value : "");
|
|
12834
|
+
const [isEditing, setIsEditing] = useState28(false);
|
|
12789
12835
|
const onChangeHandler = (e) => {
|
|
12790
12836
|
setEditingValue(e.target.value);
|
|
12791
12837
|
onChange && onChange();
|
|
@@ -12822,7 +12868,7 @@ var InlineEdit = (props) => {
|
|
|
12822
12868
|
emptiable
|
|
12823
12869
|
})
|
|
12824
12870
|
);
|
|
12825
|
-
return /* @__PURE__ */
|
|
12871
|
+
return /* @__PURE__ */ jsx256(Fragment12, { children: inputChild });
|
|
12826
12872
|
};
|
|
12827
12873
|
InlineEdit.displayName = "InlineEdit";
|
|
12828
12874
|
|
|
@@ -12830,7 +12876,7 @@ InlineEdit.displayName = "InlineEdit";
|
|
|
12830
12876
|
import { forwardRef as forwardRef66, useId as useId23, useRef as useRef26 } from "react";
|
|
12831
12877
|
|
|
12832
12878
|
// src/components/InlineEdit/InlineEdit.styles.tsx
|
|
12833
|
-
import styled89, { css as
|
|
12879
|
+
import styled89, { css as css46 } from "styled-components";
|
|
12834
12880
|
|
|
12835
12881
|
// src/components/InlineEdit/InlineEdit.tokens.ts
|
|
12836
12882
|
import { ddsBaseTokens as ddsBaseTokens53 } from "@norges-domstoler/dds-design-tokens";
|
|
@@ -12868,7 +12914,7 @@ var StyledInlineInput = styled89(StatefulInput).withConfig({
|
|
|
12868
12914
|
background-color: ${inlineEdit2.backgroundColor};
|
|
12869
12915
|
padding: ${inlineEdit2.padding};
|
|
12870
12916
|
${inlineEdit2.font};
|
|
12871
|
-
${({ isEditing, hideIcon }) => !isEditing && !hideIcon &&
|
|
12917
|
+
${({ isEditing, hideIcon }) => !isEditing && !hideIcon && css46`
|
|
12872
12918
|
padding-left: ${inlineEdit2.withIcon.paddingLeft};
|
|
12873
12919
|
`}
|
|
12874
12920
|
|
|
@@ -12907,7 +12953,7 @@ var inlineEditVisuallyHidden = (id, emptiable) => /* @__PURE__ */ jsxs65(Visuall
|
|
|
12907
12953
|
] });
|
|
12908
12954
|
|
|
12909
12955
|
// src/components/InlineEdit/InlineTextArea.tsx
|
|
12910
|
-
import { jsx as
|
|
12956
|
+
import { jsx as jsx257, jsxs as jsxs66 } from "react/jsx-runtime";
|
|
12911
12957
|
var InlineTextArea = forwardRef66((props, ref) => {
|
|
12912
12958
|
const {
|
|
12913
12959
|
id,
|
|
@@ -12929,17 +12975,17 @@ var InlineTextArea = forwardRef66((props, ref) => {
|
|
|
12929
12975
|
const combinedRef = useCombinedRef(ref, inputRef);
|
|
12930
12976
|
return /* @__PURE__ */ jsxs66(OuterInputContainer, { width, children: [
|
|
12931
12977
|
/* @__PURE__ */ jsxs66(InputContainer, { children: [
|
|
12932
|
-
!isEditing && !hideIcon && /* @__PURE__ */
|
|
12978
|
+
!isEditing && !hideIcon && /* @__PURE__ */ jsx257(
|
|
12933
12979
|
IconWrapper2,
|
|
12934
12980
|
{
|
|
12935
12981
|
onClick: () => {
|
|
12936
12982
|
var _a;
|
|
12937
12983
|
(_a = inputRef.current) == null ? void 0 : _a.focus();
|
|
12938
12984
|
},
|
|
12939
|
-
children: /* @__PURE__ */
|
|
12985
|
+
children: /* @__PURE__ */ jsx257(Icon, { icon: EditIcon, iconSize: "small" })
|
|
12940
12986
|
}
|
|
12941
12987
|
),
|
|
12942
|
-
/* @__PURE__ */
|
|
12988
|
+
/* @__PURE__ */ jsx257(
|
|
12943
12989
|
StyledInlineTextArea,
|
|
12944
12990
|
{
|
|
12945
12991
|
...rest,
|
|
@@ -12963,12 +13009,12 @@ var InlineTextArea = forwardRef66((props, ref) => {
|
|
|
12963
13009
|
InlineTextArea.displayName = "InlineTextArea";
|
|
12964
13010
|
|
|
12965
13011
|
// src/components/InlineEdit/InlineEditTextArea.tsx
|
|
12966
|
-
import { jsx as
|
|
13012
|
+
import { jsx as jsx258 } from "react/jsx-runtime";
|
|
12967
13013
|
var InlineEditTextArea = forwardRef67((props, ref) => {
|
|
12968
13014
|
const { onSetValue, emptiable, value, onFocus, onChange, onBlur, ...rest } = props;
|
|
12969
13015
|
const textareaRef = useRef27(null);
|
|
12970
13016
|
const combinedRef = useCombinedRef(ref, textareaRef);
|
|
12971
|
-
return /* @__PURE__ */
|
|
13017
|
+
return /* @__PURE__ */ jsx258(
|
|
12972
13018
|
InlineEdit,
|
|
12973
13019
|
{
|
|
12974
13020
|
onSetValue,
|
|
@@ -12978,7 +13024,7 @@ var InlineEditTextArea = forwardRef67((props, ref) => {
|
|
|
12978
13024
|
onFocus,
|
|
12979
13025
|
onChange,
|
|
12980
13026
|
onBlur,
|
|
12981
|
-
children: /* @__PURE__ */
|
|
13027
|
+
children: /* @__PURE__ */ jsx258(InlineTextArea, { ref: combinedRef, ...rest })
|
|
12982
13028
|
}
|
|
12983
13029
|
);
|
|
12984
13030
|
});
|
|
@@ -12988,7 +13034,7 @@ import { forwardRef as forwardRef69, useRef as useRef29 } from "react";
|
|
|
12988
13034
|
|
|
12989
13035
|
// src/components/InlineEdit/InlineInput.tsx
|
|
12990
13036
|
import { forwardRef as forwardRef68, useId as useId24, useRef as useRef28 } from "react";
|
|
12991
|
-
import { jsx as
|
|
13037
|
+
import { jsx as jsx259, jsxs as jsxs67 } from "react/jsx-runtime";
|
|
12992
13038
|
var InlineInput = forwardRef68(
|
|
12993
13039
|
(props, ref) => {
|
|
12994
13040
|
const {
|
|
@@ -13013,17 +13059,17 @@ var InlineInput = forwardRef68(
|
|
|
13013
13059
|
const combinedRef = useCombinedRef(ref, inputRef);
|
|
13014
13060
|
return /* @__PURE__ */ jsxs67(OuterInputContainer, { width, children: [
|
|
13015
13061
|
/* @__PURE__ */ jsxs67(InputContainer, { children: [
|
|
13016
|
-
!isEditing && !hideIcon && /* @__PURE__ */
|
|
13062
|
+
!isEditing && !hideIcon && /* @__PURE__ */ jsx259(
|
|
13017
13063
|
IconWrapper2,
|
|
13018
13064
|
{
|
|
13019
13065
|
onClick: () => {
|
|
13020
13066
|
var _a;
|
|
13021
13067
|
(_a = inputRef.current) == null ? void 0 : _a.focus();
|
|
13022
13068
|
},
|
|
13023
|
-
children: /* @__PURE__ */
|
|
13069
|
+
children: /* @__PURE__ */ jsx259(Icon, { icon: EditIcon, iconSize: "small" })
|
|
13024
13070
|
}
|
|
13025
13071
|
),
|
|
13026
|
-
/* @__PURE__ */
|
|
13072
|
+
/* @__PURE__ */ jsx259(
|
|
13027
13073
|
StyledInlineInput,
|
|
13028
13074
|
{
|
|
13029
13075
|
...rest,
|
|
@@ -13049,12 +13095,12 @@ var InlineInput = forwardRef68(
|
|
|
13049
13095
|
InlineInput.displayName = "InlineInput";
|
|
13050
13096
|
|
|
13051
13097
|
// src/components/InlineEdit/InlineEditInput.tsx
|
|
13052
|
-
import { jsx as
|
|
13098
|
+
import { jsx as jsx260 } from "react/jsx-runtime";
|
|
13053
13099
|
var InlineEditInput = forwardRef69((props, ref) => {
|
|
13054
13100
|
const { onSetValue, emptiable, value, onFocus, onChange, onBlur, ...rest } = props;
|
|
13055
13101
|
const inputRef = useRef29(null);
|
|
13056
13102
|
const combinedRef = useCombinedRef(ref, inputRef);
|
|
13057
|
-
return /* @__PURE__ */
|
|
13103
|
+
return /* @__PURE__ */ jsx260(
|
|
13058
13104
|
InlineEdit,
|
|
13059
13105
|
{
|
|
13060
13106
|
onSetValue,
|
|
@@ -13064,13 +13110,13 @@ var InlineEditInput = forwardRef69((props, ref) => {
|
|
|
13064
13110
|
onFocus,
|
|
13065
13111
|
onChange,
|
|
13066
13112
|
onBlur,
|
|
13067
|
-
children: /* @__PURE__ */
|
|
13113
|
+
children: /* @__PURE__ */ jsx260(InlineInput, { ...rest, ref: combinedRef })
|
|
13068
13114
|
}
|
|
13069
13115
|
);
|
|
13070
13116
|
});
|
|
13071
13117
|
|
|
13072
13118
|
// src/components/TextArea/TextArea.tsx
|
|
13073
|
-
import { forwardRef as forwardRef70, useEffect as useEffect25, useId as useId25, useRef as useRef30, useState as
|
|
13119
|
+
import { forwardRef as forwardRef70, useEffect as useEffect25, useId as useId25, useRef as useRef30, useState as useState29 } from "react";
|
|
13074
13120
|
import styled90 from "styled-components";
|
|
13075
13121
|
|
|
13076
13122
|
// src/components/TextArea/TextArea.tokens.tsx
|
|
@@ -13084,7 +13130,7 @@ var textAreaTokens = {
|
|
|
13084
13130
|
};
|
|
13085
13131
|
|
|
13086
13132
|
// src/components/TextArea/TextArea.tsx
|
|
13087
|
-
import { jsx as
|
|
13133
|
+
import { jsx as jsx261, jsxs as jsxs68 } from "react/jsx-runtime";
|
|
13088
13134
|
var defaultWidth5 = "320px";
|
|
13089
13135
|
var { textarea: textarea2 } = textAreaTokens;
|
|
13090
13136
|
var StyledTextArea = styled90(StatefulInput)`
|
|
@@ -13119,7 +13165,7 @@ var TextArea = forwardRef70(
|
|
|
13119
13165
|
const uniqueId = id != null ? id : `${generatedId}-textArea`;
|
|
13120
13166
|
const textAreaRef = useRef30(null);
|
|
13121
13167
|
const multiRef = useCombinedRef(ref, textAreaRef);
|
|
13122
|
-
const [text, setText] =
|
|
13168
|
+
const [text, setText] = useState29(
|
|
13123
13169
|
getDefaultText(value, defaultValue)
|
|
13124
13170
|
);
|
|
13125
13171
|
useEffect25(() => {
|
|
@@ -13162,8 +13208,8 @@ var TextArea = forwardRef70(
|
|
|
13162
13208
|
...rest
|
|
13163
13209
|
};
|
|
13164
13210
|
return /* @__PURE__ */ jsxs68(OuterInputContainer, { ...containerProps, children: [
|
|
13165
|
-
hasLabel && /* @__PURE__ */
|
|
13166
|
-
/* @__PURE__ */
|
|
13211
|
+
hasLabel && /* @__PURE__ */ jsx261(Label, { showRequiredStyling, htmlFor: uniqueId, children: label3 }),
|
|
13212
|
+
/* @__PURE__ */ jsx261(StyledTextArea, { ...textAreaProps, as: "textarea" }),
|
|
13167
13213
|
renderInputMessage(tip, tipId, errorMessage, errorMessageId)
|
|
13168
13214
|
] });
|
|
13169
13215
|
}
|
|
@@ -13171,7 +13217,7 @@ var TextArea = forwardRef70(
|
|
|
13171
13217
|
TextArea.displayName = "TextArea";
|
|
13172
13218
|
|
|
13173
13219
|
// src/components/SplitButton/SplitButton.tsx
|
|
13174
|
-
import { forwardRef as forwardRef71, useState as
|
|
13220
|
+
import { forwardRef as forwardRef71, useState as useState30 } from "react";
|
|
13175
13221
|
import styled91 from "styled-components";
|
|
13176
13222
|
|
|
13177
13223
|
// src/components/SplitButton/SplitButton.tokens.ts
|
|
@@ -13186,7 +13232,7 @@ var tokens2 = {
|
|
|
13186
13232
|
};
|
|
13187
13233
|
|
|
13188
13234
|
// src/components/SplitButton/SplitButton.tsx
|
|
13189
|
-
import { jsx as
|
|
13235
|
+
import { jsx as jsx262, jsxs as jsxs69 } from "react/jsx-runtime";
|
|
13190
13236
|
var Container16 = styled91.div`
|
|
13191
13237
|
display: flex;
|
|
13192
13238
|
`;
|
|
@@ -13225,14 +13271,14 @@ var SplitButton = forwardRef71(
|
|
|
13225
13271
|
secondaryActions,
|
|
13226
13272
|
purpose = "primary"
|
|
13227
13273
|
} = props;
|
|
13228
|
-
const [isOpen, setIsOpen] =
|
|
13274
|
+
const [isOpen, setIsOpen] = useState30(false);
|
|
13229
13275
|
const buttonStyleProps = {
|
|
13230
13276
|
appearance: "filled",
|
|
13231
13277
|
purpose,
|
|
13232
13278
|
size: size2
|
|
13233
13279
|
};
|
|
13234
13280
|
return /* @__PURE__ */ jsxs69(Container16, { ref, children: [
|
|
13235
|
-
/* @__PURE__ */
|
|
13281
|
+
/* @__PURE__ */ jsx262(
|
|
13236
13282
|
MainButton,
|
|
13237
13283
|
{
|
|
13238
13284
|
...buttonStyleProps,
|
|
@@ -13241,7 +13287,7 @@ var SplitButton = forwardRef71(
|
|
|
13241
13287
|
}
|
|
13242
13288
|
),
|
|
13243
13289
|
/* @__PURE__ */ jsxs69(OverflowMenuGroup, { onToggle: () => setIsOpen(!isOpen), children: [
|
|
13244
|
-
/* @__PURE__ */
|
|
13290
|
+
/* @__PURE__ */ jsx262(
|
|
13245
13291
|
OptionButton,
|
|
13246
13292
|
{
|
|
13247
13293
|
...buttonStyleProps,
|
|
@@ -13250,7 +13296,7 @@ var SplitButton = forwardRef71(
|
|
|
13250
13296
|
purpose
|
|
13251
13297
|
}
|
|
13252
13298
|
),
|
|
13253
|
-
/* @__PURE__ */
|
|
13299
|
+
/* @__PURE__ */ jsx262(OverflowMenu, { items: secondaryActions, placement: "bottom-end" })
|
|
13254
13300
|
] })
|
|
13255
13301
|
] });
|
|
13256
13302
|
}
|
|
@@ -13259,7 +13305,7 @@ SplitButton.displayName = "SplitButton";
|
|
|
13259
13305
|
|
|
13260
13306
|
// src/components/Stack/Stack.tsx
|
|
13261
13307
|
import { forwardRef as forwardRef72 } from "react";
|
|
13262
|
-
import styled92, { css as
|
|
13308
|
+
import styled92, { css as css47 } from "styled-components";
|
|
13263
13309
|
|
|
13264
13310
|
// src/components/Stack/Stack.tokens.tsx
|
|
13265
13311
|
import { ddsBaseTokens as ddsBaseTokens56 } from "@norges-domstoler/dds-design-tokens";
|
|
@@ -13283,7 +13329,7 @@ var stackTokens = {
|
|
|
13283
13329
|
};
|
|
13284
13330
|
|
|
13285
13331
|
// src/components/Stack/Stack.tsx
|
|
13286
|
-
import { jsx as
|
|
13332
|
+
import { jsx as jsx263 } from "react/jsx-runtime";
|
|
13287
13333
|
var Stack = styled92.div.withConfig({
|
|
13288
13334
|
shouldForwardProp: (prop) => {
|
|
13289
13335
|
const styleOnlyProps = [
|
|
@@ -13301,11 +13347,11 @@ var Stack = styled92.div.withConfig({
|
|
|
13301
13347
|
align-items: ${(props) => props.align};
|
|
13302
13348
|
justify-content: ${(props) => props.justify};
|
|
13303
13349
|
|
|
13304
|
-
${({ gap }) => gap !== void 0 &&
|
|
13350
|
+
${({ gap }) => gap !== void 0 && css47`
|
|
13305
13351
|
gap: ${gap === 0 ? "0" : stackTokens.spacing[gap]};
|
|
13306
13352
|
`}
|
|
13307
13353
|
|
|
13308
|
-
${({ padding }) => padding !== void 0 &&
|
|
13354
|
+
${({ padding }) => padding !== void 0 && css47`
|
|
13309
13355
|
padding: ${padding === 0 ? "0" : stackTokens.spacing[padding]};
|
|
13310
13356
|
`}
|
|
13311
13357
|
`;
|
|
@@ -13314,7 +13360,7 @@ Stack.defaultProps = {
|
|
|
13314
13360
|
justify: "flex-start"
|
|
13315
13361
|
};
|
|
13316
13362
|
var HStack = forwardRef72(
|
|
13317
|
-
({ id, className, htmlProps, ...rest }, ref) => /* @__PURE__ */
|
|
13363
|
+
({ id, className, htmlProps, ...rest }, ref) => /* @__PURE__ */ jsx263(
|
|
13318
13364
|
Stack,
|
|
13319
13365
|
{
|
|
13320
13366
|
direction: "horizontal",
|
|
@@ -13325,7 +13371,7 @@ var HStack = forwardRef72(
|
|
|
13325
13371
|
);
|
|
13326
13372
|
HStack.displayName = "HStack";
|
|
13327
13373
|
var VStack = forwardRef72(
|
|
13328
|
-
({ id, className, htmlProps, ...rest }, ref) => /* @__PURE__ */
|
|
13374
|
+
({ id, className, htmlProps, ...rest }, ref) => /* @__PURE__ */ jsx263(
|
|
13329
13375
|
Stack,
|
|
13330
13376
|
{
|
|
13331
13377
|
direction: "vertical",
|
|
@@ -13373,7 +13419,7 @@ var errorsTokens = {
|
|
|
13373
13419
|
};
|
|
13374
13420
|
|
|
13375
13421
|
// src/components/FileUploader/ErrorList.tsx
|
|
13376
|
-
import { jsx as
|
|
13422
|
+
import { jsx as jsx264 } from "react/jsx-runtime";
|
|
13377
13423
|
var MessageContainer2 = styled93.div`
|
|
13378
13424
|
display: flex;
|
|
13379
13425
|
flex-direction: column;
|
|
@@ -13384,8 +13430,8 @@ var ErrorList = (props) => {
|
|
|
13384
13430
|
if (errors.length < 1) {
|
|
13385
13431
|
return null;
|
|
13386
13432
|
}
|
|
13387
|
-
return /* @__PURE__ */
|
|
13388
|
-
return /* @__PURE__ */
|
|
13433
|
+
return /* @__PURE__ */ jsx264(MessageContainer2, { children: errors.map(({ id, message: message2 }) => {
|
|
13434
|
+
return /* @__PURE__ */ jsx264(
|
|
13389
13435
|
InputMessage,
|
|
13390
13436
|
{
|
|
13391
13437
|
id,
|
|
@@ -13399,7 +13445,7 @@ var ErrorList = (props) => {
|
|
|
13399
13445
|
|
|
13400
13446
|
// src/components/FileUploader/File.tsx
|
|
13401
13447
|
import styled94 from "styled-components";
|
|
13402
|
-
import { jsx as
|
|
13448
|
+
import { jsx as jsx265, jsxs as jsxs70 } from "react/jsx-runtime";
|
|
13403
13449
|
var FileWrapper = styled94.li``;
|
|
13404
13450
|
var FileNameWrapper = styled94.span`
|
|
13405
13451
|
word-break: break-all;
|
|
@@ -13427,8 +13473,8 @@ var File = (props) => {
|
|
|
13427
13473
|
}));
|
|
13428
13474
|
return /* @__PURE__ */ jsxs70(FileWrapper, { children: [
|
|
13429
13475
|
/* @__PURE__ */ jsxs70(FileElement, { ...props, children: [
|
|
13430
|
-
/* @__PURE__ */
|
|
13431
|
-
/* @__PURE__ */
|
|
13476
|
+
/* @__PURE__ */ jsx265(FileNameWrapper, { children: stateFile.file.name }),
|
|
13477
|
+
/* @__PURE__ */ jsx265(
|
|
13432
13478
|
RemoveFileButton,
|
|
13433
13479
|
{
|
|
13434
13480
|
size: "small",
|
|
@@ -13448,7 +13494,7 @@ var File = (props) => {
|
|
|
13448
13494
|
}
|
|
13449
13495
|
)
|
|
13450
13496
|
] }),
|
|
13451
|
-
/* @__PURE__ */
|
|
13497
|
+
/* @__PURE__ */ jsx265(ErrorList, { errors: errorsList })
|
|
13452
13498
|
] }, stateFile.file.name);
|
|
13453
13499
|
};
|
|
13454
13500
|
|
|
@@ -13727,7 +13773,7 @@ var useFileUploader = (props) => {
|
|
|
13727
13773
|
};
|
|
13728
13774
|
|
|
13729
13775
|
// src/components/FileUploader/FileUploader.tsx
|
|
13730
|
-
import { jsx as
|
|
13776
|
+
import { jsx as jsx266, jsxs as jsxs71 } from "react/jsx-runtime";
|
|
13731
13777
|
var defaultWidth6 = "320px";
|
|
13732
13778
|
var Wrapper8 = styled95.div`
|
|
13733
13779
|
width: ${({ width }) => width ? width : defaultWidth6};
|
|
@@ -13787,7 +13833,7 @@ var FileUploader = (props) => {
|
|
|
13787
13833
|
const hasRootErrors = rootErrors.length > 0;
|
|
13788
13834
|
const showRequiredMarker = required;
|
|
13789
13835
|
const tipId = derivativeIdGenerator(uniqueId, "tip");
|
|
13790
|
-
const fileListElements = stateFiles.map((stateFile, index) => /* @__PURE__ */
|
|
13836
|
+
const fileListElements = stateFiles.map((stateFile, index) => /* @__PURE__ */ jsx266(
|
|
13791
13837
|
File,
|
|
13792
13838
|
{
|
|
13793
13839
|
parentId: uniqueId,
|
|
@@ -13803,8 +13849,8 @@ var FileUploader = (props) => {
|
|
|
13803
13849
|
message: e
|
|
13804
13850
|
}));
|
|
13805
13851
|
return /* @__PURE__ */ jsxs71(Wrapper8, { width, children: [
|
|
13806
|
-
hasLabel && /* @__PURE__ */
|
|
13807
|
-
hasTip && /* @__PURE__ */
|
|
13852
|
+
hasLabel && /* @__PURE__ */ jsx266(Label, { showRequiredStyling: showRequiredMarker, htmlFor: uniqueId, children: label3 }),
|
|
13853
|
+
hasTip && /* @__PURE__ */ jsx266(InputMessage, { id: tipId, message: tip, messageType: "tip" }),
|
|
13808
13854
|
/* @__PURE__ */ jsxs71(
|
|
13809
13855
|
Root,
|
|
13810
13856
|
{
|
|
@@ -13812,11 +13858,11 @@ var FileUploader = (props) => {
|
|
|
13812
13858
|
$isDragActive: isDragActive,
|
|
13813
13859
|
$hasRootErrors: hasRootErrors,
|
|
13814
13860
|
children: [
|
|
13815
|
-
/* @__PURE__ */
|
|
13861
|
+
/* @__PURE__ */ jsx266(FileUploaderInput, { ...getInputProps() }),
|
|
13816
13862
|
"Dra og slipp filer her eller",
|
|
13817
13863
|
" ",
|
|
13818
|
-
/* @__PURE__ */
|
|
13819
|
-
/* @__PURE__ */
|
|
13864
|
+
/* @__PURE__ */ jsx266(VisuallyHidden, { as: "span", children: "velg fil med p\xE5f\xF8lgende knapp" }),
|
|
13865
|
+
/* @__PURE__ */ jsx266(
|
|
13820
13866
|
Button,
|
|
13821
13867
|
{
|
|
13822
13868
|
...getButtonProps(),
|
|
@@ -13839,8 +13885,8 @@ var FileUploader = (props) => {
|
|
|
13839
13885
|
]
|
|
13840
13886
|
}
|
|
13841
13887
|
),
|
|
13842
|
-
/* @__PURE__ */
|
|
13843
|
-
/* @__PURE__ */
|
|
13888
|
+
/* @__PURE__ */ jsx266(ErrorList, { errors: rootErrorsList }),
|
|
13889
|
+
/* @__PURE__ */ jsx266(FileListElement, { children: fileListElements })
|
|
13844
13890
|
] });
|
|
13845
13891
|
};
|
|
13846
13892
|
FileUploader.displayName = "FileUploader";
|
|
@@ -13848,7 +13894,7 @@ FileUploader.displayName = "FileUploader";
|
|
|
13848
13894
|
// src/components/EmptyContent/EmptyContent.tsx
|
|
13849
13895
|
import { ddsBaseTokens as ddsBaseTokens58 } from "@norges-domstoler/dds-design-tokens";
|
|
13850
13896
|
import styled96 from "styled-components";
|
|
13851
|
-
import { jsx as
|
|
13897
|
+
import { jsx as jsx267, jsxs as jsxs72 } from "react/jsx-runtime";
|
|
13852
13898
|
var { colors: colors35, spacing: spacing39 } = ddsBaseTokens58;
|
|
13853
13899
|
var StyledEmptyContent = styled96.div`
|
|
13854
13900
|
display: flex;
|
|
@@ -13868,9 +13914,9 @@ var StyledEmptyContentText = styled96.div`
|
|
|
13868
13914
|
gap: ${spacing39.SizesDdsSpacingX1};
|
|
13869
13915
|
`;
|
|
13870
13916
|
function EmptyContent({ title: title3, message: message2, ...rest }) {
|
|
13871
|
-
return /* @__PURE__ */
|
|
13872
|
-
title3 && /* @__PURE__ */
|
|
13873
|
-
/* @__PURE__ */
|
|
13917
|
+
return /* @__PURE__ */ jsx267(StyledEmptyContent, { ...rest, children: /* @__PURE__ */ jsxs72(StyledEmptyContentText, { children: [
|
|
13918
|
+
title3 && /* @__PURE__ */ jsx267(Typography, { typographyType: "headingSans02", children: title3 }),
|
|
13919
|
+
/* @__PURE__ */ jsx267(Typography, { typographyType: "bodySans02", children: message2 })
|
|
13874
13920
|
] }) });
|
|
13875
13921
|
}
|
|
13876
13922
|
EmptyContent.displayName = "EmptyContent";
|
|
@@ -13894,7 +13940,7 @@ var backLinkTokens = {
|
|
|
13894
13940
|
};
|
|
13895
13941
|
|
|
13896
13942
|
// src/components/BackLink/BackLink.tsx
|
|
13897
|
-
import { jsx as
|
|
13943
|
+
import { jsx as jsx268, jsxs as jsxs73 } from "react/jsx-runtime";
|
|
13898
13944
|
var Nav2 = styled97("nav")`
|
|
13899
13945
|
align-items: center;
|
|
13900
13946
|
display: flex;
|
|
@@ -13905,23 +13951,23 @@ var StyledIcon4 = styled97(Icon)`
|
|
|
13905
13951
|
`;
|
|
13906
13952
|
var BackLink = forwardRef73((props, ref) => {
|
|
13907
13953
|
return /* @__PURE__ */ jsxs73(Nav2, { ref, children: [
|
|
13908
|
-
/* @__PURE__ */
|
|
13909
|
-
/* @__PURE__ */
|
|
13954
|
+
/* @__PURE__ */ jsx268(StyledIcon4, { icon: icons_exports.ArrowLeftIcon, iconSize: "small" }),
|
|
13955
|
+
/* @__PURE__ */ jsx268(Typography, { typographyType: "a", href: props.href, children: props.label })
|
|
13910
13956
|
] });
|
|
13911
13957
|
});
|
|
13912
13958
|
BackLink.displayName = "BackLink";
|
|
13913
13959
|
|
|
13914
13960
|
// src/components/Feedback/Feedback.tsx
|
|
13915
|
-
import { useEffect as useEffect27, useState as
|
|
13961
|
+
import { useEffect as useEffect27, useState as useState31 } from "react";
|
|
13916
13962
|
|
|
13917
13963
|
// src/components/Feedback/RatingComponent.tsx
|
|
13918
|
-
import styled98, { css as
|
|
13964
|
+
import styled98, { css as css48 } from "styled-components";
|
|
13919
13965
|
import { ddsBaseTokens as ddsBaseTokens60 } from "@norges-domstoler/dds-design-tokens";
|
|
13920
|
-
import { jsx as
|
|
13966
|
+
import { jsx as jsx269, jsxs as jsxs74 } from "react/jsx-runtime";
|
|
13921
13967
|
var RatingContainer = styled98.div`
|
|
13922
13968
|
display: flex;
|
|
13923
13969
|
gap: ${ddsBaseTokens60.spacing.SizesDdsSpacingX1};
|
|
13924
|
-
${({ $layout }) =>
|
|
13970
|
+
${({ $layout }) => css48`
|
|
13925
13971
|
flex-direction: ${$layout === "horizontal" ? "row" : "column"};
|
|
13926
13972
|
align-items: ${$layout === "horizontal" ? "center" : "start"};
|
|
13927
13973
|
`}
|
|
@@ -13939,9 +13985,9 @@ var RatingComponent = ({
|
|
|
13939
13985
|
handleRatingChange
|
|
13940
13986
|
}) => {
|
|
13941
13987
|
return /* @__PURE__ */ jsxs74(RatingContainer, { $layout: layout, children: [
|
|
13942
|
-
/* @__PURE__ */
|
|
13943
|
-
loading ? /* @__PURE__ */
|
|
13944
|
-
/* @__PURE__ */
|
|
13988
|
+
/* @__PURE__ */ jsx269(Label, { children: ratingLabel }),
|
|
13989
|
+
loading ? /* @__PURE__ */ jsx269(Spinner, { tooltip: "Laster opp tilbakemelding ..." }) : /* @__PURE__ */ jsxs74(HStack, { gap: "x1", children: [
|
|
13990
|
+
/* @__PURE__ */ jsx269(Tooltip, { text: thumbUpTooltip, children: /* @__PURE__ */ jsx269(
|
|
13945
13991
|
RatingButton,
|
|
13946
13992
|
{
|
|
13947
13993
|
htmlProps: { "aria-label": thumbUpTooltip },
|
|
@@ -13951,7 +13997,7 @@ var RatingComponent = ({
|
|
|
13951
13997
|
size: "large"
|
|
13952
13998
|
}
|
|
13953
13999
|
) }),
|
|
13954
|
-
/* @__PURE__ */
|
|
14000
|
+
/* @__PURE__ */ jsx269(Tooltip, { text: thumbDownTooltip, children: /* @__PURE__ */ jsx269("div", { children: /* @__PURE__ */ jsx269(
|
|
13955
14001
|
RatingButton,
|
|
13956
14002
|
{
|
|
13957
14003
|
htmlProps: { "aria-label": thumbDownTooltip },
|
|
@@ -13968,7 +14014,7 @@ var RatingComponent = ({
|
|
|
13968
14014
|
// src/components/Feedback/CommentComponent.tsx
|
|
13969
14015
|
import styled99 from "styled-components";
|
|
13970
14016
|
import { ddsBaseTokens as ddsBaseTokens61 } from "@norges-domstoler/dds-design-tokens";
|
|
13971
|
-
import { jsx as
|
|
14017
|
+
import { jsx as jsx270, jsxs as jsxs75 } from "react/jsx-runtime";
|
|
13972
14018
|
var IconLabelSpan = styled99.span`
|
|
13973
14019
|
display: inline-flex;
|
|
13974
14020
|
align-items: center;
|
|
@@ -13986,7 +14032,7 @@ var CommentComponent = ({
|
|
|
13986
14032
|
}) => {
|
|
13987
14033
|
return /* @__PURE__ */ jsxs75(VStack, { gap: "x1", align: "flex-start", children: [
|
|
13988
14034
|
/* @__PURE__ */ jsxs75(IconLabelSpan, { children: [
|
|
13989
|
-
/* @__PURE__ */
|
|
14035
|
+
/* @__PURE__ */ jsx270(
|
|
13990
14036
|
Icon,
|
|
13991
14037
|
{
|
|
13992
14038
|
icon: rating === "positive" ? ThumbupFilled : ThumbdownFilled,
|
|
@@ -13998,7 +14044,7 @@ var CommentComponent = ({
|
|
|
13998
14044
|
" "
|
|
13999
14045
|
] })
|
|
14000
14046
|
] }),
|
|
14001
|
-
/* @__PURE__ */
|
|
14047
|
+
/* @__PURE__ */ jsx270(
|
|
14002
14048
|
TextArea,
|
|
14003
14049
|
{
|
|
14004
14050
|
value: feedbackText,
|
|
@@ -14007,7 +14053,7 @@ var CommentComponent = ({
|
|
|
14007
14053
|
tip: "Ikke send inn personopplysninger eller annen sensitiv informasjon"
|
|
14008
14054
|
}
|
|
14009
14055
|
),
|
|
14010
|
-
/* @__PURE__ */
|
|
14056
|
+
/* @__PURE__ */ jsx270(
|
|
14011
14057
|
Button,
|
|
14012
14058
|
{
|
|
14013
14059
|
purpose: "secondary",
|
|
@@ -14021,7 +14067,7 @@ var CommentComponent = ({
|
|
|
14021
14067
|
};
|
|
14022
14068
|
|
|
14023
14069
|
// src/components/Feedback/Feedback.tsx
|
|
14024
|
-
import { jsx as
|
|
14070
|
+
import { jsx as jsx271 } from "react/jsx-runtime";
|
|
14025
14071
|
var Feedback = ({
|
|
14026
14072
|
layout = "vertical",
|
|
14027
14073
|
ratingLabel = "Hva syns du om tjenesten?",
|
|
@@ -14040,9 +14086,9 @@ var Feedback = ({
|
|
|
14040
14086
|
onFeedbackTextChange,
|
|
14041
14087
|
onSubmit
|
|
14042
14088
|
}) => {
|
|
14043
|
-
const [rating, setRating] =
|
|
14044
|
-
const [feedbackText, setFeedbackText] =
|
|
14045
|
-
const [isFeedbackSubmitted, setIsFeedbackSubmitted] =
|
|
14089
|
+
const [rating, setRating] = useState31(null);
|
|
14090
|
+
const [feedbackText, setFeedbackText] = useState31();
|
|
14091
|
+
const [isFeedbackSubmitted, setIsFeedbackSubmitted] = useState31(false);
|
|
14046
14092
|
useEffect27(() => {
|
|
14047
14093
|
ratingProp !== void 0 && setRating(ratingProp);
|
|
14048
14094
|
}, [ratingProp]);
|
|
@@ -14066,7 +14112,7 @@ var Feedback = ({
|
|
|
14066
14112
|
isSubmittedProp === void 0 && setIsFeedbackSubmitted(true);
|
|
14067
14113
|
};
|
|
14068
14114
|
if (rating === null && !isFeedbackSubmitted) {
|
|
14069
|
-
return /* @__PURE__ */
|
|
14115
|
+
return /* @__PURE__ */ jsx271(
|
|
14070
14116
|
RatingComponent,
|
|
14071
14117
|
{
|
|
14072
14118
|
layout,
|
|
@@ -14079,7 +14125,7 @@ var Feedback = ({
|
|
|
14079
14125
|
);
|
|
14080
14126
|
}
|
|
14081
14127
|
if (!feedbackTextAreaExcluded && !isFeedbackSubmitted) {
|
|
14082
|
-
return /* @__PURE__ */
|
|
14128
|
+
return /* @__PURE__ */ jsx271(
|
|
14083
14129
|
CommentComponent,
|
|
14084
14130
|
{
|
|
14085
14131
|
rating,
|
|
@@ -14093,7 +14139,7 @@ var Feedback = ({
|
|
|
14093
14139
|
}
|
|
14094
14140
|
);
|
|
14095
14141
|
}
|
|
14096
|
-
return /* @__PURE__ */
|
|
14142
|
+
return /* @__PURE__ */ jsx271(Paragraph, { children: submittedTitle });
|
|
14097
14143
|
};
|
|
14098
14144
|
export {
|
|
14099
14145
|
AddressShieldedIcon,
|