@lavalogic/scoria 0.37.44 → 0.37.45

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 (237) 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/ActionProps.d.ts +2 -6
  6. package/dist/Components/AlertModal.svelte +195 -183
  7. package/dist/Components/AppointmentCalendar/AppointmentCalendar.svelte +702 -702
  8. package/dist/Components/Base/BaseModal.svelte +125 -125
  9. package/dist/Components/Base/ContextWrapper.svelte +72 -72
  10. package/dist/Components/Base/Pagination.svelte +198 -198
  11. package/dist/Components/Base/Snippets.svelte +36 -36
  12. package/dist/Components/BigRadioSet.svelte +38 -38
  13. package/dist/Components/Bubble.svelte +101 -101
  14. package/dist/Components/Button.svelte +209 -209
  15. package/dist/Components/ButtonProps.d.ts +2 -6
  16. package/dist/Components/Checkbox.svelte +86 -86
  17. package/dist/Components/CollapsibleCard.svelte +78 -78
  18. package/dist/Components/Contexts/ContextMenu.svelte +164 -164
  19. package/dist/Components/Contexts/ContextMenuDivider.svelte +15 -15
  20. package/dist/Components/Contexts/ContextMenuOption.svelte +60 -60
  21. package/dist/Components/Contexts/Toast.svelte +83 -83
  22. package/dist/Components/Contexts/ToastContainer.svelte +65 -65
  23. package/dist/Components/Contexts/Tooltip.svelte +37 -37
  24. package/dist/Components/DataMatrixIcon.svelte +112 -112
  25. package/dist/Components/DataMatrixIconProps.d.ts +3 -13
  26. package/dist/Components/DateInput.svelte +148 -148
  27. package/dist/Components/DatePicker.svelte +300 -300
  28. package/dist/Components/DesktopModal.svelte +90 -90
  29. package/dist/Components/Dial.svelte +204 -204
  30. package/dist/Components/DialProps.d.ts +1 -18
  31. package/dist/Components/DimensionInput.svelte +170 -170
  32. package/dist/Components/DragMenu/DragMenuHolder.svelte +119 -119
  33. package/dist/Components/DragMenu/DraggableCard.svelte +77 -77
  34. package/dist/Components/FileCard.svelte +24 -24
  35. package/dist/Components/FileUpload.svelte +236 -236
  36. package/dist/Components/GridInput.svelte +196 -200
  37. package/dist/Components/GridInputSet.svelte +29 -29
  38. package/dist/Components/HorizontalTabGroup.svelte +82 -82
  39. package/dist/Components/HorizontalTabGroupButton.svelte +44 -44
  40. package/dist/Components/Icon.svelte +128 -128
  41. package/dist/Components/IconProps.d.ts +2 -7
  42. package/dist/Components/Icons.js +357 -357
  43. package/dist/Components/LoadingAnimation.svelte +29 -29
  44. package/dist/Components/LoadingModal.svelte +45 -45
  45. package/dist/Components/LoadingOverlay.svelte +25 -25
  46. package/dist/Components/LoadingOverlayProps.d.ts +3 -7
  47. package/dist/Components/Modal.svelte +258 -258
  48. package/dist/Components/ModalProps.d.ts +0 -3
  49. package/dist/Components/MultiSelect.svelte +220 -220
  50. package/dist/Components/MultiSelectCommonProps.d.ts +6 -17
  51. package/dist/Components/Nav/Nav.svelte +99 -99
  52. package/dist/Components/Nav/NavProps.d.ts +4 -11
  53. package/dist/Components/Nav/NavServiceMenuList.svelte +43 -43
  54. package/dist/Components/Nav/NavTab.svelte +62 -62
  55. package/dist/Components/Nav/ServiceMenuItem.svelte +100 -100
  56. package/dist/Components/Nav/ServicesNav.svelte +80 -80
  57. package/dist/Components/NumberInput.svelte +157 -157
  58. package/dist/Components/PageHeading.svelte +25 -25
  59. package/dist/Components/PasswordInput.svelte +88 -88
  60. package/dist/Components/Portal.svelte +36 -36
  61. package/dist/Components/ProgressBubble.svelte +107 -108
  62. package/dist/Components/ProgressBubbleProps.d.ts +3 -3
  63. package/dist/Components/QuerySelect.svelte +366 -366
  64. package/dist/Components/QuerySelectProps.d.ts +4 -14
  65. package/dist/Components/SingleSelect.svelte +250 -250
  66. package/dist/Components/SingleSelectCommonProps.d.ts +3 -19
  67. package/dist/Components/StepButton.svelte +70 -70
  68. package/dist/Components/StepForm.svelte +140 -140
  69. package/dist/Components/Switch.svelte +69 -69
  70. package/dist/Components/Table/ARCHITECTURE.md +298 -0
  71. package/dist/Components/Table/Body/QuickSearchCell.svelte +679 -694
  72. package/dist/Components/Table/Body/Rows/ColumnHighlight.svelte +51 -51
  73. package/dist/Components/Table/Body/Rows/ColumnList.svelte +59 -59
  74. package/dist/Components/Table/Body/Rows/ColumnListRow.svelte +456 -478
  75. package/dist/Components/Table/Body/Rows/Columns/AccessorComponent.svelte +79 -79
  76. package/dist/Components/Table/Body/Rows/Columns/ActionsCell.svelte +185 -188
  77. package/dist/Components/Table/Body/Rows/Columns/BubbleCell.svelte +124 -124
  78. package/dist/Components/Table/Body/Rows/Columns/ExpandCell.svelte +120 -120
  79. package/dist/Components/Table/Body/Rows/Columns/FocusableImmutableCell.svelte +230 -230
  80. package/dist/Components/Table/Body/Rows/Columns/ProgressCell.svelte +105 -105
  81. package/dist/Components/Table/Body/Rows/Columns/SelectColumn.d.ts +12 -9
  82. package/dist/Components/Table/Body/Rows/Columns/SelectTableCell.d.ts +5 -5
  83. package/dist/Components/Table/Body/Rows/Columns/TableAction.svelte +87 -87
  84. package/dist/Components/Table/Body/Rows/Columns/TableCheckbox.svelte +126 -126
  85. package/dist/Components/Table/Body/Rows/Columns/TableColumn.svelte +159 -159
  86. package/dist/Components/Table/Body/Rows/Columns/TableDatePicker.svelte +246 -246
  87. package/dist/Components/Table/Body/Rows/Columns/TableDatePickerProps.d.ts +4 -4
  88. package/dist/Components/Table/Body/Rows/Columns/TableNumberInput.svelte +216 -216
  89. package/dist/Components/Table/Body/Rows/Columns/TableQueryCell.d.ts +6 -5
  90. package/dist/Components/Table/Body/Rows/Columns/TableQueryColumn.d.ts +7 -6
  91. package/dist/Components/Table/Body/Rows/Columns/TableQuerySelect.svelte +252 -257
  92. package/dist/Components/Table/Body/Rows/Columns/TableRowSelectionCheckbox.svelte +179 -179
  93. package/dist/Components/Table/Body/Rows/Columns/TableSelect.svelte +221 -229
  94. package/dist/Components/Table/Body/Rows/Columns/TableSelect.svelte.d.ts +11 -11
  95. package/dist/Components/Table/Body/Rows/Columns/TableTextInput.svelte +197 -197
  96. package/dist/Components/Table/Body/Rows/Columns/ValidityCell.svelte +190 -190
  97. package/dist/Components/Table/Body/Rows/TableRow.svelte +290 -290
  98. package/dist/Components/Table/Body/TableBody.svelte +155 -155
  99. package/dist/Components/Table/ColumnDefinitions/ExampleItemColumnDefRepository.svelte.js +2 -3
  100. package/dist/Components/Table/ColumnFactory.svelte.d.ts +9 -11
  101. package/dist/Components/Table/ColumnFactory.svelte.js +101 -118
  102. package/dist/Components/Table/ColumnKindRegistry.d.ts +112 -0
  103. package/dist/Components/Table/ColumnKindRegistry.js +63 -0
  104. package/dist/Components/Table/Headers/HighlightAllHeader.svelte +41 -41
  105. package/dist/Components/Table/Headers/SelectAllHeader.svelte +30 -30
  106. package/dist/Components/Table/Headers/TableHead.svelte +415 -413
  107. package/dist/Components/Table/Misc/ColumnPanel.svelte +94 -94
  108. package/dist/Components/Table/Misc/ColumnPanelModal.svelte +112 -112
  109. package/dist/Components/Table/Misc/FilterInput.svelte +620 -644
  110. package/dist/Components/Table/Misc/FilterInput.svelte.d.ts +12 -12
  111. package/dist/Components/Table/Misc/FilterInputProps.d.ts +2 -2
  112. package/dist/Components/Table/Misc/FilterPanel.svelte +257 -257
  113. package/dist/Components/Table/Misc/FilterPanelModal.svelte +30 -30
  114. package/dist/Components/Table/Misc/SidePanel.svelte +35 -35
  115. package/dist/Components/Table/Misc/TableFooter.svelte +311 -311
  116. package/dist/Components/Table/Misc/TableHorizontalBar.svelte +125 -125
  117. package/dist/Components/Table/Misc/TableSidebar.svelte +157 -157
  118. package/dist/Components/Table/Misc/ToolboxPanel.svelte +100 -100
  119. package/dist/Components/Table/Misc/ToolboxPanelModal.svelte +107 -107
  120. package/dist/Components/Table/NestedTable.svelte +130 -133
  121. package/dist/Components/Table/SubApis.svelte.d.ts +1 -5
  122. package/dist/Components/Table/SubApis.svelte.js +33 -32
  123. package/dist/Components/Table/Table.svelte +692 -745
  124. package/dist/Components/Table/TableHelpers.svelte.d.ts +6 -19
  125. package/dist/Components/Table/TableHelpers.svelte.js +6 -14
  126. package/dist/Components/Table/Types/Columns/Column.d.ts +2 -2
  127. package/dist/Components/Table/Types/Columns/DateColumn.d.ts +3 -3
  128. package/dist/Components/Table/Types/Columns/DateTableCell.d.ts +7 -7
  129. package/dist/Components/Table/Types/Columns/Definitions/Accessors/AccessorDef.svelte.d.ts +7 -8
  130. package/dist/Components/Table/Types/Columns/Definitions/Accessors/AccessorDef.svelte.js +4 -5
  131. package/dist/Components/Table/Types/Columns/Definitions/Accessors/CheckboxDef.svelte.d.ts +11 -14
  132. package/dist/Components/Table/Types/Columns/Definitions/Accessors/CheckboxDef.svelte.js +3 -4
  133. package/dist/Components/Table/Types/Columns/Definitions/Accessors/DateInputDef.svelte.d.ts +7 -11
  134. package/dist/Components/Table/Types/Columns/Definitions/Accessors/DateInputDef.svelte.js +3 -3
  135. package/dist/Components/Table/Types/Columns/Definitions/Accessors/NumberInputDef.svelte.d.ts +13 -18
  136. package/dist/Components/Table/Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js +4 -5
  137. package/dist/Components/Table/Types/Columns/Definitions/Accessors/QueryDef.svelte.d.ts +5 -5
  138. package/dist/Components/Table/Types/Columns/Definitions/Accessors/QueryDef.svelte.js +2 -2
  139. package/dist/Components/Table/Types/Columns/Definitions/Accessors/SelectDef.svelte.d.ts +15 -12
  140. package/dist/Components/Table/Types/Columns/Definitions/Accessors/SelectDef.svelte.js +4 -5
  141. package/dist/Components/Table/Types/Columns/Definitions/Accessors/TextInputDef.svelte.d.ts +8 -12
  142. package/dist/Components/Table/Types/Columns/Definitions/Accessors/TextInputDef.svelte.js +3 -3
  143. package/dist/Components/Table/Types/Columns/Definitions/Actions/ActionsDef.svelte.d.ts +6 -6
  144. package/dist/Components/Table/Types/Columns/Definitions/Actions/ActionsDef.svelte.js +3 -3
  145. package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.d.ts +49 -16
  146. package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.js +27 -5
  147. package/dist/Components/Table/Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.d.ts +7 -7
  148. package/dist/Components/Table/Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js +4 -4
  149. package/dist/Components/Table/Types/Columns/Definitions/Display/BubbleDef.svelte.d.ts +5 -5
  150. package/dist/Components/Table/Types/Columns/Definitions/Display/BubbleDef.svelte.js +2 -2
  151. package/dist/Components/Table/Types/Columns/Definitions/Display/DisplayDef.svelte.d.ts +5 -5
  152. package/dist/Components/Table/Types/Columns/Definitions/Display/DisplayDef.svelte.js +2 -2
  153. package/dist/Components/Table/Types/Columns/Definitions/Display/ProgressBarDef.svelte.d.ts +5 -5
  154. package/dist/Components/Table/Types/Columns/Definitions/Display/ProgressBarDef.svelte.js +2 -2
  155. package/dist/Components/Table/Types/Columns/Definitions/Display/ValidityDef.svelte.d.ts +5 -5
  156. package/dist/Components/Table/Types/Columns/Definitions/Display/ValidityDef.svelte.js +2 -2
  157. package/dist/Components/Table/Types/Columns/Definitions/Expand/ExpandDef.svelte.d.ts +11 -19
  158. package/dist/Components/Table/Types/Columns/Definitions/Expand/ExpandDef.svelte.js +4 -8
  159. package/dist/Components/Table/Types/Columns/Definitions/FilterOnly/FilterOnlyDef.svelte.d.ts +6 -7
  160. package/dist/Components/Table/Types/Columns/Definitions/FilterOnly/FilterOnlyDef.svelte.js +3 -4
  161. package/dist/Components/Table/Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.d.ts +9 -9
  162. package/dist/Components/Table/Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js +4 -4
  163. package/dist/Components/Table/Types/Columns/ExpandTableCell.d.ts +5 -5
  164. package/dist/Components/Table/Types/Columns/ProgressBarTableCell.d.ts +6 -6
  165. package/dist/Components/Table/Types/Columns/TableCell.d.ts +7 -6
  166. package/dist/Components/Table/Types/Context/ClipboardState.svelte.d.ts +98 -0
  167. package/dist/Components/Table/Types/Context/ClipboardState.svelte.js +290 -0
  168. package/dist/Components/Table/Types/Context/ColumnLayoutState.svelte.d.ts +17 -45
  169. package/dist/Components/Table/Types/Context/ColumnLayoutState.svelte.js +17 -45
  170. package/dist/Components/Table/Types/Context/FilteringState.svelte.d.ts +9 -20
  171. package/dist/Components/Table/Types/Context/FilteringState.svelte.js +9 -20
  172. package/dist/Components/Table/Types/Context/FocusState.svelte.d.ts +23 -42
  173. package/dist/Components/Table/Types/Context/FocusState.svelte.js +32 -59
  174. package/dist/Components/Table/Types/Context/ITable.d.ts +5 -8
  175. package/dist/Components/Table/Types/Context/PreferencesState.svelte.d.ts +29 -56
  176. package/dist/Components/Table/Types/Context/PreferencesState.svelte.js +28 -55
  177. package/dist/Components/Table/Types/Context/QueryValuesState.svelte.d.ts +50 -0
  178. package/dist/Components/Table/Types/Context/QueryValuesState.svelte.js +62 -0
  179. package/dist/Components/Table/Types/Context/SelectionState.svelte.d.ts +17 -28
  180. package/dist/Components/Table/Types/Context/SelectionState.svelte.js +17 -28
  181. package/dist/Components/Table/Types/Context/SortingState.svelte.d.ts +15 -29
  182. package/dist/Components/Table/Types/Context/SortingState.svelte.js +17 -31
  183. package/dist/Components/Table/Types/Context/TableContext.svelte.d.ts +212 -325
  184. package/dist/Components/Table/Types/Context/TableContext.svelte.js +292 -706
  185. package/dist/Components/Table/Types/Context/VirtualisationState.svelte.d.ts +62 -79
  186. package/dist/Components/Table/Types/Context/VirtualisationState.svelte.js +54 -73
  187. package/dist/Components/Table/Types/DataRepository/BuiltInRemoteRepository.svelte.d.ts +16 -27
  188. package/dist/Components/Table/Types/DataRepository/BuiltInRemoteRepository.svelte.js +16 -27
  189. package/dist/Components/Table/Types/DataRepository/IDataRepository.d.ts +12 -15
  190. package/dist/Components/Table/Types/DataRepository/TableDataRepository.svelte.d.ts +15 -30
  191. package/dist/Components/Table/Types/DataRepository/TableDataRepository.svelte.js +16 -28
  192. package/dist/Components/Table/Types/Header.d.ts +4 -4
  193. package/dist/Components/Table/Types/HeaderGroup.d.ts +5 -5
  194. package/dist/Components/Table/Types/Public/index.d.ts +2 -4
  195. package/dist/Components/Table/Types/Public/index.js +2 -4
  196. package/dist/Components/Table/clipboardEscape.d.ts +32 -0
  197. package/dist/Components/Table/clipboardEscape.js +45 -0
  198. package/dist/Components/Table/createTable.svelte.d.ts +8 -18
  199. package/dist/Components/Table/createTable.svelte.js +19 -47
  200. package/dist/Components/Test/TestContextConsumer.svelte +13 -13
  201. package/dist/Components/TextArea.svelte +130 -130
  202. package/dist/Components/TextInput.svelte +176 -176
  203. package/dist/Components/ThreeStateRadio.svelte +131 -131
  204. package/dist/Components/Touch/BoolCard.svelte +45 -45
  205. package/dist/Components/Touch/DateModal.svelte +209 -209
  206. package/dist/Components/Touch/EditCard.svelte +59 -59
  207. package/dist/Components/Touch/InfoCard.svelte +31 -31
  208. package/dist/Components/Touch/InfoTextCard.svelte +28 -28
  209. package/dist/Components/Touch/ModalExplanation.svelte +17 -17
  210. package/dist/Components/Touch/NumberKeyboard.svelte +225 -225
  211. package/dist/Components/Touch/NumberModal.svelte +79 -79
  212. package/dist/Components/Touch/PlusMinusCard.svelte +46 -46
  213. package/dist/Components/Touch/SelectModal.svelte +123 -123
  214. package/dist/Components/Touch/SummaryCard.svelte +93 -93
  215. package/dist/Components/Touch/TextAreaModal.svelte +95 -95
  216. package/dist/Components/Touch/TextModal.svelte +106 -106
  217. package/dist/Components/Touch/TouchCard.svelte +33 -33
  218. package/dist/Components/Touch/TouchModal.svelte +274 -274
  219. package/dist/Components/Touch/UtilityButton.svelte +109 -109
  220. package/dist/Components/VerticalTabGroup.svelte +79 -79
  221. package/dist/Components/VerticalTabGroupButton.svelte +58 -58
  222. package/dist/Contexts/ToastContext.svelte.js +3 -4
  223. package/dist/Helpers/Datamatrix.d.ts +19 -19
  224. package/dist/Helpers/Datamatrix.js +291 -291
  225. package/dist/Helpers/Helpers.svelte.d.ts +2 -4
  226. package/dist/Helpers/Helpers.svelte.js +2 -4
  227. package/dist/Helpers/dropdownPortal.d.ts +26 -41
  228. package/dist/Helpers/dropdownPortal.js +62 -116
  229. package/dist/Types/Examples/ExampleModal.svelte +35 -35
  230. package/dist/index.d.ts +0 -1
  231. package/dist/scss/_basics.scss +12 -12
  232. package/dist/scss/_colours.scss +134 -134
  233. package/dist/scss/_mixins.scss +3348 -3360
  234. package/dist/scss/_motion.scss +57 -57
  235. package/dist/scss/_sizing.scss +85 -85
  236. package/dist/scss/_transitions.scss +8 -8
  237. package/package.json +2 -1
