@geops/rvf-mobility-web-component 0.1.46 → 0.1.47-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 (194) hide show
  1. package/.prettierrc.js +3 -1
  2. package/README.md +1 -1
  3. package/doc/package.json +4 -3
  4. package/doc/postcss.config.mjs +1 -1
  5. package/doc/src/app/components/GeopsMobilityDoc.tsx +13 -224
  6. package/doc/src/app/components/GeopsMobilitySearchDoc.tsx +11 -107
  7. package/doc/src/app/components/WebComponentDoc.tsx +45 -56
  8. package/doc/src/app/geops-mobility/page.tsx +7 -2
  9. package/doc/src/app/geops-mobility-search/page.tsx +6 -2
  10. package/doc/src/app/globals.css +47 -27
  11. package/doc/src/app/layout.tsx +4 -2
  12. package/docutils.js +33 -17
  13. package/eslint.config.mjs +28 -34
  14. package/iframe.html +5624 -201
  15. package/index.html +108 -88
  16. package/index.js +2229 -1976
  17. package/input.css +21 -3
  18. package/package.json +37 -40
  19. package/scripts/build.mjs +2 -2
  20. package/scripts/dev.mjs +3 -3
  21. package/search.html +70 -23
  22. package/src/BaseLayer/BaseLayer.tsx +2 -1
  23. package/src/Copyright/Copyright.tsx +4 -2
  24. package/src/DebugDeparture/DebugDeparture.tsx +16 -12
  25. package/src/DebugStop/DebugStop.tsx +2 -2
  26. package/src/Departure/Departure.tsx +2 -3
  27. package/src/EmbedNavigation/DragPanWarning.ts +125 -0
  28. package/src/EmbedNavigation/EmbedNavigation.tsx +52 -0
  29. package/src/EmbedNavigation/index.js +1 -0
  30. package/src/EmbedNavigation/index.tsx +1 -0
  31. package/src/GeolocationButton/GeolocationButton.tsx +11 -35
  32. package/src/GeolocationButton/index.tsx +1 -1
  33. package/src/Map/Map.tsx +5 -3
  34. package/src/MapDispatchEvents/MapDispatchEvents.tsx +78 -0
  35. package/src/MapDispatchEvents/index.tsx +1 -0
  36. package/src/MobilityMap/MobilityMap.tsx +117 -162
  37. package/src/MobilityMap/MobilityMapAttributes.test.ts +21 -0
  38. package/src/MobilityMap/MobilityMapAttributes.ts +243 -0
  39. package/src/MobilityMap/index.tsx +1 -0
  40. package/src/MobilitySearch/MobilitySearch.tsx +35 -0
  41. package/src/MobilitySearch/MobilitySearchAttributes.test.ts +21 -0
  42. package/src/MobilitySearch/MobilitySearchAttributes.ts +68 -0
  43. package/src/MobilitySearch/index.ts +2 -0
  44. package/src/NotificationLayer/NotificationLayer.tsx +27 -4
  45. package/src/Overlay/Overlay.tsx +24 -11
  46. package/src/Permalink/Permalink.tsx +77 -0
  47. package/src/Permalink/index.tsx +1 -0
  48. package/src/RealtimeLayer/RealtimeLayer.tsx +72 -33
  49. package/src/RouteDestination/RouteDestination.tsx +3 -3
  50. package/src/RouteIcon/RouteIcon.tsx +33 -25
  51. package/src/RouteIcon/index.tsx +1 -1
  52. package/src/RouteIdentifier/RouteIdentifer.tsx +6 -5
  53. package/src/RouteInfos/RouteInfos.tsx +7 -3
  54. package/src/RouteSchedule/RouteSchedule.tsx +3 -3
  55. package/src/RouteScheduleFooter/RouteScheduleFooter.tsx +1 -1
  56. package/src/RouteScheduleHeader/RouteScheduleHeader.tsx +7 -29
  57. package/src/RouteStop/RouteStop.tsx +8 -11
  58. package/src/RouteStopDelay/RouteStopDelay.tsx +2 -1
  59. package/src/RouteStopName/RouteStopName.tsx +2 -2
  60. package/src/RouteStopPlatform/RouteStopPlatform.tsx +2 -2
  61. package/src/RouteStopProgress/RouteStopProgress.tsx +2 -1
  62. package/src/RouteStopServices/RouteStopServices.tsx +2 -2
  63. package/src/RouteStopStation/RouteStopStation.tsx +8 -2
  64. package/src/RouteStopTime/RouteStopTime.tsx +2 -1
  65. package/src/RvfButton/RvfButton.tsx +14 -5
  66. package/src/RvfCheckbox/RvfCheckbox.tsx +8 -8
  67. package/src/RvfEmbedNavigation/DragPanWarning.ts +5 -5
  68. package/src/RvfEmbedNavigation/RvfEmbedNavigation.tsx +1 -0
  69. package/src/RvfExportMenu/RvfExportMenu.tsx +14 -12
  70. package/src/RvfExportMenuButton/RvfExportMenuButton.tsx +6 -7
  71. package/src/RvfFeatureDetails/RvfFeatureDetails.tsx +5 -5
  72. package/src/RvfFeatureDetails/RvfLineNetworkDetails/RvfLineNetworkDetails.tsx +164 -138
  73. package/src/RvfFeatureDetails/RvfNotificationDetails/RvfNotificationDetails.tsx +151 -109
  74. package/src/RvfFeatureDetails/RvfSellingPointDetails/RvfSellingPointDetails.tsx +2 -2
  75. package/src/RvfFeatureDetails/RvfSharedMobilityDetail/FloatingVehiclesDetails/FloatingVehiclesDetails.tsx +3 -3
  76. package/src/RvfFeatureDetails/RvfSharedMobilityDetail/RvfSharedMobilityDetails.tsx +8 -6
  77. package/src/RvfFeatureDetails/RvfSharedMobilityDetail/StationDetails/StationDetails.tsx +5 -4
  78. package/src/RvfFeatureDetailsTitle/RvfFeatureDetailsTitle.tsx +81 -0
  79. package/src/RvfFeatureDetailsTitle/index.tsx +1 -0
  80. package/src/RvfFloatingMenu/RvfFloatingMenu.tsx +4 -4
  81. package/src/RvfGeolocationButton/GeolocationButton.tsx +98 -0
  82. package/src/RvfGeolocationButton/index.tsx +1 -0
  83. package/src/RvfIconButton/RvfIconButton.tsx +20 -9
  84. package/src/RvfInputCopy/RvfInputCopy.tsx +8 -8
  85. package/src/RvfLayerTree/RvfLayerTree.tsx +5 -2
  86. package/src/RvfLayerTree/TreeItem/TreeItem.tsx +13 -16
  87. package/src/RvfLayerTree/layersTreeReducer.ts +23 -18
  88. package/src/RvfLayerTreeButton/RvfLayerTreeButton.tsx +6 -6
  89. package/src/RvfLineNetworkPlanLayer/RvfLineNetworkPlanLayer.tsx +2 -1
  90. package/src/RvfLink/RvfLink.tsx +4 -3
  91. package/src/RvfMobilityMap/RvfMobilityMap.tsx +314 -322
  92. package/src/RvfModal/RvfModal.tsx +4 -3
  93. package/src/RvfOverlayContent/RvfOverlayContent.tsx +126 -0
  94. package/src/RvfOverlayContent/index.ts +0 -0
  95. package/src/RvfOverlayHeader/RvfOverlayHeader.tsx +13 -10
  96. package/src/RvfPermalink/RvfPermalink.tsx +2 -2
  97. package/src/RvfPoisLayer/RvfPoisLayer.tsx +2 -1
  98. package/src/RvfRadioButton/RvfRadioButton.tsx +1 -1
  99. package/src/RvfRouteIcon/RvfRouteIcon.tsx +10 -0
  100. package/src/RvfRouteIcon/index.tsx +1 -0
  101. package/src/RvfSearch/RvfSearch.tsx +4 -1
  102. package/src/RvfSearchButton/RvfSearchButton.tsx +27 -0
  103. package/src/RvfSearchButton/index.tsx +1 -0
  104. package/src/RvfSelect/RvfSelect.tsx +7 -5
  105. package/src/RvfSelectedFeatureHighlightLayer/RvfSelectedFeatureHighlightLayer.tsx +1 -2
  106. package/src/RvfSellingPointsLayer/RvfSellingPointsLayer.tsx +2 -1
  107. package/src/RvfShare/RvfPermalinkButton/RvfPermalinkButton.tsx +13 -12
  108. package/src/RvfShare/RvfShare.tsx +11 -10
  109. package/src/RvfShareMenuButton/RvfShareMenuButton.tsx +5 -5
  110. package/src/RvfSharedMobilityLayerGroup/RvfSharedMobilityLayerGroup.tsx +25 -22
  111. package/src/RvfSingleClickListener/RvfSingleClickListener.tsx +46 -31
  112. package/src/RvfTarifZonenLayer/RvfTarifZonenLayer.tsx +2 -1
  113. package/src/RvfTopics/RvfTopics.tsx +6 -5
  114. package/src/RvfZoomButtons/RvfZoomButtons.tsx +3 -3
  115. package/src/ScaleLine/ScaleLine.tsx +5 -4
  116. package/src/ScrollableHandler/ScrollableHandler.tsx +2 -1
  117. package/src/ScrollableHandler/index.tsx +1 -1
  118. package/src/SingleClickListener/SingleClickListener.tsx +47 -4
  119. package/src/Station/Station.tsx +5 -5
  120. package/src/StationName/StationName.tsx +3 -3
  121. package/src/StationServices/StationServices.tsx +3 -3
  122. package/src/StationsLayer/StationsLayer.tsx +5 -4
  123. package/src/StopsSearch/StopsSearch.tsx +115 -84
  124. package/src/WindowMessageListener/WindowMessageListener.tsx +67 -0
  125. package/src/WindowMessageListener/index.tsx +1 -0
  126. package/src/icons/Airport/Airport.tsx +4 -4
  127. package/src/icons/ArrowDown/ArrowDown.tsx +1 -1
  128. package/src/icons/ArrowUp/ArrowUp.tsx +1 -1
  129. package/src/icons/ArrowUpRight/ArrowUpRight.tsx +1 -1
  130. package/src/icons/BarAndRestaurants/BarAndRestaurants.tsx +2 -2
  131. package/src/icons/Bathroom/Bathroom.tsx +1 -1
  132. package/src/icons/Copy/Copy.tsx +1 -1
  133. package/src/icons/Doc/Doc.tsx +1 -1
  134. package/src/icons/Email/Email.tsx +1 -1
  135. package/src/icons/FilePdf/FilePdf.tsx +1 -1
  136. package/src/icons/Geolocation/Geolocation.tsx +3 -5
  137. package/src/icons/Image/Image.tsx +1 -1
  138. package/src/icons/Menu/Menu.tsx +1 -1
  139. package/src/icons/Minus/Minus.tsx +1 -1
  140. package/src/icons/NoRealtime/NoRealtime.tsx +1 -1
  141. package/src/icons/Plus/Plus.tsx +1 -1
  142. package/src/icons/Police/Police.tsx +3 -3
  143. package/src/icons/Share/Share.tsx +1 -1
  144. package/src/icons/Stack/Stack.tsx +1 -1
  145. package/src/icons/Tracking/Tracking.tsx +29 -0
  146. package/src/icons/Tracking/airport-14-svgrepo-com.svg +41 -0
  147. package/src/icons/Tracking/index.tsx +1 -0
  148. package/src/icons/WaitingAreas/WaitingAreas.tsx +1 -1
  149. package/src/icons/WheelChair/WheelChair.tsx +1 -1
  150. package/src/index.tsx +8 -46
  151. package/src/indexDoc.ts +13 -0
  152. package/src/ui/Button/Button.tsx +57 -0
  153. package/src/ui/Button/index.tsx +1 -0
  154. package/src/ui/IconButton/IconButton.tsx +44 -0
  155. package/src/ui/IconButton/index.tsx +1 -0
  156. package/src/utils/MobilityEvent.ts +4 -3
  157. package/src/utils/applyInitialLayerVisibility.ts +3 -3
  158. package/src/utils/centerOnStation.ts +3 -2
  159. package/src/utils/centerOnVehicle.ts +5 -4
  160. package/src/utils/constants.ts +17 -3
  161. package/src/utils/exportPdf.ts +26 -20
  162. package/src/utils/fullTrajectoryStyle.ts +2 -2
  163. package/src/utils/getAllLayers.ts +4 -3
  164. package/src/utils/getDelayColor.test.ts +1 -0
  165. package/src/utils/getDelayColorForVehicle.test.ts +2 -0
  166. package/src/utils/getDelayString.test.ts +3 -0
  167. package/src/utils/getDelayTextForVehicle.test.ts +4 -0
  168. package/src/utils/getFullTrajectoryAndFit.ts +4 -3
  169. package/src/utils/getHoursAndMinutes.test.ts +1 -0
  170. package/src/utils/getLayersAsFlatArray.ts +2 -2
  171. package/src/utils/getLinkByDevice.ts +1 -1
  172. package/src/utils/getMainColorForVehicle.ts +3 -3
  173. package/src/utils/getPermalinkParameters.ts +2 -2
  174. package/src/utils/getStopStatus.test.ts +2 -1
  175. package/src/utils/getStopStatus.ts +1 -1
  176. package/src/utils/getTextForVehicle.ts +1 -1
  177. package/src/utils/hooks/useDeparture.tsx +6 -5
  178. package/src/utils/hooks/useI18n.tsx +6 -4
  179. package/src/utils/hooks/useInitialLayersVisiblity.tsx +2 -1
  180. package/src/utils/hooks/useLayerConfig.tsx +39 -0
  181. package/src/utils/hooks/useMapContext.tsx +30 -18
  182. package/src/utils/hooks/useRouteStop.tsx +3 -2
  183. package/src/utils/hooks/useRvfContext.tsx +11 -3
  184. package/src/utils/hooks/useStation.tsx +2 -1
  185. package/src/utils/hooks/useUpdatePermalink.tsx +25 -24
  186. package/src/utils/hooks/useZoom.tsx +4 -4
  187. package/src/utils/realtimeRVFStyle.ts +5 -4
  188. package/src/utils/sharingGraphqlUtils.ts +3 -2
  189. package/src/utils/sharingStylesUtils.ts +7 -7
  190. package/src/utils/sharingWFSUtils.ts +9 -15
  191. package/tailwind.config.mjs +1 -0
  192. package/tsconfig.json +1 -1
  193. package/doc/tailwind.config.ts +0 -20
  194. package/src/utils/getFeatureInformationTitle.tsx +0 -54
