@j2inn/fin5-ui-utils 8.2.0 → 9.0.0-beta.0

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 (243) hide show
  1. package/dist/fantomProps/createFin5Props/index.d.ts +12 -12
  2. package/dist/fantomProps/createFin5Props/index.js +146 -146
  3. package/dist/fantomProps/createFin5Props/index.js.map +1 -1
  4. package/dist/fantomProps/createFin5Props/runCreateFin5Props.d.ts +2 -2
  5. package/dist/fantomProps/createFin5Props/runCreateFin5Props.js +20 -20
  6. package/dist/fantomProps/createFin5Props/runCreateFin5Props.js.map +1 -1
  7. package/dist/fantomProps/fantomPropsToObject.d.ts +8 -8
  8. package/dist/fantomProps/fantomPropsToObject.js +182 -183
  9. package/dist/fantomProps/fantomPropsToObject.js.map +1 -1
  10. package/dist/fantomProps/generateJsonFromFantomPropsFile.d.ts +4 -4
  11. package/dist/fantomProps/generateJsonFromFantomPropsFile.js +51 -41
  12. package/dist/fantomProps/generateJsonFromFantomPropsFile.js.map +1 -1
  13. package/dist/fantomProps/localePropsToJson.d.ts +1 -1
  14. package/dist/fantomProps/localePropsToJson.js +60 -50
  15. package/dist/fantomProps/localePropsToJson.js.map +1 -1
  16. package/dist/fantomProps/readFantomPropsFile.d.ts +5 -5
  17. package/dist/fantomProps/readFantomPropsFile.js +74 -65
  18. package/dist/fantomProps/readFantomPropsFile.js.map +1 -1
  19. package/dist/fin5Top/fin5FileUpload.d.ts +24 -24
  20. package/dist/fin5Top/fin5FileUpload.js +51 -51
  21. package/dist/fin5Top/fin5FileUpload.js.map +1 -1
  22. package/dist/fin5Top/fin5Top.d.ts +188 -188
  23. package/dist/fin5Top/fin5Top.js +86 -86
  24. package/dist/fin5Top/fin5Top.js.map +1 -1
  25. package/dist/fin5Top/finEdge2Cloud.d.ts +6 -6
  26. package/dist/fin5Top/finEdge2Cloud.js +15 -15
  27. package/dist/fin5Top/getFin5BinUrl.d.ts +2 -2
  28. package/dist/fin5Top/getFin5BinUrl.js +9 -9
  29. package/dist/fin5Top/openFin5Alarm.d.ts +22 -22
  30. package/dist/fin5Top/openFin5Alarm.js +23 -23
  31. package/dist/fin5Top/openFin5Alarm.js.map +1 -1
  32. package/dist/fin5Top/openFin5Historian.d.ts +3 -3
  33. package/dist/fin5Top/openFin5Historian.js +19 -19
  34. package/dist/fin5Top/openFin5Historian.js.map +1 -1
  35. package/dist/fin5Top/useFin5AppURLHashParameter.d.ts +18 -18
  36. package/dist/fin5Top/useFin5AppURLHashParameter.js +133 -133
  37. package/dist/fin5Top/useFin5AppURLHashParameter.js.map +1 -1
  38. package/dist/index.d.ts +35 -35
  39. package/dist/index.js +69 -69
  40. package/dist/jobs/jobUtils.d.ts +14 -14
  41. package/dist/jobs/jobUtils.js +15 -15
  42. package/dist/jobs/jobUtils.js.map +1 -1
  43. package/dist/react/app/Fin5AppContainer.d.ts +36 -36
  44. package/dist/react/app/Fin5AppContainer.js +171 -161
  45. package/dist/react/app/Fin5AppContainer.js.map +1 -1
  46. package/dist/react/app/Fin5AppRootStore.d.ts +42 -42
  47. package/dist/react/app/Fin5AppRootStore.js +114 -114
  48. package/dist/react/app/Fin5AppRootStore.js.map +1 -1
  49. package/dist/react/components/ErrorBoundary.d.ts +57 -57
  50. package/dist/react/components/ErrorBoundary.js +160 -150
  51. package/dist/react/components/ErrorBoundary.js.map +1 -1
  52. package/dist/react/components/ErrorDisplayer.d.ts +19 -19
  53. package/dist/react/components/ErrorDisplayer.js +36 -36
  54. package/dist/react/components/ErrorDisplayer.js.map +1 -1
  55. package/dist/react/components/Loader.d.ts +9 -9
  56. package/dist/react/components/Loader.js +17 -17
  57. package/dist/react/components/LoadingSpinner.d.ts +2 -2
  58. package/dist/react/components/LoadingSpinner.js +27 -27
  59. package/dist/react/components/RecordImage.d.ts +20 -20
  60. package/dist/react/components/RecordImage.js +61 -51
  61. package/dist/react/components/RecordImage.js.map +1 -1
  62. package/dist/react/components/charts/QRCode.d.ts +25 -25
  63. package/dist/react/components/charts/QRCode.js +92 -82
  64. package/dist/react/components/charts/QRCode.js.map +1 -1
  65. package/dist/react/components/charts/line-bar/Chart.d.ts +166 -166
  66. package/dist/react/components/charts/line-bar/Chart.js +452 -442
  67. package/dist/react/components/charts/line-bar/Chart.js.map +1 -1
  68. package/dist/react/components/charts/line-bar/HGridChart.d.ts +58 -58
  69. package/dist/react/components/charts/line-bar/HGridChart.js +295 -285
  70. package/dist/react/components/charts/line-bar/HGridChart.js.map +1 -1
  71. package/dist/react/components/charts/pie/PieChart.d.ts +94 -94
  72. package/dist/react/components/charts/pie/PieChart.js +214 -204
  73. package/dist/react/components/charts/pie/PieChart.js.map +1 -1
  74. package/dist/react/components/charts/pie/SimplePieChart.d.ts +21 -21
  75. package/dist/react/components/charts/pie/SimplePieChart.js +65 -55
  76. package/dist/react/components/charts/pie/SimplePieChart.js.map +1 -1
  77. package/dist/react/components/graphics/GraphicViewer.d.ts +10 -10
  78. package/dist/react/components/graphics/GraphicViewer.js +29 -29
  79. package/dist/react/components/graphics/GraphicsTabViewer.d.ts +17 -17
  80. package/dist/react/components/graphics/GraphicsTabViewer.js +100 -90
  81. package/dist/react/components/graphics/GraphicsTabViewer.js.map +1 -1
  82. package/dist/react/components/makeCustomElement.d.ts +16 -16
  83. package/dist/react/components/makeCustomElement.js +150 -150
  84. package/dist/react/components/makeCustomElement.js.map +1 -1
  85. package/dist/react/components/navigation/BasicLayout.d.ts +41 -41
  86. package/dist/react/components/navigation/BasicLayout.js +165 -155
  87. package/dist/react/components/navigation/BasicLayout.js.map +1 -1
  88. package/dist/react/components/navigation/HeaderSiderLayout.d.ts +13 -13
  89. package/dist/react/components/navigation/HeaderSiderLayout.js +119 -110
  90. package/dist/react/components/navigation/HeaderSiderLayout.js.map +1 -1
  91. package/dist/react/components/navigation/MenuPage.d.ts +37 -37
  92. package/dist/react/components/navigation/MenuPage.js +35 -36
  93. package/dist/react/components/navigation/MenuPage.js.map +1 -1
  94. package/dist/react/components/navigation/MenuTrigger.d.ts +9 -9
  95. package/dist/react/components/navigation/MenuTrigger.js +33 -33
  96. package/dist/react/components/navigation/ReactRouterHeaderSiderLayout.d.ts +11 -11
  97. package/dist/react/components/navigation/ReactRouterHeaderSiderLayout.js +25 -25
  98. package/dist/react/components/navigation/ReactRouterHeaderSiderLayout.js.map +1 -1
  99. package/dist/react/components/navigation/ReactRouterLayout.d.ts +45 -46
  100. package/dist/react/components/navigation/ReactRouterLayout.js +142 -132
  101. package/dist/react/components/navigation/ReactRouterLayout.js.map +1 -1
  102. package/dist/react/components/navigation/customRouting/Router.d.ts +12 -12
  103. package/dist/react/components/navigation/customRouting/Router.js +54 -45
  104. package/dist/react/components/navigation/customRouting/Router.js.map +1 -1
  105. package/dist/react/components/navigation/customRouting/RouterLayout.d.ts +11 -11
  106. package/dist/react/components/navigation/customRouting/RouterLayout.js +71 -61
  107. package/dist/react/components/navigation/customRouting/RouterLayout.js.map +1 -1
  108. package/dist/react/components/resolvable/configurationForm/ConfigurationForm.d.ts +26 -27
  109. package/dist/react/components/resolvable/configurationForm/ConfigurationForm.js +105 -95
  110. package/dist/react/components/resolvable/configurationForm/ConfigurationForm.js.map +1 -1
  111. package/dist/react/components/resolvable/configurationForm/ConfigurationFormEntry.d.ts +15 -16
  112. package/dist/react/components/resolvable/configurationForm/ConfigurationFormEntry.js +98 -88
  113. package/dist/react/components/resolvable/configurationForm/ConfigurationFormEntry.js.map +1 -1
  114. package/dist/react/components/resolvable/configurationForm/getSectionDefault.d.ts +16 -16
  115. package/dist/react/components/resolvable/configurationForm/getSectionDefault.js +99 -99
  116. package/dist/react/components/resolvable/configurationForm/getSectionDefault.js.map +1 -1
  117. package/dist/react/hooks/useFin5BinUrl.d.ts +6 -6
  118. package/dist/react/hooks/useFin5BinUrl.js +15 -15
  119. package/dist/react/hooks/useFin5ColorScheme.d.ts +2 -2
  120. package/dist/react/hooks/useFin5ColorScheme.js +55 -56
  121. package/dist/react/hooks/useFin5ColorScheme.js.map +1 -1
  122. package/dist/react/hooks/useScreenSize.d.ts +7 -7
  123. package/dist/react/hooks/useScreenSize.js +31 -31
  124. package/dist_es/fantomProps/createFin5Props/index.d.ts +12 -12
  125. package/dist_es/fantomProps/createFin5Props/index.js +140 -140
  126. package/dist_es/fantomProps/createFin5Props/index.js.map +1 -1
  127. package/dist_es/fantomProps/createFin5Props/runCreateFin5Props.d.ts +2 -2
  128. package/dist_es/fantomProps/createFin5Props/runCreateFin5Props.js +15 -15
  129. package/dist_es/fantomProps/createFin5Props/runCreateFin5Props.js.map +1 -1
  130. package/dist_es/fantomProps/fantomPropsToObject.d.ts +8 -8
  131. package/dist_es/fantomProps/fantomPropsToObject.js +178 -178
  132. package/dist_es/fantomProps/fantomPropsToObject.js.map +1 -1
  133. package/dist_es/fantomProps/generateJsonFromFantomPropsFile.d.ts +4 -4
  134. package/dist_es/fantomProps/generateJsonFromFantomPropsFile.js +12 -12
  135. package/dist_es/fantomProps/localePropsToJson.d.ts +1 -1
  136. package/dist_es/fantomProps/localePropsToJson.js +21 -21
  137. package/dist_es/fantomProps/localePropsToJson.js.map +1 -1
  138. package/dist_es/fantomProps/readFantomPropsFile.d.ts +5 -5
  139. package/dist_es/fantomProps/readFantomPropsFile.js +38 -39
  140. package/dist_es/fantomProps/readFantomPropsFile.js.map +1 -1
  141. package/dist_es/fin5Top/fin5FileUpload.d.ts +24 -24
  142. package/dist_es/fin5Top/fin5FileUpload.js +47 -47
  143. package/dist_es/fin5Top/fin5FileUpload.js.map +1 -1
  144. package/dist_es/fin5Top/fin5Top.d.ts +188 -188
  145. package/dist_es/fin5Top/fin5Top.js +81 -81
  146. package/dist_es/fin5Top/fin5Top.js.map +1 -1
  147. package/dist_es/fin5Top/finEdge2Cloud.d.ts +6 -6
  148. package/dist_es/fin5Top/finEdge2Cloud.js +11 -11
  149. package/dist_es/fin5Top/getFin5BinUrl.d.ts +2 -2
  150. package/dist_es/fin5Top/getFin5BinUrl.js +5 -5
  151. package/dist_es/fin5Top/openFin5Alarm.d.ts +22 -22
  152. package/dist_es/fin5Top/openFin5Alarm.js +19 -19
  153. package/dist_es/fin5Top/openFin5Alarm.js.map +1 -1
  154. package/dist_es/fin5Top/openFin5Historian.d.ts +3 -3
  155. package/dist_es/fin5Top/openFin5Historian.js +15 -15
  156. package/dist_es/fin5Top/openFin5Historian.js.map +1 -1
  157. package/dist_es/fin5Top/useFin5AppURLHashParameter.d.ts +18 -18
  158. package/dist_es/fin5Top/useFin5AppURLHashParameter.js +124 -124
  159. package/dist_es/fin5Top/useFin5AppURLHashParameter.js.map +1 -1
  160. package/dist_es/index.d.ts +35 -35
  161. package/dist_es/index.js +53 -53
  162. package/dist_es/jobs/jobUtils.d.ts +14 -14
  163. package/dist_es/jobs/jobUtils.js +9 -9
  164. package/dist_es/react/app/Fin5AppContainer.d.ts +36 -36
  165. package/dist_es/react/app/Fin5AppContainer.js +132 -132
  166. package/dist_es/react/app/Fin5AppContainer.js.map +1 -1
  167. package/dist_es/react/app/Fin5AppRootStore.d.ts +42 -42
  168. package/dist_es/react/app/Fin5AppRootStore.js +110 -110
  169. package/dist_es/react/app/Fin5AppRootStore.js.map +1 -1
  170. package/dist_es/react/components/ErrorBoundary.d.ts +57 -57
  171. package/dist_es/react/components/ErrorBoundary.js +123 -123
  172. package/dist_es/react/components/ErrorDisplayer.d.ts +19 -19
  173. package/dist_es/react/components/ErrorDisplayer.js +28 -28
  174. package/dist_es/react/components/ErrorDisplayer.js.map +1 -1
  175. package/dist_es/react/components/Loader.d.ts +9 -9
  176. package/dist_es/react/components/Loader.js +12 -12
  177. package/dist_es/react/components/LoadingSpinner.d.ts +2 -2
  178. package/dist_es/react/components/LoadingSpinner.js +20 -20
  179. package/dist_es/react/components/RecordImage.d.ts +20 -20
  180. package/dist_es/react/components/RecordImage.js +24 -24
  181. package/dist_es/react/components/RecordImage.js.map +1 -1
  182. package/dist_es/react/components/charts/QRCode.d.ts +25 -25
  183. package/dist_es/react/components/charts/QRCode.js +52 -52
  184. package/dist_es/react/components/charts/QRCode.js.map +1 -1
  185. package/dist_es/react/components/charts/line-bar/Chart.d.ts +166 -166
  186. package/dist_es/react/components/charts/line-bar/Chart.js +415 -415
  187. package/dist_es/react/components/charts/line-bar/Chart.js.map +1 -1
  188. package/dist_es/react/components/charts/line-bar/HGridChart.d.ts +58 -58
  189. package/dist_es/react/components/charts/line-bar/HGridChart.js +250 -250
  190. package/dist_es/react/components/charts/line-bar/HGridChart.js.map +1 -1
  191. package/dist_es/react/components/charts/pie/PieChart.d.ts +94 -94
  192. package/dist_es/react/components/charts/pie/PieChart.js +177 -177
  193. package/dist_es/react/components/charts/pie/PieChart.js.map +1 -1
  194. package/dist_es/react/components/charts/pie/SimplePieChart.d.ts +21 -21
  195. package/dist_es/react/components/charts/pie/SimplePieChart.js +25 -25
  196. package/dist_es/react/components/graphics/GraphicViewer.d.ts +10 -10
  197. package/dist_es/react/components/graphics/GraphicViewer.js +22 -22
  198. package/dist_es/react/components/graphics/GraphicsTabViewer.d.ts +17 -17
  199. package/dist_es/react/components/graphics/GraphicsTabViewer.js +60 -60
  200. package/dist_es/react/components/graphics/GraphicsTabViewer.js.map +1 -1
  201. package/dist_es/react/components/makeCustomElement.d.ts +16 -16
  202. package/dist_es/react/components/makeCustomElement.js +142 -142
  203. package/dist_es/react/components/makeCustomElement.js.map +1 -1
  204. package/dist_es/react/components/navigation/BasicLayout.d.ts +41 -41
  205. package/dist_es/react/components/navigation/BasicLayout.js +124 -124
  206. package/dist_es/react/components/navigation/BasicLayout.js.map +1 -1
  207. package/dist_es/react/components/navigation/HeaderSiderLayout.d.ts +13 -13
  208. package/dist_es/react/components/navigation/HeaderSiderLayout.js +80 -80
  209. package/dist_es/react/components/navigation/HeaderSiderLayout.js.map +1 -1
  210. package/dist_es/react/components/navigation/MenuPage.d.ts +37 -37
  211. package/dist_es/react/components/navigation/MenuPage.js +30 -30
  212. package/dist_es/react/components/navigation/MenuPage.js.map +1 -1
  213. package/dist_es/react/components/navigation/MenuTrigger.d.ts +9 -9
  214. package/dist_es/react/components/navigation/MenuTrigger.js +28 -28
  215. package/dist_es/react/components/navigation/ReactRouterHeaderSiderLayout.d.ts +11 -11
  216. package/dist_es/react/components/navigation/ReactRouterHeaderSiderLayout.js +18 -18
  217. package/dist_es/react/components/navigation/ReactRouterHeaderSiderLayout.js.map +1 -1
  218. package/dist_es/react/components/navigation/ReactRouterLayout.d.ts +45 -46
  219. package/dist_es/react/components/navigation/ReactRouterLayout.js +99 -99
  220. package/dist_es/react/components/navigation/ReactRouterLayout.js.map +1 -1
  221. package/dist_es/react/components/navigation/customRouting/Router.d.ts +12 -12
  222. package/dist_es/react/components/navigation/customRouting/Router.js +18 -18
  223. package/dist_es/react/components/navigation/customRouting/Router.js.map +1 -1
  224. package/dist_es/react/components/navigation/customRouting/RouterLayout.d.ts +11 -11
  225. package/dist_es/react/components/navigation/customRouting/RouterLayout.js +34 -34
  226. package/dist_es/react/components/navigation/customRouting/RouterLayout.js.map +1 -1
  227. package/dist_es/react/components/resolvable/configurationForm/ConfigurationForm.d.ts +26 -27
  228. package/dist_es/react/components/resolvable/configurationForm/ConfigurationForm.js +64 -64
  229. package/dist_es/react/components/resolvable/configurationForm/ConfigurationForm.js.map +1 -1
  230. package/dist_es/react/components/resolvable/configurationForm/ConfigurationFormEntry.d.ts +15 -16
  231. package/dist_es/react/components/resolvable/configurationForm/ConfigurationFormEntry.js +58 -58
  232. package/dist_es/react/components/resolvable/configurationForm/ConfigurationFormEntry.js.map +1 -1
  233. package/dist_es/react/components/resolvable/configurationForm/getSectionDefault.d.ts +16 -16
  234. package/dist_es/react/components/resolvable/configurationForm/getSectionDefault.js +94 -94
  235. package/dist_es/react/components/resolvable/configurationForm/getSectionDefault.js.map +1 -1
  236. package/dist_es/react/hooks/useFin5BinUrl.d.ts +6 -6
  237. package/dist_es/react/hooks/useFin5BinUrl.js +11 -11
  238. package/dist_es/react/hooks/useFin5ColorScheme.d.ts +2 -2
  239. package/dist_es/react/hooks/useFin5ColorScheme.js +52 -52
  240. package/dist_es/react/hooks/useFin5ColorScheme.js.map +1 -1
  241. package/dist_es/react/hooks/useScreenSize.d.ts +7 -7
  242. package/dist_es/react/hooks/useScreenSize.js +27 -27
  243. package/package.json +26 -49
