@communitiesuk/svelte-component-library 0.1.17

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 (217) hide show
  1. package/README.md +188 -0
  2. package/dist/assets/css/govuk-frontend.min.css +2 -0
  3. package/dist/assets/css/govuk-frontend.min.css.map +1 -0
  4. package/dist/assets/fonts/bold-affa96571d-v2.woff +0 -0
  5. package/dist/assets/fonts/bold-b542beb274-v2.woff2 +0 -0
  6. package/dist/assets/fonts/light-94a07e06a1-v2.woff2 +0 -0
  7. package/dist/assets/fonts/light-f591b13f7d-v2.woff +0 -0
  8. package/dist/assets/govuk_publishing_components/images/icon-autocomplete-search-suggestion.svg +4 -0
  9. package/dist/assets/govuk_publishing_components/images/icon-close.svg +1 -0
  10. package/dist/assets/images/favicon.ico +0 -0
  11. package/dist/assets/images/favicon.svg +1 -0
  12. package/dist/assets/images/govuk-crest-2x.png +0 -0
  13. package/dist/assets/images/govuk-crest.png +0 -0
  14. package/dist/assets/images/govuk-crest.svg +1 -0
  15. package/dist/assets/images/govuk-icon-180.png +0 -0
  16. package/dist/assets/images/govuk-icon-192.png +0 -0
  17. package/dist/assets/images/govuk-icon-512.png +0 -0
  18. package/dist/assets/images/govuk-icon-mask.svg +1 -0
  19. package/dist/assets/images/govuk-opengraph-image.png +0 -0
  20. package/dist/assets/images/homepage-illustration.svg +1 -0
  21. package/dist/assets/images/homepage.svg +44 -0
  22. package/dist/assets/images/masthead-illustration.svg +123 -0
  23. package/dist/assets/images/oflog_crest_black.png +0 -0
  24. package/dist/assets/images/oflog_crest_white.png +0 -0
  25. package/dist/assets/images/undraw_approved-wireframe_odf4.svg +1 -0
  26. package/dist/assets/images/undraw_collaborators_rgw4.svg +1 -0
  27. package/dist/assets/images/undraw_content-creator_vuqg.svg +1 -0
  28. package/dist/assets/images/undraw_online-media_opxh.svg +1 -0
  29. package/dist/assets/images/undraw_pull-request_zlsu.svg +1 -0
  30. package/dist/assets/images/undraw_reviewed-docs_g0cg.svg +1 -0
  31. package/dist/components/FilterPanel/codeBlocks.d.ts +3 -0
  32. package/dist/components/FilterPanel/codeBlocks.js +418 -0
  33. package/dist/components/content/InsetText.svelte +21 -0
  34. package/dist/components/content/InsetText.svelte.d.ts +7 -0
  35. package/dist/components/content/WarningText.svelte +27 -0
  36. package/dist/components/content/WarningText.svelte.d.ts +8 -0
  37. package/dist/components/data-vis/axis/Axis.svelte +51 -0
  38. package/dist/components/data-vis/axis/Axis.svelte.d.ts +33 -0
  39. package/dist/components/data-vis/axis/Ticks.svelte +113 -0
  40. package/dist/components/data-vis/axis/Ticks.svelte.d.ts +33 -0
  41. package/dist/components/data-vis/line-chart/Line.svelte +150 -0
  42. package/dist/components/data-vis/line-chart/Line.svelte.d.ts +85 -0
  43. package/dist/components/data-vis/line-chart/LineChart.svelte +249 -0
  44. package/dist/components/data-vis/line-chart/LineChart.svelte.d.ts +73 -0
  45. package/dist/components/data-vis/line-chart/Lines.svelte +138 -0
  46. package/dist/components/data-vis/line-chart/Lines.svelte.d.ts +57 -0
  47. package/dist/components/data-vis/line-chart/Marker.svelte +61 -0
  48. package/dist/components/data-vis/line-chart/Marker.svelte.d.ts +37 -0
  49. package/dist/components/data-vis/line-chart/SeriesLabel.svelte +67 -0
  50. package/dist/components/data-vis/line-chart/SeriesLabel.svelte.d.ts +43 -0
  51. package/dist/components/data-vis/line-chart/ValueLabel.svelte +50 -0
  52. package/dist/components/data-vis/line-chart/ValueLabel.svelte.d.ts +25 -0
  53. package/dist/components/data-vis/map/Map.svelte +392 -0
  54. package/dist/components/data-vis/map/Map.svelte.d.ts +47 -0
  55. package/dist/components/data-vis/map/MapLegend.svelte +41 -0
  56. package/dist/components/data-vis/map/MapLegend.svelte.d.ts +15 -0
  57. package/dist/components/data-vis/map/NonStandardControls.svelte +42 -0
  58. package/dist/components/data-vis/map/NonStandardControls.svelte.d.ts +13 -0
  59. package/dist/components/data-vis/map/Tooltip.svelte +41 -0
  60. package/dist/components/data-vis/map/Tooltip.svelte.d.ts +19 -0
  61. package/dist/components/data-vis/map/colorbrewer.d.ts +337 -0
  62. package/dist/components/data-vis/map/colorbrewer.js +1523 -0
  63. package/dist/components/data-vis/map/colors.d.ts +13 -0
  64. package/dist/components/data-vis/map/colors.js +65 -0
  65. package/dist/components/data-vis/map/dataJoin.d.ts +2 -0
  66. package/dist/components/data-vis/map/dataJoin.js +27 -0
  67. package/dist/components/data-vis/map/fullTopo.json +1 -0
  68. package/dist/components/data-vis/map/jenks.d.ts +1 -0
  69. package/dist/components/data-vis/map/jenks.js +51 -0
  70. package/dist/components/data-vis/map/lad2023.json +1 -0
  71. package/dist/components/data-vis/map/mapUtils.d.ts +5 -0
  72. package/dist/components/data-vis/map/mapUtils.js +86 -0
  73. package/dist/components/data-vis/map/topo.json +1 -0
  74. package/dist/components/data-vis/table/Table.svelte +247 -0
  75. package/dist/components/data-vis/table/Table.svelte.d.ts +19 -0
  76. package/dist/components/layout/Breadcrumbs.svelte +191 -0
  77. package/dist/components/layout/Breadcrumbs.svelte.d.ts +24 -0
  78. package/dist/components/layout/Footer.svelte +171 -0
  79. package/dist/components/layout/Footer.svelte.d.ts +30 -0
  80. package/dist/components/layout/Header.svelte +43 -0
  81. package/dist/components/layout/Header.svelte.d.ts +7 -0
  82. package/dist/components/layout/InternalHeader.svelte +628 -0
  83. package/dist/components/layout/InternalHeader.svelte.d.ts +15 -0
  84. package/dist/components/layout/PhaseBanner.svelte +28 -0
  85. package/dist/components/layout/PhaseBanner.svelte.d.ts +9 -0
  86. package/dist/components/layout/ServiceNavigation.svelte +143 -0
  87. package/dist/components/layout/ServiceNavigation.svelte.d.ts +13 -0
  88. package/dist/components/layout/SideNavigation.svelte +345 -0
  89. package/dist/components/layout/SideNavigation.svelte.d.ts +25 -0
  90. package/dist/components/layout/service-navigation-nested-mobile/HeaderNav.svelte +91 -0
  91. package/dist/components/layout/service-navigation-nested-mobile/HeaderNav.svelte.d.ts +15 -0
  92. package/dist/components/layout/service-navigation-nested-mobile/MobileNav.svelte +233 -0
  93. package/dist/components/layout/service-navigation-nested-mobile/MobileNav.svelte.d.ts +27 -0
  94. package/dist/components/layout/service-navigation-nested-mobile/ServiceNavigationNestedMobile.svelte +70 -0
  95. package/dist/components/layout/service-navigation-nested-mobile/ServiceNavigationNestedMobile.svelte.d.ts +11 -0
  96. package/dist/components/layout/service-navigation-nested-mobile/SideNav.svelte +276 -0
  97. package/dist/components/layout/service-navigation-nested-mobile/SideNav.svelte.d.ts +22 -0
  98. package/dist/components/ui/Accordion.svelte +244 -0
  99. package/dist/components/ui/Accordion.svelte.d.ts +23 -0
  100. package/dist/components/ui/Breadcrumbs.svelte +198 -0
  101. package/dist/components/ui/Breadcrumbs.svelte.d.ts +24 -0
  102. package/dist/components/ui/Button.svelte +96 -0
  103. package/dist/components/ui/Button.svelte.d.ts +17 -0
  104. package/dist/components/ui/CheckBox.svelte +198 -0
  105. package/dist/components/ui/CheckBox.svelte.d.ts +27 -0
  106. package/dist/components/ui/ContentsList.svelte +1117 -0
  107. package/dist/components/ui/ContentsList.svelte.d.ts +25 -0
  108. package/dist/components/ui/DateInput.svelte +255 -0
  109. package/dist/components/ui/DateInput.svelte.d.ts +59 -0
  110. package/dist/components/ui/Details.svelte +12 -0
  111. package/dist/components/ui/Details.svelte.d.ts +13 -0
  112. package/dist/components/ui/FilterPanel.svelte +588 -0
  113. package/dist/components/ui/FilterPanel.svelte.d.ts +74 -0
  114. package/dist/components/ui/Footer.svelte +171 -0
  115. package/dist/components/ui/Footer.svelte.d.ts +30 -0
  116. package/dist/components/ui/Header.svelte +43 -0
  117. package/dist/components/ui/Header.svelte.d.ts +7 -0
  118. package/dist/components/ui/Masthead.svelte +267 -0
  119. package/dist/components/ui/Masthead.svelte.d.ts +12 -0
  120. package/dist/components/ui/NavigationExample.svelte +117 -0
  121. package/dist/components/ui/NavigationExample.svelte.d.ts +3 -0
  122. package/dist/components/ui/NotificationBanner.svelte +93 -0
  123. package/dist/components/ui/NotificationBanner.svelte.d.ts +15 -0
  124. package/dist/components/ui/Radios.svelte +176 -0
  125. package/dist/components/ui/Radios.svelte.d.ts +28 -0
  126. package/dist/components/ui/RelatedContent.svelte +596 -0
  127. package/dist/components/ui/RelatedContent.svelte.d.ts +29 -0
  128. package/dist/components/ui/Search.svelte +499 -0
  129. package/dist/components/ui/Search.svelte.d.ts +32 -0
  130. package/dist/components/ui/SearchAutocomplete.svelte +655 -0
  131. package/dist/components/ui/SearchAutocomplete.svelte.d.ts +37 -0
  132. package/dist/components/ui/Select.svelte +116 -0
  133. package/dist/components/ui/Select.svelte.d.ts +22 -0
  134. package/dist/components/ui/ServiceNavigation.svelte +143 -0
  135. package/dist/components/ui/ServiceNavigation.svelte.d.ts +13 -0
  136. package/dist/components/ui/SideNavigation.svelte +346 -0
  137. package/dist/components/ui/SideNavigation.svelte.d.ts +25 -0
  138. package/dist/components/ui/Tabs.svelte +306 -0
  139. package/dist/components/ui/Tabs.svelte.d.ts +18 -0
  140. package/dist/components/ui/WhatsNew.svelte +155 -0
  141. package/dist/components/ui/WhatsNew.svelte.d.ts +29 -0
  142. package/dist/config.d.ts +51 -0
  143. package/dist/config.js +44 -0
  144. package/dist/icons/DoubleChevronButton.svelte +62 -0
  145. package/dist/icons/DoubleChevronButton.svelte.d.ts +13 -0
  146. package/dist/icons/IconSearch.svelte +42 -0
  147. package/dist/icons/IconSearch.svelte.d.ts +6 -0
  148. package/dist/icons/SingleChevronButtonWithLabel.svelte +132 -0
  149. package/dist/icons/SingleChevronButtonWithLabel.svelte.d.ts +19 -0
  150. package/dist/index.d.ts +44 -0
  151. package/dist/index.js +45 -0
  152. package/dist/main.css +1 -0
  153. package/dist/package-wrapping/BaseInformation.svelte +82 -0
  154. package/dist/package-wrapping/BaseInformation.svelte.d.ts +15 -0
  155. package/dist/package-wrapping/BaseNameAndStatus.svelte +108 -0
  156. package/dist/package-wrapping/BaseNameAndStatus.svelte.d.ts +10 -0
  157. package/dist/package-wrapping/CodeBlock.svelte +62 -0
  158. package/dist/package-wrapping/CodeBlock.svelte.d.ts +12 -0
  159. package/dist/package-wrapping/ComponentDemo.svelte +114 -0
  160. package/dist/package-wrapping/ComponentDemo.svelte.d.ts +25 -0
  161. package/dist/package-wrapping/ComponentDemoTEMP.svelte +305 -0
  162. package/dist/package-wrapping/ComponentDemoTEMP.svelte.d.ts +21 -0
  163. package/dist/package-wrapping/ComponentDetails.svelte +123 -0
  164. package/dist/package-wrapping/ComponentDetails.svelte.d.ts +13 -0
  165. package/dist/package-wrapping/DividerLine.svelte +21 -0
  166. package/dist/package-wrapping/DividerLine.svelte.d.ts +17 -0
  167. package/dist/package-wrapping/InputForParameter.svelte +205 -0
  168. package/dist/package-wrapping/InputForParameter.svelte.d.ts +13 -0
  169. package/dist/package-wrapping/InputForParameterUpdated.svelte +222 -0
  170. package/dist/package-wrapping/InputForParameterUpdated.svelte.d.ts +17 -0
  171. package/dist/package-wrapping/InputForParameterUpdatedTEMP.svelte +203 -0
  172. package/dist/package-wrapping/InputForParameterUpdatedTEMP.svelte.d.ts +17 -0
  173. package/dist/package-wrapping/ListOfComponentStatuses.svelte +19 -0
  174. package/dist/package-wrapping/ListOfComponentStatuses.svelte.d.ts +11 -0
  175. package/dist/package-wrapping/OverlayAndComponentContainer.svelte +426 -0
  176. package/dist/package-wrapping/OverlayAndComponentContainer.svelte.d.ts +33 -0
  177. package/dist/package-wrapping/ParametersSection.svelte +235 -0
  178. package/dist/package-wrapping/ParametersSection.svelte.d.ts +19 -0
  179. package/dist/package-wrapping/ParsingErrorToastsContainer.svelte +50 -0
  180. package/dist/package-wrapping/ParsingErrorToastsContainer.svelte.d.ts +15 -0
  181. package/dist/package-wrapping/Pill.svelte +54 -0
  182. package/dist/package-wrapping/Pill.svelte.d.ts +25 -0
  183. package/dist/package-wrapping/PlaygroundDetails.svelte +106 -0
  184. package/dist/package-wrapping/PlaygroundDetails.svelte.d.ts +13 -0
  185. package/dist/package-wrapping/ScreenSizeRadio.svelte +24 -0
  186. package/dist/package-wrapping/ScreenSizeRadio.svelte.d.ts +11 -0
  187. package/dist/package-wrapping/ScreenSizeRadioUpdated.svelte +23 -0
  188. package/dist/package-wrapping/ScreenSizeRadioUpdated.svelte.d.ts +11 -0
  189. package/dist/package-wrapping/SidebarContainer.svelte +103 -0
  190. package/dist/package-wrapping/SidebarContainer.svelte.d.ts +23 -0
  191. package/dist/package-wrapping/WrapperDetailsUpdate.svelte +40 -0
  192. package/dist/package-wrapping/WrapperDetailsUpdate.svelte.d.ts +15 -0
  193. package/dist/package-wrapping/templates/Template.svelte +100 -0
  194. package/dist/package-wrapping/templates/Template.svelte.d.ts +25 -0
  195. package/dist/templates/ComponentPageTemplate.svelte +1 -0
  196. package/dist/templates/ComponentPageTemplate.svelte.d.ts +26 -0
  197. package/dist/utils/data-transformations/convertCSV.d.ts +2 -0
  198. package/dist/utils/data-transformations/convertCSV.js +22 -0
  199. package/dist/utils/data-transformations/getValueFromParametersArray.d.ts +1 -0
  200. package/dist/utils/data-transformations/getValueFromParametersArray.js +9 -0
  201. package/dist/utils/layoutNavHelpers.d.ts +70 -0
  202. package/dist/utils/layoutNavHelpers.js +129 -0
  203. package/dist/utils/package-wrapping-specific/addIndexAndInitialValue.d.ts +1 -0
  204. package/dist/utils/package-wrapping-specific/addIndexAndInitialValue.js +21 -0
  205. package/dist/utils/package-wrapping-specific/createBindableParametersValuesArray.d.ts +1 -0
  206. package/dist/utils/package-wrapping-specific/createBindableParametersValuesArray.js +12 -0
  207. package/dist/utils/package-wrapping-specific/createParametersObject.d.ts +1 -0
  208. package/dist/utils/package-wrapping-specific/createParametersObject.js +29 -0
  209. package/dist/utils/package-wrapping-specific/defineDefaultEventHandler.d.ts +1 -0
  210. package/dist/utils/package-wrapping-specific/defineDefaultEventHandler.js +14 -0
  211. package/dist/utils/package-wrapping-specific/trackVisibleParameters.d.ts +1 -0
  212. package/dist/utils/package-wrapping-specific/trackVisibleParameters.js +29 -0
  213. package/dist/utils/syntax-highlighting/shikiHighlight.d.ts +7 -0
  214. package/dist/utils/syntax-highlighting/shikiHighlight.js +76 -0
  215. package/dist/utils/text-string-conversion/textStringConversion.d.ts +9 -0
  216. package/dist/utils/text-string-conversion/textStringConversion.js +86 -0
  217. package/package.json +113 -0