package/index.html CHANGED
@@ -18,6 +18,7 @@
18
18
  }
19
19
  </script>
20
20
  <script type="module" src="./index.js"></script>
21
+ <script type="module" src="./indexDoc.js"></script>
21
22
  <script src="./docutils.js"></script>
22
23
  <link rel="stylesheet" type="text/css" href="./output.css" />
23
24
  <style>
@@ -32,21 +33,33 @@
32
33
  </head>
33
34
  <body class="p-8">
34
35
  <!-- tailwind hack to add class used in docutils -->
35
- <div class="border px-4 py-2 table-auto w-full flex gap-4 p-2 bg-black text-white hover:bg-gray-700 pt-2 absolute w-full h-full inset-0 p-0" style="display:none;"></div>
36
- <div class="pt-2" style="display:none;"></div>
36
+ <div
37
+ class="absolute inset-0 flex h-full w-full table-auto gap-4 flex-col border bg-black p-0 px-4 py-2 pt-2 text-white hover:bg-gray-700"
38
+ style="display: none"
39
+ ></div>
40
+ <div class="pt-2" style="display: none"></div>
37
41
  <div id="doc" style="display: none" class="mx-auto max-w-3xl space-y-4">
38
42
  <h1 class="flex gap-4"><img src="./Logo.svg">Mobility Web Component</h1>
