@entur/table 4.9.14-beta.9 → 4.9.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +226 -13
- package/dist/styles.css +100 -118
- package/dist/table.cjs.js +437 -0
- package/dist/table.cjs.js.map +1 -0
- package/dist/table.esm.js +382 -439
- package/dist/table.esm.js.map +1 -1
- package/package.json +29 -19
- package/dist/DataCell.d.ts +0 -20
- package/dist/EditableCell.d.ts +0 -24
- package/dist/ExpandRowButton.d.ts +0 -7
- package/dist/ExpandableRow.d.ts +0 -12
- package/dist/HeaderCell.d.ts +0 -24
- package/dist/Table.d.ts +0 -21
- package/dist/TableBody.d.ts +0 -9
- package/dist/TableFooter.d.ts +0 -6
- package/dist/TableHead.d.ts +0 -8
- package/dist/TableRow.d.ts +0 -21
- package/dist/index.js +0 -8
- package/dist/table.cjs.development.js +0 -509
- package/dist/table.cjs.development.js.map +0 -1
- package/dist/table.cjs.production.min.js +0 -2
- package/dist/table.cjs.production.min.js.map +0 -1
- package/dist/useSortableTable.d.ts +0 -41
- package/dist/useTableKeyboardNavigation.d.ts +0 -14
package/dist/index.d.ts
CHANGED
|
@@ -1,13 +1,226 @@
|
|
|
1
|
-
import '
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
export
|
|
9
|
-
|
|
10
|
-
export
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
import { ButtonHTMLAttributes } from 'react';
|
|
2
|
+
import { default as default_2 } from 'react';
|
|
3
|
+
import { DetailedHTMLProps } from 'react';
|
|
4
|
+
|
|
5
|
+
/** @deprecated use variant="negative" instead */
|
|
6
|
+
declare const danger = "danger";
|
|
7
|
+
|
|
8
|
+
export declare const DataCell: default_2.ForwardRefExoticComponent<Omit<DataCellProps, "ref"> & default_2.RefAttributes<HTMLTableDataCellElement>>;
|
|
9
|
+
|
|
10
|
+
export declare type DataCellProps = {
|
|
11
|
+
/** Innholdet i tabellcellen */
|
|
12
|
+
children: default_2.ReactNode;
|
|
13
|
+
/** Ekstra klassenavn */
|
|
14
|
+
className?: string;
|
|
15
|
+
/** Størrelse som settes for DataCell for ulikt innhold av komponenter */
|
|
16
|
+
padding?: 'default' | 'checkbox' | 'radio' | 'overflow-menu';
|
|
17
|
+
/** @deprecated bruk variant */
|
|
18
|
+
status?: 'positive' | 'negative' | 'neutral';
|
|
19
|
+
/** Hvilken type status man vil vise */
|
|
20
|
+
variant?: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;
|
|
21
|
+
} & default_2.DetailedHTMLProps<default_2.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>;
|
|
22
|
+
|
|
23
|
+
export declare const EditableCell: default_2.FC<EditableCellProps>;
|
|
24
|
+
|
|
25
|
+
declare type EditableCellProps = {
|
|
26
|
+
/** Ekstra klassenavn */
|
|
27
|
+
className?: string;
|
|
28
|
+
/** Inputelementet som skal være i tabellcellen */
|
|
29
|
+
children: default_2.ReactElement;
|
|
30
|
+
/** Valideringsvariant for EditableCell */
|
|
31
|
+
variant?: VariantType | typeof error | typeof info_2;
|
|
32
|
+
/** Varselmelding, som vil komme som en Tooltip under EditableCell */
|
|
33
|
+
feedback?: string;
|
|
34
|
+
/** Om cellen skal vise omriss til enhver tid
|
|
35
|
+
* @default false
|
|
36
|
+
*/
|
|
37
|
+
outlined?: boolean;
|
|
38
|
+
[key: string]: any;
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
/** @deprecated use variant="negative" instead */
|
|
42
|
+
declare const error = "error";
|
|
43
|
+
|
|
44
|
+
export declare const ExpandableRow: default_2.FC<ExpandableRowProps>;
|
|
45
|
+
|
|
46
|
+
export declare type ExpandableRowProps = {
|
|
47
|
+
/** Antall kolonner tabellraden er */
|
|
48
|
+
colSpan: number;
|
|
49
|
+
/** Innholdet til ExpandableRow */
|
|
50
|
+
children: default_2.ReactNode;
|
|
51
|
+
/** Om ExpandableRow er åpen
|
|
52
|
+
* @default false
|
|
53
|
+
*/
|
|
54
|
+
open?: boolean;
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
export declare const ExpandRowButton: default_2.FC<ExpandRowButtonProps>;
|
|
58
|
+
|
|
59
|
+
export declare type ExpandRowButtonProps = {
|
|
60
|
+
open: boolean;
|
|
61
|
+
onClick: (e: default_2.MouseEvent) => void;
|
|
62
|
+
} & default_2.ButtonHTMLAttributes<HTMLButtonElement>;
|
|
63
|
+
|
|
64
|
+
export declare type ExternalSortConfig = {
|
|
65
|
+
/**
|
|
66
|
+
* @default ""
|
|
67
|
+
*/
|
|
68
|
+
key: string;
|
|
69
|
+
/** @default "none" */
|
|
70
|
+
order: 'ascending' | 'descending' | 'none';
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
export declare const HeaderCell: default_2.ForwardRefExoticComponent<Omit<HeaderCellProps, "ref"> & default_2.RefAttributes<HTMLTableCellElement>>;
|
|
74
|
+
|
|
75
|
+
export declare type HeaderCellProps = {
|
|
76
|
+
/** Kolonneoverskrift */
|
|
77
|
+
children: default_2.ReactNode;
|
|
78
|
+
/** Ekstra klassenavn */
|
|
79
|
+
className?: string;
|
|
80
|
+
/** Størrelse som settes for HeaderCell for ulikt innhold av komponenter */
|
|
81
|
+
padding?: 'default' | 'checkbox' | 'radio' | 'overflow-menu';
|
|
82
|
+
/** Ekstra props som kan sendes til sorteringsknappelementet. Benyttes via useSortableTable */
|
|
83
|
+
sortableButtonProps?: default_2.DetailedHTMLProps<default_2.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
|
|
84
|
+
/** Om komponenten brukes til sortering. Benytt via useSortableTable
|
|
85
|
+
* @default false
|
|
86
|
+
*/
|
|
87
|
+
sortable?: boolean;
|
|
88
|
+
/** Konfigurering og rekkefølgen på sortering. Benyttes via useSortableTable */
|
|
89
|
+
sortConfig?: ExternalSortConfig;
|
|
90
|
+
/** Navnet det skal sorteres på. Benyttes via useSortableTable */
|
|
91
|
+
name?: string;
|
|
92
|
+
sortedAscendingAriaLabel?: string;
|
|
93
|
+
sortedDescendingAriaLabel?: string;
|
|
94
|
+
} & default_2.DetailedHTMLProps<default_2.ThHTMLAttributes<HTMLTableCellElement>, HTMLTableCellElement>;
|
|
95
|
+
|
|
96
|
+
/** @deprecated use variant="information" instead */
|
|
97
|
+
declare const info = "info";
|
|
98
|
+
|
|
99
|
+
/** @deprecated use variant="information" instead */
|
|
100
|
+
declare const info_2 = "info";
|
|
101
|
+
|
|
102
|
+
export declare type SortableHeaderProps = {
|
|
103
|
+
/** Navnet headeren skal se etter i forhold til sortering av items */
|
|
104
|
+
name: string;
|
|
105
|
+
/** Om headeren skal være sorterbar eller ikke
|
|
106
|
+
* @default true */
|
|
107
|
+
sortable?: boolean;
|
|
108
|
+
/** Props som sendes til knapp-elementet */
|
|
109
|
+
buttonProps?: Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'type' | 'onClick'>;
|
|
110
|
+
[key: string]: any;
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
export declare type SortableHeaderReturnProps = {
|
|
114
|
+
name: string;
|
|
115
|
+
sortable: boolean;
|
|
116
|
+
sortConfig: ExternalSortConfig;
|
|
117
|
+
[key: string]: any;
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
export declare type SortableTableProps = {
|
|
121
|
+
/** @default true */
|
|
122
|
+
sortable?: boolean;
|
|
123
|
+
[key: string]: any;
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
export declare type SortableTableReturnProps = {
|
|
127
|
+
/** @default true */
|
|
128
|
+
sortable?: boolean;
|
|
129
|
+
sortConfig: ExternalSortConfig;
|
|
130
|
+
[key: string]: any;
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
export declare const Table: default_2.ForwardRefExoticComponent<Omit<TableProps, "ref"> & default_2.RefAttributes<HTMLTableElement>>;
|
|
134
|
+
|
|
135
|
+
export declare const TableBody: default_2.ForwardRefExoticComponent<Omit<TableBodyProps, "ref"> & default_2.RefAttributes<HTMLTableSectionElement>>;
|
|
136
|
+
|
|
137
|
+
export declare type TableBodyProps = {
|
|
138
|
+
/** Tabellrader */
|
|
139
|
+
children: default_2.ReactNode;
|
|
140
|
+
/** Ekstra klassenavn */
|
|
141
|
+
className?: string;
|
|
142
|
+
ref?: default_2.Ref<HTMLTableSectionElement>;
|
|
143
|
+
} & default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
|
|
144
|
+
|
|
145
|
+
export declare const TableFooter: default_2.ForwardRefExoticComponent<Omit<TableFooterProps, "ref"> & default_2.RefAttributes<HTMLTableSectionElement>>;
|
|
146
|
+
|
|
147
|
+
export declare type TableFooterProps = {
|
|
148
|
+
/** Tabellrader */
|
|
149
|
+
children: default_2.ReactNode;
|
|
150
|
+
} & default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
|
|
151
|
+
|
|
152
|
+
export declare const TableHead: default_2.ForwardRefExoticComponent<Omit<TableHeadProps, "ref"> & default_2.RefAttributes<HTMLTableSectionElement>>;
|
|
153
|
+
|
|
154
|
+
export declare type TableHeadProps = {
|
|
155
|
+
/** Kolonneoverskrifter */
|
|
156
|
+
children: default_2.ReactNode;
|
|
157
|
+
/** Esktra klassenavn */
|
|
158
|
+
className?: string;
|
|
159
|
+
} & default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>;
|
|
160
|
+
|
|
161
|
+
export declare type TableProps = {
|
|
162
|
+
/** Ekstra klassenavn */
|
|
163
|
+
className?: string;
|
|
164
|
+
/** Setter tettheten mellom rader og kolonner. Bruk gjerne middle og small for for sider med høy informasjonstetthet
|
|
165
|
+
* @default "default"
|
|
166
|
+
*/
|
|
167
|
+
spacing?: 'default' | 'middle' | 'small';
|
|
168
|
+
/** Setter kolonne-layout til å være uavhengig av innhold
|
|
169
|
+
* @default false
|
|
170
|
+
*/
|
|
171
|
+
fixed?: boolean;
|
|
172
|
+
/** Om header-raden skal bli værende på skjermen når man skroller tabellen
|
|
173
|
+
* @default false
|
|
174
|
+
*/
|
|
175
|
+
stickyHeader?: boolean;
|
|
176
|
+
/** Innholdet i tabellen */
|
|
177
|
+
children: default_2.ReactNode;
|
|
178
|
+
[key: string]: any;
|
|
179
|
+
};
|
|
180
|
+
|
|
181
|
+
export declare const TableRow: default_2.ForwardRefExoticComponent<Omit<TableRowProps, "ref"> & default_2.RefAttributes<HTMLTableRowElement>>;
|
|
182
|
+
|
|
183
|
+
export declare type TableRowProps = {
|
|
184
|
+
/** Tabellceller */
|
|
185
|
+
children: default_2.ReactNode;
|
|
186
|
+
/** Ekstra klassenavn */
|
|
187
|
+
className?: string;
|
|
188
|
+
/**Hvis satt, så vil tabellraden endre fargen ved hover
|
|
189
|
+
* @default false
|
|
190
|
+
*/
|
|
191
|
+
hover?: boolean;
|
|
192
|
+
/** Om raden er klikkbar, så vil raden endre farge, og musepekeren vil symbolisere interaktivitet
|
|
193
|
+
* @default false
|
|
194
|
+
*/
|
|
195
|
+
active?: boolean;
|
|
196
|
+
/**Signalisere om at det er en feil i tabellraden
|
|
197
|
+
* @default false
|
|
198
|
+
*/
|
|
199
|
+
error?: boolean;
|
|
200
|
+
ref?: default_2.Ref<HTMLTableRowElement>;
|
|
201
|
+
} & default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>;
|
|
202
|
+
|
|
203
|
+
export declare function useSortableData<T>(tableData: T[], externalSortConfig?: ExternalSortConfig): {
|
|
204
|
+
sortedData: T[];
|
|
205
|
+
getSortableHeaderProps: (args: SortableHeaderProps) => SortableHeaderReturnProps;
|
|
206
|
+
getSortableTableProps: (args?: SortableTableProps) => SortableTableReturnProps;
|
|
207
|
+
};
|
|
208
|
+
|
|
209
|
+
export declare const useTableKeyboardNavigation: useTableKeyboardNavigationProps;
|
|
210
|
+
|
|
211
|
+
export declare type useTableKeyboardNavigationProps = (
|
|
212
|
+
/** Antall rader i tabellen */
|
|
213
|
+
numberOfRows: number,
|
|
214
|
+
/** Tillate at man kan navigere sirkulært
|
|
215
|
+
* @default false
|
|
216
|
+
*/
|
|
217
|
+
allowWrap?: boolean) => {
|
|
218
|
+
getTableRowNavigationProps: (
|
|
219
|
+
/** Raden i tabellen (0-indeksert) */
|
|
220
|
+
row: number) => Partial<TableRowProps>;
|
|
221
|
+
getTableBodyNavigationProps: () => Partial<TableBodyProps>;
|
|
222
|
+
};
|
|
223
|
+
|
|
224
|
+
declare type VariantType = 'success' | 'negative' | 'warning' | 'information';
|
|
225
|
+
|
|
226
|
+
export { }
|
package/dist/styles.css
CHANGED
|
@@ -1,110 +1,5 @@
|
|
|
1
1
|
/* DO NOT CHANGE!*/
|
|
2
2
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
|
-
.eds-table__header-cell {
|
|
4
|
-
color: var(--components-table-standard-text);
|
|
5
|
-
font-size: 1rem;
|
|
6
|
-
font-weight: 600;
|
|
7
|
-
text-align: left;
|
|
8
|
-
height: 3rem;
|
|
9
|
-
padding: 0 1.5rem;
|
|
10
|
-
}
|
|
11
|
-
.eds-table--middle .eds-table__header-cell, .eds-table--small .eds-table__header-cell {
|
|
12
|
-
padding: 0 1rem;
|
|
13
|
-
}
|
|
14
|
-
.eds-contrast .eds-table__header-cell {
|
|
15
|
-
color: var(--components-table-contrast-text);
|
|
16
|
-
border-bottom-color: var(--components-table-contrast-stroke);
|
|
17
|
-
}
|
|
18
|
-
.eds-table__header-cell--padding-checkbox {
|
|
19
|
-
width: 3rem;
|
|
20
|
-
padding: 0 0 1rem 1.25rem;
|
|
21
|
-
}
|
|
22
|
-
.eds-table__header-cell--padding-radio {
|
|
23
|
-
width: 3rem;
|
|
24
|
-
padding: 0 0 1rem 1.25rem;
|
|
25
|
-
}
|
|
26
|
-
.eds-table__header-cell--padding-overflow-menu {
|
|
27
|
-
width: 3rem;
|
|
28
|
-
padding: 1rem 0.75rem;
|
|
29
|
-
}
|
|
30
|
-
.eds-table__header-cell--sortable:focus-visible {
|
|
31
|
-
outline: 2px solid #181c56;
|
|
32
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
33
|
-
outline-offset: 0.125rem;
|
|
34
|
-
}
|
|
35
|
-
.eds-contrast .eds-table__header-cell--sortable:focus-visible {
|
|
36
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
37
|
-
}
|
|
38
|
-
.eds-table__header-cell-button {
|
|
39
|
-
position: relative;
|
|
40
|
-
text-align: left;
|
|
41
|
-
height: 100%;
|
|
42
|
-
width: 100%;
|
|
43
|
-
padding: 0;
|
|
44
|
-
cursor: pointer;
|
|
45
|
-
-webkit-appearance: none;
|
|
46
|
-
-moz-appearance: none;
|
|
47
|
-
appearance: none;
|
|
48
|
-
border: none;
|
|
49
|
-
background: none;
|
|
50
|
-
color: inherit;
|
|
51
|
-
font-size: inherit;
|
|
52
|
-
font-weight: inherit;
|
|
53
|
-
font-family: inherit;
|
|
54
|
-
}
|
|
55
|
-
.eds-table__header-cell-button-icon {
|
|
56
|
-
position: absolute;
|
|
57
|
-
margin-left: 0.25rem;
|
|
58
|
-
}
|
|
59
|
-
.eds-table__header-cell-button:focus-visible {
|
|
60
|
-
outline: 2px solid #181c56;
|
|
61
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
62
|
-
outline-offset: 0.125rem;
|
|
63
|
-
}
|
|
64
|
-
.eds-contrast .eds-table__header-cell-button:focus-visible {
|
|
65
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
66
|
-
}
|
|
67
|
-
.eds-table--sticky-header .eds-table__header-cell {
|
|
68
|
-
background-color: var(--components-table-standard-header-fill);
|
|
69
|
-
position: sticky;
|
|
70
|
-
top: 0;
|
|
71
|
-
}
|
|
72
|
-
.eds-contrast .eds-table--sticky-header .eds-table__header-cell {
|
|
73
|
-
background-color: var(--components-table-contrast-header-fill);
|
|
74
|
-
}
|
|
75
|
-
/* DO NOT CHANGE!*/
|
|
76
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
77
|
-
.eds-editable-cell {
|
|
78
|
-
padding: 0.25rem 0.75rem;
|
|
79
|
-
}
|
|
80
|
-
.eds-table--middle .eds-editable-cell {
|
|
81
|
-
padding: 0.25rem 0.5rem;
|
|
82
|
-
}
|
|
83
|
-
.eds-table--small .eds-editable-cell {
|
|
84
|
-
padding: 0.125rem 0.5rem;
|
|
85
|
-
}
|
|
86
|
-
.eds-editable-cell .eds-form-control-wrapper:not(.eds-datepicker__datefield) {
|
|
87
|
-
min-height: 0;
|
|
88
|
-
}
|
|
89
|
-
.eds-editable-cell .eds-form-control-wrapper:not(.eds-datepicker__datefield) .eds-form-control {
|
|
90
|
-
padding: 0.75rem;
|
|
91
|
-
}
|
|
92
|
-
.eds-table--middle .eds-editable-cell .eds-form-control-wrapper:not(.eds-datepicker__datefield) .eds-form-control {
|
|
93
|
-
padding: 0.25rem calc(0.5rem - 0.0625rem);
|
|
94
|
-
}
|
|
95
|
-
.eds-table--small .eds-editable-cell .eds-form-control-wrapper:not(.eds-datepicker__datefield) .eds-form-control {
|
|
96
|
-
padding: calc(0.25rem - 0.125rem) calc(0.5rem - 0.0625rem);
|
|
97
|
-
}
|
|
98
|
-
/* DO NOT CHANGE!*/
|
|
99
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
100
|
-
.eds-expand-row-button__icon {
|
|
101
|
-
transition: transform ease-in-out 0.2s;
|
|
102
|
-
}
|
|
103
|
-
.eds-expand-row-button--open .eds-expand-row-button__icon {
|
|
104
|
-
transform: rotate(180deg);
|
|
105
|
-
}
|
|
106
|
-
/* DO NOT CHANGE!*/
|
|
107
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
108
3
|
/* DO NOT CHANGE!*/
|
|
109
4
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
110
5
|
/* DO NOT CHANGE!*/
|
|
@@ -302,7 +197,6 @@
|
|
|
302
197
|
padding: 1rem 1.5rem;
|
|
303
198
|
}
|
|
304
199
|
.eds-contrast .eds-table__data-cell {
|
|
305
|
-
border-bottom-color: #8284ab;
|
|
306
200
|
border-bottom-color: var(--components-table-contrast-stroke);
|
|
307
201
|
}
|
|
308
202
|
.eds-table--middle .eds-table__data-cell {
|
|
@@ -326,53 +220,41 @@
|
|
|
326
220
|
padding: 1rem 0.75rem;
|
|
327
221
|
}
|
|
328
222
|
.eds-table__body > .eds-table__row {
|
|
329
|
-
border-bottom: 0.0625rem solid #e3e6e8;
|
|
330
223
|
border-bottom: 0.0625rem solid var(--components-table-standard-stroke);
|
|
331
224
|
}
|
|
332
225
|
.eds-contrast .eds-table__body > .eds-table__row {
|
|
333
|
-
border-color: #8284ab;
|
|
334
226
|
border-color: var(--components-table-contrast-stroke);
|
|
335
227
|
}
|
|
336
228
|
.eds-table__body > .eds-table__row:focus-visible {
|
|
337
229
|
outline: 2px solid #181c56;
|
|
338
|
-
outline-color: #181c56;
|
|
339
230
|
outline-color: var(--basecolors-stroke-focus-standard);
|
|
340
231
|
outline-offset: 0.125rem;
|
|
341
232
|
}
|
|
342
233
|
.eds-contrast .eds-table__body > .eds-table__row:focus-visible {
|
|
343
|
-
outline-color: #aeb7e2;
|
|
344
234
|
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
345
235
|
}
|
|
346
236
|
.eds-table__body > .eds-table__row--hover:hover {
|
|
347
|
-
background: #f2f5f7;
|
|
348
237
|
background: var(--components-table-standard-cell-fill-hover);
|
|
349
238
|
}
|
|
350
239
|
.eds-contrast .eds-table__body > .eds-table__row--hover:hover {
|
|
351
|
-
background: #393d79;
|
|
352
240
|
background: var(--components-table-contrast-cell-fill-hover);
|
|
353
241
|
}
|
|
354
242
|
.eds-table__body > .eds-table__row--active {
|
|
355
|
-
background: #f2f5f7;
|
|
356
243
|
background: var(--components-table-standard-cell-fill-hover);
|
|
357
244
|
}
|
|
358
245
|
.eds-contrast .eds-table__body > .eds-table__row--active {
|
|
359
|
-
background: #393d79;
|
|
360
246
|
background: var(--components-table-contrast-cell-fill-hover);
|
|
361
247
|
}
|
|
362
248
|
.eds-table__body > .eds-table__row--error {
|
|
363
|
-
background: #ffcece;
|
|
364
249
|
background: var(--components-table-standard-fill-negative);
|
|
365
250
|
}
|
|
366
251
|
.eds-contrast .eds-table__body > .eds-table__row--error {
|
|
367
|
-
background: rgba(255, 148, 148, 0.2);
|
|
368
252
|
background: var(--components-table-contrast-cell-fill-negative);
|
|
369
253
|
}
|
|
370
254
|
.eds-table__head {
|
|
371
|
-
border-bottom: 0.125rem solid #e3e6e8;
|
|
372
255
|
border-bottom: 0.125rem solid var(--components-table-standard-stroke);
|
|
373
256
|
}
|
|
374
257
|
.eds-contrast .eds-table__head {
|
|
375
|
-
border-color: #8284ab;
|
|
376
258
|
border-color: var(--components-table-contrast-stroke);
|
|
377
259
|
}
|
|
378
260
|
.eds-table--sticky-header .eds-table__head {
|
|
@@ -383,4 +265,104 @@
|
|
|
383
265
|
.eds-table--sticky-header--active .eds-table__head {
|
|
384
266
|
box-shadow: 0px 10px 8px -10px rgba(0, 0, 0, 0.15);
|
|
385
267
|
border-bottom: none;
|
|
268
|
+
}/* DO NOT CHANGE!*/
|
|
269
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
270
|
+
.eds-table__header-cell {
|
|
271
|
+
color: var(--components-table-standard-text);
|
|
272
|
+
font-size: 1rem;
|
|
273
|
+
font-weight: 600;
|
|
274
|
+
text-align: left;
|
|
275
|
+
height: 3rem;
|
|
276
|
+
padding: 0 1.5rem;
|
|
277
|
+
}
|
|
278
|
+
.eds-table--middle .eds-table__header-cell, .eds-table--small .eds-table__header-cell {
|
|
279
|
+
padding: 0 1rem;
|
|
280
|
+
}
|
|
281
|
+
.eds-contrast .eds-table__header-cell {
|
|
282
|
+
color: var(--components-table-contrast-text);
|
|
283
|
+
border-bottom-color: var(--components-table-contrast-stroke);
|
|
284
|
+
}
|
|
285
|
+
.eds-table__header-cell--padding-checkbox {
|
|
286
|
+
width: 3rem;
|
|
287
|
+
padding: 0 0 1rem 1.25rem;
|
|
288
|
+
}
|
|
289
|
+
.eds-table__header-cell--padding-radio {
|
|
290
|
+
width: 3rem;
|
|
291
|
+
padding: 0 0 1rem 1.25rem;
|
|
292
|
+
}
|
|
293
|
+
.eds-table__header-cell--padding-overflow-menu {
|
|
294
|
+
width: 3rem;
|
|
295
|
+
padding: 1rem 0.75rem;
|
|
296
|
+
}
|
|
297
|
+
.eds-table__header-cell--sortable:focus-visible {
|
|
298
|
+
outline: 2px solid #181c56;
|
|
299
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
300
|
+
outline-offset: 0.125rem;
|
|
301
|
+
}
|
|
302
|
+
.eds-contrast .eds-table__header-cell--sortable:focus-visible {
|
|
303
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
304
|
+
}
|
|
305
|
+
.eds-table__header-cell-button {
|
|
306
|
+
position: relative;
|
|
307
|
+
text-align: left;
|
|
308
|
+
height: 100%;
|
|
309
|
+
width: 100%;
|
|
310
|
+
padding: 0;
|
|
311
|
+
cursor: pointer;
|
|
312
|
+
appearance: none;
|
|
313
|
+
border: none;
|
|
314
|
+
background: none;
|
|
315
|
+
color: inherit;
|
|
316
|
+
font-size: inherit;
|
|
317
|
+
font-weight: inherit;
|
|
318
|
+
font-family: inherit;
|
|
319
|
+
}
|
|
320
|
+
.eds-table__header-cell-button-icon {
|
|
321
|
+
position: absolute;
|
|
322
|
+
margin-left: 0.25rem;
|
|
386
323
|
}
|
|
324
|
+
.eds-table__header-cell-button:focus-visible {
|
|
325
|
+
outline: 2px solid #181c56;
|
|
326
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
327
|
+
outline-offset: 0.125rem;
|
|
328
|
+
}
|
|
329
|
+
.eds-contrast .eds-table__header-cell-button:focus-visible {
|
|
330
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
331
|
+
}
|
|
332
|
+
.eds-table--sticky-header .eds-table__header-cell {
|
|
333
|
+
background-color: var(--components-table-standard-header-fill);
|
|
334
|
+
position: sticky;
|
|
335
|
+
top: 0;
|
|
336
|
+
}
|
|
337
|
+
.eds-contrast .eds-table--sticky-header .eds-table__header-cell {
|
|
338
|
+
background-color: var(--components-table-contrast-header-fill);
|
|
339
|
+
}/* DO NOT CHANGE!*/
|
|
340
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
341
|
+
.eds-editable-cell {
|
|
342
|
+
padding: 0.25rem 0.75rem;
|
|
343
|
+
}
|
|
344
|
+
.eds-table--middle .eds-editable-cell {
|
|
345
|
+
padding: 0.25rem 0.5rem;
|
|
346
|
+
}
|
|
347
|
+
.eds-table--small .eds-editable-cell {
|
|
348
|
+
padding: 0.125rem 0.5rem;
|
|
349
|
+
}
|
|
350
|
+
.eds-editable-cell .eds-form-control-wrapper:not(.eds-datepicker__datefield) {
|
|
351
|
+
min-height: 0;
|
|
352
|
+
}
|
|
353
|
+
.eds-editable-cell .eds-form-control-wrapper:not(.eds-datepicker__datefield) .eds-form-control {
|
|
354
|
+
padding: 0.75rem;
|
|
355
|
+
}
|
|
356
|
+
.eds-table--middle .eds-editable-cell .eds-form-control-wrapper:not(.eds-datepicker__datefield) .eds-form-control {
|
|
357
|
+
padding: 0.25rem calc(0.5rem - 0.0625rem);
|
|
358
|
+
}
|
|
359
|
+
.eds-table--small .eds-editable-cell .eds-form-control-wrapper:not(.eds-datepicker__datefield) .eds-form-control {
|
|
360
|
+
padding: calc(0.25rem - 0.125rem) calc(0.5rem - 0.0625rem);
|
|
361
|
+
}/* DO NOT CHANGE!*/
|
|
362
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
363
|
+
.eds-expand-row-button__icon {
|
|
364
|
+
transition: transform ease-in-out 0.2s;
|
|
365
|
+
}
|
|
366
|
+
.eds-expand-row-button--open .eds-expand-row-button__icon {
|
|
367
|
+
transform: rotate(180deg);
|
|
368
|
+
}
|