@@ -0,0 +1,103 @@
1
+ <script>
2
+ import DividerLine from "./DividerLine.svelte";
3
+ import SingleChevronButtonWithLabel from "../icons/SingleChevronButtonWithLabel.svelte";
4
+ import DoubleChevronButton from "../icons/DoubleChevronButton.svelte";
5
+ import { Tabs, TabItem, Range, Label } from "flowbite-svelte";
6
+ import ScreenSizeRadioUpdated from "./ScreenSizeRadioUpdated.svelte";
7
+
8
+ let {
9
+ demoScreenWidth = $bindable(),
10
+ parameterCategories,
11
+ categoriesOverlayOpenArray = $bindable(),
12
+ selectedCategory,
13
+ sideBarOpen = $bindable(),
14
+ overlayOpen = $bindable(),
15
+ componentOpacity = $bindable(),
16
+ } = $props();
17
+ </script>
18
+
19
+ <div>
20
+ {#if sideBarOpen}
21
+ <div data-role="sidebar-container" class="px-1 pt-0 pb-2">
22
+ <Tabs tabStyle="underline">
23
+ <div class="flex flex-row justify-between items-center w-full pr-1">
24
+ <div class="flex flex-row gap-2">
25
+ <TabItem open={true} title={"Parameters"} defaultClass="text-lg">
26
+ <div class="flex flex-col gap-0 m-0 p-0">
27
+ {#each parameterCategories as category, index}
28
+ <button>
29
+ <div class="flex flex-row gap-0 justify-start items-center">
30
+ <SingleChevronButtonWithLabel
31
+ text={category.name}
32
+ {index}
33
+ bind:openArray={categoriesOverlayOpenArray}
34
+ bind:overlayOpen
35
+ open={categoriesOverlayOpenArray[index] && overlayOpen}
36
+ ></SingleChevronButtonWithLabel>
37
+ </div>
38
+ </button>
39
+ {/each}
40
+ </div>
41
+ </TabItem>
42
+ <TabItem
43
+ open={false}
44
+ title={"Container width"}
45
+ defaultClass="text-lg"
46
+ ><ScreenSizeRadioUpdated bind:demoScreenWidth
47
+ ></ScreenSizeRadioUpdated>
48
+ </TabItem>
49
+ </div>
50
+ <DoubleChevronButton
51
+ bind:open={sideBarOpen}
52
+ onClickFunction={() => {
53
+ sideBarOpen = !sideBarOpen;
54
+ }}
55
+ ></DoubleChevronButton>
56
+ </div>
57
+ </Tabs>
58
+ {#if overlayOpen && selectedCategory > -1}
59
+ <DividerLine margin="10px 0px"></DividerLine>
60
+ <div class="ml-2 mr-4 flex flex-row gap-4 items-center">
61
+ <Label class="text-lg text-[#6b7280]">Component opacity:</Label>
62
+ <div class="grow">
63
+ <Range
64
+ class="orange-500"
65
+ id="range1"
66
+ bind:value={componentOpacity}
67
+ min="0"
68
+ max="0.5"
69
+ step="0.1"
70
+ />
71
+ </div>
72
+ </div>
73
+ {/if}
74
+ </div>
75
+ {:else}
76
+ <div class="mt-2 inline-block">
77
+ <div
78
+ data-role="sidebar-floating-button"
79
+ class="flex flex-row items-center justify-center p-2"
80
+ >
81
+ <DoubleChevronButton
82
+ bind:open={sideBarOpen}
83
+ onClickFunction={() => {
84
+ sideBarOpen = !sideBarOpen;
85
+ }}
86
+ ></DoubleChevronButton>
87
+ </div>
88
+ </div>
89
+ {/if}
90
+ </div>
91
+
92
+ <style>
93
+ [data-role="sidebar-container"] {
94
+ width: 346px;
95
+ border: solid #d1d5db 1px;
96
+ border-radius: 5px;
97
+ }
98
+
99
+ [data-role="sidebar-floating-button"] {
100
+ border: solid #d1d5db 1px;
101
+ border-radius: 5px;
102
+ }
103
+ </style>
@@ -0,0 +1,23 @@
1
+ export default SidebarContainer;
2
+ type SidebarContainer = {
3
+ $on?(type: string, callback: (e: any) => void): () => void;
4
+ $set?(props: Partial<$$ComponentProps>): void;
5
+ };
6
+ declare const SidebarContainer: import("svelte").Component<{
7
+ demoScreenWidth?: any;
8
+ parameterCategories: any;
9
+ categoriesOverlayOpenArray?: any;
10
+ selectedCategory: any;
11
+ sideBarOpen?: any;
12
+ overlayOpen?: any;
13
+ componentOpacity?: any;
14
+ }, {}, "overlayOpen" | "demoScreenWidth" | "categoriesOverlayOpenArray" | "sideBarOpen" | "componentOpacity">;
15
+ type $$ComponentProps = {
16
+ demoScreenWidth?: any;
17
+ parameterCategories: any;
18
+ categoriesOverlayOpenArray?: any;
19
+ selectedCategory: any;
20
+ sideBarOpen?: any;
21
+ overlayOpen?: any;
22
+ componentOpacity?: any;
23
+ };
@@ -0,0 +1,40 @@
1
+ <script>
2
+ import DividerLine from "./DividerLine.svelte";
3
+
4
+ let { wrapper, homepage, wrapperType = null } = $props();
5
+
6
+ let backgroundColor = {
7
+ component: "bg-slate-100",
8
+ playground: "bg-teal-50",
9
+ }[wrapperType];
10
+ </script>
11
+
12
+ <div
13
+ data-role="details-container"
14
+ class="flex flex-col gap-4 rounded-lg min-w-0 {homepage
15
+ ? `p-5 ${backgroundColor}`
16
+ : ''}"
17
+ >
18
+ <div data-role="name-and-pill-container">
19
+ {#if wrapper.component.WrapperNameAndStatus && wrapper?.name}
20
+ {@render wrapper.component.WrapperNameAndStatus(
21
+ wrapper.name,
22
+ wrapper.folder,
23
+ wrapper.subFolder,
24
+ homepage,
25
+ )}
26
+ {/if}
27
+ </div>
28
+
29
+ <div
30
+ data-role="component-information-container"
31
+ class="flex flex-col gap-4 mt-2"
32
+ >
33
+ {#if wrapper.component.WrapperInformation}
34
+ {@render wrapper.component.WrapperInformation(homepage)}
35
+ {/if}
36
+ </div>
37
+ {#if !homepage}
38
+ <DividerLine></DividerLine>
39
+ {/if}
40
+ </div>
@@ -0,0 +1,15 @@
1
+ export default WrapperDetailsUpdate;
2
+ type WrapperDetailsUpdate = {
3
+ $on?(type: string, callback: (e: any) => void): () => void;
4
+ $set?(props: Partial<$$ComponentProps>): void;
5
+ };
6
+ declare const WrapperDetailsUpdate: import("svelte").Component<{
7
+ wrapper: any;
8
+ homepage: any;
9
+ wrapperType?: any;
10
+ }, {}, "">;
11
+ type $$ComponentProps = {
12
+ wrapper: any;
13
+ homepage: any;
14
+ wrapperType?: any;
15
+ };
@@ -0,0 +1,100 @@
1
+ <script>
2
+ let {
3
+ componentNameProp = undefined,
4
+ textProp = undefined,
5
+ numberProp = undefined,
6
+ checkboxProp = false,
7
+ dropdownProp = undefined,
8
+ radioProp = undefined,
9
+ jsObjectProp = [],
10
+ functionProp = undefined,
11
+ } = $props();
12
+ </script>
13
+
14
+ {#snippet propNameAndValue(marginTW, paddingTW, text)}
15
+ <span class="bg-slate-100 inline-block italic {marginTW} {paddingTW} rounded"
16
+ >{text}</span
17
+ >
18
+ {/snippet}
19
+
20
+ <div class="p-4">
21
+ <h4>{componentNameProp} component</h4>
22
+
23
+ {#each [{ name: "textProp", prop: textProp }, { name: "numberProp", prop: numberProp }] as output}
24
+ {#if output.prop != undefined}
25
+ <div>
26
+ <p class="mb-0">
27
+ The <span class="font-bold">{output.name}</span> value being passed to
28
+ the component is:
29
+ {#if output.name === "numberProp"}
30
+ {@render propNameAndValue("m-2", "py-2 pl-2 pr-3", numberProp)}
31
+ {/if}
32
+ </p>
33
+ {#if output.name === "textProp"}
34
+ {@render propNameAndValue(
35
+ "ml-6 mt-4",
36
+ "py-2 pl-2 pr-3",
37
+ "'" + output.prop + "'",
38
+ )}
39
+ {/if}
40
+ </div>
41
+ {/if}
42
+ {/each}
43
+
44
+ <div class="grid grid-cols-3 gap-4 mt-6">
45
+ {#each [{ name: "checkboxProp", prop: checkboxProp }, { name: "dropdownProp", prop: dropdownProp }, { name: "radioProp", prop: radioProp }] as card}
46
+ {#if card.prop != undefined}
47
+ <div class="p-2">
48
+ <p class="my-2">
49
+ <span class="font-bold">{card.name}</span> is set to:
50
+ </p>
51
+ <p class="p-2 inline-block italic bg-slate-100 rounded">
52
+ {card.prop}
53
+ </p>
54
+ </div>
55
+ {/if}
56
+ {/each}
57
+ </div>
58
+
59
+ <div class="mt-10">
60
+ <p class="font-bold">jsObjectProp:</p>
61
+ <p>
62
+ Click on a card to trigger a call of the functionProp, which will write to
63
+ the console.
64
+ </p>
65
+ <div class="grid grid-cols-2 gap-4 mt-6 cursor-pointer">
66
+ {#each jsObjectProp as pokemon}
67
+ <button
68
+ data-id={pokemon.name}
69
+ data-role="pokemon-card"
70
+ class="rounded p-2 grid grid-cols-[auto_1fr] gap-2"
71
+ style="background-color: {pokemon.color};"
72
+ onclick={(event) => functionProp(event, pokemon)}
73
+ >
74
+ {#each Object.keys(pokemon) as key}
75
+ {#if key != "color"}
76
+ <p class="m-0 p-0">{key}:</p>
77
+ <p class="m-0 p-0">{pokemon[key]}</p>
78
+ {/if}
79
+ {/each}
80
+ </button>
81
+ {/each}
82
+ </div>
83
+ </div>
84
+ </div>
85
+
86
+ <style>
87
+ [data-role="pokemon-card"] {
88
+ opacity: 0.6;
89
+ border: 2px solid transparent;
90
+ }
91
+
92
+ [data-role="pokemon-card"]:hover {
93
+ opacity: 0.8;
94
+ border: 2px solid;
95
+ }
96
+ [data-role="pokemon-card"]:focus {
97
+ opacity: 1;
98
+ border: 2px solid;
99
+ }
100
+ </style>
@@ -0,0 +1,25 @@
1
+ export default Template;
2
+ type Template = {
3
+ $on?(type: string, callback: (e: any) => void): () => void;
4
+ $set?(props: Partial<$$ComponentProps>): void;
5
+ };
6
+ declare const Template: import("svelte").Component<{
7
+ componentNameProp?: any;
8
+ textProp?: any;
9
+ numberProp?: any;
10
+ checkboxProp?: boolean;
11
+ dropdownProp?: any;
12
+ radioProp?: any;
13
+ jsObjectProp?: any[];
14
+ functionProp?: any;
15
+ }, {}, "">;
16
+ type $$ComponentProps = {
17
+ componentNameProp?: any;
18
+ textProp?: any;
19
+ numberProp?: any;
20
+ checkboxProp?: boolean;
21
+ dropdownProp?: any;
22
+ radioProp?: any;
23
+ jsObjectProp?: any[];
24
+ functionProp?: any;
25
+ };
@@ -0,0 +1,26 @@
1
+ export default ComponentPageTemplate;
2
+ type ComponentPageTemplate = SvelteComponent<{
3
+ [x: string]: never;
4
+ }, {
5
+ [evt: string]: CustomEvent<any>;
6
+ }, {}> & {
7
+ $$bindings?: string | undefined;
8
+ };
9
+ declare const ComponentPageTemplate: $$__sveltets_2_IsomorphicComponent<{
10
+ [x: string]: never;
11
+ }, {
12
+ [evt: string]: CustomEvent<any>;
13
+ }, {}, {}, string>;
14
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
15
+ new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
16
+ $$bindings?: Bindings;
17
+ } & Exports;
18
+ (internal: unknown, props: {
19
+ $$events?: Events;
20
+ $$slots?: Slots;
21
+ }): Exports & {
22
+ $set?: any;
23
+ $on?: any;
24
+ };
25
+ z_$$bindings?: Bindings;
26
+ }
@@ -0,0 +1,2 @@
1
+ export function convertToCSV(array: any): string;
2
+ export function csvToArrayOfObjects(csv: any): any;
@@ -0,0 +1,22 @@
1
+ export function convertToCSV(array) {
2
+ if (!array.length) return '';
3
+
4
+ const header = Object.keys(array[0]).join(', '); // Add space after commas in header
5
+ const rows = array.map((obj) => Object.values(obj).join(', ')); // Add space after commas in rows
6
+
7
+ return [header, ...rows].join('\n');
8
+ }
9
+
10
+ export function csvToArrayOfObjects(csv) {
11
+ const lines = csv.split('\n').filter((line) => line.trim() !== ''); // Split into lines and remove empty ones
12
+ const [headerLine, ...dataLines] = lines; // Separate header from data
13
+ const headers = headerLine.split(',').map((header) => header.trim()); // Split header into keys and trim spaces
14
+
15
+ return dataLines.map((line) => {
16
+ const values = line.split(',').map((value) => value.trim()); // Split each line by commas and trim spaces
17
+ return headers.reduce((acc, key, index) => {
18
+ acc[key] = values[index]; // Map values to their corresponding header
19
+ return acc;
20
+ }, {});
21
+ });
22
+ }
@@ -0,0 +1 @@
1
+ export function getValueFromParametersArray(parametersSourceArray: any, parametersValuesArray: any, fieldName: any): any;
@@ -0,0 +1,9 @@
1
+ export function getValueFromParametersArray(
2
+ parametersSourceArray,
3
+ parametersValuesArray,
4
+ fieldName
5
+ ) {
6
+ return parametersValuesArray[
7
+ parametersSourceArray?.findIndex((el) => el.name === fieldName)
8
+ ];
9
+ }
@@ -0,0 +1,70 @@
1
+ import type { SideNavItem } from "../components/layout/service-navigation-nested-mobile/SideNav.svelte";
2
+ import type { ComponentItem } from "../../routes/+layout.server";
3
+ /**
4
+ * Converts a potentially nested array of ComponentItem objects into a flat array of SideNavItem objects.
5
+ * Only includes items that are actual component pages (i.e., item.hasWrapper === true).
6
+ *
7
+ * @param items - The array of ComponentItem objects to process, often representing category.children.
8
+ * @returns A flat array of SideNavItem objects representing linkable component pages.
9
+ *
10
+ * @example
11
+ * // Input (items):
12
+ * // [{ name: "SubGroup", children: [{ name: "ActualButton", path:"components/core/button", hasWrapper:true }] },
13
+ * // { name: "ActualCard", path:"components/core/card", hasWrapper:true }]
14
+ * // Output:
15
+ * // [{ text: "ActualButton", href: "/components/core/button" },
16
+ * // { text: "ActualCard", href: "/components/core/card" }]
17
+ */
18
+ export declare function extractLinkableComponentNavItems(items: ComponentItem[]): SideNavItem[];
19
+ /**
20
+ * Transforms the raw componentTree into a structure suitable for mobile navigation.
21
+ * It groups components under their categories or lists direct top-level links.
22
+ *
23
+ * @param tree - The componentTree data, an array of ComponentItem.
24
+ * @returns An array structured for mobile navigation, containing SideNavItems or groups of SideNavItems.
25
+ *
26
+ * @example
27
+ * // Input (tree):
28
+ * // [{ name: "Core Components", children: [{ name: "Button", path:"components/core/button", hasWrapper:true }] },
29
+ * // { name: "Info Page", path:"info", hasWrapper:true}]
30
+ * // Output:
31
+ * // [{ title: "Core Components", items: [{ text: "Button", href: "/components/core/button" }] },
32
+ * // { text: "Info Page", href: "/info" }]
33
+ */
34
+ export declare function createMobileItems(tree: ComponentItem[]): (SideNavItem | {
35
+ title: string;
36
+ items: SideNavItem[];
37
+ })[];
38
+ /**
39
+ * Returns the input string, intended as the title for the current navigation section.
40
+ *
41
+ * @remarks
42
+ * Currently, this function acts as a direct pass-through.
43
+ *
44
+ * @param section - The name of the current section.
45
+ * @returns The section title.
46
+ *
47
+ * @example
48
+ * // Input (section): "Components"
49
+ * // Output: "Components"
50
+ */
51
+ export declare function getSectionTitle(section: string): string;
52
+ /**
53
+ * Processes a list of SideNavItems for a component group. If a SideNavItem's href matches
54
+ * the currentPath, this function injects a predefined list of in-page section links
55
+ * (e.g., to #description, #context) as 'subItems' to that active SideNavItem.
56
+ *
57
+ * @param groupItems - The list of SideNavItems in a specific group.
58
+ * @param currentPath - The current URL path, used to identify the active item.
59
+ * @returns The modified list of SideNavItems, with subItems potentially added to the active item.
60
+ *
61
+ * @example
62
+ * // Input (groupItems):
63
+ * // [{ text: "Button", href: "/components/core/button" }, { text: "Card", href: "/components/core/card" }]
64
+ * // Input (currentPath):
65
+ * // "/components/core/button"
66
+ * // Output:
67
+ * // [{ text: "Button", href: "/components/core/button", subItems: [{ text: "Description", href: "/components/core/button#description" }, (and other sections)] },
68
+ * // { text: "Card", href: "/components/core/card" }]
69
+ */
70
+ export declare function addStandardSubItemsToActiveComponentLink(groupItems: SideNavItem[], currentPath: string): SideNavItem[];
@@ -0,0 +1,129 @@
1
+ import { forceWrapAtThirdCapital } from "./text-string-conversion/textStringConversion.js";
2
+ /**
3
+ * Converts a potentially nested array of ComponentItem objects into a flat array of SideNavItem objects.
4
+ * Only includes items that are actual component pages (i.e., item.hasWrapper === true).
5
+ *
6
+ * @param items - The array of ComponentItem objects to process, often representing category.children.
7
+ * @returns A flat array of SideNavItem objects representing linkable component pages.
8
+ *
9
+ * @example
10
+ * // Input (items):
11
+ * // [{ name: "SubGroup", children: [{ name: "ActualButton", path:"components/core/button", hasWrapper:true }] },
12
+ * // { name: "ActualCard", path:"components/core/card", hasWrapper:true }]
13
+ * // Output:
14
+ * // [{ text: "ActualButton", href: "/components/core/button" },
15
+ * // { text: "ActualCard", href: "/components/core/card" }]
16
+ */
17
+ export function extractLinkableComponentNavItems(items) {
18
+ let navItems = [];
19
+ for (const item of items) {
20
+ if (item.hasWrapper) {
21
+ // If it's a wrapper, add it directly
22
+ navItems.push({
23
+ text: forceWrapAtThirdCapital(item.name),
24
+ href: `/${item.path}`,
25
+ // subItems: undefined, // Explicitly no sub-items for direct wrappers here
26
+ });
27
+ }
28
+ // If it's a folder (hasWrapper is false or undefined) AND has children, process children
29
+ if (!item.hasWrapper && item.children && item.children.length > 0) {
30
+ // Recursively get nav items from children and add them to the list
31
+ navItems = navItems.concat(extractLinkableComponentNavItems(item.children));
32
+ }
33
+ }
34
+ return navItems;
35
+ }
36
+ /**
37
+ * Transforms the raw componentTree into a structure suitable for mobile navigation.
38
+ * It groups components under their categories or lists direct top-level links.
39
+ *
40
+ * @param tree - The componentTree data, an array of ComponentItem.
41
+ * @returns An array structured for mobile navigation, containing SideNavItems or groups of SideNavItems.
42
+ *
43
+ * @example
44
+ * // Input (tree):
45
+ * // [{ name: "Core Components", children: [{ name: "Button", path:"components/core/button", hasWrapper:true }] },
46
+ * // { name: "Info Page", path:"info", hasWrapper:true}]
47
+ * // Output:
48
+ * // [{ title: "Core Components", items: [{ text: "Button", href: "/components/core/button" }] },
49
+ * // { text: "Info Page", href: "/info" }]
50
+ */
51
+ export function createMobileItems(tree) {
52
+ const result = [];
53
+ tree.forEach((category) => {
54
+ // Check if the category itself is a direct link (hasWrapper)
55
+ if (category.hasWrapper) {
56
+ result.push({
57
+ text: forceWrapAtThirdCapital(category.name),
58
+ href: `/${category.path}`,
59
+ });
60
+ }
61
+ // If the category has children, process them
62
+ else if (category.children && category.children.length > 0) {
63
+ // Use the existing helper to get a flat list of wrappers within this category
64
+ const flattenedItems = extractLinkableComponentNavItems(category.children);
65
+ // If there are any actual components within this category, add it as a group
66
+ if (flattenedItems.length > 0) {
67
+ result.push({
68
+ title: category.name, // e.g., "Data Vis", "Layout"
69
+ items: flattenedItems, // The already flattened list of {text, href} items
70
+ });
71
+ }
72
+ }
73
+ });
74
+ return result;
75
+ }
76
+ /**
77
+ * Returns the input string, intended as the title for the current navigation section.
78
+ *
79
+ * @remarks
80
+ * Currently, this function acts as a direct pass-through.
81
+ *
82
+ * @param section - The name of the current section.
83
+ * @returns The section title.
84
+ *
85
+ * @example
86
+ * // Input (section): "Components"
87
+ * // Output: "Components"
88
+ */
89
+ export function getSectionTitle(section) {
90
+ return section;
91
+ }
92
+ /**
93
+ * Processes a list of SideNavItems for a component group. If a SideNavItem's href matches
94
+ * the currentPath, this function injects a predefined list of in-page section links
95
+ * (e.g., to #description, #context) as 'subItems' to that active SideNavItem.
96
+ *
97
+ * @param groupItems - The list of SideNavItems in a specific group.
98
+ * @param currentPath - The current URL path, used to identify the active item.
99
+ * @returns The modified list of SideNavItems, with subItems potentially added to the active item.
100
+ *
101
+ * @example
102
+ * // Input (groupItems):
103
+ * // [{ text: "Button", href: "/components/core/button" }, { text: "Card", href: "/components/core/card" }]
104
+ * // Input (currentPath):
105
+ * // "/components/core/button"
106
+ * // Output:
107
+ * // [{ text: "Button", href: "/components/core/button", subItems: [{ text: "Description", href: "/components/core/button#description" }, (and other sections)] },
108
+ * // { text: "Card", href: "/components/core/card" }]
109
+ */
110
+ export function addStandardSubItemsToActiveComponentLink(groupItems, currentPath) {
111
+ return groupItems.map((item) => {
112
+ const basePath = item.href.split("#")[0];
113
+ const needsSubItems = basePath === currentPath || item.href === currentPath;
114
+ return {
115
+ ...item,
116
+ subItems: needsSubItems
117
+ ? [
118
+ { text: "Description", href: `${basePath}#description` },
119
+ { text: "Context", href: `${basePath}#context` },
120
+ {
121
+ text: "Component Demo",
122
+ href: `${basePath}#component-demo`,
123
+ },
124
+ { text: "Examples", href: `${basePath}#examples` },
125
+ ]
126
+ : item.subItems, // Preserve existing subItems
127
+ };
128
+ });
129
+ }
@@ -0,0 +1 @@
1
+ export function addIndexAndInitalValue(array: any): any;
@@ -0,0 +1,21 @@
1
+ export function addIndexAndInitalValue(array) {
2
+ return array.map((el, i) => ({
3
+ ...el,
4
+ isEditable:
5
+ (el.value == null && el.options == null) ||
6
+ typeof el.value === "function" ||
7
+ el.isBinded ||
8
+ el.propType === "fixed"
9
+ ? false
10
+ : true,
11
+ isProp: el.isProp ?? true,
12
+ value:
13
+ el.value ??
14
+ (el.inputType === "event"
15
+ ? [0, null]
16
+ : el.inputType === "checkbox"
17
+ ? false
18
+ : (el.options?.[0] ?? null)),
19
+ index: i,
20
+ }));
21
+ }
@@ -0,0 +1 @@
1
+ export function createBindableParametersValuesArray(parametersSourceArray: any, parametersValuesArray: any, customParametersObject?: {}): any;
@@ -0,0 +1,12 @@
1
+ export function createBindableParametersValuesArray(
2
+ parametersSourceArray,
3
+ parametersValuesArray,
4
+ customParametersObject = {},
5
+ ) {
6
+ return parametersSourceArray
7
+ .filter((el) => el.isBindable)
8
+ .map((el) => ({
9
+ ...el,
10
+ value: customParametersObject[el.name] ?? el.value,
11
+ }));
12
+ }
@@ -0,0 +1 @@
1
+ export function createParametersObject(parametersSourceArray: any, statedParametersValuesArray: any, derivedParametersValuesArray: any): {}[];
@@ -0,0 +1,29 @@
1
+ export function createParametersObject(
2
+ parametersSourceArray,
3
+ statedParametersValuesArray,
4
+ derivedParametersValuesArray,
5
+ ) {
6
+ let parametersObject = {};
7
+ let parametersParsingErrorsArray = [];
8
+
9
+ parametersSourceArray.forEach((param, index) => {
10
+ try {
11
+ let paramValue = param.isEditable
12
+ ? statedParametersValuesArray[param.index]
13
+ : derivedParametersValuesArray[param.index];
14
+
15
+ let paramValueWithWorkingFunctionsAndObjects =
16
+ typeof paramValue === "function"
17
+ ? paramValue.bind(parametersSourceArray[index])
18
+ : typeof param.value === "object"
19
+ ? JSON.parse(paramValue)
20
+ : paramValue;
21
+
22
+ parametersObject[param.name] = paramValueWithWorkingFunctionsAndObjects;
23
+ } catch (error) {
24
+ parametersParsingErrorsArray.push(param.name);
25
+ }
26
+ });
27
+
28
+ return [parametersObject, parametersParsingErrorsArray];
29
+ }
@@ -0,0 +1 @@
1
+ export function defineDefaultEventHandler(event: any, parametersSourceArray: any, parametersValuesArray: any, name: any): void;