@lavalogic/scoria 0.40.1 → 0.40.2

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.
Files changed (137) hide show
  1. package/README.md +58 -58
  2. package/dist/Components/AccordionGroup.svelte +46 -46
  3. package/dist/Components/AccordionGroupButton.svelte +76 -76
  4. package/dist/Components/Action.svelte +136 -136
  5. package/dist/Components/AlertModal.svelte +195 -195
  6. package/dist/Components/AppointmentCalendar/AppointmentCalendar.svelte +729 -729
  7. package/dist/Components/Base/BaseModal.svelte +125 -125
  8. package/dist/Components/Base/ContextWrapper.svelte +72 -72
  9. package/dist/Components/Base/Pagination.svelte +198 -198
  10. package/dist/Components/Base/Snippets.svelte +36 -36
  11. package/dist/Components/BigRadioSet.svelte +38 -38
  12. package/dist/Components/Bubble.svelte +101 -101
  13. package/dist/Components/Button.svelte +209 -209
  14. package/dist/Components/Checkbox.svelte +86 -86
  15. package/dist/Components/CollapsibleCard.svelte +78 -78
  16. package/dist/Components/Contexts/ContextMenu.svelte +164 -164
  17. package/dist/Components/Contexts/ContextMenuDivider.svelte +15 -15
  18. package/dist/Components/Contexts/ContextMenuOption.svelte +60 -60
  19. package/dist/Components/Contexts/Toast.svelte +86 -86
  20. package/dist/Components/Contexts/ToastContainer.svelte +65 -65
  21. package/dist/Components/Contexts/Tooltip.svelte +37 -37
  22. package/dist/Components/DataMatrixIcon.svelte +112 -112
  23. package/dist/Components/DateInput.svelte +148 -148
  24. package/dist/Components/DatePicker.svelte +300 -300
  25. package/dist/Components/DesktopModal.svelte +90 -90
  26. package/dist/Components/Dial.svelte +204 -204
  27. package/dist/Components/DimensionInput.svelte +170 -170
  28. package/dist/Components/DragMenu/DragMenuHolder.svelte +119 -119
  29. package/dist/Components/DragMenu/DraggableCard.svelte +77 -77
  30. package/dist/Components/FileCard.svelte +24 -24
  31. package/dist/Components/FileUpload.svelte +236 -236
  32. package/dist/Components/GridInput.svelte +196 -196
  33. package/dist/Components/GridInputSet.svelte +29 -29
  34. package/dist/Components/HorizontalTabGroup.svelte +82 -82
  35. package/dist/Components/HorizontalTabGroupButton.svelte +44 -44
  36. package/dist/Components/Icon.svelte +128 -128
  37. package/dist/Components/Icons.js +357 -357
  38. package/dist/Components/InfoAlert.svelte +35 -35
  39. package/dist/Components/LoadingAnimation.svelte +29 -29
  40. package/dist/Components/LoadingModal.svelte +45 -45
  41. package/dist/Components/LoadingOverlay.svelte +25 -25
  42. package/dist/Components/Modal.svelte +258 -258
  43. package/dist/Components/MultiSelect.svelte +220 -220
  44. package/dist/Components/Nav/Nav.svelte +110 -110
  45. package/dist/Components/Nav/NavServiceMenuList.svelte +43 -43
  46. package/dist/Components/Nav/NavTab.svelte +62 -62
  47. package/dist/Components/Nav/ServiceMenuItem.svelte +112 -112
  48. package/dist/Components/Nav/ServicesNav.svelte +80 -80
  49. package/dist/Components/NumberInput.svelte +157 -157
  50. package/dist/Components/PageHeading.svelte +25 -25
  51. package/dist/Components/PasswordInput.svelte +88 -88
  52. package/dist/Components/Portal.svelte +36 -36
  53. package/dist/Components/ProgressBubble.svelte +107 -107
  54. package/dist/Components/QuerySelect.svelte +366 -366
  55. package/dist/Components/SingleSelect.svelte +250 -250
  56. package/dist/Components/StepButton.svelte +70 -70
  57. package/dist/Components/StepForm.svelte +140 -140
  58. package/dist/Components/Switch.svelte +69 -69
  59. package/dist/Components/Table/ARCHITECTURE.md +298 -298
  60. package/dist/Components/Table/Body/QuickSearchCell.svelte +679 -679
  61. package/dist/Components/Table/Body/Rows/ColumnHighlight.svelte +51 -51
  62. package/dist/Components/Table/Body/Rows/ColumnList.svelte +59 -59
  63. package/dist/Components/Table/Body/Rows/ColumnListRow.svelte +454 -454
  64. package/dist/Components/Table/Body/Rows/Columns/AccessorComponent.svelte +79 -79
  65. package/dist/Components/Table/Body/Rows/Columns/ActionsCell.svelte +185 -185
  66. package/dist/Components/Table/Body/Rows/Columns/BubbleCell.svelte +124 -124
  67. package/dist/Components/Table/Body/Rows/Columns/ExpandCell.svelte +131 -120
  68. package/dist/Components/Table/Body/Rows/Columns/FocusableImmutableCell.svelte +234 -234
  69. package/dist/Components/Table/Body/Rows/Columns/ProgressCell.svelte +105 -105
  70. package/dist/Components/Table/Body/Rows/Columns/TableAction.svelte +87 -87
  71. package/dist/Components/Table/Body/Rows/Columns/TableCheckbox.svelte +126 -126
  72. package/dist/Components/Table/Body/Rows/Columns/TableColumn.svelte +159 -159
  73. package/dist/Components/Table/Body/Rows/Columns/TableDatePicker.svelte +246 -246
  74. package/dist/Components/Table/Body/Rows/Columns/TableNumberInput.svelte +216 -216
  75. package/dist/Components/Table/Body/Rows/Columns/TableQuerySelect.svelte +252 -252
  76. package/dist/Components/Table/Body/Rows/Columns/TableRowSelectionCheckbox.svelte +179 -179
  77. package/dist/Components/Table/Body/Rows/Columns/TableSelect.svelte +221 -221
  78. package/dist/Components/Table/Body/Rows/Columns/TableTextInput.svelte +197 -197
  79. package/dist/Components/Table/Body/Rows/Columns/ValidityCell.svelte +190 -190
  80. package/dist/Components/Table/Body/Rows/TableRow.svelte +290 -290
  81. package/dist/Components/Table/Body/TableBody.svelte +155 -155
  82. package/dist/Components/Table/ColumnFactory.svelte.js +1 -0
  83. package/dist/Components/Table/Headers/HighlightAllHeader.svelte +41 -41
  84. package/dist/Components/Table/Headers/SelectAllHeader.svelte +30 -30
  85. package/dist/Components/Table/Headers/TableHead.svelte +415 -415
  86. package/dist/Components/Table/Misc/ColumnPanel.svelte +39 -39
  87. package/dist/Components/Table/Misc/ColumnPanelModal.svelte +39 -39
  88. package/dist/Components/Table/Misc/FilterInput.svelte +641 -641
  89. package/dist/Components/Table/Misc/FilterPanel.svelte +190 -190
  90. package/dist/Components/Table/Misc/FilterPanelModal.svelte +31 -31
  91. package/dist/Components/Table/Misc/ShareViewModal.svelte +291 -291
  92. package/dist/Components/Table/Misc/SidePanel.svelte +35 -35
  93. package/dist/Components/Table/Misc/TableConfigurationModal.svelte +644 -644
  94. package/dist/Components/Table/Misc/TableFooter.svelte +340 -340
  95. package/dist/Components/Table/Misc/TableHorizontalBar.svelte +140 -140
  96. package/dist/Components/Table/Misc/TableSidebar.svelte +200 -200
  97. package/dist/Components/Table/Misc/TableViewDropdown.svelte +105 -105
  98. package/dist/Components/Table/Misc/ToolboxPanel.svelte +100 -100
  99. package/dist/Components/Table/Misc/ToolboxPanelModal.svelte +107 -107
  100. package/dist/Components/Table/Misc/UpdateViewOptionsModal.svelte +192 -192
  101. package/dist/Components/Table/NestedTable.svelte +130 -130
  102. package/dist/Components/Table/Table.svelte +692 -692
  103. package/dist/Components/Table/Types/Columns/Definitions/Expand/ExpandDef.svelte.d.ts +5 -0
  104. package/dist/Components/Table/Types/Columns/Definitions/Expand/ExpandDef.svelte.js +3 -0
  105. package/dist/Components/Table/Types/Public/ColumnOptions.d.ts +10 -0
  106. package/dist/Components/Test/TestContextConsumer.svelte +13 -13
  107. package/dist/Components/TextArea.svelte +130 -130
  108. package/dist/Components/TextInput.svelte +176 -176
  109. package/dist/Components/ThreeStateRadio.svelte +131 -131
  110. package/dist/Components/Touch/BoolCard.svelte +45 -45
  111. package/dist/Components/Touch/DateModal.svelte +209 -209
  112. package/dist/Components/Touch/EditCard.svelte +59 -59
  113. package/dist/Components/Touch/InfoCard.svelte +31 -31
  114. package/dist/Components/Touch/InfoTextCard.svelte +28 -28
  115. package/dist/Components/Touch/ModalExplanation.svelte +17 -17
  116. package/dist/Components/Touch/NumberKeyboard.svelte +225 -225
  117. package/dist/Components/Touch/NumberModal.svelte +79 -79
  118. package/dist/Components/Touch/PlusMinusCard.svelte +46 -46
  119. package/dist/Components/Touch/SelectModal.svelte +127 -127
  120. package/dist/Components/Touch/SummaryCard.svelte +93 -93
  121. package/dist/Components/Touch/TextAreaModal.svelte +95 -95
  122. package/dist/Components/Touch/TextModal.svelte +106 -106
  123. package/dist/Components/Touch/TouchCard.svelte +33 -33
  124. package/dist/Components/Touch/TouchModal.svelte +274 -274
  125. package/dist/Components/Touch/UtilityButton.svelte +109 -109
  126. package/dist/Components/VerticalTabGroup.svelte +79 -79
  127. package/dist/Components/VerticalTabGroupButton.svelte +58 -58
  128. package/dist/Helpers/Datamatrix.d.ts +19 -19
  129. package/dist/Helpers/Datamatrix.js +291 -291
  130. package/dist/Types/Examples/ExampleModal.svelte +35 -35
  131. package/dist/scss/_basics.scss +12 -12
  132. package/dist/scss/_colours.scss +134 -134
  133. package/dist/scss/_mixins.scss +3392 -3392
  134. package/dist/scss/_motion.scss +57 -57
  135. package/dist/scss/_sizing.scss +85 -85
  136. package/dist/scss/_transitions.scss +8 -8
  137. package/package.json +1 -1