39
43
  <p>This is a demo of the Mobility Web Component.</p>
40
44
  <h2>Usage example</h2>
41
- <pre id="code" class="bg-slate-800 text-slate-200 p-4 rounded overflow-auto"></pre>
45
+ <pre
46
+ id="code"
47
+ class="overflow-auto rounded bg-slate-800 p-4 text-slate-200"
48
+ ></pre>
42
49
 
43
50
  <geops-mobility
44
- class="h-96 block resize overflow-hidden w-full border rounded-[16px]"></geops-mobility>
51
+ class="block h-96 w-full resize overflow-hidden rounded-2xl border"
52
+ ></geops-mobility>
45
53
 
46
54
  <br />
47
55
  <h2 class="text-xl font-bold">Attributes</h2>
48
56
  <div id="attributes"></div>
49
57
  <h2 class="text-xl font-bold">Events</h2>
58
+ <pre id="code" class="rounded bg-slate-800 p-4 text-slate-200">
59
+ document.getElementById('map').addEventListener('mwc:attribute', (event) => {
60
+ console.log('Display last data received:', event.data);
61
+ });</pre
62
+ >
50
63
  <div id="events"></div>
51
64
  <br />
52
65
  <br />
@@ -63,95 +76,102 @@
63
76
  const pkgSrc = "https://www.unpkg.com/@geops/rvf-mobility-web-component";
