@lavalogic/scoria 0.38.10 → 0.38.12

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 (115) 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/AppointmentCalendar/AppointmentCalendar.svelte +702 -702
  6. package/dist/Components/Base/BaseModal.svelte +125 -125
  7. package/dist/Components/Base/ContextWrapper.svelte +72 -72
  8. package/dist/Components/Base/Pagination.svelte +198 -198
  9. package/dist/Components/Base/Snippets.svelte +36 -36
  10. package/dist/Components/BigRadioSet.svelte +38 -38
  11. package/dist/Components/Bubble.svelte +101 -101
  12. package/dist/Components/Button.svelte +209 -209
  13. package/dist/Components/Checkbox.svelte +86 -86
  14. package/dist/Components/Contexts/ContextMenu.svelte +164 -164
  15. package/dist/Components/Contexts/ContextMenuDivider.svelte +15 -15
  16. package/dist/Components/Contexts/ContextMenuOption.svelte +60 -60
  17. package/dist/Components/Contexts/ToastContainer.svelte +65 -65
  18. package/dist/Components/Contexts/Tooltip.svelte +37 -37
  19. package/dist/Components/DataMatrixIcon.svelte +112 -112
  20. package/dist/Components/DateInput.svelte +148 -148
  21. package/dist/Components/DatePicker.svelte +300 -300
  22. package/dist/Components/DesktopModal.svelte +90 -90
  23. package/dist/Components/Dial.svelte +204 -204
  24. package/dist/Components/DimensionInput.svelte +170 -170
  25. package/dist/Components/DragMenu/DragMenuHolder.svelte +119 -119
  26. package/dist/Components/DragMenu/DraggableCard.svelte +77 -77
  27. package/dist/Components/FileCard.svelte +24 -24
  28. package/dist/Components/FileUpload.svelte +236 -236
  29. package/dist/Components/GridInputSet.svelte +29 -29
  30. package/dist/Components/HorizontalTabGroup.svelte +82 -82
  31. package/dist/Components/HorizontalTabGroupButton.svelte +44 -44
  32. package/dist/Components/Icon.svelte +128 -128
  33. package/dist/Components/Icons.js +357 -357
  34. package/dist/Components/LoadingAnimation.svelte +29 -29
  35. package/dist/Components/LoadingModal.svelte +45 -45
  36. package/dist/Components/LoadingOverlay.svelte +25 -25
  37. package/dist/Components/Modal.svelte +258 -258
  38. package/dist/Components/MultiSelect.svelte +220 -220
  39. package/dist/Components/Nav/NavServiceMenuList.svelte +43 -43
  40. package/dist/Components/Nav/NavTab.svelte +62 -62
  41. package/dist/Components/Nav/ServicesNav.svelte +80 -80
  42. package/dist/Components/NumberInput.svelte +157 -157
  43. package/dist/Components/PageHeading.svelte +25 -25
  44. package/dist/Components/PasswordInput.svelte +88 -88
  45. package/dist/Components/Portal.svelte +36 -36
  46. package/dist/Components/QuerySelect.svelte +366 -366
  47. package/dist/Components/SingleSelect.svelte +250 -250
  48. package/dist/Components/StepButton.svelte +70 -70
  49. package/dist/Components/StepForm.svelte +140 -140
  50. package/dist/Components/Switch.svelte +69 -69
  51. package/dist/Components/Table/Body/Rows/ColumnHighlight.svelte +51 -51
  52. package/dist/Components/Table/Body/Rows/ColumnList.svelte +59 -59
  53. package/dist/Components/Table/Body/Rows/Columns/AccessorComponent.svelte +79 -79
  54. package/dist/Components/Table/Body/Rows/Columns/ExpandCell.svelte +120 -120
  55. package/dist/Components/Table/Body/Rows/Columns/ProgressCell.svelte +105 -105
  56. package/dist/Components/Table/Body/Rows/Columns/TableAction.svelte +87 -87
  57. package/dist/Components/Table/Body/Rows/Columns/TableCheckbox.svelte +126 -126
  58. package/dist/Components/Table/Body/Rows/Columns/TableColumn.svelte +159 -159
  59. package/dist/Components/Table/Body/Rows/Columns/TableDatePicker.svelte +246 -246
  60. package/dist/Components/Table/Body/Rows/Columns/TableNumberInput.svelte +216 -216
  61. package/dist/Components/Table/Body/Rows/Columns/TableRowSelectionCheckbox.svelte +179 -179
  62. package/dist/Components/Table/Body/Rows/Columns/TableTextInput.svelte +197 -197
  63. package/dist/Components/Table/Body/Rows/Columns/ValidityCell.svelte +190 -190
  64. package/dist/Components/Table/Body/Rows/TableRow.svelte +290 -290
  65. package/dist/Components/Table/Headers/HighlightAllHeader.svelte +41 -41
  66. package/dist/Components/Table/Headers/SelectAllHeader.svelte +30 -30
  67. package/dist/Components/Table/Misc/FilterInput.svelte +37 -16
  68. package/dist/Components/Table/Misc/SidePanel.svelte +35 -35
  69. package/dist/Components/Table/Misc/TableConfigurationModal.svelte +71 -0
  70. package/dist/Components/Table/Misc/ToolboxPanel.svelte +100 -100
  71. package/dist/Components/Table/Misc/ToolboxPanelModal.svelte +107 -107
  72. package/dist/Components/Table/Misc/UpdateViewOptionsModal.svelte +225 -0
  73. package/dist/Components/Table/Misc/UpdateViewOptionsModal.svelte.d.ts +26 -0
  74. package/dist/Components/Table/Misc/UpdateViewOptionsModalProps.d.ts +21 -0
  75. package/dist/Components/Table/Misc/UpdateViewOptionsModalProps.js +1 -0
  76. package/dist/Components/Table/Types/Context/TableContext.svelte.d.ts +49 -1
  77. package/dist/Components/Table/Types/Context/TableContext.svelte.js +142 -1
  78. package/dist/Components/Table/Types/DataRepository/BuiltInRemoteRepository.svelte.d.ts +2 -2
  79. package/dist/Components/Table/Types/DataRepository/BuiltInRemoteRepository.svelte.js +20 -2
  80. package/dist/Components/Table/Types/DataRepository/IDataRepository.d.ts +9 -1
  81. package/dist/Components/Table/Types/DataRepository/ILocalDataRepository.d.ts +1 -1
  82. package/dist/Components/Table/Types/DataRepository/IRemoteDataRepository.d.ts +1 -1
  83. package/dist/Components/Table/Types/DataRepository/TableDataRepository.svelte.d.ts +1 -1
  84. package/dist/Components/Table/Types/Persistence/DatatableView.d.ts +25 -0
  85. package/dist/Components/Test/TestContextConsumer.svelte +13 -13
  86. package/dist/Components/TextArea.svelte +130 -130
  87. package/dist/Components/TextInput.svelte +176 -176
  88. package/dist/Components/ThreeStateRadio.svelte +131 -131
  89. package/dist/Components/Touch/BoolCard.svelte +45 -45
  90. package/dist/Components/Touch/DateModal.svelte +209 -209
  91. package/dist/Components/Touch/EditCard.svelte +59 -59
  92. package/dist/Components/Touch/InfoCard.svelte +31 -31
  93. package/dist/Components/Touch/InfoTextCard.svelte +28 -28
  94. package/dist/Components/Touch/ModalExplanation.svelte +17 -17
  95. package/dist/Components/Touch/NumberKeyboard.svelte +225 -225
  96. package/dist/Components/Touch/NumberModal.svelte +79 -79
  97. package/dist/Components/Touch/PlusMinusCard.svelte +46 -46
  98. package/dist/Components/Touch/SummaryCard.svelte +93 -93
  99. package/dist/Components/Touch/TextAreaModal.svelte +95 -95
  100. package/dist/Components/Touch/TextModal.svelte +106 -106
  101. package/dist/Components/Touch/TouchCard.svelte +33 -33
  102. package/dist/Components/Touch/TouchModal.svelte +274 -274
  103. package/dist/Components/Touch/UtilityButton.svelte +109 -109
  104. package/dist/Components/VerticalTabGroup.svelte +79 -79
  105. package/dist/Components/VerticalTabGroupButton.svelte +58 -58
  106. package/dist/Helpers/Datamatrix.d.ts +19 -19
  107. package/dist/Helpers/Datamatrix.js +291 -291
  108. package/dist/Types/Examples/ExampleModal.svelte +35 -35
  109. package/dist/index.d.ts +1 -1
  110. package/dist/scss/_basics.scss +12 -12
  111. package/dist/scss/_colours.scss +134 -134
  112. package/dist/scss/_motion.scss +57 -57
  113. package/dist/scss/_sizing.scss +85 -85
  114. package/dist/scss/_transitions.scss +8 -8
  115. package/package.json +1 -1