@@ -1,151 +1,151 @@
1
- "use strict";
2
- /*
3
- * Copyright (c) 2025, J2 Innovations. All Rights Reserved
4
- */
5
- var __importDefault = (this && this.__importDefault) || function (mod) {
6
- return (mod && mod.__esModule) ? mod : { "default": mod };
7
- };
8
- Object.defineProperty(exports, "__esModule", { value: true });
9
- exports.registerReactWebComponent = exports.makeCustomElement = void 0;
10
- const app_react_1 = require("@j2inn/app-react");
11
- const ui_1 = require("@j2inn/ui");
12
- const utils_1 = require("@j2inn/utils");
13
- const haystack_react_1 = require("haystack-react");
14
- const jss_1 = require("jss");
15
- const react_1 = __importDefault(require("react"));
16
- const client_1 = require("react-dom/client");
17
- const react_jss_1 = require("react-jss");
18
- const defaultTheme = (0, ui_1.GenerateTheme)().light;
19
- /**
20
- * Generate a custom element constructor that wraps the given react component.
21
- */
22
- const makeCustomElement = (Component, options = {
23
- useShadowDom: true,
24
- }) => {
25
- return class extends HTMLElement {
26
- static get observedAttributes() {
27
- return ['props'];
28
- }
29
- _locale;
30
- get locale() {
31
- return this._locale;
32
- }
33
- set locale(value) {
34
- this._locale = value;
35
- this.render();
36
- }
37
- _appRootStore;
38
- get appRootStore() {
39
- return this._appRootStore ?? {};
40
- }
41
- set appRootStore(value) {
42
- this._appRootStore = value;
43
- this.render();
44
- }
45
- _appStore;
46
- get appStore() {
47
- return this._appStore ?? {};
48
- }
49
- set appStore(value) {
50
- this._appStore = value;
51
- this.render();
52
- }
53
- _client;
54
- get client() {
55
- return this._client;
56
- }
57
- set client(value) {
58
- this._client = value;
59
- this.render();
60
- }
61
- _i18n;
62
- get i18n() {
63
- return this._i18n;
64
- }
65
- set i18n(value) {
66
- this._i18n = value;
67
- this.render();
68
- }
69
- _props;
70
- get props() {
71
- return this._props;
72
- }
73
- set props(value) {
74
- this._props = value;
75
- this.render();
76
- }
77
- _theme;
78
- get theme() {
79
- return this._theme ?? defaultTheme;
80
- }
81
- set theme(value) {
82
- this._theme = value;
83
- this.render();
84
- }
85
- root;
86
- jss;
87
- base;
88
- initialized = false;
89
- constructor() {
90
- super();
91
- this.base = options?.useShadowDom
92
- ? this.attachShadow({ mode: 'open' })
93
- : this;
94
- }
95
- initialize() {
96
- if (!this.initialized) {
97
- const mountPoint = document.createElement('div');
98
- mountPoint.setAttribute('style', 'display: contents;');
99
- this.base.appendChild(mountPoint);
100
- this.root = (0, client_1.createRoot)(mountPoint);
101
- this.jss = (0, jss_1.create)({
102
- insertionPoint: mountPoint,
103
- });
104
- this.initialized = true;
105
- }
106
- }
107
- connectedCallback() {
108
- this.render();
109
- }
110
- attributeChangedCallback() {
111
- this.render();
112
- }
113
- disconnectedCallback() {
114
- this.root?.unmount();
115
- this.initialized = false;
116
- }
117
- render() {
118
- this.initialize();
119
- const ThemedComponent = (react_1.default.createElement(react_jss_1.ThemeProvider, { theme: this.theme },
120
- react_1.default.createElement(utils_1.I18NContext.Provider, { value: this.i18n },
121
- react_1.default.createElement(react_jss_1.JssProvider, { jss: this.jss },
122
- react_1.default.createElement(Component, { ...this.props })))));
123
- this.root?.render(react_1.default.createElement(app_react_1.AppRootStoreContext.Provider, { value: this.appRootStore ?? null },
124
- react_1.default.createElement(app_react_1.AppStoreContext.Provider, { value: this.appStore }, this.client ? (react_1.default.createElement(haystack_react_1.ClientContext.Provider, { value: this.client }, ThemedComponent)) : (ThemedComponent))));
125
- }
126
- };
127
- };
128
- exports.makeCustomElement = makeCustomElement;
129
- /**
130
- * Create a custom element wrapping a React component and register it.
131
- * @param webComponentName the name of the Web component (tag name)
132
- * @param ReactComponent the React component to wrap
133
- * @returns
134
- */
135
- const registerReactWebComponent = (webComponentName, ReactComponent, options) => {
136
- // Bail if web component is already defined
137
- if (customElements.get(webComponentName)) {
138
- return;
139
- }
140
- // Make web component that wraps the react component
141
- const Element = (0, exports.makeCustomElement)(ReactComponent, options);
142
- try {
143
- // Define web component
144
- customElements.define(webComponentName, Element);
145
- }
146
- catch (e) {
147
- console.error(e);
148
- }
149
- };
150
- exports.registerReactWebComponent = registerReactWebComponent;
1
+ "use strict";
2
+ /*
3
+ * Copyright (c) 2025, J2 Innovations. All Rights Reserved
4
+ */
5
+ var __importDefault = (this && this.__importDefault) || function (mod) {
6
+ return (mod && mod.__esModule) ? mod : { "default": mod };
7
+ };
8
+ Object.defineProperty(exports, "__esModule", { value: true });
9
+ exports.registerReactWebComponent = exports.makeCustomElement = void 0;
10
+ const app_react_1 = require("@j2inn/app-react");
11
+ const ui_1 = require("@j2inn/ui");
12
+ const utils_1 = require("@j2inn/utils");
13
+ const haystack_react_1 = require("haystack-react");
14
+ const jss_1 = require("jss");
15
+ const react_1 = __importDefault(require("react"));
16
+ const client_1 = require("react-dom/client");
17
+ const react_jss_1 = require("react-jss");
18
+ const defaultTheme = (0, ui_1.GenerateTheme)().light;
19
+ /**
20
+ * Generate a custom element constructor that wraps the given react component.
21
+ */
22
+ const makeCustomElement = (Component, options = {
23
+ useShadowDom: true,
24
+ }) => {
25
+ return class extends HTMLElement {
26
+ static get observedAttributes() {
27
+ return ['props'];
28
+ }
29
+ _locale;
30
+ get locale() {
31
+ return this._locale;
32
+ }
33
+ set locale(value) {
34
+ this._locale = value;
35
+ this.render();
36
+ }
37
+ _appRootStore;
38
+ get appRootStore() {
39
+ return this._appRootStore ?? {};
40
+ }
41
+ set appRootStore(value) {
42
+ this._appRootStore = value;
43
+ this.render();
44
+ }
45
+ _appStore;
46
+ get appStore() {
47
+ return this._appStore ?? {};
48
+ }
49
+ set appStore(value) {
50
+ this._appStore = value;
51
+ this.render();
52
+ }
53
+ _client;
54
+ get client() {
55
+ return this._client;
56
+ }
57
+ set client(value) {
58
+ this._client = value;
59
+ this.render();
60
+ }
61
+ _i18n;
62
+ get i18n() {
63
+ return this._i18n;
64
+ }
65
+ set i18n(value) {
66
+ this._i18n = value;
67
+ this.render();
68
+ }
69
+ _props;
70
+ get props() {
71
+ return this._props;
72
+ }
73
+ set props(value) {
74
+ this._props = value;
75
+ this.render();
76
+ }
77
+ _theme;
78
+ get theme() {
79
+ return this._theme ?? defaultTheme;
80
+ }
81
+ set theme(value) {
82
+ this._theme = value;
83
+ this.render();
84
+ }
85
+ root;
86
+ jss;
87
+ base;
88
+ initialized = false;
89
+ constructor() {
90
+ super();
91
+ this.base = options?.useShadowDom
92
+ ? this.attachShadow({ mode: 'open' })
93
+ : this;
94
+ }
95
+ initialize() {
96
+ if (!this.initialized) {
97
+ const mountPoint = document.createElement('div');
98
+ mountPoint.setAttribute('style', 'display: contents;');
99
+ this.base.appendChild(mountPoint);
100
+ this.root = (0, client_1.createRoot)(mountPoint);
101
+ this.jss = (0, jss_1.create)({
102
+ insertionPoint: mountPoint,
103
+ });
104
+ this.initialized = true;
105
+ }
106
+ }
107
+ connectedCallback() {
108
+ this.render();
109
+ }
110
+ attributeChangedCallback() {
111
+ this.render();
112
+ }
113
+ disconnectedCallback() {
114
+ this.root?.unmount();
115
+ this.initialized = false;
116
+ }
117
+ render() {
118
+ this.initialize();
119
+ const ThemedComponent = (react_1.default.createElement(react_jss_1.ThemeProvider, { theme: this.theme },
120
+ react_1.default.createElement(utils_1.I18NContext.Provider, { value: this.i18n },
121
+ react_1.default.createElement(react_jss_1.JssProvider, { jss: this.jss },
122
+ react_1.default.createElement(Component, { ...this.props })))));
123
+ this.root?.render(react_1.default.createElement(app_react_1.AppRootStoreContext.Provider, { value: this.appRootStore ?? null },
124
+ react_1.default.createElement(app_react_1.AppStoreContext.Provider, { value: this.appStore }, this.client ? (react_1.default.createElement(haystack_react_1.ClientContext.Provider, { value: this.client }, ThemedComponent)) : (ThemedComponent))));
125
+ }
126
+ };
127
+ };
128
+ exports.makeCustomElement = makeCustomElement;
129
+ /**
130
+ * Create a custom element wrapping a React component and register it.
131
+ * @param webComponentName the name of the Web component (tag name)
132
+ * @param ReactComponent the React component to wrap
133
+ * @returns
134
+ */
135
+ const registerReactWebComponent = (webComponentName, ReactComponent, options) => {
136
+ // Bail if web component is already defined
137
+ if (customElements.get(webComponentName)) {
138
+ return;
139
+ }
140
+ // Make web component that wraps the react component
141
+ const Element = (0, exports.makeCustomElement)(ReactComponent, options);
142
+ try {
143
+ // Define web component
144
+ customElements.define(webComponentName, Element);
145
+ }
146
+ catch (e) {
147
+ console.error(e);
148
+ }
149
+ };
150
+ exports.registerReactWebComponent = registerReactWebComponent;
151
151
  //# sourceMappingURL=makeCustomElement.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"makeCustomElement.js","sourceRoot":"","sources":["../../../src/react/components/makeCustomElement.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"makeCustomElement.js","sourceRoot":"","sources":["../../../src/react/components/makeCustomElement.tsx"],"names":[],"mappings":"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"}