@@ -1,111 +1,111 @@
1
- <svelte:options runes />
2
-
3
- <script lang="ts">
4
- import { passthrough } from '../../Helpers/Helpers.svelte.js';
5
- import { ColourSet } from '../../scss/colours.js';
6
- import { Side } from '../../Types/Internal/Side.js';
7
- import { Size } from '../../Types/Internal/Size.js';
8
- import { onMount } from 'svelte';
9
- import DataMatrixIcon from '../DataMatrixIcon.svelte';
10
- import Icon from '../Icon.svelte';
11
- import type { DataMatrixSvg } from '../DataMatrixIconProps.js';
12
- import type { UtilityButtonProps } from './UtilityButtonProps.js';
13
- let {
14
- type = 'button',
15
- colourSet = ColourSet.Secondary,
16
- icon,
17
- side = Side.Top,
18
- size: explicitSize,
19
- notifications,
20
- ref = $bindable(),
21
- disabled = false,
22
- label,
23
- onEditBarcode,
24
- onclick,
25
- onfocus,
26
- onblur,
27
- children,
28
- }: UtilityButtonProps = $props();
29
-
30
- let isMounted = $state(false);
31
-
32
- onMount(() => {
33
- isMounted = true;
34
- });
35
-
36
- const size: Size = $derived.by(() => {
37
- if (!isMounted) {
38
- return Size.DoubleXLarge;
39
- }
40
- if (explicitSize !== undefined) {
41
- return explicitSize;
42
- }
43
- if (icon instanceof SVGSVGElement) {
44
- return Size.DoubleXLarge;
45
- }
46
- return icon?.size ?? Size.DoubleXLarge;
47
- });
48
- let slotSpan: HTMLSpanElement | undefined = $state();
49
- </script>
50
-
51
- <button
52
- {type}
53
- class:call-to-action={colourSet === ColourSet.Primary || colourSet === ColourSet.CallToAction}
54
- {disabled}
55
- class:left={side == Side.Left}
56
- class:right={side == Side.Right}
57
- class:top={side == Side.Top}
58
- class:bottom={side == Side.Bottom}
59
- bind:this={ref}
60
- aria-label={label}
61
- {onclick}
62
- {onfocus}
63
- {onblur}
64
- oncontextmenu={(e) => {
65
- if (onEditBarcode) {
66
- e.preventDefault();
67
- onEditBarcode();
68
- }
69
- }}
70
- onkeydown={passthrough}
71
- >
72
- {#if isMounted && icon}
73
- <div
74
- class="expand"
75
- class:left={side == Side.Left}
76
- class:right={side == Side.Right}
77
- class:top={side == Side.Top}
78
- class:bottom={side == Side.Bottom}
79
- >
80
- {#if icon instanceof SVGSVGElement}
81
- <!-- SECURITY: UtilityButton accepts a generic SVGSVGElement here for backwards
82
- compatibility. The cast to DataMatrixSvg trusts the caller; DataMatrixIcon
83
- additionally sanitises the cloned subtree before mounting. -->
84
- <DataMatrixIcon
85
- title={slotSpan?.textContent ?? '{unknown}'}
86
- icon={{ kind: 'svg', svg: icon as DataMatrixSvg }}
87
- />
88
- {:else}
89
- {#if notifications}
90
- <span class="notification">{notifications}</span>
91
- {/if}
92
-
93
- <Icon
94
- {...icon}
95
- {size}
96
- />
97
- {/if}
98
- </div>
99
- {/if}
100
- <span class="utility-label">
101
- {#if notifications && icon instanceof SVGSVGElement}
102
- <span class="notification-on-text">{notifications}</span>
103
- {/if}<span bind:this={slotSpan}
104
- >{#if children}{@render children()}{/if}</span
105
- >
106
- </span>
107
- </button>
108
-
1
+ <svelte:options runes />
2
+
3
+ <script lang="ts">
4
+ import { passthrough } from '../../Helpers/Helpers.svelte.js';
5
+ import { ColourSet } from '../../scss/colours.js';
6
+ import { Side } from '../../Types/Internal/Side.js';
7
+ import { Size } from '../../Types/Internal/Size.js';
8
+ import { onMount } from 'svelte';
9
+ import DataMatrixIcon from '../DataMatrixIcon.svelte';
10
+ import Icon from '../Icon.svelte';
11
+ import type { DataMatrixSvg } from '../DataMatrixIconProps.js';
12
+ import type { UtilityButtonProps } from './UtilityButtonProps.js';
13
+ let {
14
+ type = 'button',
15
+ colourSet = ColourSet.Secondary,
16
+ icon,
17
+ side = Side.Top,
18
+ size: explicitSize,
19
+ notifications,
20
+ ref = $bindable(),
21
+ disabled = false,
22
+ label,
23
+ onEditBarcode,
24
+ onclick,
25
+ onfocus,
26
+ onblur,
27
+ children,
28
+ }: UtilityButtonProps = $props();
29
+
30
+ let isMounted = $state(false);
31
+
32
+ onMount(() => {
33
+ isMounted = true;
34
+ });
35
+
36
+ const size: Size = $derived.by(() => {
37
+ if (!isMounted) {
38
+ return Size.DoubleXLarge;
39
+ }
40
+ if (explicitSize !== undefined) {
41
+ return explicitSize;
42
+ }
43
+ if (icon instanceof SVGSVGElement) {
44
+ return Size.DoubleXLarge;
45
+ }
46
+ return icon?.size ?? Size.DoubleXLarge;
47
+ });
48
+ let slotSpan: HTMLSpanElement | undefined = $state();
49
+ </script>
50
+
51
+ <button
52
+ {type}
53
+ class:call-to-action={colourSet === ColourSet.Primary || colourSet === ColourSet.CallToAction}
54
+ {disabled}
55
+ class:left={side == Side.Left}
56
+ class:right={side == Side.Right}
57
+ class:top={side == Side.Top}
58
+ class:bottom={side == Side.Bottom}
59
+ bind:this={ref}
60
+ aria-label={label}
61
+ {onclick}
62
+ {onfocus}
63
+ {onblur}
64
+ oncontextmenu={(e) => {
65
+ if (onEditBarcode) {
66
+ e.preventDefault();
67
+ onEditBarcode();
68
+ }
69
+ }}
70
+ onkeydown={passthrough}
71
+ >
72
+ {#if isMounted && icon}
73
+ <div
74
+ class="expand"
75
+ class:left={side == Side.Left}
76
+ class:right={side == Side.Right}
77
+ class:top={side == Side.Top}
78
+ class:bottom={side == Side.Bottom}
79
+ >
80
+ {#if icon instanceof SVGSVGElement}
81
+ <!-- SECURITY: UtilityButton accepts a generic SVGSVGElement here for backwards
82
+ compatibility. The cast to DataMatrixSvg trusts the caller; DataMatrixIcon
83
+ additionally sanitises the cloned subtree before mounting. -->
84
+ <DataMatrixIcon
85
+ title={slotSpan?.textContent ?? '{unknown}'}
86
+ icon={{ kind: 'svg', svg: icon as DataMatrixSvg }}
87
+ />
88
+ {:else}
89
+ {#if notifications}
90
+ <span class="notification">{notifications}</span>
91
+ {/if}
92
+
93
+ <Icon
94
+ {...icon}
95
+ {size}
96
+ />
97
+ {/if}
98
+ </div>
99
+ {/if}
100
+ <span class="utility-label">
101
+ {#if notifications && icon instanceof SVGSVGElement}
102
+ <span class="notification-on-text">{notifications}</span>
103
+ {/if}<span bind:this={slotSpan}
104
+ >{#if children}{@render children()}{/if}</span
105
+ >
106
+ </span>
107
+ </button>
108
+
109
109
  <style>button {
110
110
  background-color: #f4f7f9;
111
111
  box-sizing: border-box;
@@ -194,4 +194,4 @@ button:not([disabled]).call-to-action:not([disabled]):focus, button:not([disable
194
194
  }
195
195
  button:not([disabled]).call-to-action:not([disabled]):focus {
196
196
  outline-offset: -2px;
197
- }</style>
197
+ }</style>
@@ -1,81 +1,81 @@
1
- <svelte:options runes />
2
-
3
- <script
4
- lang="ts"
5
- generics="CommonDenominator"
6
- >
7
- import { readJSON } from '../Helpers/Storage.js';
8
- import { onMount, untrack } from 'svelte';
9
- import VerticalTabGroupButton from './VerticalTabGroupButton.svelte';
10
- import type { VerticalTabGroupProps } from './VerticalTabGroupProps.js';
11
- const {
12
- name,
13
- tabs,
14
- selected,
15
- style,
16
- noscroll,
17
- noTabMessage,
18
- nohistory = false,
19
- dense = false,
20
- }: VerticalTabGroupProps<CommonDenominator> = $props();
21
-
22
- const isNonEmptyString = (raw: unknown): raw is string =>
23
- typeof raw === 'string' && raw.length > 0;
24
-
25
- const storageKey = (key: string): string => `scoria-vertical-tab-group:${key}:active-tab`;
26
-
27
- onMount(() => {
28
- if (name && !nohistory) {
29
- const tabName = readJSON(sessionStorage, storageKey(name), isNonEmptyString, '');
30
- if (tabName) {
31
- tabs.find((it) => it.label === tabName)?.onclick();
32
- }
33
- }
34
- });
35
-
36
- $effect(() => {
37
- if (name && selected) {
38
- untrack(() => {
39
- try {
40
- sessionStorage.setItem(storageKey(name), JSON.stringify(selected.label));
41
- } catch {
42
- // storage unavailable (private browsing, quota); persistence is best-effort
43
- }
44
- });
45
- }
46
- });
47
- </script>
48
-
49
- <div
50
- class="wrapper"
51
- class:noscroll
52
- class:dense
53
- {style}
54
- >
55
- <div class="tabs">
56
- {#each tabs as option (option.label)}
57
- <VerticalTabGroupButton
58
- {option}
59
- selected={selected?.label === option.label}
60
- />
61
- {/each}
62
- </div>
63
-
64
- <div
65
- class="content"
66
- class:noscroll
67
- class:dense
68
- >
69
- {#if selected}
70
- {@render selected.content(selected.args)}
71
- {:else}
72
- <div class="wrapper bg">
73
- <span class="red">{noTabMessage ?? 'No Tab Selected'}</span>
74
- </div>
75
- {/if}
76
- </div>
77
- </div>
78
-
1
+ <svelte:options runes />
2
+
3
+ <script
4
+ lang="ts"
5
+ generics="CommonDenominator"
6
+ >
7
+ import { readJSON } from '../Helpers/Storage.js';
8
+ import { onMount, untrack } from 'svelte';
9
+ import VerticalTabGroupButton from './VerticalTabGroupButton.svelte';
10
+ import type { VerticalTabGroupProps } from './VerticalTabGroupProps.js';
11
+ const {
12
+ name,
13
+ tabs,
14
+ selected,
15
+ style,
16
+ noscroll,
17
+ noTabMessage,
18
+ nohistory = false,
19
+ dense = false,
20
+ }: VerticalTabGroupProps<CommonDenominator> = $props();
21
+
22
+ const isNonEmptyString = (raw: unknown): raw is string =>
23
+ typeof raw === 'string' && raw.length > 0;
24
+
25
+ const storageKey = (key: string): string => `scoria-vertical-tab-group:${key}:active-tab`;
26
+
27
+ onMount(() => {
28
+ if (name && !nohistory) {
29
+ const tabName = readJSON(sessionStorage, storageKey(name), isNonEmptyString, '');
30
+ if (tabName) {
31
+ tabs.find((it) => it.label === tabName)?.onclick();
32
+ }
33
+ }
34
+ });
35
+
36
+ $effect(() => {
37
+ if (name && selected) {
38
+ untrack(() => {
39
+ try {
40
+ sessionStorage.setItem(storageKey(name), JSON.stringify(selected.label));
41
+ } catch {
42
+ // storage unavailable (private browsing, quota); persistence is best-effort
43
+ }
44
+ });
45
+ }
46
+ });
47
+ </script>
48
+
49
+ <div
50
+ class="wrapper"
51
+ class:noscroll
52
+ class:dense
53
+ {style}
54
+ >
55
+ <div class="tabs">
56
+ {#each tabs as option (option.label)}
57
+ <VerticalTabGroupButton
58
+ {option}
59
+ selected={selected?.label === option.label}
60
+ />
61
+ {/each}
62
+ </div>
63
+
64
+ <div
65
+ class="content"
66
+ class:noscroll
67
+ class:dense
68
+ >
69
+ {#if selected}
70
+ {@render selected.content(selected.args)}
71
+ {:else}
72
+ <div class="wrapper bg">
73
+ <span class="red">{noTabMessage ?? 'No Tab Selected'}</span>
74
+ </div>
75
+ {/if}
76
+ </div>
77
+ </div>
78
+
79
79
  <style>.bg {
80
80
  padding: 1.5rem;
81
81
  background-color: #f9e9e9;
@@ -124,4 +124,4 @@
124
124
  .wrapper .content.dense {
125
125
  flex-grow: 0;
126
126
  overflow: visible;
127
- }</style>
127
+ }</style>
@@ -1,60 +1,60 @@
1
- <svelte:options runes />
2
-
3
- <script
4
- lang="ts"
5
- generics="Args"
6
- >
7
- import { useAsyncFlag } from '../Helpers/AsyncFlag.svelte.js';
8
- import { Colour } from '../scss/colours.js';
9
- import { Size } from '../Types/Internal/Size.js';
10
- import Icon from './Icon.svelte';
11
- import type { TabGroupButtonProps } from './TabGroupButtonProps.js';
12
-
13
- const { option, selected }: TabGroupButtonProps<Args> = $props();
14
-
15
- const isValid = useAsyncFlag(() => option.isValid, true);
16
- const disabled = useAsyncFlag(() => option.disabled, false);
17
- const visible = useAsyncFlag(() => option.visible, true);
18
- </script>
19
-
20
- <button
21
- class:selected
22
- disabled={disabled.value}
23
- onclick={() => {
24
- option.onclick();
25
- }}
26
- type="button"
27
- class="tab"
28
- class:invalid={!isValid.value}
29
- class:hidden={!visible.value}
30
- >
31
- <div
32
- class="bordered"
33
- class:invalid={!isValid.value}
34
- >
35
- {#if option.iconLeft}
36
- <Icon
37
- {...option.iconLeft}
38
- colour={Colour['$brand-primary']}
39
- />
40
- {/if}
41
- {option.label}
42
- {#if !isValid.value}
43
- <Icon
44
- name="error"
45
- colour={Colour['$error-border']}
46
- size={Size.Small}
47
- />
48
- {:else if option.iconRight}
49
- <Icon
50
- colour={Colour['$brand-primary']}
51
- size={Size.Small}
52
- {...option.iconRight}
53
- />
54
- {/if}
55
- </div>
56
- </button>
57
-
1
+ <svelte:options runes />
2
+
3
+ <script
4
+ lang="ts"
5
+ generics="Args"
6
+ >
7
+ import { useAsyncFlag } from '../Helpers/AsyncFlag.svelte.js';
8
+ import { Colour } from '../scss/colours.js';
9
+ import { Size } from '../Types/Internal/Size.js';
10
+ import Icon from './Icon.svelte';
11
+ import type { TabGroupButtonProps } from './TabGroupButtonProps.js';
12
+
13
+ const { option, selected }: TabGroupButtonProps<Args> = $props();
14
+
15
+ const isValid = useAsyncFlag(() => option.isValid, true);
16
+ const disabled = useAsyncFlag(() => option.disabled, false);
17
+ const visible = useAsyncFlag(() => option.visible, true);
18
+ </script>
19
+
20
+ <button
21
+ class:selected
22
+ disabled={disabled.value}
23
+ onclick={() => {
24
+ option.onclick();
25
+ }}
26
+ type="button"
27
+ class="tab"
28
+ class:invalid={!isValid.value}
29
+ class:hidden={!visible.value}
30
+ >
31
+ <div
32
+ class="bordered"
33
+ class:invalid={!isValid.value}
34
+ >
35
+ {#if option.iconLeft}
36
+ <Icon
37
+ {...option.iconLeft}
38
+ colour={Colour['$brand-primary']}
39
+ />
40
+ {/if}
41
+ {option.label}
42
+ {#if !isValid.value}
43
+ <Icon
44
+ name="error"
45
+ colour={Colour['$error-border']}
46
+ size={Size.Small}
47
+ />
48
+ {:else if option.iconRight}
49
+ <Icon
50
+ colour={Colour['$brand-primary']}
51
+ size={Size.Small}
52
+ {...option.iconRight}
53
+ />
54
+ {/if}
55
+ </div>
56
+ </button>
57
+
58
58
  <style>button.tab.hidden {
59
59
  display: none !important;
60
60
  }
@@ -101,4 +101,4 @@
101
101
  }
102
102
  .tab.selected.invalid {
103
103
  border-bottom-color: #aa1414;
104
- }</style>
104
+ }</style>
@@ -17,10 +17,9 @@ function isWrappedResponse(message) {
17
17
  typeof message.payload.data == 'string');
18
18
  }
19
19
  /**
20
- * Narrows an object to {@link ToastMessage}: requires both a `result`
21
- * field that is a recognised {@link Validity} value and a `message`
22
- * field of type `string`. Previously this guard accepted any object
23
- * with a `result` property; tightened to actually validate the shape.
20
+ * Narrows an object to {@link ToastMessage}: requires a `result` field
21
+ * that is a recognised {@link Validity} value and a `message` field of
22
+ * type `string`.
24
23
  */
25
24
  function isToastMessage(message) {
26
25
  if (!('result' in message) || !('message' in message)) {
@@ -1,19 +1,19 @@
1
- import type { DataMatrixSvg } from '../Components/DataMatrixIconProps.js';
2
-
3
- export interface IDatamatrixOptions {
4
- msg: string;
5
- dim?: number;
6
- rct?: number;
7
- pad?: number;
8
- pal?: [string, string];
9
- vrb?: number;
10
- }
11
-
12
- /**
13
- * Build a DATAMatrix barcode SVG. The returned element is branded as
14
- * {@link DataMatrixSvg} so it can be passed directly to
15
- * `DataMatrixIcon` without further casting. The underlying JS
16
- * implementation produces a vanilla `SVGSVGElement`; the brand is a
17
- * compile-time discipline only.
18
- */
19
- export declare function DATAMatrix(value: IDatamatrixOptions | string): DataMatrixSvg;
1
+ import type { DataMatrixSvg } from '../Components/DataMatrixIconProps.js';
2
+
3
+ export interface IDatamatrixOptions {
4
+ msg: string;
5
+ dim?: number;
6
+ rct?: number;
7
+ pad?: number;
8
+ pal?: [string, string];
9
+ vrb?: number;
10
+ }
11
+
12
+ /**
13
+ * Build a DATAMatrix barcode SVG. The returned element is branded as
14
+ * {@link DataMatrixSvg} so it can be passed directly to
15
+ * `DataMatrixIcon` without further casting. The underlying JS
16
+ * implementation produces a vanilla `SVGSVGElement`; the brand is a
17
+ * compile-time discipline only.
18
+ */
19
+ export declare function DATAMatrix(value: IDatamatrixOptions | string): DataMatrixSvg;