@fremtind/jokul 6.1.0-next.4 → 6.1.0-next.5
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/build/build-stats.html +1 -1
- package/build/cjs/components/checkbox/types.d.cts +2 -2
- package/build/cjs/components/combobox/Combobox.cjs +1 -1
- package/build/cjs/components/combobox/Combobox.cjs.map +1 -1
- package/build/cjs/components/combobox/types.d.cts +2 -1
- package/build/cjs/components/date-input/DateInput.d.cts +1 -1
- package/build/cjs/components/date-input/types.d.cts +2 -2
- package/build/cjs/components/input-group/InputGroup.cjs +1 -1
- package/build/cjs/components/input-group/InputGroup.cjs.map +1 -1
- package/build/cjs/components/input-group/types.d.cts +2 -2
- package/build/cjs/components/input-panel/InputPanel.d.cts +1 -1
- package/build/cjs/components/input-panel/types.d.cts +2 -2
- package/build/cjs/components/message/Message.cjs +1 -1
- package/build/cjs/components/message/Message.cjs.map +1 -1
- package/build/cjs/components/message/types.d.cts +5 -1
- package/build/cjs/components/notification-badge/NotificationBadge.cjs +2 -0
- package/build/cjs/components/notification-badge/NotificationBadge.cjs.map +1 -0
- package/build/cjs/components/notification-badge/NotificationBadge.d.cts +3 -0
- package/build/cjs/components/notification-badge/index.cjs +2 -0
- package/build/cjs/components/notification-badge/index.cjs.map +1 -0
- package/build/cjs/components/notification-badge/index.d.cts +2 -0
- package/build/cjs/components/notification-badge/types.cjs +2 -0
- package/build/cjs/components/notification-badge/types.cjs.map +1 -0
- package/build/cjs/components/notification-badge/types.d.cts +40 -0
- package/build/cjs/components/number-input/NumberInput.d.cts +1 -1
- package/build/cjs/components/number-input/types.d.cts +2 -1
- package/build/cjs/components/radio-button/types.d.cts +2 -1
- package/build/cjs/components/search/Search.cjs +1 -1
- package/build/cjs/components/search/Search.cjs.map +1 -1
- package/build/cjs/components/search/types.d.cts +2 -1
- package/build/cjs/components/select/Option.d.cts +1 -1
- package/build/cjs/components/select/Select.cjs.map +1 -1
- package/build/cjs/components/select/Select.d.cts +2 -2
- package/build/cjs/components/system-message/SystemMessage.cjs +1 -1
- package/build/cjs/components/system-message/SystemMessage.cjs.map +1 -1
- package/build/cjs/components/tag/Tag.cjs +1 -1
- package/build/cjs/components/tag/Tag.cjs.map +1 -1
- package/build/cjs/components/text-area/types.d.cts +2 -1
- package/build/cjs/components/text-input/types.d.cts +3 -2
- package/build/cjs/components/toast/Toast.cjs +1 -1
- package/build/cjs/components/toast/Toast.cjs.map +1 -1
- package/build/cjs/components/toggle-switch/ToggleSwitch.d.cts +1 -1
- package/build/cjs/components/toggle-switch/types.d.cts +2 -2
- package/build/cjs/tokens.cjs +1 -1
- package/build/cjs/tokens.cjs.map +1 -1
- package/build/cjs/tokens.d.cts +3 -0
- package/build/cjs/utilities/index.cjs +1 -1
- package/build/cjs/utilities/types.cjs +1 -1
- package/build/cjs/utilities/types.cjs.map +1 -1
- package/build/cjs/utilities/types.d.cts +36 -2
- package/build/es/components/checkbox/types.d.ts +2 -2
- package/build/es/components/combobox/Combobox.js +1 -1
- package/build/es/components/combobox/Combobox.js.map +1 -1
- package/build/es/components/combobox/types.d.ts +2 -1
- package/build/es/components/date-input/DateInput.d.ts +1 -1
- package/build/es/components/date-input/types.d.ts +2 -2
- package/build/es/components/input-group/InputGroup.js +1 -1
- package/build/es/components/input-group/InputGroup.js.map +1 -1
- package/build/es/components/input-group/types.d.ts +2 -2
- package/build/es/components/input-panel/InputPanel.d.ts +1 -1
- package/build/es/components/input-panel/types.d.ts +2 -2
- package/build/es/components/message/Message.js +1 -1
- package/build/es/components/message/Message.js.map +1 -1
- package/build/es/components/message/types.d.ts +5 -1
- package/build/es/components/notification-badge/NotificationBadge.d.ts +3 -0
- package/build/es/components/notification-badge/NotificationBadge.js +2 -0
- package/build/es/components/notification-badge/NotificationBadge.js.map +1 -0
- package/build/es/components/notification-badge/index.d.ts +2 -0
- package/build/es/components/notification-badge/index.js +2 -0
- package/build/es/components/notification-badge/index.js.map +1 -0
- package/build/es/components/notification-badge/types.d.ts +40 -0
- package/build/es/components/notification-badge/types.js +2 -0
- package/build/es/components/notification-badge/types.js.map +1 -0
- package/build/es/components/number-input/NumberInput.d.ts +1 -1
- package/build/es/components/number-input/types.d.ts +2 -1
- package/build/es/components/radio-button/types.d.ts +2 -1
- package/build/es/components/search/Search.js +1 -1
- package/build/es/components/search/Search.js.map +1 -1
- package/build/es/components/search/types.d.ts +2 -1
- package/build/es/components/select/Option.d.ts +1 -1
- package/build/es/components/select/Select.d.ts +2 -2
- package/build/es/components/select/Select.js.map +1 -1
- package/build/es/components/system-message/SystemMessage.js +1 -1
- package/build/es/components/system-message/SystemMessage.js.map +1 -1
- package/build/es/components/tag/Tag.js +1 -1
- package/build/es/components/tag/Tag.js.map +1 -1
- package/build/es/components/text-area/types.d.ts +2 -1
- package/build/es/components/text-input/types.d.ts +3 -2
- package/build/es/components/toast/Toast.js +1 -1
- package/build/es/components/toast/Toast.js.map +1 -1
- package/build/es/components/toggle-switch/ToggleSwitch.d.ts +1 -1
- package/build/es/components/toggle-switch/types.d.ts +2 -2
- package/build/es/tokens.d.ts +3 -0
- package/build/es/tokens.js +1 -1
- package/build/es/tokens.js.map +1 -1
- package/build/es/utilities/index.js +1 -1
- package/build/es/utilities/types.d.ts +36 -2
- package/build/es/utilities/types.js +1 -1
- package/build/es/utilities/types.js.map +1 -1
- package/package.json +1 -1
- package/styles/base.css +194 -116
- package/styles/base.min.css +1 -1
- package/styles/components/button/button.css +2 -1
- package/styles/components/button/button.min.css +1 -1
- package/styles/components/button/button.scss +2 -3
- package/styles/components/checkbox/checkbox.css +15 -0
- package/styles/components/checkbox/checkbox.min.css +1 -1
- package/styles/components/checkbox/checkbox.scss +4 -0
- package/styles/components/checkbox-panel/checkbox-panel.css +32 -0
- package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -1
- package/styles/components/chip/chip.css +6 -13
- package/styles/components/chip/chip.min.css +1 -1
- package/styles/components/chip/chip.scss +4 -14
- package/styles/components/combobox/combobox.css +45 -0
- package/styles/components/combobox/combobox.min.css +1 -1
- package/styles/components/combobox/combobox.scss +11 -0
- package/styles/components/countdown/countdown.css +2 -2
- package/styles/components/countdown/countdown.min.css +1 -1
- package/styles/components/date-input/calendar/calendar.css +15 -4
- package/styles/components/date-input/calendar/calendar.min.css +1 -1
- package/styles/components/date-input/calendar/calendar.scss +6 -10
- package/styles/components/date-input/date-input.css +25 -0
- package/styles/components/date-input/date-input.min.css +1 -1
- package/styles/components/expander/expandable.css +1 -1
- package/styles/components/expander/expandable.min.css +1 -1
- package/styles/components/expander/expandable.scss +2 -2
- package/styles/components/feedback/feedback.css +2 -2
- package/styles/components/feedback/feedback.min.css +1 -1
- package/styles/components/file-input/file-input.css +26 -10
- package/styles/components/file-input/file-input.min.css +1 -1
- package/styles/components/file-input/file-input.scss +6 -0
- package/styles/components/input-group/_labels.scss +29 -0
- package/styles/components/input-group/input-group.css +32 -2
- package/styles/components/input-group/input-group.min.css +1 -1
- package/styles/components/input-panel/input-panel.css +17 -0
- package/styles/components/input-panel/input-panel.min.css +1 -1
- package/styles/components/input-panel/input-panel.scss +7 -0
- package/styles/components/link-list/link-list.css +1 -1
- package/styles/components/link-list/link-list.min.css +1 -1
- package/styles/components/link-list/link-list.scss +1 -1
- package/styles/components/loader/loader.css +6 -6
- package/styles/components/loader/loader.min.css +1 -1
- package/styles/components/loader/skeleton-loader.css +3 -3
- package/styles/components/loader/skeleton-loader.min.css +1 -1
- package/styles/components/menu/_menu-item.scss +1 -1
- package/styles/components/menu/menu.css +1 -1
- package/styles/components/menu/menu.min.css +1 -1
- package/styles/components/message/message.css +5 -25
- package/styles/components/message/message.min.css +1 -1
- package/styles/components/message/message.scss +3 -27
- package/styles/components/notification-badge/_index.scss +1 -0
- package/styles/components/notification-badge/notification-badge.css +45 -0
- package/styles/components/notification-badge/notification-badge.min.css +3 -0
- package/styles/components/notification-badge/notification-badge.scss +58 -0
- package/styles/components/number-input/number-input.css +37 -1
- package/styles/components/number-input/number-input.min.css +1 -1
- package/styles/components/number-input/number-input.scss +1 -2
- package/styles/components/progress-bar/progress-bar.css +1 -1
- package/styles/components/progress-bar/progress-bar.min.css +1 -1
- package/styles/components/radio-button/radio-button.css +15 -0
- package/styles/components/radio-button/radio-button.min.css +1 -1
- package/styles/components/radio-button/radio-button.scss +4 -0
- package/styles/components/radio-panel/radio-panel.css +17 -0
- package/styles/components/radio-panel/radio-panel.min.css +1 -1
- package/styles/components/search/search-with-submit-button.css +29 -43
- package/styles/components/search/search-with-submit-button.min.css +1 -1
- package/styles/components/search/search-with-submit-button.scss +9 -24
- package/styles/components/search/search.css +246 -125
- package/styles/components/search/search.min.css +1 -1
- package/styles/components/search/search.scss +98 -103
- package/styles/components/segmented-control/segmented-control.css +63 -2
- package/styles/components/segmented-control/segmented-control.min.css +1 -1
- package/styles/components/segmented-control/segmented-control.scss +6 -0
- package/styles/components/select/option.css +17 -2
- package/styles/components/select/option.min.css +1 -1
- package/styles/components/select/option.scss +6 -3
- package/styles/components/select/select.css +17 -0
- package/styles/components/select/select.min.css +1 -1
- package/styles/components/select/select.scss +7 -0
- package/styles/components/system-message/system-message.css +5 -25
- package/styles/components/system-message/system-message.min.css +1 -1
- package/styles/components/system-message/system-message.scss +3 -27
- package/styles/components/table/_table-row.scss +2 -2
- package/styles/components/table/table.css +2 -2
- package/styles/components/table/table.min.css +1 -1
- package/styles/components/tabs/tabs.css +2 -0
- package/styles/components/tabs/tabs.min.css +1 -1
- package/styles/components/tabs/tabs.scss +2 -0
- package/styles/components/tag/tag.css +4 -24
- package/styles/components/tag/tag.min.css +1 -1
- package/styles/components/tag/tag.scss +4 -28
- package/styles/components/text-area/text-area.css +25 -0
- package/styles/components/text-area/text-area.min.css +1 -1
- package/styles/components/text-input/text-input.css +25 -0
- package/styles/components/text-input/text-input.min.css +1 -1
- package/styles/components/toast/toast.css +12 -52
- package/styles/components/toast/toast.min.css +1 -1
- package/styles/components/toast/toast.scss +6 -60
- package/styles/components/toggle-switch/toggle-switch.css +12 -7
- package/styles/components/toggle-switch/toggle-switch.min.css +1 -1
- package/styles/components/toggle-switch/toggle-switch.scss +1 -11
- package/styles/components.css +726 -368
- package/styles/components.min.css +4 -2
- package/styles/components.scss +1 -0
- package/styles/jkl/_index.scss +1 -0
- package/styles/jkl/_ornaments.scss +8 -0
- package/styles/jkl/_states.scss +45 -0
- package/styles/jkl/_tokens.scss +4 -0
- package/styles/shared/input/shared-input-styles.scss +21 -0
- package/styles/theme/_color-mode.scss +62 -0
- package/styles/theme/_color-scheme.scss +60 -57
- package/styles/theme/_data-theme.scss +21 -0
- package/styles/theme/_index.scss +2 -0
- package/styles/theme/_tokens.scss +2 -2
- package/styles/theme/brands/dnb/_color-scheme.scss +60 -57
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ButtonHTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
import { WithDisabled, WithReadOnly } from '../../utilities/types.js';
|
|
2
3
|
import { InputGroupProps } from '../input-group/types.js';
|
|
3
|
-
export type SearchInputProps = Omit<InputGroupProps, "children" | "inline" | "label"> & InputHTMLAttributes<HTMLInputElement> & {
|
|
4
|
+
export type SearchInputProps = Omit<InputGroupProps, "children" | "inline" | "label"> & Omit<InputHTMLAttributes<HTMLInputElement>, "disabled" | "readOnly"> & WithDisabled & WithReadOnly & {
|
|
4
5
|
/**
|
|
5
6
|
* Label til søket. Bruk {@link LabelProps} for å vise den.
|
|
6
7
|
*/
|
|
@@ -5,7 +5,7 @@ export type OptionProps = Omit<ComponentPropsWithoutRef<"button">, "aria-selecte
|
|
|
5
5
|
selected?: boolean;
|
|
6
6
|
selectRef: RefObject<HTMLSelectElement>;
|
|
7
7
|
};
|
|
8
|
-
export declare const Option: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "
|
|
8
|
+
export declare const Option: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "role" | "aria-selected" | "children" | "type" | "value"> & ValuePair & {
|
|
9
9
|
multiple?: boolean;
|
|
10
10
|
selected?: boolean;
|
|
11
11
|
selectRef: RefObject<HTMLSelectElement>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
-
import { DataTestAutoId } from '../../utilities/types.js';
|
|
2
|
+
import { DataTestAutoId, WithDisabled } from '../../utilities/types.js';
|
|
3
3
|
import { ValuePair } from '../../utilities/valuePair.js';
|
|
4
4
|
import { InputGroupProps } from '../input-group/types.js';
|
|
5
|
-
export type SelectProps = Omit<InputGroupProps, "children" | "inline"> & DataTestAutoId & Omit<ComponentPropsWithoutRef<"select">, "size" | "children"> & {
|
|
5
|
+
export type SelectProps = Omit<InputGroupProps, "children" | "inline"> & DataTestAutoId & Omit<ComponentPropsWithoutRef<"select">, "size" | "children" | "disabled"> & WithDisabled & {
|
|
6
6
|
width?: string;
|
|
7
7
|
items: (string | ValuePair)[];
|
|
8
8
|
placeholder?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n type CSSProperties,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type KeyboardEvent,\n forwardRef,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useListNavigation } from \"../../hooks/index.js\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\nimport type { DataTestAutoId } from \"../../utilities/types.js\";\nimport { type ValuePair, getValuePair } from \"../../utilities/valuePair.js\";\nimport { Button } from \"../button/Button.js\";\nimport { Flex } from \"../flex/Flex.js\";\nimport { ArrowDownIcon, CloseIcon } from \"../icon/index.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport type { InputGroupProps } from \"../input-group/types.js\";\nimport { Search } from \"../search/Search.js\";\nimport { Text } from \"../typography/Text.js\";\nimport { Title } from \"../typography/Title.js\";\nimport { Option } from \"./Option.js\";\nimport { autofocus, getButtonText, getReactNodeText } from \"./utils.js\";\n\nexport type SelectProps = Omit<InputGroupProps, \"children\" | \"inline\"> &\n DataTestAutoId &\n Omit<ComponentPropsWithoutRef<\"select\">, \"size\" | \"children\"> & {\n width?: string;\n items: (string | ValuePair)[];\n placeholder?: string;\n } & (\n | {\n searchable: true;\n onSearch?: (searchTerm: string) => void;\n filterFunction?: (item: ValuePair, searchTerm: string) => boolean;\n }\n | {\n searchable?: false;\n onSearch?: never;\n filterFunction?: never;\n }\n );\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n function Select(props, externalRef) {\n const {\n label,\n errorLabel,\n helpLabel,\n labelProps,\n supportLabelProps,\n tooltip,\n description,\n style,\n className,\n id: idProp,\n items: rawItems,\n multiple = false,\n searchable = false,\n onSearch,\n filterFunction,\n placeholder,\n width,\n value,\n \"data-testautoid\": dataTestautoid,\n \"data-size\": size,\n ...elementProps\n } = props;\n\n const popoverRef = useRef<HTMLDivElement>(null);\n const selectRef = useRef<HTMLSelectElement>(null);\n const unifiedRef = mergeRefs(externalRef, selectRef);\n\n const baseId = `jkl-select-${useId()}`;\n const selectId = idProp ?? baseId;\n const popoverId = `${selectId}-popover`;\n\n const [filter, setFilter] = useState(\"\");\n const [selected, setSelected] = useState(() => new Set<string>());\n\n useListNavigation({ ref: popoverRef, disableTypeahead: searchable });\n\n const items = rawItems.map(getValuePair);\n const filteredItems =\n searchable && filter\n ? items.filter((item) =>\n filterFunction\n ? filterFunction(item, filter)\n : item.label\n .toLowerCase()\n .includes(filter.toLowerCase()),\n )\n : items;\n\n const showPlaceholder =\n selected.size === 0 ||\n (selected.size === 1 && placeholder && selected.has(\"\"));\n const placeholderText = placeholder || \"Ingen valgt\";\n const buttonText = getButtonText(selected, items, placeholderText);\n\n /**\n * Setter event-lyttere for å synkronisere verdier i det skjulte select-elementet med\n * visningen i vår komponent, samt nullstilling av filter når menyen lukkes.\n */\n // biome-ignore lint/correctness/useExhaustiveDependencies:\n useLayoutEffect(() => {\n const select = selectRef.current;\n const popover = popoverRef.current;\n if (!select) return;\n\n const syncSelected = () => {\n setSelected(\n new Set(Array.from(select.selectedOptions, (o) => o.value)),\n );\n };\n\n const resetFilterOnClose = (event: ToggleEvent) => {\n if (event.newState === \"closed\") setFilter(\"\");\n };\n\n syncSelected();\n popover?.addEventListener(\"toggle\", resetFilterOnClose);\n select.addEventListener(\"change\", syncSelected);\n\n return () => {\n select.removeEventListener(\"change\", syncSelected);\n popover?.removeEventListener(\"toggle\", resetFilterOnClose);\n };\n }, [multiple, rawItems]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: Oppdaterer visning når value settes\n useLayoutEffect(() => {\n setSelected(\n new Set(\n Array.from(\n selectRef.current?.selectedOptions ?? [],\n (o) => o.value,\n ),\n ),\n );\n }, [value, elementProps.defaultValue]);\n\n /**\n * Sørger for at menyen kan åpnes med piltastene slik som i native select\n */\n const openWithArrows = (event: KeyboardEvent) => {\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n event.preventDefault();\n popoverRef.current?.showPopover?.();\n }\n };\n\n /**\n * Fyrer av focus- eller blur-event på det skjulte select-elementet når\n * fokus går inn eller ut av komponenten, slik at f.eks. react-hook-form\n * oppdaterer sin state riktig.\n */\n const syncFocus = (event: FocusEvent) => {\n const sel = selectRef.current;\n if (!popoverRef.current?.contains(event.relatedTarget)) {\n if (!sel) return;\n if ([\"focus\", \"focusin\"].includes(event.type)) {\n sel.dispatchEvent(new Event(\"focusin\", { bubbles: true }));\n sel.dispatchEvent(new Event(\"focus\", { bubbles: true }));\n } else if ([\"blur\", \"focusout\"].includes(event.type)) {\n sel.dispatchEvent(new Event(\"focusout\", { bubbles: true }));\n sel.dispatchEvent(new Event(\"blur\", { bubbles: true }));\n }\n }\n };\n\n return (\n <InputGroup\n id={selectId}\n label={label}\n errorLabel={errorLabel}\n helpLabel={helpLabel}\n labelProps={labelProps}\n supportLabelProps={supportLabelProps}\n tooltip={tooltip}\n description={description}\n style={style}\n data-testautoid={dataTestautoid}\n data-size={size}\n className={clsx(\"jkl-select\", className)}\n render={(inputProps) => (\n <>\n <button\n aria-label={`${showPlaceholder ? placeholderText : buttonText}, ${getReactNodeText(label)}`}\n className=\"jkl-select__button\"\n data-testid=\"jkl-select__button\"\n disabled={elementProps.disabled}\n type=\"button\"\n // @ts-ignore\n popovertarget={popoverId}\n style={{ \"--width\": width } as CSSProperties}\n onKeyDown={openWithArrows}\n onFocus={syncFocus}\n onBlur={syncFocus}\n {...inputProps}\n >\n {showPlaceholder ? placeholderText : buttonText}\n <ArrowDownIcon />\n </button>\n <Flex\n direction=\"column\"\n gap=\"16\"\n ref={popoverRef}\n // @ts-ignore\n popover=\"auto\"\n id={popoverId}\n className=\"jkl-select__popover\"\n aria-label={getReactNodeText(label)}\n >\n <Flex\n as=\"header\"\n alignItems=\"start\"\n justifyContent=\"space-between\"\n gap=\"8\"\n >\n <Title\n size=\"m\"\n as=\"h3\"\n id={`${selectId}-title`}\n >\n {label}\n </Title>\n <Button\n type=\"button\"\n variant=\"ghost\"\n icon={<CloseIcon />}\n aria-label=\"Lukk\"\n // @ts-ignore\n popovertarget={popoverId}\n popovertargetaction=\"hide\"\n />\n </Flex>\n {searchable && (\n <Search\n value={filter}\n onChange={(e) => {\n setFilter(e.target.value);\n onSearch?.(e.target.value);\n }}\n ref={autofocus(searchable)}\n autoComplete=\"off\"\n labelProps={{ srOnly: true }}\n label=\"Søk\"\n placeholder=\"Søk...\"\n width=\"100%\"\n className=\"jkl-spacing-8--bottom\"\n />\n )}\n <Flex\n direction=\"column\"\n gap=\"8\"\n // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n role=\"listbox\"\n aria-multiselectable={multiple}\n aria-labelledby={`${selectId}-title`}\n >\n {filteredItems.map((pair, index) => (\n <Option\n {...pair}\n key={pair.value}\n selected={selected.has(pair.value)}\n multiple={multiple}\n selectRef={selectRef}\n // @ts-ignore\n popovertarget={\n multiple ? undefined : popoverId\n }\n popovertargetaction={\n multiple ? undefined : \"hide\"\n }\n ref={autofocus(() => {\n if (searchable) return false;\n if (showPlaceholder)\n return index === 0;\n return (\n selected.has(pair.value) &&\n filteredItems.findIndex((p) =>\n selected.has(p.value),\n ) === index\n );\n })}\n />\n ))}\n {searchable && !filteredItems.length && (\n <Text short>Ingen treff</Text>\n )}\n </Flex>\n {multiple && (\n <Button\n type=\"button\"\n variant=\"primary\"\n // @ts-ignore\n popovertarget={popoverId}\n popovertargetaction=\"hide\"\n >\n Bekreft\n </Button>\n )}\n </Flex>\n <select\n defaultValue={\n !multiple && value === undefined && placeholder\n ? \"\"\n : undefined\n }\n {...elementProps}\n tabIndex={-1}\n value={value}\n multiple={multiple}\n ref={unifiedRef}\n aria-labelledby={inputProps.id}\n >\n {!multiple && placeholder && (\n <option value=\"\" disabled>\n {placeholder}\n </option>\n )}\n {items.map((item) => (\n <option key={item.value} value={item.value}>\n {item.label}\n </option>\n ))}\n </select>\n </>\n )}\n />\n );\n },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["Select","forwardRef","props","externalRef","label","errorLabel","helpLabel","labelProps","supportLabelProps","tooltip","description","style","className","id","idProp","items","rawItems","multiple","searchable","onSearch","filterFunction","placeholder","width","value","dataTestautoid","size","elementProps","popoverRef","useRef","selectRef","unifiedRef","mergeRefs","baseId","useId","selectId","popoverId","filter","setFilter","useState","selected","setSelected","Set","useListNavigation","ref","disableTypeahead","map","getValuePair","filteredItems","item","toLowerCase","includes","showPlaceholder","has","placeholderText","buttonText","getButtonText","useLayoutEffect","select","current","popover","syncSelected","Array","from","selectedOptions","o","resetFilterOnClose","event","newState","addEventListener","removeEventListener","defaultValue","openWithArrows","key","preventDefault","showPopover","syncFocus","sel","contains","relatedTarget","type","dispatchEvent","Event","bubbles","jsx","InputGroup","clsx","render","inputProps","jsxs","Fragment","children","getReactNodeText","disabled","popovertarget","onKeyDown","onFocus","onBlur","ArrowDownIcon","Flex","direction","gap","as","alignItems","justifyContent","Title","Button","variant","icon","CloseIcon","popovertargetaction","Search","onChange","e","target","autofocus","autoComplete","srOnly","role","pair","index","createElement","Option","findIndex","p","length","Text","short","tabIndex","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n type CSSProperties,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type KeyboardEvent,\n forwardRef,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useListNavigation } from \"../../hooks/index.js\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\nimport type { DataTestAutoId, WithDisabled } from \"../../utilities/types.js\";\nimport { type ValuePair, getValuePair } from \"../../utilities/valuePair.js\";\nimport { Button } from \"../button/Button.js\";\nimport { Flex } from \"../flex/Flex.js\";\nimport { ArrowDownIcon, CloseIcon } from \"../icon/index.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport type { InputGroupProps } from \"../input-group/types.js\";\nimport { Search } from \"../search/Search.js\";\nimport { Text } from \"../typography/Text.js\";\nimport { Title } from \"../typography/Title.js\";\nimport { Option } from \"./Option.js\";\nimport { autofocus, getButtonText, getReactNodeText } from \"./utils.js\";\n\nexport type SelectProps = Omit<InputGroupProps, \"children\" | \"inline\"> &\n DataTestAutoId &\n Omit<ComponentPropsWithoutRef<\"select\">, \"size\" | \"children\" | \"disabled\"> &\n WithDisabled & {\n width?: string;\n items: (string | ValuePair)[];\n placeholder?: string;\n } & (\n | {\n searchable: true;\n onSearch?: (searchTerm: string) => void;\n filterFunction?: (item: ValuePair, searchTerm: string) => boolean;\n }\n | {\n searchable?: false;\n onSearch?: never;\n filterFunction?: never;\n }\n );\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n function Select(props, externalRef) {\n const {\n label,\n errorLabel,\n helpLabel,\n labelProps,\n supportLabelProps,\n tooltip,\n description,\n style,\n className,\n id: idProp,\n items: rawItems,\n multiple = false,\n searchable = false,\n onSearch,\n filterFunction,\n placeholder,\n width,\n value,\n \"data-testautoid\": dataTestautoid,\n \"data-size\": size,\n ...elementProps\n } = props;\n\n const popoverRef = useRef<HTMLDivElement>(null);\n const selectRef = useRef<HTMLSelectElement>(null);\n const unifiedRef = mergeRefs(externalRef, selectRef);\n\n const baseId = `jkl-select-${useId()}`;\n const selectId = idProp ?? baseId;\n const popoverId = `${selectId}-popover`;\n\n const [filter, setFilter] = useState(\"\");\n const [selected, setSelected] = useState(() => new Set<string>());\n\n useListNavigation({ ref: popoverRef, disableTypeahead: searchable });\n\n const items = rawItems.map(getValuePair);\n const filteredItems =\n searchable && filter\n ? items.filter((item) =>\n filterFunction\n ? filterFunction(item, filter)\n : item.label\n .toLowerCase()\n .includes(filter.toLowerCase()),\n )\n : items;\n\n const showPlaceholder =\n selected.size === 0 ||\n (selected.size === 1 && placeholder && selected.has(\"\"));\n const placeholderText = placeholder || \"Ingen valgt\";\n const buttonText = getButtonText(selected, items, placeholderText);\n\n /**\n * Setter event-lyttere for å synkronisere verdier i det skjulte select-elementet med\n * visningen i vår komponent, samt nullstilling av filter når menyen lukkes.\n */\n // biome-ignore lint/correctness/useExhaustiveDependencies:\n useLayoutEffect(() => {\n const select = selectRef.current;\n const popover = popoverRef.current;\n if (!select) return;\n\n const syncSelected = () => {\n setSelected(\n new Set(Array.from(select.selectedOptions, (o) => o.value)),\n );\n };\n\n const resetFilterOnClose = (event: ToggleEvent) => {\n if (event.newState === \"closed\") setFilter(\"\");\n };\n\n syncSelected();\n popover?.addEventListener(\"toggle\", resetFilterOnClose);\n select.addEventListener(\"change\", syncSelected);\n\n return () => {\n select.removeEventListener(\"change\", syncSelected);\n popover?.removeEventListener(\"toggle\", resetFilterOnClose);\n };\n }, [multiple, rawItems]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: Oppdaterer visning når value settes\n useLayoutEffect(() => {\n setSelected(\n new Set(\n Array.from(\n selectRef.current?.selectedOptions ?? [],\n (o) => o.value,\n ),\n ),\n );\n }, [value, elementProps.defaultValue]);\n\n /**\n * Sørger for at menyen kan åpnes med piltastene slik som i native select\n */\n const openWithArrows = (event: KeyboardEvent) => {\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n event.preventDefault();\n popoverRef.current?.showPopover?.();\n }\n };\n\n /**\n * Fyrer av focus- eller blur-event på det skjulte select-elementet når\n * fokus går inn eller ut av komponenten, slik at f.eks. react-hook-form\n * oppdaterer sin state riktig.\n */\n const syncFocus = (event: FocusEvent) => {\n const sel = selectRef.current;\n if (!popoverRef.current?.contains(event.relatedTarget)) {\n if (!sel) return;\n if ([\"focus\", \"focusin\"].includes(event.type)) {\n sel.dispatchEvent(new Event(\"focusin\", { bubbles: true }));\n sel.dispatchEvent(new Event(\"focus\", { bubbles: true }));\n } else if ([\"blur\", \"focusout\"].includes(event.type)) {\n sel.dispatchEvent(new Event(\"focusout\", { bubbles: true }));\n sel.dispatchEvent(new Event(\"blur\", { bubbles: true }));\n }\n }\n };\n\n return (\n <InputGroup\n id={selectId}\n label={label}\n errorLabel={errorLabel}\n helpLabel={helpLabel}\n labelProps={labelProps}\n supportLabelProps={supportLabelProps}\n tooltip={tooltip}\n description={description}\n style={style}\n data-testautoid={dataTestautoid}\n data-size={size}\n className={clsx(\"jkl-select\", className)}\n render={(inputProps) => (\n <>\n <button\n aria-label={`${showPlaceholder ? placeholderText : buttonText}, ${getReactNodeText(label)}`}\n className=\"jkl-select__button\"\n data-testid=\"jkl-select__button\"\n disabled={elementProps.disabled}\n type=\"button\"\n // @ts-ignore\n popovertarget={popoverId}\n style={{ \"--width\": width } as CSSProperties}\n onKeyDown={openWithArrows}\n onFocus={syncFocus}\n onBlur={syncFocus}\n {...inputProps}\n >\n {showPlaceholder ? placeholderText : buttonText}\n <ArrowDownIcon />\n </button>\n <Flex\n direction=\"column\"\n gap=\"16\"\n ref={popoverRef}\n // @ts-ignore\n popover=\"auto\"\n id={popoverId}\n className=\"jkl-select__popover\"\n aria-label={getReactNodeText(label)}\n >\n <Flex\n as=\"header\"\n alignItems=\"start\"\n justifyContent=\"space-between\"\n gap=\"8\"\n >\n <Title\n size=\"m\"\n as=\"h3\"\n id={`${selectId}-title`}\n >\n {label}\n </Title>\n <Button\n type=\"button\"\n variant=\"ghost\"\n icon={<CloseIcon />}\n aria-label=\"Lukk\"\n // @ts-ignore\n popovertarget={popoverId}\n popovertargetaction=\"hide\"\n />\n </Flex>\n {searchable && (\n <Search\n value={filter}\n onChange={(e) => {\n setFilter(e.target.value);\n onSearch?.(e.target.value);\n }}\n ref={autofocus(searchable)}\n autoComplete=\"off\"\n labelProps={{ srOnly: true }}\n label=\"Søk\"\n placeholder=\"Søk...\"\n width=\"100%\"\n className=\"jkl-spacing-8--bottom\"\n />\n )}\n <Flex\n direction=\"column\"\n gap=\"8\"\n // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n role=\"listbox\"\n aria-multiselectable={multiple}\n aria-labelledby={`${selectId}-title`}\n >\n {filteredItems.map((pair, index) => (\n <Option\n {...pair}\n key={pair.value}\n selected={selected.has(pair.value)}\n multiple={multiple}\n selectRef={selectRef}\n // @ts-ignore\n popovertarget={\n multiple ? undefined : popoverId\n }\n popovertargetaction={\n multiple ? undefined : \"hide\"\n }\n ref={autofocus(() => {\n if (searchable) return false;\n if (showPlaceholder)\n return index === 0;\n return (\n selected.has(pair.value) &&\n filteredItems.findIndex((p) =>\n selected.has(p.value),\n ) === index\n );\n })}\n />\n ))}\n {searchable && !filteredItems.length && (\n <Text short>Ingen treff</Text>\n )}\n </Flex>\n {multiple && (\n <Button\n type=\"button\"\n variant=\"primary\"\n // @ts-ignore\n popovertarget={popoverId}\n popovertargetaction=\"hide\"\n >\n Bekreft\n </Button>\n )}\n </Flex>\n <select\n defaultValue={\n !multiple && value === undefined && placeholder\n ? \"\"\n : undefined\n }\n {...elementProps}\n tabIndex={-1}\n value={value}\n multiple={multiple}\n ref={unifiedRef}\n aria-labelledby={inputProps.id}\n >\n {!multiple && placeholder && (\n <option value=\"\" disabled>\n {placeholder}\n </option>\n )}\n {items.map((item) => (\n <option key={item.value} value={item.value}>\n {item.label}\n </option>\n ))}\n </select>\n </>\n )}\n />\n );\n },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["Select","forwardRef","props","externalRef","label","errorLabel","helpLabel","labelProps","supportLabelProps","tooltip","description","style","className","id","idProp","items","rawItems","multiple","searchable","onSearch","filterFunction","placeholder","width","value","dataTestautoid","size","elementProps","popoverRef","useRef","selectRef","unifiedRef","mergeRefs","baseId","useId","selectId","popoverId","filter","setFilter","useState","selected","setSelected","Set","useListNavigation","ref","disableTypeahead","map","getValuePair","filteredItems","item","toLowerCase","includes","showPlaceholder","has","placeholderText","buttonText","getButtonText","useLayoutEffect","select","current","popover","syncSelected","Array","from","selectedOptions","o","resetFilterOnClose","event","newState","addEventListener","removeEventListener","defaultValue","openWithArrows","key","preventDefault","showPopover","syncFocus","sel","contains","relatedTarget","type","dispatchEvent","Event","bubbles","jsx","InputGroup","clsx","render","inputProps","jsxs","Fragment","children","getReactNodeText","disabled","popovertarget","onKeyDown","onFocus","onBlur","ArrowDownIcon","Flex","direction","gap","as","alignItems","justifyContent","Title","Button","variant","icon","CloseIcon","popovertargetaction","Search","onChange","e","target","autofocus","autoComplete","srOnly","role","pair","index","createElement","Option","findIndex","p","length","Text","short","tabIndex","displayName"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as s,jsxs as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import"react";import{useId as t}from"../../hooks/useId/useId.js";import{DismissButton as m}from"../message/DismissButton.js";import{MessageIcon as i}from"./common/MessageIcon.js";function n(n){return({id:
|
|
1
|
+
import{jsx as s,jsxs as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import"react";import{useId as t}from"../../hooks/useId/useId.js";import{DismissButton as m}from"../message/DismissButton.js";import{MessageIcon as i}from"./common/MessageIcon.js";function n(n){return({id:d,className:o,maxContentWidth:l,paddingLeft:r,role:c="status",dismissed:g,dismissAction:y,children:u,...j})=>{const k=t(d||"jkl-system-message",{generateSuffix:!d});return s("div",{...j,role:c,id:k,className:a("jkl-system-message",o,{"jkl-system-message--dismissed":g}),"data-color":n,"data-testid":"jkl-system-message",children:e("div",{className:"jkl-system-message__content","data-testid":"system-message-content",style:{maxWidth:l,paddingLeft:r},children:[s(i,{variant:n||"info"}),s("span",{className:"jkl-system-message__message",children:u}),y?.handleDismiss&&s(m,{"aria-controls":k,className:"jkl-system-message__dismiss-button",label:y.buttonTitle||"Lukk",onClick:y.handleDismiss})]})})}}const d=({id:n,className:d,maxContentWidth:o,paddingLeft:l,role:r="status",dismissed:c,variant:g="info",dismissAction:y,children:u,...j})=>{const k=t(n||"jkl-system-message",{generateSuffix:!n});return s("div",{...j,role:r,id:k,className:a("jkl-system-message",d,{"jkl-system-message--dismissed":c}),"data-color":g,"data-testid":"jkl-system-message",children:e("div",{className:"jkl-system-message__content","data-testid":"system-message-content",style:{maxWidth:o,paddingLeft:l},children:[s(i,{variant:g}),s("span",{className:"jkl-system-message__message",children:u}),y?.handleDismiss&&s(m,{"aria-controls":k,className:"jkl-system-message__dismiss-button",label:y.buttonTitle||"Lukk",onClick:y.handleDismiss})]})})},o=n("info");o.displayName="InfoSystemMessage";const l=n("error");l.displayName="ErrorSystemMessage";const r=n("warning");r.displayName="WarningSystemMessage";const c=n("success");c.displayName="SuccessSystemMessage";export{l as ErrorSystemMessage,o as InfoSystemMessage,c as SuccessSystemMessage,d as SystemMessage,r as WarningSystemMessage};
|
|
2
2
|
//# sourceMappingURL=SystemMessage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SystemMessage.js","sources":["../../../../src/components/system-message/SystemMessage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { DismissButton } from \"../message/DismissButton.js\";\nimport { MessageIcon } from \"./common/MessageIcon.js\";\nimport type { SystemMessageProps } from \"./types.js\";\n\nfunction systemFactory(\n variant: SystemMessageProps[\"variant\"],\n): React.FC<SystemMessageProps> {\n const SystemMessage: React.FC<SystemMessageProps> = ({\n id,\n className,\n maxContentWidth,\n paddingLeft,\n role = \"status\",\n dismissed,\n dismissAction,\n children,\n ...rest\n }) => {\n const systemId = useId(id || \"jkl-system-message\", {\n generateSuffix: !id,\n });\n\n return (\n <div\n
|
|
1
|
+
{"version":3,"file":"SystemMessage.js","sources":["../../../../src/components/system-message/SystemMessage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { DismissButton } from \"../message/DismissButton.js\";\nimport { MessageIcon } from \"./common/MessageIcon.js\";\nimport type { SystemMessageProps } from \"./types.js\";\n\nfunction systemFactory(\n variant: SystemMessageProps[\"variant\"],\n): React.FC<SystemMessageProps> {\n const SystemMessage: React.FC<SystemMessageProps> = ({\n id,\n className,\n maxContentWidth,\n paddingLeft,\n role = \"status\",\n dismissed,\n dismissAction,\n children,\n ...rest\n }) => {\n const systemId = useId(id || \"jkl-system-message\", {\n generateSuffix: !id,\n });\n\n return (\n <div\n {...rest}\n role={role}\n id={systemId}\n className={clsx(\"jkl-system-message\", className, {\n \"jkl-system-message--dismissed\": dismissed,\n })}\n data-color={variant}\n data-testid=\"jkl-system-message\"\n >\n <div\n className=\"jkl-system-message__content\"\n data-testid=\"system-message-content\"\n style={{\n maxWidth: maxContentWidth,\n paddingLeft,\n }}\n >\n <MessageIcon variant={variant || \"info\"} />\n <span className=\"jkl-system-message__message\">\n {children}\n </span>\n {dismissAction?.handleDismiss && (\n <DismissButton\n aria-controls={systemId}\n className=\"jkl-system-message__dismiss-button\"\n label={dismissAction.buttonTitle || \"Lukk\"}\n onClick={dismissAction.handleDismiss}\n />\n )}\n </div>\n </div>\n );\n };\n return SystemMessage;\n}\n\nexport const SystemMessage: React.FC<SystemMessageProps> = ({\n id,\n className,\n maxContentWidth,\n paddingLeft,\n role = \"status\",\n dismissed,\n variant = \"info\",\n dismissAction,\n children,\n ...rest\n}) => {\n const systemId = useId(id || \"jkl-system-message\", {\n generateSuffix: !id,\n });\n\n return (\n <div\n {...rest}\n role={role}\n id={systemId}\n className={clsx(\"jkl-system-message\", className, {\n \"jkl-system-message--dismissed\": dismissed,\n })}\n data-color={variant}\n data-testid=\"jkl-system-message\"\n >\n <div\n className=\"jkl-system-message__content\"\n data-testid=\"system-message-content\"\n style={{\n maxWidth: maxContentWidth,\n paddingLeft,\n }}\n >\n <MessageIcon variant={variant} />\n <span className=\"jkl-system-message__message\">{children}</span>\n {dismissAction?.handleDismiss && (\n <DismissButton\n aria-controls={systemId}\n className=\"jkl-system-message__dismiss-button\"\n label={dismissAction.buttonTitle || \"Lukk\"}\n onClick={dismissAction.handleDismiss}\n />\n )}\n </div>\n </div>\n );\n};\n\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"info\"\n */\nexport const InfoSystemMessage = systemFactory(\"info\");\nInfoSystemMessage.displayName = \"InfoSystemMessage\";\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"error\"\n */\nexport const ErrorSystemMessage = systemFactory(\"error\");\nErrorSystemMessage.displayName = \"ErrorSystemMessage\";\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"warning\"\n */\nexport const WarningSystemMessage = systemFactory(\"warning\");\nWarningSystemMessage.displayName = \"WarningSystemMessage\";\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"success\"\n */\nexport const SuccessSystemMessage = systemFactory(\"success\");\nSuccessSystemMessage.displayName = \"SuccessSystemMessage\";\n"],"names":["systemFactory","variant","id","className","maxContentWidth","paddingLeft","role","dismissed","dismissAction","children","rest","systemId","useId","generateSuffix","jsx","clsx","jsxs","style","maxWidth","MessageIcon","handleDismiss","DismissButton","label","buttonTitle","onClick","SystemMessage","InfoSystemMessage","displayName","ErrorSystemMessage","WarningSystemMessage","SuccessSystemMessage"],"mappings":"mRAOA,SAASA,EACLC,GAoDA,MAlDoD,EAChDC,GAAAA,EACAC,UAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,MAEH,MAAMC,EAAWC,EAAMV,GAAM,qBAAsB,CAC/CW,gBAAiBX,IAGrB,OACIY,EAAC,MAAA,IACOJ,EACJJ,KAAAA,EACAJ,GAAIS,EACJR,UAAWY,EAAK,qBAAsBZ,EAAW,CAC7C,gCAAiCI,IAErC,aAAYN,EACZ,cAAY,qBAEZQ,SAAAO,EAAC,MAAA,CACGb,UAAU,8BACV,cAAY,yBACZc,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,EAACK,EAAA,CAAYlB,QAASA,GAAW,SACjCa,EAAC,OAAA,CAAKX,UAAU,8BACXM,SAAAA,IAEJD,GAAeY,eACZN,EAACO,EAAA,CACG,gBAAeV,EACfR,UAAU,qCACVmB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY,qBAQnD,CAEO,MAAMK,EAA8C,EACvDvB,GAAAA,EACAC,UAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAN,QAAAA,EAAU,OACVO,cAAAA,EACAC,SAAAA,KACGC,MAEH,MAAMC,EAAWC,EAAMV,GAAM,qBAAsB,CAC/CW,gBAAiBX,IAGrB,OACIY,EAAC,MAAA,IACOJ,EACJJ,KAAAA,EACAJ,GAAIS,EACJR,UAAWY,EAAK,qBAAsBZ,EAAW,CAC7C,gCAAiCI,IAErC,aAAYN,EACZ,cAAY,qBAEZQ,SAAAO,EAAC,MAAA,CACGb,UAAU,8BACV,cAAY,yBACZc,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,EAACK,GAAYlB,QAAAA,IACba,EAAC,OAAA,CAAKX,UAAU,8BAA+BM,SAAAA,IAC9CD,GAAeY,eACZN,EAACO,EAAA,CACG,gBAAeV,EACfR,UAAU,qCACVmB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY,sBAWlCM,EAAoB1B,EAAc,QAC/C0B,EAAkBC,YAAc,oBAIzB,MAAMC,EAAqB5B,EAAc,SAChD4B,EAAmBD,YAAc,qBAI1B,MAAME,EAAuB7B,EAAc,WAClD6B,EAAqBF,YAAc,uBAI5B,MAAMG,EAAuB9B,EAAc,WAClD8B,EAAqBH,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as a}from"react/jsx-runtime";import{c as r}from"../../../clsx-BeLtu-UY.js";import"react";function s(s){const n=({className:n,children:e
|
|
1
|
+
import{jsx as a}from"react/jsx-runtime";import{c as r}from"../../../clsx-BeLtu-UY.js";import"react";function s(s){const n=({className:n,children:c,...e})=>a("span",{...e,className:r("jkl-tag",n),"data-color":s,children:c});return n.displayName=function(a){switch(a){case"info":return"InfoTag";case"error":return"ErrorTag";case"warning":return"WarningTag";case"success":return"SuccessTag";default:return"Tag"}}(s),n}const n=({className:s,variant:n="neutral",children:c,...e})=>a("span",{...e,className:r("jkl-tag",s),"data-color":n,children:c}),c=s("info"),e=s("error"),t=s("warning"),o=s("success");export{e as ErrorTag,c as InfoTag,o as SuccessTag,n as Tag,t as WarningTag};
|
|
2
2
|
//# sourceMappingURL=Tag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport type { TagProps } from \"./types.js\";\n\nfunction getDisplayName(variant?: TagProps[\"variant\"]) {\n switch (variant) {\n case \"info\":\n return \"InfoTag\";\n case \"error\":\n return \"ErrorTag\";\n case \"warning\":\n return \"WarningTag\";\n case \"success\":\n return \"SuccessTag\";\n default:\n return \"Tag\";\n }\n}\n\n// Vil fjernes etterhvert :-)\nfunction tagFactory(variant?: TagProps[\"variant\"]) {\n const Tag: FC<TagProps> = ({ className, children, ...rest }) => (\n <span\n className={clsx(\
|
|
1
|
+
{"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport type { TagProps } from \"./types.js\";\n\nfunction getDisplayName(variant?: TagProps[\"variant\"]) {\n switch (variant) {\n case \"info\":\n return \"InfoTag\";\n case \"error\":\n return \"ErrorTag\";\n case \"warning\":\n return \"WarningTag\";\n case \"success\":\n return \"SuccessTag\";\n default:\n return \"Tag\";\n }\n}\n\n// Vil fjernes etterhvert :-)\nfunction tagFactory(variant?: TagProps[\"variant\"]) {\n const Tag: FC<TagProps> = ({ className, children, ...rest }) => (\n <span\n {...rest}\n className={clsx(\"jkl-tag\", className)}\n data-color={variant}\n >\n {children}\n </span>\n );\n Tag.displayName = getDisplayName(variant);\n return Tag;\n}\n\nexport const Tag = ({\n className,\n variant = \"neutral\",\n children,\n ...rest\n}: TagProps) => (\n <span {...rest} className={clsx(\"jkl-tag\", className)} data-color={variant}>\n {children}\n </span>\n);\n\n/**\n * @deprecated bruk {@link Tag} med variant=\"info\"\n */\nexport const InfoTag = tagFactory(\"info\");\n/**\n * @deprecated bruk {@link Tag} med variant=\"error\"\n */\nexport const ErrorTag = tagFactory(\"error\");\n/**\n * @deprecated bruk {@link Tag} med variant=\"warning\"\n */\nexport const WarningTag = tagFactory(\"warning\");\n/**\n * @deprecated bruk {@link Tag} med variant=\"success\"\n */\nexport const SuccessTag = tagFactory(\"success\");\n"],"names":["tagFactory","variant","Tag","className","children","rest","jsx","clsx","displayName","getDisplayName","InfoTag","ErrorTag","WarningTag","SuccessTag"],"mappings":"oGAoBA,SAASA,EAAWC,GAChB,MAAMC,EAAoB,EAAGC,UAAAA,EAAWC,SAAAA,KAAaC,KACjDC,EAAC,OAAA,IACOD,EACJF,UAAWI,EAAK,UAAWJ,GAC3B,aAAYF,EAEXG,SAAAA,IAGTF,OAAAA,EAAIM,YA1BR,SAAwBP,GACpB,OAAQA,GACJ,IAAK,OACD,MAAO,UACX,IAAK,QACD,MAAO,WACX,IAAK,UACD,MAAO,aACX,IAAK,UACD,MAAO,aACX,QACI,MAAO,MAEnB,CAasBQ,CAAeR,GAC1BC,CACX,CAEO,MAAMA,EAAM,EACfC,UAAAA,EACAF,QAAAA,EAAU,UACVG,SAAAA,KACGC,KAEHC,EAAC,OAAA,IAASD,EAAMF,UAAWI,EAAK,UAAWJ,GAAY,aAAYF,EAC9DG,SAAAA,IAOIM,EAAUV,EAAW,QAIrBW,EAAWX,EAAW,SAItBY,EAAaZ,EAAW,WAIxBa,EAAab,EAAW"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { TextareaHTMLAttributes } from 'react';
|
|
2
|
+
import { WithDisabled, WithReadOnly } from '../../utilities/types.js';
|
|
2
3
|
import { InputGroupProps } from '../input-group/types.js';
|
|
3
4
|
export type CounterStrategy = "characters" | "bytes";
|
|
4
5
|
export type Counter = {
|
|
@@ -32,7 +33,7 @@ export type Counter = {
|
|
|
32
33
|
*/
|
|
33
34
|
hideProgress?: boolean;
|
|
34
35
|
};
|
|
35
|
-
export interface BaseTextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "children"
|
|
36
|
+
export interface BaseTextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "children" | "disabled" | "readOnly">, WithDisabled, WithReadOnly {
|
|
36
37
|
/**
|
|
37
38
|
* Viser en teller i tekstfeltet når det har fokus.
|
|
38
39
|
*/
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { HTMLProps, InputHTMLAttributes, MouseEventHandler, ReactNode } from 'react';
|
|
2
|
+
import { WithDisabled, WithReadOnly } from '../../utilities/types.js';
|
|
2
3
|
import { IconProps } from '../icon/types.js';
|
|
3
4
|
import { InputGroupProps } from '../input-group/types.js';
|
|
4
|
-
export interface BaseTextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "maxLength"
|
|
5
|
+
export interface BaseTextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "maxLength" | "disabled" | "readOnly">, WithDisabled, WithReadOnly {
|
|
5
6
|
/**
|
|
6
7
|
* Brukes til inputfelter hvor det brukes maskering, for formatering av store tall. Brukes typisk bare til valuta.
|
|
7
8
|
* @default "left"
|
|
@@ -37,7 +38,7 @@ export interface TextInputProps extends Omit<InputGroupProps, "children">, BaseT
|
|
|
37
38
|
inline?: boolean;
|
|
38
39
|
inputClassName?: string;
|
|
39
40
|
}
|
|
40
|
-
interface ActionBaseProps extends
|
|
41
|
+
interface ActionBaseProps extends Omit<HTMLProps<HTMLButtonElement>, "disabled"> {
|
|
41
42
|
icon: React.ReactElement<IconProps>;
|
|
42
43
|
label: string;
|
|
43
44
|
buttonRef?: React.Ref<HTMLButtonElement>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useToast as s}from"@react-aria/toast";import{c as a}from"../../../clsx-BeLtu-UY.js";import{useRef as n,useState as e,useEffect as r}from"react";import{useBrowserPreferences as i}from"../../hooks/useBrowserPreferences/useBrowserPreferences.js";import{Button as c}from"../button/Button.js";import{Countdown as l}from"../countdown/Countdown.js";import{Flex as m}from"../flex/Flex.js";import{IconButton as u}from"../icon-button/IconButton.js";import{CloseIcon as f}from"../icon/icons/CloseIcon.js";import{ErrorIcon as
|
|
1
|
+
import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useToast as s}from"@react-aria/toast";import{c as a}from"../../../clsx-BeLtu-UY.js";import{useRef as n,useState as e,useEffect as r}from"react";import{useBrowserPreferences as i}from"../../hooks/useBrowserPreferences/useBrowserPreferences.js";import{Button as c}from"../button/Button.js";import{Countdown as l}from"../countdown/Countdown.js";import{Flex as m}from"../flex/Flex.js";import{IconButton as u}from"../icon-button/IconButton.js";import{CloseIcon as f}from"../icon/icons/CloseIcon.js";import{ErrorIcon as p}from"../icon/icons/ErrorIcon.js";import{InfoIcon as d}from"../icon/icons/InfoIcon.js";import{SuccessIcon as j}from"../icon/icons/SuccessIcon.js";import{WarningIcon as k}from"../icon/icons/WarningIcon.js";const _=t=>{switch(t){case"error":return o(p,{className:"jkl-toast__icon"});case"info":return o(d,{className:"jkl-toast__icon"});case"success":return o(j,{className:"jkl-toast__icon"});case"warning":return o(k,{className:"jkl-toast__icon"});default:return null}};function I({className:p,state:d,...j}){const k=n(null),{toastProps:I,titleProps:g}=s(j,d,k),[x,N]=e(!1),v="string"==typeof j.toast.content?j.toast.content:j.toast.content.content,h="string"==typeof j.toast.content?void 0:j.toast.content.title,w=null==j.toast.timer?.timerId,{prefersReducedMotion:y}=i();return r(()=>{const t=setTimeout(()=>{N(!0)},0);return()=>clearTimeout(t)},[]),r(()=>{y&&"exiting"===j.toast.animation&&d.remove(j.toast.key)},[y,j.toast.animation,j.toast.key,d]),t("div",{...I,ref:k,className:a("jkl-toast",p),"data-color":j.toast.variant,"data-animation":j.toast.animation,onAnimationEnd:()=>{"exiting"===j.toast.animation&&d.remove(j.toast.key)},children:[j.toast.timeout?o(l,{className:"jkl-toast__progress",from:j.toast.timeout,isPaused:w,onAnimationEnd:t=>{t.stopPropagation()}}):null,t(m,{alignItems:"start",gap:"xs",children:[_(j.toast.variant),t(m,{...g,direction:"column",gap:"xs",className:"jkl-toast__content","aria-live":"assertive",children:[h&&o("p",{className:"jkl-toast__title",children:x&&h}),o("p",{className:"jkl-toast__message",children:x&&v}),j.toast.action&&o("div",{className:"jkl-toast__action",children:o(c,{variant:"secondary",onClick:j.toast.action.onClick,children:j.toast.action.label})})]}),o(u,{"aria-label":"Lukk varsel",className:"jkl-toast__dismiss-button",onClick:()=>{d.close(j.toast.key)},children:o(f,{})})]})]})}export{I as Toast};
|
|
2
2
|
//# sourceMappingURL=Toast.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.js","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport type { QueuedToast, ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { Button } from \"../button/Button.js\";\nimport { Countdown } from \"../countdown/Countdown.js\";\nimport { Flex } from \"../flex/Flex.jsx\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport type { ToastContent, ToastOptions } from \"./types.js\";\n\nexport interface ToastProps<T extends ToastContent> extends AriaToastProps<T> {\n className?: string;\n state: ToastState<T>;\n toast: QueuedToast<T> & ToastOptions;\n}\n\nconst getIcon = (messageType?: \"error\" | \"info\" | \"success\" | \"warning\") => {\n switch (messageType) {\n case \"error\":\n return <ErrorIcon className=\"jkl-toast__icon\" />;\n case \"info\":\n return <InfoIcon className=\"jkl-toast__icon\" />;\n case \"success\":\n return <SuccessIcon className=\"jkl-toast__icon\" />;\n case \"warning\":\n return <WarningIcon className=\"jkl-toast__icon\" />;\n default:\n return null;\n }\n};\n\nexport function Toast<T extends ToastContent>({\n className,\n state,\n ...props\n}: ToastProps<T>) {\n const ref = useRef(null);\n const { toastProps, titleProps } = useToast(props, state, ref);\n const [announceReady, setAnnounceReady] = useState(false);\n\n const content =\n typeof props.toast.content === \"string\"\n ? props.toast.content\n : props.toast.content.content;\n const title =\n typeof props.toast.content === \"string\"\n ? undefined\n : props.toast.content.title;\n\n // @ts-ignore Proxy for å sjekke om timeren er pauset: https://github.com/adobe/react-spectrum/blob/b1545c0d225b12672fb6a4e7b787268591d66b90/packages/%40react-stately/toast/src/useToastState.ts#L222\n const isPaused = props.toast.timer?.timerId == null;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n useEffect(() => {\n // Delay the update to the next event loop so the toast has time to render before being announced to screen readers\n const timeout = setTimeout(() => {\n setAnnounceReady(true);\n }, 0);\n\n return () => clearTimeout(timeout);\n }, []);\n\n useEffect(() => {\n if (prefersReducedMotion && props.toast.animation === \"exiting\") {\n // If user has prefers-reduced-motion the exit animation won't run and our\n // onAnimationEnd callback won't be invoked. In this case, remove the toast\n // manually.\n state.remove(props.toast.key);\n }\n }, [prefersReducedMotion, props.toast.animation, props.toast.key, state]);\n\n return (\n <div\n {...toastProps}\n ref={ref}\n className={clsx(\
|
|
1
|
+
{"version":3,"file":"Toast.js","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport type { QueuedToast, ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { Button } from \"../button/Button.js\";\nimport { Countdown } from \"../countdown/Countdown.js\";\nimport { Flex } from \"../flex/Flex.jsx\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport type { ToastContent, ToastOptions } from \"./types.js\";\n\nexport interface ToastProps<T extends ToastContent> extends AriaToastProps<T> {\n className?: string;\n state: ToastState<T>;\n toast: QueuedToast<T> & ToastOptions;\n}\n\nconst getIcon = (messageType?: \"error\" | \"info\" | \"success\" | \"warning\") => {\n switch (messageType) {\n case \"error\":\n return <ErrorIcon className=\"jkl-toast__icon\" />;\n case \"info\":\n return <InfoIcon className=\"jkl-toast__icon\" />;\n case \"success\":\n return <SuccessIcon className=\"jkl-toast__icon\" />;\n case \"warning\":\n return <WarningIcon className=\"jkl-toast__icon\" />;\n default:\n return null;\n }\n};\n\nexport function Toast<T extends ToastContent>({\n className,\n state,\n ...props\n}: ToastProps<T>) {\n const ref = useRef(null);\n const { toastProps, titleProps } = useToast(props, state, ref);\n const [announceReady, setAnnounceReady] = useState(false);\n\n const content =\n typeof props.toast.content === \"string\"\n ? props.toast.content\n : props.toast.content.content;\n const title =\n typeof props.toast.content === \"string\"\n ? undefined\n : props.toast.content.title;\n\n // @ts-ignore Proxy for å sjekke om timeren er pauset: https://github.com/adobe/react-spectrum/blob/b1545c0d225b12672fb6a4e7b787268591d66b90/packages/%40react-stately/toast/src/useToastState.ts#L222\n const isPaused = props.toast.timer?.timerId == null;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n useEffect(() => {\n // Delay the update to the next event loop so the toast has time to render before being announced to screen readers\n const timeout = setTimeout(() => {\n setAnnounceReady(true);\n }, 0);\n\n return () => clearTimeout(timeout);\n }, []);\n\n useEffect(() => {\n if (prefersReducedMotion && props.toast.animation === \"exiting\") {\n // If user has prefers-reduced-motion the exit animation won't run and our\n // onAnimationEnd callback won't be invoked. In this case, remove the toast\n // manually.\n state.remove(props.toast.key);\n }\n }, [prefersReducedMotion, props.toast.animation, props.toast.key, state]);\n\n return (\n <div\n {...toastProps}\n ref={ref}\n className={clsx(\"jkl-toast\", className)}\n data-color={props.toast.variant}\n data-animation={props.toast.animation}\n onAnimationEnd={() => {\n // Remove the toast when the exiting animation completes.\n if (props.toast.animation === \"exiting\") {\n state.remove(props.toast.key);\n }\n }}\n >\n {props.toast.timeout ? (\n <Countdown\n className=\"jkl-toast__progress\"\n from={props.toast.timeout}\n isPaused={isPaused}\n onAnimationEnd={(e) => {\n // Avoid triggering the toast's onAnimationEnd handler so we still get our exit animation\n e.stopPropagation();\n }}\n />\n ) : null}\n <Flex alignItems=\"start\" gap=\"xs\">\n {getIcon(props.toast.variant)}\n <Flex\n {...titleProps}\n direction=\"column\"\n gap=\"xs\"\n className=\"jkl-toast__content\"\n aria-live=\"assertive\"\n >\n {title && (\n <p className=\"jkl-toast__title\">\n {announceReady && title}\n </p>\n )}\n <p className=\"jkl-toast__message\">\n {announceReady && content}\n </p>\n {props.toast.action && (\n <div className=\"jkl-toast__action\">\n <Button\n variant=\"secondary\"\n onClick={props.toast.action.onClick}\n >\n {props.toast.action.label}\n </Button>\n </div>\n )}\n </Flex>\n <IconButton\n aria-label=\"Lukk varsel\"\n className=\"jkl-toast__dismiss-button\"\n onClick={() => {\n state.close(props.toast.key);\n }}\n >\n <CloseIcon />\n </IconButton>\n </Flex>\n </div>\n );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","Toast","state","props","ref","useRef","toastProps","titleProps","useToast","announceReady","setAnnounceReady","useState","content","toast","title","isPaused","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","timeout","setTimeout","clearTimeout","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","Countdown","from","e","stopPropagation","Flex","alignItems","gap","direction","action","Button","onClick","label","IconButton","close","CloseIcon"],"mappings":"ywBAsBA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACD,OAAOC,EAACC,EAAA,CAAUC,UAAU,oBAChC,IAAK,OACD,OAAOF,EAACG,EAAA,CAASD,UAAU,oBAC/B,IAAK,UACD,OAAOF,EAACI,EAAA,CAAYF,UAAU,oBAClC,IAAK,UACD,OAAOF,EAACK,EAAA,CAAYH,UAAU,oBAClC,QACI,OAAO,OAIZ,SAASI,GACZJ,UAAAA,EACAK,MAAAA,KACGC,IAEH,MAAMC,EAAMC,EAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAASL,EAAOD,EAAOE,IACnDK,EAAeC,GAAoBC,GAAS,GAE7CC,EAC6B,iBAAxBT,EAAMU,MAAMD,QACbT,EAAMU,MAAMD,QACZT,EAAMU,MAAMD,QAAQA,QACxBE,EAC6B,iBAAxBX,EAAMU,MAAMD,aACb,EACAT,EAAMU,MAAMD,QAAQE,MAGxBC,EAAyC,MAA9BZ,EAAMU,MAAMG,OAAOC,SAE5BC,qBAAAA,GAAyBC,IAEjC,OAAAC,EAAU,KAEN,MAAMC,EAAUC,WAAW,KACvBZ,GAAiB,IAClB,GAEH,MAAO,IAAMa,aAAaF,IAC3B,IAEHD,EAAU,KACFF,GAAkD,YAA1Bf,EAAMU,MAAMW,WAIpCtB,EAAMuB,OAAOtB,EAAMU,MAAMa,MAE9B,CAACR,EAAsBf,EAAMU,MAAMW,UAAWrB,EAAMU,MAAMa,IAAKxB,IAG9DyB,EAAC,MAAA,IACOrB,EACJF,IAAAA,EACAP,UAAW+B,EAAK,YAAa/B,GAC7B,aAAYM,EAAMU,MAAMgB,QACxB,iBAAgB1B,EAAMU,MAAMW,UAC5BM,eAAgB,KAEkB,YAA1B3B,EAAMU,MAAMW,WACZtB,EAAMuB,OAAOtB,EAAMU,MAAMa,MAIhCK,SAAA,CAAA5B,EAAMU,MAAMQ,QACT1B,EAACqC,EAAA,CACGnC,UAAU,sBACVoC,KAAM9B,EAAMU,MAAMQ,QAClBN,SAAAA,EACAe,eAAiBI,IAEbA,EAAEC,qBAGV,KACJR,EAACS,EAAA,CAAKC,WAAW,QAAQC,IAAI,KACxBP,SAAA,CAAAtC,EAAQU,EAAMU,MAAMgB,SACrBF,EAACS,EAAA,IACO7B,EACJgC,UAAU,SACVD,IAAI,KACJzC,UAAU,qBACV,YAAU,YAETkC,SAAA,CAAAjB,GACGnB,EAAC,IAAA,CAAEE,UAAU,mBACRkC,YAAiBjB,IAG1BnB,EAAC,IAAA,CAAEE,UAAU,qBACRkC,YAAiBnB,IAErBT,EAAMU,MAAM2B,QACT7C,EAAC,MAAA,CAAIE,UAAU,oBACXkC,SAAApC,EAAC8C,EAAA,CACGZ,QAAQ,YACRa,QAASvC,EAAMU,MAAM2B,OAAOE,QAE3BX,SAAA5B,EAAMU,MAAM2B,OAAOG,aAKpChD,EAACiD,EAAA,CACG,aAAW,cACX/C,UAAU,4BACV6C,QAAS,KACLxC,EAAM2C,MAAM1C,EAAMU,MAAMa,MAG5BK,WAACe,EAAA,CAAA,UAKrB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { ToggleChangeHandler } from './types.js';
|
|
3
|
-
export declare const ToggleSwitch: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
|
|
3
|
+
export declare const ToggleSwitch: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "onChange"> & import('../../utilities/types.js').WithDisabled & {
|
|
4
4
|
onChange?: ToggleChangeHandler<HTMLButtonElement>;
|
|
5
5
|
} & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ButtonHTMLAttributes } from 'react';
|
|
2
2
|
import { SwipeChangeHandler } from '../../hooks/useSwipeGesture/useSwipeGesture.js';
|
|
3
|
-
import { WithChildren } from '../../utilities/types.js';
|
|
3
|
+
import { WithChildren, WithDisabled } from '../../utilities/types.js';
|
|
4
4
|
export interface ToggleSliderProps extends WithChildren {
|
|
5
5
|
labels: [string, string];
|
|
6
6
|
onToggle: (value: string) => void;
|
|
@@ -9,7 +9,7 @@ export interface ToggleSliderProps extends WithChildren {
|
|
|
9
9
|
hideLegend?: boolean;
|
|
10
10
|
}
|
|
11
11
|
export type ToggleChangeHandler<T extends HTMLElement> = SwipeChangeHandler<T>;
|
|
12
|
-
export type ToggleSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
|
|
12
|
+
export type ToggleSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "disabled"> & WithDisabled & {
|
|
13
13
|
/**
|
|
14
14
|
* Handler for å håndtere toggling av knappen. Tar inn en boolean som indikerer om knappen er er togglet på
|
|
15
15
|
* eller ikke, samt en MouseEvent eller en PointerEvent avhengig av om togglingen skjedde via klikk eller swipe.
|
package/build/es/tokens.d.ts
CHANGED
package/build/es/tokens.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const r={color:{"@":{background:{page:"var(--jkl-color-background-page)",container:"var(--jkl-color-background-container)","container-accent":"var(--jkl-color-background-container-accent)",contrast:"var(--jkl-color-background-contrast)"},text:{default:"var(--jkl-color-text-default)",subdued:"var(--jkl-color-text-subdued)",accent:"var(--jkl-color-text-accent)","on-contrast":"var(--jkl-color-text-on-contrast)"},border:{default:"var(--jkl-color-border-default)",subdued:"var(--jkl-color-border-subdued)",strong:"var(--jkl-color-border-strong)"}},warning:{background:{page:"var(--jkl-color-warning-background-page)",container:"var(--jkl-color-warning-background-container)","container-accent":"var(--jkl-color-warning-background-container-accent)",contrast:"var(--jkl-color-warning-background-contrast)"},text:{default:"var(--jkl-color-warning-text-default)",subdued:"var(--jkl-color-warning-text-subdued)",accent:"var(--jkl-color-warning-text-accent)","on-contrast":"var(--jkl-color-warning-text-on-contrast)"},border:{default:"var(--jkl-color-warning-border-default)",subdued:"var(--jkl-color-warning-border-subdued)",strong:"var(--jkl-color-warning-border-strong)"}},success:{background:{page:"var(--jkl-color-success-background-page)",container:"var(--jkl-color-success-background-container)","container-accent":"var(--jkl-color-success-background-container-accent)",contrast:"var(--jkl-color-success-background-contrast)"},text:{default:"var(--jkl-color-success-text-default)",subdued:"var(--jkl-color-success-text-subdued)",accent:"var(--jkl-color-success-text-accent)","on-contrast":"var(--jkl-color-success-text-on-contrast)"},border:{default:"var(--jkl-color-success-border-default)",subdued:"var(--jkl-color-success-border-subdued)",strong:"var(--jkl-color-success-border-strong)"}},info:{background:{page:"var(--jkl-color-info-background-page)",container:"var(--jkl-color-info-background-container)","container-accent":"var(--jkl-color-info-background-container-accent)",contrast:"var(--jkl-color-info-background-contrast)"},text:{default:"var(--jkl-color-info-text-default)",subdued:"var(--jkl-color-info-text-subdued)",accent:"var(--jkl-color-info-text-accent)","on-contrast":"var(--jkl-color-info-text-on-contrast)"},border:{default:"var(--jkl-color-info-border-default)",subdued:"var(--jkl-color-info-border-subdued)",strong:"var(--jkl-color-info-border-strong)"}},error:{background:{page:"var(--jkl-color-error-background-page)",container:"var(--jkl-color-error-background-container)","container-accent":"var(--jkl-color-error-background-container-accent)",contrast:"var(--jkl-color-error-background-contrast)"},text:{default:"var(--jkl-color-error-text-default)",subdued:"var(--jkl-color-error-text-subdued)",accent:"var(--jkl-color-error-text-accent)","on-contrast":"var(--jkl-color-error-text-on-contrast)"},border:{default:"var(--jkl-color-error-border-default)",subdued:"var(--jkl-color-error-border-subdued)",strong:"var(--jkl-color-error-border-strong)"}}},unit:{0:"var(--jkl-unit-0)",10:"var(--jkl-unit-10)",15:"var(--jkl-unit-15)",20:"var(--jkl-unit-20)",25:"var(--jkl-unit-25)",30:"var(--jkl-unit-30)",35:"var(--jkl-unit-35)",40:"var(--jkl-unit-40)",50:"var(--jkl-unit-50)",60:"var(--jkl-unit-60)",70:"var(--jkl-unit-70)",80:"var(--jkl-unit-80)",90:"var(--jkl-unit-90)",100:"var(--jkl-unit-100)",130:"var(--jkl-unit-130)",210:"var(--jkl-unit-210)",base:"var(--jkl-unit-base)","02":"var(--jkl-unit-02)","05":"var(--jkl-unit-05)"},spacing:{0:"var(--jkl-spacing-0)",2:"var(--jkl-spacing-2)",4:"var(--jkl-spacing-4)",8:"var(--jkl-spacing-8)",12:"var(--jkl-spacing-12)",16:"var(--jkl-spacing-16)",24:"var(--jkl-spacing-24)",32:"var(--jkl-spacing-32)",40:"var(--jkl-spacing-40)",64:"var(--jkl-spacing-64)",104:"var(--jkl-spacing-104)",168:"var(--jkl-spacing-168)",none:"var(--jkl-spacing-none)","2xs":"var(--jkl-spacing-2xs)",xs:"var(--jkl-spacing-xs)",s:"var(--jkl-spacing-s)",m:"var(--jkl-spacing-m)",l:"var(--jkl-spacing-l)",xl:"var(--jkl-spacing-xl)","2xl":"var(--jkl-spacing-2xl)"},border:{width:{1:"var(--jkl-border-width-1)",2:"var(--jkl-border-width-2)",3:"var(--jkl-border-width-3)"},radius:{none:"var(--jkl-border-radius-none)",xs:"var(--jkl-border-radius-xs)",s:"var(--jkl-border-radius-s)",m:"var(--jkl-border-radius-m)",l:"var(--jkl-border-radius-l)",full:"var(--jkl-border-radius-full)"}},breakpoint:{small:"0",medium:"680px",large:"1200px",xl:"1600px"},motion:{timing:{energetic:"var(--jkl-motion-timing-energetic)",snappy:"var(--jkl-motion-timing-snappy)",productive:"var(--jkl-motion-timing-productive)",polite:"var(--jkl-motion-timing-polite)",expressive:"var(--jkl-motion-timing-expressive)",lazy:"var(--jkl-motion-timing-lazy)"},easing:{standard:"var(--jkl-motion-easing-standard)",entrance:"var(--jkl-motion-easing-entrance)",exit:"var(--jkl-motion-easing-exit)",easeInBounceOut:"var(--jkl-motion-easing-ease-in-bounce-out)",focus:"var(--jkl-motion-easing-focus)"}},font:{size:{1:"var(--jkl-font-size-1)",2:"var(--jkl-font-size-2)",3:"var(--jkl-font-size-3)",4:"var(--jkl-font-size-4)",5:"var(--jkl-font-size-5)",6:"var(--jkl-font-size-6)",7:"var(--jkl-font-size-7)",8:"var(--jkl-font-size-8)",9:"var(--jkl-font-size-9)",10:"var(--jkl-font-size-10)"},weight:{normal:"var(--jkl-font-weight-normal)",bold:"var(--jkl-font-weight-bold)"},family:{regular:"var(--jkl-font-family-regular)",display:"var(--jkl-font-family-display)",mono:"var(--jkl-font-family-mono)",icons:"var(--jkl-font-family-icons)"}},lineHeight:{flush:"var(--jkl-line-height-flush)",tight:"var(--jkl-line-height-tight)",relaxed:"var(--jkl-line-height-relaxed)"},textStyle:{title:"var(--jkl-text-style-title)","title-small":"var(--jkl-text-style-title-small)","heading-1":"var(--jkl-text-style-heading-1)","heading-2":"var(--jkl-text-style-heading-2)","heading-3":"var(--jkl-text-style-heading-3)","heading-4":"var(--jkl-text-style-heading-4)","heading-5":"var(--jkl-text-style-heading-5)","paragraph-large":"var(--jkl-text-style-paragraph-large)","paragraph-medium":"var(--jkl-text-style-paragraph-medium)","paragraph-small":"var(--jkl-text-style-paragraph-small)","text-large":"var(--jkl-text-style-text-large)","text-medium":"var(--jkl-text-style-text-medium)","text-small":"var(--jkl-text-style-text-small)","text-micro":"var(--jkl-text-style-text-micro)"}};export{r as default};
|
|
1
|
+
const r={color:{"@":{background:{page:"var(--jkl-color-background-page)",container:"var(--jkl-color-background-container)","container-accent":"var(--jkl-color-background-container-accent)",contrast:"var(--jkl-color-background-contrast)"},text:{default:"var(--jkl-color-text-default)",subdued:"var(--jkl-color-text-subdued)",accent:"var(--jkl-color-text-accent)","on-contrast":"var(--jkl-color-text-on-contrast)"},border:{default:"var(--jkl-color-border-default)",subdued:"var(--jkl-color-border-subdued)",strong:"var(--jkl-color-border-strong)"}},warning:{background:{page:"var(--jkl-color-warning-background-page)",container:"var(--jkl-color-warning-background-container)","container-accent":"var(--jkl-color-warning-background-container-accent)",contrast:"var(--jkl-color-warning-background-contrast)"},text:{default:"var(--jkl-color-warning-text-default)",subdued:"var(--jkl-color-warning-text-subdued)",accent:"var(--jkl-color-warning-text-accent)","on-contrast":"var(--jkl-color-warning-text-on-contrast)"},border:{default:"var(--jkl-color-warning-border-default)",subdued:"var(--jkl-color-warning-border-subdued)",strong:"var(--jkl-color-warning-border-strong)"}},success:{background:{page:"var(--jkl-color-success-background-page)",container:"var(--jkl-color-success-background-container)","container-accent":"var(--jkl-color-success-background-container-accent)",contrast:"var(--jkl-color-success-background-contrast)"},text:{default:"var(--jkl-color-success-text-default)",subdued:"var(--jkl-color-success-text-subdued)",accent:"var(--jkl-color-success-text-accent)","on-contrast":"var(--jkl-color-success-text-on-contrast)"},border:{default:"var(--jkl-color-success-border-default)",subdued:"var(--jkl-color-success-border-subdued)",strong:"var(--jkl-color-success-border-strong)"}},info:{background:{page:"var(--jkl-color-info-background-page)",container:"var(--jkl-color-info-background-container)","container-accent":"var(--jkl-color-info-background-container-accent)",contrast:"var(--jkl-color-info-background-contrast)"},text:{default:"var(--jkl-color-info-text-default)",subdued:"var(--jkl-color-info-text-subdued)",accent:"var(--jkl-color-info-text-accent)","on-contrast":"var(--jkl-color-info-text-on-contrast)"},border:{default:"var(--jkl-color-info-border-default)",subdued:"var(--jkl-color-info-border-subdued)",strong:"var(--jkl-color-info-border-strong)"}},error:{background:{page:"var(--jkl-color-error-background-page)",container:"var(--jkl-color-error-background-container)","container-accent":"var(--jkl-color-error-background-container-accent)",contrast:"var(--jkl-color-error-background-contrast)"},text:{default:"var(--jkl-color-error-text-default)",subdued:"var(--jkl-color-error-text-subdued)",accent:"var(--jkl-color-error-text-accent)","on-contrast":"var(--jkl-color-error-text-on-contrast)"},border:{default:"var(--jkl-color-error-border-default)",subdued:"var(--jkl-color-error-border-subdued)",strong:"var(--jkl-color-error-border-strong)"}}},opacity:{hover:"var(--jkl-opacity-hover)"},unit:{0:"var(--jkl-unit-0)",10:"var(--jkl-unit-10)",15:"var(--jkl-unit-15)",20:"var(--jkl-unit-20)",25:"var(--jkl-unit-25)",30:"var(--jkl-unit-30)",35:"var(--jkl-unit-35)",40:"var(--jkl-unit-40)",50:"var(--jkl-unit-50)",60:"var(--jkl-unit-60)",70:"var(--jkl-unit-70)",80:"var(--jkl-unit-80)",90:"var(--jkl-unit-90)",100:"var(--jkl-unit-100)",130:"var(--jkl-unit-130)",210:"var(--jkl-unit-210)",base:"var(--jkl-unit-base)","02":"var(--jkl-unit-02)","05":"var(--jkl-unit-05)"},spacing:{0:"var(--jkl-spacing-0)",2:"var(--jkl-spacing-2)",4:"var(--jkl-spacing-4)",8:"var(--jkl-spacing-8)",12:"var(--jkl-spacing-12)",16:"var(--jkl-spacing-16)",24:"var(--jkl-spacing-24)",32:"var(--jkl-spacing-32)",40:"var(--jkl-spacing-40)",64:"var(--jkl-spacing-64)",104:"var(--jkl-spacing-104)",168:"var(--jkl-spacing-168)",none:"var(--jkl-spacing-none)","2xs":"var(--jkl-spacing-2xs)",xs:"var(--jkl-spacing-xs)",s:"var(--jkl-spacing-s)",m:"var(--jkl-spacing-m)",l:"var(--jkl-spacing-l)",xl:"var(--jkl-spacing-xl)","2xl":"var(--jkl-spacing-2xl)"},border:{width:{1:"var(--jkl-border-width-1)",2:"var(--jkl-border-width-2)",3:"var(--jkl-border-width-3)"},radius:{none:"var(--jkl-border-radius-none)",xs:"var(--jkl-border-radius-xs)",s:"var(--jkl-border-radius-s)",m:"var(--jkl-border-radius-m)",l:"var(--jkl-border-radius-l)",full:"var(--jkl-border-radius-full)"}},breakpoint:{small:"0",medium:"680px",large:"1200px",xl:"1600px"},motion:{timing:{energetic:"var(--jkl-motion-timing-energetic)",snappy:"var(--jkl-motion-timing-snappy)",productive:"var(--jkl-motion-timing-productive)",polite:"var(--jkl-motion-timing-polite)",expressive:"var(--jkl-motion-timing-expressive)",lazy:"var(--jkl-motion-timing-lazy)"},easing:{standard:"var(--jkl-motion-easing-standard)",entrance:"var(--jkl-motion-easing-entrance)",exit:"var(--jkl-motion-easing-exit)",easeInBounceOut:"var(--jkl-motion-easing-ease-in-bounce-out)",focus:"var(--jkl-motion-easing-focus)"}},font:{size:{1:"var(--jkl-font-size-1)",2:"var(--jkl-font-size-2)",3:"var(--jkl-font-size-3)",4:"var(--jkl-font-size-4)",5:"var(--jkl-font-size-5)",6:"var(--jkl-font-size-6)",7:"var(--jkl-font-size-7)",8:"var(--jkl-font-size-8)",9:"var(--jkl-font-size-9)",10:"var(--jkl-font-size-10)"},weight:{normal:"var(--jkl-font-weight-normal)",bold:"var(--jkl-font-weight-bold)"},family:{regular:"var(--jkl-font-family-regular)",display:"var(--jkl-font-family-display)",mono:"var(--jkl-font-family-mono)",icons:"var(--jkl-font-family-icons)"}},lineHeight:{flush:"var(--jkl-line-height-flush)",tight:"var(--jkl-line-height-tight)",relaxed:"var(--jkl-line-height-relaxed)"},textStyle:{title:"var(--jkl-text-style-title)","title-small":"var(--jkl-text-style-title-small)","heading-1":"var(--jkl-text-style-heading-1)","heading-2":"var(--jkl-text-style-heading-2)","heading-3":"var(--jkl-text-style-heading-3)","heading-4":"var(--jkl-text-style-heading-4)","heading-5":"var(--jkl-text-style-heading-5)","paragraph-large":"var(--jkl-text-style-paragraph-large)","paragraph-medium":"var(--jkl-text-style-paragraph-medium)","paragraph-small":"var(--jkl-text-style-paragraph-small)","text-large":"var(--jkl-text-style-text-large)","text-medium":"var(--jkl-text-style-text-medium)","text-small":"var(--jkl-text-style-text-small)","text-micro":"var(--jkl-text-style-text-micro)"}};export{r as default};
|
|
2
2
|
//# sourceMappingURL=tokens.js.map
|
package/build/es/tokens.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.js","sources":["../../src/tokens.ts"],"sourcesContent":["/**\n * Do not edit directly, this file was auto-generated.\n */\n\nexport default {\n color: {\n \"@\": {\n background: {\n page: \"var(--jkl-color-background-page)\",\n container: \"var(--jkl-color-background-container)\",\n \"container-accent\": \"var(--jkl-color-background-container-accent)\",\n contrast: \"var(--jkl-color-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-text-default)\",\n subdued: \"var(--jkl-color-text-subdued)\",\n accent: \"var(--jkl-color-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-border-default)\",\n subdued: \"var(--jkl-color-border-subdued)\",\n strong: \"var(--jkl-color-border-strong)\",\n },\n },\n warning: {\n background: {\n page: \"var(--jkl-color-warning-background-page)\",\n container: \"var(--jkl-color-warning-background-container)\",\n \"container-accent\":\n \"var(--jkl-color-warning-background-container-accent)\",\n contrast: \"var(--jkl-color-warning-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-warning-text-default)\",\n subdued: \"var(--jkl-color-warning-text-subdued)\",\n accent: \"var(--jkl-color-warning-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-warning-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-warning-border-default)\",\n subdued: \"var(--jkl-color-warning-border-subdued)\",\n strong: \"var(--jkl-color-warning-border-strong)\",\n },\n },\n success: {\n background: {\n page: \"var(--jkl-color-success-background-page)\",\n container: \"var(--jkl-color-success-background-container)\",\n \"container-accent\":\n \"var(--jkl-color-success-background-container-accent)\",\n contrast: \"var(--jkl-color-success-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-success-text-default)\",\n subdued: \"var(--jkl-color-success-text-subdued)\",\n accent: \"var(--jkl-color-success-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-success-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-success-border-default)\",\n subdued: \"var(--jkl-color-success-border-subdued)\",\n strong: \"var(--jkl-color-success-border-strong)\",\n },\n },\n info: {\n background: {\n page: \"var(--jkl-color-info-background-page)\",\n container: \"var(--jkl-color-info-background-container)\",\n \"container-accent\": \"var(--jkl-color-info-background-container-accent)\",\n contrast: \"var(--jkl-color-info-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-info-text-default)\",\n subdued: \"var(--jkl-color-info-text-subdued)\",\n accent: \"var(--jkl-color-info-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-info-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-info-border-default)\",\n subdued: \"var(--jkl-color-info-border-subdued)\",\n strong: \"var(--jkl-color-info-border-strong)\",\n },\n },\n error: {\n background: {\n page: \"var(--jkl-color-error-background-page)\",\n container: \"var(--jkl-color-error-background-container)\",\n \"container-accent\":\n \"var(--jkl-color-error-background-container-accent)\",\n contrast: \"var(--jkl-color-error-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-error-text-default)\",\n subdued: \"var(--jkl-color-error-text-subdued)\",\n accent: \"var(--jkl-color-error-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-error-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-error-border-default)\",\n subdued: \"var(--jkl-color-error-border-subdued)\",\n strong: \"var(--jkl-color-error-border-strong)\",\n },\n },\n },\n unit: {\n 0: \"var(--jkl-unit-0)\",\n 10: \"var(--jkl-unit-10)\",\n 15: \"var(--jkl-unit-15)\",\n 20: \"var(--jkl-unit-20)\",\n 25: \"var(--jkl-unit-25)\",\n 30: \"var(--jkl-unit-30)\",\n 35: \"var(--jkl-unit-35)\",\n 40: \"var(--jkl-unit-40)\",\n 50: \"var(--jkl-unit-50)\",\n 60: \"var(--jkl-unit-60)\",\n 70: \"var(--jkl-unit-70)\",\n 80: \"var(--jkl-unit-80)\",\n 90: \"var(--jkl-unit-90)\",\n 100: \"var(--jkl-unit-100)\",\n 130: \"var(--jkl-unit-130)\",\n 210: \"var(--jkl-unit-210)\",\n base: \"var(--jkl-unit-base)\",\n \"02\": \"var(--jkl-unit-02)\",\n \"05\": \"var(--jkl-unit-05)\",\n },\n spacing: {\n 0: \"var(--jkl-spacing-0)\",\n 2: \"var(--jkl-spacing-2)\",\n 4: \"var(--jkl-spacing-4)\",\n 8: \"var(--jkl-spacing-8)\",\n 12: \"var(--jkl-spacing-12)\",\n 16: \"var(--jkl-spacing-16)\",\n 24: \"var(--jkl-spacing-24)\",\n 32: \"var(--jkl-spacing-32)\",\n 40: \"var(--jkl-spacing-40)\",\n 64: \"var(--jkl-spacing-64)\",\n 104: \"var(--jkl-spacing-104)\",\n 168: \"var(--jkl-spacing-168)\",\n none: \"var(--jkl-spacing-none)\",\n \"2xs\": \"var(--jkl-spacing-2xs)\",\n xs: \"var(--jkl-spacing-xs)\",\n s: \"var(--jkl-spacing-s)\",\n m: \"var(--jkl-spacing-m)\",\n l: \"var(--jkl-spacing-l)\",\n xl: \"var(--jkl-spacing-xl)\",\n \"2xl\": \"var(--jkl-spacing-2xl)\",\n },\n border: {\n width: {\n 1: \"var(--jkl-border-width-1)\",\n 2: \"var(--jkl-border-width-2)\",\n 3: \"var(--jkl-border-width-3)\",\n },\n radius: {\n none: \"var(--jkl-border-radius-none)\",\n xs: \"var(--jkl-border-radius-xs)\",\n s: \"var(--jkl-border-radius-s)\",\n m: \"var(--jkl-border-radius-m)\",\n l: \"var(--jkl-border-radius-l)\",\n full: \"var(--jkl-border-radius-full)\",\n },\n },\n breakpoint: {\n small: \"0\",\n medium: \"680px\",\n large: \"1200px\",\n xl: \"1600px\",\n },\n motion: {\n timing: {\n energetic: \"var(--jkl-motion-timing-energetic)\",\n snappy: \"var(--jkl-motion-timing-snappy)\",\n productive: \"var(--jkl-motion-timing-productive)\",\n polite: \"var(--jkl-motion-timing-polite)\",\n expressive: \"var(--jkl-motion-timing-expressive)\",\n lazy: \"var(--jkl-motion-timing-lazy)\",\n },\n easing: {\n standard: \"var(--jkl-motion-easing-standard)\",\n entrance: \"var(--jkl-motion-easing-entrance)\",\n exit: \"var(--jkl-motion-easing-exit)\",\n easeInBounceOut: \"var(--jkl-motion-easing-ease-in-bounce-out)\",\n focus: \"var(--jkl-motion-easing-focus)\",\n },\n },\n font: {\n size: {\n 1: \"var(--jkl-font-size-1)\",\n 2: \"var(--jkl-font-size-2)\",\n 3: \"var(--jkl-font-size-3)\",\n 4: \"var(--jkl-font-size-4)\",\n 5: \"var(--jkl-font-size-5)\",\n 6: \"var(--jkl-font-size-6)\",\n 7: \"var(--jkl-font-size-7)\",\n 8: \"var(--jkl-font-size-8)\",\n 9: \"var(--jkl-font-size-9)\",\n 10: \"var(--jkl-font-size-10)\",\n },\n weight: {\n normal: \"var(--jkl-font-weight-normal)\",\n bold: \"var(--jkl-font-weight-bold)\",\n },\n family: {\n regular: \"var(--jkl-font-family-regular)\",\n display: \"var(--jkl-font-family-display)\",\n mono: \"var(--jkl-font-family-mono)\",\n icons: \"var(--jkl-font-family-icons)\",\n },\n },\n lineHeight: {\n flush: \"var(--jkl-line-height-flush)\",\n tight: \"var(--jkl-line-height-tight)\",\n relaxed: \"var(--jkl-line-height-relaxed)\",\n },\n textStyle: {\n title: \"var(--jkl-text-style-title)\",\n \"title-small\": \"var(--jkl-text-style-title-small)\",\n \"heading-1\": \"var(--jkl-text-style-heading-1)\",\n \"heading-2\": \"var(--jkl-text-style-heading-2)\",\n \"heading-3\": \"var(--jkl-text-style-heading-3)\",\n \"heading-4\": \"var(--jkl-text-style-heading-4)\",\n \"heading-5\": \"var(--jkl-text-style-heading-5)\",\n \"paragraph-large\": \"var(--jkl-text-style-paragraph-large)\",\n \"paragraph-medium\": \"var(--jkl-text-style-paragraph-medium)\",\n \"paragraph-small\": \"var(--jkl-text-style-paragraph-small)\",\n \"text-large\": \"var(--jkl-text-style-text-large)\",\n \"text-medium\": \"var(--jkl-text-style-text-medium)\",\n \"text-small\": \"var(--jkl-text-style-text-small)\",\n \"text-micro\": \"var(--jkl-text-style-text-micro)\",\n },\n};\n"],"names":["tokens","color","background","page","container","contrast","text","default","subdued","accent","border","strong","warning","success","info","error","unit","base","spacing","none","xs","s","m","l","xl","width","radius","full","breakpoint","small","medium","large","motion","timing","energetic","snappy","productive","polite","expressive","lazy","easing","standard","entrance","exit","easeInBounceOut","focus","font","size","weight","normal","bold","family","regular","display","mono","icons","lineHeight","flush","tight","relaxed","textStyle","title"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tokens.js","sources":["../../src/tokens.ts"],"sourcesContent":["/**\n * Do not edit directly, this file was auto-generated.\n */\n\nexport default {\n color: {\n \"@\": {\n background: {\n page: \"var(--jkl-color-background-page)\",\n container: \"var(--jkl-color-background-container)\",\n \"container-accent\": \"var(--jkl-color-background-container-accent)\",\n contrast: \"var(--jkl-color-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-text-default)\",\n subdued: \"var(--jkl-color-text-subdued)\",\n accent: \"var(--jkl-color-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-border-default)\",\n subdued: \"var(--jkl-color-border-subdued)\",\n strong: \"var(--jkl-color-border-strong)\",\n },\n },\n warning: {\n background: {\n page: \"var(--jkl-color-warning-background-page)\",\n container: \"var(--jkl-color-warning-background-container)\",\n \"container-accent\":\n \"var(--jkl-color-warning-background-container-accent)\",\n contrast: \"var(--jkl-color-warning-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-warning-text-default)\",\n subdued: \"var(--jkl-color-warning-text-subdued)\",\n accent: \"var(--jkl-color-warning-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-warning-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-warning-border-default)\",\n subdued: \"var(--jkl-color-warning-border-subdued)\",\n strong: \"var(--jkl-color-warning-border-strong)\",\n },\n },\n success: {\n background: {\n page: \"var(--jkl-color-success-background-page)\",\n container: \"var(--jkl-color-success-background-container)\",\n \"container-accent\":\n \"var(--jkl-color-success-background-container-accent)\",\n contrast: \"var(--jkl-color-success-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-success-text-default)\",\n subdued: \"var(--jkl-color-success-text-subdued)\",\n accent: \"var(--jkl-color-success-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-success-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-success-border-default)\",\n subdued: \"var(--jkl-color-success-border-subdued)\",\n strong: \"var(--jkl-color-success-border-strong)\",\n },\n },\n info: {\n background: {\n page: \"var(--jkl-color-info-background-page)\",\n container: \"var(--jkl-color-info-background-container)\",\n \"container-accent\": \"var(--jkl-color-info-background-container-accent)\",\n contrast: \"var(--jkl-color-info-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-info-text-default)\",\n subdued: \"var(--jkl-color-info-text-subdued)\",\n accent: \"var(--jkl-color-info-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-info-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-info-border-default)\",\n subdued: \"var(--jkl-color-info-border-subdued)\",\n strong: \"var(--jkl-color-info-border-strong)\",\n },\n },\n error: {\n background: {\n page: \"var(--jkl-color-error-background-page)\",\n container: \"var(--jkl-color-error-background-container)\",\n \"container-accent\":\n \"var(--jkl-color-error-background-container-accent)\",\n contrast: \"var(--jkl-color-error-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-error-text-default)\",\n subdued: \"var(--jkl-color-error-text-subdued)\",\n accent: \"var(--jkl-color-error-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-error-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-error-border-default)\",\n subdued: \"var(--jkl-color-error-border-subdued)\",\n strong: \"var(--jkl-color-error-border-strong)\",\n },\n },\n },\n opacity: {\n hover: \"var(--jkl-opacity-hover)\",\n },\n unit: {\n 0: \"var(--jkl-unit-0)\",\n 10: \"var(--jkl-unit-10)\",\n 15: \"var(--jkl-unit-15)\",\n 20: \"var(--jkl-unit-20)\",\n 25: \"var(--jkl-unit-25)\",\n 30: \"var(--jkl-unit-30)\",\n 35: \"var(--jkl-unit-35)\",\n 40: \"var(--jkl-unit-40)\",\n 50: \"var(--jkl-unit-50)\",\n 60: \"var(--jkl-unit-60)\",\n 70: \"var(--jkl-unit-70)\",\n 80: \"var(--jkl-unit-80)\",\n 90: \"var(--jkl-unit-90)\",\n 100: \"var(--jkl-unit-100)\",\n 130: \"var(--jkl-unit-130)\",\n 210: \"var(--jkl-unit-210)\",\n base: \"var(--jkl-unit-base)\",\n \"02\": \"var(--jkl-unit-02)\",\n \"05\": \"var(--jkl-unit-05)\",\n },\n spacing: {\n 0: \"var(--jkl-spacing-0)\",\n 2: \"var(--jkl-spacing-2)\",\n 4: \"var(--jkl-spacing-4)\",\n 8: \"var(--jkl-spacing-8)\",\n 12: \"var(--jkl-spacing-12)\",\n 16: \"var(--jkl-spacing-16)\",\n 24: \"var(--jkl-spacing-24)\",\n 32: \"var(--jkl-spacing-32)\",\n 40: \"var(--jkl-spacing-40)\",\n 64: \"var(--jkl-spacing-64)\",\n 104: \"var(--jkl-spacing-104)\",\n 168: \"var(--jkl-spacing-168)\",\n none: \"var(--jkl-spacing-none)\",\n \"2xs\": \"var(--jkl-spacing-2xs)\",\n xs: \"var(--jkl-spacing-xs)\",\n s: \"var(--jkl-spacing-s)\",\n m: \"var(--jkl-spacing-m)\",\n l: \"var(--jkl-spacing-l)\",\n xl: \"var(--jkl-spacing-xl)\",\n \"2xl\": \"var(--jkl-spacing-2xl)\",\n },\n border: {\n width: {\n 1: \"var(--jkl-border-width-1)\",\n 2: \"var(--jkl-border-width-2)\",\n 3: \"var(--jkl-border-width-3)\",\n },\n radius: {\n none: \"var(--jkl-border-radius-none)\",\n xs: \"var(--jkl-border-radius-xs)\",\n s: \"var(--jkl-border-radius-s)\",\n m: \"var(--jkl-border-radius-m)\",\n l: \"var(--jkl-border-radius-l)\",\n full: \"var(--jkl-border-radius-full)\",\n },\n },\n breakpoint: {\n small: \"0\",\n medium: \"680px\",\n large: \"1200px\",\n xl: \"1600px\",\n },\n motion: {\n timing: {\n energetic: \"var(--jkl-motion-timing-energetic)\",\n snappy: \"var(--jkl-motion-timing-snappy)\",\n productive: \"var(--jkl-motion-timing-productive)\",\n polite: \"var(--jkl-motion-timing-polite)\",\n expressive: \"var(--jkl-motion-timing-expressive)\",\n lazy: \"var(--jkl-motion-timing-lazy)\",\n },\n easing: {\n standard: \"var(--jkl-motion-easing-standard)\",\n entrance: \"var(--jkl-motion-easing-entrance)\",\n exit: \"var(--jkl-motion-easing-exit)\",\n easeInBounceOut: \"var(--jkl-motion-easing-ease-in-bounce-out)\",\n focus: \"var(--jkl-motion-easing-focus)\",\n },\n },\n font: {\n size: {\n 1: \"var(--jkl-font-size-1)\",\n 2: \"var(--jkl-font-size-2)\",\n 3: \"var(--jkl-font-size-3)\",\n 4: \"var(--jkl-font-size-4)\",\n 5: \"var(--jkl-font-size-5)\",\n 6: \"var(--jkl-font-size-6)\",\n 7: \"var(--jkl-font-size-7)\",\n 8: \"var(--jkl-font-size-8)\",\n 9: \"var(--jkl-font-size-9)\",\n 10: \"var(--jkl-font-size-10)\",\n },\n weight: {\n normal: \"var(--jkl-font-weight-normal)\",\n bold: \"var(--jkl-font-weight-bold)\",\n },\n family: {\n regular: \"var(--jkl-font-family-regular)\",\n display: \"var(--jkl-font-family-display)\",\n mono: \"var(--jkl-font-family-mono)\",\n icons: \"var(--jkl-font-family-icons)\",\n },\n },\n lineHeight: {\n flush: \"var(--jkl-line-height-flush)\",\n tight: \"var(--jkl-line-height-tight)\",\n relaxed: \"var(--jkl-line-height-relaxed)\",\n },\n textStyle: {\n title: \"var(--jkl-text-style-title)\",\n \"title-small\": \"var(--jkl-text-style-title-small)\",\n \"heading-1\": \"var(--jkl-text-style-heading-1)\",\n \"heading-2\": \"var(--jkl-text-style-heading-2)\",\n \"heading-3\": \"var(--jkl-text-style-heading-3)\",\n \"heading-4\": \"var(--jkl-text-style-heading-4)\",\n \"heading-5\": \"var(--jkl-text-style-heading-5)\",\n \"paragraph-large\": \"var(--jkl-text-style-paragraph-large)\",\n \"paragraph-medium\": \"var(--jkl-text-style-paragraph-medium)\",\n \"paragraph-small\": \"var(--jkl-text-style-paragraph-small)\",\n \"text-large\": \"var(--jkl-text-style-text-large)\",\n \"text-medium\": \"var(--jkl-text-style-text-medium)\",\n \"text-small\": \"var(--jkl-text-style-text-small)\",\n \"text-micro\": \"var(--jkl-text-style-text-micro)\",\n },\n};\n"],"names":["tokens","color","background","page","container","contrast","text","default","subdued","accent","border","strong","warning","success","info","error","opacity","hover","unit","base","spacing","none","xs","s","m","l","xl","width","radius","full","breakpoint","small","medium","large","motion","timing","energetic","snappy","productive","polite","expressive","lazy","easing","standard","entrance","exit","easeInBounceOut","focus","font","size","weight","normal","bold","family","regular","display","mono","icons","lineHeight","flush","tight","relaxed","textStyle","title"],"mappings":"AAIA,MAAAA,EAAe,CACbC,MAAO,CACL,IAAK,CACHC,WAAY,CACVC,KAAM,mCACNC,UAAW,wCACX,mBAAoB,+CACpBC,SAAU,wCAEZC,KAAM,CACJC,QAAS,gCACTC,QAAS,gCACTC,OAAQ,+BACR,cAAe,qCAEjBC,OAAQ,CACNH,QAAS,kCACTC,QAAS,kCACTG,OAAQ,mCAGZC,QAAS,CACPV,WAAY,CACVC,KAAM,2CACNC,UAAW,gDACX,mBACE,uDACFC,SAAU,gDAEZC,KAAM,CACJC,QAAS,wCACTC,QAAS,wCACTC,OAAQ,uCACR,cAAe,6CAEjBC,OAAQ,CACNH,QAAS,0CACTC,QAAS,0CACTG,OAAQ,2CAGZE,QAAS,CACPX,WAAY,CACVC,KAAM,2CACNC,UAAW,gDACX,mBACE,uDACFC,SAAU,gDAEZC,KAAM,CACJC,QAAS,wCACTC,QAAS,wCACTC,OAAQ,uCACR,cAAe,6CAEjBC,OAAQ,CACNH,QAAS,0CACTC,QAAS,0CACTG,OAAQ,2CAGZG,KAAM,CACJZ,WAAY,CACVC,KAAM,wCACNC,UAAW,6CACX,mBAAoB,oDACpBC,SAAU,6CAEZC,KAAM,CACJC,QAAS,qCACTC,QAAS,qCACTC,OAAQ,oCACR,cAAe,0CAEjBC,OAAQ,CACNH,QAAS,uCACTC,QAAS,uCACTG,OAAQ,wCAGZI,MAAO,CACLb,WAAY,CACVC,KAAM,yCACNC,UAAW,8CACX,mBACE,qDACFC,SAAU,8CAEZC,KAAM,CACJC,QAAS,sCACTC,QAAS,sCACTC,OAAQ,qCACR,cAAe,2CAEjBC,OAAQ,CACNH,QAAS,wCACTC,QAAS,wCACTG,OAAQ,0CAIdK,QAAS,CACPC,MAAO,4BAETC,KAAM,CACJ,EAAG,oBACH,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,IAAK,sBACL,IAAK,sBACL,IAAK,sBACLC,KAAM,uBACN,KAAM,qBACN,KAAM,sBAERC,QAAS,CACP,EAAG,uBACH,EAAG,uBACH,EAAG,uBACH,EAAG,uBACH,GAAI,wBACJ,GAAI,wBACJ,GAAI,wBACJ,GAAI,wBACJ,GAAI,wBACJ,GAAI,wBACJ,IAAK,yBACL,IAAK,yBACLC,KAAM,0BACN,MAAO,yBACPC,GAAI,wBACJC,EAAG,uBACHC,EAAG,uBACHC,EAAG,uBACHC,GAAI,wBACJ,MAAO,0BAEThB,OAAQ,CACNiB,MAAO,CACL,EAAG,4BACH,EAAG,4BACH,EAAG,6BAELC,OAAQ,CACNP,KAAM,gCACNC,GAAI,8BACJC,EAAG,6BACHC,EAAG,6BACHC,EAAG,6BACHI,KAAM,kCAGVC,WAAY,CACVC,MAAO,IACPC,OAAQ,QACRC,MAAO,SACPP,GAAI,UAENQ,OAAQ,CACNC,OAAQ,CACNC,UAAW,qCACXC,OAAQ,kCACRC,WAAY,sCACZC,OAAQ,kCACRC,WAAY,sCACZC,KAAM,iCAERC,OAAQ,CACNC,SAAU,oCACVC,SAAU,oCACVC,KAAM,gCACNC,gBAAiB,8CACjBC,MAAO,mCAGXC,KAAM,CACJC,KAAM,CACJ,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,GAAI,2BAENC,OAAQ,CACNC,OAAQ,gCACRC,KAAM,+BAERC,OAAQ,CACNC,QAAS,iCACTC,QAAS,iCACTC,KAAM,8BACNC,MAAO,iCAGXC,WAAY,CACVC,MAAO,+BACPC,MAAO,+BACPC,QAAS,kCAEXC,UAAW,CACTC,MAAO,8BACP,cAAe,oCACf,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,kBAAmB,wCACnB,mBAAoB,yCACpB,kBAAmB,wCACnB,aAAc,mCACd,cAAe,oCACf,aAAc,mCACd,aAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{u as s}from"../../index-C1iqmqvT.js";import{formatNumber as a}from"./formatters/util/formatNumber.js";import{parseNumber as r}from"./formatters/util/parseNumber.js";import{registerWithMasks as m}from"./formatters/util/registerWithMask.js";import{formatAvstand as e}from"./formatters/avstand/formatAvstand.js";import{formatBytes as o}from"./formatters/bytes/formatBytes.js";import{formatDate as t}from"./formatters/date/formatDate.js";import{FODSELSNUMMER_REGEX as i,formatFodselsnummer as n}from"./formatters/fodselsnummer/formatFodselsnummer.js";import{ORGANISASJONSNUMMER_REGEX as f,formatOrganisasjonsnummer as l}from"./formatters/organisasjonsnummer/formatOrganisasjonsnummer.js";import{KONTONUMMER_REGEX as u,formatKontonummer as d}from"./formatters/kontonummer/formatKontonummer.js";import{KORTNUMMER_REGEX as
|
|
1
|
+
import{u as s}from"../../index-C1iqmqvT.js";import{formatNumber as a}from"./formatters/util/formatNumber.js";import{parseNumber as r}from"./formatters/util/parseNumber.js";import{registerWithMasks as m}from"./formatters/util/registerWithMask.js";import{formatAvstand as e}from"./formatters/avstand/formatAvstand.js";import{formatBytes as o}from"./formatters/bytes/formatBytes.js";import{formatDate as t}from"./formatters/date/formatDate.js";import{FODSELSNUMMER_REGEX as i,formatFodselsnummer as n}from"./formatters/fodselsnummer/formatFodselsnummer.js";import{ORGANISASJONSNUMMER_REGEX as f,formatOrganisasjonsnummer as l}from"./formatters/organisasjonsnummer/formatOrganisasjonsnummer.js";import{KONTONUMMER_REGEX as u,formatKontonummer as d}from"./formatters/kontonummer/formatKontonummer.js";import{KORTNUMMER_REGEX as E,formatKortnummer as p}from"./formatters/kortnummer/formatKortnummer.js";import{TELEFONNUMMER_REGEX as g,formatTelefonnummer as R}from"./formatters/telefonnummer/formatTelefonnummer.js";import{formatValuta as j}from"./formatters/valuta/formatValuta.js";import{getThemeAndSize as M}from"./getThemeAndSize.js";import{mergeRefs as N}from"./mergeRefs.js";import{useMergeRefs as V}from"../hooks/useMergeRefs/useMergeRefs.js";import{mergeProps as O}from"./polymorphism/mergeProps.js";import{SlotComponent as h}from"./polymorphism/SlotComponent.js";import{initTabListener as S}from"./tabListener.js";import{isValidEpost as T}from"./validators/isValidEpost/isValidEpost.js";import{isValidTelefonnummer as v}from"./validators/isValidTelefonnummer/isValidTelefonnummer.js";import{isValidRegistreringsnummer as C}from"./validators/isValidRegistreringsnummer/isValidRegistreringsnummer.js";import{isValidChassisnummer as L}from"./validators/isValidChassisnummer/isValidChassisnummer.js";import{isExactLength as _}from"./validators/isExactLength/isExactLength.js";import{isInteger as A}from"./validators/isInteger/isInteger.js";import{isValidFodselsnummer as G}from"./validators/isValidFodselsnummer/isValidFodselsnummer.js";import{isValidOrganisasjonsnummer as I}from"./validators/isValidOrganisasjonsnummer/isValidOrganisasjonsnummer.js";import{isValidName as F}from"./validators/isValidName/isValidName.js";import{hasMinimumWords as b}from"./validators/hasMinimumWords/hasMinimumWords.js";import{hasNoIllegalCharacters as K}from"./validators/hasNoIllegalCharacters/hasNoIllegalCharacters.js";import{getValuePair as U}from"./valuePair.js";import{BRANDS as X,COLOR_MODES as c,COLOR_SCHEMES as D,SIZES as y}from"./types.js";export{X as BRANDS,c as COLOR_MODES,D as COLOR_SCHEMES,i as FODSELSNUMMER_REGEX,u as KONTONUMMER_REGEX,E as KORTNUMMER_REGEX,f as ORGANISASJONSNUMMER_REGEX,y as SIZES,h as SlotComponent,g as TELEFONNUMMER_REGEX,e as formatAvstand,o as formatBytes,t as formatDate,n as formatFodselsnummer,d as formatKontonummer,p as formatKortnummer,a as formatNumber,l as formatOrganisasjonsnummer,R as formatTelefonnummer,j as formatValuta,M as getThemeAndSize,U as getValuePair,b as hasMinimumWords,K as hasNoIllegalCharacters,S as initTabListener,_ as isExactLength,A as isInteger,L as isValidChassisnummer,T as isValidEpost,G as isValidFodselsnummer,F as isValidName,I as isValidOrganisasjonsnummer,C as isValidRegistreringsnummer,v as isValidTelefonnummer,O as mergeProps,N as mergeRefs,r as parseNumber,m as registerWithMasks,s as unicode,V as useMergeRefs};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -5,8 +5,12 @@ export interface DataTestAutoId {
|
|
|
5
5
|
}
|
|
6
6
|
export declare const BRANDS: readonly ["dnb"];
|
|
7
7
|
export type Brand = (typeof BRANDS)[number];
|
|
8
|
-
export
|
|
9
|
-
export type
|
|
8
|
+
export declare const SIZES: readonly ["small", "medium", "large"];
|
|
9
|
+
export type Size = (typeof SIZES)[number];
|
|
10
|
+
export declare const COLOR_SCHEMES: readonly ["light", "dark"];
|
|
11
|
+
export type ColorScheme = (typeof COLOR_SCHEMES)[number];
|
|
12
|
+
export declare const COLOR_MODES: readonly ["error", "success", "warning", "info"];
|
|
13
|
+
export type ColorMode = (typeof COLOR_MODES)[number];
|
|
10
14
|
/**
|
|
11
15
|
* Eksplisitte typer for modusene som brukes i Jøkul, slik at de kan brukes aktivt i komponentene
|
|
12
16
|
* @example type Props = { myProp: string } & JokulModes;
|
|
@@ -16,6 +20,7 @@ export interface JokulModes {
|
|
|
16
20
|
"data-brand"?: Brand;
|
|
17
21
|
"data-size"?: Size;
|
|
18
22
|
"data-theme"?: ColorScheme;
|
|
23
|
+
"data-color"?: ColorMode;
|
|
19
24
|
}
|
|
20
25
|
export type Easing = keyof typeof tokens.motion.easing;
|
|
21
26
|
export type Timing = keyof typeof tokens.motion.timing;
|
|
@@ -51,3 +56,32 @@ export interface WithChildren {
|
|
|
51
56
|
export interface WithOptionalChildren {
|
|
52
57
|
children?: ReactNode | ReactNode[];
|
|
53
58
|
}
|
|
59
|
+
/**
|
|
60
|
+
* @see WithReadOnly
|
|
61
|
+
*/
|
|
62
|
+
export interface WithDisabled {
|
|
63
|
+
/**
|
|
64
|
+
* Deaktiverer kontrollen.
|
|
65
|
+
*
|
|
66
|
+
* Bruk den bare i interne verktøy, aldri i kundeflyter. En deaktivert kontroll
|
|
67
|
+
* forklarer ikke hvorfor den er låst eller hva som må til for å låse den opp,
|
|
68
|
+
* og den dempede kontrasten gjør den vanskelig å lese. Skal et valg ikke være
|
|
69
|
+
* tilgjengelig for kunden, la det heller være ute av skjemaet, eller forklar
|
|
70
|
+
* kravet med `description` eller `errorLabel`.
|
|
71
|
+
*/
|
|
72
|
+
disabled?: boolean;
|
|
73
|
+
}
|
|
74
|
+
/**
|
|
75
|
+
* @see WithDisabled
|
|
76
|
+
*/
|
|
77
|
+
export interface WithReadOnly {
|
|
78
|
+
/**
|
|
79
|
+
* Gjør kontrollen uredigerbar. Verdien beholder full tekstkontrast, og feltet
|
|
80
|
+
* kan fortsatt fokuseres og kopieres fra.
|
|
81
|
+
*
|
|
82
|
+
* Bruk den bare i interne verktøy, aldri i kundeflyter. Kunden får ikke vite
|
|
83
|
+
* hvorfor feltet er låst eller hva som må til for å endre det. Skal en verdi
|
|
84
|
+
* bare vises i en kundeflyt, vis den som tekst framfor som et låst skjemafelt.
|
|
85
|
+
*/
|
|
86
|
+
readOnly?: boolean;
|
|
87
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const
|
|
1
|
+
const s=["dnb"],a=["small","medium","large"],r=["light","dark"],S=["error","success","warning","info"];export{s as BRANDS,S as COLOR_MODES,r as COLOR_SCHEMES,a as SIZES};
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sources":["../../../src/utilities/types.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\n// @ts-ignore Typescript vil klage her dersom ikke tokens er bygget ennå\nimport type { default as tokens } from \"../tokens.js\";\n\n// Brukes til å extende props for komponenter som skal støtte data-testautoid ifbm. Test Complete\nexport interface DataTestAutoId {\n \"data-testautoid\"?: string;\n}\n\nexport const BRANDS = [\"dnb\"] as const;\nexport type Brand = (typeof BRANDS)[number];\nexport
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../src/utilities/types.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\n// @ts-ignore Typescript vil klage her dersom ikke tokens er bygget ennå\nimport type { default as tokens } from \"../tokens.js\";\n\n// Brukes til å extende props for komponenter som skal støtte data-testautoid ifbm. Test Complete\nexport interface DataTestAutoId {\n \"data-testautoid\"?: string;\n}\n\nexport const BRANDS = [\"dnb\"] as const;\nexport type Brand = (typeof BRANDS)[number];\n\nexport const SIZES = [\"small\", \"medium\", \"large\"] as const;\nexport type Size = (typeof SIZES)[number];\n\nexport const COLOR_SCHEMES = [\"light\", \"dark\"] as const;\nexport type ColorScheme = (typeof COLOR_SCHEMES)[number];\n\nexport const COLOR_MODES = [\"error\", \"success\", \"warning\", \"info\"] as const;\nexport type ColorMode = (typeof COLOR_MODES)[number];\n\n/**\n * Eksplisitte typer for modusene som brukes i Jøkul, slik at de kan brukes aktivt i komponentene\n * @example type Props = { myProp: string } & JokulModes;\n * @example interface Props extends JokulModes { myProp: string };\n */\nexport interface JokulModes {\n \"data-brand\"?: Brand;\n \"data-size\"?: Size;\n \"data-theme\"?: ColorScheme;\n \"data-color\"?: ColorMode;\n}\n\nexport type Easing = keyof typeof tokens.motion.easing;\nexport type Timing = keyof typeof tokens.motion.timing;\n\n/**\n * Etter React 18 er ikke children lenger en _implicit type_. Tanken er at\n * TypeScript skal kunne oppdage når komponenten forventer children og ikke\n * får det, eller at komponenten blir _gitt_ children men ikke forventer det.\n *\n * Om komponenten din ikke tar i mot children er det i prinsippet ikke noe du\n * trenger å gjøre. Om den derimot tar i mot children bør du spesifisere det.\n * Dersom de er valgfrie (for eksempel om du har en standardverdi) bruker du\n * WithOptionalChildren.\n *\n * @see WithOptionalChildren\n * @see https://solverfox.dev/writing/no-implicit-children/\n */\nexport interface WithChildren {\n children: ReactNode | ReactNode[];\n}\n\n/**\n * Etter React 18 er ikke children lenger en _implicit type_. Tanken er at\n * TypeScript skal kunne oppdage når komponenten forventer children og ikke\n * får det, eller at komponenten blir _gitt_ children men ikke forventer det.\n *\n * Om komponenten din ikke tar i mot children er det i prinsippet ikke noe du\n * trenger å gjøre. Om den derimot tar i mot children bør du spesifisere det.\n *\n * Om du alltid forventer å få children, bruk WithChildren.\n *\n * @see WithChildren\n * @see https://solverfox.dev/writing/no-implicit-children/\n */\nexport interface WithOptionalChildren {\n children?: ReactNode | ReactNode[];\n}\n\n/**\n * @see WithReadOnly\n */\nexport interface WithDisabled {\n /**\n * Deaktiverer kontrollen.\n *\n * Bruk den bare i interne verktøy, aldri i kundeflyter. En deaktivert kontroll\n * forklarer ikke hvorfor den er låst eller hva som må til for å låse den opp,\n * og den dempede kontrasten gjør den vanskelig å lese. Skal et valg ikke være\n * tilgjengelig for kunden, la det heller være ute av skjemaet, eller forklar\n * kravet med `description` eller `errorLabel`.\n */\n disabled?: boolean;\n}\n\n/**\n * @see WithDisabled\n */\nexport interface WithReadOnly {\n /**\n * Gjør kontrollen uredigerbar. Verdien beholder full tekstkontrast, og feltet\n * kan fortsatt fokuseres og kopieres fra.\n *\n * Bruk den bare i interne verktøy, aldri i kundeflyter. Kunden får ikke vite\n * hvorfor feltet er låst eller hva som må til for å endre det. Skal en verdi\n * bare vises i en kundeflyt, vis den som tekst framfor som et låst skjemafelt.\n */\n readOnly?: boolean;\n}\n"],"names":["BRANDS","SIZES","COLOR_SCHEMES","COLOR_MODES"],"mappings":"AASO,MAAMA,EAAS,CAAC,OAGVC,EAAQ,CAAC,QAAS,SAAU,SAG5BC,EAAgB,CAAC,QAAS,QAG1BC,EAAc,CAAC,QAAS,UAAW,UAAW"}
|