@oslokommune/punkt-react 16.9.0 → 16.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +36 -0
- package/dist/index.d.ts +24 -24
- package/dist/punkt-react.es.js +14 -14
- package/dist/punkt-react.umd.js +8 -9
- package/dist/shared-types/aria.d.ts +65 -0
- package/dist/shared-types/booleanish.d.ts +13 -0
- package/dist/shared-types/calendar.d.ts +41 -0
- package/dist/shared-types/combobox.d.ts +34 -0
- package/dist/shared-types/datepicker.d.ts +46 -0
- package/dist/shared-types/form.d.ts +16 -0
- package/dist/shared-types/header.d.ts +88 -0
- package/dist/shared-types/heading.d.ts +9 -0
- package/dist/shared-types/index.d.ts +17 -0
- package/dist/shared-types/layout.d.ts +26 -0
- package/dist/shared-types/progressbar.d.ts +5 -0
- package/dist/shared-types/size.d.ts +18 -0
- package/dist/shared-types/skin.d.ts +24 -0
- package/dist/shared-types/timepicker.d.ts +20 -0
- package/dist/shared-utils/calendar/calendar-grid.d.ts +16 -0
- package/dist/shared-utils/calendar/date-validation.d.ts +22 -0
- package/dist/shared-utils/calendar/index.d.ts +10 -0
- package/dist/shared-utils/calendar/keyboard-navigation.d.ts +16 -0
- package/dist/shared-utils/calendar/selection-manager.d.ts +30 -0
- package/dist/shared-utils/combobox/index.d.ts +10 -0
- package/dist/shared-utils/combobox/input-utils.d.ts +38 -0
- package/dist/shared-utils/combobox/keyboard-navigation.d.ts +39 -0
- package/dist/shared-utils/combobox/option-utils.d.ts +50 -0
- package/dist/shared-utils/combobox/selection-manager.d.ts +71 -0
- package/dist/shared-utils/combobox/typeahead.d.ts +24 -0
- package/dist/shared-utils/date-utils.d.ts +138 -0
- package/dist/shared-utils/datepicker-utils.d.ts +73 -0
- package/dist/shared-utils/device-utils.d.ts +10 -0
- package/dist/shared-utils/timepicker/index.d.ts +6 -0
- package/dist/shared-utils/timepicker/options.d.ts +19 -0
- package/dist/shared-utils/timepicker/stepper.d.ts +20 -0
- package/dist/shared-utils/timepicker/time-utils.d.ts +19 -0
- package/dist/shared-utils/utils.d.ts +16 -0
- package/dist/shared-utils/value-utils.d.ts +17 -0
- package/package.json +5 -5
- package/src/components/modal/Modal.tsx +1 -1
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* aria.ts
|
|
3
|
+
*
|
|
4
|
+
* Type definitions for ARIA attributes and roles.
|
|
5
|
+
* These follow the WAI-ARIA specification and are used across all Punkt components.
|
|
6
|
+
*/
|
|
7
|
+
export type TAriaBoolean = boolean | 'true' | 'false';
|
|
8
|
+
export type TAriaBooleanMixed = TAriaBoolean | 'mixed';
|
|
9
|
+
export type TAriaCurrent = TAriaBoolean | 'page' | 'step' | 'location' | 'date' | 'time';
|
|
10
|
+
export type TAriaHasPopup = TAriaBoolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
|
|
11
|
+
export type TAriaInvalid = TAriaBoolean | 'grammar' | 'spelling';
|
|
12
|
+
export type TAriaLive = 'off' | 'polite' | 'assertive';
|
|
13
|
+
export type TAriaRelevant = 'additions' | 'removals' | 'text' | 'all';
|
|
14
|
+
export type TAriaSort = 'none' | 'ascending' | 'descending' | 'other';
|
|
15
|
+
export type TAriaAutoComplete = 'none' | 'inline' | 'list' | 'both';
|
|
16
|
+
export type TAriaOrientation = 'horizontal' | 'vertical';
|
|
17
|
+
export interface IAriaAttributes {
|
|
18
|
+
'aria-activedescendant'?: string;
|
|
19
|
+
'aria-controls'?: string;
|
|
20
|
+
'aria-describedby'?: string;
|
|
21
|
+
'aria-details'?: string;
|
|
22
|
+
'aria-errormessage'?: string;
|
|
23
|
+
'aria-flowto'?: string;
|
|
24
|
+
'aria-label'?: string;
|
|
25
|
+
'aria-labelledby'?: string;
|
|
26
|
+
'aria-owns'?: string;
|
|
27
|
+
'aria-roledescription'?: string;
|
|
28
|
+
'aria-autocomplete'?: TAriaAutoComplete;
|
|
29
|
+
'aria-checked'?: TAriaBooleanMixed;
|
|
30
|
+
'aria-current'?: TAriaCurrent;
|
|
31
|
+
'aria-disabled'?: TAriaBoolean;
|
|
32
|
+
'aria-expanded'?: TAriaBoolean;
|
|
33
|
+
'aria-haspopup'?: TAriaHasPopup;
|
|
34
|
+
'aria-hidden'?: TAriaBoolean;
|
|
35
|
+
'aria-invalid'?: TAriaInvalid;
|
|
36
|
+
'aria-keyshortcuts'?: string;
|
|
37
|
+
'aria-level'?: number;
|
|
38
|
+
'aria-modal'?: TAriaBoolean;
|
|
39
|
+
'aria-multiline'?: TAriaBoolean;
|
|
40
|
+
'aria-multiselectable'?: TAriaBoolean;
|
|
41
|
+
'aria-orientation'?: TAriaOrientation;
|
|
42
|
+
'aria-placeholder'?: string;
|
|
43
|
+
'aria-pressed'?: TAriaBooleanMixed;
|
|
44
|
+
'aria-readonly'?: TAriaBoolean;
|
|
45
|
+
'aria-required'?: TAriaBoolean;
|
|
46
|
+
'aria-selected'?: TAriaBoolean;
|
|
47
|
+
'aria-sort'?: TAriaSort;
|
|
48
|
+
'aria-atomic'?: TAriaBoolean;
|
|
49
|
+
'aria-busy'?: TAriaBoolean;
|
|
50
|
+
'aria-live'?: TAriaLive;
|
|
51
|
+
'aria-relevant'?: TAriaRelevant | string;
|
|
52
|
+
'aria-colcount'?: number;
|
|
53
|
+
'aria-colindex'?: number;
|
|
54
|
+
'aria-colspan'?: number;
|
|
55
|
+
'aria-rowcount'?: number;
|
|
56
|
+
'aria-rowindex'?: number;
|
|
57
|
+
'aria-rowspan'?: number;
|
|
58
|
+
'aria-posinset'?: number;
|
|
59
|
+
'aria-setsize'?: number;
|
|
60
|
+
'aria-valuemax'?: number;
|
|
61
|
+
'aria-valuemin'?: number;
|
|
62
|
+
'aria-valuenow'?: number;
|
|
63
|
+
'aria-valuetext'?: string;
|
|
64
|
+
}
|
|
65
|
+
export type TAlertRole = 'alert' | 'status';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Booleanish type that accepts boolean or string "true"/"false"
|
|
3
|
+
* This allows attributes to be set as strings in HTML
|
|
4
|
+
*/
|
|
5
|
+
export type Booleanish = boolean | 'true' | 'false';
|
|
6
|
+
/**
|
|
7
|
+
* Converter for booleanish attributes
|
|
8
|
+
* Converts string "true"/"false" to boolean values
|
|
9
|
+
*/
|
|
10
|
+
export declare const booleanishConverter: {
|
|
11
|
+
fromAttribute(value: string | boolean | null): boolean;
|
|
12
|
+
toAttribute(value: boolean): string | null;
|
|
13
|
+
};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* calendar.ts
|
|
3
|
+
*
|
|
4
|
+
* Type definitions for the calendar component.
|
|
5
|
+
* Used by both Elements and React calendar implementations
|
|
6
|
+
* and by the shared calendar helper functions.
|
|
7
|
+
*/
|
|
8
|
+
export interface IDateConstraints {
|
|
9
|
+
earliest: string | null;
|
|
10
|
+
latest: string | null;
|
|
11
|
+
excludedates: Date[];
|
|
12
|
+
excludeweekdays: string[];
|
|
13
|
+
}
|
|
14
|
+
export interface ICalendarGridDimensions {
|
|
15
|
+
firstDayOfMonth: Date;
|
|
16
|
+
lastDayOfMonth: Date;
|
|
17
|
+
startingDay: number;
|
|
18
|
+
numDays: number;
|
|
19
|
+
numRows: number;
|
|
20
|
+
numDaysPrevMonth: number;
|
|
21
|
+
initialWeek: number;
|
|
22
|
+
}
|
|
23
|
+
export interface IGridCellPosition {
|
|
24
|
+
rowIndex: number;
|
|
25
|
+
colIndex: number;
|
|
26
|
+
}
|
|
27
|
+
export type TDateRangeMap = {
|
|
28
|
+
[key: string]: boolean;
|
|
29
|
+
};
|
|
30
|
+
export interface ISelectionState {
|
|
31
|
+
selected: string[];
|
|
32
|
+
_selected: Date[];
|
|
33
|
+
inRange: TDateRangeMap;
|
|
34
|
+
}
|
|
35
|
+
export interface ISelectionOptions {
|
|
36
|
+
multiple: boolean;
|
|
37
|
+
maxMultiple: number;
|
|
38
|
+
range: boolean;
|
|
39
|
+
excludedates: Date[];
|
|
40
|
+
excludeweekdays: string[];
|
|
41
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* combobox.ts
|
|
3
|
+
*
|
|
4
|
+
* Type definitions for the combobox and listbox components.
|
|
5
|
+
* Used by both Elements and React implementations
|
|
6
|
+
* and by the shared combobox helper functions.
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* Tag skin colors available for combobox option tags.
|
|
10
|
+
* Matches the TTagSkin values from the tag component.
|
|
11
|
+
*/
|
|
12
|
+
export type TPktComboboxTagSkin = 'blue' | 'blue-dark' | 'blue-light' | 'green' | 'red' | 'yellow' | 'beige' | 'gray' | 'grey';
|
|
13
|
+
/**
|
|
14
|
+
* Represents a single option in a combobox or listbox.
|
|
15
|
+
*/
|
|
16
|
+
export interface IPktComboboxOption {
|
|
17
|
+
description?: string;
|
|
18
|
+
disabled?: boolean;
|
|
19
|
+
fulltext?: string;
|
|
20
|
+
label?: string;
|
|
21
|
+
prefix?: string;
|
|
22
|
+
selected?: boolean;
|
|
23
|
+
tagSkinColor?: TPktComboboxTagSkin;
|
|
24
|
+
userAdded?: boolean;
|
|
25
|
+
value: string;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* How the selected value is displayed in the combobox input.
|
|
29
|
+
*/
|
|
30
|
+
export type TPktComboboxDisplayValue = 'label' | 'value' | 'prefixAndValue';
|
|
31
|
+
/**
|
|
32
|
+
* Placement of selected value tags in multiple selection mode.
|
|
33
|
+
*/
|
|
34
|
+
export type TPktComboboxTagPlacement = 'inside' | 'outside';
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Internationalization strings for the datepicker component family.
|
|
3
|
+
* Shared between Elements and React packages.
|
|
4
|
+
*/
|
|
5
|
+
export interface IDatepickerStrings {
|
|
6
|
+
/** Calendar-related strings */
|
|
7
|
+
calendar?: {
|
|
8
|
+
/** Alt text for calendar button */
|
|
9
|
+
buttonAltText?: string;
|
|
10
|
+
};
|
|
11
|
+
/** Generic UI strings (used in range datepicker) */
|
|
12
|
+
generic?: {
|
|
13
|
+
/** Label for range start input */
|
|
14
|
+
from?: string;
|
|
15
|
+
/** Label for range end input */
|
|
16
|
+
to?: string;
|
|
17
|
+
};
|
|
18
|
+
/** Form validation messages */
|
|
19
|
+
forms?: {
|
|
20
|
+
messages?: {
|
|
21
|
+
/** Error message when date is before minimum */
|
|
22
|
+
rangeUnderflow?: string;
|
|
23
|
+
/** Error message when date is after maximum */
|
|
24
|
+
rangeOverflow?: string;
|
|
25
|
+
/** Error message for invalid date format */
|
|
26
|
+
badInput?: string;
|
|
27
|
+
/** Error message when required field is empty */
|
|
28
|
+
valueMissing?: string;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
/** Date-related strings */
|
|
32
|
+
dates?: {
|
|
33
|
+
/** Month label */
|
|
34
|
+
month?: string;
|
|
35
|
+
/** Year label */
|
|
36
|
+
year?: string;
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* Default strings for single/multiple datepicker
|
|
41
|
+
*/
|
|
42
|
+
export declare const defaultSingleStrings: IDatepickerStrings;
|
|
43
|
+
/**
|
|
44
|
+
* Default strings for range datepicker
|
|
45
|
+
*/
|
|
46
|
+
export declare const defaultRangeStrings: IDatepickerStrings;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* form.ts
|
|
3
|
+
*
|
|
4
|
+
* Type definitions for HTML form elements and controls.
|
|
5
|
+
* These follow HTML standards for form element types.
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* HTML button type attribute values
|
|
9
|
+
* Used for <button type="..."> and similar elements
|
|
10
|
+
*/
|
|
11
|
+
export type THTMLButtonType = 'button' | 'submit' | 'reset';
|
|
12
|
+
/**
|
|
13
|
+
* Selection mode for form controls
|
|
14
|
+
* Used in components that support single, multiple, or range selection
|
|
15
|
+
*/
|
|
16
|
+
export type TSelectionMode = 'single' | 'multiple' | 'range';
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* header.ts
|
|
3
|
+
*
|
|
4
|
+
* Type definitions for header-related domain models.
|
|
5
|
+
* These represent user, organization, and menu item data structures.
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* User object containing information about the logged-in user
|
|
9
|
+
*/
|
|
10
|
+
export interface User {
|
|
11
|
+
/** Full name of the user */
|
|
12
|
+
name: string;
|
|
13
|
+
/** Short name or initials (deprecated) */
|
|
14
|
+
shortname?: string;
|
|
15
|
+
/** Last login timestamp (ISO string or Date) */
|
|
16
|
+
lastLoggedIn?: Date | string;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Representation object containing information about the organization/entity being represented
|
|
20
|
+
*/
|
|
21
|
+
export interface Representing {
|
|
22
|
+
/** Name of the organization or entity */
|
|
23
|
+
name: string;
|
|
24
|
+
/** Short name or initials (deprecated) */
|
|
25
|
+
shortname?: string;
|
|
26
|
+
/** Organization number */
|
|
27
|
+
orgNumber?: string | number;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Menu item in the user menu
|
|
31
|
+
* The iconName will be typed as PktIconName in package-specific implementations
|
|
32
|
+
*/
|
|
33
|
+
export interface UserMenuItem<IconType = string> {
|
|
34
|
+
/** Icon name to display */
|
|
35
|
+
iconName?: IconType;
|
|
36
|
+
/** Text for the menu item */
|
|
37
|
+
title: string;
|
|
38
|
+
/** Link URL or click handler function */
|
|
39
|
+
target: string | (() => void);
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Internal type for rendering links/buttons (supports both href and onClick)
|
|
43
|
+
* Base interface for discriminated union
|
|
44
|
+
*/
|
|
45
|
+
export interface InternalMenuItemBase<IconType = string> {
|
|
46
|
+
title: string;
|
|
47
|
+
iconName?: IconType;
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
* Internal menu item that is a link
|
|
51
|
+
*/
|
|
52
|
+
export interface InternalMenuLink<IconType = string> extends InternalMenuItemBase<IconType> {
|
|
53
|
+
href: string;
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* Internal menu item that is a button
|
|
57
|
+
*/
|
|
58
|
+
export interface InternalMenuButton<IconType = string> extends InternalMenuItemBase<IconType> {
|
|
59
|
+
onClick: () => void;
|
|
60
|
+
}
|
|
61
|
+
/**
|
|
62
|
+
* Union type for internal menu items (discriminated by href vs onClick)
|
|
63
|
+
*/
|
|
64
|
+
export type TInternalMenuItem<IconType = string> = InternalMenuLink<IconType> | InternalMenuButton<IconType>;
|
|
65
|
+
/**
|
|
66
|
+
* Helper to convert UserMenuItem (with target) to internal format
|
|
67
|
+
*/
|
|
68
|
+
export declare const convertUserMenuItem: <IconType = string>(item: UserMenuItem<IconType>) => TInternalMenuItem<IconType>;
|
|
69
|
+
/**
|
|
70
|
+
* Variant for the slot menu button in tablet/mobile mode
|
|
71
|
+
*/
|
|
72
|
+
export type TSlotMenuVariant = 'icon-only' | 'icon-right';
|
|
73
|
+
/**
|
|
74
|
+
* Type for which menu is currently open in the header
|
|
75
|
+
*/
|
|
76
|
+
export type THeaderMenu = 'none' | 'slot' | 'search' | 'user';
|
|
77
|
+
/**
|
|
78
|
+
* Placement options for the logout button
|
|
79
|
+
*/
|
|
80
|
+
export type TLogOutButtonPlacement = 'userMenu' | 'header' | 'both' | 'none';
|
|
81
|
+
/**
|
|
82
|
+
* Position options for the header
|
|
83
|
+
*/
|
|
84
|
+
export type THeaderPosition = 'fixed' | 'relative';
|
|
85
|
+
/**
|
|
86
|
+
* Scroll behavior options for the header
|
|
87
|
+
*/
|
|
88
|
+
export type THeaderScrollBehavior = 'hide' | 'none';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* heading.ts
|
|
3
|
+
*
|
|
4
|
+
* Type definitions for heading-related types.
|
|
5
|
+
* These represent HTML heading semantics (h1-h6) and typography scales.
|
|
6
|
+
*/
|
|
7
|
+
export type THeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
|
|
8
|
+
export type THeadingSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
|
|
9
|
+
export type THeadingWeight = 'light' | 'regular' | 'medium' | 'bold';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export type { Booleanish } from './booleanish';
|
|
2
|
+
export { booleanishConverter } from './booleanish';
|
|
3
|
+
export type { TAriaBoolean, TAriaBooleanMixed, TAriaCurrent, TAriaHasPopup, TAriaInvalid, TAriaLive, TAriaRelevant, TAriaSort, TAriaAutoComplete, TAriaOrientation, IAriaAttributes, TAlertRole, } from './aria';
|
|
4
|
+
export type { THeadingLevel, THeadingSize, THeadingWeight } from './heading';
|
|
5
|
+
export type { User, Representing, UserMenuItem, InternalMenuItemBase, InternalMenuLink, InternalMenuButton, TInternalMenuItem, TSlotMenuVariant, THeaderMenu, TLogOutButtonPlacement, THeaderPosition, THeaderScrollBehavior, } from './header';
|
|
6
|
+
export { convertUserMenuItem } from './header';
|
|
7
|
+
export type { TLayout, TVerticalPosition, THorizontalPosition, TPosition, TPositionWithCenter, } from './layout';
|
|
8
|
+
export type { THTMLButtonType, TSelectionMode } from './form';
|
|
9
|
+
export type { TSize3, TSize5, TSize7 } from './size';
|
|
10
|
+
export type { TAlertSkin, TMessageboxSkin, TAccordionSkin, TCardSkin } from './skin';
|
|
11
|
+
export type { IDateConstraints, ICalendarGridDimensions, IGridCellPosition, TDateRangeMap, ISelectionState, ISelectionOptions, } from './calendar';
|
|
12
|
+
export type { IDatepickerStrings } from './datepicker';
|
|
13
|
+
export { defaultSingleStrings, defaultRangeStrings } from './datepicker';
|
|
14
|
+
export type { ITimepickerStrings } from './timepicker';
|
|
15
|
+
export { defaultTimepickerStrings } from './timepicker';
|
|
16
|
+
export type { TProgressbarRole, TProgressbarSkin, TProgressbarStatusPlacement, TProgressbarStatusType, TProgressbarTitlePosition, } from './progressbar';
|
|
17
|
+
export type { IPktComboboxOption, TPktComboboxTagSkin, TPktComboboxDisplayValue, TPktComboboxTagPlacement, } from './combobox';
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* layout.ts
|
|
3
|
+
*
|
|
4
|
+
* Type definitions for layout and positioning.
|
|
5
|
+
* These represent common layout patterns used across components.
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* Layout direction - vertical or horizontal orientation
|
|
9
|
+
*/
|
|
10
|
+
export type TLayout = 'vertical' | 'horizontal';
|
|
11
|
+
/**
|
|
12
|
+
* Generic positioning type for top/bottom placement
|
|
13
|
+
*/
|
|
14
|
+
export type TVerticalPosition = 'top' | 'bottom';
|
|
15
|
+
/**
|
|
16
|
+
* Generic positioning type for left/right placement
|
|
17
|
+
*/
|
|
18
|
+
export type THorizontalPosition = 'left' | 'right';
|
|
19
|
+
/**
|
|
20
|
+
* Generic positioning type for all four directions
|
|
21
|
+
*/
|
|
22
|
+
export type TPosition = 'top' | 'bottom' | 'left' | 'right';
|
|
23
|
+
/**
|
|
24
|
+
* Generic positioning including center
|
|
25
|
+
*/
|
|
26
|
+
export type TPositionWithCenter = TPosition | 'center';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export type TProgressbarRole = 'progressbar' | 'meter';
|
|
2
|
+
export type TProgressbarSkin = 'dark-blue' | 'light-blue' | 'green' | 'red';
|
|
3
|
+
export type TProgressbarStatusPlacement = 'center' | 'left' | 'following';
|
|
4
|
+
export type TProgressbarStatusType = 'none' | 'percentage' | 'fraction';
|
|
5
|
+
export type TProgressbarTitlePosition = 'left' | 'center';
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* size.ts
|
|
3
|
+
*
|
|
4
|
+
* Type definitions for sizing scales.
|
|
5
|
+
* These represent common size scales used across the design system.
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* Standard 3-level size scale
|
|
9
|
+
*/
|
|
10
|
+
export type TSize3 = 'small' | 'medium' | 'large';
|
|
11
|
+
/**
|
|
12
|
+
* Extended 5-level size scale
|
|
13
|
+
*/
|
|
14
|
+
export type TSize5 = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
|
|
15
|
+
/**
|
|
16
|
+
* Full 7-level size scale
|
|
17
|
+
*/
|
|
18
|
+
export type TSize7 = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* skin.ts
|
|
3
|
+
*
|
|
4
|
+
* Type definitions for component skin/color variants.
|
|
5
|
+
* Only includes skin types that are identical across packages.
|
|
6
|
+
* Component-specific skin types should remain in their respective component files.
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* Alert component skin variants
|
|
10
|
+
* Used for semantic color coding of alerts (error, success, warning, info)
|
|
11
|
+
*/
|
|
12
|
+
export type TAlertSkin = 'error' | 'success' | 'warning' | 'info';
|
|
13
|
+
/**
|
|
14
|
+
* Messagebox component skin variants
|
|
15
|
+
*/
|
|
16
|
+
export type TMessageboxSkin = 'beige' | 'blue' | 'red' | 'green';
|
|
17
|
+
/**
|
|
18
|
+
* Accordion component skin variants
|
|
19
|
+
*/
|
|
20
|
+
export type TAccordionSkin = 'borderless' | 'outlined' | 'beige' | 'blue';
|
|
21
|
+
/**
|
|
22
|
+
* Card component skin variants
|
|
23
|
+
*/
|
|
24
|
+
export type TCardSkin = 'outlined' | 'outlined-beige' | 'gray' | 'beige' | 'green' | 'blue';
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* timepicker.ts
|
|
3
|
+
*
|
|
4
|
+
* Type definitions for the timepicker component.
|
|
5
|
+
* Used by both Elements and React implementations.
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* Translation strings for the timepicker component.
|
|
9
|
+
* Matches the shape of the `timepicker` key in no.json.
|
|
10
|
+
*/
|
|
11
|
+
export interface ITimepickerStrings {
|
|
12
|
+
hours: string;
|
|
13
|
+
minutes: string;
|
|
14
|
+
openPicker: string;
|
|
15
|
+
prevTime: string;
|
|
16
|
+
nextTime: string;
|
|
17
|
+
selectTime: string;
|
|
18
|
+
}
|
|
19
|
+
/** Default labels (Norwegian Bokmål), aligned with `packages/elements/src/translations/no.json`. */
|
|
20
|
+
export declare const defaultTimepickerStrings: ITimepickerStrings;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { ICalendarGridDimensions } from '../../shared-types/calendar';
|
|
2
|
+
export type { ICalendarGridDimensions, IGridCellPosition } from '../../shared-types/calendar';
|
|
3
|
+
export declare const DAYS_PER_WEEK = 7;
|
|
4
|
+
export declare const MONDAY_OFFSET = 6;
|
|
5
|
+
/**
|
|
6
|
+
* Calculate the dimensions and structure of the calendar grid
|
|
7
|
+
*/
|
|
8
|
+
export declare function calculateCalendarDimensions(year: number, month: number): ICalendarGridDimensions;
|
|
9
|
+
/**
|
|
10
|
+
* Determine what type of cell to render at a given position
|
|
11
|
+
*/
|
|
12
|
+
export declare function getCellType(rowIndex: number, colIndex: number, dayCounter: number, gridDimensions: ICalendarGridDimensions): 'prev-month' | 'current-month' | 'next-month';
|
|
13
|
+
/**
|
|
14
|
+
* Get the day number to display for a given cell
|
|
15
|
+
*/
|
|
16
|
+
export declare function getDayNumber(cellType: 'prev-month' | 'current-month' | 'next-month', colIndex: number, dayCounter: number, gridDimensions: ICalendarGridDimensions): number;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { IDateConstraints } from '../../shared-types/calendar';
|
|
2
|
+
export type { IDateConstraints } from '../../shared-types/calendar';
|
|
3
|
+
/**
|
|
4
|
+
* Check if a date is excluded based on constraints
|
|
5
|
+
*/
|
|
6
|
+
export declare function isDateExcluded(date: Date, constraints: IDateConstraints): boolean;
|
|
7
|
+
/**
|
|
8
|
+
* Check if a day should be disabled for selection
|
|
9
|
+
*/
|
|
10
|
+
export declare function isDayDisabled(date: Date, isSelected: boolean, constraints: IDateConstraints, options: {
|
|
11
|
+
multiple: boolean;
|
|
12
|
+
maxMultiple: number;
|
|
13
|
+
selectedCount: number;
|
|
14
|
+
}): boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Check if navigation to previous month is allowed
|
|
17
|
+
*/
|
|
18
|
+
export declare function isPrevMonthAllowed(year: number, month: number, earliest: string | null): boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Check if navigation to next month is allowed
|
|
21
|
+
*/
|
|
22
|
+
export declare function isNextMonthAllowed(year: number, month: number, latest: string | null): boolean;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Calendar Helper Exports
|
|
3
|
+
*
|
|
4
|
+
* This module re-exports all calendar helper functions and types
|
|
5
|
+
* to provide a single import point for calendar-related utilities.
|
|
6
|
+
*/
|
|
7
|
+
export { isDateExcluded, isDayDisabled, isPrevMonthAllowed, isNextMonthAllowed, type IDateConstraints, } from './date-validation';
|
|
8
|
+
export { DAYS_PER_WEEK, MONDAY_OFFSET, calculateCalendarDimensions, getCellType, getDayNumber, type ICalendarGridDimensions, type IGridCellPosition, } from './calendar-grid';
|
|
9
|
+
export { convertSelectedToDates, updateRangeMap, isRangeAllowed, addToSelection, removeFromSelection, toggleSelection, handleRangeSelection, type TDateRangeMap, type ISelectionState, type ISelectionOptions, } from './selection-manager';
|
|
10
|
+
export { KEY_DIRECTION_MAP, shouldIgnoreKeyboardEvent, findNextSelectableDate, getKeyDirection, } from './keyboard-navigation';
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Keyboard navigation helpers for calendar component
|
|
3
|
+
*/
|
|
4
|
+
export declare const KEY_DIRECTION_MAP: Record<string, number>;
|
|
5
|
+
/**
|
|
6
|
+
* Check if a keyboard event should be ignored
|
|
7
|
+
*/
|
|
8
|
+
export declare function shouldIgnoreKeyboardEvent(target: HTMLElement): boolean;
|
|
9
|
+
/**
|
|
10
|
+
* Find the next selectable date in a given direction
|
|
11
|
+
*/
|
|
12
|
+
export declare function findNextSelectableDate(startDate: Date, direction: number, querySelector: (selector: string) => Element | null): Date | null;
|
|
13
|
+
/**
|
|
14
|
+
* Get the direction for a keyboard event
|
|
15
|
+
*/
|
|
16
|
+
export declare function getKeyDirection(key: string): number | null;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { TDateRangeMap, ISelectionOptions } from '../../shared-types/calendar';
|
|
2
|
+
export type { TDateRangeMap, ISelectionState, ISelectionOptions } from '../../shared-types/calendar';
|
|
3
|
+
/**
|
|
4
|
+
* Convert selected string array to Date array
|
|
5
|
+
*/
|
|
6
|
+
export declare function convertSelectedToDates(selected: string | string[]): Date[];
|
|
7
|
+
/**
|
|
8
|
+
* Update the range map for visualizing date ranges
|
|
9
|
+
*/
|
|
10
|
+
export declare function updateRangeMap(start: Date, end: Date): TDateRangeMap;
|
|
11
|
+
/**
|
|
12
|
+
* Check if a range selection is allowed (no excluded dates in between)
|
|
13
|
+
*/
|
|
14
|
+
export declare function isRangeAllowed(date: Date, selectedDates: Date[], excludedates: Date[], excludeweekdays: string[]): boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Add a date to the selection
|
|
17
|
+
*/
|
|
18
|
+
export declare function addToSelection(selectedDate: Date, currentSelected: string[]): string[];
|
|
19
|
+
/**
|
|
20
|
+
* Remove a date from the selection
|
|
21
|
+
*/
|
|
22
|
+
export declare function removeFromSelection(selectedDate: Date, currentSelected: string[]): string[];
|
|
23
|
+
/**
|
|
24
|
+
* Toggle a date in the selection
|
|
25
|
+
*/
|
|
26
|
+
export declare function toggleSelection(selectedDate: Date, currentSelected: string[], maxMultiple: number): string[];
|
|
27
|
+
/**
|
|
28
|
+
* Handle range selection logic
|
|
29
|
+
*/
|
|
30
|
+
export declare function handleRangeSelection(selectedDate: Date, currentSelected: string[], options: Pick<ISelectionOptions, 'excludedates' | 'excludeweekdays'>): string[];
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared combobox utilities for use by both Elements and React packages.
|
|
3
|
+
*/
|
|
4
|
+
export { findOptionByValue, findOptionIndex, filterOptionsBySearch, buildFulltext, isMaxSelectionReached, getOptionDisplayText, parseValueToArray, findTypeaheadMatches, getSearchInfoMessage, } from './option-utils';
|
|
5
|
+
export { selectOption, deselectOption, selectAllOptions, clearAllSelections, createUserOption, toggleSelection, } from './selection-manager';
|
|
6
|
+
export type { IToggleSelectionConfig, IToggleSelectionResult } from './selection-manager';
|
|
7
|
+
export { isLetterOrSpace, createTypeaheadHandler, findTypeaheadOptionMatch } from './typeahead';
|
|
8
|
+
export { getInputKeyAction, isArrowToggleKey, getInputValueAction, checkForMatches, getSingleValueForInput, } from './input-utils';
|
|
9
|
+
export type { TInputKeyAction, TFocusOutAction, IFocusOutResult, ICheckForMatchesResult, } from './input-utils';
|
|
10
|
+
export { focusAndScrollIntoView, getOptionElements, focusNextOption, focusPreviousOption, focusFirstOption, focusLastOption, focusFirstOrSelectedOption, } from './keyboard-navigation';
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared combobox input utility functions used by both Elements and React packages.
|
|
3
|
+
* Covers keyboard actions, focus-out validation, match checking, and input display.
|
|
4
|
+
*/
|
|
5
|
+
import type { IPktComboboxOption } from '../../shared-types/combobox';
|
|
6
|
+
export type TInputKeyAction = 'addValue' | 'focusListbox' | 'closeOptions' | null;
|
|
7
|
+
/**
|
|
8
|
+
* Determines the action for a keydown event on the combobox input.
|
|
9
|
+
*/
|
|
10
|
+
export declare const getInputKeyAction: (key: string, shiftKey: boolean, multiple: boolean) => TInputKeyAction;
|
|
11
|
+
/**
|
|
12
|
+
* Determines if a key is an arrow/toggle key for select-only mode.
|
|
13
|
+
*/
|
|
14
|
+
export declare const isArrowToggleKey: (key: string) => boolean;
|
|
15
|
+
export type TFocusOutAction = 'addUserValue' | 'selectOption' | 'removeValue' | 'none';
|
|
16
|
+
export interface IFocusOutResult {
|
|
17
|
+
action: TFocusOutAction;
|
|
18
|
+
value: string | null;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Determines what to do with the input value when focus leaves the combobox.
|
|
22
|
+
*/
|
|
23
|
+
export declare const getInputValueAction: (inputValue: string, currentValues: string[], options: IPktComboboxOption[], allowUserInput: boolean, multiple: boolean) => IFocusOutResult;
|
|
24
|
+
export interface ICheckForMatchesResult {
|
|
25
|
+
addValueText: string | null;
|
|
26
|
+
userInfoMessage: string;
|
|
27
|
+
shouldRemoveValue: boolean;
|
|
28
|
+
shouldResetInput: boolean;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Determines the info message and actions based on search input.
|
|
32
|
+
* Wraps getSearchInfoMessage, adding the empty-input case.
|
|
33
|
+
*/
|
|
34
|
+
export declare const checkForMatches: (inputValue: string, currentValues: string[], options: IPktComboboxOption[], allowUserInput: boolean, multiple: boolean) => ICheckForMatchesResult;
|
|
35
|
+
/**
|
|
36
|
+
* Determines what text to display in a single-select input for the given value.
|
|
37
|
+
*/
|
|
38
|
+
export declare const getSingleValueForInput: (value: string, options: IPktComboboxOption[], displayValueAs: string) => string;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared combobox keyboard navigation utility functions
|
|
3
|
+
* used by both Elements and React packages.
|
|
4
|
+
* Only framework-agnostic functions belong here.
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* Scrolls an element into view and focuses it.
|
|
8
|
+
*/
|
|
9
|
+
export declare const focusAndScrollIntoView: (element: HTMLElement) => void;
|
|
10
|
+
/**
|
|
11
|
+
* Gets all selectable option elements from a container.
|
|
12
|
+
*/
|
|
13
|
+
export declare const getOptionElements: (container: HTMLElement) => HTMLElement[];
|
|
14
|
+
/**
|
|
15
|
+
* Focuses the next sibling option.
|
|
16
|
+
*/
|
|
17
|
+
export declare const focusNextOption: (currentTarget: HTMLElement) => void;
|
|
18
|
+
/**
|
|
19
|
+
* Focuses the previous sibling option.
|
|
20
|
+
* Falls back to search input if at first option and search is present.
|
|
21
|
+
*/
|
|
22
|
+
export declare const focusPreviousOption: (currentTarget: HTMLElement, container: HTMLElement, includeSearch: boolean) => void;
|
|
23
|
+
/**
|
|
24
|
+
* Focuses the first option in the list.
|
|
25
|
+
*/
|
|
26
|
+
export declare const focusFirstOption: (container: HTMLElement) => void;
|
|
27
|
+
/**
|
|
28
|
+
* Focuses the last option in the list.
|
|
29
|
+
*/
|
|
30
|
+
export declare const focusLastOption: (container: HTMLElement) => void;
|
|
31
|
+
/**
|
|
32
|
+
* Focuses the first selected option, or falls back to search/new-option/first option.
|
|
33
|
+
*/
|
|
34
|
+
export declare const focusFirstOrSelectedOption: (container: HTMLElement, config: {
|
|
35
|
+
disabled: boolean;
|
|
36
|
+
allowUserInput: boolean;
|
|
37
|
+
customUserInput: string | null;
|
|
38
|
+
includeSearch: boolean;
|
|
39
|
+
}) => void;
|