@navikt/ds-react 6.6.0 → 6.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/collapsible/Collapsible.context.d.ts +48 -0
- package/cjs/collapsible/Collapsible.context.js +10 -0
- package/cjs/collapsible/Collapsible.context.js.map +1 -0
- package/cjs/collapsible/Collapsible.d.ts +48 -0
- package/cjs/collapsible/Collapsible.js +91 -0
- package/cjs/collapsible/Collapsible.js.map +1 -0
- package/cjs/collapsible/Collapsible.types.d.ts +19 -0
- package/cjs/collapsible/Collapsible.types.js +3 -0
- package/cjs/collapsible/Collapsible.types.js.map +1 -0
- package/cjs/collapsible/index.d.ts +3 -0
- package/cjs/collapsible/index.js +14 -0
- package/cjs/collapsible/index.js.map +1 -0
- package/cjs/collapsible/parts/Collapsible.Content.d.ts +10 -0
- package/cjs/collapsible/parts/Collapsible.Content.js +48 -0
- package/cjs/collapsible/parts/Collapsible.Content.js.map +1 -0
- package/cjs/collapsible/parts/Collapsible.Trigger.d.ts +10 -0
- package/cjs/collapsible/parts/Collapsible.Trigger.js +49 -0
- package/cjs/collapsible/parts/Collapsible.Trigger.js.map +1 -0
- package/cjs/index.d.ts +1 -0
- package/cjs/index.js +4 -2
- package/cjs/index.js.map +1 -1
- package/cjs/layout/stack/Spacer.js +1 -1
- package/cjs/layout/stack/Spacer.js.map +1 -1
- package/cjs/progress-bar/ProgressBar.d.ts +60 -0
- package/cjs/progress-bar/ProgressBar.js +76 -0
- package/cjs/progress-bar/ProgressBar.js.map +1 -0
- package/cjs/progress-bar/index.d.ts +1 -0
- package/cjs/progress-bar/index.js +10 -0
- package/cjs/progress-bar/index.js.map +1 -0
- package/cjs/typography/BodyLong.d.ts +7 -7
- package/cjs/typography/BodyLong.js +5 -5
- package/cjs/typography/BodyShort.d.ts +5 -5
- package/cjs/typography/BodyShort.js +3 -3
- package/cjs/typography/Detail.d.ts +5 -5
- package/cjs/typography/Detail.js +3 -3
- package/cjs/typography/ErrorMessage.d.ts +5 -5
- package/cjs/typography/ErrorMessage.js +3 -3
- package/cjs/typography/Heading.d.ts +6 -6
- package/cjs/typography/Heading.js +3 -3
- package/cjs/typography/Label.d.ts +5 -5
- package/cjs/typography/Label.js +3 -3
- package/cjs/typography/types.d.ts +3 -3
- package/esm/collapsible/Collapsible.context.d.ts +48 -0
- package/esm/collapsible/Collapsible.context.js +6 -0
- package/esm/collapsible/Collapsible.context.js.map +1 -0
- package/esm/collapsible/Collapsible.d.ts +48 -0
- package/esm/collapsible/Collapsible.js +62 -0
- package/esm/collapsible/Collapsible.js.map +1 -0
- package/esm/collapsible/Collapsible.types.d.ts +19 -0
- package/esm/collapsible/Collapsible.types.js +2 -0
- package/esm/collapsible/Collapsible.types.js.map +1 -0
- package/esm/collapsible/index.d.ts +3 -0
- package/esm/collapsible/index.js +5 -0
- package/esm/collapsible/index.js.map +1 -0
- package/esm/collapsible/parts/Collapsible.Content.d.ts +10 -0
- package/esm/collapsible/parts/Collapsible.Content.js +22 -0
- package/esm/collapsible/parts/Collapsible.Content.js.map +1 -0
- package/esm/collapsible/parts/Collapsible.Trigger.d.ts +10 -0
- package/esm/collapsible/parts/Collapsible.Trigger.js +23 -0
- package/esm/collapsible/parts/Collapsible.Trigger.js.map +1 -0
- package/esm/index.d.ts +1 -0
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -1
- package/esm/layout/stack/Spacer.js +1 -1
- package/esm/layout/stack/Spacer.js.map +1 -1
- package/esm/progress-bar/ProgressBar.d.ts +60 -0
- package/esm/progress-bar/ProgressBar.js +47 -0
- package/esm/progress-bar/ProgressBar.js.map +1 -0
- package/esm/progress-bar/index.d.ts +1 -0
- package/esm/progress-bar/index.js +3 -0
- package/esm/progress-bar/index.js.map +1 -0
- package/esm/typography/BodyLong.d.ts +7 -7
- package/esm/typography/BodyLong.js +5 -5
- package/esm/typography/BodyShort.d.ts +5 -5
- package/esm/typography/BodyShort.js +3 -3
- package/esm/typography/Detail.d.ts +5 -5
- package/esm/typography/Detail.js +3 -3
- package/esm/typography/ErrorMessage.d.ts +5 -5
- package/esm/typography/ErrorMessage.js +3 -3
- package/esm/typography/Heading.d.ts +6 -6
- package/esm/typography/Heading.js +3 -3
- package/esm/typography/Label.d.ts +5 -5
- package/esm/typography/Label.js +3 -3
- package/esm/typography/types.d.ts +3 -3
- package/package.json +13 -3
- package/src/collapsible/Collapsible.context.tsx +32 -0
- package/src/collapsible/Collapsible.tsx +100 -0
- package/src/collapsible/Collapsible.types.ts +19 -0
- package/src/collapsible/index.ts +10 -0
- package/src/collapsible/parts/Collapsible.Content.tsx +39 -0
- package/src/collapsible/parts/Collapsible.Trigger.tsx +42 -0
- package/src/index.ts +1 -0
- package/src/layout/stack/Spacer.tsx +1 -1
- package/src/progress-bar/ProgressBar.tsx +124 -0
- package/src/progress-bar/index.ts +2 -0
- package/src/typography/BodyLong.tsx +7 -7
- package/src/typography/BodyShort.tsx +5 -5
- package/src/typography/Detail.tsx +5 -5
- package/src/typography/ErrorMessage.tsx +5 -5
- package/src/typography/Heading.tsx +6 -6
- package/src/typography/Label.tsx +5 -5
- package/src/typography/types.ts +3 -3
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { CollapsibleBaseProps } from "./Collapsible.types";
|
|
3
|
+
export type CollapsibleContextProps = Pick<CollapsibleBaseProps, "open"> & {
|
|
4
|
+
/**
|
|
5
|
+
* Allows connecting trigger to content
|
|
6
|
+
*/
|
|
7
|
+
contentId: string;
|
|
8
|
+
/**
|
|
9
|
+
* Allows connecting content to trigger
|
|
10
|
+
*/
|
|
11
|
+
triggerId: string;
|
|
12
|
+
/**
|
|
13
|
+
* Callback for toggling open state
|
|
14
|
+
*/
|
|
15
|
+
onOpenToggle: () => void;
|
|
16
|
+
/**
|
|
17
|
+
* Allows always rendering children in content when closed
|
|
18
|
+
*/
|
|
19
|
+
lazy: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Utility for getting state as string. Usefull for data-attributes.
|
|
22
|
+
*/
|
|
23
|
+
state: "open" | "closed";
|
|
24
|
+
};
|
|
25
|
+
export declare const CollapsibleContextProvider: import("react").ForwardRefExoticComponent<Pick<CollapsibleBaseProps, "open"> & {
|
|
26
|
+
/**
|
|
27
|
+
* Allows connecting trigger to content
|
|
28
|
+
*/
|
|
29
|
+
contentId: string;
|
|
30
|
+
/**
|
|
31
|
+
* Allows connecting content to trigger
|
|
32
|
+
*/
|
|
33
|
+
triggerId: string;
|
|
34
|
+
/**
|
|
35
|
+
* Callback for toggling open state
|
|
36
|
+
*/
|
|
37
|
+
onOpenToggle: () => void;
|
|
38
|
+
/**
|
|
39
|
+
* Allows always rendering children in content when closed
|
|
40
|
+
*/
|
|
41
|
+
lazy: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Utility for getting state as string. Usefull for data-attributes.
|
|
44
|
+
*/
|
|
45
|
+
state: "open" | "closed";
|
|
46
|
+
} & {
|
|
47
|
+
children: import("react").ReactNode;
|
|
48
|
+
} & import("react").RefAttributes<unknown>>, useCollapsibleContext: <S extends boolean = true>(strict?: S) => S extends true ? CollapsibleContextProps : CollapsibleContextProps | undefined;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var _a;
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.useCollapsibleContext = exports.CollapsibleContextProvider = void 0;
|
|
5
|
+
const create_context_1 = require("../util/create-context");
|
|
6
|
+
_a = (0, create_context_1.createContext)({
|
|
7
|
+
name: "CollapsibleContext",
|
|
8
|
+
errorMessage: "<Collapsible.Trigger> and <Collapsible.Content> must be used within a <Collapsible>",
|
|
9
|
+
}), exports.CollapsibleContextProvider = _a[0], exports.useCollapsibleContext = _a[1];
|
|
10
|
+
//# sourceMappingURL=Collapsible.context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Collapsible.context.js","sourceRoot":"","sources":["../../src/collapsible/Collapsible.context.tsx"],"names":[],"mappings":";;;;AAAA,2DAAuD;AA0B1C,KACX,IAAA,8BAAa,EAA0B;IACrC,IAAI,EAAE,oBAAoB;IAC1B,YAAY,EACV,qFAAqF;CACxF,CAAC,EALU,kCAA0B,UAAE,6BAAqB,SAK1D"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { CollapsibleBaseProps } from "./Collapsible.types";
|
|
3
|
+
import CollapsibleContent from "./parts/Collapsible.Content";
|
|
4
|
+
import CollapsibleTrigger from "./parts/Collapsible.Trigger";
|
|
5
|
+
export interface CollapsibleProps extends CollapsibleBaseProps, React.HTMLAttributes<HTMLDivElement> {
|
|
6
|
+
}
|
|
7
|
+
interface CollapsibleComponent extends React.ForwardRefExoticComponent<CollapsibleProps & React.RefAttributes<HTMLDivElement>> {
|
|
8
|
+
/**
|
|
9
|
+
* @see 🏷️ {@link CollapsibleTriggerProps}
|
|
10
|
+
*/
|
|
11
|
+
Trigger: typeof CollapsibleTrigger;
|
|
12
|
+
/**
|
|
13
|
+
* @see 🏷️ {@link CollapsibleContentProps}
|
|
14
|
+
*/
|
|
15
|
+
Content: typeof CollapsibleContent;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Collapsible is a component that allows you to toggle visibility of content.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```jsx
|
|
22
|
+
* <Collapsible>
|
|
23
|
+
* <Collapsible.Trigger>Trigger</Collapsible.Trigger>
|
|
24
|
+
* <Collapsible.Content>
|
|
25
|
+
* Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
|
|
26
|
+
* corporis maxime aliquam, voluptates nobis numquam, non odit optio
|
|
27
|
+
* architecto iure laborum possimus! Quibusdam sit ullam, consequatur sunt
|
|
28
|
+
* tempore optio aliquid!
|
|
29
|
+
* </Collapsible.Content>
|
|
30
|
+
* </Collapsible>
|
|
31
|
+
* ```
|
|
32
|
+
*
|
|
33
|
+
* @example With asChild
|
|
34
|
+
* ```jsx
|
|
35
|
+
* <Collapsible>
|
|
36
|
+
* <Collapsible.Trigger asChild>
|
|
37
|
+
* <Button>Button</Button>
|
|
38
|
+
* </Collapsible.Trigger>
|
|
39
|
+
* <Collapsible.Content asChild>
|
|
40
|
+
* <Box padding="4" background="surface-alt-3-subtle">
|
|
41
|
+
* <div>lorem ipsum</div>
|
|
42
|
+
* </Box>
|
|
43
|
+
* </Collapsible.Content>
|
|
44
|
+
* </Collapsible>
|
|
45
|
+
* ```
|
|
46
|
+
*/
|
|
47
|
+
export declare const Collapsible: CollapsibleComponent;
|
|
48
|
+
export default Collapsible;
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
26
|
+
var t = {};
|
|
27
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
28
|
+
t[p] = s[p];
|
|
29
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
30
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
31
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
32
|
+
t[p[i]] = s[p[i]];
|
|
33
|
+
}
|
|
34
|
+
return t;
|
|
35
|
+
};
|
|
36
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
37
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
|
+
};
|
|
39
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
+
exports.Collapsible = void 0;
|
|
41
|
+
const react_1 = __importStar(require("react"));
|
|
42
|
+
const hooks_1 = require("../util/hooks");
|
|
43
|
+
const Collapsible_context_1 = require("./Collapsible.context");
|
|
44
|
+
const Collapsible_Content_1 = __importDefault(require("./parts/Collapsible.Content"));
|
|
45
|
+
const Collapsible_Trigger_1 = __importDefault(require("./parts/Collapsible.Trigger"));
|
|
46
|
+
/**
|
|
47
|
+
* Collapsible is a component that allows you to toggle visibility of content.
|
|
48
|
+
*
|
|
49
|
+
* @example
|
|
50
|
+
* ```jsx
|
|
51
|
+
* <Collapsible>
|
|
52
|
+
* <Collapsible.Trigger>Trigger</Collapsible.Trigger>
|
|
53
|
+
* <Collapsible.Content>
|
|
54
|
+
* Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
|
|
55
|
+
* corporis maxime aliquam, voluptates nobis numquam, non odit optio
|
|
56
|
+
* architecto iure laborum possimus! Quibusdam sit ullam, consequatur sunt
|
|
57
|
+
* tempore optio aliquid!
|
|
58
|
+
* </Collapsible.Content>
|
|
59
|
+
* </Collapsible>
|
|
60
|
+
* ```
|
|
61
|
+
*
|
|
62
|
+
* @example With asChild
|
|
63
|
+
* ```jsx
|
|
64
|
+
* <Collapsible>
|
|
65
|
+
* <Collapsible.Trigger asChild>
|
|
66
|
+
* <Button>Button</Button>
|
|
67
|
+
* </Collapsible.Trigger>
|
|
68
|
+
* <Collapsible.Content asChild>
|
|
69
|
+
* <Box padding="4" background="surface-alt-3-subtle">
|
|
70
|
+
* <div>lorem ipsum</div>
|
|
71
|
+
* </Box>
|
|
72
|
+
* </Collapsible.Content>
|
|
73
|
+
* </Collapsible>
|
|
74
|
+
* ```
|
|
75
|
+
*/
|
|
76
|
+
exports.Collapsible = (0, react_1.forwardRef)((_a, ref) => {
|
|
77
|
+
var { children, open, defaultOpen = false, onOpenChange, lazy = false } = _a, rest = __rest(_a, ["children", "open", "defaultOpen", "onOpenChange", "lazy"]);
|
|
78
|
+
const [_open, setOpen] = (0, hooks_1.useControllableState)({
|
|
79
|
+
value: open,
|
|
80
|
+
defaultValue: defaultOpen,
|
|
81
|
+
onChange: onOpenChange,
|
|
82
|
+
});
|
|
83
|
+
const internalId = (0, hooks_1.useId)();
|
|
84
|
+
const state = _open ? "open" : "closed";
|
|
85
|
+
return (react_1.default.createElement(Collapsible_context_1.CollapsibleContextProvider, { open: _open, onOpenToggle: (0, react_1.useCallback)(() => setOpen((prevOpen) => !prevOpen), [setOpen]), contentId: `collapsible-content-${internalId}`, triggerId: `collapsible-trigger-${internalId}`, lazy: lazy, state: state },
|
|
86
|
+
react_1.default.createElement("div", Object.assign({ ref: ref, "data-state": state }, rest), children)));
|
|
87
|
+
});
|
|
88
|
+
exports.Collapsible.Trigger = Collapsible_Trigger_1.default;
|
|
89
|
+
exports.Collapsible.Content = Collapsible_Content_1.default;
|
|
90
|
+
exports.default = exports.Collapsible;
|
|
91
|
+
//# sourceMappingURL=Collapsible.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Collapsible.js","sourceRoot":"","sources":["../../src/collapsible/Collapsible.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuD;AACvD,yCAA4D;AAC5D,+DAAmE;AAEnE,sFAA6D;AAC7D,sFAA6D;AAoB7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACU,QAAA,WAAW,GAAG,IAAA,kBAAU,EACnC,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,QAAQ,EACR,IAAI,EACJ,WAAW,GAAG,KAAK,EACnB,YAAY,EACZ,IAAI,GAAG,KAAK,OAEb,EADI,IAAI,cANT,2DAOC,CADQ;IAIT,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,IAAA,4BAAoB,EAAC;QAC5C,KAAK,EAAE,IAAI;QACX,YAAY,EAAE,WAAW;QACzB,QAAQ,EAAE,YAAY;KACvB,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,IAAA,aAAK,GAAE,CAAC;IAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;IAExC,OAAO,CACL,8BAAC,gDAA0B,IACzB,IAAI,EAAE,KAAK,EACX,YAAY,EAAE,IAAA,mBAAW,EACvB,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtC,CAAC,OAAO,CAAC,CACV,EACD,SAAS,EAAE,uBAAuB,UAAU,EAAE,EAC9C,SAAS,EAAE,uBAAuB,UAAU,EAAE,EAC9C,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK;QAEZ,qDAAK,GAAG,EAAE,GAAG,gBAAc,KAAK,IAAM,IAAI,GACvC,QAAQ,CACL,CACqB,CAC9B,CAAC;AACJ,CAAC,CACsB,CAAC;AAE1B,mBAAW,CAAC,OAAO,GAAG,6BAAkB,CAAC;AACzC,mBAAW,CAAC,OAAO,GAAG,6BAAkB,CAAC;AAEzC,kBAAe,mBAAW,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export interface CollapsibleBaseProps {
|
|
2
|
+
/**
|
|
3
|
+
* The open state of the collapsible when it is initially rendered. Use when you do not need to control its open state.
|
|
4
|
+
*/
|
|
5
|
+
defaultOpen?: boolean;
|
|
6
|
+
/**
|
|
7
|
+
* The controlled open state of the collapsible. Must be used in conjunction with onOpenChange.
|
|
8
|
+
*/
|
|
9
|
+
open?: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* Event handler called when the open state of the collapsible changes.
|
|
12
|
+
*/
|
|
13
|
+
onOpenChange?: (open: boolean) => void;
|
|
14
|
+
/**
|
|
15
|
+
* Render the collapsible content lazily. This means that the content will not be rendered until the collapsible is open.
|
|
16
|
+
* @default false
|
|
17
|
+
*/
|
|
18
|
+
lazy?: boolean;
|
|
19
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Collapsible.types.js","sourceRoot":"","sources":["../../src/collapsible/Collapsible.types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { default as Collapsible, type CollapsibleProps } from "./Collapsible";
|
|
2
|
+
export { default as CollapsibleTrigger, type CollapsibleTriggerProps, } from "./parts/Collapsible.Trigger";
|
|
3
|
+
export { default as CollapsibleContent, type CollapsibleContentProps, } from "./parts/Collapsible.Content";
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
5
|
+
};
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
exports.CollapsibleContent = exports.CollapsibleTrigger = exports.Collapsible = void 0;
|
|
8
|
+
var Collapsible_1 = require("./Collapsible");
|
|
9
|
+
Object.defineProperty(exports, "Collapsible", { enumerable: true, get: function () { return __importDefault(Collapsible_1).default; } });
|
|
10
|
+
var Collapsible_Trigger_1 = require("./parts/Collapsible.Trigger");
|
|
11
|
+
Object.defineProperty(exports, "CollapsibleTrigger", { enumerable: true, get: function () { return __importDefault(Collapsible_Trigger_1).default; } });
|
|
12
|
+
var Collapsible_Content_1 = require("./parts/Collapsible.Content");
|
|
13
|
+
Object.defineProperty(exports, "CollapsibleContent", { enumerable: true, get: function () { return __importDefault(Collapsible_Content_1).default; } });
|
|
14
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/collapsible/index.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;AACb,6CAA8E;AAArE,2HAAA,OAAO,OAAe;AAC/B,mEAGqC;AAFnC,0IAAA,OAAO,OAAsB;AAG/B,mEAGqC;AAFnC,0IAAA,OAAO,OAAsB"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface CollapsibleContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "hidden" | "aria-controls" | "id"> {
|
|
3
|
+
/**
|
|
4
|
+
* When true, will render element as its child. This merges classes, styles and event handlers.
|
|
5
|
+
* @default false
|
|
6
|
+
*/
|
|
7
|
+
asChild?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export declare const CollapsibleContent: React.ForwardRefExoticComponent<CollapsibleContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
+
export default CollapsibleContent;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
26
|
+
var t = {};
|
|
27
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
28
|
+
t[p] = s[p];
|
|
29
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
30
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
31
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
32
|
+
t[p[i]] = s[p[i]];
|
|
33
|
+
}
|
|
34
|
+
return t;
|
|
35
|
+
};
|
|
36
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
+
exports.CollapsibleContent = void 0;
|
|
38
|
+
const react_1 = __importStar(require("react"));
|
|
39
|
+
const Slot_1 = require("../../util/Slot");
|
|
40
|
+
const Collapsible_context_1 = require("../Collapsible.context");
|
|
41
|
+
exports.CollapsibleContent = (0, react_1.forwardRef)((_a, ref) => {
|
|
42
|
+
var { children, asChild } = _a, rest = __rest(_a, ["children", "asChild"]);
|
|
43
|
+
const ctx = (0, Collapsible_context_1.useCollapsibleContext)();
|
|
44
|
+
const Comp = asChild ? Slot_1.Slot : "div";
|
|
45
|
+
return (react_1.default.createElement(Comp, Object.assign({ ref: ref }, rest, { "data-state": ctx.state, hidden: !ctx.open, "aria-controls": ctx.open ? ctx.triggerId : undefined, id: ctx.contentId }), ctx.lazy || ctx.open ? children : null));
|
|
46
|
+
});
|
|
47
|
+
exports.default = exports.CollapsibleContent;
|
|
48
|
+
//# sourceMappingURL=Collapsible.Content.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Collapsible.Content.js","sourceRoot":"","sources":["../../../src/collapsible/parts/Collapsible.Content.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,0CAAuC;AACvC,gEAA+D;AAclD,QAAA,kBAAkB,GAAG,IAAA,kBAAU,EAG1C,CAAC,EAA8B,EAAE,GAAG,EAAE,EAAE;QAAvC,EAAE,QAAQ,EAAE,OAAO,OAAW,EAAN,IAAI,cAA5B,uBAA8B,CAAF;IAC7B,MAAM,GAAG,GAAG,IAAA,2CAAqB,GAAE,CAAC;IAEpC,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEpC,OAAO,CACL,8BAAC,IAAI,kBACH,GAAG,EAAE,GAAG,IACJ,IAAI,kBACI,GAAG,CAAC,KAAK,EACrB,MAAM,EAAE,CAAC,GAAG,CAAC,IAAI,mBACF,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACnD,EAAE,EAAE,GAAG,CAAC,SAAS,KAEhB,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAClC,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAe,0BAAkB,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface CollapsibleTriggerProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "id" | "aria-controls" | "aria-expanded"> {
|
|
3
|
+
/**
|
|
4
|
+
* When true, will render element as its child. This merges classes, styles and event handlers.
|
|
5
|
+
* @default false
|
|
6
|
+
*/
|
|
7
|
+
asChild?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export declare const CollapsibleTrigger: React.ForwardRefExoticComponent<CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
10
|
+
export default CollapsibleTrigger;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
26
|
+
var t = {};
|
|
27
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
28
|
+
t[p] = s[p];
|
|
29
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
30
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
31
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
32
|
+
t[p[i]] = s[p[i]];
|
|
33
|
+
}
|
|
34
|
+
return t;
|
|
35
|
+
};
|
|
36
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
+
exports.CollapsibleTrigger = void 0;
|
|
38
|
+
const react_1 = __importStar(require("react"));
|
|
39
|
+
const Slot_1 = require("../../util/Slot");
|
|
40
|
+
const composeEventHandlers_1 = require("../../util/composeEventHandlers");
|
|
41
|
+
const Collapsible_context_1 = require("../Collapsible.context");
|
|
42
|
+
exports.CollapsibleTrigger = (0, react_1.forwardRef)((_a, ref) => {
|
|
43
|
+
var { children, asChild, onClick } = _a, rest = __rest(_a, ["children", "asChild", "onClick"]);
|
|
44
|
+
const ctx = (0, Collapsible_context_1.useCollapsibleContext)();
|
|
45
|
+
const Comp = asChild ? Slot_1.Slot : "button";
|
|
46
|
+
return (react_1.default.createElement(Comp, Object.assign({ ref: ref, type: "button", "data-state": ctx.state, onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, ctx.onOpenToggle) }, rest, { id: ctx.triggerId, "aria-controls": ctx.open ? ctx.contentId : undefined, "aria-expanded": ctx.open }), children));
|
|
47
|
+
});
|
|
48
|
+
exports.default = exports.CollapsibleTrigger;
|
|
49
|
+
//# sourceMappingURL=Collapsible.Trigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Collapsible.Trigger.js","sourceRoot":"","sources":["../../../src/collapsible/parts/Collapsible.Trigger.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,0CAAuC;AACvC,0EAAuE;AACvE,gEAA+D;AAclD,QAAA,kBAAkB,GAAG,IAAA,kBAAU,EAG1C,CAAC,EAAuC,EAAE,GAAG,EAAE,EAAE;QAAhD,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,OAAW,EAAN,IAAI,cAArC,kCAAuC,CAAF;IACtC,MAAM,GAAG,GAAG,IAAA,2CAAqB,GAAE,CAAC;IAEpC,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IAEvC,OAAO,CACL,8BAAC,IAAI,kBACH,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,gBACD,GAAG,CAAC,KAAK,EACrB,OAAO,EAAE,IAAA,2CAAoB,EAAC,OAAO,EAAE,GAAG,CAAC,YAAY,CAAC,IACpD,IAAI,IACR,EAAE,EAAE,GAAG,CAAC,SAAS,mBACF,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,mBACpC,GAAG,CAAC,IAAI,KAEtB,QAAQ,CACJ,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAe,0BAAkB,CAAC"}
|
package/cjs/index.d.ts
CHANGED
|
@@ -24,6 +24,7 @@ export { Modal, type ModalProps } from "./modal";
|
|
|
24
24
|
export { Pagination, type PaginationProps } from "./pagination";
|
|
25
25
|
export { Popover, type PopoverProps } from "./popover";
|
|
26
26
|
export { Portal, type PortalProps } from "./portal";
|
|
27
|
+
export { ProgressBar, type ProgressBarProps } from "./progress-bar";
|
|
27
28
|
export { Provider, type ProviderProps } from "./provider";
|
|
28
29
|
export { ReadMore, type ReadMoreProps } from "./read-more";
|
|
29
30
|
export { Skeleton, type SkeletonProps } from "./skeleton";
|
package/cjs/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
"use client";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.
|
|
5
|
-
exports.Panel = exports.LinkPanel = exports.TextField = exports.Textarea = exports.Switch = exports.Select = exports.Search = exports.RadioGroup = exports.Radio = exports.FormSummary = exports.UNSAFE_FileUpload = exports.Fieldset = exports.ErrorSummary = exports.ConfirmationPanel = exports.UNSAFE_Combobox = exports.CheckboxGroup = exports.Checkbox = exports.useId = exports.useEventListener = exports.useClientLayoutEffect = exports.omit = exports.debounce = exports.Label = void 0;
|
|
4
|
+
exports.Heading = exports.ErrorMessage = exports.Detail = exports.BodyShort = exports.BodyLong = exports.Tooltip = exports.ToggleGroup = exports.Timeline = exports.Tag = exports.Tabs = exports.Table = exports.Stepper = exports.Skeleton = exports.ReadMore = exports.Provider = exports.ProgressBar = exports.Portal = exports.Popover = exports.Pagination = exports.Modal = exports.Loader = exports.List = exports.Link = exports.VStack = exports.Stack = exports.Spacer = exports.HStack = exports.Show = exports.Hide = exports.Page = exports.HGrid = exports.Box = exports.Bleed = exports.InternalHeader = exports.HelpText = exports.GuidePanelDefaultIllustration = exports.GuidePanel = exports.ExpansionCard = exports.Dropdown = exports.useMonthpicker = exports.MonthPicker = exports.useRangeDatepicker = exports.useDatepicker = exports.DatePicker = exports.CopyButton = exports.Chips = exports.Chat = exports.Button = exports.Alert = exports.Accordion = void 0;
|
|
5
|
+
exports.Panel = exports.LinkPanel = exports.TextField = exports.Textarea = exports.Switch = exports.Select = exports.Search = exports.RadioGroup = exports.Radio = exports.FormSummary = exports.UNSAFE_FileUpload = exports.Fieldset = exports.ErrorSummary = exports.ConfirmationPanel = exports.UNSAFE_Combobox = exports.CheckboxGroup = exports.Checkbox = exports.useId = exports.useEventListener = exports.useClientLayoutEffect = exports.omit = exports.debounce = exports.Label = exports.Ingress = void 0;
|
|
6
6
|
var accordion_1 = require("./accordion");
|
|
7
7
|
Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return accordion_1.Accordion; } });
|
|
8
8
|
var alert_1 = require("./alert");
|
|
@@ -63,6 +63,8 @@ var popover_1 = require("./popover");
|
|
|
63
63
|
Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return popover_1.Popover; } });
|
|
64
64
|
var portal_1 = require("./portal");
|
|
65
65
|
Object.defineProperty(exports, "Portal", { enumerable: true, get: function () { return portal_1.Portal; } });
|
|
66
|
+
var progress_bar_1 = require("./progress-bar");
|
|
67
|
+
Object.defineProperty(exports, "ProgressBar", { enumerable: true, get: function () { return progress_bar_1.ProgressBar; } });
|
|
66
68
|
var provider_1 = require("./provider");
|
|
67
69
|
Object.defineProperty(exports, "Provider", { enumerable: true, get: function () { return provider_1.Provider; } });
|
|
68
70
|
var read_more_1 = require("./read-more");
|
package/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -17,7 +17,7 @@ const react_1 = __importDefault(require("react"));
|
|
|
17
17
|
* <MyComponent />
|
|
18
18
|
* </HStack>
|
|
19
19
|
*/
|
|
20
|
-
const Spacer = () => react_1.default.createElement("
|
|
20
|
+
const Spacer = () => react_1.default.createElement("span", { className: "navds-stack__spacer" });
|
|
21
21
|
exports.Spacer = Spacer;
|
|
22
22
|
exports.default = exports.Spacer;
|
|
23
23
|
//# sourceMappingURL=Spacer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spacer.js","sourceRoot":"","sources":["../../../src/layout/stack/Spacer.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B;;;;;;;;;;;GAWG;AACI,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"Spacer.js","sourceRoot":"","sources":["../../../src/layout/stack/Spacer.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B;;;;;;;;;;;GAWG;AACI,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,wCAAM,SAAS,EAAC,qBAAqB,GAAG,CAAC;AAAxD,QAAA,MAAM,UAAkD;AAErE,kBAAe,cAAM,CAAC"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import React, { HTMLAttributes } from "react";
|
|
2
|
+
interface ProgressBarPropsBase extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
|
|
3
|
+
/**
|
|
4
|
+
* Changes height.
|
|
5
|
+
* @default "medium"
|
|
6
|
+
*/
|
|
7
|
+
size?: "large" | "medium" | "small";
|
|
8
|
+
/**
|
|
9
|
+
* Current progress. When duration is set, value is ignored.
|
|
10
|
+
*/
|
|
11
|
+
value?: number;
|
|
12
|
+
/**
|
|
13
|
+
* Maximum progress.
|
|
14
|
+
* @default 100
|
|
15
|
+
*/
|
|
16
|
+
valueMax?: number;
|
|
17
|
+
/**
|
|
18
|
+
* Expected task duration in seconds.
|
|
19
|
+
* ProgressBar grows with a preset animation for {duration} seconds.
|
|
20
|
+
* After a 4 sec delay, it then shows an indeterminate animation.
|
|
21
|
+
* A duration of 0 will show an indeterminate animation immediately.
|
|
22
|
+
* Temporary removed to avoid conflicts when updating API
|
|
23
|
+
*/
|
|
24
|
+
/**
|
|
25
|
+
* String ID of the element that labels the progress bar.
|
|
26
|
+
* Not needed if `aria-label` is used.
|
|
27
|
+
*/
|
|
28
|
+
"aria-labelledby"?: string;
|
|
29
|
+
/**
|
|
30
|
+
* String value that labels the progress bar.
|
|
31
|
+
* Not needed if `aria-labelledby` is used.
|
|
32
|
+
*/
|
|
33
|
+
"aria-label"?: string;
|
|
34
|
+
}
|
|
35
|
+
export type ProgressBarProps = ProgressBarPropsBase & ({
|
|
36
|
+
"aria-hidden": string;
|
|
37
|
+
} | {
|
|
38
|
+
"aria-labelledby": string;
|
|
39
|
+
"aria-label"?: never;
|
|
40
|
+
} | {
|
|
41
|
+
"aria-label": string;
|
|
42
|
+
"aria-labelledby"?: never;
|
|
43
|
+
});
|
|
44
|
+
/**
|
|
45
|
+
* ProgressBar
|
|
46
|
+
* A component for visualizing progression in a process.
|
|
47
|
+
*
|
|
48
|
+
* @see [📝 Documentation](https://aksel.nav.no/komponenter/core/progress-bar)
|
|
49
|
+
* @see 🏷️ {@link ProgressBarProps}
|
|
50
|
+
*
|
|
51
|
+
* @example
|
|
52
|
+
* // For loading content with an approximate duration in sec.
|
|
53
|
+
* <ProgressBar duration={30} />
|
|
54
|
+
*
|
|
55
|
+
* @example
|
|
56
|
+
* // As a step indicator for forms, questionnaires, etc.
|
|
57
|
+
* <ProgressBar value={2} valueMax={7} />
|
|
58
|
+
*/
|
|
59
|
+
export declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
|
|
60
|
+
export default ProgressBar;
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
26
|
+
var t = {};
|
|
27
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
28
|
+
t[p] = s[p];
|
|
29
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
30
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
31
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
32
|
+
t[p[i]] = s[p[i]];
|
|
33
|
+
}
|
|
34
|
+
return t;
|
|
35
|
+
};
|
|
36
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
37
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
|
+
};
|
|
39
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
+
exports.ProgressBar = void 0;
|
|
41
|
+
const clsx_1 = __importDefault(require("clsx"));
|
|
42
|
+
const react_1 = __importStar(require("react"));
|
|
43
|
+
/**
|
|
44
|
+
* ProgressBar
|
|
45
|
+
* A component for visualizing progression in a process.
|
|
46
|
+
*
|
|
47
|
+
* @see [📝 Documentation](https://aksel.nav.no/komponenter/core/progress-bar)
|
|
48
|
+
* @see 🏷️ {@link ProgressBarProps}
|
|
49
|
+
*
|
|
50
|
+
* @example
|
|
51
|
+
* // For loading content with an approximate duration in sec.
|
|
52
|
+
* <ProgressBar duration={30} />
|
|
53
|
+
*
|
|
54
|
+
* @example
|
|
55
|
+
* // As a step indicator for forms, questionnaires, etc.
|
|
56
|
+
* <ProgressBar value={2} valueMax={7} />
|
|
57
|
+
*/
|
|
58
|
+
exports.ProgressBar = (0, react_1.forwardRef)((_a, ref) => {
|
|
59
|
+
var { size = "medium", value = 0, valueMax = 100, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, className } = _a, rest = __rest(_a, ["size", "value", "valueMax", "aria-labelledby", "aria-label", "className"]);
|
|
60
|
+
const translate = 100 - (Math.round(value) / valueMax) * 100;
|
|
61
|
+
const duration = undefined;
|
|
62
|
+
return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-progress-bar", `navds-progress-bar--${size}`, className), "aria-valuemax": duration ? 0 : Math.round(valueMax), "aria-valuenow": duration ? 0 : Math.round(value), "aria-valuetext": duration
|
|
63
|
+
? "Fremdrift kan ikke beregnes"
|
|
64
|
+
: `${Math.round(value)} av ${Math.round(valueMax)}`, role: "progressbar", "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel }, rest),
|
|
65
|
+
react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-progress-bar__foreground", {
|
|
66
|
+
"navds-progress-bar__foreground--indeterminate": Number.isInteger(duration),
|
|
67
|
+
}), style: {
|
|
68
|
+
"--__ac-progress-bar-duration": Number.isInteger(duration)
|
|
69
|
+
? `${duration}s`
|
|
70
|
+
: undefined,
|
|
71
|
+
"--__ac-progress-bar-delay": `${duration === 0 ? 0 : 4}s`,
|
|
72
|
+
"--__ac-progress-bar-translate": `-${translate}%`,
|
|
73
|
+
} })));
|
|
74
|
+
});
|
|
75
|
+
exports.default = exports.ProgressBar;
|
|
76
|
+
//# sourceMappingURL=ProgressBar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../src/progress-bar/ProgressBar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0D;AAqD1D;;;;;;;;;;;;;;GAcG;AACU,QAAA,WAAW,GAAG,IAAA,kBAAU,EACnC,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,CAAC,EACT,QAAQ,GAAG,GAAG,EACd,iBAAiB,EAAE,cAAc,EACjC,YAAY,EAAE,SAAS,EACvB,SAAS,OAEV,EADI,IAAI,cAPT,2EAQC,CADQ;IAIT,MAAM,SAAS,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,GAAG,GAAG,CAAC;IAC7D,MAAM,QAAQ,GAAG,SAAS,CAAC;IAE3B,OAAO,CACL,qDACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAE,EACX,oBAAoB,EACpB,uBAAuB,IAAI,EAAE,EAC7B,SAAS,CACV,mBACc,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,mBACnC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,oBAE7C,QAAQ;YACN,CAAC,CAAC,6BAA6B;YAC/B,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,EAEvD,IAAI,EAAC,aAAa,qBACD,cAAc,gBACnB,SAAS,IACjB,IAAI;QAER,uCACE,SAAS,EAAE,IAAA,cAAE,EAAC,gCAAgC,EAAE;gBAC9C,+CAA+C,EAC7C,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC;aAC7B,CAAC,EACF,KAAK,EAAE;gBACL,8BAA8B,EAAE,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC;oBACxD,CAAC,CAAC,GAAG,QAAQ,GAAG;oBAChB,CAAC,CAAC,SAAS;gBACb,2BAA2B,EAAE,GAAG,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;gBACzD,+BAA+B,EAAE,IAAI,SAAS,GAAG;aAClD,GACD,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,mBAAW,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as ProgressBar, type ProgressBarProps } from "./ProgressBar";
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
5
|
+
};
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
exports.ProgressBar = void 0;
|
|
8
|
+
var ProgressBar_1 = require("./ProgressBar");
|
|
9
|
+
Object.defineProperty(exports, "ProgressBar", { enumerable: true, get: function () { return __importDefault(ProgressBar_1).default; } });
|
|
10
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/progress-bar/index.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;AACb,6CAA8E;AAArE,2HAAA,OAAO,OAAe"}
|