@lavalogic/scoria 0.37.44 → 0.37.46

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 (239) 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 +86 -83
  22. package/dist/Components/Contexts/Toast.svelte.d.ts +8 -5
  23. package/dist/Components/Contexts/ToastContainer.svelte +65 -65
  24. package/dist/Components/Contexts/Tooltip.svelte +37 -37
  25. package/dist/Components/DataMatrixIcon.svelte +112 -112
  26. package/dist/Components/DataMatrixIconProps.d.ts +3 -13
  27. package/dist/Components/DateInput.svelte +148 -148
  28. package/dist/Components/DatePicker.svelte +300 -300
  29. package/dist/Components/DesktopModal.svelte +90 -90
  30. package/dist/Components/Dial.svelte +204 -204
  31. package/dist/Components/DialProps.d.ts +1 -18
  32. package/dist/Components/DimensionInput.svelte +170 -170
  33. package/dist/Components/DragMenu/DragMenuHolder.svelte +119 -119
  34. package/dist/Components/DragMenu/DraggableCard.svelte +77 -77
  35. package/dist/Components/FileCard.svelte +24 -24
  36. package/dist/Components/FileUpload.svelte +236 -236
  37. package/dist/Components/GridInput.svelte +196 -200
  38. package/dist/Components/GridInputSet.svelte +29 -29
  39. package/dist/Components/HorizontalTabGroup.svelte +82 -82
  40. package/dist/Components/HorizontalTabGroupButton.svelte +44 -44
  41. package/dist/Components/Icon.svelte +128 -128
  42. package/dist/Components/IconProps.d.ts +2 -7
  43. package/dist/Components/Icons.js +357 -357
  44. package/dist/Components/LoadingAnimation.svelte +29 -29
  45. package/dist/Components/LoadingModal.svelte +45 -45
  46. package/dist/Components/LoadingOverlay.svelte +25 -25
  47. package/dist/Components/LoadingOverlayProps.d.ts +3 -7
  48. package/dist/Components/Modal.svelte +258 -258
  49. package/dist/Components/ModalProps.d.ts +0 -3
  50. package/dist/Components/MultiSelect.svelte +220 -220
  51. package/dist/Components/MultiSelectCommonProps.d.ts +6 -17
  52. package/dist/Components/Nav/Nav.svelte +110 -99
  53. package/dist/Components/Nav/NavProps.d.ts +4 -11
  54. package/dist/Components/Nav/NavServiceMenuList.svelte +43 -43
  55. package/dist/Components/Nav/NavTab.svelte +62 -62
  56. package/dist/Components/Nav/ServiceMenuItem.svelte +100 -100
  57. package/dist/Components/Nav/ServicesNav.svelte +80 -80
  58. package/dist/Components/NumberInput.svelte +157 -157
  59. package/dist/Components/PageHeading.svelte +25 -25
  60. package/dist/Components/PasswordInput.svelte +88 -88
  61. package/dist/Components/Portal.svelte +36 -36
  62. package/dist/Components/ProgressBubble.svelte +107 -108
  63. package/dist/Components/ProgressBubbleProps.d.ts +3 -3
  64. package/dist/Components/QuerySelect.svelte +366 -366
  65. package/dist/Components/QuerySelectProps.d.ts +4 -14
  66. package/dist/Components/SingleSelect.svelte +250 -250
  67. package/dist/Components/SingleSelectCommonProps.d.ts +3 -19
  68. package/dist/Components/StepButton.svelte +70 -70
  69. package/dist/Components/StepForm.svelte +140 -140
  70. package/dist/Components/Switch.svelte +69 -69
  71. package/dist/Components/Table/ARCHITECTURE.md +298 -0
  72. package/dist/Components/Table/Body/QuickSearchCell.svelte +683 -694
  73. package/dist/Components/Table/Body/Rows/ColumnHighlight.svelte +51 -51
  74. package/dist/Components/Table/Body/Rows/ColumnList.svelte +59 -59
  75. package/dist/Components/Table/Body/Rows/ColumnListRow.svelte +456 -478
  76. package/dist/Components/Table/Body/Rows/Columns/AccessorComponent.svelte +79 -79
  77. package/dist/Components/Table/Body/Rows/Columns/ActionsCell.svelte +185 -188
  78. package/dist/Components/Table/Body/Rows/Columns/BubbleCell.svelte +124 -124
  79. package/dist/Components/Table/Body/Rows/Columns/ExpandCell.svelte +120 -120
  80. package/dist/Components/Table/Body/Rows/Columns/FocusableImmutableCell.svelte +230 -230
  81. package/dist/Components/Table/Body/Rows/Columns/ProgressCell.svelte +105 -105
  82. package/dist/Components/Table/Body/Rows/Columns/SelectColumn.d.ts +12 -9
  83. package/dist/Components/Table/Body/Rows/Columns/SelectTableCell.d.ts +5 -5
  84. package/dist/Components/Table/Body/Rows/Columns/TableAction.svelte +87 -87
  85. package/dist/Components/Table/Body/Rows/Columns/TableCheckbox.svelte +126 -126
  86. package/dist/Components/Table/Body/Rows/Columns/TableColumn.svelte +159 -159
  87. package/dist/Components/Table/Body/Rows/Columns/TableDatePicker.svelte +246 -246
  88. package/dist/Components/Table/Body/Rows/Columns/TableDatePickerProps.d.ts +4 -4
  89. package/dist/Components/Table/Body/Rows/Columns/TableNumberInput.svelte +216 -216
  90. package/dist/Components/Table/Body/Rows/Columns/TableQueryCell.d.ts +6 -5
  91. package/dist/Components/Table/Body/Rows/Columns/TableQueryColumn.d.ts +7 -6
  92. package/dist/Components/Table/Body/Rows/Columns/TableQuerySelect.svelte +252 -257
  93. package/dist/Components/Table/Body/Rows/Columns/TableRowSelectionCheckbox.svelte +179 -179
  94. package/dist/Components/Table/Body/Rows/Columns/TableSelect.svelte +221 -229
  95. package/dist/Components/Table/Body/Rows/Columns/TableSelect.svelte.d.ts +11 -11
  96. package/dist/Components/Table/Body/Rows/Columns/TableTextInput.svelte +197 -197
  97. package/dist/Components/Table/Body/Rows/Columns/ValidityCell.svelte +190 -190
  98. package/dist/Components/Table/Body/Rows/TableRow.svelte +290 -290
  99. package/dist/Components/Table/Body/TableBody.svelte +155 -155
  100. package/dist/Components/Table/ColumnDefinitions/ExampleItemColumnDefRepository.svelte.js +2 -3
  101. package/dist/Components/Table/ColumnFactory.svelte.d.ts +9 -11
  102. package/dist/Components/Table/ColumnFactory.svelte.js +110 -143
  103. package/dist/Components/Table/ColumnKindRegistry.d.ts +112 -0
  104. package/dist/Components/Table/ColumnKindRegistry.js +63 -0
  105. package/dist/Components/Table/Headers/HighlightAllHeader.svelte +41 -41
  106. package/dist/Components/Table/Headers/SelectAllHeader.svelte +30 -30
  107. package/dist/Components/Table/Headers/TableHead.svelte +415 -413
  108. package/dist/Components/Table/Misc/ColumnPanel.svelte +94 -94
  109. package/dist/Components/Table/Misc/ColumnPanelModal.svelte +112 -112
  110. package/dist/Components/Table/Misc/FilterInput.svelte +620 -644
  111. package/dist/Components/Table/Misc/FilterInput.svelte.d.ts +12 -12
  112. package/dist/Components/Table/Misc/FilterInputProps.d.ts +2 -2
  113. package/dist/Components/Table/Misc/FilterPanel.svelte +257 -257
  114. package/dist/Components/Table/Misc/FilterPanelModal.svelte +30 -30
  115. package/dist/Components/Table/Misc/SidePanel.svelte +35 -35
  116. package/dist/Components/Table/Misc/TableFooter.svelte +311 -311
  117. package/dist/Components/Table/Misc/TableHorizontalBar.svelte +125 -125
  118. package/dist/Components/Table/Misc/TableSidebar.svelte +157 -157
  119. package/dist/Components/Table/Misc/ToolboxPanel.svelte +100 -100
  120. package/dist/Components/Table/Misc/ToolboxPanelModal.svelte +107 -107
  121. package/dist/Components/Table/NestedTable.svelte +130 -133
  122. package/dist/Components/Table/SubApis.svelte.d.ts +1 -5
  123. package/dist/Components/Table/SubApis.svelte.js +33 -32
  124. package/dist/Components/Table/Table.svelte +692 -745
  125. package/dist/Components/Table/TableHelpers.svelte.d.ts +6 -19
  126. package/dist/Components/Table/TableHelpers.svelte.js +6 -14
  127. package/dist/Components/Table/Types/Columns/Column.d.ts +2 -2
  128. package/dist/Components/Table/Types/Columns/DateColumn.d.ts +3 -3
  129. package/dist/Components/Table/Types/Columns/DateTableCell.d.ts +7 -7
  130. package/dist/Components/Table/Types/Columns/Definitions/Accessors/AccessorDef.svelte.d.ts +7 -8
  131. package/dist/Components/Table/Types/Columns/Definitions/Accessors/AccessorDef.svelte.js +4 -5
  132. package/dist/Components/Table/Types/Columns/Definitions/Accessors/CheckboxDef.svelte.d.ts +11 -14
  133. package/dist/Components/Table/Types/Columns/Definitions/Accessors/CheckboxDef.svelte.js +3 -4
  134. package/dist/Components/Table/Types/Columns/Definitions/Accessors/DateInputDef.svelte.d.ts +7 -11
  135. package/dist/Components/Table/Types/Columns/Definitions/Accessors/DateInputDef.svelte.js +3 -3
  136. package/dist/Components/Table/Types/Columns/Definitions/Accessors/NumberInputDef.svelte.d.ts +13 -18
  137. package/dist/Components/Table/Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js +4 -5
  138. package/dist/Components/Table/Types/Columns/Definitions/Accessors/QueryDef.svelte.d.ts +5 -5
  139. package/dist/Components/Table/Types/Columns/Definitions/Accessors/QueryDef.svelte.js +2 -2
  140. package/dist/Components/Table/Types/Columns/Definitions/Accessors/SelectDef.svelte.d.ts +15 -12
  141. package/dist/Components/Table/Types/Columns/Definitions/Accessors/SelectDef.svelte.js +4 -5
  142. package/dist/Components/Table/Types/Columns/Definitions/Accessors/TextInputDef.svelte.d.ts +8 -12
  143. package/dist/Components/Table/Types/Columns/Definitions/Accessors/TextInputDef.svelte.js +3 -3
  144. package/dist/Components/Table/Types/Columns/Definitions/Actions/ActionsDef.svelte.d.ts +6 -6
  145. package/dist/Components/Table/Types/Columns/Definitions/Actions/ActionsDef.svelte.js +3 -3
  146. package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.d.ts +49 -16
  147. package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.js +27 -5
  148. package/dist/Components/Table/Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.d.ts +7 -7
  149. package/dist/Components/Table/Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js +4 -4
  150. package/dist/Components/Table/Types/Columns/Definitions/Display/BubbleDef.svelte.d.ts +5 -5
  151. package/dist/Components/Table/Types/Columns/Definitions/Display/BubbleDef.svelte.js +2 -2
  152. package/dist/Components/Table/Types/Columns/Definitions/Display/DisplayDef.svelte.d.ts +5 -5
  153. package/dist/Components/Table/Types/Columns/Definitions/Display/DisplayDef.svelte.js +2 -2
  154. package/dist/Components/Table/Types/Columns/Definitions/Display/ProgressBarDef.svelte.d.ts +5 -5
  155. package/dist/Components/Table/Types/Columns/Definitions/Display/ProgressBarDef.svelte.js +2 -2
  156. package/dist/Components/Table/Types/Columns/Definitions/Display/ValidityDef.svelte.d.ts +5 -5
  157. package/dist/Components/Table/Types/Columns/Definitions/Display/ValidityDef.svelte.js +2 -2
  158. package/dist/Components/Table/Types/Columns/Definitions/Expand/ExpandDef.svelte.d.ts +11 -19
  159. package/dist/Components/Table/Types/Columns/Definitions/Expand/ExpandDef.svelte.js +4 -8
  160. package/dist/Components/Table/Types/Columns/Definitions/FilterOnly/FilterOnlyDef.svelte.d.ts +6 -7
  161. package/dist/Components/Table/Types/Columns/Definitions/FilterOnly/FilterOnlyDef.svelte.js +3 -4
  162. package/dist/Components/Table/Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.d.ts +9 -9
  163. package/dist/Components/Table/Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js +4 -4
  164. package/dist/Components/Table/Types/Columns/ExpandTableCell.d.ts +5 -5
  165. package/dist/Components/Table/Types/Columns/ProgressBarTableCell.d.ts +6 -6
  166. package/dist/Components/Table/Types/Columns/TableCell.d.ts +7 -6
  167. package/dist/Components/Table/Types/Context/ClipboardState.svelte.d.ts +98 -0
  168. package/dist/Components/Table/Types/Context/ClipboardState.svelte.js +290 -0
  169. package/dist/Components/Table/Types/Context/ColumnLayoutState.svelte.d.ts +17 -45
  170. package/dist/Components/Table/Types/Context/ColumnLayoutState.svelte.js +17 -45
  171. package/dist/Components/Table/Types/Context/FilteringState.svelte.d.ts +9 -20
  172. package/dist/Components/Table/Types/Context/FilteringState.svelte.js +9 -20
  173. package/dist/Components/Table/Types/Context/FocusState.svelte.d.ts +23 -42
  174. package/dist/Components/Table/Types/Context/FocusState.svelte.js +32 -59
  175. package/dist/Components/Table/Types/Context/ITable.d.ts +5 -8
  176. package/dist/Components/Table/Types/Context/PreferencesState.svelte.d.ts +29 -56
  177. package/dist/Components/Table/Types/Context/PreferencesState.svelte.js +28 -55
  178. package/dist/Components/Table/Types/Context/QueryValuesState.svelte.d.ts +50 -0
  179. package/dist/Components/Table/Types/Context/QueryValuesState.svelte.js +62 -0
  180. package/dist/Components/Table/Types/Context/SelectionState.svelte.d.ts +17 -28
  181. package/dist/Components/Table/Types/Context/SelectionState.svelte.js +17 -28
  182. package/dist/Components/Table/Types/Context/SortingState.svelte.d.ts +15 -29
  183. package/dist/Components/Table/Types/Context/SortingState.svelte.js +17 -31
  184. package/dist/Components/Table/Types/Context/TableContext.svelte.d.ts +212 -325
  185. package/dist/Components/Table/Types/Context/TableContext.svelte.js +292 -706
  186. package/dist/Components/Table/Types/Context/VirtualisationState.svelte.d.ts +62 -79
  187. package/dist/Components/Table/Types/Context/VirtualisationState.svelte.js +54 -73
  188. package/dist/Components/Table/Types/DataRepository/BuiltInRemoteRepository.svelte.d.ts +16 -27
  189. package/dist/Components/Table/Types/DataRepository/BuiltInRemoteRepository.svelte.js +16 -27
  190. package/dist/Components/Table/Types/DataRepository/IDataRepository.d.ts +12 -15
  191. package/dist/Components/Table/Types/DataRepository/TableDataRepository.svelte.d.ts +15 -30
  192. package/dist/Components/Table/Types/DataRepository/TableDataRepository.svelte.js +16 -28
  193. package/dist/Components/Table/Types/Header.d.ts +4 -4
  194. package/dist/Components/Table/Types/HeaderGroup.d.ts +5 -5
  195. package/dist/Components/Table/Types/Public/index.d.ts +2 -4
  196. package/dist/Components/Table/Types/Public/index.js +2 -4
  197. package/dist/Components/Table/clipboardEscape.d.ts +32 -0
  198. package/dist/Components/Table/clipboardEscape.js +45 -0
  199. package/dist/Components/Table/createTable.svelte.d.ts +8 -18
  200. package/dist/Components/Table/createTable.svelte.js +19 -47
  201. package/dist/Components/Test/TestContextConsumer.svelte +13 -13
  202. package/dist/Components/TextArea.svelte +130 -130
  203. package/dist/Components/TextInput.svelte +176 -176
  204. package/dist/Components/ThreeStateRadio.svelte +131 -131
  205. package/dist/Components/Touch/BoolCard.svelte +45 -45
  206. package/dist/Components/Touch/DateModal.svelte +209 -209
  207. package/dist/Components/Touch/EditCard.svelte +59 -59
  208. package/dist/Components/Touch/InfoCard.svelte +31 -31
  209. package/dist/Components/Touch/InfoTextCard.svelte +28 -28
  210. package/dist/Components/Touch/ModalExplanation.svelte +17 -17
  211. package/dist/Components/Touch/NumberKeyboard.svelte +225 -225
  212. package/dist/Components/Touch/NumberModal.svelte +79 -79
  213. package/dist/Components/Touch/PlusMinusCard.svelte +46 -46
  214. package/dist/Components/Touch/SelectModal.svelte +123 -123
  215. package/dist/Components/Touch/SummaryCard.svelte +93 -93
  216. package/dist/Components/Touch/TextAreaModal.svelte +95 -95
  217. package/dist/Components/Touch/TextModal.svelte +106 -106
  218. package/dist/Components/Touch/TouchCard.svelte +33 -33
  219. package/dist/Components/Touch/TouchModal.svelte +274 -274
  220. package/dist/Components/Touch/UtilityButton.svelte +109 -109
  221. package/dist/Components/VerticalTabGroup.svelte +79 -79
  222. package/dist/Components/VerticalTabGroupButton.svelte +58 -58
  223. package/dist/Contexts/ToastContext.svelte.js +3 -4
  224. package/dist/Helpers/Datamatrix.d.ts +19 -19
  225. package/dist/Helpers/Datamatrix.js +291 -291
  226. package/dist/Helpers/Helpers.svelte.d.ts +47 -4
  227. package/dist/Helpers/Helpers.svelte.js +97 -4
  228. package/dist/Helpers/dropdownPortal.d.ts +26 -41
  229. package/dist/Helpers/dropdownPortal.js +62 -116
  230. package/dist/Types/Examples/ExampleModal.svelte +35 -35
  231. package/dist/index.d.ts +1 -2
  232. package/dist/index.js +1 -1
  233. package/dist/scss/_basics.scss +12 -12
  234. package/dist/scss/_colours.scss +134 -134
  235. package/dist/scss/_mixins.scss +3358 -3360
  236. package/dist/scss/_motion.scss +57 -57
  237. package/dist/scss/_sizing.scss +85 -85
  238. package/dist/scss/_transitions.scss +8 -8
  239. package/package.json +8 -6
@@ -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;