@norges-domstoler/dds-components 0.0.0-dev-20240129142814 → 0.0.0-dev-20240129142922
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.js +801 -824
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +644 -667
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1137,8 +1137,8 @@ var getElevation = (elevation) => {
|
|
|
1137
1137
|
return outerShadow.DdsShadow4Onlight;
|
|
1138
1138
|
}
|
|
1139
1139
|
};
|
|
1140
|
-
var getBorder = (
|
|
1141
|
-
switch (
|
|
1140
|
+
var getBorder = (borderStyle) => {
|
|
1141
|
+
switch (borderStyle) {
|
|
1142
1142
|
case "light":
|
|
1143
1143
|
return `${border3.BordersDdsBorderStyleLightStrokeWeight} solid ${border3.BordersDdsBorderStyleLightStroke}`;
|
|
1144
1144
|
case "dark":
|
|
@@ -9221,7 +9221,7 @@ var InlineEditInput = (0, import_react68.forwardRef)((props, ref) => {
|
|
|
9221
9221
|
});
|
|
9222
9222
|
|
|
9223
9223
|
// src/components/InternalHeader/InternalHeader.tsx
|
|
9224
|
-
var
|
|
9224
|
+
var import_react70 = require("react");
|
|
9225
9225
|
|
|
9226
9226
|
// src/components/InternalHeader/InternalHeader.styles.tsx
|
|
9227
9227
|
var import_styled_components61 = __toESM(require("styled-components"));
|
|
@@ -9229,185 +9229,156 @@ var import_styled_components61 = __toESM(require("styled-components"));
|
|
|
9229
9229
|
// src/components/InternalHeader/InternalHeader.tokens.tsx
|
|
9230
9230
|
var import_dds_design_tokens43 = require("@norges-domstoler/dds-design-tokens");
|
|
9231
9231
|
var { border: border10, colors: colors23, spacing: spacing24 } = import_dds_design_tokens43.ddsBaseTokens;
|
|
9232
|
-
var
|
|
9233
|
-
|
|
9234
|
-
|
|
9232
|
+
var bar = {
|
|
9233
|
+
backgroundColor: colors23.DdsColorNeutralsWhite,
|
|
9234
|
+
itemGap: spacing24.SizesDdsSpacingX1,
|
|
9235
|
+
minHeight: "57px",
|
|
9236
|
+
borderBottom: `${border10.BordersDdsBorderStyleLightStroke} solid ${border10.BordersDdsBorderStyleLightStrokeWeight}`
|
|
9235
9237
|
};
|
|
9236
|
-
var
|
|
9237
|
-
|
|
9238
|
-
|
|
9239
|
-
backgroundColor: colors23.DdsColorNeutralsWhite,
|
|
9240
|
-
padding: `${spacing24.SizesDdsSpacingX075} ${spacing24.SizesDdsSpacingX15}`
|
|
9241
|
-
},
|
|
9242
|
-
hover: {
|
|
9243
|
-
color: colors23.DdsColorInteractiveDark
|
|
9244
|
-
},
|
|
9245
|
-
active: {
|
|
9246
|
-
color: colors23.DdsColorInteractiveDark
|
|
9247
|
-
},
|
|
9248
|
-
current: {
|
|
9249
|
-
color: colors23.DdsColorInteractiveDarkest,
|
|
9250
|
-
backgroundColor: colors23.DdsColorPrimaryLightest
|
|
9251
|
-
}
|
|
9252
|
-
};
|
|
9253
|
-
var outerContainer3 = {
|
|
9254
|
-
backgroundColor: colors23.DdsColorNeutralsWhite
|
|
9255
|
-
};
|
|
9256
|
-
var applicationNameWrapper = {
|
|
9257
|
-
padding: `${spacing24.SizesDdsSpacingX1} ${spacing24.SizesDdsSpacingX15}`
|
|
9258
|
-
};
|
|
9259
|
-
var lovisaWrapper = {
|
|
9260
|
-
padding: `${spacing24.SizesDdsSpacingX1} ${spacing24.SizesDdsSpacingX15}`,
|
|
9261
|
-
borderRight: borderStyle
|
|
9262
|
-
};
|
|
9263
|
-
var banner = {
|
|
9264
|
-
borderBottom: borderStyle,
|
|
9265
|
-
paddingRight: spacing24.SizesDdsSpacingX1,
|
|
9266
|
-
hasContextMenu: {
|
|
9267
|
-
paddingRight: spacing24.SizesDdsSpacingX4
|
|
9268
|
-
}
|
|
9269
|
-
};
|
|
9270
|
-
var navigation2 = {
|
|
9271
|
-
borderBottom: borderStyle
|
|
9272
|
-
};
|
|
9273
|
-
var contextGroup = {
|
|
9274
|
-
right: spacing24.SizesDdsSpacingX075,
|
|
9275
|
-
top: spacing24.SizesDdsSpacingX025
|
|
9238
|
+
var separator = {
|
|
9239
|
+
color: border10.BordersDdsBorderStyleLightStroke,
|
|
9240
|
+
width: border10.BordersDdsBorderStyleLightStrokeWeight
|
|
9276
9241
|
};
|
|
9277
9242
|
var internalHeaderTokens = {
|
|
9278
|
-
|
|
9279
|
-
|
|
9280
|
-
applicationNameWrapper,
|
|
9281
|
-
lovisaWrapper,
|
|
9282
|
-
banner,
|
|
9283
|
-
navigation: navigation2,
|
|
9284
|
-
contextGroup
|
|
9243
|
+
bar,
|
|
9244
|
+
separator
|
|
9285
9245
|
};
|
|
9286
9246
|
|
|
9287
9247
|
// src/components/InternalHeader/InternalHeader.styles.tsx
|
|
9288
|
-
var {
|
|
9289
|
-
|
|
9290
|
-
applicationNameWrapper: applicationNameWrapper2,
|
|
9291
|
-
lovisaWrapper: lovisaWrapper2,
|
|
9292
|
-
banner: banner2,
|
|
9293
|
-
navigation: navigation3,
|
|
9294
|
-
contextGroup: contextGroup2
|
|
9295
|
-
} = internalHeaderTokens;
|
|
9296
|
-
var OuterContainer = import_styled_components61.default.div`
|
|
9297
|
-
position: relative;
|
|
9248
|
+
var { bar: bar2, separator: separator2 } = internalHeaderTokens;
|
|
9249
|
+
var Bar2 = import_styled_components61.default.div`
|
|
9298
9250
|
*::selection {
|
|
9299
9251
|
${selection}
|
|
9300
9252
|
}
|
|
9301
|
-
background-color: ${
|
|
9302
|
-
`;
|
|
9303
|
-
var BannerWrapper = import_styled_components61.default.div`
|
|
9304
|
-
position: relative;
|
|
9305
|
-
display: flex;
|
|
9306
|
-
align-items: center;
|
|
9307
|
-
border-bottom: ${banner2.borderBottom};
|
|
9308
|
-
padding-right: ${banner2.paddingRight};
|
|
9309
|
-
${({ $hasContextMenu }) => $hasContextMenu && import_styled_components61.css`
|
|
9310
|
-
padding-right: ${banner2.hasContextMenu.paddingRight};
|
|
9311
|
-
`}
|
|
9312
|
-
`;
|
|
9313
|
-
var BannerLeftWrapper = import_styled_components61.default.div`
|
|
9314
|
-
display: flex;
|
|
9315
|
-
`;
|
|
9316
|
-
var ApplicationNameWrapper = import_styled_components61.default.div`
|
|
9253
|
+
background-color: ${bar2.backgroundColor};
|
|
9317
9254
|
display: flex;
|
|
9255
|
+
gap: ${bar2.itemGap};
|
|
9318
9256
|
align-items: center;
|
|
9319
|
-
|
|
9320
|
-
|
|
9321
|
-
|
|
9322
|
-
|
|
9323
|
-
|
|
9257
|
+
min-height: ${bar2.minHeight};
|
|
9258
|
+
border-bottom: ${bar2.borderBottom};
|
|
9259
|
+
|
|
9260
|
+
${({ $hasNavigation }) => $hasNavigation ? import_styled_components61.css`
|
|
9261
|
+
${ContextMenuGroup} {
|
|
9262
|
+
margin-left: auto;
|
|
9263
|
+
}
|
|
9264
|
+
` : import_styled_components61.css`
|
|
9265
|
+
${BarSeparator} {
|
|
9266
|
+
margin-left: auto;
|
|
9267
|
+
}
|
|
9268
|
+
`}
|
|
9324
9269
|
`;
|
|
9325
|
-
var
|
|
9326
|
-
border-
|
|
9270
|
+
var BarSeparator = import_styled_components61.default.div`
|
|
9271
|
+
border-left: ${separator2.width} solid ${separator2.color};
|
|
9272
|
+
align-self: stretch;
|
|
9327
9273
|
`;
|
|
9328
9274
|
var NavigationList = import_styled_components61.default.ul`
|
|
9329
9275
|
box-sizing: border-box;
|
|
9330
9276
|
display: flex;
|
|
9277
|
+
gap: ${bar2.itemGap};
|
|
9278
|
+
align-items: center;
|
|
9279
|
+
width: 100%;
|
|
9331
9280
|
${({ smallScreen }) => smallScreen && import_styled_components61.css`
|
|
9281
|
+
align-items: initial;
|
|
9332
9282
|
flex-direction: column;
|
|
9333
9283
|
`}
|
|
9334
9284
|
list-style-type: none;
|
|
9335
9285
|
padding: 0;
|
|
9336
9286
|
margin: 0;
|
|
9337
9287
|
`;
|
|
9338
|
-
var ContextMenuGroup = import_styled_components61.default.div
|
|
9339
|
-
position: absolute;
|
|
9340
|
-
top: ${contextGroup2.top};
|
|
9341
|
-
right: ${contextGroup2.right};
|
|
9342
|
-
`;
|
|
9288
|
+
var ContextMenuGroup = import_styled_components61.default.div``;
|
|
9343
9289
|
var StyledOverflowMenu = (0, import_styled_components61.default)(OverflowMenu)`
|
|
9344
9290
|
max-height: calc(100vh - 110px);
|
|
9345
9291
|
`;
|
|
9292
|
+
var NavLi = import_styled_components61.default.li`
|
|
9293
|
+
display: flex;
|
|
9294
|
+
`;
|
|
9346
9295
|
|
|
9347
|
-
// src/components/InternalHeader/
|
|
9296
|
+
// src/components/InternalHeader/NavigationItem.tsx
|
|
9348
9297
|
var import_react69 = require("react");
|
|
9349
9298
|
var import_styled_components62 = __toESM(require("styled-components"));
|
|
9350
|
-
|
|
9351
|
-
|
|
9352
|
-
|
|
9353
|
-
|
|
9354
|
-
|
|
9355
|
-
|
|
9356
|
-
|
|
9357
|
-
|
|
9299
|
+
|
|
9300
|
+
// src/components/InternalHeader/NavigationItem.tokens.ts
|
|
9301
|
+
var import_dds_design_tokens44 = require("@norges-domstoler/dds-design-tokens");
|
|
9302
|
+
var navTokens5 = {
|
|
9303
|
+
base: {
|
|
9304
|
+
padding: [
|
|
9305
|
+
import_dds_design_tokens44.ddsBaseTokens.spacing.SizesDdsSpacingX075,
|
|
9306
|
+
import_dds_design_tokens44.ddsBaseTokens.spacing.SizesDdsSpacingX1
|
|
9307
|
+
].join(" "),
|
|
9308
|
+
borderRadius: import_dds_design_tokens44.ddsBaseTokens.borderRadius.RadiiDdsBorderRadius1Radius,
|
|
9309
|
+
backgroundColor: "transparent",
|
|
9310
|
+
color: import_dds_design_tokens44.ddsBaseTokens.colors.DdsColorNeutralsGray6,
|
|
9311
|
+
hover: {
|
|
9312
|
+
backgroundColor: import_dds_design_tokens44.ddsBaseTokens.colors.DdsColorNeutralsGray1,
|
|
9313
|
+
color: import_dds_design_tokens44.ddsBaseTokens.colors.DdsColorNeutralsGray9
|
|
9314
|
+
}
|
|
9315
|
+
},
|
|
9316
|
+
active: {
|
|
9317
|
+
base: {
|
|
9318
|
+
backgroundColor: import_dds_design_tokens44.ddsBaseTokens.colors.DdsColorInteractiveLightest,
|
|
9319
|
+
color: import_dds_design_tokens44.ddsBaseTokens.colors.DdsColorNeutralsGray9
|
|
9320
|
+
},
|
|
9321
|
+
hover: {
|
|
9322
|
+
backgroundColor: import_dds_design_tokens44.ddsBaseTokens.colors.DdsColorInteractiveLightest,
|
|
9323
|
+
color: import_dds_design_tokens44.ddsBaseTokens.colors.DdsColorNeutralsGray9
|
|
9324
|
+
}
|
|
9325
|
+
}
|
|
9326
|
+
};
|
|
9327
|
+
function getNavTokens({ active }) {
|
|
9328
|
+
return {
|
|
9329
|
+
...navTokens5.base,
|
|
9330
|
+
...active ? navTokens5.active.base : {},
|
|
9331
|
+
hover: {
|
|
9332
|
+
...navTokens5.base.hover,
|
|
9333
|
+
...active ? navTokens5.active.hover : {}
|
|
9334
|
+
}
|
|
9358
9335
|
};
|
|
9359
|
-
|
|
9360
|
-
});
|
|
9336
|
+
}
|
|
9361
9337
|
|
|
9362
9338
|
// src/components/InternalHeader/NavigationItem.tsx
|
|
9363
|
-
var
|
|
9364
|
-
var
|
|
9365
|
-
|
|
9366
|
-
var { navLink: navLink2 } = internalHeaderTokens;
|
|
9367
|
-
var Link3 = import_styled_components63.default.a.withConfig({
|
|
9368
|
-
shouldForwardProp: (prop) => prop !== "isCurrent"
|
|
9369
|
-
})`
|
|
9370
|
-
display: flex;
|
|
9371
|
-
align-items: center;
|
|
9372
|
-
height: 100%;
|
|
9373
|
-
box-sizing: border-box;
|
|
9339
|
+
var import_jsx_runtime228 = require("react/jsx-runtime");
|
|
9340
|
+
var Link3 = import_styled_components62.default.a`
|
|
9341
|
+
${getFontStyling("bodySans02")}
|
|
9374
9342
|
text-decoration: none;
|
|
9375
|
-
|
|
9376
|
-
|
|
9377
|
-
}
|
|
9378
|
-
|
|
9379
|
-
|
|
9380
|
-
|
|
9381
|
-
${getFontStyling(typographyTypes3.navLink)}
|
|
9343
|
+
|
|
9344
|
+
color: ${({ $active }) => getNavTokens({ active: $active }).color};
|
|
9345
|
+
background-color: ${({ $active }) => getNavTokens({ active: $active }).backgroundColor};
|
|
9346
|
+
padding: ${({ $active }) => getNavTokens({ active: $active }).padding};
|
|
9347
|
+
border-radius: ${({ $active }) => getNavTokens({ active: $active }).borderRadius};
|
|
9348
|
+
|
|
9382
9349
|
&:hover {
|
|
9383
|
-
color: ${
|
|
9350
|
+
color: ${({ $active }) => getNavTokens({ active: $active }).hover.color};
|
|
9351
|
+
background-color: ${({ $active }) => getNavTokens({ active: $active }).hover.backgroundColor};
|
|
9384
9352
|
}
|
|
9353
|
+
|
|
9385
9354
|
&:active {
|
|
9386
|
-
color: ${
|
|
9355
|
+
color: ${getNavTokens({ active: true }).color};
|
|
9356
|
+
background-color: ${getNavTokens({ active: true }).backgroundColor};
|
|
9387
9357
|
}
|
|
9388
9358
|
&:focus-visible,
|
|
9389
9359
|
&.focus-visible {
|
|
9390
|
-
${
|
|
9360
|
+
${focusVisibleInset};
|
|
9361
|
+
}
|
|
9362
|
+
|
|
9363
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
9364
|
+
transition: background-color 0.2s;
|
|
9391
9365
|
}
|
|
9392
|
-
${({ isCurrent }) => isCurrent && import_styled_components63.css`
|
|
9393
|
-
color: ${navLink2.current.color};
|
|
9394
|
-
background-color: ${navLink2.current.backgroundColor};
|
|
9395
|
-
&:hover {
|
|
9396
|
-
color: ${navLink2.current.color};
|
|
9397
|
-
}
|
|
9398
|
-
`}
|
|
9399
9366
|
`;
|
|
9400
|
-
var NavigationItem2 = (0,
|
|
9401
|
-
|
|
9402
|
-
|
|
9403
|
-
|
|
9404
|
-
|
|
9405
|
-
|
|
9406
|
-
|
|
9367
|
+
var NavigationItem2 = (0, import_react69.forwardRef)(({ title: title3, isCurrent, ...rest }, ref) => {
|
|
9368
|
+
return /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(
|
|
9369
|
+
Link3,
|
|
9370
|
+
{
|
|
9371
|
+
...rest,
|
|
9372
|
+
ref,
|
|
9373
|
+
"aria-current": isCurrent ? "page" : void 0,
|
|
9374
|
+
$active: isCurrent != null ? isCurrent : false,
|
|
9375
|
+
children: title3
|
|
9376
|
+
}
|
|
9377
|
+
);
|
|
9407
9378
|
});
|
|
9408
9379
|
|
|
9409
9380
|
// src/components/InternalHeader/InternalHeader.tsx
|
|
9410
|
-
var
|
|
9381
|
+
var import_jsx_runtime229 = require("react/jsx-runtime");
|
|
9411
9382
|
var InternalHeader = (props) => {
|
|
9412
9383
|
const {
|
|
9413
9384
|
applicationDesc,
|
|
@@ -9423,11 +9394,11 @@ var InternalHeader = (props) => {
|
|
|
9423
9394
|
htmlProps,
|
|
9424
9395
|
...rest
|
|
9425
9396
|
} = props;
|
|
9426
|
-
const [contextMenuIsClosed, setContextMenuIsClosed] = (0,
|
|
9427
|
-
const [currentPage, setCurrentPage] = (0,
|
|
9397
|
+
const [contextMenuIsClosed, setContextMenuIsClosed] = (0, import_react70.useState)(true);
|
|
9398
|
+
const [currentPage, setCurrentPage] = (0, import_react70.useState)(
|
|
9428
9399
|
currentPageHref
|
|
9429
9400
|
);
|
|
9430
|
-
const buttonRef = (0,
|
|
9401
|
+
const buttonRef = (0, import_react70.useRef)(null);
|
|
9431
9402
|
const handleCurrentPageChange = (href) => {
|
|
9432
9403
|
setCurrentPage(href);
|
|
9433
9404
|
onCurrentPageChange && onCurrentPageChange();
|
|
@@ -9439,10 +9410,10 @@ var InternalHeader = (props) => {
|
|
|
9439
9410
|
const hasNavigationElements = !!navigationElements && navigationElements.length > 0;
|
|
9440
9411
|
const hasContextMenuElements = !!contextMenuElements && contextMenuElements.length > 0;
|
|
9441
9412
|
const hasNavInContextMenu = smallScreen && hasNavigationElements;
|
|
9442
|
-
const
|
|
9413
|
+
const navigation2 = hasNavigationElements && !smallScreen ? /* @__PURE__ */ (0, import_jsx_runtime229.jsx)("nav", { "aria-label": "sidenavigasjon", children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(NavigationList, { children: navigationElements.map((item, index) => {
|
|
9443
9414
|
const { href, ...rest2 } = item;
|
|
9444
9415
|
const isCurrent = href === currentPage;
|
|
9445
|
-
return /* @__PURE__ */ (0,
|
|
9416
|
+
return /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(NavLi, { children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
|
|
9446
9417
|
NavigationItem2,
|
|
9447
9418
|
{
|
|
9448
9419
|
href,
|
|
@@ -9453,45 +9424,51 @@ var InternalHeader = (props) => {
|
|
|
9453
9424
|
) }, index);
|
|
9454
9425
|
}) }) }) : null;
|
|
9455
9426
|
const hasContextMenu = hasContextMenuElements || !!userProps || hasNavInContextMenu;
|
|
9456
|
-
return /* @__PURE__ */ (0,
|
|
9457
|
-
|
|
9458
|
-
|
|
9459
|
-
|
|
9460
|
-
|
|
9461
|
-
|
|
9462
|
-
|
|
9463
|
-
|
|
9464
|
-
|
|
9465
|
-
|
|
9466
|
-
|
|
9467
|
-
|
|
9468
|
-
|
|
9469
|
-
|
|
9470
|
-
|
|
9471
|
-
|
|
9472
|
-
|
|
9473
|
-
|
|
9474
|
-
|
|
9475
|
-
|
|
9476
|
-
|
|
9477
|
-
|
|
9478
|
-
|
|
9479
|
-
|
|
9480
|
-
|
|
9481
|
-
|
|
9482
|
-
|
|
9483
|
-
|
|
9484
|
-
|
|
9485
|
-
|
|
9486
|
-
|
|
9487
|
-
|
|
9488
|
-
|
|
9427
|
+
return /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(
|
|
9428
|
+
Bar2,
|
|
9429
|
+
{
|
|
9430
|
+
...getBaseHTMLProps(id, className, htmlProps, rest),
|
|
9431
|
+
$hasNavigation: !!navigation2,
|
|
9432
|
+
children: [
|
|
9433
|
+
/* @__PURE__ */ (0, import_jsx_runtime229.jsx)(Typography, { typographyType: "bodySans02", bold: true, as: "span", children: applicationName }),
|
|
9434
|
+
/* @__PURE__ */ (0, import_jsx_runtime229.jsx)(Typography, { typographyType: "bodySans02", as: "span", children: applicationDesc }),
|
|
9435
|
+
/* @__PURE__ */ (0, import_jsx_runtime229.jsx)(BarSeparator, {}),
|
|
9436
|
+
navigation2,
|
|
9437
|
+
hasContextMenu && /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(ContextMenuGroup, { children: [
|
|
9438
|
+
/* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
|
|
9439
|
+
Button,
|
|
9440
|
+
{
|
|
9441
|
+
ref: buttonRef,
|
|
9442
|
+
icon: hasNavInContextMenu ? MenuIcon : MoreVerticalIcon,
|
|
9443
|
+
appearance: "borderless",
|
|
9444
|
+
purpose: "secondary",
|
|
9445
|
+
onClick: handleContextMenuClick,
|
|
9446
|
+
"aria-haspopup": "menu",
|
|
9447
|
+
"aria-expanded": !contextMenuIsClosed ? true : void 0,
|
|
9448
|
+
"aria-label": "\xE5pne meny"
|
|
9449
|
+
}
|
|
9450
|
+
),
|
|
9451
|
+
/* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
|
|
9452
|
+
StyledOverflowMenu,
|
|
9453
|
+
{
|
|
9454
|
+
isOpen: !contextMenuIsClosed,
|
|
9455
|
+
onClose: onOveflowMenuClose,
|
|
9456
|
+
anchorRef: buttonRef,
|
|
9457
|
+
navItems: hasNavInContextMenu ? navigationElements : void 0,
|
|
9458
|
+
items: hasContextMenuElements ? contextMenuElements : void 0,
|
|
9459
|
+
userProps
|
|
9460
|
+
}
|
|
9461
|
+
)
|
|
9462
|
+
] })
|
|
9463
|
+
]
|
|
9464
|
+
}
|
|
9465
|
+
);
|
|
9489
9466
|
};
|
|
9490
9467
|
InternalHeader.displayName = "InternalHeader";
|
|
9491
9468
|
|
|
9492
9469
|
// src/components/List/List.tsx
|
|
9493
|
-
var
|
|
9494
|
-
var
|
|
9470
|
+
var import_react71 = require("react");
|
|
9471
|
+
var import_styled_components63 = __toESM(require("styled-components"));
|
|
9495
9472
|
|
|
9496
9473
|
// src/components/List/bullets/jordskifterett_bullet1.svg
|
|
9497
9474
|
var jordskifterett_bullet1_default = 'data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<circle cx="6.7085" cy="6.7085" r="2.625" fill="%230B0D0E"/>%0A</svg>%0A';
|
|
@@ -9503,9 +9480,9 @@ var lagmannsrett_bullet2_default = 'data:image/svg+xml,<svg width="14" height="1
|
|
|
9503
9480
|
var tingrett_bullet3_default = 'data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M6.70817 9.33333C8.80225 9.33333 10.4998 7.50516 10.4998 5.25H2.9165C2.9165 7.50516 4.61409 9.33333 6.70817 9.33333Z" fill="%230B0D0E"/>%0A</svg>%0A';
|
|
9504
9481
|
|
|
9505
9482
|
// src/components/List/List.tokens.tsx
|
|
9506
|
-
var
|
|
9507
|
-
var { spacing: spacing25 } =
|
|
9508
|
-
var { textDefault: textDefault4 } =
|
|
9483
|
+
var import_dds_design_tokens45 = require("@norges-domstoler/dds-design-tokens");
|
|
9484
|
+
var { spacing: spacing25 } = import_dds_design_tokens45.ddsBaseTokens;
|
|
9485
|
+
var { textDefault: textDefault4 } = import_dds_design_tokens45.ddsReferenceTokens;
|
|
9509
9486
|
var ulLiPaddingLeft = `1em + ${spacing25.SizesDdsSpacingX025}`;
|
|
9510
9487
|
var ulPaddingLeft = `${spacing25.SizesDdsSpacingX2} - (${ulLiPaddingLeft})`;
|
|
9511
9488
|
var list5 = {
|
|
@@ -9537,9 +9514,9 @@ var listTokens = {
|
|
|
9537
9514
|
};
|
|
9538
9515
|
|
|
9539
9516
|
// src/components/List/List.tsx
|
|
9540
|
-
var
|
|
9517
|
+
var import_jsx_runtime230 = require("react/jsx-runtime");
|
|
9541
9518
|
var { list: list6, listItem: listItem4, bullet: bullet2 } = listTokens;
|
|
9542
|
-
var StyledList =
|
|
9519
|
+
var StyledList = import_styled_components63.default.ul`
|
|
9543
9520
|
margin: ${list6.base.margin};
|
|
9544
9521
|
color: ${list6.base.color};
|
|
9545
9522
|
ul,
|
|
@@ -9550,13 +9527,13 @@ var StyledList = import_styled_components64.default.ul`
|
|
|
9550
9527
|
${selection}
|
|
9551
9528
|
}
|
|
9552
9529
|
|
|
9553
|
-
${({ $typographyType }) => $typographyType === "inherit" ?
|
|
9530
|
+
${({ $typographyType }) => $typographyType === "inherit" ? import_styled_components63.css`
|
|
9554
9531
|
font: inherit;
|
|
9555
|
-
` :
|
|
9532
|
+
` : import_styled_components63.css`
|
|
9556
9533
|
${getFontStyling($typographyType)}
|
|
9557
9534
|
`}
|
|
9558
9535
|
|
|
9559
|
-
${({ $listType }) => $listType === "unordered" ?
|
|
9536
|
+
${({ $listType }) => $listType === "unordered" ? import_styled_components63.css`
|
|
9560
9537
|
padding-left: ${list6.ul.paddingLeft};
|
|
9561
9538
|
list-style: none;
|
|
9562
9539
|
li {
|
|
@@ -9581,7 +9558,7 @@ var StyledList = import_styled_components64.default.ul`
|
|
|
9581
9558
|
background-image: ${`url('${tingrett_bullet3_default}')`};
|
|
9582
9559
|
}
|
|
9583
9560
|
}
|
|
9584
|
-
` :
|
|
9561
|
+
` : import_styled_components63.css`
|
|
9585
9562
|
padding-left: ${list6.ol.paddingLeft};
|
|
9586
9563
|
& > li > ol {
|
|
9587
9564
|
list-style-type: lower-alpha;
|
|
@@ -9591,7 +9568,7 @@ var StyledList = import_styled_components64.default.ul`
|
|
|
9591
9568
|
}
|
|
9592
9569
|
`}
|
|
9593
9570
|
`;
|
|
9594
|
-
var List2 = (0,
|
|
9571
|
+
var List2 = (0, import_react71.forwardRef)(
|
|
9595
9572
|
(props, ref) => {
|
|
9596
9573
|
const {
|
|
9597
9574
|
listType = "unordered",
|
|
@@ -9603,7 +9580,7 @@ var List2 = (0, import_react72.forwardRef)(
|
|
|
9603
9580
|
...rest
|
|
9604
9581
|
} = props;
|
|
9605
9582
|
const as = listType === "ordered" ? "ol" : "ul";
|
|
9606
|
-
return /* @__PURE__ */ (0,
|
|
9583
|
+
return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
|
|
9607
9584
|
StyledList,
|
|
9608
9585
|
{
|
|
9609
9586
|
...getBaseHTMLProps(id, className, htmlProps, rest),
|
|
@@ -9619,26 +9596,26 @@ var List2 = (0, import_react72.forwardRef)(
|
|
|
9619
9596
|
List2.displayName = "List";
|
|
9620
9597
|
|
|
9621
9598
|
// src/components/List/ListItem.tsx
|
|
9622
|
-
var
|
|
9623
|
-
var
|
|
9624
|
-
var
|
|
9625
|
-
var StyledListItem =
|
|
9599
|
+
var import_react72 = require("react");
|
|
9600
|
+
var import_styled_components64 = __toESM(require("styled-components"));
|
|
9601
|
+
var import_jsx_runtime231 = require("react/jsx-runtime");
|
|
9602
|
+
var StyledListItem = import_styled_components64.default.li`
|
|
9626
9603
|
line-height: ${listTokens.listItem.lineHeight};
|
|
9627
9604
|
`;
|
|
9628
|
-
var ListItem2 = (0,
|
|
9605
|
+
var ListItem2 = (0, import_react72.forwardRef)(
|
|
9629
9606
|
({ children, ...rest }, ref) => {
|
|
9630
|
-
return /* @__PURE__ */ (0,
|
|
9607
|
+
return /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(StyledListItem, { ref, ...rest, children });
|
|
9631
9608
|
}
|
|
9632
9609
|
);
|
|
9633
9610
|
ListItem2.displayName = "ListItem";
|
|
9634
9611
|
|
|
9635
9612
|
// src/components/LocalMessage/LocalMessage.tsx
|
|
9636
|
-
var
|
|
9637
|
-
var
|
|
9613
|
+
var import_react73 = require("react");
|
|
9614
|
+
var import_styled_components65 = __toESM(require("styled-components"));
|
|
9638
9615
|
|
|
9639
9616
|
// src/components/LocalMessage/LocalMessage.tokens.tsx
|
|
9640
|
-
var
|
|
9641
|
-
var { colors: colors24, spacing: spacing26, borderRadius: borderRadius6, border: border11, outerShadow: outerShadow3 } =
|
|
9617
|
+
var import_dds_design_tokens46 = require("@norges-domstoler/dds-design-tokens");
|
|
9618
|
+
var { colors: colors24, spacing: spacing26, borderRadius: borderRadius6, border: border11, outerShadow: outerShadow3 } = import_dds_design_tokens46.ddsBaseTokens;
|
|
9642
9619
|
var container9 = {
|
|
9643
9620
|
base: {
|
|
9644
9621
|
boxShadow: outerShadow3.DdsShadow1Onlight,
|
|
@@ -9728,10 +9705,10 @@ var localMessageTokens = {
|
|
|
9728
9705
|
};
|
|
9729
9706
|
|
|
9730
9707
|
// src/components/LocalMessage/LocalMessage.tsx
|
|
9731
|
-
var
|
|
9708
|
+
var import_jsx_runtime232 = require("react/jsx-runtime");
|
|
9732
9709
|
var defaultWidth4 = "400px";
|
|
9733
9710
|
var { container: container10, icon: icon7, purposeVariants: purposeVariants3 } = localMessageTokens;
|
|
9734
|
-
var Container8 =
|
|
9711
|
+
var Container8 = import_styled_components65.default.div.withConfig({
|
|
9735
9712
|
shouldForwardProp: (prop) => {
|
|
9736
9713
|
const styleOnlyProps = [
|
|
9737
9714
|
"layout",
|
|
@@ -9757,7 +9734,7 @@ var Container8 = import_styled_components66.default.div.withConfig({
|
|
|
9757
9734
|
*::selection {
|
|
9758
9735
|
${selection}
|
|
9759
9736
|
}
|
|
9760
|
-
${({ purpose }) => purpose &&
|
|
9737
|
+
${({ purpose }) => purpose && import_styled_components65.css`
|
|
9761
9738
|
border-color: ${container10.purpose[purpose].borderColor};
|
|
9762
9739
|
background-color: ${container10.purpose[purpose].backgroundColor};
|
|
9763
9740
|
`}
|
|
@@ -9782,17 +9759,17 @@ function getGridTemplateColumns(layout, closable) {
|
|
|
9782
9759
|
}
|
|
9783
9760
|
return layout === "horisontal" ? "min-content 1fr" : "1fr";
|
|
9784
9761
|
}
|
|
9785
|
-
var MessageIconWrapper2 = (0,
|
|
9762
|
+
var MessageIconWrapper2 = (0, import_styled_components65.default)(Icon)`
|
|
9786
9763
|
grid-area: icon;
|
|
9787
9764
|
`;
|
|
9788
|
-
var TextContainer2 =
|
|
9765
|
+
var TextContainer2 = import_styled_components65.default.div`
|
|
9789
9766
|
grid-area: text;
|
|
9790
9767
|
`;
|
|
9791
|
-
var CloseButton = (0,
|
|
9768
|
+
var CloseButton = (0, import_styled_components65.default)(Button)`
|
|
9792
9769
|
grid-area: closeButton;
|
|
9793
9770
|
margin: -${container10.base.padding} 0;
|
|
9794
9771
|
`;
|
|
9795
|
-
var LocalMessage = (0,
|
|
9772
|
+
var LocalMessage = (0, import_react73.forwardRef)(
|
|
9796
9773
|
(props, ref) => {
|
|
9797
9774
|
const {
|
|
9798
9775
|
message: message2,
|
|
@@ -9807,7 +9784,7 @@ var LocalMessage = (0, import_react74.forwardRef)(
|
|
|
9807
9784
|
htmlProps,
|
|
9808
9785
|
...rest
|
|
9809
9786
|
} = props;
|
|
9810
|
-
const [isClosed, setClosed] = (0,
|
|
9787
|
+
const [isClosed, setClosed] = (0, import_react73.useState)(false);
|
|
9811
9788
|
const containerProps = {
|
|
9812
9789
|
...getBaseHTMLProps(id, className, htmlProps, rest),
|
|
9813
9790
|
purpose,
|
|
@@ -9817,18 +9794,18 @@ var LocalMessage = (0, import_react74.forwardRef)(
|
|
|
9817
9794
|
ref
|
|
9818
9795
|
};
|
|
9819
9796
|
if (isClosed) {
|
|
9820
|
-
return /* @__PURE__ */ (0,
|
|
9797
|
+
return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(import_jsx_runtime232.Fragment, {});
|
|
9821
9798
|
}
|
|
9822
|
-
return /* @__PURE__ */ (0,
|
|
9823
|
-
/* @__PURE__ */ (0,
|
|
9799
|
+
return /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)(Container8, { ...containerProps, children: [
|
|
9800
|
+
/* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
|
|
9824
9801
|
MessageIconWrapper2,
|
|
9825
9802
|
{
|
|
9826
9803
|
icon: purposeVariants3[purpose].icon,
|
|
9827
9804
|
color: icon7[purpose].color
|
|
9828
9805
|
}
|
|
9829
9806
|
),
|
|
9830
|
-
/* @__PURE__ */ (0,
|
|
9831
|
-
closable && /* @__PURE__ */ (0,
|
|
9807
|
+
/* @__PURE__ */ (0, import_jsx_runtime232.jsx)(TextContainer2, { children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(Typography, { as: "span", children: message2 }) }),
|
|
9808
|
+
closable && /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
|
|
9832
9809
|
CloseButton,
|
|
9833
9810
|
{
|
|
9834
9811
|
icon: CloseIcon,
|
|
@@ -9848,14 +9825,14 @@ var LocalMessage = (0, import_react74.forwardRef)(
|
|
|
9848
9825
|
LocalMessage.displayName = "LocalMessage";
|
|
9849
9826
|
|
|
9850
9827
|
// src/components/Modal/Modal.tsx
|
|
9851
|
-
var
|
|
9828
|
+
var import_react74 = require("react");
|
|
9852
9829
|
var import_react_dom3 = require("react-dom");
|
|
9853
|
-
var
|
|
9830
|
+
var import_styled_components67 = __toESM(require("styled-components"));
|
|
9854
9831
|
|
|
9855
9832
|
// src/components/Modal/Backdrop/Backdrop.tsx
|
|
9856
|
-
var
|
|
9857
|
-
var
|
|
9858
|
-
var Backdrop =
|
|
9833
|
+
var import_dds_design_tokens47 = require("@norges-domstoler/dds-design-tokens");
|
|
9834
|
+
var import_styled_components66 = __toESM(require("styled-components"));
|
|
9835
|
+
var Backdrop = import_styled_components66.default.div.withConfig({
|
|
9859
9836
|
shouldForwardProp: (prop) => prop !== "isOpen"
|
|
9860
9837
|
})`
|
|
9861
9838
|
position: fixed;
|
|
@@ -9863,7 +9840,7 @@ var Backdrop = import_styled_components67.default.div.withConfig({
|
|
|
9863
9840
|
align-items: center;
|
|
9864
9841
|
justify-content: center;
|
|
9865
9842
|
background-color: ${changeRGBAAlpha(
|
|
9866
|
-
|
|
9843
|
+
import_dds_design_tokens47.ddsBaseTokens.colors.DdsColorNeutralsGray9,
|
|
9867
9844
|
0.5
|
|
9868
9845
|
)};
|
|
9869
9846
|
overflow-y: auto;
|
|
@@ -9900,8 +9877,8 @@ function handleElementWithBackdropUnmount(container16) {
|
|
|
9900
9877
|
}
|
|
9901
9878
|
|
|
9902
9879
|
// src/components/Modal/Modal.tokens.tsx
|
|
9903
|
-
var
|
|
9904
|
-
var { spacing: spacing27 } =
|
|
9880
|
+
var import_dds_design_tokens48 = require("@norges-domstoler/dds-design-tokens");
|
|
9881
|
+
var { spacing: spacing27 } = import_dds_design_tokens48.ddsBaseTokens;
|
|
9905
9882
|
var container11 = {
|
|
9906
9883
|
padding: `${spacing27.SizesDdsSpacingX1} ${spacing27.SizesDdsSpacingX1} ${spacing27.SizesDdsSpacingX15} ${spacing27.SizesDdsSpacingX15}`
|
|
9907
9884
|
};
|
|
@@ -9919,9 +9896,9 @@ var modalTokens = {
|
|
|
9919
9896
|
};
|
|
9920
9897
|
|
|
9921
9898
|
// src/components/Modal/Modal.tsx
|
|
9922
|
-
var
|
|
9899
|
+
var import_jsx_runtime233 = require("react/jsx-runtime");
|
|
9923
9900
|
var { container: container12, contentContainer: contentContainer6 } = modalTokens;
|
|
9924
|
-
var Container9 = (0,
|
|
9901
|
+
var Container9 = (0, import_styled_components67.default)(Paper)`
|
|
9925
9902
|
display: flex;
|
|
9926
9903
|
flex-direction: column-reverse;
|
|
9927
9904
|
min-width: 200px;
|
|
@@ -9935,16 +9912,16 @@ var Container9 = (0, import_styled_components68.default)(Paper)`
|
|
|
9935
9912
|
${focusVisible}
|
|
9936
9913
|
}
|
|
9937
9914
|
`;
|
|
9938
|
-
var ContentContainer3 =
|
|
9915
|
+
var ContentContainer3 = import_styled_components67.default.div`
|
|
9939
9916
|
display: grid;
|
|
9940
9917
|
padding-right: ${contentContainer6.paddingRight};
|
|
9941
9918
|
gap: ${contentContainer6.gap};
|
|
9942
9919
|
`;
|
|
9943
|
-
var HeaderContainer3 =
|
|
9944
|
-
var StyledButton3 = (0,
|
|
9920
|
+
var HeaderContainer3 = import_styled_components67.default.div``;
|
|
9921
|
+
var StyledButton3 = (0, import_styled_components67.default)(Button)`
|
|
9945
9922
|
align-self: flex-end;
|
|
9946
9923
|
`;
|
|
9947
|
-
var Modal = (0,
|
|
9924
|
+
var Modal = (0, import_react74.forwardRef)((props, ref) => {
|
|
9948
9925
|
const {
|
|
9949
9926
|
isOpen = false,
|
|
9950
9927
|
parentElement = document.body,
|
|
@@ -9958,7 +9935,7 @@ var Modal = (0, import_react75.forwardRef)((props, ref) => {
|
|
|
9958
9935
|
htmlProps,
|
|
9959
9936
|
...rest
|
|
9960
9937
|
} = props;
|
|
9961
|
-
const generatedId = (0,
|
|
9938
|
+
const generatedId = (0, import_react74.useId)();
|
|
9962
9939
|
const modalId = id != null ? id : `${generatedId}-modal`;
|
|
9963
9940
|
const headerId = `${modalId}-header`;
|
|
9964
9941
|
const modalRef = useFocusTrap(isOpen, initialFocusRef);
|
|
@@ -9970,7 +9947,7 @@ var Modal = (0, import_react75.forwardRef)((props, ref) => {
|
|
|
9970
9947
|
onClose();
|
|
9971
9948
|
}
|
|
9972
9949
|
};
|
|
9973
|
-
(0,
|
|
9950
|
+
(0, import_react74.useEffect)(() => {
|
|
9974
9951
|
if (isOpen) {
|
|
9975
9952
|
handleElementWithBackdropMount(document.body);
|
|
9976
9953
|
} else {
|
|
@@ -9982,7 +9959,7 @@ var Modal = (0, import_react75.forwardRef)((props, ref) => {
|
|
|
9982
9959
|
useOnKeyDown(["Escape", "Esc"], () => handleClose());
|
|
9983
9960
|
const hasTransitionedIn = useMountTransition(isOpen, 200);
|
|
9984
9961
|
return isOpen || hasTransitionedIn ? (0, import_react_dom3.createPortal)(
|
|
9985
|
-
/* @__PURE__ */ (0,
|
|
9962
|
+
/* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Backdrop, { isOpen: hasTransitionedIn && isOpen, children: /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(
|
|
9986
9963
|
Container9,
|
|
9987
9964
|
{
|
|
9988
9965
|
...getBaseHTMLProps(id, className, htmlProps, rest),
|
|
@@ -9995,11 +9972,11 @@ var Modal = (0, import_react75.forwardRef)((props, ref) => {
|
|
|
9995
9972
|
id: modalId,
|
|
9996
9973
|
elevation: 4,
|
|
9997
9974
|
children: [
|
|
9998
|
-
/* @__PURE__ */ (0,
|
|
9999
|
-
header3 && /* @__PURE__ */ (0,
|
|
9975
|
+
/* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(ContentContainer3, { children: [
|
|
9976
|
+
header3 && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(HeaderContainer3, { id: headerId, children: typeof header3 === "string" ? /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Typography, { typographyType: "headingSans03", children: header3 }) : header3 }),
|
|
10000
9977
|
children
|
|
10001
9978
|
] }),
|
|
10002
|
-
onClose && /* @__PURE__ */ (0,
|
|
9979
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
|
|
10003
9980
|
StyledButton3,
|
|
10004
9981
|
{
|
|
10005
9982
|
size: "small",
|
|
@@ -10019,63 +9996,63 @@ var Modal = (0, import_react75.forwardRef)((props, ref) => {
|
|
|
10019
9996
|
Modal.displayName = "Modal";
|
|
10020
9997
|
|
|
10021
9998
|
// src/components/Modal/ModalBody.tsx
|
|
10022
|
-
var
|
|
10023
|
-
var
|
|
10024
|
-
var
|
|
10025
|
-
var Container10 =
|
|
10026
|
-
var ModalBody = (0,
|
|
9999
|
+
var import_react75 = require("react");
|
|
10000
|
+
var import_styled_components68 = __toESM(require("styled-components"));
|
|
10001
|
+
var import_jsx_runtime234 = require("react/jsx-runtime");
|
|
10002
|
+
var Container10 = import_styled_components68.default.div``;
|
|
10003
|
+
var ModalBody = (0, import_react75.forwardRef)(
|
|
10027
10004
|
(props, ref) => {
|
|
10028
10005
|
const { children, scrollable, id, className, htmlProps, height, ...rest } = props;
|
|
10029
10006
|
const containerProps = {
|
|
10030
10007
|
...getBaseHTMLProps(id, className, htmlProps, rest),
|
|
10031
10008
|
ref
|
|
10032
10009
|
};
|
|
10033
|
-
return scrollable ? /* @__PURE__ */ (0,
|
|
10010
|
+
return scrollable ? /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Container10, { ...containerProps, children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(ScrollableContainer, { contentHeight: height, children }) }) : /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Container10, { ...containerProps, children });
|
|
10034
10011
|
}
|
|
10035
10012
|
);
|
|
10036
10013
|
ModalBody.displayName = "ModalBody";
|
|
10037
10014
|
|
|
10038
10015
|
// src/components/Modal/ModalActions.tsx
|
|
10039
|
-
var
|
|
10040
|
-
var
|
|
10041
|
-
var
|
|
10042
|
-
var Container11 =
|
|
10016
|
+
var import_react76 = require("react");
|
|
10017
|
+
var import_styled_components69 = __toESM(require("styled-components"));
|
|
10018
|
+
var import_jsx_runtime235 = require("react/jsx-runtime");
|
|
10019
|
+
var Container11 = import_styled_components69.default.div`
|
|
10043
10020
|
display: flex;
|
|
10044
10021
|
flex-wrap: wrap;
|
|
10045
10022
|
gap: ${modalTokens.actionsContainer.gap};
|
|
10046
10023
|
`;
|
|
10047
|
-
var ModalActions = (0,
|
|
10024
|
+
var ModalActions = (0, import_react76.forwardRef)(
|
|
10048
10025
|
({ children, ...rest }, ref) => {
|
|
10049
10026
|
const containerProps = {
|
|
10050
10027
|
ref,
|
|
10051
10028
|
...rest
|
|
10052
10029
|
};
|
|
10053
|
-
return /* @__PURE__ */ (0,
|
|
10030
|
+
return /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(Container11, { ...containerProps, children });
|
|
10054
10031
|
}
|
|
10055
10032
|
);
|
|
10056
10033
|
ModalActions.displayName = "ModalActions";
|
|
10057
10034
|
|
|
10058
10035
|
// src/components/Pagination/Pagination.tsx
|
|
10059
|
-
var
|
|
10060
|
-
var
|
|
10036
|
+
var import_react78 = require("react");
|
|
10037
|
+
var import_styled_components71 = __toESM(require("styled-components"));
|
|
10061
10038
|
|
|
10062
10039
|
// src/components/Pagination/Pagination.tokens.tsx
|
|
10063
|
-
var
|
|
10064
|
-
var { spacing: spacing28, colors: colors25 } =
|
|
10040
|
+
var import_dds_design_tokens49 = require("@norges-domstoler/dds-design-tokens");
|
|
10041
|
+
var { spacing: spacing28, colors: colors25 } = import_dds_design_tokens49.ddsBaseTokens;
|
|
10065
10042
|
var list7 = {
|
|
10066
10043
|
gap: spacing28.SizesDdsSpacingX075
|
|
10067
10044
|
};
|
|
10068
10045
|
var truncationIcon = {
|
|
10069
10046
|
color: colors25.DdsColorNeutralsGray7
|
|
10070
10047
|
};
|
|
10071
|
-
var
|
|
10048
|
+
var outerContainer3 = {
|
|
10072
10049
|
gap: spacing28.SizesDdsSpacingX075
|
|
10073
10050
|
};
|
|
10074
10051
|
var indicatorsContainer = {
|
|
10075
10052
|
gap: spacing28.SizesDdsSpacingX075
|
|
10076
10053
|
};
|
|
10077
10054
|
var paginationTokens = {
|
|
10078
|
-
outerContainer:
|
|
10055
|
+
outerContainer: outerContainer3,
|
|
10079
10056
|
indicatorsContainer,
|
|
10080
10057
|
truncationIcon,
|
|
10081
10058
|
list: list7
|
|
@@ -10115,16 +10092,16 @@ function PaginationGenerator(pagesAmount, activePage) {
|
|
|
10115
10092
|
}
|
|
10116
10093
|
|
|
10117
10094
|
// src/components/Select/Select.tsx
|
|
10118
|
-
var
|
|
10095
|
+
var import_react77 = require("react");
|
|
10119
10096
|
var import_react_select2 = __toESM(require("react-select"));
|
|
10120
10097
|
|
|
10121
10098
|
// src/components/Select/Select.styles.ts
|
|
10122
|
-
var
|
|
10099
|
+
var import_styled_components70 = __toESM(require("styled-components"));
|
|
10123
10100
|
|
|
10124
10101
|
// src/components/Select/Select.tokens.tsx
|
|
10125
|
-
var
|
|
10126
|
-
var { colors: colors26, spacing: spacing29, borderRadius: borderRadius7, border: border12 } =
|
|
10127
|
-
var { textDefault: textDefault5 } =
|
|
10102
|
+
var import_dds_design_tokens50 = require("@norges-domstoler/dds-design-tokens");
|
|
10103
|
+
var { colors: colors26, spacing: spacing29, borderRadius: borderRadius7, border: border12 } = import_dds_design_tokens50.ddsBaseTokens;
|
|
10104
|
+
var { textDefault: textDefault5 } = import_dds_design_tokens50.ddsReferenceTokens;
|
|
10128
10105
|
var placeholderTypographyTypes = {
|
|
10129
10106
|
medium: "supportingStylePlaceholderText01",
|
|
10130
10107
|
small: "supportingStylePlaceholderText02",
|
|
@@ -10135,7 +10112,7 @@ var multiValueLabelTypographyTypes = {
|
|
|
10135
10112
|
small: "bodySans01",
|
|
10136
10113
|
tiny: "supportingStyleTiny01"
|
|
10137
10114
|
};
|
|
10138
|
-
var
|
|
10115
|
+
var typographyTypes3 = {
|
|
10139
10116
|
control: inputTypographyTypes,
|
|
10140
10117
|
option: inputTypographyTypes,
|
|
10141
10118
|
placeholder: placeholderTypographyTypes,
|
|
@@ -10306,7 +10283,7 @@ var prefix = "dds-select";
|
|
|
10306
10283
|
function getContainerControlPadding(componentSize, isMulti) {
|
|
10307
10284
|
return isMulti ? control2.isMulti.sizes[componentSize].padding : control2.sizes[componentSize].padding;
|
|
10308
10285
|
}
|
|
10309
|
-
var Container12 =
|
|
10286
|
+
var Container12 = import_styled_components70.default.div`
|
|
10310
10287
|
margin: 0;
|
|
10311
10288
|
width: ${({ $width }) => $width};
|
|
10312
10289
|
position: relative;
|
|
@@ -10315,23 +10292,23 @@ var Container12 = import_styled_components71.default.div`
|
|
|
10315
10292
|
${selection}
|
|
10316
10293
|
}
|
|
10317
10294
|
|
|
10318
|
-
${({ $componentSize, $isMulti }) =>
|
|
10295
|
+
${({ $componentSize, $isMulti }) => import_styled_components70.css`
|
|
10319
10296
|
.${prefix}__control {
|
|
10320
10297
|
padding: ${getContainerControlPadding($componentSize, $isMulti)};
|
|
10321
|
-
${getFontStyling(
|
|
10298
|
+
${getFontStyling(typographyTypes3.control[$componentSize], true)}
|
|
10322
10299
|
}
|
|
10323
10300
|
.${prefix}__option {
|
|
10324
|
-
${getFontStyling(
|
|
10301
|
+
${getFontStyling(typographyTypes3.option[$componentSize], true)}
|
|
10325
10302
|
}
|
|
10326
10303
|
.${prefix}__placeholder {
|
|
10327
|
-
${getFontStyling(
|
|
10304
|
+
${getFontStyling(typographyTypes3.placeholder[$componentSize])}
|
|
10328
10305
|
}
|
|
10329
10306
|
.${prefix}__menu-notice--no-options {
|
|
10330
|
-
${getFontStyling(
|
|
10307
|
+
${getFontStyling(typographyTypes3.noOptionsMessage[$componentSize])}
|
|
10331
10308
|
}
|
|
10332
10309
|
`}
|
|
10333
10310
|
|
|
10334
|
-
${({ $errorMessage }) => $errorMessage &&
|
|
10311
|
+
${({ $errorMessage }) => $errorMessage && import_styled_components70.css`
|
|
10335
10312
|
.${prefix}__control {
|
|
10336
10313
|
${dangerInputfield}
|
|
10337
10314
|
}
|
|
@@ -10350,7 +10327,7 @@ var Container12 = import_styled_components71.default.div`
|
|
|
10350
10327
|
color: ${dropdownIndicator2.hover.color};
|
|
10351
10328
|
}
|
|
10352
10329
|
|
|
10353
|
-
${({ $isDisabled, $readOnly }) => $readOnly ?
|
|
10330
|
+
${({ $isDisabled, $readOnly }) => $readOnly ? import_styled_components70.css`
|
|
10354
10331
|
.${prefix}__control {
|
|
10355
10332
|
border-color: ${control2.readOnly.borderColor};
|
|
10356
10333
|
background-color: ${control2.readOnly.backgroundColor};
|
|
@@ -10360,7 +10337,7 @@ var Container12 = import_styled_components71.default.div`
|
|
|
10360
10337
|
.${prefix}__dropdown-indicator {
|
|
10361
10338
|
color: ${dropdownIndicator2.readOnly.color};
|
|
10362
10339
|
}
|
|
10363
|
-
` : $isDisabled ?
|
|
10340
|
+
` : $isDisabled ? import_styled_components70.css`
|
|
10364
10341
|
cursor: not-allowed;
|
|
10365
10342
|
.${prefix}__control {
|
|
10366
10343
|
border-color: ${control2.disabled.borderColor};
|
|
@@ -10371,14 +10348,14 @@ var Container12 = import_styled_components71.default.div`
|
|
|
10371
10348
|
}
|
|
10372
10349
|
` : ""}
|
|
10373
10350
|
`;
|
|
10374
|
-
var InnerSingleValue =
|
|
10351
|
+
var InnerSingleValue = import_styled_components70.default.div`
|
|
10375
10352
|
overflow: hidden;
|
|
10376
10353
|
text-overflow: ellipsis;
|
|
10377
10354
|
white-space: nowrap;
|
|
10378
10355
|
box-sizing: border-box;
|
|
10379
10356
|
max-width: 100%;
|
|
10380
10357
|
`;
|
|
10381
|
-
var StyledIcon4 = (0,
|
|
10358
|
+
var StyledIcon4 = (0, import_styled_components70.default)(Icon)`
|
|
10382
10359
|
margin-right: ${icon9.marginRight};
|
|
10383
10360
|
`;
|
|
10384
10361
|
var getCustomStyles = (size2) => ({
|
|
@@ -10441,7 +10418,7 @@ var getCustomStyles = (size2) => ({
|
|
|
10441
10418
|
multiValueLabel: (provided) => ({
|
|
10442
10419
|
...provided,
|
|
10443
10420
|
padding: multiValueLabel2.padding,
|
|
10444
|
-
...getFontStyling(
|
|
10421
|
+
...getFontStyling(typographyTypes3.multiValueLabel[size2]),
|
|
10445
10422
|
color: multiValueLabel2.color
|
|
10446
10423
|
}),
|
|
10447
10424
|
multiValueRemove: (provided, state) => state.selectProps.isDisabled ? {
|
|
@@ -10483,7 +10460,7 @@ var getCustomStyles = (size2) => ({
|
|
|
10483
10460
|
boxSizing: "border-box"
|
|
10484
10461
|
}),
|
|
10485
10462
|
groupHeading: () => ({
|
|
10486
|
-
...getFontStyling(
|
|
10463
|
+
...getFontStyling(typographyTypes3.groupHeading),
|
|
10487
10464
|
color: groupHeading2.color,
|
|
10488
10465
|
padding: groupHeading2.padding
|
|
10489
10466
|
}),
|
|
@@ -10541,7 +10518,7 @@ var getCustomStyles = (size2) => ({
|
|
|
10541
10518
|
|
|
10542
10519
|
// src/components/Select/SelectComponents.tsx
|
|
10543
10520
|
var import_react_select = require("react-select");
|
|
10544
|
-
var
|
|
10521
|
+
var import_jsx_runtime236 = require("react/jsx-runtime");
|
|
10545
10522
|
var {
|
|
10546
10523
|
Option,
|
|
10547
10524
|
NoOptionsMessage,
|
|
@@ -10552,17 +10529,17 @@ var {
|
|
|
10552
10529
|
MultiValueRemove,
|
|
10553
10530
|
Control
|
|
10554
10531
|
} = import_react_select.components;
|
|
10555
|
-
var DDSOption = (props, componentSize) => /* @__PURE__ */ (0,
|
|
10556
|
-
props.isSelected && /* @__PURE__ */ (0,
|
|
10532
|
+
var DDSOption = (props, componentSize) => /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)(Option, { ...props, children: [
|
|
10533
|
+
props.isSelected && /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Icon, { icon: CheckIcon, iconSize: getFormInputIconSize(componentSize) }),
|
|
10557
10534
|
props.children
|
|
10558
10535
|
] });
|
|
10559
|
-
var CustomOption = (props, Element) => /* @__PURE__ */ (0,
|
|
10560
|
-
var CustomSingleValue = (props, id, Element) => /* @__PURE__ */ (0,
|
|
10561
|
-
var DDSNoOptionsMessage = (props) => /* @__PURE__ */ (0,
|
|
10562
|
-
var DDSClearIndicator = (props, size2) => /* @__PURE__ */ (0,
|
|
10563
|
-
var DDSMultiValueRemove = (props) => /* @__PURE__ */ (0,
|
|
10564
|
-
var DDSDropdownIndicator = (props, size2) => /* @__PURE__ */ (0,
|
|
10565
|
-
var DDSInput = (props, ariaInvalid, ariaDescribedby) => /* @__PURE__ */ (0,
|
|
10536
|
+
var CustomOption = (props, Element) => /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Option, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Element, { ...props }) });
|
|
10537
|
+
var CustomSingleValue = (props, id, Element) => /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(SingleValue, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(InnerSingleValue, { id, children: Element ? /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Element, { ...props }) : props.children }) });
|
|
10538
|
+
var DDSNoOptionsMessage = (props) => /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(NoOptionsMessage, { ...props, children: "Ingen treff" });
|
|
10539
|
+
var DDSClearIndicator = (props, size2) => /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(ClearIndicator, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Icon, { icon: CloseSmallIcon, iconSize: getFormInputIconSize(size2) }) });
|
|
10540
|
+
var DDSMultiValueRemove = (props) => /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(MultiValueRemove, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Icon, { icon: CloseSmallIcon, iconSize: "small" }) });
|
|
10541
|
+
var DDSDropdownIndicator = (props, size2) => /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(DropdownIndicator, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Icon, { icon: ChevronDownIcon, iconSize: getFormInputIconSize(size2) }) });
|
|
10542
|
+
var DDSInput = (props, ariaInvalid, ariaDescribedby) => /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(
|
|
10566
10543
|
Input2,
|
|
10567
10544
|
{
|
|
10568
10545
|
...props,
|
|
@@ -10570,13 +10547,13 @@ var DDSInput = (props, ariaInvalid, ariaDescribedby) => /* @__PURE__ */ (0, impo
|
|
|
10570
10547
|
"aria-describedby": ariaDescribedby
|
|
10571
10548
|
}
|
|
10572
10549
|
);
|
|
10573
|
-
var DDSControl = (props, componentSize, icon12) => /* @__PURE__ */ (0,
|
|
10574
|
-
icon12 && /* @__PURE__ */ (0,
|
|
10550
|
+
var DDSControl = (props, componentSize, icon12) => /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)(Control, { ...props, children: [
|
|
10551
|
+
icon12 && /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(StyledIcon4, { icon: icon12, iconSize: getFormInputIconSize(componentSize) }),
|
|
10575
10552
|
props.children
|
|
10576
10553
|
] });
|
|
10577
10554
|
|
|
10578
10555
|
// src/components/Select/Select.tsx
|
|
10579
|
-
var
|
|
10556
|
+
var import_jsx_runtime237 = require("react/jsx-runtime");
|
|
10580
10557
|
var defaultWidth5 = "320px";
|
|
10581
10558
|
var getPlaceholder = (placeholder3, isMulti) => placeholder3 ? placeholder3 : isMulti ? "-- Velg en eller flere --" : "-- Velg fra listen --";
|
|
10582
10559
|
function SelectInner(props, ref) {
|
|
@@ -10605,7 +10582,7 @@ function SelectInner(props, ref) {
|
|
|
10605
10582
|
customSingleValueElement,
|
|
10606
10583
|
...rest
|
|
10607
10584
|
} = props;
|
|
10608
|
-
const generatedId = (0,
|
|
10585
|
+
const generatedId = (0, import_react77.useId)();
|
|
10609
10586
|
const uniqueId = id != null ? id : `${generatedId}-select`;
|
|
10610
10587
|
const singleValueId = !isMulti ? `${uniqueId}-singleValue` : void 0;
|
|
10611
10588
|
const hasLabel = !!label3;
|
|
@@ -10663,57 +10640,57 @@ function SelectInner(props, ref) {
|
|
|
10663
10640
|
menuPortalTarget: document == null ? void 0 : document.body,
|
|
10664
10641
|
...rest
|
|
10665
10642
|
};
|
|
10666
|
-
return /* @__PURE__ */ (0,
|
|
10667
|
-
hasLabel && /* @__PURE__ */ (0,
|
|
10668
|
-
/* @__PURE__ */ (0,
|
|
10643
|
+
return /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(Container12, { ...containerProps, children: [
|
|
10644
|
+
hasLabel && /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Label, { htmlFor: uniqueId, showRequiredStyling, children: label3 }),
|
|
10645
|
+
/* @__PURE__ */ (0, import_jsx_runtime237.jsx)(import_react_select2.default, { ...reactSelectProps, ref }),
|
|
10669
10646
|
renderInputMessage(tip, tipId, errorMessage, errorMessageId)
|
|
10670
10647
|
] });
|
|
10671
10648
|
}
|
|
10672
|
-
var Select = (0,
|
|
10649
|
+
var Select = (0, import_react77.forwardRef)(SelectInner);
|
|
10673
10650
|
Select.displayName = "Select";
|
|
10674
10651
|
|
|
10675
10652
|
// src/components/Select/utils.ts
|
|
10676
10653
|
var createSelectOptions = (...args) => args.map((v) => ({ label: v, value: v }));
|
|
10677
10654
|
|
|
10678
10655
|
// src/components/Pagination/Pagination.tsx
|
|
10679
|
-
var
|
|
10680
|
-
var { outerContainer:
|
|
10681
|
-
var Nav2 =
|
|
10656
|
+
var import_jsx_runtime238 = require("react/jsx-runtime");
|
|
10657
|
+
var { outerContainer: outerContainer4, indicatorsContainer: indicatorsContainer2, truncationIcon: truncationIcon2, list: list8 } = paginationTokens;
|
|
10658
|
+
var Nav2 = import_styled_components71.default.nav`
|
|
10682
10659
|
display: flex;
|
|
10683
10660
|
align-items: center;
|
|
10684
10661
|
`;
|
|
10685
|
-
var List3 =
|
|
10662
|
+
var List3 = import_styled_components71.default.ol`
|
|
10686
10663
|
display: grid;
|
|
10687
10664
|
grid-auto-flow: column;
|
|
10688
10665
|
gap: ${list8.gap};
|
|
10689
10666
|
margin: 0;
|
|
10690
10667
|
padding: 0;
|
|
10691
10668
|
`;
|
|
10692
|
-
var ListItem3 =
|
|
10669
|
+
var ListItem3 = import_styled_components71.default.li`
|
|
10693
10670
|
display: inline-grid;
|
|
10694
10671
|
align-content: center;
|
|
10695
|
-
${({ $isHidden }) => $isHidden &&
|
|
10672
|
+
${({ $isHidden }) => $isHidden && import_styled_components71.css`
|
|
10696
10673
|
visibility: hidden;
|
|
10697
10674
|
`}
|
|
10698
10675
|
`;
|
|
10699
|
-
var
|
|
10676
|
+
var OuterContainer = import_styled_components71.default.div`
|
|
10700
10677
|
display: flex;
|
|
10701
|
-
gap: ${
|
|
10702
|
-
${({ $smallScreen }) => $smallScreen ?
|
|
10678
|
+
gap: ${outerContainer4.gap};
|
|
10679
|
+
${({ $smallScreen }) => $smallScreen ? import_styled_components71.css`
|
|
10703
10680
|
flex-direction: column;
|
|
10704
10681
|
align-items: center;
|
|
10705
|
-
` :
|
|
10682
|
+
` : import_styled_components71.css`
|
|
10706
10683
|
justify-content: space-between;
|
|
10707
10684
|
flex-wrap: wrap;
|
|
10708
10685
|
`}
|
|
10709
10686
|
`;
|
|
10710
|
-
var IndicatorsContainer =
|
|
10687
|
+
var IndicatorsContainer = import_styled_components71.default.div`
|
|
10711
10688
|
display: grid;
|
|
10712
10689
|
grid-auto-flow: column;
|
|
10713
10690
|
align-items: center;
|
|
10714
10691
|
gap: ${indicatorsContainer2.gap};
|
|
10715
10692
|
`;
|
|
10716
|
-
var Pagination = (0,
|
|
10693
|
+
var Pagination = (0, import_react78.forwardRef)(
|
|
10717
10694
|
(props, ref) => {
|
|
10718
10695
|
const {
|
|
10719
10696
|
itemsAmount,
|
|
@@ -10736,8 +10713,8 @@ var Pagination = (0, import_react79.forwardRef)(
|
|
|
10736
10713
|
htmlProps,
|
|
10737
10714
|
...rest
|
|
10738
10715
|
} = props;
|
|
10739
|
-
const [activePage, setActivePage] = (0,
|
|
10740
|
-
const [itemsPerPage, setItemsPerPage] = (0,
|
|
10716
|
+
const [activePage, setActivePage] = (0, import_react78.useState)(defaultActivePage);
|
|
10717
|
+
const [itemsPerPage, setItemsPerPage] = (0, import_react78.useState)(defaultItemsPerPage);
|
|
10741
10718
|
const pagesLength = Math.ceil(itemsAmount / itemsPerPage);
|
|
10742
10719
|
const items = PaginationGenerator(pagesLength, activePage);
|
|
10743
10720
|
const onPageChange = (event, page) => {
|
|
@@ -10756,7 +10733,7 @@ var Pagination = (0, import_react79.forwardRef)(
|
|
|
10756
10733
|
};
|
|
10757
10734
|
const listItems = items.length > 0 ? items.map((item, i) => {
|
|
10758
10735
|
const isActive = item === activePage;
|
|
10759
|
-
return /* @__PURE__ */ (0,
|
|
10736
|
+
return /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(ListItem3, { children: item !== "truncator" ? /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
|
|
10760
10737
|
Button,
|
|
10761
10738
|
{
|
|
10762
10739
|
purpose: isActive ? "primary" : "secondary",
|
|
@@ -10768,7 +10745,7 @@ var Pagination = (0, import_react79.forwardRef)(
|
|
|
10768
10745
|
"aria-label": isActive ? `N\xE5v\xE6rende side (side ${item})` : `G\xE5 til side ${item}`,
|
|
10769
10746
|
children: item
|
|
10770
10747
|
}
|
|
10771
|
-
) : /* @__PURE__ */ (0,
|
|
10748
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
|
|
10772
10749
|
Icon,
|
|
10773
10750
|
{
|
|
10774
10751
|
icon: MoreHorizontalIcon,
|
|
@@ -10776,7 +10753,7 @@ var Pagination = (0, import_react79.forwardRef)(
|
|
|
10776
10753
|
}
|
|
10777
10754
|
) }, `pagination-item-${i}`);
|
|
10778
10755
|
}) : void 0;
|
|
10779
|
-
const previousPageButton = /* @__PURE__ */ (0,
|
|
10756
|
+
const previousPageButton = /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
|
|
10780
10757
|
Button,
|
|
10781
10758
|
{
|
|
10782
10759
|
purpose: "secondary",
|
|
@@ -10789,7 +10766,7 @@ var Pagination = (0, import_react79.forwardRef)(
|
|
|
10789
10766
|
"aria-label": "G\xE5 til forrige siden"
|
|
10790
10767
|
}
|
|
10791
10768
|
);
|
|
10792
|
-
const nextPageButton = /* @__PURE__ */ (0,
|
|
10769
|
+
const nextPageButton = /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
|
|
10793
10770
|
Button,
|
|
10794
10771
|
{
|
|
10795
10772
|
purpose: "secondary",
|
|
@@ -10811,13 +10788,13 @@ var Pagination = (0, import_react79.forwardRef)(
|
|
|
10811
10788
|
};
|
|
10812
10789
|
const isOnFirstPage = activePage === 1;
|
|
10813
10790
|
const isOnLastPage = activePage === pagesLength;
|
|
10814
|
-
const
|
|
10815
|
-
/* @__PURE__ */ (0,
|
|
10791
|
+
const navigation2 = withPagination ? /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Nav2, { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(List3, { children: [
|
|
10792
|
+
/* @__PURE__ */ (0, import_jsx_runtime238.jsx)(ListItem3, { $isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: previousPageButton }),
|
|
10816
10793
|
listItems,
|
|
10817
|
-
/* @__PURE__ */ (0,
|
|
10794
|
+
/* @__PURE__ */ (0, import_jsx_runtime238.jsx)(ListItem3, { $isHidden: isOnLastPage, "aria-hidden": isOnLastPage, children: nextPageButton })
|
|
10818
10795
|
] }) }) : null;
|
|
10819
|
-
const smallScreenNavigation = withPagination ? /* @__PURE__ */ (0,
|
|
10820
|
-
/* @__PURE__ */ (0,
|
|
10796
|
+
const smallScreenNavigation = withPagination ? /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Nav2, { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(List3, { children: [
|
|
10797
|
+
/* @__PURE__ */ (0, import_jsx_runtime238.jsx)(ListItem3, { $isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
|
|
10821
10798
|
Button,
|
|
10822
10799
|
{
|
|
10823
10800
|
purpose: "secondary",
|
|
@@ -10830,8 +10807,8 @@ var Pagination = (0, import_react79.forwardRef)(
|
|
|
10830
10807
|
"aria-label": "G\xE5 til f\xF8rste siden"
|
|
10831
10808
|
}
|
|
10832
10809
|
) }),
|
|
10833
|
-
/* @__PURE__ */ (0,
|
|
10834
|
-
/* @__PURE__ */ (0,
|
|
10810
|
+
/* @__PURE__ */ (0, import_jsx_runtime238.jsx)(ListItem3, { $isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: previousPageButton }),
|
|
10811
|
+
/* @__PURE__ */ (0, import_jsx_runtime238.jsx)(ListItem3, { children: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
|
|
10835
10812
|
Button,
|
|
10836
10813
|
{
|
|
10837
10814
|
size: "small",
|
|
@@ -10841,8 +10818,8 @@ var Pagination = (0, import_react79.forwardRef)(
|
|
|
10841
10818
|
children: activePage
|
|
10842
10819
|
}
|
|
10843
10820
|
) }),
|
|
10844
|
-
/* @__PURE__ */ (0,
|
|
10845
|
-
/* @__PURE__ */ (0,
|
|
10821
|
+
/* @__PURE__ */ (0, import_jsx_runtime238.jsx)(ListItem3, { $isHidden: isOnLastPage, "aria-hidden": isOnLastPage, children: nextPageButton }),
|
|
10822
|
+
/* @__PURE__ */ (0, import_jsx_runtime238.jsx)(ListItem3, { $isHidden: isOnLastPage, "aria-hidden": isOnLastPage, children: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
|
|
10846
10823
|
Button,
|
|
10847
10824
|
{
|
|
10848
10825
|
purpose: "secondary",
|
|
@@ -10858,10 +10835,10 @@ var Pagination = (0, import_react79.forwardRef)(
|
|
|
10858
10835
|
] }) }) : null;
|
|
10859
10836
|
const activePageFirstItem = activePage === 1 ? 1 : activePage * itemsPerPage - itemsPerPage + 1;
|
|
10860
10837
|
const activePageLastItem = activePage === pagesLength ? itemsAmount : activePage * itemsPerPage;
|
|
10861
|
-
const navigationToBeRendered = smallScreen ? smallScreenNavigation :
|
|
10862
|
-
return !withCounter && !withSelect ? navigationToBeRendered : /* @__PURE__ */ (0,
|
|
10863
|
-
/* @__PURE__ */ (0,
|
|
10864
|
-
withSelect && /* @__PURE__ */ (0,
|
|
10838
|
+
const navigationToBeRendered = smallScreen ? smallScreenNavigation : navigation2;
|
|
10839
|
+
return !withCounter && !withSelect ? navigationToBeRendered : /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(OuterContainer, { ...containerProps, children: [
|
|
10840
|
+
/* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(IndicatorsContainer, { children: [
|
|
10841
|
+
withSelect && /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
|
|
10865
10842
|
Select,
|
|
10866
10843
|
{
|
|
10867
10844
|
options: selectOptions,
|
|
@@ -10876,7 +10853,7 @@ var Pagination = (0, import_react79.forwardRef)(
|
|
|
10876
10853
|
"aria-label": "Antall elementer per side"
|
|
10877
10854
|
}
|
|
10878
10855
|
),
|
|
10879
|
-
withCounter && /* @__PURE__ */ (0,
|
|
10856
|
+
withCounter && /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(Typography, { typographyType: "supportingStyleLabel01", as: "p", children: [
|
|
10880
10857
|
"Viser ",
|
|
10881
10858
|
activePageFirstItem,
|
|
10882
10859
|
"-",
|
|
@@ -10892,13 +10869,13 @@ var Pagination = (0, import_react79.forwardRef)(
|
|
|
10892
10869
|
Pagination.displayName = "Pagination";
|
|
10893
10870
|
|
|
10894
10871
|
// src/components/Popover/Popover.tsx
|
|
10895
|
-
var
|
|
10896
|
-
var
|
|
10897
|
-
var
|
|
10872
|
+
var import_dds_design_tokens52 = require("@norges-domstoler/dds-design-tokens");
|
|
10873
|
+
var import_react79 = require("react");
|
|
10874
|
+
var import_styled_components72 = __toESM(require("styled-components"));
|
|
10898
10875
|
|
|
10899
10876
|
// src/components/Popover/Popover.tokens.tsx
|
|
10900
|
-
var
|
|
10901
|
-
var { spacing: spacing30 } =
|
|
10877
|
+
var import_dds_design_tokens51 = require("@norges-domstoler/dds-design-tokens");
|
|
10878
|
+
var { spacing: spacing30 } = import_dds_design_tokens51.ddsBaseTokens;
|
|
10902
10879
|
var wrapper3 = {
|
|
10903
10880
|
padding: `${spacing30.SizesDdsSpacingX075} ${spacing30.SizesDdsSpacingX1} ${spacing30.SizesDdsSpacingX15} ${spacing30.SizesDdsSpacingX1}`
|
|
10904
10881
|
};
|
|
@@ -10922,10 +10899,10 @@ var popoverTokens2 = {
|
|
|
10922
10899
|
};
|
|
10923
10900
|
|
|
10924
10901
|
// src/components/Popover/Popover.tsx
|
|
10925
|
-
var
|
|
10926
|
-
var { spacing: Spacing } =
|
|
10902
|
+
var import_jsx_runtime239 = require("react/jsx-runtime");
|
|
10903
|
+
var { spacing: Spacing } = import_dds_design_tokens52.ddsBaseTokens;
|
|
10927
10904
|
var { wrapper: wrapper4, content: content4, closeButton: closeButton2, title: title2 } = popoverTokens2;
|
|
10928
|
-
var Wrapper4 = (0,
|
|
10905
|
+
var Wrapper4 = (0, import_styled_components72.default)(Paper)`
|
|
10929
10906
|
opacity: 0;
|
|
10930
10907
|
${({ $hasTransitionedIn, $isOpen }) => $hasTransitionedIn && visibilityTransition($hasTransitionedIn && $isOpen)}
|
|
10931
10908
|
position: absolute;
|
|
@@ -10936,7 +10913,7 @@ var Wrapper4 = (0, import_styled_components73.default)(Paper)`
|
|
|
10936
10913
|
&:focus-visible {
|
|
10937
10914
|
${focusVisible}
|
|
10938
10915
|
}
|
|
10939
|
-
${({ $sizeProps }) => $sizeProps &&
|
|
10916
|
+
${({ $sizeProps }) => $sizeProps && import_styled_components72.css`
|
|
10940
10917
|
width: ${$sizeProps.width};
|
|
10941
10918
|
height: ${$sizeProps.height};
|
|
10942
10919
|
min-width: ${$sizeProps.minWidth};
|
|
@@ -10945,20 +10922,20 @@ var Wrapper4 = (0, import_styled_components73.default)(Paper)`
|
|
|
10945
10922
|
max-height: ${$sizeProps.maxHeight};
|
|
10946
10923
|
`}
|
|
10947
10924
|
`;
|
|
10948
|
-
var TitleContainer =
|
|
10925
|
+
var TitleContainer = import_styled_components72.default.div`
|
|
10949
10926
|
margin-right: ${title2.marginRight};
|
|
10950
10927
|
`;
|
|
10951
|
-
var ContentContainer4 =
|
|
10952
|
-
${({ $withCloseButton, $hasTitle }) => $withCloseButton && !$hasTitle &&
|
|
10928
|
+
var ContentContainer4 = import_styled_components72.default.div`
|
|
10929
|
+
${({ $withCloseButton, $hasTitle }) => $withCloseButton && !$hasTitle && import_styled_components72.css`
|
|
10953
10930
|
margin-top: ${content4.noTitle.marginTop};
|
|
10954
10931
|
`}
|
|
10955
10932
|
`;
|
|
10956
|
-
var StyledButton4 = (0,
|
|
10933
|
+
var StyledButton4 = (0, import_styled_components72.default)(Button)`
|
|
10957
10934
|
position: absolute;
|
|
10958
10935
|
top: ${closeButton2.top};
|
|
10959
10936
|
right: ${closeButton2.right};
|
|
10960
10937
|
`;
|
|
10961
|
-
var Popover = (0,
|
|
10938
|
+
var Popover = (0, import_react79.forwardRef)(
|
|
10962
10939
|
(props, ref) => {
|
|
10963
10940
|
const {
|
|
10964
10941
|
title: title3,
|
|
@@ -10998,7 +10975,7 @@ var Popover = (0, import_react80.forwardRef)(
|
|
|
10998
10975
|
if (isOpen)
|
|
10999
10976
|
onClose && onClose();
|
|
11000
10977
|
});
|
|
11001
|
-
return isOpen || hasTransitionedIn ? /* @__PURE__ */ (0,
|
|
10978
|
+
return isOpen || hasTransitionedIn ? /* @__PURE__ */ (0, import_jsx_runtime239.jsxs)(
|
|
11002
10979
|
Wrapper4,
|
|
11003
10980
|
{
|
|
11004
10981
|
...getBaseHTMLProps(id, className, htmlProps, rest),
|
|
@@ -11011,8 +10988,8 @@ var Popover = (0, import_react80.forwardRef)(
|
|
|
11011
10988
|
elevation: 3,
|
|
11012
10989
|
border: "light",
|
|
11013
10990
|
children: [
|
|
11014
|
-
title3 && /* @__PURE__ */ (0,
|
|
11015
|
-
/* @__PURE__ */ (0,
|
|
10991
|
+
title3 && /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(TitleContainer, { children: typeof title3 === "string" ? /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(Typography, { typographyType: "headingSans02", children: title3 }) : title3 }),
|
|
10992
|
+
/* @__PURE__ */ (0, import_jsx_runtime239.jsx)(
|
|
11016
10993
|
ContentContainer4,
|
|
11017
10994
|
{
|
|
11018
10995
|
$hasTitle: !!title3,
|
|
@@ -11020,7 +10997,7 @@ var Popover = (0, import_react80.forwardRef)(
|
|
|
11020
10997
|
children
|
|
11021
10998
|
}
|
|
11022
10999
|
),
|
|
11023
|
-
withCloseButton && /* @__PURE__ */ (0,
|
|
11000
|
+
withCloseButton && /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(
|
|
11024
11001
|
StyledButton4,
|
|
11025
11002
|
{
|
|
11026
11003
|
icon: CloseIcon,
|
|
@@ -11039,8 +11016,8 @@ var Popover = (0, import_react80.forwardRef)(
|
|
|
11039
11016
|
Popover.displayName = "Popover";
|
|
11040
11017
|
|
|
11041
11018
|
// src/components/Popover/PopoverGroup.tsx
|
|
11042
|
-
var
|
|
11043
|
-
var
|
|
11019
|
+
var import_react80 = require("react");
|
|
11020
|
+
var import_jsx_runtime240 = require("react/jsx-runtime");
|
|
11044
11021
|
var PopoverGroup = ({
|
|
11045
11022
|
isOpen = false,
|
|
11046
11023
|
onCloseButtonClick,
|
|
@@ -11048,8 +11025,8 @@ var PopoverGroup = ({
|
|
|
11048
11025
|
children,
|
|
11049
11026
|
popoverId
|
|
11050
11027
|
}) => {
|
|
11051
|
-
const [open, setOpen] = (0,
|
|
11052
|
-
const generatedId = (0,
|
|
11028
|
+
const [open, setOpen] = (0, import_react80.useState)(isOpen);
|
|
11029
|
+
const generatedId = (0, import_react80.useId)();
|
|
11053
11030
|
const uniquePopoverId = popoverId != null ? popoverId : `${generatedId}-popover`;
|
|
11054
11031
|
const handleOnCloseButtonClick = () => {
|
|
11055
11032
|
setOpen(false);
|
|
@@ -11059,8 +11036,8 @@ var PopoverGroup = ({
|
|
|
11059
11036
|
setOpen(!open);
|
|
11060
11037
|
onTriggerClick && onTriggerClick();
|
|
11061
11038
|
};
|
|
11062
|
-
const buttonRef = (0,
|
|
11063
|
-
const popoverRef = (0,
|
|
11039
|
+
const buttonRef = (0, import_react80.useRef)(null);
|
|
11040
|
+
const popoverRef = (0, import_react80.useRef)(null);
|
|
11064
11041
|
useOnKeyDown(["Esc", "Escape"], () => {
|
|
11065
11042
|
var _a;
|
|
11066
11043
|
if (open) {
|
|
@@ -11069,14 +11046,14 @@ var PopoverGroup = ({
|
|
|
11069
11046
|
}
|
|
11070
11047
|
});
|
|
11071
11048
|
const handleClose = () => setOpen(false);
|
|
11072
|
-
const Children9 =
|
|
11073
|
-
return (0,
|
|
11049
|
+
const Children9 = import_react80.Children.map(children, (child, childIndex) => {
|
|
11050
|
+
return (0, import_react80.isValidElement)(child) && (childIndex === 0 ? (0, import_react80.cloneElement)(child, {
|
|
11074
11051
|
"aria-haspopup": "dialog",
|
|
11075
11052
|
"aria-controls": uniquePopoverId,
|
|
11076
11053
|
"aria-expanded": open,
|
|
11077
11054
|
onClick: handleOnTriggerClick,
|
|
11078
11055
|
ref: buttonRef
|
|
11079
|
-
}) : (0,
|
|
11056
|
+
}) : (0, import_react80.cloneElement)(child, {
|
|
11080
11057
|
isOpen: open,
|
|
11081
11058
|
"aria-hidden": !open,
|
|
11082
11059
|
id: uniquePopoverId,
|
|
@@ -11086,27 +11063,27 @@ var PopoverGroup = ({
|
|
|
11086
11063
|
onClose: handleClose
|
|
11087
11064
|
}));
|
|
11088
11065
|
});
|
|
11089
|
-
return /* @__PURE__ */ (0,
|
|
11066
|
+
return /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(import_jsx_runtime240.Fragment, { children: Children9 });
|
|
11090
11067
|
};
|
|
11091
11068
|
PopoverGroup.displayName = "PopoverGroup";
|
|
11092
11069
|
|
|
11093
11070
|
// src/components/ProgressTracker/ProgressTracker.tsx
|
|
11094
|
-
var
|
|
11095
|
-
var
|
|
11071
|
+
var import_react83 = require("react");
|
|
11072
|
+
var import_styled_components74 = __toESM(require("styled-components"));
|
|
11096
11073
|
|
|
11097
11074
|
// src/components/ProgressTracker/ProgressTracker.context.tsx
|
|
11098
|
-
var
|
|
11099
|
-
var ProgressTrackerContext = (0,
|
|
11075
|
+
var import_react81 = require("react");
|
|
11076
|
+
var ProgressTrackerContext = (0, import_react81.createContext)(
|
|
11100
11077
|
{
|
|
11101
11078
|
activeStep: 0
|
|
11102
11079
|
}
|
|
11103
11080
|
);
|
|
11104
|
-
var useProgressTrackerContext = () => (0,
|
|
11081
|
+
var useProgressTrackerContext = () => (0, import_react81.useContext)(ProgressTrackerContext);
|
|
11105
11082
|
|
|
11106
11083
|
// src/components/ProgressTracker/ProgressTracker.tokens.tsx
|
|
11107
|
-
var
|
|
11108
|
-
var { colors: colors27, spacing: spacing31 } =
|
|
11109
|
-
var
|
|
11084
|
+
var import_dds_design_tokens53 = require("@norges-domstoler/dds-design-tokens");
|
|
11085
|
+
var { colors: colors27, spacing: spacing31 } = import_dds_design_tokens53.ddsBaseTokens;
|
|
11086
|
+
var typographyTypes4 = {
|
|
11110
11087
|
number: "bodySans01",
|
|
11111
11088
|
label: "bodySans03"
|
|
11112
11089
|
};
|
|
@@ -11183,9 +11160,9 @@ var progressTrackerTokens = {
|
|
|
11183
11160
|
};
|
|
11184
11161
|
|
|
11185
11162
|
// src/components/ProgressTracker/ProgressTrackerItem.tsx
|
|
11186
|
-
var
|
|
11187
|
-
var
|
|
11188
|
-
var
|
|
11163
|
+
var import_react82 = require("react");
|
|
11164
|
+
var import_styled_components73 = __toESM(require("styled-components"));
|
|
11165
|
+
var import_jsx_runtime241 = require("react/jsx-runtime");
|
|
11189
11166
|
var toItemState = (active, completed, disabled) => {
|
|
11190
11167
|
if (disabled) {
|
|
11191
11168
|
return "disabled";
|
|
@@ -11197,13 +11174,13 @@ var toItemState = (active, completed, disabled) => {
|
|
|
11197
11174
|
}
|
|
11198
11175
|
};
|
|
11199
11176
|
var { itemNumber: itemNumber2, itemText: itemText2, itemContentWrapper: itemContentWrapper2 } = progressTrackerTokens;
|
|
11200
|
-
var ItemWrapper =
|
|
11177
|
+
var ItemWrapper = import_styled_components73.default.li`
|
|
11201
11178
|
flex: 1;
|
|
11202
11179
|
position: relative;
|
|
11203
11180
|
display: flex;
|
|
11204
11181
|
justify-content: center;
|
|
11205
11182
|
`;
|
|
11206
|
-
var ItemNumber =
|
|
11183
|
+
var ItemNumber = import_styled_components73.default.div`
|
|
11207
11184
|
transition:
|
|
11208
11185
|
background-color 0.2s,
|
|
11209
11186
|
border-color 0.2s,
|
|
@@ -11216,37 +11193,37 @@ var ItemNumber = import_styled_components74.default.div`
|
|
|
11216
11193
|
align-items: center;
|
|
11217
11194
|
justify-content: center;
|
|
11218
11195
|
z-index: 2;
|
|
11219
|
-
${getFontStyling(
|
|
11196
|
+
${getFontStyling(typographyTypes4.number)}
|
|
11220
11197
|
font-weight: 600;
|
|
11221
11198
|
|
|
11222
11199
|
${({ $state: state }) => {
|
|
11223
11200
|
switch (state) {
|
|
11224
11201
|
case "activeIncomplete":
|
|
11225
|
-
return
|
|
11202
|
+
return import_styled_components73.css`
|
|
11226
11203
|
border-color: ${itemNumber2.active.borderColor};
|
|
11227
11204
|
color: ${itemNumber2.active.color};
|
|
11228
11205
|
background-color: ${itemNumber2.active.backgroundColor};
|
|
11229
11206
|
`;
|
|
11230
11207
|
case "activeCompleted":
|
|
11231
|
-
return
|
|
11208
|
+
return import_styled_components73.css`
|
|
11232
11209
|
border-color: ${itemNumber2.completed.borderColor};
|
|
11233
11210
|
color: ${itemNumber2.completed.color};
|
|
11234
11211
|
background-color: ${itemNumber2.completed.backgroundColor};
|
|
11235
11212
|
`;
|
|
11236
11213
|
case "inactiveCompleted":
|
|
11237
|
-
return
|
|
11214
|
+
return import_styled_components73.css`
|
|
11238
11215
|
border-color: ${itemNumber2.completed.borderColor};
|
|
11239
11216
|
color: ${itemNumber2.completed.color};
|
|
11240
11217
|
background-color: ${itemNumber2.completed.backgroundColor};
|
|
11241
11218
|
`;
|
|
11242
11219
|
case "inactiveIncomplete":
|
|
11243
|
-
return
|
|
11220
|
+
return import_styled_components73.css`
|
|
11244
11221
|
border-color: ${itemNumber2.inactive.borderColor};
|
|
11245
11222
|
color: ${itemNumber2.inactive.color};
|
|
11246
11223
|
background-color: ${itemNumber2.inactive.backgroundColor};
|
|
11247
11224
|
`;
|
|
11248
11225
|
case "disabled":
|
|
11249
|
-
return
|
|
11226
|
+
return import_styled_components73.css`
|
|
11250
11227
|
border-color: ${itemNumber2.disabled.borderColor};
|
|
11251
11228
|
color: ${itemNumber2.disabled.color};
|
|
11252
11229
|
background-color: ${itemNumber2.disabled.backgroundColor};
|
|
@@ -11254,8 +11231,8 @@ var ItemNumber = import_styled_components74.default.div`
|
|
|
11254
11231
|
}
|
|
11255
11232
|
}}
|
|
11256
11233
|
`;
|
|
11257
|
-
var ItemText =
|
|
11258
|
-
${getFontStyling(
|
|
11234
|
+
var ItemText = import_styled_components73.default.div`
|
|
11235
|
+
${getFontStyling(typographyTypes4.label)}
|
|
11259
11236
|
text-align: start;
|
|
11260
11237
|
text-decoration: ${itemText2.textDecoration};
|
|
11261
11238
|
transition: text-decoration-color 0.2s;
|
|
@@ -11264,25 +11241,25 @@ var ItemText = import_styled_components74.default.div`
|
|
|
11264
11241
|
switch (state) {
|
|
11265
11242
|
case "activeCompleted":
|
|
11266
11243
|
case "activeIncomplete":
|
|
11267
|
-
return
|
|
11244
|
+
return import_styled_components73.css`
|
|
11268
11245
|
color: ${itemText2.active.color};
|
|
11269
11246
|
text-decoration-color: ${itemText2.active.textDecorationColor};
|
|
11270
11247
|
`;
|
|
11271
11248
|
case "inactiveCompleted":
|
|
11272
11249
|
case "inactiveIncomplete":
|
|
11273
|
-
return
|
|
11250
|
+
return import_styled_components73.css`
|
|
11274
11251
|
color: ${itemText2.inactive.color};
|
|
11275
11252
|
text-decoration-color: ${itemText2.inactive.textDecorationColor};
|
|
11276
11253
|
`;
|
|
11277
11254
|
case "disabled":
|
|
11278
|
-
return
|
|
11255
|
+
return import_styled_components73.css`
|
|
11279
11256
|
color: ${itemText2.disabled.color};
|
|
11280
11257
|
text-decoration: ${itemText2.disabled.textDecoration};
|
|
11281
11258
|
`;
|
|
11282
11259
|
}
|
|
11283
11260
|
}};
|
|
11284
11261
|
`;
|
|
11285
|
-
var ItemContentWrapper =
|
|
11262
|
+
var ItemContentWrapper = import_styled_components73.default.button`
|
|
11286
11263
|
background: none;
|
|
11287
11264
|
border: none;
|
|
11288
11265
|
margin: 0;
|
|
@@ -11299,7 +11276,7 @@ var ItemContentWrapper = import_styled_components74.default.button`
|
|
|
11299
11276
|
${focusVisible}
|
|
11300
11277
|
}
|
|
11301
11278
|
|
|
11302
|
-
${({ $state: state }) => state !== "disabled" &&
|
|
11279
|
+
${({ $state: state }) => state !== "disabled" && import_styled_components73.css`
|
|
11303
11280
|
cursor: pointer;
|
|
11304
11281
|
`}
|
|
11305
11282
|
`;
|
|
@@ -11317,16 +11294,16 @@ var ProgressTrackerItem = (props) => {
|
|
|
11317
11294
|
const styleProps = {
|
|
11318
11295
|
$state: toItemState(active, completed, disabled)
|
|
11319
11296
|
};
|
|
11320
|
-
const stepNumberContent = (0,
|
|
11297
|
+
const stepNumberContent = (0, import_react82.useMemo)(() => {
|
|
11321
11298
|
if (completed) {
|
|
11322
|
-
return /* @__PURE__ */ (0,
|
|
11299
|
+
return /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(Icon, { icon: CheckIcon, iconSize: itemNumber2.iconSize });
|
|
11323
11300
|
}
|
|
11324
11301
|
if (icon12 !== void 0) {
|
|
11325
|
-
return /* @__PURE__ */ (0,
|
|
11302
|
+
return /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(Icon, { icon: icon12, iconSize: itemNumber2.iconSize });
|
|
11326
11303
|
}
|
|
11327
11304
|
return index + 1;
|
|
11328
11305
|
}, [completed, icon12, index]);
|
|
11329
|
-
return /* @__PURE__ */ (0,
|
|
11306
|
+
return /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(ItemWrapper, { "aria-current": active ? "step" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime241.jsxs)(
|
|
11330
11307
|
ItemContentWrapper,
|
|
11331
11308
|
{
|
|
11332
11309
|
...styleProps,
|
|
@@ -11334,9 +11311,9 @@ var ProgressTrackerItem = (props) => {
|
|
|
11334
11311
|
onClick: !disabled && handleStepChange ? () => handleStepChange(index) : void 0,
|
|
11335
11312
|
disabled,
|
|
11336
11313
|
children: [
|
|
11337
|
-
/* @__PURE__ */ (0,
|
|
11338
|
-
/* @__PURE__ */ (0,
|
|
11339
|
-
/* @__PURE__ */ (0,
|
|
11314
|
+
/* @__PURE__ */ (0, import_jsx_runtime241.jsx)(ItemNumber, { ...styleProps, "aria-hidden": true, children: stepNumberContent }),
|
|
11315
|
+
/* @__PURE__ */ (0, import_jsx_runtime241.jsxs)(ItemText, { ...styleProps, children: [
|
|
11316
|
+
/* @__PURE__ */ (0, import_jsx_runtime241.jsx)(VisuallyHidden, { as: "span", children: getVisuallyHiddenText(active, completed, index) }),
|
|
11340
11317
|
children
|
|
11341
11318
|
] })
|
|
11342
11319
|
]
|
|
@@ -11346,8 +11323,8 @@ var ProgressTrackerItem = (props) => {
|
|
|
11346
11323
|
ProgressTrackerItem.displayName = "ProgressTracker.Item";
|
|
11347
11324
|
|
|
11348
11325
|
// src/components/ProgressTracker/ProgressTracker.tsx
|
|
11349
|
-
var
|
|
11350
|
-
var ItemsWrapper =
|
|
11326
|
+
var import_jsx_runtime242 = require("react/jsx-runtime");
|
|
11327
|
+
var ItemsWrapper = import_styled_components74.default.ol`
|
|
11351
11328
|
display: flex;
|
|
11352
11329
|
flex-direction: column;
|
|
11353
11330
|
align-items: flex-start;
|
|
@@ -11355,7 +11332,7 @@ var ItemsWrapper = import_styled_components75.default.ol`
|
|
|
11355
11332
|
margin: 0;
|
|
11356
11333
|
padding: 0;
|
|
11357
11334
|
`;
|
|
11358
|
-
var ProgressTrackerConnector =
|
|
11335
|
+
var ProgressTrackerConnector = import_styled_components74.default.div`
|
|
11359
11336
|
margin-left: calc(
|
|
11360
11337
|
(${progressTrackerTokens.itemNumber.size} / 2) -
|
|
11361
11338
|
(${progressTrackerTokens.connector.width} / 2)
|
|
@@ -11365,7 +11342,7 @@ var ProgressTrackerConnector = import_styled_components75.default.div`
|
|
|
11365
11342
|
${progressTrackerTokens.connector.color};
|
|
11366
11343
|
`;
|
|
11367
11344
|
var ProgressTracker = (() => {
|
|
11368
|
-
const Res = (0,
|
|
11345
|
+
const Res = (0, import_react83.forwardRef)((props, ref) => {
|
|
11369
11346
|
const {
|
|
11370
11347
|
id,
|
|
11371
11348
|
activeStep = 0,
|
|
@@ -11375,12 +11352,12 @@ var ProgressTracker = (() => {
|
|
|
11375
11352
|
htmlProps,
|
|
11376
11353
|
...rest
|
|
11377
11354
|
} = props;
|
|
11378
|
-
const [thisActiveStep, setActiveStep] = (0,
|
|
11355
|
+
const [thisActiveStep, setActiveStep] = (0, import_react83.useState)(activeStep);
|
|
11379
11356
|
const handleChange = (step) => {
|
|
11380
11357
|
setActiveStep(step);
|
|
11381
11358
|
onStepChange && onStepChange(step);
|
|
11382
11359
|
};
|
|
11383
|
-
(0,
|
|
11360
|
+
(0, import_react83.useEffect)(() => {
|
|
11384
11361
|
if (activeStep !== void 0 && activeStep != thisActiveStep) {
|
|
11385
11362
|
setActiveStep(activeStep);
|
|
11386
11363
|
}
|
|
@@ -11389,20 +11366,20 @@ var ProgressTracker = (() => {
|
|
|
11389
11366
|
...getBaseHTMLProps(id, className, htmlProps, rest),
|
|
11390
11367
|
ref
|
|
11391
11368
|
};
|
|
11392
|
-
const steps = (0,
|
|
11369
|
+
const steps = (0, import_react83.useMemo)(() => {
|
|
11393
11370
|
const validChildren = removeInvalidChildren(children);
|
|
11394
11371
|
const itemsWithIndex = passIndexPropToProgressTrackerItem(validChildren);
|
|
11395
11372
|
const itemsWithConnectorsBetween = intersperseItemsWithConnector(itemsWithIndex);
|
|
11396
11373
|
return itemsWithConnectorsBetween;
|
|
11397
11374
|
}, [children]);
|
|
11398
|
-
return /* @__PURE__ */ (0,
|
|
11375
|
+
return /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
|
|
11399
11376
|
ProgressTrackerContext.Provider,
|
|
11400
11377
|
{
|
|
11401
11378
|
value: {
|
|
11402
11379
|
activeStep: thisActiveStep,
|
|
11403
11380
|
handleStepChange: handleChange
|
|
11404
11381
|
},
|
|
11405
|
-
children: /* @__PURE__ */ (0,
|
|
11382
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime242.jsx)("div", { role: "group", "aria-label": "progress", ...containerProps, children: /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(ItemsWrapper, { children: steps }) })
|
|
11406
11383
|
}
|
|
11407
11384
|
);
|
|
11408
11385
|
});
|
|
@@ -11411,43 +11388,43 @@ var ProgressTracker = (() => {
|
|
|
11411
11388
|
return Res;
|
|
11412
11389
|
})();
|
|
11413
11390
|
function removeInvalidChildren(children) {
|
|
11414
|
-
return
|
|
11391
|
+
return import_react83.Children.toArray(children).filter(import_react83.isValidElement);
|
|
11415
11392
|
}
|
|
11416
11393
|
function passIndexPropToProgressTrackerItem(children) {
|
|
11417
|
-
return
|
|
11394
|
+
return import_react83.Children.map(
|
|
11418
11395
|
children,
|
|
11419
|
-
(item, index) => (0,
|
|
11396
|
+
(item, index) => (0, import_react83.cloneElement)(item, {
|
|
11420
11397
|
...item.props,
|
|
11421
11398
|
index
|
|
11422
11399
|
})
|
|
11423
11400
|
);
|
|
11424
11401
|
}
|
|
11425
|
-
var intersperseItemsWithConnector = (children) =>
|
|
11402
|
+
var intersperseItemsWithConnector = (children) => import_react83.Children.map(children, (child, index) => {
|
|
11426
11403
|
if (index === 0) {
|
|
11427
11404
|
return child;
|
|
11428
11405
|
}
|
|
11429
|
-
return /* @__PURE__ */ (0,
|
|
11430
|
-
/* @__PURE__ */ (0,
|
|
11406
|
+
return /* @__PURE__ */ (0, import_jsx_runtime242.jsxs)(import_react83.Fragment, { children: [
|
|
11407
|
+
/* @__PURE__ */ (0, import_jsx_runtime242.jsx)(ProgressTrackerConnector, { "aria-hidden": true }),
|
|
11431
11408
|
child
|
|
11432
11409
|
] }, index);
|
|
11433
11410
|
});
|
|
11434
11411
|
|
|
11435
11412
|
// src/components/Search/Search.tsx
|
|
11436
|
-
var
|
|
11437
|
-
var
|
|
11413
|
+
var import_react86 = require("react");
|
|
11414
|
+
var import_styled_components76 = __toESM(require("styled-components"));
|
|
11438
11415
|
|
|
11439
11416
|
// src/components/Search/AutocompleteSearch.context.tsx
|
|
11440
|
-
var
|
|
11441
|
-
var AutocompleteSearchContext = (0,
|
|
11417
|
+
var import_react84 = require("react");
|
|
11418
|
+
var AutocompleteSearchContext = (0, import_react84.createContext)({});
|
|
11442
11419
|
var useAutocompleteSearch = () => {
|
|
11443
|
-
return (0,
|
|
11420
|
+
return (0, import_react84.useContext)(AutocompleteSearchContext);
|
|
11444
11421
|
};
|
|
11445
11422
|
|
|
11446
11423
|
// src/components/Search/Search.tokens.tsx
|
|
11447
|
-
var
|
|
11448
|
-
var { spacing: spacing32, iconSizes: iconSizes2, colors: colors28 } =
|
|
11449
|
-
var { textDefault: textDefault6 } =
|
|
11450
|
-
var
|
|
11424
|
+
var import_dds_design_tokens54 = require("@norges-domstoler/dds-design-tokens");
|
|
11425
|
+
var { spacing: spacing32, iconSizes: iconSizes2, colors: colors28 } = import_dds_design_tokens54.ddsBaseTokens;
|
|
11426
|
+
var { textDefault: textDefault6 } = import_dds_design_tokens54.ddsReferenceTokens;
|
|
11427
|
+
var typographyTypes5 = {
|
|
11451
11428
|
small: "bodySans01",
|
|
11452
11429
|
medium: "bodySans02",
|
|
11453
11430
|
large: "bodySans04"
|
|
@@ -11481,7 +11458,7 @@ var input3 = {
|
|
|
11481
11458
|
var horisontalContainer = {
|
|
11482
11459
|
gap: spacing32.SizesDdsSpacingX05
|
|
11483
11460
|
};
|
|
11484
|
-
var
|
|
11461
|
+
var outerContainer5 = {
|
|
11485
11462
|
gap: spacing32.SizesDdsSpacingX0125
|
|
11486
11463
|
};
|
|
11487
11464
|
var searchIcon = {
|
|
@@ -11518,7 +11495,7 @@ var searchTokens = {
|
|
|
11518
11495
|
searchIcon,
|
|
11519
11496
|
clearButton,
|
|
11520
11497
|
horisontalContainer,
|
|
11521
|
-
outerContainer:
|
|
11498
|
+
outerContainer: outerContainer5,
|
|
11522
11499
|
suggestionsContainer,
|
|
11523
11500
|
suggestionsHeader
|
|
11524
11501
|
};
|
|
@@ -11550,11 +11527,11 @@ function createEmptyChangeEvent(inputElementId) {
|
|
|
11550
11527
|
}
|
|
11551
11528
|
|
|
11552
11529
|
// src/components/Search/SearchSuggestions.tsx
|
|
11553
|
-
var
|
|
11554
|
-
var
|
|
11555
|
-
var
|
|
11530
|
+
var import_react85 = require("react");
|
|
11531
|
+
var import_styled_components75 = __toESM(require("styled-components"));
|
|
11532
|
+
var import_jsx_runtime243 = require("react/jsx-runtime");
|
|
11556
11533
|
var { suggestionsContainer: suggestionsContainer2, suggestionsHeader: suggestionsHeader2 } = searchTokens;
|
|
11557
|
-
var SuggestionsContainer = (0,
|
|
11534
|
+
var SuggestionsContainer = (0, import_styled_components75.default)(Paper)`
|
|
11558
11535
|
${({ $isHidden }) => visibilityTransition(!$isHidden)};
|
|
11559
11536
|
position: absolute;
|
|
11560
11537
|
top: 100%;
|
|
@@ -11568,16 +11545,16 @@ var SuggestionsContainer = (0, import_styled_components76.default)(Paper)`
|
|
|
11568
11545
|
${scrollbarStyling.firefox}
|
|
11569
11546
|
${scrollbarStyling.webkit}
|
|
11570
11547
|
`;
|
|
11571
|
-
var MenuItem = (0,
|
|
11572
|
-
${({ $size }) => $size && getFontStyling(
|
|
11548
|
+
var MenuItem = (0, import_styled_components75.default)(OverflowMenuItem)`
|
|
11549
|
+
${({ $size }) => $size && getFontStyling(typographyTypes5[$size])}
|
|
11573
11550
|
`;
|
|
11574
|
-
var SuggestionsList =
|
|
11551
|
+
var SuggestionsList = import_styled_components75.default.ul`
|
|
11575
11552
|
${removeListStyling}
|
|
11576
11553
|
`;
|
|
11577
|
-
var SuggestionsHeader = (0,
|
|
11554
|
+
var SuggestionsHeader = (0, import_styled_components75.default)(Typography)`
|
|
11578
11555
|
padding-left: ${suggestionsHeader2.paddingLeft};
|
|
11579
11556
|
`;
|
|
11580
|
-
var SearchSuggestions = (0,
|
|
11557
|
+
var SearchSuggestions = (0, import_react85.forwardRef)((props, ref) => {
|
|
11581
11558
|
const {
|
|
11582
11559
|
id,
|
|
11583
11560
|
searchId,
|
|
@@ -11596,8 +11573,8 @@ var SearchSuggestions = (0, import_react86.forwardRef)((props, ref) => {
|
|
|
11596
11573
|
);
|
|
11597
11574
|
const [focus, setFocus] = useRoveFocus(suggestions == null ? void 0 : suggestions.length, !showSuggestions);
|
|
11598
11575
|
const suggestionsToRender = maxSuggestions ? suggestions == null ? void 0 : suggestions.slice(maxSuggestions) : suggestions;
|
|
11599
|
-
const renderedSuggestions = /* @__PURE__ */ (0,
|
|
11600
|
-
return /* @__PURE__ */ (0,
|
|
11576
|
+
const renderedSuggestions = /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(SuggestionsList, { role: "listbox", "aria-labelledby": suggestionsHeaderId, children: suggestionsToRender.map((suggestion, index) => {
|
|
11577
|
+
return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)("li", { role: "option", children: /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
|
|
11601
11578
|
MenuItem,
|
|
11602
11579
|
{
|
|
11603
11580
|
index,
|
|
@@ -11613,7 +11590,7 @@ var SearchSuggestions = (0, import_react86.forwardRef)((props, ref) => {
|
|
|
11613
11590
|
) }, index);
|
|
11614
11591
|
}) });
|
|
11615
11592
|
const isHidden = !showSuggestions;
|
|
11616
|
-
return /* @__PURE__ */ (0,
|
|
11593
|
+
return /* @__PURE__ */ (0, import_jsx_runtime243.jsxs)(
|
|
11617
11594
|
SuggestionsContainer,
|
|
11618
11595
|
{
|
|
11619
11596
|
...getBaseHTMLProps(id, className, htmlProps, rest),
|
|
@@ -11621,7 +11598,7 @@ var SearchSuggestions = (0, import_react86.forwardRef)((props, ref) => {
|
|
|
11621
11598
|
$isHidden: isHidden,
|
|
11622
11599
|
"aria-hidden": isHidden,
|
|
11623
11600
|
children: [
|
|
11624
|
-
/* @__PURE__ */ (0,
|
|
11601
|
+
/* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
|
|
11625
11602
|
SuggestionsHeader,
|
|
11626
11603
|
{
|
|
11627
11604
|
typographyType: "supportingStyleTiny01",
|
|
@@ -11638,8 +11615,8 @@ var SearchSuggestions = (0, import_react86.forwardRef)((props, ref) => {
|
|
|
11638
11615
|
SearchSuggestions.displayName = "SearchSuggestions";
|
|
11639
11616
|
|
|
11640
11617
|
// src/components/Search/Search.tsx
|
|
11641
|
-
var
|
|
11642
|
-
var { input: input4, outerContainer:
|
|
11618
|
+
var import_jsx_runtime244 = require("react/jsx-runtime");
|
|
11619
|
+
var { input: input4, outerContainer: outerContainer6, horisontalContainer: horisontalContainer2, searchIcon: searchIcon2, clearButton: clearButton2 } = searchTokens;
|
|
11643
11620
|
var getIconSize = (size2) => {
|
|
11644
11621
|
switch (size2) {
|
|
11645
11622
|
case "large":
|
|
@@ -11650,7 +11627,7 @@ var getIconSize = (size2) => {
|
|
|
11650
11627
|
return "small";
|
|
11651
11628
|
}
|
|
11652
11629
|
};
|
|
11653
|
-
var Input3 = (0,
|
|
11630
|
+
var Input3 = (0, import_styled_components76.default)(Input)`
|
|
11654
11631
|
&[type='search']::-webkit-search-decoration,
|
|
11655
11632
|
&[type='search']::-webkit-search-cancel-button,
|
|
11656
11633
|
&[type='search']::-webkit-search-results-button,
|
|
@@ -11659,45 +11636,45 @@ var Input3 = (0, import_styled_components77.default)(Input)`
|
|
|
11659
11636
|
}
|
|
11660
11637
|
padding-right: ${input4.base.paddingRight};
|
|
11661
11638
|
|
|
11662
|
-
${({ $componentSize }) =>
|
|
11639
|
+
${({ $componentSize }) => import_styled_components76.css`
|
|
11663
11640
|
padding-top: ${input4.sizes[$componentSize].paddingTop};
|
|
11664
11641
|
padding-bottom: ${input4.sizes[$componentSize].paddingBottom};
|
|
11665
11642
|
padding-left: ${input4.sizes[$componentSize].paddingLeft};
|
|
11666
|
-
${getFontStyling(
|
|
11643
|
+
${getFontStyling(typographyTypes5[$componentSize])}
|
|
11667
11644
|
`}
|
|
11668
11645
|
`;
|
|
11669
|
-
var StyledSearchIcon = (0,
|
|
11646
|
+
var StyledSearchIcon = (0, import_styled_components76.default)(Icon)`
|
|
11670
11647
|
position: absolute;
|
|
11671
11648
|
left: ${searchIcon2.base.left};
|
|
11672
11649
|
color: ${searchIcon2.base.color};
|
|
11673
|
-
${({ $size }) =>
|
|
11650
|
+
${({ $size }) => import_styled_components76.css`
|
|
11674
11651
|
top: ${searchTokens.searchIcon[$size].top};
|
|
11675
11652
|
`}
|
|
11676
11653
|
z-index: 1;
|
|
11677
11654
|
`;
|
|
11678
|
-
var StyledClearButton = (0,
|
|
11655
|
+
var StyledClearButton = (0, import_styled_components76.default)(Button)`
|
|
11679
11656
|
position: absolute;
|
|
11680
11657
|
right: ${clearButton2.right};
|
|
11681
11658
|
color: ${clearButton2.color};
|
|
11682
11659
|
top: ${clearButton2.top};
|
|
11683
11660
|
`;
|
|
11684
|
-
var
|
|
11661
|
+
var OuterContainer2 = import_styled_components76.default.div`
|
|
11685
11662
|
display: flex;
|
|
11686
11663
|
flex-direction: column;
|
|
11687
|
-
gap: ${
|
|
11664
|
+
gap: ${outerContainer6.gap};
|
|
11688
11665
|
`;
|
|
11689
|
-
var HorisontalContainer =
|
|
11690
|
-
${(props) => props.$hasSearchButton &&
|
|
11666
|
+
var HorisontalContainer = import_styled_components76.default.div`
|
|
11667
|
+
${(props) => props.$hasSearchButton && import_styled_components76.css`
|
|
11691
11668
|
display: grid;
|
|
11692
11669
|
grid-template-columns: 1fr auto;
|
|
11693
11670
|
gap: ${horisontalContainer2.gap};
|
|
11694
11671
|
`}
|
|
11695
11672
|
`;
|
|
11696
|
-
var InputContainer2 =
|
|
11673
|
+
var InputContainer2 = import_styled_components76.default.div`
|
|
11697
11674
|
position: relative;
|
|
11698
11675
|
display: flex;
|
|
11699
11676
|
`;
|
|
11700
|
-
var Search = (0,
|
|
11677
|
+
var Search = (0, import_react86.forwardRef)(
|
|
11701
11678
|
({
|
|
11702
11679
|
componentSize = "medium",
|
|
11703
11680
|
buttonProps,
|
|
@@ -11713,7 +11690,7 @@ var Search = (0, import_react87.forwardRef)(
|
|
|
11713
11690
|
...rest
|
|
11714
11691
|
}, ref) => {
|
|
11715
11692
|
var _a;
|
|
11716
|
-
const generatedId = (0,
|
|
11693
|
+
const generatedId = (0, import_react86.useId)();
|
|
11717
11694
|
const uniqueId = id != null ? id : `${generatedId}-searchInput`;
|
|
11718
11695
|
const hasLabel = !!label3;
|
|
11719
11696
|
const tipId = derivativeIdGenerator(uniqueId, "tip");
|
|
@@ -11722,7 +11699,7 @@ var Search = (0, import_react87.forwardRef)(
|
|
|
11722
11699
|
uniqueId,
|
|
11723
11700
|
"suggestions-description"
|
|
11724
11701
|
);
|
|
11725
|
-
const [hasValue, setHasValue] = (0,
|
|
11702
|
+
const [hasValue, setHasValue] = (0, import_react86.useState)(!!value);
|
|
11726
11703
|
const context = useAutocompleteSearch();
|
|
11727
11704
|
const combinedRef = context.inputRef ? useCombinedRef(context.inputRef, ref) : ref;
|
|
11728
11705
|
const handleChange = (e) => {
|
|
@@ -11741,18 +11718,18 @@ var Search = (0, import_react87.forwardRef)(
|
|
|
11741
11718
|
} = buttonProps != null ? buttonProps : {};
|
|
11742
11719
|
const hasSuggestions = !!context.suggestions;
|
|
11743
11720
|
const showSearchButton = !!buttonProps && !!onClick;
|
|
11744
|
-
return /* @__PURE__ */ (0,
|
|
11745
|
-
hasLabel && /* @__PURE__ */ (0,
|
|
11746
|
-
/* @__PURE__ */ (0,
|
|
11747
|
-
/* @__PURE__ */ (0,
|
|
11721
|
+
return /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(OuterContainer2, { children: [
|
|
11722
|
+
hasLabel && /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(Label, { htmlFor: uniqueId, children: label3 }),
|
|
11723
|
+
/* @__PURE__ */ (0, import_jsx_runtime244.jsxs)("div", { children: [
|
|
11724
|
+
/* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(
|
|
11748
11725
|
HorisontalContainer,
|
|
11749
11726
|
{
|
|
11750
11727
|
$hasSearchButton: showSearchButton,
|
|
11751
11728
|
className,
|
|
11752
11729
|
style,
|
|
11753
11730
|
children: [
|
|
11754
|
-
/* @__PURE__ */ (0,
|
|
11755
|
-
/* @__PURE__ */ (0,
|
|
11731
|
+
/* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(InputContainer2, { children: [
|
|
11732
|
+
/* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
|
|
11756
11733
|
StyledSearchIcon,
|
|
11757
11734
|
{
|
|
11758
11735
|
icon: SearchIcon,
|
|
@@ -11760,7 +11737,7 @@ var Search = (0, import_react87.forwardRef)(
|
|
|
11760
11737
|
iconSize: getIconSize(componentSize)
|
|
11761
11738
|
}
|
|
11762
11739
|
),
|
|
11763
|
-
/* @__PURE__ */ (0,
|
|
11740
|
+
/* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
|
|
11764
11741
|
Input3,
|
|
11765
11742
|
{
|
|
11766
11743
|
...rest,
|
|
@@ -11783,8 +11760,8 @@ var Search = (0, import_react87.forwardRef)(
|
|
|
11783
11760
|
role: hasSuggestions ? "combobox" : void 0
|
|
11784
11761
|
}
|
|
11785
11762
|
),
|
|
11786
|
-
hasSuggestions && /* @__PURE__ */ (0,
|
|
11787
|
-
/* @__PURE__ */ (0,
|
|
11763
|
+
hasSuggestions && /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(import_jsx_runtime244.Fragment, { children: [
|
|
11764
|
+
/* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
|
|
11788
11765
|
SearchSuggestions,
|
|
11789
11766
|
{
|
|
11790
11767
|
id: suggestionsId,
|
|
@@ -11796,9 +11773,9 @@ var Search = (0, import_react87.forwardRef)(
|
|
|
11796
11773
|
componentSize
|
|
11797
11774
|
}
|
|
11798
11775
|
),
|
|
11799
|
-
/* @__PURE__ */ (0,
|
|
11776
|
+
/* @__PURE__ */ (0, import_jsx_runtime244.jsx)(VisuallyHidden, { id: suggestionsDescriptionId, as: "span", children: "Bla i s\xF8keforslag med piltaster n\xE5r listen er utvidet." })
|
|
11800
11777
|
] }),
|
|
11801
|
-
hasValue && /* @__PURE__ */ (0,
|
|
11778
|
+
hasValue && /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
|
|
11802
11779
|
StyledClearButton,
|
|
11803
11780
|
{
|
|
11804
11781
|
icon: CloseSmallIcon,
|
|
@@ -11810,7 +11787,7 @@ var Search = (0, import_react87.forwardRef)(
|
|
|
11810
11787
|
}
|
|
11811
11788
|
)
|
|
11812
11789
|
] }),
|
|
11813
|
-
showSearchButton && /* @__PURE__ */ (0,
|
|
11790
|
+
showSearchButton && /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
|
|
11814
11791
|
Button,
|
|
11815
11792
|
{
|
|
11816
11793
|
size: componentSize,
|
|
@@ -11830,8 +11807,8 @@ var Search = (0, import_react87.forwardRef)(
|
|
|
11830
11807
|
Search.displayName = "Search";
|
|
11831
11808
|
|
|
11832
11809
|
// src/components/Search/SearchAutocompleteWrapper.tsx
|
|
11833
|
-
var
|
|
11834
|
-
var
|
|
11810
|
+
var import_react87 = require("react");
|
|
11811
|
+
var import_jsx_runtime245 = require("react/jsx-runtime");
|
|
11835
11812
|
var SearchAutocompleteWrapper = (props) => {
|
|
11836
11813
|
const {
|
|
11837
11814
|
value,
|
|
@@ -11842,12 +11819,12 @@ var SearchAutocompleteWrapper = (props) => {
|
|
|
11842
11819
|
onSuggestionSelection,
|
|
11843
11820
|
children
|
|
11844
11821
|
} = props;
|
|
11845
|
-
const [inputValue, setInputValue] = (0,
|
|
11846
|
-
const [suggestions, setSuggestions] = (0,
|
|
11847
|
-
const [showSuggestions, setShowSuggestions] = (0,
|
|
11822
|
+
const [inputValue, setInputValue] = (0, import_react87.useState)(value != null ? value : "");
|
|
11823
|
+
const [suggestions, setSuggestions] = (0, import_react87.useState)([]);
|
|
11824
|
+
const [showSuggestions, setShowSuggestions] = (0, import_react87.useState)(false);
|
|
11848
11825
|
const closeSuggestions = () => showSuggestions === true && setShowSuggestions(false);
|
|
11849
11826
|
const openSuggestions = () => showSuggestions === false && setShowSuggestions(true);
|
|
11850
|
-
(0,
|
|
11827
|
+
(0, import_react87.useEffect)(() => {
|
|
11851
11828
|
if (suggestions.length > 0) {
|
|
11852
11829
|
openSuggestions();
|
|
11853
11830
|
} else {
|
|
@@ -11892,8 +11869,8 @@ var SearchAutocompleteWrapper = (props) => {
|
|
|
11892
11869
|
const handleSetInputValue = (value2) => {
|
|
11893
11870
|
setInputValue(value2 != null ? value2 : "");
|
|
11894
11871
|
};
|
|
11895
|
-
const inputRef = (0,
|
|
11896
|
-
const suggestionsRef = (0,
|
|
11872
|
+
const inputRef = (0, import_react87.useRef)(null);
|
|
11873
|
+
const suggestionsRef = (0, import_react87.useRef)(null);
|
|
11897
11874
|
useOnClickOutside([inputRef.current, suggestionsRef.current], () => {
|
|
11898
11875
|
closeSuggestions();
|
|
11899
11876
|
});
|
|
@@ -11907,7 +11884,7 @@ var SearchAutocompleteWrapper = (props) => {
|
|
|
11907
11884
|
inputValue,
|
|
11908
11885
|
onSugggestionClick: handleSuggestionClick
|
|
11909
11886
|
};
|
|
11910
|
-
return /* @__PURE__ */ (0,
|
|
11887
|
+
return /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(AutocompleteSearchContext.Provider, { value: contextProps, children });
|
|
11911
11888
|
};
|
|
11912
11889
|
SearchAutocompleteWrapper.displayName = "SearchAutocompleteWrapper";
|
|
11913
11890
|
|
|
@@ -11917,27 +11894,27 @@ Search2.AutocompleteWrapper = SearchAutocompleteWrapper;
|
|
|
11917
11894
|
Search2.Suggestions = SearchSuggestions;
|
|
11918
11895
|
|
|
11919
11896
|
// src/components/SelectionControl/Checkbox/Checkbox.tsx
|
|
11920
|
-
var
|
|
11897
|
+
var import_react89 = require("react");
|
|
11921
11898
|
|
|
11922
11899
|
// src/components/SelectionControl/Checkbox/CheckboxGroupContext.tsx
|
|
11923
|
-
var
|
|
11924
|
-
var CheckboxGroupContext = (0,
|
|
11900
|
+
var import_react88 = require("react");
|
|
11901
|
+
var CheckboxGroupContext = (0, import_react88.createContext)(null);
|
|
11925
11902
|
var useCheckboxGroup = () => {
|
|
11926
|
-
return (0,
|
|
11903
|
+
return (0, import_react88.useContext)(CheckboxGroupContext);
|
|
11927
11904
|
};
|
|
11928
11905
|
|
|
11929
11906
|
// src/components/SelectionControl/SelectionControl.styles.tsx
|
|
11930
|
-
var
|
|
11907
|
+
var import_styled_components77 = __toESM(require("styled-components"));
|
|
11931
11908
|
|
|
11932
11909
|
// src/components/SelectionControl/SelectionControl.tokens.tsx
|
|
11933
|
-
var
|
|
11910
|
+
var import_dds_design_tokens55 = require("@norges-domstoler/dds-design-tokens");
|
|
11934
11911
|
|
|
11935
11912
|
// src/components/SelectionControl/SelectionControl.utils.tsx
|
|
11936
11913
|
var selectionControlSizeNumberPx = 18;
|
|
11937
11914
|
var selectionControlSize = `${selectionControlSizeNumberPx}px`;
|
|
11938
11915
|
|
|
11939
11916
|
// src/components/SelectionControl/SelectionControl.tokens.tsx
|
|
11940
|
-
var { colors: colors29, spacing: spacing33, borderRadius: borderRadius8 } =
|
|
11917
|
+
var { colors: colors29, spacing: spacing33, borderRadius: borderRadius8 } = import_dds_design_tokens55.ddsBaseTokens;
|
|
11941
11918
|
var checkmark = {
|
|
11942
11919
|
checkbox: {
|
|
11943
11920
|
borderColor: colors29.DdsColorNeutralsWhite
|
|
@@ -12042,7 +12019,7 @@ var {
|
|
|
12042
12019
|
groupContainer: groupContainer2,
|
|
12043
12020
|
outerGroupContainer: outerGroupContainer2
|
|
12044
12021
|
} = selectionControlTokens;
|
|
12045
|
-
var CustomSelectionControl =
|
|
12022
|
+
var CustomSelectionControl = import_styled_components77.default.span`
|
|
12046
12023
|
position: absolute;
|
|
12047
12024
|
left: 0;
|
|
12048
12025
|
box-sizing: border-box;
|
|
@@ -12052,7 +12029,7 @@ var CustomSelectionControl = import_styled_components78.default.span`
|
|
|
12052
12029
|
border-radius: ${selectionControl2.base.borderRadius};
|
|
12053
12030
|
height: ${selectionControl2.base.height};
|
|
12054
12031
|
width: ${selectionControl2.base.width};
|
|
12055
|
-
${({ $controlType }) => $controlType === "radio" &&
|
|
12032
|
+
${({ $controlType }) => $controlType === "radio" && import_styled_components77.css`
|
|
12056
12033
|
border-radius: 50%;
|
|
12057
12034
|
`}
|
|
12058
12035
|
&:after {
|
|
@@ -12061,7 +12038,7 @@ var CustomSelectionControl = import_styled_components78.default.span`
|
|
|
12061
12038
|
display: none;
|
|
12062
12039
|
}
|
|
12063
12040
|
`;
|
|
12064
|
-
var Container13 =
|
|
12041
|
+
var Container13 = import_styled_components77.default.label`
|
|
12065
12042
|
position: relative;
|
|
12066
12043
|
display: flex;
|
|
12067
12044
|
align-items: center;
|
|
@@ -12069,9 +12046,9 @@ var Container13 = import_styled_components78.default.label`
|
|
|
12069
12046
|
user-select: none;
|
|
12070
12047
|
width: fit-content;
|
|
12071
12048
|
color: ${container14.color};
|
|
12072
|
-
${({ $hasLabel }) => $hasLabel ?
|
|
12049
|
+
${({ $hasLabel }) => $hasLabel ? import_styled_components77.css`
|
|
12073
12050
|
padding-left: ${container14.withLabel.paddingLeft};
|
|
12074
|
-
` :
|
|
12051
|
+
` : import_styled_components77.css`
|
|
12075
12052
|
padding: ${container14.noLabel.padding};
|
|
12076
12053
|
`}
|
|
12077
12054
|
|
|
@@ -12115,7 +12092,7 @@ var Container13 = import_styled_components78.default.label`
|
|
|
12115
12092
|
border-color: ${selectionControl2.checked.hover.borderColor};
|
|
12116
12093
|
}
|
|
12117
12094
|
|
|
12118
|
-
${({ $error }) => $error &&
|
|
12095
|
+
${({ $error }) => $error && import_styled_components77.css`
|
|
12119
12096
|
&:hover input:enabled ~ ${CustomSelectionControl} {
|
|
12120
12097
|
background-color: ${selectionControl2.hover.danger.backgroundColor};
|
|
12121
12098
|
box-shadow: ${selectionControl2.hover.danger.boxShadow};
|
|
@@ -12149,11 +12126,11 @@ var Container13 = import_styled_components78.default.label`
|
|
|
12149
12126
|
display: block;
|
|
12150
12127
|
}
|
|
12151
12128
|
|
|
12152
|
-
${({ disabled }) => disabled &&
|
|
12129
|
+
${({ disabled }) => disabled && import_styled_components77.css`
|
|
12153
12130
|
cursor: not-allowed;
|
|
12154
12131
|
color: ${container14.disabled.color};
|
|
12155
12132
|
`}
|
|
12156
|
-
${({ $controlType }) => $controlType === "checkbox" ?
|
|
12133
|
+
${({ $controlType }) => $controlType === "checkbox" ? import_styled_components77.css`
|
|
12157
12134
|
${CustomSelectionControl}:after {
|
|
12158
12135
|
border: solid ${checkmark2.checkbox.borderColor};
|
|
12159
12136
|
|
|
@@ -12172,7 +12149,7 @@ var Container13 = import_styled_components78.default.label`
|
|
|
12172
12149
|
height: 1px;
|
|
12173
12150
|
transform: none;
|
|
12174
12151
|
}
|
|
12175
|
-
` :
|
|
12152
|
+
` : import_styled_components77.css`
|
|
12176
12153
|
${CustomSelectionControl}:after {
|
|
12177
12154
|
border-radius: 50%;
|
|
12178
12155
|
background-color: ${checkmark2.radio.backgroundColor};
|
|
@@ -12183,22 +12160,22 @@ var Container13 = import_styled_components78.default.label`
|
|
|
12183
12160
|
}
|
|
12184
12161
|
`}
|
|
12185
12162
|
`;
|
|
12186
|
-
var OuterGroupContainer =
|
|
12163
|
+
var OuterGroupContainer = import_styled_components77.default.div`
|
|
12187
12164
|
display: flex;
|
|
12188
12165
|
flex-direction: column;
|
|
12189
12166
|
gap: ${outerGroupContainer2.gap};
|
|
12190
12167
|
`;
|
|
12191
|
-
var GroupContainer =
|
|
12168
|
+
var GroupContainer = import_styled_components77.default.div`
|
|
12192
12169
|
display: flex;
|
|
12193
|
-
${({ $direction }) =>
|
|
12170
|
+
${({ $direction }) => import_styled_components77.css`
|
|
12194
12171
|
flex-direction: ${$direction};
|
|
12195
12172
|
gap: ${groupContainer2[$direction].gap};
|
|
12196
12173
|
`}
|
|
12197
12174
|
`;
|
|
12198
12175
|
|
|
12199
12176
|
// src/components/SelectionControl/Checkbox/Checkbox.tsx
|
|
12200
|
-
var
|
|
12201
|
-
var Checkbox = (0,
|
|
12177
|
+
var import_jsx_runtime246 = require("react/jsx-runtime");
|
|
12178
|
+
var Checkbox = (0, import_react89.forwardRef)(
|
|
12202
12179
|
(props, ref) => {
|
|
12203
12180
|
const {
|
|
12204
12181
|
id,
|
|
@@ -12213,7 +12190,7 @@ var Checkbox = (0, import_react90.forwardRef)(
|
|
|
12213
12190
|
htmlProps = {},
|
|
12214
12191
|
...rest
|
|
12215
12192
|
} = props;
|
|
12216
|
-
const generatedId = (0,
|
|
12193
|
+
const generatedId = (0, import_react89.useId)();
|
|
12217
12194
|
const uniqueId = id != null ? id : `${generatedId}-checkbox`;
|
|
12218
12195
|
const checkboxGroup = useCheckboxGroup();
|
|
12219
12196
|
const hasLabel = !!label3;
|
|
@@ -12222,7 +12199,7 @@ var Checkbox = (0, import_react90.forwardRef)(
|
|
|
12222
12199
|
className: htmlPropsClassName,
|
|
12223
12200
|
...restHtmlProps
|
|
12224
12201
|
} = htmlProps;
|
|
12225
|
-
return /* @__PURE__ */ (0,
|
|
12202
|
+
return /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(
|
|
12226
12203
|
Container13,
|
|
12227
12204
|
{
|
|
12228
12205
|
$error: error || (checkboxGroup == null ? void 0 : checkboxGroup.error),
|
|
@@ -12233,7 +12210,7 @@ var Checkbox = (0, import_react90.forwardRef)(
|
|
|
12233
12210
|
className: cn(className, htmlPropsClassName),
|
|
12234
12211
|
style,
|
|
12235
12212
|
children: [
|
|
12236
|
-
/* @__PURE__ */ (0,
|
|
12213
|
+
/* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
|
|
12237
12214
|
HiddenInput,
|
|
12238
12215
|
{
|
|
12239
12216
|
...getBaseHTMLProps(uniqueId, restHtmlProps, rest),
|
|
@@ -12253,8 +12230,8 @@ var Checkbox = (0, import_react90.forwardRef)(
|
|
|
12253
12230
|
"data-indeterminate": indeterminate
|
|
12254
12231
|
}
|
|
12255
12232
|
),
|
|
12256
|
-
/* @__PURE__ */ (0,
|
|
12257
|
-
hasLabel && /* @__PURE__ */ (0,
|
|
12233
|
+
/* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CustomSelectionControl, { $controlType: "checkbox" }),
|
|
12234
|
+
hasLabel && /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(Typography, { color: "inherit", as: "span", typographyType: "bodySans02", children: label3 })
|
|
12258
12235
|
]
|
|
12259
12236
|
}
|
|
12260
12237
|
);
|
|
@@ -12263,8 +12240,8 @@ var Checkbox = (0, import_react90.forwardRef)(
|
|
|
12263
12240
|
Checkbox.displayName = "Checkbox";
|
|
12264
12241
|
|
|
12265
12242
|
// src/components/SelectionControl/Checkbox/CheckboxGroup.tsx
|
|
12266
|
-
var
|
|
12267
|
-
var
|
|
12243
|
+
var import_react90 = require("react");
|
|
12244
|
+
var import_jsx_runtime247 = require("react/jsx-runtime");
|
|
12268
12245
|
var CheckboxGroup = (props) => {
|
|
12269
12246
|
const {
|
|
12270
12247
|
label: label3,
|
|
@@ -12280,7 +12257,7 @@ var CheckboxGroup = (props) => {
|
|
|
12280
12257
|
...rest
|
|
12281
12258
|
} = props;
|
|
12282
12259
|
const { "aria-required": ariaRequired } = htmlProps;
|
|
12283
|
-
const generatedId = (0,
|
|
12260
|
+
const generatedId = (0, import_react90.useId)();
|
|
12284
12261
|
const uniqueGroupId = groupId != null ? groupId : `${generatedId}-checkboxGroup`;
|
|
12285
12262
|
const hasErrorMessage = !!errorMessage;
|
|
12286
12263
|
const showRequiredMarker = required || ariaRequired;
|
|
@@ -12292,7 +12269,7 @@ var CheckboxGroup = (props) => {
|
|
|
12292
12269
|
uniqueGroupId,
|
|
12293
12270
|
tipId: tip ? tipId : void 0
|
|
12294
12271
|
};
|
|
12295
|
-
return /* @__PURE__ */ (0,
|
|
12272
|
+
return /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(
|
|
12296
12273
|
OuterGroupContainer,
|
|
12297
12274
|
{
|
|
12298
12275
|
...getBaseHTMLProps(
|
|
@@ -12302,7 +12279,7 @@ var CheckboxGroup = (props) => {
|
|
|
12302
12279
|
rest
|
|
12303
12280
|
),
|
|
12304
12281
|
children: [
|
|
12305
|
-
/* @__PURE__ */ (0,
|
|
12282
|
+
/* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(
|
|
12306
12283
|
Typography,
|
|
12307
12284
|
{
|
|
12308
12285
|
as: "span",
|
|
@@ -12311,12 +12288,12 @@ var CheckboxGroup = (props) => {
|
|
|
12311
12288
|
children: [
|
|
12312
12289
|
label3,
|
|
12313
12290
|
" ",
|
|
12314
|
-
showRequiredMarker && /* @__PURE__ */ (0,
|
|
12291
|
+
showRequiredMarker && /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(RequiredMarker, {})
|
|
12315
12292
|
]
|
|
12316
12293
|
}
|
|
12317
12294
|
),
|
|
12318
12295
|
renderInputMessage(tip, tipId),
|
|
12319
|
-
/* @__PURE__ */ (0,
|
|
12296
|
+
/* @__PURE__ */ (0, import_jsx_runtime247.jsx)(CheckboxGroupContext.Provider, { value: { ...contextProps }, children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
|
|
12320
12297
|
GroupContainer,
|
|
12321
12298
|
{
|
|
12322
12299
|
role: "group",
|
|
@@ -12334,17 +12311,17 @@ var CheckboxGroup = (props) => {
|
|
|
12334
12311
|
CheckboxGroup.displayName = "CheckboxGroup";
|
|
12335
12312
|
|
|
12336
12313
|
// src/components/SelectionControl/RadioButton/RadioButton.tsx
|
|
12337
|
-
var
|
|
12314
|
+
var import_react92 = require("react");
|
|
12338
12315
|
|
|
12339
12316
|
// src/components/SelectionControl/RadioButton/RadioButtonGroupContext.tsx
|
|
12340
|
-
var
|
|
12341
|
-
var RadioButtonGroupContext = (0,
|
|
12317
|
+
var import_react91 = require("react");
|
|
12318
|
+
var RadioButtonGroupContext = (0, import_react91.createContext)(null);
|
|
12342
12319
|
var useRadioButtonGroup = () => {
|
|
12343
|
-
return (0,
|
|
12320
|
+
return (0, import_react91.useContext)(RadioButtonGroupContext);
|
|
12344
12321
|
};
|
|
12345
12322
|
|
|
12346
12323
|
// src/components/SelectionControl/RadioButton/RadioButton.tsx
|
|
12347
|
-
var
|
|
12324
|
+
var import_jsx_runtime248 = require("react/jsx-runtime");
|
|
12348
12325
|
var isValueEqualToGroupValueOrFalsy = (value, group4) => {
|
|
12349
12326
|
if (typeof value !== "undefined" && value !== null && group4) {
|
|
12350
12327
|
if (typeof value === "number") {
|
|
@@ -12354,7 +12331,7 @@ var isValueEqualToGroupValueOrFalsy = (value, group4) => {
|
|
|
12354
12331
|
}
|
|
12355
12332
|
return !!value;
|
|
12356
12333
|
};
|
|
12357
|
-
var RadioButton = (0,
|
|
12334
|
+
var RadioButton = (0, import_react92.forwardRef)(
|
|
12358
12335
|
(props, ref) => {
|
|
12359
12336
|
const {
|
|
12360
12337
|
id,
|
|
@@ -12378,7 +12355,7 @@ var RadioButton = (0, import_react93.forwardRef)(
|
|
|
12378
12355
|
style,
|
|
12379
12356
|
...restHtmlProps
|
|
12380
12357
|
} = htmlProps;
|
|
12381
|
-
const generatedId = (0,
|
|
12358
|
+
const generatedId = (0, import_react92.useId)();
|
|
12382
12359
|
const uniqueId = id != null ? id : `${generatedId}-radioButton`;
|
|
12383
12360
|
const hasLabel = !!label3;
|
|
12384
12361
|
const radioButtonGroup = useRadioButtonGroup();
|
|
@@ -12403,7 +12380,7 @@ var RadioButton = (0, import_react93.forwardRef)(
|
|
|
12403
12380
|
"aria-describedby": describedByIds.length > 0 ? describedByIds.join(" ") : void 0,
|
|
12404
12381
|
"aria-invalid": error || (radioButtonGroup == null ? void 0 : radioButtonGroup.error) ? true : void 0
|
|
12405
12382
|
};
|
|
12406
|
-
return /* @__PURE__ */ (0,
|
|
12383
|
+
return /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(
|
|
12407
12384
|
Container13,
|
|
12408
12385
|
{
|
|
12409
12386
|
$error: error || (radioButtonGroup == null ? void 0 : radioButtonGroup.error),
|
|
@@ -12415,9 +12392,9 @@ var RadioButton = (0, import_react93.forwardRef)(
|
|
|
12415
12392
|
htmlFor: uniqueId,
|
|
12416
12393
|
$controlType: "radio",
|
|
12417
12394
|
children: [
|
|
12418
|
-
/* @__PURE__ */ (0,
|
|
12419
|
-
/* @__PURE__ */ (0,
|
|
12420
|
-
/* @__PURE__ */ (0,
|
|
12395
|
+
/* @__PURE__ */ (0, import_jsx_runtime248.jsx)(HiddenInput, { ...inputProps, ref }),
|
|
12396
|
+
/* @__PURE__ */ (0, import_jsx_runtime248.jsx)(CustomSelectionControl, { $controlType: "radio" }),
|
|
12397
|
+
/* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Typography, { as: "span", children: children != null ? children : label3 })
|
|
12421
12398
|
]
|
|
12422
12399
|
}
|
|
12423
12400
|
);
|
|
@@ -12426,8 +12403,8 @@ var RadioButton = (0, import_react93.forwardRef)(
|
|
|
12426
12403
|
RadioButton.displayName = "RadioButton";
|
|
12427
12404
|
|
|
12428
12405
|
// src/components/SelectionControl/RadioButton/RadioButtonGroup.tsx
|
|
12429
|
-
var
|
|
12430
|
-
var
|
|
12406
|
+
var import_react93 = require("react");
|
|
12407
|
+
var import_jsx_runtime249 = require("react/jsx-runtime");
|
|
12431
12408
|
var RadioButtonGroupInner = (props, ref) => {
|
|
12432
12409
|
const {
|
|
12433
12410
|
name,
|
|
@@ -12448,8 +12425,8 @@ var RadioButtonGroupInner = (props, ref) => {
|
|
|
12448
12425
|
...rest
|
|
12449
12426
|
} = props;
|
|
12450
12427
|
const { "aria-required": ariaRequired = false } = htmlProps;
|
|
12451
|
-
const [groupValue, setGroupValue] = (0,
|
|
12452
|
-
const generatedId = (0,
|
|
12428
|
+
const [groupValue, setGroupValue] = (0, import_react93.useState)(value);
|
|
12429
|
+
const generatedId = (0, import_react93.useId)();
|
|
12453
12430
|
const uniqueGroupId = groupId != null ? groupId : `${generatedId}-radioButtonGroup`;
|
|
12454
12431
|
const handleChange = combineHandlers(
|
|
12455
12432
|
(e) => setGroupValue(e.target.value),
|
|
@@ -12469,7 +12446,7 @@ var RadioButtonGroupInner = (props, ref) => {
|
|
|
12469
12446
|
value: groupValue,
|
|
12470
12447
|
onChange: handleChange
|
|
12471
12448
|
};
|
|
12472
|
-
return /* @__PURE__ */ (0,
|
|
12449
|
+
return /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(
|
|
12473
12450
|
OuterGroupContainer,
|
|
12474
12451
|
{
|
|
12475
12452
|
...getBaseHTMLProps(
|
|
@@ -12480,7 +12457,7 @@ var RadioButtonGroupInner = (props, ref) => {
|
|
|
12480
12457
|
),
|
|
12481
12458
|
ref,
|
|
12482
12459
|
children: [
|
|
12483
|
-
/* @__PURE__ */ (0,
|
|
12460
|
+
/* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(
|
|
12484
12461
|
Typography,
|
|
12485
12462
|
{
|
|
12486
12463
|
as: "span",
|
|
@@ -12489,12 +12466,12 @@ var RadioButtonGroupInner = (props, ref) => {
|
|
|
12489
12466
|
children: [
|
|
12490
12467
|
label3,
|
|
12491
12468
|
" ",
|
|
12492
|
-
showRequiredMarker && /* @__PURE__ */ (0,
|
|
12469
|
+
showRequiredMarker && /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(RequiredMarker, {})
|
|
12493
12470
|
]
|
|
12494
12471
|
}
|
|
12495
12472
|
),
|
|
12496
12473
|
renderInputMessage(tip, tipId),
|
|
12497
|
-
/* @__PURE__ */ (0,
|
|
12474
|
+
/* @__PURE__ */ (0, import_jsx_runtime249.jsx)(RadioButtonGroupContext.Provider, { value: { ...contextProps }, children: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
|
|
12498
12475
|
GroupContainer,
|
|
12499
12476
|
{
|
|
12500
12477
|
role: "radiogroup",
|
|
@@ -12510,16 +12487,16 @@ var RadioButtonGroupInner = (props, ref) => {
|
|
|
12510
12487
|
}
|
|
12511
12488
|
);
|
|
12512
12489
|
};
|
|
12513
|
-
var RadioButtonGroup = (0,
|
|
12490
|
+
var RadioButtonGroup = (0, import_react93.forwardRef)(RadioButtonGroupInner);
|
|
12514
12491
|
RadioButtonGroup.displayName = "RadioButtonGroup";
|
|
12515
12492
|
|
|
12516
12493
|
// src/components/SkipToContent/SkipToContent.tsx
|
|
12517
|
-
var
|
|
12518
|
-
var
|
|
12494
|
+
var import_react94 = require("react");
|
|
12495
|
+
var import_styled_components78 = __toESM(require("styled-components"));
|
|
12519
12496
|
|
|
12520
12497
|
// src/components/SkipToContent/SkipToContent.tokens.tsx
|
|
12521
|
-
var
|
|
12522
|
-
var { colors: colors30, spacing: spacing34 } =
|
|
12498
|
+
var import_dds_design_tokens56 = require("@norges-domstoler/dds-design-tokens");
|
|
12499
|
+
var { colors: colors30, spacing: spacing34 } = import_dds_design_tokens56.ddsBaseTokens;
|
|
12523
12500
|
var link3 = {
|
|
12524
12501
|
base: {
|
|
12525
12502
|
color: colors30.DdsColorNeutralsWhite
|
|
@@ -12538,9 +12515,9 @@ var skipToContentTokens = {
|
|
|
12538
12515
|
};
|
|
12539
12516
|
|
|
12540
12517
|
// src/components/SkipToContent/SkipToContent.tsx
|
|
12541
|
-
var
|
|
12518
|
+
var import_jsx_runtime250 = require("react/jsx-runtime");
|
|
12542
12519
|
var { wrapper: wrapper6, link: link4 } = skipToContentTokens;
|
|
12543
|
-
var Wrapper5 =
|
|
12520
|
+
var Wrapper5 = import_styled_components78.default.div`
|
|
12544
12521
|
box-sizing: border-box;
|
|
12545
12522
|
position: absolute;
|
|
12546
12523
|
top: ${({ $top: top }) => top};
|
|
@@ -12567,7 +12544,7 @@ var Wrapper5 = import_styled_components79.default.div`
|
|
|
12567
12544
|
opacity: 1;
|
|
12568
12545
|
}
|
|
12569
12546
|
`;
|
|
12570
|
-
var Link4 =
|
|
12547
|
+
var Link4 = import_styled_components78.default.a`
|
|
12571
12548
|
text-decoration: none;
|
|
12572
12549
|
color: ${link4.base.color};
|
|
12573
12550
|
${getFontStyling(defaultTypographyType)}
|
|
@@ -12582,7 +12559,7 @@ var Link4 = import_styled_components79.default.a`
|
|
|
12582
12559
|
color: ${link4.base.color};
|
|
12583
12560
|
}
|
|
12584
12561
|
`;
|
|
12585
|
-
var SkipToContent = (0,
|
|
12562
|
+
var SkipToContent = (0, import_react94.forwardRef)(
|
|
12586
12563
|
(props, ref) => {
|
|
12587
12564
|
const {
|
|
12588
12565
|
text = "Til hovedinnhold",
|
|
@@ -12597,13 +12574,13 @@ var SkipToContent = (0, import_react95.forwardRef)(
|
|
|
12597
12574
|
style,
|
|
12598
12575
|
...restHtmlProps
|
|
12599
12576
|
} = htmlProps;
|
|
12600
|
-
return /* @__PURE__ */ (0,
|
|
12577
|
+
return /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
|
|
12601
12578
|
Wrapper5,
|
|
12602
12579
|
{
|
|
12603
12580
|
$top: top,
|
|
12604
12581
|
className: cn(className, htmlPropsClassName),
|
|
12605
12582
|
style,
|
|
12606
|
-
children: /* @__PURE__ */ (0,
|
|
12583
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(Link4, { ...getBaseHTMLProps(id, restHtmlProps, rest), ref, children: text })
|
|
12607
12584
|
}
|
|
12608
12585
|
);
|
|
12609
12586
|
}
|
|
@@ -12611,14 +12588,14 @@ var SkipToContent = (0, import_react95.forwardRef)(
|
|
|
12611
12588
|
SkipToContent.displayName = "SkipToContent";
|
|
12612
12589
|
|
|
12613
12590
|
// src/components/SplitButton/SplitButton.tsx
|
|
12614
|
-
var
|
|
12615
|
-
var
|
|
12591
|
+
var import_react95 = require("react");
|
|
12592
|
+
var import_styled_components79 = __toESM(require("styled-components"));
|
|
12616
12593
|
|
|
12617
12594
|
// src/components/SplitButton/SplitButton.tokens.ts
|
|
12618
|
-
var
|
|
12595
|
+
var import_dds_design_tokens57 = require("@norges-domstoler/dds-design-tokens");
|
|
12619
12596
|
var mainButton = {
|
|
12620
12597
|
primary: {
|
|
12621
|
-
borderLeft: `1px solid ${
|
|
12598
|
+
borderLeft: `1px solid ${import_dds_design_tokens57.ddsBaseTokens.colors.DdsColorNeutralsWhite}`
|
|
12622
12599
|
}
|
|
12623
12600
|
};
|
|
12624
12601
|
var tokens3 = {
|
|
@@ -12626,11 +12603,11 @@ var tokens3 = {
|
|
|
12626
12603
|
};
|
|
12627
12604
|
|
|
12628
12605
|
// src/components/SplitButton/SplitButton.tsx
|
|
12629
|
-
var
|
|
12630
|
-
var Container14 =
|
|
12606
|
+
var import_jsx_runtime251 = require("react/jsx-runtime");
|
|
12607
|
+
var Container14 = import_styled_components79.default.div`
|
|
12631
12608
|
display: flex;
|
|
12632
12609
|
`;
|
|
12633
|
-
var MainButton = (0,
|
|
12610
|
+
var MainButton = (0, import_styled_components79.default)(Button)`
|
|
12634
12611
|
border-top-right-radius: 0;
|
|
12635
12612
|
border-bottom-right-radius: 0;
|
|
12636
12613
|
border-right: none;
|
|
@@ -12639,7 +12616,7 @@ var MainButton = (0, import_styled_components80.default)(Button)`
|
|
|
12639
12616
|
z-index: 0;
|
|
12640
12617
|
}
|
|
12641
12618
|
`;
|
|
12642
|
-
var OptionButton = (0,
|
|
12619
|
+
var OptionButton = (0, import_styled_components79.default)(Button)`
|
|
12643
12620
|
border-top-left-radius: 0;
|
|
12644
12621
|
border-bottom-left-radius: 0;
|
|
12645
12622
|
|
|
@@ -12657,7 +12634,7 @@ var OptionButton = (0, import_styled_components80.default)(Button)`
|
|
|
12657
12634
|
${(props) => props.purpose === "primary" && `border-left: ${tokens3.mainButton.primary.borderLeft}`};
|
|
12658
12635
|
}
|
|
12659
12636
|
`;
|
|
12660
|
-
var SplitButton = (0,
|
|
12637
|
+
var SplitButton = (0, import_react95.forwardRef)(
|
|
12661
12638
|
(props, ref) => {
|
|
12662
12639
|
const {
|
|
12663
12640
|
size: size2,
|
|
@@ -12665,14 +12642,14 @@ var SplitButton = (0, import_react96.forwardRef)(
|
|
|
12665
12642
|
secondaryActions,
|
|
12666
12643
|
purpose = "primary"
|
|
12667
12644
|
} = props;
|
|
12668
|
-
const [isOpen, setIsOpen] = (0,
|
|
12645
|
+
const [isOpen, setIsOpen] = (0, import_react95.useState)(false);
|
|
12669
12646
|
const buttonStyleProps = {
|
|
12670
12647
|
appearance: "filled",
|
|
12671
12648
|
purpose,
|
|
12672
12649
|
size: size2
|
|
12673
12650
|
};
|
|
12674
|
-
return /* @__PURE__ */ (0,
|
|
12675
|
-
/* @__PURE__ */ (0,
|
|
12651
|
+
return /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(Container14, { ref, children: [
|
|
12652
|
+
/* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
|
|
12676
12653
|
MainButton,
|
|
12677
12654
|
{
|
|
12678
12655
|
...buttonStyleProps,
|
|
@@ -12680,8 +12657,8 @@ var SplitButton = (0, import_react96.forwardRef)(
|
|
|
12680
12657
|
iconPosition: "left"
|
|
12681
12658
|
}
|
|
12682
12659
|
),
|
|
12683
|
-
/* @__PURE__ */ (0,
|
|
12684
|
-
/* @__PURE__ */ (0,
|
|
12660
|
+
/* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(OverflowMenuGroup, { onToggle: () => setIsOpen(!isOpen), children: [
|
|
12661
|
+
/* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
|
|
12685
12662
|
OptionButton,
|
|
12686
12663
|
{
|
|
12687
12664
|
...buttonStyleProps,
|
|
@@ -12690,7 +12667,7 @@ var SplitButton = (0, import_react96.forwardRef)(
|
|
|
12690
12667
|
purpose
|
|
12691
12668
|
}
|
|
12692
12669
|
),
|
|
12693
|
-
/* @__PURE__ */ (0,
|
|
12670
|
+
/* @__PURE__ */ (0, import_jsx_runtime251.jsx)(OverflowMenu, { items: secondaryActions, placement: "bottom-end" })
|
|
12694
12671
|
] })
|
|
12695
12672
|
] });
|
|
12696
12673
|
}
|
|
@@ -12698,56 +12675,56 @@ var SplitButton = (0, import_react96.forwardRef)(
|
|
|
12698
12675
|
SplitButton.displayName = "SplitButton";
|
|
12699
12676
|
|
|
12700
12677
|
// src/components/Table/collapsible/CollapsibleRow.tsx
|
|
12701
|
-
var
|
|
12702
|
-
var
|
|
12678
|
+
var import_react105 = require("react");
|
|
12679
|
+
var import_styled_components88 = __toESM(require("styled-components"));
|
|
12703
12680
|
|
|
12704
12681
|
// src/components/Table/collapsible/Table.context.tsx
|
|
12705
|
-
var
|
|
12706
|
-
var CollapsibleTableContext = (0,
|
|
12682
|
+
var import_react96 = require("react");
|
|
12683
|
+
var CollapsibleTableContext = (0, import_react96.createContext)({
|
|
12707
12684
|
headerValues: [],
|
|
12708
12685
|
definingColumnIndex: [0]
|
|
12709
12686
|
});
|
|
12710
|
-
var useCollapsibleTableContext = () => (0,
|
|
12687
|
+
var useCollapsibleTableContext = () => (0, import_react96.useContext)(CollapsibleTableContext);
|
|
12711
12688
|
|
|
12712
12689
|
// src/components/Table/normal/Body.tsx
|
|
12713
|
-
var
|
|
12714
|
-
var
|
|
12715
|
-
var
|
|
12716
|
-
var StyledBody =
|
|
12717
|
-
var Body2 = (0,
|
|
12690
|
+
var import_react97 = require("react");
|
|
12691
|
+
var import_styled_components80 = __toESM(require("styled-components"));
|
|
12692
|
+
var import_jsx_runtime252 = require("react/jsx-runtime");
|
|
12693
|
+
var StyledBody = import_styled_components80.default.tbody``;
|
|
12694
|
+
var Body2 = (0, import_react97.forwardRef)(
|
|
12718
12695
|
({ children, ...rest }, ref) => {
|
|
12719
12696
|
const bodyProps = {
|
|
12720
12697
|
...rest
|
|
12721
12698
|
};
|
|
12722
|
-
return /* @__PURE__ */ (0,
|
|
12699
|
+
return /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(StyledBody, { ref, ...bodyProps, children });
|
|
12723
12700
|
}
|
|
12724
12701
|
);
|
|
12725
12702
|
Body2.displayName = "Table.Body";
|
|
12726
12703
|
|
|
12727
12704
|
// src/components/Table/normal/Cell.tsx
|
|
12728
|
-
var import_react100 = require("react");
|
|
12729
|
-
var import_styled_components83 = __toESM(require("styled-components"));
|
|
12730
|
-
|
|
12731
|
-
// src/components/Table/normal/Head.tsx
|
|
12732
12705
|
var import_react99 = require("react");
|
|
12733
12706
|
var import_styled_components82 = __toESM(require("styled-components"));
|
|
12734
|
-
|
|
12735
|
-
|
|
12736
|
-
var
|
|
12707
|
+
|
|
12708
|
+
// src/components/Table/normal/Head.tsx
|
|
12709
|
+
var import_react98 = require("react");
|
|
12710
|
+
var import_styled_components81 = __toESM(require("styled-components"));
|
|
12711
|
+
var import_jsx_runtime253 = require("react/jsx-runtime");
|
|
12712
|
+
var StyledHead = import_styled_components81.default.thead``;
|
|
12713
|
+
var Head = (0, import_react98.forwardRef)(
|
|
12737
12714
|
({ children, ...rest }, ref) => {
|
|
12738
|
-
return /* @__PURE__ */ (0,
|
|
12715
|
+
return /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledHead, { ref, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(HeadContext.Provider, { value: true, children }) });
|
|
12739
12716
|
}
|
|
12740
12717
|
);
|
|
12741
12718
|
Head.displayName = "Table.Head";
|
|
12742
|
-
var HeadContext = (0,
|
|
12719
|
+
var HeadContext = (0, import_react98.createContext)(false);
|
|
12743
12720
|
function useIsInTableHead() {
|
|
12744
|
-
const isInTableHead = (0,
|
|
12721
|
+
const isInTableHead = (0, import_react98.useContext)(HeadContext);
|
|
12745
12722
|
return isInTableHead;
|
|
12746
12723
|
}
|
|
12747
12724
|
|
|
12748
12725
|
// src/components/Table/normal/Table.tokens.tsx
|
|
12749
|
-
var
|
|
12750
|
-
var { font: font2, colors: colors31, border: border13, spacing: spacing35, iconSizes: iconSizes3, borderRadius: borderRadius9 } =
|
|
12726
|
+
var import_dds_design_tokens58 = require("@norges-domstoler/dds-design-tokens");
|
|
12727
|
+
var { font: font2, colors: colors31, border: border13, spacing: spacing35, iconSizes: iconSizes3, borderRadius: borderRadius9 } = import_dds_design_tokens58.ddsBaseTokens;
|
|
12751
12728
|
var row = {
|
|
12752
12729
|
body: {
|
|
12753
12730
|
odd: {
|
|
@@ -12818,20 +12795,20 @@ var tableTokens = {
|
|
|
12818
12795
|
};
|
|
12819
12796
|
|
|
12820
12797
|
// src/components/Table/normal/Cell.tsx
|
|
12821
|
-
var
|
|
12798
|
+
var import_jsx_runtime254 = require("react/jsx-runtime");
|
|
12822
12799
|
var { cell: cell3 } = tableTokens;
|
|
12823
12800
|
var getLayoutStyle = (layout) => {
|
|
12824
12801
|
switch (layout) {
|
|
12825
12802
|
case "center":
|
|
12826
|
-
return
|
|
12803
|
+
return import_styled_components82.css`
|
|
12827
12804
|
justify-content: center;
|
|
12828
12805
|
`;
|
|
12829
12806
|
case "right":
|
|
12830
|
-
return
|
|
12807
|
+
return import_styled_components82.css`
|
|
12831
12808
|
justify-content: flex-end;
|
|
12832
12809
|
`;
|
|
12833
12810
|
case "text and icon":
|
|
12834
|
-
return
|
|
12811
|
+
return import_styled_components82.css`
|
|
12835
12812
|
gap: ${cell3.layout.textAndIcon.gap};
|
|
12836
12813
|
`;
|
|
12837
12814
|
default:
|
|
@@ -12839,12 +12816,12 @@ var getLayoutStyle = (layout) => {
|
|
|
12839
12816
|
return;
|
|
12840
12817
|
}
|
|
12841
12818
|
};
|
|
12842
|
-
var StyledCell =
|
|
12843
|
-
${({ $type: type }) => type === "head" &&
|
|
12819
|
+
var StyledCell = import_styled_components82.default.td`
|
|
12820
|
+
${({ $type: type }) => type === "head" && import_styled_components82.css`
|
|
12844
12821
|
background-color: ${cell3.head.backgroundColor};
|
|
12845
12822
|
`}
|
|
12846
12823
|
`;
|
|
12847
|
-
var InnerCell =
|
|
12824
|
+
var InnerCell = import_styled_components82.default.div`
|
|
12848
12825
|
display: flex;
|
|
12849
12826
|
align-items: center;
|
|
12850
12827
|
${({ $layout: layout }) => getLayoutStyle(layout)}
|
|
@@ -12858,49 +12835,49 @@ var getTableCellType = (type) => {
|
|
|
12858
12835
|
return "td";
|
|
12859
12836
|
}
|
|
12860
12837
|
};
|
|
12861
|
-
var Cell2 = (0,
|
|
12838
|
+
var Cell2 = (0, import_react99.forwardRef)(
|
|
12862
12839
|
({ children, type: _type, layout = "left", collapsibleProps, ...rest }, ref) => {
|
|
12863
12840
|
const isInHead = useIsInTableHead();
|
|
12864
12841
|
const type = _type != null ? _type : isInHead ? "head" : "data";
|
|
12865
12842
|
const as = getTableCellType(type);
|
|
12866
12843
|
const { isCollapsibleChild } = collapsibleProps != null ? collapsibleProps : {};
|
|
12867
|
-
return isCollapsibleChild ? /* @__PURE__ */ (0,
|
|
12844
|
+
return isCollapsibleChild ? /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(DescriptionListDesc, { children }) : /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(StyledCell, { as, ref, $type: type, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(InnerCell, { $layout: layout, children }) });
|
|
12868
12845
|
}
|
|
12869
12846
|
);
|
|
12870
12847
|
Cell2.displayName = "Table.Cell";
|
|
12871
12848
|
|
|
12872
12849
|
// src/components/Table/normal/Foot.tsx
|
|
12873
|
-
var
|
|
12874
|
-
var
|
|
12875
|
-
var
|
|
12876
|
-
var StyledFoot =
|
|
12877
|
-
var Foot = (0,
|
|
12850
|
+
var import_react100 = require("react");
|
|
12851
|
+
var import_styled_components83 = __toESM(require("styled-components"));
|
|
12852
|
+
var import_jsx_runtime255 = require("react/jsx-runtime");
|
|
12853
|
+
var StyledFoot = import_styled_components83.default.tfoot``;
|
|
12854
|
+
var Foot = (0, import_react100.forwardRef)(
|
|
12878
12855
|
({ children, ...rest }, ref) => {
|
|
12879
|
-
return /* @__PURE__ */ (0,
|
|
12856
|
+
return /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(StyledFoot, { ref, ...rest, children });
|
|
12880
12857
|
}
|
|
12881
12858
|
);
|
|
12882
12859
|
Foot.displayName = "Table.Foot";
|
|
12883
12860
|
|
|
12884
12861
|
// src/components/Table/normal/Row.tsx
|
|
12885
|
-
var
|
|
12862
|
+
var import_react101 = require("react");
|
|
12886
12863
|
|
|
12887
12864
|
// src/components/Table/normal/Table.styles.tsx
|
|
12888
|
-
var
|
|
12865
|
+
var import_styled_components84 = __toESM(require("styled-components"));
|
|
12889
12866
|
var { row: row2 } = tableTokens;
|
|
12890
12867
|
var bodyRowStyles = (mode, selected) => {
|
|
12891
|
-
return
|
|
12892
|
-
${mode === "sum" &&
|
|
12868
|
+
return import_styled_components84.css`
|
|
12869
|
+
${mode === "sum" && import_styled_components84.css`
|
|
12893
12870
|
font-weight: 600;
|
|
12894
12871
|
border-top: ${row2.body.mode.sum.borderTop};
|
|
12895
12872
|
border-bottom: ${row2.body.mode.sum.borderBottom};
|
|
12896
12873
|
background-color: ${row2.body.mode.sum.backgroundColor};
|
|
12897
12874
|
`}
|
|
12898
|
-
${selected &&
|
|
12875
|
+
${selected && import_styled_components84.css`
|
|
12899
12876
|
background-color: ${row2.body.selected.backgroundColor};
|
|
12900
12877
|
`}
|
|
12901
12878
|
`;
|
|
12902
12879
|
};
|
|
12903
|
-
var StyledRow =
|
|
12880
|
+
var StyledRow = import_styled_components84.default.tr`
|
|
12904
12881
|
@media (prefers-reduced-motion: no-preference) {
|
|
12905
12882
|
transition:
|
|
12906
12883
|
background-color 0.2s,
|
|
@@ -12910,11 +12887,11 @@ var StyledRow = import_styled_components85.default.tr`
|
|
|
12910
12887
|
|
|
12911
12888
|
${getFontStyling(defaultTypographyType, true)}
|
|
12912
12889
|
|
|
12913
|
-
${({ type }) => type === "head" &&
|
|
12890
|
+
${({ type }) => type === "head" && import_styled_components84.css`
|
|
12914
12891
|
font-weight: 600;
|
|
12915
12892
|
text-align: left;
|
|
12916
12893
|
`}
|
|
12917
|
-
${({ type, $mode: mode, $selected: selected, $hoverable: hoverable }) => type === "body" &&
|
|
12894
|
+
${({ type, $mode: mode, $selected: selected, $hoverable: hoverable }) => type === "body" && import_styled_components84.css`
|
|
12918
12895
|
&:nth-of-type(even) {
|
|
12919
12896
|
background-color: ${row2.body.even.backgroundColor};
|
|
12920
12897
|
${bodyRowStyles(mode, selected)}
|
|
@@ -12925,7 +12902,7 @@ var StyledRow = import_styled_components85.default.tr`
|
|
|
12925
12902
|
${bodyRowStyles(mode, selected)}
|
|
12926
12903
|
}
|
|
12927
12904
|
|
|
12928
|
-
${hoverable &&
|
|
12905
|
+
${hoverable && import_styled_components84.css`
|
|
12929
12906
|
&:hover {
|
|
12930
12907
|
background-color: ${row2.body.hover.backgroundColor};
|
|
12931
12908
|
}
|
|
@@ -12937,12 +12914,12 @@ var StyledRow = import_styled_components85.default.tr`
|
|
|
12937
12914
|
`;
|
|
12938
12915
|
|
|
12939
12916
|
// src/components/Table/normal/Row.tsx
|
|
12940
|
-
var
|
|
12941
|
-
var Row = (0,
|
|
12917
|
+
var import_jsx_runtime256 = require("react/jsx-runtime");
|
|
12918
|
+
var Row = (0, import_react101.forwardRef)(
|
|
12942
12919
|
({ type: _type, mode = "normal", hoverable, selected, children, ...rest }, ref) => {
|
|
12943
12920
|
const isInHeader = useIsInTableHead();
|
|
12944
12921
|
const type = _type != null ? _type : isInHeader ? "head" : "body";
|
|
12945
|
-
return /* @__PURE__ */ (0,
|
|
12922
|
+
return /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
|
|
12946
12923
|
StyledRow,
|
|
12947
12924
|
{
|
|
12948
12925
|
type,
|
|
@@ -12959,11 +12936,11 @@ var Row = (0, import_react102.forwardRef)(
|
|
|
12959
12936
|
Row.displayName = "Table.Row";
|
|
12960
12937
|
|
|
12961
12938
|
// src/components/Table/normal/SortCell.tsx
|
|
12962
|
-
var
|
|
12963
|
-
var
|
|
12964
|
-
var
|
|
12939
|
+
var import_react102 = require("react");
|
|
12940
|
+
var import_styled_components85 = __toESM(require("styled-components"));
|
|
12941
|
+
var import_jsx_runtime257 = require("react/jsx-runtime");
|
|
12965
12942
|
var { cell: cell4 } = tableTokens;
|
|
12966
|
-
var StyledButton5 =
|
|
12943
|
+
var StyledButton5 = import_styled_components85.default.button`
|
|
12967
12944
|
${normalizeButton}
|
|
12968
12945
|
user-select: text;
|
|
12969
12946
|
${removeButtonStyling}
|
|
@@ -12976,19 +12953,19 @@ var StyledButton5 = import_styled_components86.default.button`
|
|
|
12976
12953
|
`;
|
|
12977
12954
|
var makeSortIcon = (isSorted, sortOrder) => {
|
|
12978
12955
|
if (!isSorted || !sortOrder) {
|
|
12979
|
-
return /* @__PURE__ */ (0,
|
|
12956
|
+
return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(Icon, { icon: UnfoldMoreIcon, iconSize: "inherit" });
|
|
12980
12957
|
}
|
|
12981
|
-
return sortOrder === "ascending" ? /* @__PURE__ */ (0,
|
|
12958
|
+
return sortOrder === "ascending" ? /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(Icon, { icon: ChevronDownIcon, iconSize: "inherit" }) : /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(Icon, { icon: ChevronUpIcon, iconSize: "inherit" });
|
|
12982
12959
|
};
|
|
12983
|
-
var SortCell = (0,
|
|
12984
|
-
({ isSorted, sortOrder, onClick, children, ...rest }, ref) => /* @__PURE__ */ (0,
|
|
12960
|
+
var SortCell = (0, import_react102.forwardRef)(
|
|
12961
|
+
({ isSorted, sortOrder, onClick, children, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
|
|
12985
12962
|
Cell2,
|
|
12986
12963
|
{
|
|
12987
12964
|
ref,
|
|
12988
12965
|
type: "head",
|
|
12989
12966
|
"aria-sort": isSorted && sortOrder ? sortOrder : void 0,
|
|
12990
12967
|
...rest,
|
|
12991
|
-
children: /* @__PURE__ */ (0,
|
|
12968
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(
|
|
12992
12969
|
StyledButton5,
|
|
12993
12970
|
{
|
|
12994
12971
|
onClick,
|
|
@@ -13006,11 +12983,11 @@ var SortCell = (0, import_react103.forwardRef)(
|
|
|
13006
12983
|
SortCell.displayName = "Table.SortCell";
|
|
13007
12984
|
|
|
13008
12985
|
// src/components/Table/normal/Table.tsx
|
|
13009
|
-
var
|
|
13010
|
-
var
|
|
13011
|
-
var
|
|
12986
|
+
var import_react103 = require("react");
|
|
12987
|
+
var import_styled_components86 = __toESM(require("styled-components"));
|
|
12988
|
+
var import_jsx_runtime258 = require("react/jsx-runtime");
|
|
13012
12989
|
var { cell: cell5, row: row3 } = tableTokens;
|
|
13013
|
-
var StyledTable =
|
|
12990
|
+
var StyledTable = import_styled_components86.default.table`
|
|
13014
12991
|
border-spacing: 0;
|
|
13015
12992
|
border-collapse: collapse;
|
|
13016
12993
|
*::selection {
|
|
@@ -13018,13 +12995,13 @@ var StyledTable = import_styled_components87.default.table`
|
|
|
13018
12995
|
}
|
|
13019
12996
|
${scrollbarStyling.webkit}
|
|
13020
12997
|
${scrollbarStyling.firefox}
|
|
13021
|
-
${({ $density }) =>
|
|
12998
|
+
${({ $density }) => import_styled_components86.css`
|
|
13022
12999
|
td,
|
|
13023
13000
|
th {
|
|
13024
13001
|
padding: ${cell5.density[$density].padding};
|
|
13025
13002
|
}
|
|
13026
13003
|
`}
|
|
13027
|
-
${({ $density }) => $density === "extraCompact" &&
|
|
13004
|
+
${({ $density }) => $density === "extraCompact" && import_styled_components86.css`
|
|
13028
13005
|
th {
|
|
13029
13006
|
background-color: ${row3.head.extraCompact.backgroundColor};
|
|
13030
13007
|
font-size: ${row3.head.extraCompact.fontSize};
|
|
@@ -13038,7 +13015,7 @@ var StyledTable = import_styled_components87.default.table`
|
|
|
13038
13015
|
}
|
|
13039
13016
|
}
|
|
13040
13017
|
`}
|
|
13041
|
-
${({ $stickyHeader }) => $stickyHeader &&
|
|
13018
|
+
${({ $stickyHeader }) => $stickyHeader && import_styled_components86.css`
|
|
13042
13019
|
tr[type='head'] {
|
|
13043
13020
|
th[type='head'] {
|
|
13044
13021
|
position: sticky;
|
|
@@ -13047,15 +13024,15 @@ var StyledTable = import_styled_components87.default.table`
|
|
|
13047
13024
|
}
|
|
13048
13025
|
}
|
|
13049
13026
|
`}
|
|
13050
|
-
${({ $withDividers }) => $withDividers &&
|
|
13027
|
+
${({ $withDividers }) => $withDividers && import_styled_components86.css`
|
|
13051
13028
|
tr[type='body'] {
|
|
13052
13029
|
border-bottom: ${row3.body.withDividers.borderBottom};
|
|
13053
13030
|
}
|
|
13054
13031
|
`}
|
|
13055
13032
|
`;
|
|
13056
|
-
var Table = (0,
|
|
13033
|
+
var Table = (0, import_react103.forwardRef)(
|
|
13057
13034
|
({ density = "normal", stickyHeader, withDividers, children, ...rest }, ref) => {
|
|
13058
|
-
return /* @__PURE__ */ (0,
|
|
13035
|
+
return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
|
|
13059
13036
|
StyledTable,
|
|
13060
13037
|
{
|
|
13061
13038
|
...rest,
|
|
@@ -13071,38 +13048,38 @@ var Table = (0, import_react104.forwardRef)(
|
|
|
13071
13048
|
Table.displayName = "Table";
|
|
13072
13049
|
|
|
13073
13050
|
// src/components/Table/normal/TableWrapper.tsx
|
|
13074
|
-
var
|
|
13075
|
-
var
|
|
13076
|
-
var
|
|
13077
|
-
var Wrapper6 =
|
|
13078
|
-
${({ $overflowX }) => $overflowX &&
|
|
13051
|
+
var import_react104 = require("react");
|
|
13052
|
+
var import_styled_components87 = __toESM(require("styled-components"));
|
|
13053
|
+
var import_jsx_runtime259 = require("react/jsx-runtime");
|
|
13054
|
+
var Wrapper6 = import_styled_components87.default.div`
|
|
13055
|
+
${({ $overflowX }) => $overflowX && import_styled_components87.css`
|
|
13079
13056
|
overflow-x: auto;
|
|
13080
13057
|
`}
|
|
13081
13058
|
${scrollbarStyling.webkit}
|
|
13082
13059
|
${scrollbarStyling.firefox}
|
|
13083
13060
|
`;
|
|
13084
13061
|
var TableWrapper = ({ children, ...rest }) => {
|
|
13085
|
-
const [overflowX, setOverflowX] = (0,
|
|
13086
|
-
const [windowWidth, setWindowWidth] = (0,
|
|
13062
|
+
const [overflowX, setOverflowX] = (0, import_react104.useState)(false);
|
|
13063
|
+
const [windowWidth, setWindowWidth] = (0, import_react104.useState)(window.innerWidth);
|
|
13087
13064
|
function isOverflowingX(event) {
|
|
13088
13065
|
return event.offsetWidth < event.scrollWidth;
|
|
13089
13066
|
}
|
|
13090
|
-
const wrapperRef = (0,
|
|
13091
|
-
(0,
|
|
13067
|
+
const wrapperRef = (0, import_react104.useRef)(null);
|
|
13068
|
+
(0, import_react104.useEffect)(() => {
|
|
13092
13069
|
if ((wrapperRef == null ? void 0 : wrapperRef.current) && isOverflowingX(wrapperRef.current)) {
|
|
13093
13070
|
setOverflowX(true);
|
|
13094
13071
|
return;
|
|
13095
13072
|
}
|
|
13096
13073
|
setOverflowX(false);
|
|
13097
13074
|
}, [windowWidth]);
|
|
13098
|
-
(0,
|
|
13075
|
+
(0, import_react104.useEffect)(() => {
|
|
13099
13076
|
function handleResize() {
|
|
13100
13077
|
setWindowWidth(window.innerWidth);
|
|
13101
13078
|
}
|
|
13102
13079
|
window.addEventListener("resize", handleResize);
|
|
13103
13080
|
return () => window.removeEventListener("resize", handleResize);
|
|
13104
13081
|
});
|
|
13105
|
-
return /* @__PURE__ */ (0,
|
|
13082
|
+
return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(Wrapper6, { $overflowX: overflowX, ref: wrapperRef, ...rest, children });
|
|
13106
13083
|
};
|
|
13107
13084
|
TableWrapper.displayName = "Table.Wrapper";
|
|
13108
13085
|
|
|
@@ -13117,9 +13094,9 @@ Table2.Row = Row;
|
|
|
13117
13094
|
Table2.Foot = Foot;
|
|
13118
13095
|
|
|
13119
13096
|
// src/components/Table/collapsible/CollapsibleRow.tsx
|
|
13120
|
-
var
|
|
13097
|
+
var import_jsx_runtime260 = require("react/jsx-runtime");
|
|
13121
13098
|
var { collapseButton: collapseButton2 } = tableTokens;
|
|
13122
|
-
var CollapseButton =
|
|
13099
|
+
var CollapseButton = import_styled_components88.default.button`
|
|
13123
13100
|
${removeButtonStyling}
|
|
13124
13101
|
margin-left: auto;
|
|
13125
13102
|
margin-right: auto;
|
|
@@ -13134,12 +13111,12 @@ var CollapseButton = import_styled_components89.default.button`
|
|
|
13134
13111
|
${focusVisible}
|
|
13135
13112
|
}
|
|
13136
13113
|
`;
|
|
13137
|
-
var DescriptionListCell = (0,
|
|
13114
|
+
var DescriptionListCell = (0, import_styled_components88.default)(Cell2)`
|
|
13138
13115
|
& > div {
|
|
13139
13116
|
display: block;
|
|
13140
13117
|
}
|
|
13141
13118
|
`;
|
|
13142
|
-
var CollapsibleRow = (0,
|
|
13119
|
+
var CollapsibleRow = (0, import_react105.forwardRef)(
|
|
13143
13120
|
({ type: _type, mode = "normal", selected, hoverable, children, ...rest }, ref) => {
|
|
13144
13121
|
const isInHead = useIsInTableHead();
|
|
13145
13122
|
const type = _type != null ? _type : isInHead ? "head" : "body";
|
|
@@ -13151,14 +13128,14 @@ var CollapsibleRow = (0, import_react106.forwardRef)(
|
|
|
13151
13128
|
...rest
|
|
13152
13129
|
};
|
|
13153
13130
|
const { isCollapsed, headerValues, definingColumnIndex } = useCollapsibleTableContext();
|
|
13154
|
-
const [childrenCollapsed, setChildrenCollapsed] = (0,
|
|
13155
|
-
(0,
|
|
13131
|
+
const [childrenCollapsed, setChildrenCollapsed] = (0, import_react105.useState)(true);
|
|
13132
|
+
(0, import_react105.useEffect)(() => {
|
|
13156
13133
|
!isCollapsed && setChildrenCollapsed(true);
|
|
13157
13134
|
}, [isCollapsed]);
|
|
13158
13135
|
const collapsedHeaderValues = headerValues.filter(
|
|
13159
13136
|
(column, index) => definingColumnIndex.indexOf(index) === -1
|
|
13160
13137
|
);
|
|
13161
|
-
const childrenArray =
|
|
13138
|
+
const childrenArray = import_react105.Children.toArray(children);
|
|
13162
13139
|
const collapsedChildren = childrenArray.filter(
|
|
13163
13140
|
(column, index) => definingColumnIndex.indexOf(index) === -1
|
|
13164
13141
|
);
|
|
@@ -13167,25 +13144,25 @@ var CollapsibleRow = (0, import_react106.forwardRef)(
|
|
|
13167
13144
|
const collapsedRenderedChildren = isCollapsed && collapsedHeaderValues.length > 0 ? collapsedChildren.map(function(child, index) {
|
|
13168
13145
|
const id = derivativeIdGenerator(prefix2, index.toString());
|
|
13169
13146
|
collapsibleIds.push(id);
|
|
13170
|
-
return /* @__PURE__ */ (0,
|
|
13171
|
-
/* @__PURE__ */ (0,
|
|
13172
|
-
(0,
|
|
13147
|
+
return /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(import_react105.Fragment, { children: [
|
|
13148
|
+
/* @__PURE__ */ (0, import_jsx_runtime260.jsx)(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
|
|
13149
|
+
(0, import_react105.isValidElement)(child) && (0, import_react105.cloneElement)(child, {
|
|
13173
13150
|
collapsibleProps: { isCollapsibleChild: true }
|
|
13174
13151
|
})
|
|
13175
13152
|
] }, `DL-${index}`);
|
|
13176
13153
|
}) : null;
|
|
13177
|
-
const collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ (0,
|
|
13154
|
+
const collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(StyledRow, { type, children: /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(DescriptionListCell, { colSpan: definingColumnIndex.length + 1, children: /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(DescriptionList, { children: collapsedRenderedChildren }) }) }) : null;
|
|
13178
13155
|
const definingColumnCells = childrenArray.slice().filter((column, index) => definingColumnIndex.indexOf(index) > -1).sort((a2, b) => {
|
|
13179
13156
|
return definingColumnIndex.indexOf(childrenArray.indexOf(a2)) - definingColumnIndex.indexOf(childrenArray.indexOf(b));
|
|
13180
13157
|
});
|
|
13181
13158
|
const headerRow = () => {
|
|
13182
13159
|
if (type !== "head" || !isCollapsed)
|
|
13183
13160
|
return null;
|
|
13184
|
-
return /* @__PURE__ */ (0,
|
|
13161
|
+
return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(StyledRow, { ref, type, ...rowProps, children: /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(import_jsx_runtime260.Fragment, { children: [
|
|
13185
13162
|
definingColumnCells,
|
|
13186
|
-
/* @__PURE__ */ (0,
|
|
13163
|
+
/* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(Table2.Cell, { type: "head", layout: "center", children: [
|
|
13187
13164
|
"Utvid",
|
|
13188
|
-
/* @__PURE__ */ (0,
|
|
13165
|
+
/* @__PURE__ */ (0, import_jsx_runtime260.jsx)(VisuallyHidden, { as: "span", children: "raden" })
|
|
13189
13166
|
] })
|
|
13190
13167
|
] }) });
|
|
13191
13168
|
};
|
|
@@ -13193,7 +13170,7 @@ var CollapsibleRow = (0, import_react106.forwardRef)(
|
|
|
13193
13170
|
const rowWithChevron = () => {
|
|
13194
13171
|
if (type !== "body" || !isCollapsed)
|
|
13195
13172
|
return null;
|
|
13196
|
-
return /* @__PURE__ */ (0,
|
|
13173
|
+
return /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(
|
|
13197
13174
|
StyledRow,
|
|
13198
13175
|
{
|
|
13199
13176
|
ref,
|
|
@@ -13202,13 +13179,13 @@ var CollapsibleRow = (0, import_react106.forwardRef)(
|
|
|
13202
13179
|
"data-isopencollapsibleheader": !childrenCollapsed && true,
|
|
13203
13180
|
children: [
|
|
13204
13181
|
definingColumnCells,
|
|
13205
|
-
/* @__PURE__ */ (0,
|
|
13182
|
+
/* @__PURE__ */ (0, import_jsx_runtime260.jsx)(Table2.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
|
|
13206
13183
|
CollapseButton,
|
|
13207
13184
|
{
|
|
13208
13185
|
onClick: () => setChildrenCollapsed(!childrenCollapsed),
|
|
13209
13186
|
"aria-expanded": !childrenCollapsed,
|
|
13210
13187
|
"aria-controls": idList,
|
|
13211
|
-
children: /* @__PURE__ */ (0,
|
|
13188
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
|
|
13212
13189
|
AnimatedChevronUpDown,
|
|
13213
13190
|
{
|
|
13214
13191
|
isUp: childrenCollapsed ? false : true,
|
|
@@ -13222,30 +13199,30 @@ var CollapsibleRow = (0, import_react106.forwardRef)(
|
|
|
13222
13199
|
}
|
|
13223
13200
|
);
|
|
13224
13201
|
};
|
|
13225
|
-
return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ (0,
|
|
13202
|
+
return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(import_jsx_runtime260.Fragment, { children: [
|
|
13226
13203
|
headerRow(),
|
|
13227
|
-
type === "body" && /* @__PURE__ */ (0,
|
|
13204
|
+
type === "body" && /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(import_jsx_runtime260.Fragment, { children: [
|
|
13228
13205
|
rowWithChevron(),
|
|
13229
13206
|
childrenCollapsed ? null : collapsedRows
|
|
13230
13207
|
] })
|
|
13231
|
-
] }) : /* @__PURE__ */ (0,
|
|
13208
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(StyledRow, { ref, type, ...rowProps, children });
|
|
13232
13209
|
}
|
|
13233
13210
|
);
|
|
13234
13211
|
CollapsibleRow.displayName = "CollapsibleTable.Row";
|
|
13235
13212
|
|
|
13236
13213
|
// src/components/Table/collapsible/CollapsibleTable.tsx
|
|
13237
|
-
var
|
|
13238
|
-
var
|
|
13239
|
-
var
|
|
13240
|
-
var StyledTable2 = (0,
|
|
13214
|
+
var import_react106 = require("react");
|
|
13215
|
+
var import_styled_components89 = __toESM(require("styled-components"));
|
|
13216
|
+
var import_jsx_runtime261 = require("react/jsx-runtime");
|
|
13217
|
+
var StyledTable2 = (0, import_styled_components89.default)(Table2)`
|
|
13241
13218
|
width: 100%;
|
|
13242
|
-
${({ withDividers }) => withDividers &&
|
|
13219
|
+
${({ withDividers }) => withDividers && import_styled_components89.css`
|
|
13243
13220
|
tr[data-isopencollapsibleheader='true'] {
|
|
13244
13221
|
border-bottom: none;
|
|
13245
13222
|
}
|
|
13246
13223
|
`}
|
|
13247
13224
|
`;
|
|
13248
|
-
var CollapsibleTable = (0,
|
|
13225
|
+
var CollapsibleTable = (0, import_react106.forwardRef)((props, ref) => {
|
|
13249
13226
|
const {
|
|
13250
13227
|
density = "normal",
|
|
13251
13228
|
children,
|
|
@@ -13254,7 +13231,7 @@ var CollapsibleTable = (0, import_react107.forwardRef)((props, ref) => {
|
|
|
13254
13231
|
definingColumnIndex = [0],
|
|
13255
13232
|
...rest
|
|
13256
13233
|
} = props;
|
|
13257
|
-
return /* @__PURE__ */ (0,
|
|
13234
|
+
return /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
|
|
13258
13235
|
CollapsibleTableContext.Provider,
|
|
13259
13236
|
{
|
|
13260
13237
|
value: {
|
|
@@ -13262,7 +13239,7 @@ var CollapsibleTable = (0, import_react107.forwardRef)((props, ref) => {
|
|
|
13262
13239
|
headerValues,
|
|
13263
13240
|
definingColumnIndex
|
|
13264
13241
|
},
|
|
13265
|
-
children: /* @__PURE__ */ (0,
|
|
13242
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(StyledTable2, { ref, density, ...rest, children })
|
|
13266
13243
|
}
|
|
13267
13244
|
);
|
|
13268
13245
|
});
|
|
@@ -13273,12 +13250,12 @@ var CollapsibleTable2 = CollapsibleTable;
|
|
|
13273
13250
|
CollapsibleTable2.Row = CollapsibleRow;
|
|
13274
13251
|
|
|
13275
13252
|
// src/components/Tabs/Tabs.tsx
|
|
13276
|
-
var
|
|
13277
|
-
var
|
|
13253
|
+
var import_react108 = require("react");
|
|
13254
|
+
var import_styled_components90 = __toESM(require("styled-components"));
|
|
13278
13255
|
|
|
13279
13256
|
// src/components/Tabs/Tabs.context.tsx
|
|
13280
|
-
var
|
|
13281
|
-
var TabsContext = (0,
|
|
13257
|
+
var import_react107 = require("react");
|
|
13258
|
+
var TabsContext = (0, import_react107.createContext)({
|
|
13282
13259
|
activeTab: 0,
|
|
13283
13260
|
tabsId: "",
|
|
13284
13261
|
handleTabChange: () => null,
|
|
@@ -13288,16 +13265,16 @@ var TabsContext = (0, import_react108.createContext)({
|
|
|
13288
13265
|
setHasTabFocus: () => null,
|
|
13289
13266
|
tabContentDirection: "row"
|
|
13290
13267
|
});
|
|
13291
|
-
var useTabsContext = () => (0,
|
|
13268
|
+
var useTabsContext = () => (0, import_react107.useContext)(TabsContext);
|
|
13292
13269
|
|
|
13293
13270
|
// src/components/Tabs/Tabs.tsx
|
|
13294
|
-
var
|
|
13295
|
-
var Container15 =
|
|
13296
|
-
${({ $width }) => $width &&
|
|
13271
|
+
var import_jsx_runtime262 = require("react/jsx-runtime");
|
|
13272
|
+
var Container15 = import_styled_components90.default.div`
|
|
13273
|
+
${({ $width }) => $width && import_styled_components90.css`
|
|
13297
13274
|
width: ${$width};
|
|
13298
13275
|
`};
|
|
13299
13276
|
`;
|
|
13300
|
-
var Tabs = (0,
|
|
13277
|
+
var Tabs = (0, import_react108.forwardRef)((props, ref) => {
|
|
13301
13278
|
const {
|
|
13302
13279
|
id,
|
|
13303
13280
|
activeTab,
|
|
@@ -13309,17 +13286,17 @@ var Tabs = (0, import_react109.forwardRef)((props, ref) => {
|
|
|
13309
13286
|
htmlProps,
|
|
13310
13287
|
...rest
|
|
13311
13288
|
} = props;
|
|
13312
|
-
const generatedId = (0,
|
|
13289
|
+
const generatedId = (0, import_react108.useId)();
|
|
13313
13290
|
const uniqueId = id != null ? id : `${generatedId}-tabs`;
|
|
13314
|
-
const [thisActiveTab, setActiveTab] = (0,
|
|
13315
|
-
const [hasTabFocus, setHasTabFocus] = (0,
|
|
13316
|
-
const tabListRef = (0,
|
|
13317
|
-
const tabPanelsRef = (0,
|
|
13291
|
+
const [thisActiveTab, setActiveTab] = (0, import_react108.useState)(activeTab != null ? activeTab : 0);
|
|
13292
|
+
const [hasTabFocus, setHasTabFocus] = (0, import_react108.useState)(false);
|
|
13293
|
+
const tabListRef = (0, import_react108.useRef)(null);
|
|
13294
|
+
const tabPanelsRef = (0, import_react108.useRef)(null);
|
|
13318
13295
|
const handleTabChange = (index) => {
|
|
13319
13296
|
setActiveTab(index);
|
|
13320
13297
|
onChange && onChange(index);
|
|
13321
13298
|
};
|
|
13322
|
-
(0,
|
|
13299
|
+
(0, import_react108.useEffect)(() => {
|
|
13323
13300
|
if (activeTab !== void 0 && activeTab !== thisActiveTab) {
|
|
13324
13301
|
setActiveTab(activeTab);
|
|
13325
13302
|
}
|
|
@@ -13328,7 +13305,7 @@ var Tabs = (0, import_react109.forwardRef)((props, ref) => {
|
|
|
13328
13305
|
...getBaseHTMLProps(uniqueId, className, htmlProps, rest),
|
|
13329
13306
|
ref
|
|
13330
13307
|
};
|
|
13331
|
-
return /* @__PURE__ */ (0,
|
|
13308
|
+
return /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(
|
|
13332
13309
|
TabsContext.Provider,
|
|
13333
13310
|
{
|
|
13334
13311
|
value: {
|
|
@@ -13341,19 +13318,19 @@ var Tabs = (0, import_react109.forwardRef)((props, ref) => {
|
|
|
13341
13318
|
setHasTabFocus,
|
|
13342
13319
|
tabContentDirection
|
|
13343
13320
|
},
|
|
13344
|
-
children: /* @__PURE__ */ (0,
|
|
13321
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(Container15, { ...containerProps, $width: width, children })
|
|
13345
13322
|
}
|
|
13346
13323
|
);
|
|
13347
13324
|
});
|
|
13348
13325
|
Tabs.displayName = "Tabs";
|
|
13349
13326
|
|
|
13350
13327
|
// src/components/Tabs/Tab.tsx
|
|
13351
|
-
var
|
|
13352
|
-
var
|
|
13328
|
+
var import_react110 = require("react");
|
|
13329
|
+
var import_styled_components91 = __toESM(require("styled-components"));
|
|
13353
13330
|
|
|
13354
13331
|
// src/components/Tabs/Tabs.tokens.tsx
|
|
13355
|
-
var
|
|
13356
|
-
var { border: border14, spacing: spacing36, colors: colors32 } =
|
|
13332
|
+
var import_dds_design_tokens59 = require("@norges-domstoler/dds-design-tokens");
|
|
13333
|
+
var { border: border14, spacing: spacing36, colors: colors32 } = import_dds_design_tokens59.ddsBaseTokens;
|
|
13357
13334
|
var tabList = {
|
|
13358
13335
|
borderBottom: `${border14.BordersDdsBorderStyleLightStrokeWeight} solid ${border14.BordersDdsBorderStyleLightStroke}`
|
|
13359
13336
|
};
|
|
@@ -13391,14 +13368,14 @@ var tabsTokens = {
|
|
|
13391
13368
|
};
|
|
13392
13369
|
|
|
13393
13370
|
// src/components/Tabs/TabWidthContext.tsx
|
|
13394
|
-
var
|
|
13395
|
-
var
|
|
13396
|
-
var TabContext = (0,
|
|
13371
|
+
var import_react109 = require("react");
|
|
13372
|
+
var import_jsx_runtime263 = require("react/jsx-runtime");
|
|
13373
|
+
var TabContext = (0, import_react109.createContext)(null);
|
|
13397
13374
|
function TabWidthContextProvider({
|
|
13398
13375
|
children,
|
|
13399
13376
|
onChangeWidths
|
|
13400
13377
|
}) {
|
|
13401
|
-
return /* @__PURE__ */ (0,
|
|
13378
|
+
return /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
|
|
13402
13379
|
TabContext.Provider,
|
|
13403
13380
|
{
|
|
13404
13381
|
value: {
|
|
@@ -13422,17 +13399,17 @@ function TabWidthContextProvider({
|
|
|
13422
13399
|
);
|
|
13423
13400
|
}
|
|
13424
13401
|
function useSetTabWidth(index, width) {
|
|
13425
|
-
const context = (0,
|
|
13426
|
-
(0,
|
|
13402
|
+
const context = (0, import_react109.useContext)(TabContext);
|
|
13403
|
+
(0, import_react109.useLayoutEffect)(() => {
|
|
13427
13404
|
context == null ? void 0 : context.updateWidth(index, width);
|
|
13428
13405
|
return () => context == null ? void 0 : context.removeTab(index);
|
|
13429
13406
|
}, [index, width]);
|
|
13430
13407
|
}
|
|
13431
13408
|
|
|
13432
13409
|
// src/components/Tabs/Tab.tsx
|
|
13433
|
-
var
|
|
13410
|
+
var import_jsx_runtime264 = require("react/jsx-runtime");
|
|
13434
13411
|
var { tab: tab2 } = tabsTokens;
|
|
13435
|
-
var Button2 =
|
|
13412
|
+
var Button2 = import_styled_components91.default.button`
|
|
13436
13413
|
${normalizeButton}
|
|
13437
13414
|
${removeButtonStyling}
|
|
13438
13415
|
user-select: text;
|
|
@@ -13452,12 +13429,12 @@ var Button2 = import_styled_components92.default.button`
|
|
|
13452
13429
|
${focusVisibleTransitionValue};
|
|
13453
13430
|
}
|
|
13454
13431
|
|
|
13455
|
-
${({ $direction }) =>
|
|
13432
|
+
${({ $direction }) => import_styled_components91.css`
|
|
13456
13433
|
flex-direction: ${$direction};
|
|
13457
13434
|
gap: ${tab2[$direction].gap};
|
|
13458
13435
|
`};
|
|
13459
13436
|
|
|
13460
|
-
${({ $active }) => $active &&
|
|
13437
|
+
${({ $active }) => $active && import_styled_components91.css`
|
|
13461
13438
|
background-color: ${tab2.active.backgroundColor};
|
|
13462
13439
|
border-color: ${tab2.active.borderColor};
|
|
13463
13440
|
color: ${tab2.active.color};
|
|
@@ -13475,7 +13452,7 @@ var Button2 = import_styled_components92.default.button`
|
|
|
13475
13452
|
box-shadow: ${tab2.hover.boxShadow};
|
|
13476
13453
|
}
|
|
13477
13454
|
`;
|
|
13478
|
-
var Tab = (0,
|
|
13455
|
+
var Tab = (0, import_react110.forwardRef)((props, ref) => {
|
|
13479
13456
|
const {
|
|
13480
13457
|
active = false,
|
|
13481
13458
|
icon: icon12,
|
|
@@ -13492,10 +13469,10 @@ var Tab = (0, import_react111.forwardRef)((props, ref) => {
|
|
|
13492
13469
|
...rest
|
|
13493
13470
|
} = props;
|
|
13494
13471
|
useSetTabWidth(index, width);
|
|
13495
|
-
const itemRef = (0,
|
|
13472
|
+
const itemRef = (0, import_react110.useRef)(null);
|
|
13496
13473
|
const combinedRef = useCombinedRef(ref, itemRef);
|
|
13497
13474
|
const { tabPanelsRef, setHasTabFocus, tabContentDirection } = useTabsContext();
|
|
13498
|
-
(0,
|
|
13475
|
+
(0, import_react110.useEffect)(() => {
|
|
13499
13476
|
var _a;
|
|
13500
13477
|
if (focus) {
|
|
13501
13478
|
(_a = itemRef.current) == null ? void 0 : _a.focus();
|
|
@@ -13507,7 +13484,7 @@ var Tab = (0, import_react111.forwardRef)((props, ref) => {
|
|
|
13507
13484
|
setHasTabFocus(false);
|
|
13508
13485
|
(_a = tabPanelsRef == null ? void 0 : tabPanelsRef.current) == null ? void 0 : _a.focus();
|
|
13509
13486
|
});
|
|
13510
|
-
const handleSelect = (0,
|
|
13487
|
+
const handleSelect = (0, import_react110.useCallback)(() => {
|
|
13511
13488
|
if (setFocus && index) {
|
|
13512
13489
|
setFocus(index);
|
|
13513
13490
|
}
|
|
@@ -13520,7 +13497,7 @@ var Tab = (0, import_react111.forwardRef)((props, ref) => {
|
|
|
13520
13497
|
handleSelect();
|
|
13521
13498
|
onKeyDown && onKeyDown(e);
|
|
13522
13499
|
};
|
|
13523
|
-
return /* @__PURE__ */ (0,
|
|
13500
|
+
return /* @__PURE__ */ (0, import_jsx_runtime264.jsxs)(
|
|
13524
13501
|
Button2,
|
|
13525
13502
|
{
|
|
13526
13503
|
...getBaseHTMLProps(id, className, htmlProps, rest),
|
|
@@ -13533,8 +13510,8 @@ var Tab = (0, import_react111.forwardRef)((props, ref) => {
|
|
|
13533
13510
|
onKeyDown: handleOnKeyDown,
|
|
13534
13511
|
tabIndex: focus ? 0 : -1,
|
|
13535
13512
|
children: [
|
|
13536
|
-
icon12 && /* @__PURE__ */ (0,
|
|
13537
|
-
/* @__PURE__ */ (0,
|
|
13513
|
+
icon12 && /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(Icon, { icon: icon12, iconSize: "inherit" }),
|
|
13514
|
+
/* @__PURE__ */ (0, import_jsx_runtime264.jsx)("span", { children })
|
|
13538
13515
|
]
|
|
13539
13516
|
}
|
|
13540
13517
|
);
|
|
@@ -13542,18 +13519,18 @@ var Tab = (0, import_react111.forwardRef)((props, ref) => {
|
|
|
13542
13519
|
Tab.displayName = "Tab";
|
|
13543
13520
|
|
|
13544
13521
|
// src/components/Tabs/TabList.tsx
|
|
13545
|
-
var
|
|
13546
|
-
var
|
|
13547
|
-
var
|
|
13522
|
+
var import_react111 = require("react");
|
|
13523
|
+
var import_styled_components92 = __toESM(require("styled-components"));
|
|
13524
|
+
var import_jsx_runtime265 = require("react/jsx-runtime");
|
|
13548
13525
|
var { tabList: tabList2 } = tabsTokens;
|
|
13549
|
-
var autoFlow =
|
|
13526
|
+
var autoFlow = import_styled_components92.css`
|
|
13550
13527
|
grid-auto-flow: column;
|
|
13551
13528
|
grid-auto-columns: 1fr;
|
|
13552
13529
|
`;
|
|
13553
|
-
var templateColumns = (templateColumns2) =>
|
|
13530
|
+
var templateColumns = (templateColumns2) => import_styled_components92.css`
|
|
13554
13531
|
grid-template-columns: ${templateColumns2};
|
|
13555
13532
|
`;
|
|
13556
|
-
var TabRow =
|
|
13533
|
+
var TabRow = import_styled_components92.default.div`
|
|
13557
13534
|
border-bottom: ${tabList2.borderBottom};
|
|
13558
13535
|
display: grid;
|
|
13559
13536
|
${({ $gridTemplateColumns }) => $gridTemplateColumns === "" ? autoFlow : templateColumns($gridTemplateColumns)}
|
|
@@ -13572,7 +13549,7 @@ var TabRow = import_styled_components93.default.div`
|
|
|
13572
13549
|
outline: none;
|
|
13573
13550
|
}
|
|
13574
13551
|
`;
|
|
13575
|
-
var TabList = (0,
|
|
13552
|
+
var TabList = (0, import_react111.forwardRef)(
|
|
13576
13553
|
({ children, id, onFocus, ...rest }, ref) => {
|
|
13577
13554
|
const {
|
|
13578
13555
|
activeTab,
|
|
@@ -13584,11 +13561,11 @@ var TabList = (0, import_react112.forwardRef)(
|
|
|
13584
13561
|
setHasTabFocus
|
|
13585
13562
|
} = useTabsContext();
|
|
13586
13563
|
const uniqueId = id != null ? id : `${tabsId}-tablist`;
|
|
13587
|
-
const childrenArray =
|
|
13564
|
+
const childrenArray = import_react111.Children.toArray(children).length;
|
|
13588
13565
|
const [focus, setFocus] = useRoveFocus(childrenArray, !hasTabFocus, "row");
|
|
13589
13566
|
const combinedRef = useCombinedRef(ref, tabListRef);
|
|
13590
|
-
const tabListChildren =
|
|
13591
|
-
return (0,
|
|
13567
|
+
const tabListChildren = import_react111.Children.map(children, (child, index) => {
|
|
13568
|
+
return (0, import_react111.isValidElement)(child) && (0, import_react111.cloneElement)(child, {
|
|
13592
13569
|
id: `${tabsId}-tab-${index}`,
|
|
13593
13570
|
"aria-controls": `${tabsId}-panel-${index}`,
|
|
13594
13571
|
active: activeTab === index,
|
|
@@ -13598,7 +13575,7 @@ var TabList = (0, import_react112.forwardRef)(
|
|
|
13598
13575
|
onClick: () => handleTabChange(index)
|
|
13599
13576
|
});
|
|
13600
13577
|
});
|
|
13601
|
-
const [widths, setWidths] = (0,
|
|
13578
|
+
const [widths, setWidths] = (0, import_react111.useState)([]);
|
|
13602
13579
|
useOnKeyDown("Tab", () => {
|
|
13603
13580
|
var _a;
|
|
13604
13581
|
setHasTabFocus(false);
|
|
@@ -13620,32 +13597,32 @@ var TabList = (0, import_react112.forwardRef)(
|
|
|
13620
13597
|
tabIndex: 0,
|
|
13621
13598
|
onFocus: handleOnFocus
|
|
13622
13599
|
};
|
|
13623
|
-
return /* @__PURE__ */ (0,
|
|
13600
|
+
return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(TabRow, { ...tabListProps, $gridTemplateColumns: widths.join(" "), children: tabListChildren }) });
|
|
13624
13601
|
}
|
|
13625
13602
|
);
|
|
13626
13603
|
TabList.displayName = "TabList";
|
|
13627
13604
|
|
|
13628
13605
|
// src/components/Tabs/TabPanel.tsx
|
|
13629
|
-
var
|
|
13630
|
-
var
|
|
13631
|
-
var
|
|
13606
|
+
var import_react112 = require("react");
|
|
13607
|
+
var import_styled_components93 = __toESM(require("styled-components"));
|
|
13608
|
+
var import_jsx_runtime266 = require("react/jsx-runtime");
|
|
13632
13609
|
var { panel: panel2 } = tabsTokens;
|
|
13633
|
-
var Panel =
|
|
13610
|
+
var Panel = import_styled_components93.default.div`
|
|
13634
13611
|
padding: ${panel2.padding};
|
|
13635
13612
|
@media (prefers-reduced-motion: no-preference) {
|
|
13636
13613
|
transition: ${focusVisibleTransitionValue};
|
|
13637
13614
|
}
|
|
13638
13615
|
|
|
13639
|
-
${({ $active }) => !$active &&
|
|
13616
|
+
${({ $active }) => !$active && import_styled_components93.css`
|
|
13640
13617
|
display: none;
|
|
13641
13618
|
`}
|
|
13642
13619
|
&:focus-visible {
|
|
13643
13620
|
${focusVisible}
|
|
13644
13621
|
}
|
|
13645
13622
|
`;
|
|
13646
|
-
var TabPanel = (0,
|
|
13623
|
+
var TabPanel = (0, import_react112.forwardRef)(
|
|
13647
13624
|
({ active = false, children, id, className, htmlProps, ...rest }, ref) => {
|
|
13648
|
-
return /* @__PURE__ */ (0,
|
|
13625
|
+
return /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(
|
|
13649
13626
|
Panel,
|
|
13650
13627
|
{
|
|
13651
13628
|
...getBaseHTMLProps(id, className, htmlProps, rest),
|
|
@@ -13661,33 +13638,33 @@ var TabPanel = (0, import_react113.forwardRef)(
|
|
|
13661
13638
|
TabPanel.displayName = "TabPanel";
|
|
13662
13639
|
|
|
13663
13640
|
// src/components/Tabs/TabPanels.tsx
|
|
13664
|
-
var
|
|
13665
|
-
var
|
|
13666
|
-
var TabPanels = (0,
|
|
13641
|
+
var import_react113 = require("react");
|
|
13642
|
+
var import_jsx_runtime267 = require("react/jsx-runtime");
|
|
13643
|
+
var TabPanels = (0, import_react113.forwardRef)(
|
|
13667
13644
|
({ children, ...rest }, ref) => {
|
|
13668
13645
|
const { activeTab, tabsId, tabPanelsRef } = useTabsContext();
|
|
13669
13646
|
const combinedRef = useCombinedRef(ref, tabPanelsRef);
|
|
13670
|
-
const panelChildren =
|
|
13647
|
+
const panelChildren = import_react113.Children.map(children, (child, index) => {
|
|
13671
13648
|
const active = index === activeTab;
|
|
13672
|
-
return (0,
|
|
13649
|
+
return (0, import_react113.isValidElement)(child) && (0, import_react113.cloneElement)(child, {
|
|
13673
13650
|
id: `${tabsId}-panel-${index}`,
|
|
13674
13651
|
"aria-labelledby": `${tabsId}-tab-${index}`,
|
|
13675
13652
|
active,
|
|
13676
13653
|
"aria-expanded": active
|
|
13677
13654
|
});
|
|
13678
13655
|
});
|
|
13679
|
-
return /* @__PURE__ */ (0,
|
|
13656
|
+
return /* @__PURE__ */ (0, import_jsx_runtime267.jsx)("div", { ref: combinedRef, ...rest, children: panelChildren });
|
|
13680
13657
|
}
|
|
13681
13658
|
);
|
|
13682
13659
|
TabPanels.displayName = "TabPanels";
|
|
13683
13660
|
|
|
13684
13661
|
// src/components/Tag/Tag.tsx
|
|
13685
|
-
var
|
|
13686
|
-
var
|
|
13662
|
+
var import_react114 = require("react");
|
|
13663
|
+
var import_styled_components94 = __toESM(require("styled-components"));
|
|
13687
13664
|
|
|
13688
13665
|
// src/components/Tag/Tag.tokens.tsx
|
|
13689
|
-
var
|
|
13690
|
-
var { colors: colors33, borderRadius: borderRadius10, spacing: spacing37 } =
|
|
13666
|
+
var import_dds_design_tokens60 = require("@norges-domstoler/dds-design-tokens");
|
|
13667
|
+
var { colors: colors33, borderRadius: borderRadius10, spacing: spacing37 } = import_dds_design_tokens60.ddsBaseTokens;
|
|
13691
13668
|
var typographyType5 = "bodySans01";
|
|
13692
13669
|
var wrapper7 = {
|
|
13693
13670
|
border: "1px solid",
|
|
@@ -13744,9 +13721,9 @@ var tagTokens = {
|
|
|
13744
13721
|
};
|
|
13745
13722
|
|
|
13746
13723
|
// src/components/Tag/Tag.tsx
|
|
13747
|
-
var
|
|
13724
|
+
var import_jsx_runtime268 = require("react/jsx-runtime");
|
|
13748
13725
|
var { wrapper: wrapper8 } = tagTokens;
|
|
13749
|
-
var Wrapper7 = (0,
|
|
13726
|
+
var Wrapper7 = (0, import_styled_components94.default)(TextOverflowEllipsisWrapper)`
|
|
13750
13727
|
display: inline-flex;
|
|
13751
13728
|
align-items: center;
|
|
13752
13729
|
gap: ${tagTokens.wrapper.icon.gap};
|
|
@@ -13754,18 +13731,18 @@ var Wrapper7 = (0, import_styled_components95.default)(TextOverflowEllipsisWrapp
|
|
|
13754
13731
|
border-radius: ${wrapper8.borderRadius};
|
|
13755
13732
|
padding: ${({ $withIcon }) => $withIcon ? wrapper8.icon.padding : wrapper8.padding};
|
|
13756
13733
|
${getFontStyling(typographyType5)}
|
|
13757
|
-
${({ $purpose }) =>
|
|
13734
|
+
${({ $purpose }) => import_styled_components94.css`
|
|
13758
13735
|
background-color: ${wrapper8.purpose[$purpose].backgroundColor};
|
|
13759
13736
|
border-color: ${wrapper8.purpose[$purpose].borderColor};
|
|
13760
13737
|
`}
|
|
13761
13738
|
`;
|
|
13762
|
-
var StyledIcon5 = (0,
|
|
13739
|
+
var StyledIcon5 = (0, import_styled_components94.default)(Icon)`
|
|
13763
13740
|
color: ${({ $purpose }) => {
|
|
13764
13741
|
var _a;
|
|
13765
13742
|
return (_a = wrapper8.purpose[$purpose].icon) == null ? void 0 : _a.color;
|
|
13766
13743
|
}};
|
|
13767
13744
|
`;
|
|
13768
|
-
var Tag = (0,
|
|
13745
|
+
var Tag = (0, import_react114.forwardRef)((props, ref) => {
|
|
13769
13746
|
const {
|
|
13770
13747
|
text,
|
|
13771
13748
|
purpose = "default",
|
|
@@ -13777,7 +13754,7 @@ var Tag = (0, import_react115.forwardRef)((props, ref) => {
|
|
|
13777
13754
|
...rest
|
|
13778
13755
|
} = props;
|
|
13779
13756
|
const icon12 = tagTokens.wrapper.purpose[purpose].icon;
|
|
13780
|
-
return /* @__PURE__ */ (0,
|
|
13757
|
+
return /* @__PURE__ */ (0, import_jsx_runtime268.jsxs)(
|
|
13781
13758
|
Wrapper7,
|
|
13782
13759
|
{
|
|
13783
13760
|
...getBaseHTMLProps(id, className, htmlProps, rest),
|
|
@@ -13785,7 +13762,7 @@ var Tag = (0, import_react115.forwardRef)((props, ref) => {
|
|
|
13785
13762
|
$purpose: purpose,
|
|
13786
13763
|
$withIcon: Boolean(withIcon && icon12),
|
|
13787
13764
|
children: [
|
|
13788
|
-
withIcon && icon12 && /* @__PURE__ */ (0,
|
|
13765
|
+
withIcon && icon12 && /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
|
|
13789
13766
|
StyledIcon5,
|
|
13790
13767
|
{
|
|
13791
13768
|
$purpose: purpose,
|
|
@@ -13793,7 +13770,7 @@ var Tag = (0, import_react115.forwardRef)((props, ref) => {
|
|
|
13793
13770
|
iconSize: tagTokens.wrapper.icon.size
|
|
13794
13771
|
}
|
|
13795
13772
|
),
|
|
13796
|
-
/* @__PURE__ */ (0,
|
|
13773
|
+
/* @__PURE__ */ (0, import_jsx_runtime268.jsx)(TextOverflowEllipsisInner, { children: children != null ? children : text })
|
|
13797
13774
|
]
|
|
13798
13775
|
}
|
|
13799
13776
|
);
|
|
@@ -13801,21 +13778,21 @@ var Tag = (0, import_react115.forwardRef)((props, ref) => {
|
|
|
13801
13778
|
Tag.displayName = "Tag";
|
|
13802
13779
|
|
|
13803
13780
|
// src/components/TextInput/TextInput.tsx
|
|
13804
|
-
var
|
|
13805
|
-
var
|
|
13781
|
+
var import_react116 = require("react");
|
|
13782
|
+
var import_styled_components97 = __toESM(require("styled-components"));
|
|
13806
13783
|
|
|
13807
13784
|
// src/components/TextInput/CharCounter.tsx
|
|
13808
|
-
var
|
|
13809
|
-
var
|
|
13810
|
-
var
|
|
13811
|
-
var Wrapper8 = (0,
|
|
13785
|
+
var import_react115 = require("react");
|
|
13786
|
+
var import_styled_components95 = __toESM(require("styled-components"));
|
|
13787
|
+
var import_jsx_runtime269 = require("react/jsx-runtime");
|
|
13788
|
+
var Wrapper8 = (0, import_styled_components95.default)(Typography)`
|
|
13812
13789
|
margin-left: auto;
|
|
13813
13790
|
`;
|
|
13814
13791
|
function CharCounter(props) {
|
|
13815
13792
|
const { current, max, id, className, htmlProps, ...rest } = props;
|
|
13816
|
-
const generatedId = (0,
|
|
13793
|
+
const generatedId = (0, import_react115.useId)();
|
|
13817
13794
|
const uniqueId = id != null ? id : `${generatedId}-characterCounter`;
|
|
13818
|
-
return /* @__PURE__ */ (0,
|
|
13795
|
+
return /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(
|
|
13819
13796
|
Wrapper8,
|
|
13820
13797
|
{
|
|
13821
13798
|
...getBaseHTMLProps(uniqueId, className, htmlProps, rest),
|
|
@@ -13833,12 +13810,12 @@ function CharCounter(props) {
|
|
|
13833
13810
|
var CharCounter_default = CharCounter;
|
|
13834
13811
|
|
|
13835
13812
|
// src/components/TextInput/TextInput.styles.tsx
|
|
13836
|
-
var
|
|
13837
|
-
var
|
|
13813
|
+
var import_dds_design_tokens62 = require("@norges-domstoler/dds-design-tokens");
|
|
13814
|
+
var import_styled_components96 = __toESM(require("styled-components"));
|
|
13838
13815
|
|
|
13839
13816
|
// src/components/TextInput/TextInput.tokens.tsx
|
|
13840
|
-
var
|
|
13841
|
-
var { colors: colors34, spacing: spacing38, iconSizes: iconSizes4 } =
|
|
13817
|
+
var import_dds_design_tokens61 = require("@norges-domstoler/dds-design-tokens");
|
|
13818
|
+
var { colors: colors34, spacing: spacing38, iconSizes: iconSizes4 } = import_dds_design_tokens61.ddsBaseTokens;
|
|
13842
13819
|
var input5 = {
|
|
13843
13820
|
withIcon: {
|
|
13844
13821
|
medium: {
|
|
@@ -13881,33 +13858,33 @@ var textInputTokens = {
|
|
|
13881
13858
|
};
|
|
13882
13859
|
|
|
13883
13860
|
// src/components/TextInput/TextInput.styles.tsx
|
|
13884
|
-
var { iconSizes: iconSizes5 } =
|
|
13861
|
+
var { iconSizes: iconSizes5 } = import_dds_design_tokens62.ddsBaseTokens;
|
|
13885
13862
|
var { input: input6, icon: icon11 } = textInputTokens;
|
|
13886
|
-
var MessageContainer2 =
|
|
13863
|
+
var MessageContainer2 = import_styled_components96.default.div`
|
|
13887
13864
|
display: flex;
|
|
13888
13865
|
justify-content: space-between;
|
|
13889
13866
|
`;
|
|
13890
|
-
var StyledIcon6 = (0,
|
|
13867
|
+
var StyledIcon6 = (0, import_styled_components96.default)(Icon)`
|
|
13891
13868
|
position: absolute;
|
|
13892
13869
|
color: ${icon11.color};
|
|
13893
|
-
${({ $size, iconSize }) =>
|
|
13870
|
+
${({ $size, iconSize }) => import_styled_components96.css`
|
|
13894
13871
|
left: ${icon11.sizes[$size].left};
|
|
13895
|
-
${iconSize === "small" ?
|
|
13872
|
+
${iconSize === "small" ? import_styled_components96.css`
|
|
13896
13873
|
top: ${`calc(50% - ${iconSizes5.DdsIconsizeSmallNumberPx / 2}px)`};
|
|
13897
|
-
` :
|
|
13874
|
+
` : import_styled_components96.css`
|
|
13898
13875
|
top: ${`calc(50% - ${iconSizes5.DdsIconsizeMediumNumberPx / 2}px)`};
|
|
13899
13876
|
`}
|
|
13900
13877
|
`}
|
|
13901
13878
|
z-index: 1;
|
|
13902
13879
|
`;
|
|
13903
|
-
var StyledInput = (0,
|
|
13904
|
-
${({ componentSize, $hasIcon }) => $hasIcon && componentSize &&
|
|
13880
|
+
var StyledInput = (0, import_styled_components96.default)(StatefulInput)`
|
|
13881
|
+
${({ componentSize, $hasIcon }) => $hasIcon && componentSize && import_styled_components96.css`
|
|
13905
13882
|
padding-left: ${input6.withIcon[componentSize].paddingLeft};
|
|
13906
13883
|
`}
|
|
13907
13884
|
`;
|
|
13908
13885
|
|
|
13909
13886
|
// src/components/TextInput/TextInput.tsx
|
|
13910
|
-
var
|
|
13887
|
+
var import_jsx_runtime270 = require("react/jsx-runtime");
|
|
13911
13888
|
var defaultWidth6 = "320px";
|
|
13912
13889
|
var defaultTinyWidth = "210px";
|
|
13913
13890
|
var getWidth = (size2, width) => {
|
|
@@ -13918,7 +13895,7 @@ var getWidth = (size2, width) => {
|
|
|
13918
13895
|
}
|
|
13919
13896
|
return defaultWidth6;
|
|
13920
13897
|
};
|
|
13921
|
-
var Affix =
|
|
13898
|
+
var Affix = import_styled_components97.default.span`
|
|
13922
13899
|
position: absolute;
|
|
13923
13900
|
height: 100%;
|
|
13924
13901
|
top: 50%;
|
|
@@ -13928,31 +13905,31 @@ var Affix = import_styled_components98.default.span`
|
|
|
13928
13905
|
pointer-events: none;
|
|
13929
13906
|
z-index: 1;
|
|
13930
13907
|
`;
|
|
13931
|
-
var Prefix = (0,
|
|
13908
|
+
var Prefix = (0, import_styled_components97.default)(Affix)`
|
|
13932
13909
|
left: 0;
|
|
13933
13910
|
margin-left: 8px;
|
|
13934
13911
|
padding-right: 8px;
|
|
13935
13912
|
border-right: 1px solid ${textInputTokens.affix.border.color};
|
|
13936
13913
|
|
|
13937
|
-
${({ readOnly }) => readOnly &&
|
|
13914
|
+
${({ readOnly }) => readOnly && import_styled_components97.css`
|
|
13938
13915
|
margin-left: 0;
|
|
13939
13916
|
padding-right: 0.5ch;
|
|
13940
13917
|
border-right: none;
|
|
13941
13918
|
`};
|
|
13942
13919
|
`;
|
|
13943
|
-
var Suffix = (0,
|
|
13920
|
+
var Suffix = (0, import_styled_components97.default)(Affix)`
|
|
13944
13921
|
right: 0;
|
|
13945
13922
|
margin-right: 8px;
|
|
13946
13923
|
padding-left: 8px;
|
|
13947
13924
|
border-left: 1px solid ${textInputTokens.affix.border.color};
|
|
13948
13925
|
|
|
13949
|
-
${({ readOnly }) => readOnly &&
|
|
13926
|
+
${({ readOnly }) => readOnly && import_styled_components97.css`
|
|
13950
13927
|
margin-right: 0;
|
|
13951
13928
|
padding-left: 0.5ch;
|
|
13952
13929
|
border-left: none;
|
|
13953
13930
|
`};
|
|
13954
13931
|
`;
|
|
13955
|
-
var TextInput2 = (0,
|
|
13932
|
+
var TextInput2 = (0, import_react116.forwardRef)(
|
|
13956
13933
|
({
|
|
13957
13934
|
label: label3,
|
|
13958
13935
|
disabled,
|
|
@@ -13978,14 +13955,14 @@ var TextInput2 = (0, import_react117.forwardRef)(
|
|
|
13978
13955
|
suffix,
|
|
13979
13956
|
...rest
|
|
13980
13957
|
}, ref) => {
|
|
13981
|
-
const [text, setText] = (0,
|
|
13958
|
+
const [text, setText] = (0, import_react116.useState)(
|
|
13982
13959
|
getDefaultText(value, defaultValue)
|
|
13983
13960
|
);
|
|
13984
|
-
const prefixRef = (0,
|
|
13985
|
-
const suffixRef = (0,
|
|
13986
|
-
const [prefixLength, setPrefixLength] = (0,
|
|
13987
|
-
const [suffixLength, setSuffixLength] = (0,
|
|
13988
|
-
(0,
|
|
13961
|
+
const prefixRef = (0, import_react116.useRef)(null);
|
|
13962
|
+
const suffixRef = (0, import_react116.useRef)(null);
|
|
13963
|
+
const [prefixLength, setPrefixLength] = (0, import_react116.useState)(0);
|
|
13964
|
+
const [suffixLength, setSuffixLength] = (0, import_react116.useState)(0);
|
|
13965
|
+
(0, import_react116.useLayoutEffect)(() => {
|
|
13989
13966
|
if (prefixRef.current) {
|
|
13990
13967
|
setPrefixLength(prefixRef.current.offsetWidth);
|
|
13991
13968
|
}
|
|
@@ -13999,7 +13976,7 @@ var TextInput2 = (0, import_react117.forwardRef)(
|
|
|
13999
13976
|
onChange(event);
|
|
14000
13977
|
}
|
|
14001
13978
|
};
|
|
14002
|
-
const generatedId = (0,
|
|
13979
|
+
const generatedId = (0, import_react116.useId)();
|
|
14003
13980
|
const uniqueId = id != null ? id : `${generatedId}-textInput`;
|
|
14004
13981
|
const hasErrorMessage = !!errorMessage;
|
|
14005
13982
|
const hasTip = !!tip;
|
|
@@ -14041,8 +14018,8 @@ var TextInput2 = (0, import_react117.forwardRef)(
|
|
|
14041
14018
|
const showRequiredStyling = !!(required || ariaRequired);
|
|
14042
14019
|
let extendedInput = null;
|
|
14043
14020
|
if (hasIcon) {
|
|
14044
|
-
extendedInput = /* @__PURE__ */ (0,
|
|
14045
|
-
/* @__PURE__ */ (0,
|
|
14021
|
+
extendedInput = /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(InputContainer, { children: [
|
|
14022
|
+
/* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
|
|
14046
14023
|
StyledIcon6,
|
|
14047
14024
|
{
|
|
14048
14025
|
icon: icon12,
|
|
@@ -14050,7 +14027,7 @@ var TextInput2 = (0, import_react117.forwardRef)(
|
|
|
14050
14027
|
$size: componentSize
|
|
14051
14028
|
}
|
|
14052
14029
|
),
|
|
14053
|
-
/* @__PURE__ */ (0,
|
|
14030
|
+
/* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
|
|
14054
14031
|
StyledInput,
|
|
14055
14032
|
{
|
|
14056
14033
|
ref,
|
|
@@ -14063,9 +14040,9 @@ var TextInput2 = (0, import_react117.forwardRef)(
|
|
|
14063
14040
|
)
|
|
14064
14041
|
] });
|
|
14065
14042
|
} else if (hasAffix) {
|
|
14066
|
-
extendedInput = /* @__PURE__ */ (0,
|
|
14067
|
-
prefix2 && /* @__PURE__ */ (0,
|
|
14068
|
-
/* @__PURE__ */ (0,
|
|
14043
|
+
extendedInput = /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(InputAffixContainer, { children: [
|
|
14044
|
+
prefix2 && /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(Prefix, { readOnly, ref: prefixRef, "aria-hidden": true, children: prefix2 }),
|
|
14045
|
+
/* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
|
|
14069
14046
|
StatefulInput,
|
|
14070
14047
|
{
|
|
14071
14048
|
ref,
|
|
@@ -14077,12 +14054,12 @@ var TextInput2 = (0, import_react117.forwardRef)(
|
|
|
14077
14054
|
...generalInputProps
|
|
14078
14055
|
}
|
|
14079
14056
|
),
|
|
14080
|
-
suffix && /* @__PURE__ */ (0,
|
|
14057
|
+
suffix && /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(Suffix, { readOnly, ref: suffixRef, "aria-hidden": true, children: suffix })
|
|
14081
14058
|
] });
|
|
14082
14059
|
}
|
|
14083
|
-
return /* @__PURE__ */ (0,
|
|
14084
|
-
hasLabel && /* @__PURE__ */ (0,
|
|
14085
|
-
extendedInput ? extendedInput : /* @__PURE__ */ (0,
|
|
14060
|
+
return /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(OuterInputContainer, { ...outerInputContainerProps, children: [
|
|
14061
|
+
hasLabel && /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(Label, { htmlFor: uniqueId, showRequiredStyling, children: label3 }),
|
|
14062
|
+
extendedInput ? extendedInput : /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
|
|
14086
14063
|
StatefulInput,
|
|
14087
14064
|
{
|
|
14088
14065
|
ref,
|
|
@@ -14092,9 +14069,9 @@ var TextInput2 = (0, import_react117.forwardRef)(
|
|
|
14092
14069
|
...generalInputProps
|
|
14093
14070
|
}
|
|
14094
14071
|
),
|
|
14095
|
-
hasMessage && /* @__PURE__ */ (0,
|
|
14072
|
+
hasMessage && /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(MessageContainer2, { children: [
|
|
14096
14073
|
renderInputMessage(tip, tipId, errorMessage, errorMessageId),
|
|
14097
|
-
maxLength && Number.isInteger(maxLength) && maxLength > 0 && withCharacterCounter && /* @__PURE__ */ (0,
|
|
14074
|
+
maxLength && Number.isInteger(maxLength) && maxLength > 0 && withCharacterCounter && /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
|
|
14098
14075
|
CharCounter_default,
|
|
14099
14076
|
{
|
|
14100
14077
|
id: characterCounterId,
|
|
@@ -14109,20 +14086,20 @@ var TextInput2 = (0, import_react117.forwardRef)(
|
|
|
14109
14086
|
TextInput2.displayName = "TextInput";
|
|
14110
14087
|
|
|
14111
14088
|
// src/components/ToggleBar/ToggleBar.tsx
|
|
14112
|
-
var
|
|
14113
|
-
var
|
|
14089
|
+
var import_react118 = require("react");
|
|
14090
|
+
var import_styled_components98 = __toESM(require("styled-components"));
|
|
14114
14091
|
|
|
14115
14092
|
// src/components/ToggleBar/ToggleBar.context.tsx
|
|
14116
|
-
var
|
|
14117
|
-
var ToggleBarContext = (0,
|
|
14093
|
+
var import_react117 = require("react");
|
|
14094
|
+
var ToggleBarContext = (0, import_react117.createContext)({
|
|
14118
14095
|
size: "medium"
|
|
14119
14096
|
});
|
|
14120
|
-
var useToggleBarContext = () => (0,
|
|
14097
|
+
var useToggleBarContext = () => (0, import_react117.useContext)(ToggleBarContext);
|
|
14121
14098
|
|
|
14122
14099
|
// src/components/ToggleBar/ToggleBar.tokens.tsx
|
|
14123
|
-
var
|
|
14124
|
-
var { colors: colors35, spacing: spacing39, border: border15, borderRadius: borderRadius11, fontPackages: fontPackages6 } =
|
|
14125
|
-
var
|
|
14100
|
+
var import_dds_design_tokens63 = require("@norges-domstoler/dds-design-tokens");
|
|
14101
|
+
var { colors: colors35, spacing: spacing39, border: border15, borderRadius: borderRadius11, fontPackages: fontPackages6 } = import_dds_design_tokens63.ddsBaseTokens;
|
|
14102
|
+
var typographyTypes6 = {
|
|
14126
14103
|
large: "bodySans04",
|
|
14127
14104
|
medium: "bodySans02",
|
|
14128
14105
|
small: "bodySans01",
|
|
@@ -14144,7 +14121,7 @@ var iconSizeLarge = `${calculateHeightWithLineHeight(
|
|
|
14144
14121
|
fontPackages6.body_sans_04.numbers.lineHeightNumber,
|
|
14145
14122
|
fontPackages6.body_sans_04.numbers.fontSizeNumber
|
|
14146
14123
|
)}px`;
|
|
14147
|
-
var
|
|
14124
|
+
var outerContainer7 = {
|
|
14148
14125
|
gap: spacing39.SizesDdsSpacingX0125
|
|
14149
14126
|
};
|
|
14150
14127
|
var label = {
|
|
@@ -14220,14 +14197,14 @@ var content5 = {
|
|
|
14220
14197
|
}
|
|
14221
14198
|
};
|
|
14222
14199
|
var toggleBarTokens = {
|
|
14223
|
-
outerContainer:
|
|
14200
|
+
outerContainer: outerContainer7,
|
|
14224
14201
|
content: content5,
|
|
14225
14202
|
label
|
|
14226
14203
|
};
|
|
14227
14204
|
|
|
14228
14205
|
// src/components/ToggleBar/ToggleBar.tsx
|
|
14229
|
-
var
|
|
14230
|
-
var
|
|
14206
|
+
var import_jsx_runtime271 = require("react/jsx-runtime");
|
|
14207
|
+
var OuterContainer3 = import_styled_components98.default.div`
|
|
14231
14208
|
display: flex;
|
|
14232
14209
|
flex-direction: column;
|
|
14233
14210
|
gap: ${toggleBarTokens.outerContainer.gap};
|
|
@@ -14235,11 +14212,11 @@ var OuterContainer4 = import_styled_components99.default.div`
|
|
|
14235
14212
|
*::selection {
|
|
14236
14213
|
${selection}
|
|
14237
14214
|
}
|
|
14238
|
-
${({ $width }) => $width &&
|
|
14215
|
+
${({ $width }) => $width && import_styled_components98.css`
|
|
14239
14216
|
width: ${$width};
|
|
14240
14217
|
`}
|
|
14241
14218
|
`;
|
|
14242
|
-
var
|
|
14219
|
+
var Bar3 = import_styled_components98.default.div`
|
|
14243
14220
|
display: grid;
|
|
14244
14221
|
grid-auto-flow: column;
|
|
14245
14222
|
grid-auto-columns: 1fr;
|
|
@@ -14258,15 +14235,15 @@ var ToggleBar = (props) => {
|
|
|
14258
14235
|
id,
|
|
14259
14236
|
...rest
|
|
14260
14237
|
} = props;
|
|
14261
|
-
const generatedId = (0,
|
|
14238
|
+
const generatedId = (0, import_react118.useId)();
|
|
14262
14239
|
const uniqueId = id != null ? id : `${generatedId}-ToggleBar`;
|
|
14263
|
-
const [groupValue, setGroupValue] = (0,
|
|
14240
|
+
const [groupValue, setGroupValue] = (0, import_react118.useState)(value);
|
|
14264
14241
|
const handleChange = combineHandlers(
|
|
14265
14242
|
(e) => setGroupValue(e.target.value),
|
|
14266
14243
|
(e) => onChange && onChange(e, e.target.value)
|
|
14267
14244
|
);
|
|
14268
14245
|
const labelId = label3 && `${uniqueId}-label`;
|
|
14269
|
-
return /* @__PURE__ */ (0,
|
|
14246
|
+
return /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(
|
|
14270
14247
|
ToggleBarContext.Provider,
|
|
14271
14248
|
{
|
|
14272
14249
|
value: {
|
|
@@ -14275,16 +14252,16 @@ var ToggleBar = (props) => {
|
|
|
14275
14252
|
name,
|
|
14276
14253
|
value: groupValue
|
|
14277
14254
|
},
|
|
14278
|
-
children: /* @__PURE__ */ (0,
|
|
14279
|
-
|
|
14255
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime271.jsxs)(
|
|
14256
|
+
OuterContainer3,
|
|
14280
14257
|
{
|
|
14281
14258
|
...getBaseHTMLProps(id, className, htmlProps, rest),
|
|
14282
14259
|
role: "radiogroup",
|
|
14283
14260
|
"aria-labelledby": labelId != null ? labelId : htmlProps == null ? void 0 : htmlProps["aria-labelledby"],
|
|
14284
14261
|
$width: width,
|
|
14285
14262
|
children: [
|
|
14286
|
-
label3 && /* @__PURE__ */ (0,
|
|
14287
|
-
/* @__PURE__ */ (0,
|
|
14263
|
+
label3 && /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(Typography, { typographyType: "supportingStyleLabel01", id: labelId, children: label3 }),
|
|
14264
|
+
/* @__PURE__ */ (0, import_jsx_runtime271.jsx)(Bar3, { children })
|
|
14288
14265
|
]
|
|
14289
14266
|
}
|
|
14290
14267
|
)
|
|
@@ -14294,12 +14271,12 @@ var ToggleBar = (props) => {
|
|
|
14294
14271
|
ToggleBar.displayName = "ToggleBar";
|
|
14295
14272
|
|
|
14296
14273
|
// src/components/ToggleBar/ToggleRadio.tsx
|
|
14297
|
-
var
|
|
14274
|
+
var import_react119 = require("react");
|
|
14298
14275
|
|
|
14299
14276
|
// src/components/ToggleBar/ToggleRadio.styles.tsx
|
|
14300
|
-
var
|
|
14277
|
+
var import_styled_components99 = __toESM(require("styled-components"));
|
|
14301
14278
|
var { content: content6, label: label2 } = toggleBarTokens;
|
|
14302
|
-
var Content2 =
|
|
14279
|
+
var Content2 = import_styled_components99.default.span`
|
|
14303
14280
|
display: flex;
|
|
14304
14281
|
justify-content: center;
|
|
14305
14282
|
align-items: center;
|
|
@@ -14317,18 +14294,18 @@ var Content2 = import_styled_components100.default.span`
|
|
|
14317
14294
|
}
|
|
14318
14295
|
background-color: ${content6.base.backgroundColor};
|
|
14319
14296
|
|
|
14320
|
-
${({ $size, $justIcon }) =>
|
|
14321
|
-
${$justIcon ?
|
|
14297
|
+
${({ $size, $justIcon }) => import_styled_components99.css`
|
|
14298
|
+
${$justIcon ? import_styled_components99.css`
|
|
14322
14299
|
font-size: ${content6.size[$size].justIcon.fontSize};
|
|
14323
14300
|
padding: ${content6.size[$size].justIcon.padding};
|
|
14324
|
-
` :
|
|
14301
|
+
` : import_styled_components99.css`
|
|
14325
14302
|
gap: ${content6.size[$size].withText.gap};
|
|
14326
14303
|
padding: ${content6.size[$size].withText.padding};
|
|
14327
|
-
${getFontStyling(
|
|
14304
|
+
${getFontStyling(typographyTypes6[$size])}
|
|
14328
14305
|
`}
|
|
14329
14306
|
`}
|
|
14330
14307
|
`;
|
|
14331
|
-
var Label3 =
|
|
14308
|
+
var Label3 = import_styled_components99.default.label`
|
|
14332
14309
|
${Content2} {
|
|
14333
14310
|
border-right: ${label2.base.borderRight};
|
|
14334
14311
|
border-top: ${label2.base.borderTop};
|
|
@@ -14366,7 +14343,7 @@ var Label3 = import_styled_components100.default.label`
|
|
|
14366
14343
|
`;
|
|
14367
14344
|
|
|
14368
14345
|
// src/components/ToggleBar/ToggleRadio.tsx
|
|
14369
|
-
var
|
|
14346
|
+
var import_jsx_runtime272 = require("react/jsx-runtime");
|
|
14370
14347
|
var calculateChecked = (value, group4, checked) => {
|
|
14371
14348
|
if (typeof checked !== "undefined")
|
|
14372
14349
|
return checked;
|
|
@@ -14378,7 +14355,7 @@ var calculateChecked = (value, group4, checked) => {
|
|
|
14378
14355
|
}
|
|
14379
14356
|
return !!value;
|
|
14380
14357
|
};
|
|
14381
|
-
var ToggleRadio = (0,
|
|
14358
|
+
var ToggleRadio = (0, import_react119.forwardRef)(
|
|
14382
14359
|
(props, ref) => {
|
|
14383
14360
|
const {
|
|
14384
14361
|
value,
|
|
@@ -14392,15 +14369,15 @@ var ToggleRadio = (0, import_react120.forwardRef)(
|
|
|
14392
14369
|
id,
|
|
14393
14370
|
...rest
|
|
14394
14371
|
} = props;
|
|
14395
|
-
const generatedId = (0,
|
|
14372
|
+
const generatedId = (0, import_react119.useId)();
|
|
14396
14373
|
const uniqueId = id != null ? id : `${generatedId}-ToggleRadio`;
|
|
14397
14374
|
const group4 = useToggleBarContext();
|
|
14398
14375
|
const handleChange = (event) => {
|
|
14399
14376
|
onChange && onChange(event);
|
|
14400
14377
|
(group4 == null ? void 0 : group4.onChange) && group4.onChange(event);
|
|
14401
14378
|
};
|
|
14402
|
-
return /* @__PURE__ */ (0,
|
|
14403
|
-
/* @__PURE__ */ (0,
|
|
14379
|
+
return /* @__PURE__ */ (0, import_jsx_runtime272.jsxs)(Label3, { size: group4.size, htmlFor: uniqueId, children: [
|
|
14380
|
+
/* @__PURE__ */ (0, import_jsx_runtime272.jsx)(
|
|
14404
14381
|
HiddenInput,
|
|
14405
14382
|
{
|
|
14406
14383
|
...getBaseHTMLProps(uniqueId, className, htmlProps, rest),
|
|
@@ -14412,9 +14389,9 @@ var ToggleRadio = (0, import_react120.forwardRef)(
|
|
|
14412
14389
|
checked: calculateChecked(value, group4, checked)
|
|
14413
14390
|
}
|
|
14414
14391
|
),
|
|
14415
|
-
/* @__PURE__ */ (0,
|
|
14416
|
-
icon12 && /* @__PURE__ */ (0,
|
|
14417
|
-
label3 && /* @__PURE__ */ (0,
|
|
14392
|
+
/* @__PURE__ */ (0, import_jsx_runtime272.jsxs)(Content2, { $size: group4.size, $justIcon: !!icon12 && !label3, children: [
|
|
14393
|
+
icon12 && /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(Icon, { icon: icon12, iconSize: "inherit" }),
|
|
14394
|
+
label3 && /* @__PURE__ */ (0, import_jsx_runtime272.jsx)("span", { children: label3 })
|
|
14418
14395
|
] })
|
|
14419
14396
|
] });
|
|
14420
14397
|
}
|
|
@@ -14422,12 +14399,12 @@ var ToggleRadio = (0, import_react120.forwardRef)(
|
|
|
14422
14399
|
ToggleRadio.displayName = "ToggleRadio";
|
|
14423
14400
|
|
|
14424
14401
|
// src/components/ToggleButton/ToggleButton.tsx
|
|
14425
|
-
var
|
|
14426
|
-
var
|
|
14402
|
+
var import_react120 = require("react");
|
|
14403
|
+
var import_styled_components100 = __toESM(require("styled-components"));
|
|
14427
14404
|
|
|
14428
14405
|
// src/components/ToggleButton/ToggleButton.tokens.tsx
|
|
14429
|
-
var
|
|
14430
|
-
var { colors: colors36, spacing: spacing40 } =
|
|
14406
|
+
var import_dds_design_tokens64 = require("@norges-domstoler/dds-design-tokens");
|
|
14407
|
+
var { colors: colors36, spacing: spacing40 } = import_dds_design_tokens64.ddsBaseTokens;
|
|
14431
14408
|
var { button: button2 } = buttonTokens;
|
|
14432
14409
|
var { selectionControl: selectionControl3 } = selectionControlTokens;
|
|
14433
14410
|
var typographyType6 = typographyTypes.small;
|
|
@@ -14458,9 +14435,9 @@ var toggleButtonTokens = {
|
|
|
14458
14435
|
};
|
|
14459
14436
|
|
|
14460
14437
|
// src/components/ToggleButton/ToggleButton.tsx
|
|
14461
|
-
var
|
|
14438
|
+
var import_jsx_runtime273 = require("react/jsx-runtime");
|
|
14462
14439
|
var { toggleButton: toggleButton2 } = toggleButtonTokens;
|
|
14463
|
-
var Content3 =
|
|
14440
|
+
var Content3 = import_styled_components100.default.span`
|
|
14464
14441
|
display: flex;
|
|
14465
14442
|
align-items: center;
|
|
14466
14443
|
width: 100%;
|
|
@@ -14482,7 +14459,7 @@ var Content3 = import_styled_components101.default.span`
|
|
|
14482
14459
|
${focusVisibleTransitionValue};
|
|
14483
14460
|
}
|
|
14484
14461
|
|
|
14485
|
-
${({ $hasIcon }) => $hasIcon &&
|
|
14462
|
+
${({ $hasIcon }) => $hasIcon && import_styled_components100.css`
|
|
14486
14463
|
gap: ${toggleButton2.gap};
|
|
14487
14464
|
`}
|
|
14488
14465
|
|
|
@@ -14496,7 +14473,7 @@ var Content3 = import_styled_components101.default.span`
|
|
|
14496
14473
|
border-color: ${toggleButton2.hover.borderColor};
|
|
14497
14474
|
}
|
|
14498
14475
|
`;
|
|
14499
|
-
var Container16 =
|
|
14476
|
+
var Container16 = import_styled_components100.default.label`
|
|
14500
14477
|
width: fit-content;
|
|
14501
14478
|
${HiddenInput}:checked + ${Content3} {
|
|
14502
14479
|
background-color: ${toggleButton2.checked.backgroundColor};
|
|
@@ -14512,12 +14489,12 @@ var Container16 = import_styled_components101.default.label`
|
|
|
14512
14489
|
${focusVisible}
|
|
14513
14490
|
}
|
|
14514
14491
|
`;
|
|
14515
|
-
var ToggleButton = (0,
|
|
14492
|
+
var ToggleButton = (0, import_react120.forwardRef)(
|
|
14516
14493
|
({ id, label: label3, icon: icon12, className, htmlProps, ...rest }, ref) => {
|
|
14517
|
-
const generatedId = (0,
|
|
14494
|
+
const generatedId = (0, import_react120.useId)();
|
|
14518
14495
|
const uniqueId = id != null ? id : `${generatedId}-toggleButton`;
|
|
14519
|
-
return /* @__PURE__ */ (0,
|
|
14520
|
-
/* @__PURE__ */ (0,
|
|
14496
|
+
return /* @__PURE__ */ (0, import_jsx_runtime273.jsxs)(Container16, { htmlFor: uniqueId, children: [
|
|
14497
|
+
/* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
|
|
14521
14498
|
HiddenInput,
|
|
14522
14499
|
{
|
|
14523
14500
|
...getBaseHTMLProps(uniqueId, className, htmlProps, rest),
|
|
@@ -14525,8 +14502,8 @@ var ToggleButton = (0, import_react121.forwardRef)(
|
|
|
14525
14502
|
type: "checkbox"
|
|
14526
14503
|
}
|
|
14527
14504
|
),
|
|
14528
|
-
/* @__PURE__ */ (0,
|
|
14529
|
-
icon12 && /* @__PURE__ */ (0,
|
|
14505
|
+
/* @__PURE__ */ (0, import_jsx_runtime273.jsxs)(Content3, { $hasIcon: !!icon12, children: [
|
|
14506
|
+
icon12 && /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(Icon, { icon: icon12, iconSize: "inherit" }),
|
|
14530
14507
|
" ",
|
|
14531
14508
|
label3
|
|
14532
14509
|
] })
|
|
@@ -14536,18 +14513,18 @@ var ToggleButton = (0, import_react121.forwardRef)(
|
|
|
14536
14513
|
ToggleButton.displayName = "ToggleButton";
|
|
14537
14514
|
|
|
14538
14515
|
// src/components/ToggleButton/ToggleButtonGroup.tsx
|
|
14539
|
-
var
|
|
14540
|
-
var
|
|
14541
|
-
var
|
|
14542
|
-
var Group2 =
|
|
14516
|
+
var import_react121 = require("react");
|
|
14517
|
+
var import_styled_components101 = __toESM(require("styled-components"));
|
|
14518
|
+
var import_jsx_runtime274 = require("react/jsx-runtime");
|
|
14519
|
+
var Group2 = import_styled_components101.default.div`
|
|
14543
14520
|
gap: ${toggleButtonTokens.group.gap};
|
|
14544
14521
|
display: flex;
|
|
14545
14522
|
flex-wrap: wrap;
|
|
14546
|
-
${({ direction }) =>
|
|
14523
|
+
${({ direction }) => import_styled_components101.css`
|
|
14547
14524
|
flex-direction: ${direction};
|
|
14548
14525
|
`}
|
|
14549
14526
|
`;
|
|
14550
|
-
var Container17 =
|
|
14527
|
+
var Container17 = import_styled_components101.default.div`
|
|
14551
14528
|
display: flex;
|
|
14552
14529
|
flex-direction: column;
|
|
14553
14530
|
gap: ${toggleButtonTokens.container.gap};
|
|
@@ -14563,7 +14540,7 @@ var ToggleButtonGroup = (props) => {
|
|
|
14563
14540
|
htmlProps,
|
|
14564
14541
|
...rest
|
|
14565
14542
|
} = props;
|
|
14566
|
-
const generatedId = (0,
|
|
14543
|
+
const generatedId = (0, import_react121.useId)();
|
|
14567
14544
|
const uniqueLabelId = labelId != null ? labelId : `${generatedId}-ToggleButtonGroupLabel`;
|
|
14568
14545
|
const groupProps = {
|
|
14569
14546
|
direction
|
|
@@ -14573,8 +14550,8 @@ var ToggleButtonGroup = (props) => {
|
|
|
14573
14550
|
role: "group",
|
|
14574
14551
|
"aria-labelledby": label3 ? uniqueLabelId : void 0
|
|
14575
14552
|
};
|
|
14576
|
-
return /* @__PURE__ */ (0,
|
|
14577
|
-
!!label3 && /* @__PURE__ */ (0,
|
|
14553
|
+
return /* @__PURE__ */ (0, import_jsx_runtime274.jsxs)(Container17, { ...containerProps, children: [
|
|
14554
|
+
!!label3 && /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(
|
|
14578
14555
|
Typography,
|
|
14579
14556
|
{
|
|
14580
14557
|
as: "span",
|
|
@@ -14583,7 +14560,7 @@ var ToggleButtonGroup = (props) => {
|
|
|
14583
14560
|
children: label3
|
|
14584
14561
|
}
|
|
14585
14562
|
),
|
|
14586
|
-
/* @__PURE__ */ (0,
|
|
14563
|
+
/* @__PURE__ */ (0, import_jsx_runtime274.jsx)(Group2, { ...groupProps, children })
|
|
14587
14564
|
] });
|
|
14588
14565
|
};
|
|
14589
14566
|
ToggleButtonGroup.displayName = "ToggleButtonGroup";
|