@@ -1,67 +1,67 @@
1
- <svelte:options runes />
2
-
3
- <!--
4
- @component
5
- Live region for the {@link ToastContext}. Iterates the context's
6
- queue and renders one `Toast` per message, providing the
7
- copy-to-clipboard callback (the container owns the clipboard logic
8
- because the toast itself only knows the message it should copy).
9
-
10
- The wrapping `<section>` carries `role="region"` plus
11
- `aria-live="polite"` so multiple toast appearances are announced as
12
- a single rolling region without interrupting the user; individual
13
- `Toast` elements override `aria-live` to `assertive` for hard errors.
14
-
15
- Mounted once at the app root by `ContextWrapper`; consumers should
16
- not render this directly.
17
- -->
18
- <script lang="ts">
19
- import { ToastContext } from '../../Contexts/ToastContext.svelte.js';
20
- import { devCatch } from '../../Helpers/Helpers.svelte.js';
21
- import { Validity } from '../../Types/Internal/Validity.js';
22
- import { getContext } from 'svelte';
23
- import Toast from './Toast.svelte';
24
-
25
- const toastContext = getContext<ToastContext>(ToastContext.identifier);
26
-
27
- function copyDataToClipboard(text: string): void {
28
- // `navigator.clipboard` is `undefined` on insecure (HTTP)
29
- // origins and in some embedded WebViews. The compile-time
30
- // type says it is always defined, hence the eslint disable;
31
- // the runtime check is the load-bearing one.
32
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
33
- if (!navigator.clipboard) {
34
- toastContext.toast({
35
- result: Validity.Invalid,
36
- message: 'Cannot Copy in an Insecure Connection',
37
- copyable: false,
38
- });
39
- return;
40
- }
41
-
42
- navigator.clipboard.writeText(text).catch(devCatch);
43
- toastContext.toast({
44
- result: Validity.Info,
45
- message: 'Message copied to clipboard',
46
- copyable: false,
47
- });
48
- }
49
- </script>
50
-
51
- <section
52
- aria-live="polite"
53
- aria-label="Notifications"
54
- >
55
- {#each toastContext.toasts as toast (toast.id)}
56
- <Toast
57
- {toast}
58
- copy={() => {
59
- copyDataToClipboard(toast.getVerbose?.() ?? toast.message);
60
- }}
61
- />
62
- {/each}
63
- </section>
64
-
1
+ <svelte:options runes />
2
+
3
+ <!--
4
+ @component
5
+ Live region for the {@link ToastContext}. Iterates the context's
6
+ queue and renders one `Toast` per message, providing the
7
+ copy-to-clipboard callback (the container owns the clipboard logic
8
+ because the toast itself only knows the message it should copy).
9
+
10
+ The wrapping `<section>` carries `role="region"` plus
11
+ `aria-live="polite"` so multiple toast appearances are announced as
12
+ a single rolling region without interrupting the user; individual
13
+ `Toast` elements override `aria-live` to `assertive` for hard errors.
14
+
15
+ Mounted once at the app root by `ContextWrapper`; consumers should
16
+ not render this directly.
17
+ -->
18
+ <script lang="ts">
19
+ import { ToastContext } from '../../Contexts/ToastContext.svelte.js';
20
+ import { devCatch } from '../../Helpers/Helpers.svelte.js';
21
+ import { Validity } from '../../Types/Internal/Validity.js';
22
+ import { getContext } from 'svelte';
23
+ import Toast from './Toast.svelte';
24
+
25
+ const toastContext = getContext<ToastContext>(ToastContext.identifier);
26
+
27
+ function copyDataToClipboard(text: string): void {
28
+ // `navigator.clipboard` is `undefined` on insecure (HTTP)
29
+ // origins and in some embedded WebViews. The compile-time
30
+ // type says it is always defined, hence the eslint disable;
31
+ // the runtime check is the load-bearing one.
32
+ // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
33
+ if (!navigator.clipboard) {
34
+ toastContext.toast({
35
+ result: Validity.Invalid,
36
+ message: 'Cannot Copy in an Insecure Connection',
37
+ copyable: false,
38
+ });
39
+ return;
40
+ }
41
+
42
+ navigator.clipboard.writeText(text).catch(devCatch);
43
+ toastContext.toast({
44
+ result: Validity.Info,
45
+ message: 'Message copied to clipboard',
46
+ copyable: false,
47
+ });
48
+ }
49
+ </script>
50
+
51
+ <section
52
+ aria-live="polite"
53
+ aria-label="Notifications"
54
+ >
55
+ {#each toastContext.toasts as toast (toast.id)}
56
+ <Toast
57
+ {toast}
58
+ copy={() => {
59
+ copyDataToClipboard(toast.getVerbose?.() ?? toast.message);
60
+ }}
61
+ />
62
+ {/each}
63
+ </section>
64
+
65
65
  <style>section {
66
66
  user-select: none;
67
67
  gap: 0.5rem;
@@ -73,4 +73,4 @@ not render this directly.
73
73
  justify-content: flex-end;
74
74
  align-items: flex-end;
75
75
  z-index: 99999;
76
- }</style>
76
+ }</style>
@@ -1,39 +1,39 @@
1
- <svelte:options runes />
2
-
3
- <!--
4
- @component
5
- Visual host for `TooltipContext`. Renders a fixed-position tooltip at
6
- the coordinates the context exposes, with a CSS arrow that points
7
- back toward the anchored element on the configured side.
8
-
9
- The tooltip just appears and disappears; no transition is applied,
10
- which is the conservative choice for `prefers-reduced-motion`. Reads
11
- the context with `getContext` and relies on `ContextWrapper` to have
12
- set it up at the app root.
13
- -->
14
- <script lang="ts">
15
- import { TooltipContext } from '../../Contexts/TooltipContext.svelte.js';
16
- import { Side } from '../../Types/Internal/Side.js';
17
- import { getContext } from 'svelte';
18
- const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
19
- </script>
20
-
21
- {#if tooltipContext.isShowingTooltip}
22
- <div
23
- role="tooltip"
24
- style="--y: {tooltipContext.y}px; --x: {tooltipContext.x}px;"
25
- class="tooltip-wrapper"
26
- class:top-arrow={tooltipContext.anchor === Side.Top}
27
- class:bottom-arrow={tooltipContext.anchor === Side.Bottom}
28
- class:left-arrow={tooltipContext.anchor === Side.Left}
29
- class:right-arrow={tooltipContext.anchor === Side.Right}
30
- >
31
- <div class="tooltip">
32
- {tooltipContext.text}
33
- </div>
34
- </div>
35
- {/if}
36
-
1
+ <svelte:options runes />
2
+
3
+ <!--
4
+ @component
5
+ Visual host for `TooltipContext`. Renders a fixed-position tooltip at
6
+ the coordinates the context exposes, with a CSS arrow that points
7
+ back toward the anchored element on the configured side.
8
+
9
+ The tooltip just appears and disappears; no transition is applied,
10
+ which is the conservative choice for `prefers-reduced-motion`. Reads
11
+ the context with `getContext` and relies on `ContextWrapper` to have
12
+ set it up at the app root.
13
+ -->
14
+ <script lang="ts">
15
+ import { TooltipContext } from '../../Contexts/TooltipContext.svelte.js';
16
+ import { Side } from '../../Types/Internal/Side.js';
17
+ import { getContext } from 'svelte';
18
+ const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
19
+ </script>
20
+
21
+ {#if tooltipContext.isShowingTooltip}
22
+ <div
23
+ role="tooltip"
24
+ style="--y: {tooltipContext.y}px; --x: {tooltipContext.x}px;"
25
+ class="tooltip-wrapper"
26
+ class:top-arrow={tooltipContext.anchor === Side.Top}
27
+ class:bottom-arrow={tooltipContext.anchor === Side.Bottom}
28
+ class:left-arrow={tooltipContext.anchor === Side.Left}
29
+ class:right-arrow={tooltipContext.anchor === Side.Right}
30
+ >
31
+ <div class="tooltip">
32
+ {tooltipContext.text}
33
+ </div>
34
+ </div>
35
+ {/if}
36
+
37
37
  <style>.tooltip-wrapper {
38
38
  position: fixed;
39
39
  z-index: 99999;
@@ -121,4 +121,4 @@ set it up at the app root.
121
121
  transform: rotate(45deg);
122
122
  background-color: #3a4952;
123
123
  border: solid 2px #dae0e5;
124
- }</style>
124
+ }</style>
@@ -1,114 +1,114 @@
1
- <svelte:options runes />
2
-
3
- <script lang="ts">
4
- import { passthrough } from '../Helpers/Helpers.svelte.js';
5
- import type { DataMatrixIconProps } from './DataMatrixIconProps.js';
6
- import Icon from './Icon.svelte';
7
-
8
- const {
9
- icon,
10
- interactive = false,
11
- title,
12
- oncontextmenu,
13
- ariaLabel = 'Edit Barcode Value',
14
- }: DataMatrixIconProps = $props();
15
-
16
- let svgContainer = $state<HTMLDivElement | null>(null);
17
-
18
- // Track the last SVG we mounted so the effect only re-runs when the
19
- // underlying SVG identity changes. Repeated parent renders that hand
20
- // back the same node should NOT force a DOM replacement; each replace
21
- // forces layout, which becomes expensive with many barcodes on a screen.
22
- let lastSvg: SVGSVGElement | undefined = undefined;
23
-
24
- /**
25
- * Defensively sanitise the SVG before mounting it.
26
- *
27
- * SECURITY: although the prop is branded `DataMatrixSvg` to discourage
28
- * arbitrary callers, the brand is type-only. As defence in depth we
29
- * strip `<script>` nodes plus any `on*` / `href` / `xlink:href`
30
- * attributes from the cloned tree before it enters the document. This
31
- * neutralises stored-XSS sinks (`<script>`, `<image href="javascript:...">`,
32
- * inline event handlers) without depending on caller discipline.
33
- */
34
- function sanitiseSvg(node: SVGSVGElement): void {
35
- node.querySelectorAll('script').forEach((s) => {
36
- s.remove();
37
- });
38
- node.querySelectorAll('*').forEach((el) => {
39
- for (const attr of [...el.attributes]) {
40
- const lower = attr.name.toLowerCase();
41
- if (lower.startsWith('on') || lower === 'href' || lower === 'xlink:href') {
42
- el.removeAttribute(attr.name);
43
- }
44
- }
45
- });
46
- }
47
-
48
- $effect(() => {
49
- if (icon.kind !== 'svg') {
50
- // icon-props branch renders an <Icon> below; nothing for the
51
- // SVG mount effect to do, and we clear the stale mount so a
52
- // later toggle back to kind: 'svg' re-mounts correctly.
53
- if (svgContainer != null && lastSvg !== undefined) {
54
- // Mirror of the mount path below; `replaceChildren()` is the
55
- // cheapest way to detach the previously cloned SVG.
56
- // eslint-disable-next-line svelte/no-dom-manipulating
57
- svgContainer.replaceChildren();
58
- lastSvg = undefined;
59
- }
60
- return;
61
- }
62
- const source = icon.svg;
63
- if (svgContainer != null && source !== lastSvg) {
64
- // Clone so we never mutate the consumer-supplied node. If the
65
- // same SVG is rendered into multiple DataMatrixIcon instances or
66
- // reused elsewhere the original keeps its original attributes.
67
- const local = source.cloneNode(true) as SVGSVGElement;
68
- sanitiseSvg(local);
69
- local.setAttribute('width', '64');
70
- local.setAttribute('height', '64');
71
- // `replaceChildren` is cheaper than `innerHTML = ''` + `appendChild`:
72
- // it skips the HTML parse step and only touches the child list.
73
- // eslint-disable-next-line svelte/no-dom-manipulating
74
- svgContainer.replaceChildren(local);
75
- lastSvg = source;
76
- }
77
- });
78
- </script>
79
-
80
- {#if interactive}
81
- <button
82
- aria-label={ariaLabel}
83
- onkeydown={passthrough}
84
- title="Right click to edit barcode value for the {title} command"
85
- oncontextmenu={(e) => {
86
- if (oncontextmenu) {
87
- e.preventDefault();
88
- oncontextmenu(e);
89
- }
90
- }}
91
- >
92
- <div
93
- class="fit"
94
- bind:this={svgContainer}
95
- >
96
- {#if icon.kind === 'icon-props'}
97
- <Icon {...icon.iconProps} />
98
- {/if}
99
- </div>
100
- </button>
101
- {:else}
102
- <div
103
- class="fit"
104
- bind:this={svgContainer}
105
- >
106
- {#if icon.kind === 'icon-props'}
107
- <Icon {...icon.iconProps} />
108
- {/if}
109
- </div>
110
- {/if}
111
-
1
+ <svelte:options runes />
2
+
3
+ <script lang="ts">
4
+ import { passthrough } from '../Helpers/Helpers.svelte.js';
5
+ import type { DataMatrixIconProps } from './DataMatrixIconProps.js';
6
+ import Icon from './Icon.svelte';
7
+
8
+ const {
9
+ icon,
10
+ interactive = false,
11
+ title,
12
+ oncontextmenu,
13
+ ariaLabel = 'Edit Barcode Value',
14
+ }: DataMatrixIconProps = $props();
15
+
16
+ let svgContainer = $state<HTMLDivElement | null>(null);
17
+
18
+ // Track the last SVG we mounted so the effect only re-runs when the
19
+ // underlying SVG identity changes. Repeated parent renders that hand
20
+ // back the same node should NOT force a DOM replacement; each replace
21
+ // forces layout, which becomes expensive with many barcodes on a screen.
22
+ let lastSvg: SVGSVGElement | undefined = undefined;
23
+
24
+ /**
25
+ * Defensively sanitise the SVG before mounting it.
26
+ *
27
+ * SECURITY: although the prop is branded `DataMatrixSvg` to discourage
28
+ * arbitrary callers, the brand is type-only. As defence in depth we
29
+ * strip `<script>` nodes plus any `on*` / `href` / `xlink:href`
30
+ * attributes from the cloned tree before it enters the document. This
31
+ * neutralises stored-XSS sinks (`<script>`, `<image href="javascript:...">`,
32
+ * inline event handlers) without depending on caller discipline.
33
+ */
34
+ function sanitiseSvg(node: SVGSVGElement): void {
35
+ node.querySelectorAll('script').forEach((s) => {
36
+ s.remove();
37
+ });
38
+ node.querySelectorAll('*').forEach((el) => {
39
+ for (const attr of [...el.attributes]) {
40
+ const lower = attr.name.toLowerCase();
41
+ if (lower.startsWith('on') || lower === 'href' || lower === 'xlink:href') {
42
+ el.removeAttribute(attr.name);
43
+ }
44
+ }
45
+ });
46
+ }
47
+
48
+ $effect(() => {
49
+ if (icon.kind !== 'svg') {
50
+ // icon-props branch renders an <Icon> below; nothing for the
51
+ // SVG mount effect to do, and we clear the stale mount so a
52
+ // later toggle back to kind: 'svg' re-mounts correctly.
53
+ if (svgContainer != null && lastSvg !== undefined) {
54
+ // Mirror of the mount path below; `replaceChildren()` is the
55
+ // cheapest way to detach the previously cloned SVG.
56
+ // eslint-disable-next-line svelte/no-dom-manipulating
57
+ svgContainer.replaceChildren();
58
+ lastSvg = undefined;
59
+ }
60
+ return;
61
+ }
62
+ const source = icon.svg;
63
+ if (svgContainer != null && source !== lastSvg) {
64
+ // Clone so we never mutate the consumer-supplied node. If the
65
+ // same SVG is rendered into multiple DataMatrixIcon instances or
66
+ // reused elsewhere the original keeps its original attributes.
67
+ const local = source.cloneNode(true) as SVGSVGElement;
68
+ sanitiseSvg(local);
69
+ local.setAttribute('width', '64');
70
+ local.setAttribute('height', '64');
71
+ // `replaceChildren` is cheaper than `innerHTML = ''` + `appendChild`:
72
+ // it skips the HTML parse step and only touches the child list.
73
+ // eslint-disable-next-line svelte/no-dom-manipulating
74
+ svgContainer.replaceChildren(local);
75
+ lastSvg = source;
76
+ }
77
+ });
78
+ </script>
79
+
80
+ {#if interactive}
81
+ <button
82
+ aria-label={ariaLabel}
83
+ onkeydown={passthrough}
84
+ title="Right click to edit barcode value for the {title} command"
85
+ oncontextmenu={(e) => {
86
+ if (oncontextmenu) {
87
+ e.preventDefault();
88
+ oncontextmenu(e);
89
+ }
90
+ }}
91
+ >
92
+ <div
93
+ class="fit"
94
+ bind:this={svgContainer}
95
+ >
96
+ {#if icon.kind === 'icon-props'}
97
+ <Icon {...icon.iconProps} />
98
+ {/if}
99
+ </div>
100
+ </button>
101
+ {:else}
102
+ <div
103
+ class="fit"
104
+ bind:this={svgContainer}
105
+ >
106
+ {#if icon.kind === 'icon-props'}
107
+ <Icon {...icon.iconProps} />
108
+ {/if}
109
+ </div>
110
+ {/if}
111
+
112
112
  <style>button {
113
113
  display: contents;
114
114
  cursor: pointer;
@@ -118,4 +118,4 @@ div.fit {
118
118
  background-color: #ffffff;
119
119
  display: flex;
120
120
  padding: 0.5rem;
121
- }</style>
121
+ }</style>