@@ -1,102 +1,102 @@
1
- <svelte:options runes />
2
-
3
- <script
4
- lang="ts"
5
- generics="T extends object, IdType extends Primitive"
6
- >
7
- import Checkbox from '../../Checkbox.svelte';
8
- import { Size } from '../../../Types/Internal/Size.js';
9
- import { getContext } from 'svelte';
10
- import type { Primitive } from '../Types/Context/TableInitOptions.js';
11
- import { TableContext } from '../Types/Context/TableContext.svelte.js';
12
-
13
- const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
14
-
15
- const onCompactChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
16
- tableContext.setIsCompact(e.currentTarget.checked);
17
- };
18
-
19
- const onSingleClickChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
20
- tableContext.setSingleClickEditing(e.currentTarget.checked);
21
- };
22
-
23
- const onAlternateRowColoursChange = (
24
- e: Event & { currentTarget: EventTarget & HTMLInputElement }
25
- ) => {
26
- tableContext.setAlternateRowColours(e.currentTarget.checked);
27
- };
28
-
29
- const onChangeColourOnHoverChange = (
30
- e: Event & { currentTarget: EventTarget & HTMLInputElement }
31
- ) => {
32
- tableContext.setChangeColourOnHover(e.currentTarget.checked);
33
- };
34
-
35
- const onCopyWithHeadersChange = (
36
- e: Event & { currentTarget: EventTarget & HTMLInputElement }
37
- ) => {
38
- tableContext.setCopyWithHeaders(e.currentTarget.checked);
39
- };
40
-
41
- const onCommaSeparatedCopyChange = (
42
- e: Event & { currentTarget: EventTarget & HTMLInputElement }
43
- ) => {
44
- tableContext.setCommaSeparatedCopy(e.currentTarget.checked);
45
- };
46
- </script>
47
-
48
- <section class="side-panel-section">
49
- <header class="side-panel-header">
50
- <h2>Settings</h2>
51
- </header>
52
- <div class="side-panel-body">
53
- <Checkbox
54
- label="Compact"
55
- size={Size.MediumSmall}
56
- id={`is-compact-${tableContext.tableName}`}
57
- value={tableContext.isCompact}
58
- onchange={onCompactChange}
59
- />
60
- <Checkbox
61
- label="Single Click Editing"
62
- size={Size.MediumSmall}
63
- id={`single-click-editing-${tableContext.tableName}`}
64
- value={tableContext.singleClickEditing}
65
- onchange={onSingleClickChange}
66
- />
67
- <Checkbox
68
- label="Alternate Row Colours"
69
- size={Size.MediumSmall}
70
- id={`alternate-row-colours-${tableContext.tableName}`}
71
- value={tableContext.alternateRowColours}
72
- onchange={onAlternateRowColoursChange}
73
- />
74
- <Checkbox
75
- label="Change Colour on Hover"
76
- size={Size.MediumSmall}
77
- id={`change-colour-on-hover-${tableContext.tableName}`}
78
- value={tableContext.changeColourOnHover}
79
- onchange={onChangeColourOnHoverChange}
80
- />
81
- {#if tableContext.allowCopy}
82
- <Checkbox
83
- label="Include Headers When Copying"
84
- size={Size.MediumSmall}
85
- id={`copy-with-headers-${tableContext.tableName}`}
86
- value={tableContext.copyWithHeaders}
87
- onchange={onCopyWithHeadersChange}
88
- />
89
- <Checkbox
90
- label="Copy as Comma Separated Values"
91
- size={Size.MediumSmall}
92
- id={`comma-separated-copy-${tableContext.tableName}`}
93
- value={tableContext.commaSeparatedCopy}
94
- onchange={onCommaSeparatedCopyChange}
95
- />
96
- {/if}
97
- </div>
98
- </section>
99
-
1
+ <svelte:options runes />
2
+
3
+ <script
4
+ lang="ts"
5
+ generics="T extends object, IdType extends Primitive"
6
+ >
7
+ import Checkbox from '../../Checkbox.svelte';
8
+ import { Size } from '../../../Types/Internal/Size.js';
9
+ import { getContext } from 'svelte';
10
+ import type { Primitive } from '../Types/Context/TableInitOptions.js';
11
+ import { TableContext } from '../Types/Context/TableContext.svelte.js';
12
+
13
+ const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
14
+
15
+ const onCompactChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
16
+ tableContext.setIsCompact(e.currentTarget.checked);
17
+ };
18
+
19
+ const onSingleClickChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
20
+ tableContext.setSingleClickEditing(e.currentTarget.checked);
21
+ };
22
+
23
+ const onAlternateRowColoursChange = (
24
+ e: Event & { currentTarget: EventTarget & HTMLInputElement }
25
+ ) => {
26
+ tableContext.setAlternateRowColours(e.currentTarget.checked);
27
+ };
28
+
29
+ const onChangeColourOnHoverChange = (
30
+ e: Event & { currentTarget: EventTarget & HTMLInputElement }
31
+ ) => {
32
+ tableContext.setChangeColourOnHover(e.currentTarget.checked);
33
+ };
34
+
35
+ const onCopyWithHeadersChange = (
36
+ e: Event & { currentTarget: EventTarget & HTMLInputElement }
37
+ ) => {
38
+ tableContext.setCopyWithHeaders(e.currentTarget.checked);
39
+ };
40
+
41
+ const onCommaSeparatedCopyChange = (
42
+ e: Event & { currentTarget: EventTarget & HTMLInputElement }
43
+ ) => {
44
+ tableContext.setCommaSeparatedCopy(e.currentTarget.checked);
45
+ };
46
+ </script>
47
+
48
+ <section class="side-panel-section">
49
+ <header class="side-panel-header">
50
+ <h2>Settings</h2>
51
+ </header>
52
+ <div class="side-panel-body">
53
+ <Checkbox
54
+ label="Compact"
55
+ size={Size.MediumSmall}
56
+ id={`is-compact-${tableContext.tableName}`}
57
+ value={tableContext.isCompact}
58
+ onchange={onCompactChange}
59
+ />
60
+ <Checkbox
61
+ label="Single Click Editing"
62
+ size={Size.MediumSmall}
63
+ id={`single-click-editing-${tableContext.tableName}`}
64
+ value={tableContext.singleClickEditing}
65
+ onchange={onSingleClickChange}
66
+ />
67
+ <Checkbox
68
+ label="Alternate Row Colours"
69
+ size={Size.MediumSmall}
70
+ id={`alternate-row-colours-${tableContext.tableName}`}
71
+ value={tableContext.alternateRowColours}
72
+ onchange={onAlternateRowColoursChange}
73
+ />
74
+ <Checkbox
75
+ label="Change Colour on Hover"
76
+ size={Size.MediumSmall}
77
+ id={`change-colour-on-hover-${tableContext.tableName}`}
78
+ value={tableContext.changeColourOnHover}
79
+ onchange={onChangeColourOnHoverChange}
80
+ />
81
+ {#if tableContext.allowCopy}
82
+ <Checkbox
83
+ label="Include Headers When Copying"
84
+ size={Size.MediumSmall}
85
+ id={`copy-with-headers-${tableContext.tableName}`}
86
+ value={tableContext.copyWithHeaders}
87
+ onchange={onCopyWithHeadersChange}
88
+ />
89
+ <Checkbox
90
+ label="Copy as Comma Separated Values"
91
+ size={Size.MediumSmall}
92
+ id={`comma-separated-copy-${tableContext.tableName}`}
93
+ value={tableContext.commaSeparatedCopy}
94
+ onchange={onCommaSeparatedCopyChange}
95
+ />
96
+ {/if}
97
+ </div>
98
+ </section>
99
+
100
100
  <style>.side-panel-section {
101
101
  display: flex;
102
102
  flex-flow: column nowrap;
@@ -147,4 +147,4 @@
147
147
  gap: 0.75rem;
148
148
  align-items: center;
149
149
  box-sizing: border-box;
150
- }</style>
150
+ }</style>
@@ -1,113 +1,113 @@
1
- <svelte:options runes />
2
-
3
- <script
4
- lang="ts"
5
- generics="T extends object, IdType extends Primitive"
6
- >
7
- import Checkbox from '../../Checkbox.svelte';
8
- import DesktopModal from '../../DesktopModal.svelte';
9
- import { Size } from '../../../Types/Internal/Size.js';
10
- import { getContext } from 'svelte';
11
- import { TableContext } from '../Types/Context/TableContext.svelte.js';
12
- import type { Primitive } from '../Types/Context/TableInitOptions.js';
13
- import type { ToolboxPanelModalProps } from './ToolboxPanelModalProps.js';
14
-
15
- let { onclose }: ToolboxPanelModalProps = $props();
16
-
17
- const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
18
-
19
- const onCompactChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
20
- tableContext.setIsCompact(e.currentTarget.checked);
21
- };
22
-
23
- const onSingleClickChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
24
- tableContext.setSingleClickEditing(e.currentTarget.checked);
25
- };
26
-
27
- const onAlternateRowColoursChange = (
28
- e: Event & { currentTarget: EventTarget & HTMLInputElement }
29
- ) => {
30
- tableContext.setAlternateRowColours(e.currentTarget.checked);
31
- };
32
-
33
- const onChangeColourOnHoverChange = (
34
- e: Event & { currentTarget: EventTarget & HTMLInputElement }
35
- ) => {
36
- tableContext.setChangeColourOnHover(e.currentTarget.checked);
37
- };
38
-
39
- const onCopyWithHeadersChange = (
40
- e: Event & { currentTarget: EventTarget & HTMLInputElement }
41
- ) => {
42
- tableContext.setCopyWithHeaders(e.currentTarget.checked);
43
- };
44
-
45
- const onCommaSeparatedCopyChange = (
46
- e: Event & { currentTarget: EventTarget & HTMLInputElement }
47
- ) => {
48
- tableContext.setCommaSeparatedCopy(e.currentTarget.checked);
49
- };
50
- </script>
51
-
52
- <DesktopModal
53
- headerLabel="Table Settings"
54
- onclose={() => onclose?.()}
55
- buttons={[{ label: 'Close', callback: () => onclose?.() }]}
56
- >
57
- <div class="flex">
58
- <div class="column-panel">
59
- <Checkbox
60
- label="Compact"
61
- size={Size.MediumSmall}
62
- id={`is-compact-${tableContext.tableName}-modal`}
63
- value={tableContext.isCompact}
64
- onchange={onCompactChange}
65
- />
66
- <Checkbox
67
- label="Single Click Editing"
68
- size={Size.MediumSmall}
69
- id={`single-click-editing-${tableContext.tableName}-modal`}
70
- value={tableContext.singleClickEditing}
71
- onchange={onSingleClickChange}
72
- />
73
- <Checkbox
74
- label="Alternate Row Colours"
75
- size={Size.MediumSmall}
76
- id={`alternate-row-colours-${tableContext.tableName}-modal`}
77
- value={tableContext.alternateRowColours}
78
- onchange={onAlternateRowColoursChange}
79
- />
80
- <Checkbox
81
- label="Change Colour on Hover"
82
- size={Size.MediumSmall}
83
- id={`change-colour-on-hover-${tableContext.tableName}-modal`}
84
- value={tableContext.changeColourOnHover}
85
- onchange={onChangeColourOnHoverChange}
86
- />
87
- {#if tableContext.allowCopy}
88
- <Checkbox
89
- label="Include Headers When Copying"
90
- size={Size.MediumSmall}
91
- id={`copy-with-headers-${tableContext.tableName}-modal`}
92
- value={tableContext.copyWithHeaders}
93
- onchange={onCopyWithHeadersChange}
94
- />
95
- <Checkbox
96
- label="Copy as Comma Separated Values"
97
- size={Size.MediumSmall}
98
- id={`comma-separated-copy-${tableContext.tableName}-modal`}
99
- value={tableContext.commaSeparatedCopy}
100
- onchange={onCommaSeparatedCopyChange}
101
- />
102
- {/if}
103
- </div>
104
- </div>
105
- </DesktopModal>
106
-
1
+ <svelte:options runes />
2
+
3
+ <script
4
+ lang="ts"
5
+ generics="T extends object, IdType extends Primitive"
6
+ >
7
+ import Checkbox from '../../Checkbox.svelte';
8
+ import DesktopModal from '../../DesktopModal.svelte';
9
+ import { Size } from '../../../Types/Internal/Size.js';
10
+ import { getContext } from 'svelte';
11
+ import { TableContext } from '../Types/Context/TableContext.svelte.js';
12
+ import type { Primitive } from '../Types/Context/TableInitOptions.js';
13
+ import type { ToolboxPanelModalProps } from './ToolboxPanelModalProps.js';
14
+
15
+ let { onclose }: ToolboxPanelModalProps = $props();
16
+
17
+ const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
18
+
19
+ const onCompactChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
20
+ tableContext.setIsCompact(e.currentTarget.checked);
21
+ };
22
+
23
+ const onSingleClickChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
24
+ tableContext.setSingleClickEditing(e.currentTarget.checked);
25
+ };
26
+
27
+ const onAlternateRowColoursChange = (
28
+ e: Event & { currentTarget: EventTarget & HTMLInputElement }
29
+ ) => {
30
+ tableContext.setAlternateRowColours(e.currentTarget.checked);
31
+ };
32
+
33
+ const onChangeColourOnHoverChange = (
34
+ e: Event & { currentTarget: EventTarget & HTMLInputElement }
35
+ ) => {
36
+ tableContext.setChangeColourOnHover(e.currentTarget.checked);
37
+ };
38
+
39
+ const onCopyWithHeadersChange = (
40
+ e: Event & { currentTarget: EventTarget & HTMLInputElement }
41
+ ) => {
42
+ tableContext.setCopyWithHeaders(e.currentTarget.checked);
43
+ };
44
+
45
+ const onCommaSeparatedCopyChange = (
46
+ e: Event & { currentTarget: EventTarget & HTMLInputElement }
47
+ ) => {
48
+ tableContext.setCommaSeparatedCopy(e.currentTarget.checked);
49
+ };
50
+ </script>
51
+
52
+ <DesktopModal
53
+ headerLabel="Table Settings"
54
+ onclose={() => onclose?.()}
55
+ buttons={[{ label: 'Close', callback: () => onclose?.() }]}
56
+ >
57
+ <div class="flex">
58
+ <div class="column-panel">
59
+ <Checkbox
60
+ label="Compact"
61
+ size={Size.MediumSmall}
62
+ id={`is-compact-${tableContext.tableName}-modal`}
63
+ value={tableContext.isCompact}
64
+ onchange={onCompactChange}
65
+ />
66
+ <Checkbox
67
+ label="Single Click Editing"
68
+ size={Size.MediumSmall}
69
+ id={`single-click-editing-${tableContext.tableName}-modal`}
70
+ value={tableContext.singleClickEditing}
71
+ onchange={onSingleClickChange}
72
+ />
73
+ <Checkbox
74
+ label="Alternate Row Colours"
75
+ size={Size.MediumSmall}
76
+ id={`alternate-row-colours-${tableContext.tableName}-modal`}
77
+ value={tableContext.alternateRowColours}
78
+ onchange={onAlternateRowColoursChange}
79
+ />
80
+ <Checkbox
81
+ label="Change Colour on Hover"
82
+ size={Size.MediumSmall}
83
+ id={`change-colour-on-hover-${tableContext.tableName}-modal`}
84
+ value={tableContext.changeColourOnHover}
85
+ onchange={onChangeColourOnHoverChange}
86
+ />
87
+ {#if tableContext.allowCopy}
88
+ <Checkbox
89
+ label="Include Headers When Copying"
90
+ size={Size.MediumSmall}
91
+ id={`copy-with-headers-${tableContext.tableName}-modal`}
92
+ value={tableContext.copyWithHeaders}
93
+ onchange={onCopyWithHeadersChange}
94
+ />
95
+ <Checkbox
96
+ label="Copy as Comma Separated Values"
97
+ size={Size.MediumSmall}
98
+ id={`comma-separated-copy-${tableContext.tableName}-modal`}
99
+ value={tableContext.commaSeparatedCopy}
100
+ onchange={onCommaSeparatedCopyChange}
101
+ />
102
+ {/if}
103
+ </div>
104
+ </div>
105
+ </DesktopModal>
106
+
107
107
  <style>.flex {
108
108
  display: flex;
109
109
  flex-flow: column nowrap;
110
110
  height: 100%;
111
111
  width: 100%;
112
112
  flex: 1;
113
- }</style>
113
+ }</style>