64
77
  const wc = document.querySelector("geops-mobility");
65
78
 
66
- const attrs = [
67
- // "apikey",
68
- // "baselayer",
69
- "center",
70
- "details",
71
- "extent",
72
- "geolocation",
73
- "layers",
74
- "layertree",
75
- // "mapsurl",
76
- // "mots",
77
- "notification",
78
- // "notificationat",
79
- // "notificationurl",
80
- // "notificationbeforelayerid",
81
- "realtime",
82
- "share",
83
- // "realtimeUrl",
84
- "search",
85
- // "tenant",
86
- "zoom",
87
- "permalink",
88
- "print",
89
- "toolbar",
90
- "maxextent",
91
- "embed",
92
- "debug",
93
- "fullscreen",
94
- "runs",
95
- ];
79
+ window.addEventListener("load", () => {
96
80
 
97
- const booleanAttrs = [
98
- "details",
99
- "geolocation",
100
- "notification",
101
- "realtime",
102
- "permalink",
103
- "layertree",
104
- "share",
105
- "print",
106
- "toolbar",
107
- "search",
108
- "embed",
109
- "debug",
110
- "fullscreen",
111
- "runs",
112
- ];
113
- const booleanTrueByDefault = [ "details", "print", "share", "layertree", "geolocation", "toolbar", "realtime"];
114
- const reloadAttrs = [ "fullscreen" ]
81
+ // Add special parameters
82
+ window.MobilityMapAttributes.fullscreen = {
83
+ type: "boolean",
84
+ defaultValue: "false",
85
+ description: `Load the page in fullscreen mode.`,
86
+ reload: true,
87
+ };
88
+ window.MobilityMapAttributes.debug = {
89
+ type: "boolean",
90
+ defaultValue: "false",
91
+ description: "Displays debug information for vehicles when true, use only for debugging.",
92
+ reload: true,
93
+ };
115
94
 
116
- const events = [
117
- "singleclick",
118
- "selectedfeature",
119
- // "mwc:attribute",
120
- ];
95
+ /* Attributes */
96
+ const attrs = Object.keys(MobilityMapAttributes);
97
+ const booleanAttrs = Object.entries(MobilityMapAttributes)
98
+ .filter(([, attr]) => attr.type === "boolean")
99
+ .map(([key]) => key);
100
+ const booleanTrueByDefault = booleanAttrs.filter(
101
+ (key) => MobilityMapAttributes[key].defaultValue === "true",
102
+ );
103
+ const reloadAttrs = Object.entries(MobilityMapAttributes)
104
+ .filter(([key, attr]) => !!attr.reload)
105
+ .map(([key]) => key);
121
106
 
122
- const descriptionByAttr = {
123
- extent: "The extent to show when opening the map in EPSG:3857 coordinates, ex: 831634,5933959,940649,6173660. Default is the RVF data extent: 834896.1809495519,6057089.852937808,940649.6972031617,6173660.451962929 . Parameter required if center and zoom are not set.",
124
- maxextent: "The maximum extent of the map in EPSG:3857 coordinates, ex: 831634,5933959,940649,6173660. Default is the RVF data extent: [834896.1809495519,6057089.852937808,940649.6972031617,6173660.451962929 .",
125
- search: "Show/hide the search bar on the map. Default to false.",
126
- permalink: "Add/remove url paremeters to the current window location. These parameters are used to store the current state of the map. They will be used on page load to configure the web-component. Default to false. Parameter required if extent is not set.",
127
- center: "The center of the map in EPSG:3857 coordinates, ex: 831634,5933959. The center must be inside the RVF extent: [834896.1809495519, 6057089.852937808, 940649.6972031617, 6173660.451962929]. Default to null. Parameter required if extent is not set.",
128
- zoom: "The zoom level of the map (between 0 and 20). Default to null. If maxextent paramter is defined some values will not have any effects because the view will be constraint to the maxextent defined. Parameter required if extent is not set.",
129
- print: "Show/hide the print button in the toolbar. Default to true.",
130
- share: "Show/hide the share button in the toolbar. Default to true.",
131
- layertree: "Show/hide the layer tree button in the toolbar. Default to true.",
132
- geolocation: "Show/hide geolocation button on the map. Default to true.",
133
- toolbar: "Show/hide the toolbar on the left. Default to true.",
134
- layers: "A comma separated list of layers: echtzeit,haltestellen,verkaufsstellen,liniennetz,tarifzonen,fahrradfrelo,fahrradandere,cargobikefrelo,cargobikeandere,grueneflotte,naturenergie,autoandere,e-roller,mitfahrpunkt,pois",
135
- details: "Show shared mobility details in the sidebar when we click on an shared mobility feature.",
136
- realtime: "Show/hide the realtime data in the map. Default to true.",
137
- embed: "Activate/deactivate the embedded navigation mode. In this mode zooming with mouse wheel is deactivated and, on touch device, you can only navigate with two finger, a warning message is displayed to warn the user. Default to false.",
138
- debug: "Displays debug information for vehicles when true, use only for debugging. Default to false.",
139
- fullscreen: "Load the component in fullscreen mode. Default to false.",
140
- runs: "Shows the number of trips on a line in the sidebar, use only for debugging. Default to false.",
141
- notification: "Show/hide the notifications (coming from geOps MOCO API) layer on the map. Default to false.",
142
- };
107
+ const descriptionByAttr = Object.entries(MobilityMapAttributes).reduce((acc, [key, attr]) => {
108
+ acc[key] = attr.description;
109
+ return acc;
110
+ }, {});
143
111
 
144
- document.querySelector('#attributes').innerHTML = generateAttributesTable(wc, attrs, booleanAttrs, booleanTrueByDefault, descriptionByAttr, reloadAttrs);
145
- document.querySelector('#events').innerHTML = generateEventsTable(wc, events);
146
- document.querySelector('#code').innerHTML = generateCodeText(wc, attrs, pkgSrc);
147
- wc.addEventListener('mwc:attribute', (event) => {
148
- document.querySelector('#code').innerHTML = generateCodeText(wc, attrs, pkgSrc);
149
- });
150
- wc.addEventListener('mwc:permalink', (event) => {
151
- console.log("Permalink event received", event.data);
152
- window.parent?.postMessage({type:"mwc:permalink", data: event.data}, '*');
112
+ const defaultValueByAttr = Object.entries(MobilityMapAttributes).reduce((acc, [key, attr]) => {
113
+ acc[key] = attr.defaultValue;
114
+ return acc;
115
+ }, {});
116
+
117
+ /* Events */
118
+ const events = [
119
+ "mwc:selectedfeature",
120
+ // "mwc:stopssearchselect",
121
+ // "mwc:attribute",
122
+ // "mwc:singleclick",
123
+ // "mwc:permalink",
124
+ // "mwc:messageready",
125
+ ];
126
+ const descriptionByEvent = {
127
+ "mwc:selectedfeature":
128
+ "Event fired when a feature is selected on the map. The event data contains the selected feature in GeoJSON format.",
129
+ "mwc:stopssearchselect":
130
+ "Only when search attribute is 'true'. Event fired when a stop is selected in the stops search results. The event data contains the selected stop.",
131
+ "mwc:attribute":
132
+ "Event fired when an web component's attribute is changed. The event data contains the list of all attributes and their values.",
133
+ "mwc:permalink":
134
+ "Event fired when the map's state changes. The event data contains the permalink URL search parameters as string.",
135
+ "mwc:messageready":
136
+ "Only if the web-component is embedded in an iframe. Message event fired when the web component is ready to receive messages from parent window. ",
137
+ "mwc:singleclick":
138
+ "Event fired when the map is clicked. The event data contains the map coordinates in EPSG:3857 and the pixel coordinates.",
139
+ };
140
+
141
+ document.querySelector("#attributes").innerHTML =
142
+ generateAttributesTable(
143
+ wc,
144
+ attrs,
145
+ booleanAttrs,
146
+ booleanTrueByDefault,
147
+ descriptionByAttr,
148
+ defaultValueByAttr,
149
+ reloadAttrs,
150
+ );
151
+ document.querySelector("#events").innerHTML = generateEventsTable(
152
+ wc,
153
+ events,
154
+ descriptionByEvent,
155
+ );
156
+ document.querySelector("#code").innerHTML = generateCodeText(
157
+ wc,
158
+ attrs,
159
+ pkgSrc,
160
+ );
161
+ wc.addEventListener("mwc:attribute", (event) => {
162
+ document.querySelector("#code").innerHTML = generateCodeText(
163
+ wc,
164
+ attrs,
165
+ pkgSrc,
166
+ );
167
+ });
168
+ applyPermalinkParameters(wc);
169
+ events.forEach((eventName) => {
170
+ wc.addEventListener(eventName, (event) => {
171
+ console.log(`${eventName} event`, event);
172
+ });
173
+ });
153
174
  });
154
- applyPermalinkParameters(wc);
155
175
  </script>
156
176
  </body>
157
177
  </html>