@@ -1,41 +1,41 @@
1
- import { LayoutProps, MenuProps, SiderProps } from 'antd';
2
- import React, { PropsWithChildren, ReactElement } from 'react';
3
- import { MenuPage } from './MenuPage';
4
- export interface BasicLayoutStyleVariables {
5
- isMobile?: boolean;
6
- compactSider?: boolean;
7
- siderWidth?: number | string;
8
- headerHeight: number;
9
- }
10
- export interface BasicLayoutProps<T extends MenuPage> extends PropsWithChildren {
11
- pages?: T[];
12
- defaultPage?: string;
13
- selectedPages?: string[];
14
- onSelect?: (key: string) => void;
15
- compactSider?: {
16
- isCompact?: boolean;
17
- showButton?: boolean;
18
- buttonClassName?: string;
19
- };
20
- layoutProps?: LayoutProps;
21
- mobileHeaderProps?: LayoutProps;
22
- siderProps?: SiderProps;
23
- contentProps?: LayoutProps;
24
- menuProps?: Omit<MenuProps, 'items' | 'selectedKeys' | 'onSelect'>;
25
- menuBefore?: React.ReactNode;
26
- menuAfter?: React.ReactNode;
27
- menuTriggerClassName?: string;
28
- headerHeight?: number;
29
- }
30
- /**
31
- * Copy the array and recursively remove pages having the `showInMenu` flag set to false.
32
- * @param pages
33
- * @returns
34
- */
35
- export declare const getMenuPages: (pages: MenuPage[]) => MenuPage<Record<string, unknown>>[];
36
- export declare const DEFAULT_HEADER_HEIGHT = 45;
37
- /**
38
- * Basic layout with sider and mobile navigation management.
39
- * Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
40
- */
41
- export declare function BasicLayout<T extends MenuPage>({ pages, defaultPage, selectedPages, onSelect, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight, children, }: BasicLayoutProps<T>): ReactElement;
1
+ import { LayoutProps, MenuProps, SiderProps } from 'antd';
2
+ import React, { PropsWithChildren, ReactElement } from 'react';
3
+ import { MenuPage } from './MenuPage';
4
+ export interface BasicLayoutStyleVariables {
5
+ isMobile?: boolean;
6
+ compactSider?: boolean;
7
+ siderWidth?: number | string;
8
+ headerHeight: number;
9
+ }
10
+ export interface BasicLayoutProps<T extends MenuPage> extends PropsWithChildren {
11
+ pages?: T[];
12
+ defaultPage?: string;
13
+ selectedPages?: string[];
14
+ onSelect?: (key: string) => void;
15
+ compactSider?: {
16
+ isCompact?: boolean;
17
+ showButton?: boolean;
18
+ buttonClassName?: string;
19
+ };
20
+ layoutProps?: LayoutProps;
21
+ mobileHeaderProps?: LayoutProps;
22
+ siderProps?: SiderProps;
23
+ contentProps?: LayoutProps;
24
+ menuProps?: Omit<MenuProps, 'items' | 'selectedKeys' | 'onSelect'>;
25
+ menuBefore?: React.ReactNode;
26
+ menuAfter?: React.ReactNode;
27
+ menuTriggerClassName?: string;
28
+ headerHeight?: number;
29
+ }
30
+ /**
31
+ * Copy the array and recursively remove pages having the `showInMenu` flag set to false.
32
+ * @param pages
33
+ * @returns
34
+ */
35
+ export declare const getMenuPages: (pages: MenuPage[]) => MenuPage[];
36
+ export declare const DEFAULT_HEADER_HEIGHT = 45;
37
+ /**
38
+ * Basic layout with sider and mobile navigation management.
39
+ * Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
40
+ */
41
+ export declare function BasicLayout<T extends MenuPage>({ pages, defaultPage, selectedPages, onSelect, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight, children, }: BasicLayoutProps<T>): ReactElement;