@teipublisher/pb-components 2.26.1-next.2 → 3.0.0-next-4.1

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 (262) hide show
  1. package/.github/workflows/docker-cypress.yml +54 -0
  2. package/.github/workflows/main.yml +6 -4
  3. package/.github/workflows/node.js.yml +56 -21
  4. package/.github/workflows/release.js.yml +19 -17
  5. package/.releaserc.json +1 -1
  6. package/CHANGELOG.md +351 -9
  7. package/Dockerfile +78 -70
  8. package/README.md +112 -4
  9. package/css/components.css +5 -5
  10. package/css/gridjs/mermaid.min.css +1 -1
  11. package/css/leaflet/Control.Geocoder.css +1 -126
  12. package/css/leaflet/images/layers.png +0 -0
  13. package/css/tify/tify.css +6 -5
  14. package/css/tom-select/tom-select.bootstrap4.min.css +1 -1
  15. package/css/tom-select/tom-select.bootstrap5.min.css +1 -1
  16. package/css/tom-select/tom-select.default.min.css +1 -1
  17. package/css/tom-select/tom-select.default.min.css.map +1 -0
  18. package/css/tom-select/tom-select.min.css +1 -1
  19. package/cypress.config.js +84 -0
  20. package/dist/api.html +1 -1
  21. package/dist/css/design-system.css +607 -0
  22. package/dist/demo/bundle-test.html +4 -3
  23. package/dist/demo/components.css +46 -1
  24. package/dist/demo/design-system.html +710 -0
  25. package/dist/demo/dts-client.html +2 -2
  26. package/dist/demo/pb-autocomplete.html +23 -11
  27. package/dist/demo/pb-autocomplete2.html +66 -55
  28. package/dist/demo/pb-autocomplete3.html +17 -8
  29. package/dist/demo/pb-blacklab-highlight.html +28 -11
  30. package/dist/demo/pb-blacklab-results.html +3 -2
  31. package/dist/demo/pb-browse-docs.html +24 -24
  32. package/dist/demo/pb-browse-docs2.html +3 -3
  33. package/dist/demo/pb-clipboard.html +32 -28
  34. package/dist/demo/pb-code-editor.html +6 -6
  35. package/dist/demo/pb-code-highlight.html +63 -63
  36. package/dist/demo/pb-codepen.html +1 -1
  37. package/dist/demo/pb-collapse.html +1 -1
  38. package/dist/demo/pb-collapse2.html +2 -2
  39. package/dist/demo/pb-combo-box.html +135 -130
  40. package/dist/demo/pb-custom-form.html +64 -55
  41. package/dist/demo/pb-dialog.html +12 -6
  42. package/dist/demo/pb-document.html +1 -1
  43. package/dist/demo/pb-download.html +68 -59
  44. package/dist/demo/pb-drawer.html +67 -46
  45. package/dist/demo/pb-drawer2.html +65 -58
  46. package/dist/demo/pb-edit-app.html +2 -2
  47. package/dist/demo/pb-edit-xml.html +1 -1
  48. package/dist/demo/pb-facsimile-2.html +26 -11
  49. package/dist/demo/pb-facsimile-3.html +25 -10
  50. package/dist/demo/pb-facsimile-dedup-test-2.html +48 -0
  51. package/dist/demo/pb-facsimile-dedup-test.html +48 -0
  52. package/dist/demo/pb-facsimile.html +4 -4
  53. package/dist/demo/pb-formula.html +1 -1
  54. package/dist/demo/pb-grid.html +22 -8
  55. package/dist/demo/pb-highlight.html +2 -2
  56. package/dist/demo/pb-i18n-simple.html +1 -0
  57. package/dist/demo/pb-i18n.html +15 -5
  58. package/dist/demo/pb-image-strip-standalone.html +2 -2
  59. package/dist/demo/pb-image-strip-view.html +2 -2
  60. package/dist/demo/pb-leaflet-map.html +3 -3
  61. package/dist/demo/pb-leaflet-map2.html +2 -2
  62. package/dist/demo/pb-leaflet-map3.html +3 -3
  63. package/dist/demo/pb-link.html +1 -1
  64. package/dist/demo/pb-load.html +2 -6
  65. package/dist/demo/pb-login.html +1 -3
  66. package/dist/demo/pb-manage-odds.html +9 -4
  67. package/dist/demo/pb-markdown.html +1 -1
  68. package/dist/demo/pb-media-query.html +2 -2
  69. package/dist/demo/pb-mei.html +2 -2
  70. package/dist/demo/pb-mei2.html +2 -2
  71. package/dist/demo/pb-message.html +2 -3
  72. package/dist/demo/pb-odd-editor.html +54 -52
  73. package/dist/demo/pb-page-header.html +27 -0
  74. package/dist/demo/pb-popover.html +1 -1
  75. package/dist/demo/pb-print-preview.html +2 -2
  76. package/dist/demo/pb-progress.html +4 -4
  77. package/dist/demo/pb-repeat.html +32 -36
  78. package/dist/demo/pb-search.html +16 -5
  79. package/dist/demo/pb-search2.html +4 -4
  80. package/dist/demo/pb-search3.html +3 -3
  81. package/dist/demo/pb-search4.html +3 -3
  82. package/dist/demo/pb-select-feature.html +4 -4
  83. package/dist/demo/pb-select-feature2.html +4 -4
  84. package/dist/demo/pb-select-feature3.html +2 -2
  85. package/dist/demo/pb-select-i18n.html +58 -53
  86. package/dist/demo/pb-select-odd.html +1 -1
  87. package/dist/demo/pb-select.html +190 -75
  88. package/dist/demo/pb-select2.html +91 -37
  89. package/dist/demo/pb-select3.html +109 -41
  90. package/dist/demo/pb-svg.html +1 -1
  91. package/dist/demo/pb-table-grid.html +26 -15
  92. package/dist/demo/pb-tabs.html +15 -7
  93. package/dist/demo/pb-tify.html +7 -7
  94. package/dist/demo/pb-timeline.html +1 -1
  95. package/dist/demo/pb-timeline2.html +1 -1
  96. package/dist/demo/pb-toggle-feature.html +26 -23
  97. package/dist/demo/pb-toggle-feature2.html +4 -4
  98. package/dist/demo/pb-toggle-feature3.html +2 -2
  99. package/dist/demo/pb-toggle-feature4.html +56 -54
  100. package/dist/demo/pb-version.html +2 -2
  101. package/dist/demo/pb-view.html +78 -40
  102. package/dist/demo/pb-view2.html +69 -46
  103. package/dist/demo/pb-view3.html +53 -48
  104. package/dist/demo/pb-view4.html +70 -49
  105. package/dist/demo/pb-zoom.html +2 -2
  106. package/dist/{es-global-bridge-d8ce175d.js → es-global-bridge-D8ZcUcx_.js} +0 -4
  107. package/dist/focus-mixin-VCsFap6b.js +768 -0
  108. package/dist/images/icons.svg +217 -0
  109. package/dist/jinn-codemirror-DETLdm08.js +1 -0
  110. package/dist/lib/openseadragon.min.js +80 -0
  111. package/dist/lib/openseadragon.min.js.map +1 -0
  112. package/dist/pb-code-editor.js +25 -20
  113. package/dist/pb-component-docs.js +414 -3225
  114. package/dist/pb-components-bundle.js +3046 -4402
  115. package/dist/pb-dialog-tklYGWfc.js +121 -0
  116. package/dist/pb-edit-app.js +208 -107
  117. package/dist/pb-elements.json +716 -249
  118. package/dist/pb-facsimile.js +46 -0
  119. package/dist/pb-i18n-C0NDma4h.js +1 -0
  120. package/dist/pb-leaflet-map.js +23 -23
  121. package/dist/pb-mei.js +152 -134
  122. package/dist/pb-mixin-DHoWQheB.js +1 -0
  123. package/dist/pb-odd-editor.js +1671 -1231
  124. package/dist/pb-tify.js +1 -27
  125. package/dist/unsafe-html-D5VGo9Oq.js +1 -0
  126. package/dist/urls-BEONu_g4.js +1 -0
  127. package/eslint.config.mjs +92 -0
  128. package/gh-pages.js +5 -3
  129. package/i18n/common/en.json +6 -0
  130. package/i18n/common/pl.json +2 -2
  131. package/images/icons.svg +217 -0
  132. package/index.html +0 -5
  133. package/lib/leaflet-src.js.map +1 -0
  134. package/lib/leaflet.markercluster-src.js.map +1 -0
  135. package/lib/openseadragon.min.js +6 -6
  136. package/package.json +56 -81
  137. package/pb-elements.json +716 -249
  138. package/rollup.config.mjs +312 -0
  139. package/src/assets/components.css +5 -5
  140. package/src/assets/design-system.css +607 -0
  141. package/src/authority/airtable.js +20 -21
  142. package/src/authority/anton.js +129 -129
  143. package/src/authority/custom.js +70 -27
  144. package/src/authority/geonames.js +38 -32
  145. package/src/authority/gnd.js +50 -42
  146. package/src/authority/kbga.js +136 -134
  147. package/src/authority/metagrid.js +44 -46
  148. package/src/authority/reconciliation.js +66 -68
  149. package/src/authority/registry.js +4 -4
  150. package/src/docs/demo-utils.js +91 -0
  151. package/src/docs/pb-component-docs.js +287 -147
  152. package/src/docs/pb-component-view.js +380 -273
  153. package/src/docs/pb-components-list.js +115 -51
  154. package/src/docs/pb-demo-snippet.js +199 -174
  155. package/src/dts-client.js +306 -303
  156. package/src/dts-select-endpoint.js +125 -85
  157. package/src/parse-date-service.js +184 -135
  158. package/src/pb-ajax.js +175 -173
  159. package/src/pb-authority-lookup.js +198 -158
  160. package/src/pb-autocomplete.js +731 -313
  161. package/src/pb-blacklab-highlight.js +266 -260
  162. package/src/pb-blacklab-results.js +230 -225
  163. package/src/pb-browse-docs.js +601 -484
  164. package/src/pb-browse.js +68 -65
  165. package/src/pb-clipboard.js +97 -76
  166. package/src/pb-code-editor.js +111 -103
  167. package/src/pb-code-highlight.js +234 -204
  168. package/src/pb-codepen.js +81 -73
  169. package/src/pb-collapse.js +265 -152
  170. package/src/pb-combo-box.js +191 -191
  171. package/src/pb-components-bundle.js +1 -7
  172. package/src/pb-components.js +2 -6
  173. package/src/pb-custom-form.js +230 -141
  174. package/src/pb-dialog.js +99 -63
  175. package/src/pb-document.js +118 -91
  176. package/src/pb-download.js +214 -198
  177. package/src/pb-drawer.js +146 -149
  178. package/src/pb-edit-app.js +471 -240
  179. package/src/pb-edit-xml.js +101 -98
  180. package/src/pb-events.js +126 -107
  181. package/src/pb-facs-link.js +130 -101
  182. package/src/pb-facsimile.js +494 -410
  183. package/src/pb-fetch.js +389 -0
  184. package/src/pb-formula.js +152 -154
  185. package/src/pb-geolocation.js +130 -132
  186. package/src/pb-grid-action.js +59 -56
  187. package/src/pb-grid.js +388 -228
  188. package/src/pb-highlight.js +142 -142
  189. package/src/pb-hotkeys.js +40 -42
  190. package/src/pb-i18n.js +115 -127
  191. package/src/pb-icon-button.js +108 -0
  192. package/src/pb-icon.js +283 -0
  193. package/src/pb-image-strip.js +85 -79
  194. package/src/pb-lang.js +142 -57
  195. package/src/pb-leaflet-map.js +551 -483
  196. package/src/pb-link.js +132 -126
  197. package/src/pb-load.js +495 -428
  198. package/src/pb-login.js +303 -248
  199. package/src/pb-manage-odds.js +384 -338
  200. package/src/pb-map-icon.js +90 -90
  201. package/src/pb-map-layer.js +86 -86
  202. package/src/pb-markdown.js +107 -110
  203. package/src/pb-media-query.js +75 -73
  204. package/src/pb-mei.js +523 -303
  205. package/src/pb-message.js +144 -98
  206. package/src/pb-mixin.js +268 -265
  207. package/src/pb-navigation.js +83 -96
  208. package/src/pb-observable.js +39 -39
  209. package/src/pb-odd-editor.js +1209 -948
  210. package/src/pb-odd-elementspec-editor.js +375 -310
  211. package/src/pb-odd-model-editor.js +1189 -941
  212. package/src/pb-odd-parameter-editor.js +269 -170
  213. package/src/pb-odd-rendition-editor.js +184 -131
  214. package/src/pb-page.js +451 -422
  215. package/src/pb-paginate.js +260 -178
  216. package/src/pb-panel.js +217 -183
  217. package/src/pb-popover-themes.js +16 -9
  218. package/src/pb-popover.js +297 -288
  219. package/src/pb-print-preview.js +128 -128
  220. package/src/pb-progress.js +52 -52
  221. package/src/pb-repeat.js +141 -108
  222. package/src/pb-restricted.js +85 -78
  223. package/src/pb-search.js +258 -230
  224. package/src/pb-select-feature.js +210 -126
  225. package/src/pb-select-odd.js +184 -118
  226. package/src/pb-select-template.js +113 -78
  227. package/src/pb-select.js +330 -229
  228. package/src/pb-split-list.js +181 -176
  229. package/src/pb-svg.js +81 -80
  230. package/src/pb-table-column.js +55 -55
  231. package/src/pb-table-grid.js +334 -205
  232. package/src/pb-tabs.js +238 -61
  233. package/src/pb-tify.js +3331 -126
  234. package/src/pb-timeline.js +394 -255
  235. package/src/pb-toggle-feature.js +196 -188
  236. package/src/pb-upload.js +201 -176
  237. package/src/pb-version.js +22 -34
  238. package/src/pb-view-annotate.js +138 -102
  239. package/src/pb-view.js +1722 -1272
  240. package/src/pb-zoom.js +144 -46
  241. package/src/search-result-service.js +256 -223
  242. package/src/seed-element.js +14 -22
  243. package/src/settings.js +4 -4
  244. package/src/theming.js +98 -91
  245. package/src/urls.js +403 -289
  246. package/src/utils.js +53 -51
  247. package/vite.config.js +86 -0
  248. package/css/pb-styles.css +0 -51
  249. package/dist/iron-form-3b8dcaa7.js +0 -210
  250. package/dist/jinn-codemirror-da0e2d1f.js +0 -1
  251. package/dist/paper-checkbox-515a5284.js +0 -1597
  252. package/dist/paper-icon-button-b1d31571.js +0 -398
  253. package/dist/paper-listbox-a3b7175c.js +0 -1265
  254. package/dist/pb-i18n-0611135a.js +0 -1
  255. package/dist/pb-mixin-b1caa22e.js +0 -158
  256. package/dist/polymer-hack.js +0 -1
  257. package/dist/vaadin-element-mixin-6e4cee3a.js +0 -527
  258. package/lib/Control.Geocoder.min.js +0 -2
  259. package/lib/Control.Geocoder.min.js.map +0 -1
  260. package/src/assets/pb-styles.css +0 -51
  261. package/src/pb-light-dom.js +0 -40
  262. package/src/polymer-hack.js +0 -6
package/dist/demo/pb-select.html CHANGED
@@ -1,78 +1,193 @@
1
- <html>
2
- <head>
3
- <title>Using pb-select</title>
4
- <link rel="stylesheet" href="demo.css">
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Using pb-select</title>
6
+ <link rel="stylesheet" href="demo.css">
7
+ <script type="module" src="../pb-components-bundle.js"></script>
8
+ </head>
9
+ <body>
10
+ <h1>Using pb-select</h1>
11
+ <pb-demo-snippet>
12
+ <template>
5
13
  <style>
6
- pb-autocomplete {
7
- margin-bottom: 20px;
8
- }
14
+ :host {
15
+ font-family: var(--pb-font-family, 'Roboto', sans-serif);
16
+ color: #303030;
17
+ }
18
+
19
+ .demo {
20
+ max-width: 720px;
21
+ margin: 0 auto;
22
+ padding: 24px;
23
+ display: flex;
24
+ flex-direction: column;
25
+ gap: 24px;
26
+ background: #fff;
27
+ border-radius: 10px;
28
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
29
+ }
30
+
31
+ .demo__section {
32
+ display: flex;
33
+ flex-direction: column;
34
+ gap: 16px;
35
+ }
36
+
37
+ .demo__actions {
38
+ display: flex;
39
+ flex-wrap: wrap;
40
+ gap: 12px;
41
+ }
42
+
43
+ .demo__output {
44
+ font-family: 'Roboto Mono', monospace;
45
+ background: #f5f5f5;
46
+ padding: 12px;
47
+ border-radius: 6px;
48
+ min-height: 1.75rem;
49
+ }
50
+
51
+ pb-select[multi] {
52
+ max-height: 280px;
53
+ }
9
54
  </style>
10
- <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script><script type="module" src="../pb-components-bundle.js"></script>
11
- </head>
12
- <body>
13
- <pb-demo-snippet>
14
- <template>
15
- <pb-page locales="../i18n/{{ns}}/{{lng}}.json" endpoint="https://teipublisher.com/exist/apps/tei-publisher" api-version="1.0.0">
16
- <h2>Using pb-select with a standard HTML form</h2>
17
- <form id="form" action="">
18
- <p>Single item selection:</p>
19
- <pb-select label="language" name="lang1" value="es">
20
- <paper-item value="bg">Български</paper-item>
21
- <paper-item value="cs">český</paper-item>
22
- <paper-item value="de">Deutsch</paper-item>
23
- <paper-item value="en">English</paper-item>
24
- <paper-item value="es">Español</paper-item>
25
- <paper-item value="el">ελληνικά</paper-item>
26
- <paper-item value="fr">Français</paper-item>
27
- <paper-item value="it">Italiano</paper-item>
28
- <paper-item value="ka">ქართული</paper-item>
29
- <paper-item value="nl">Nederlands</paper-item>
30
- <paper-item value="no">Norsk</paper-item>
31
- <paper-item value="pl">Polski</paper-item>
32
- <paper-item value="pt">Português</paper-item>
33
- <paper-item value="ro">Română</paper-item>
34
- <paper-item value="ru">русский</paper-item>
35
- <paper-item value="sl">Slovenščina</paper-item>
36
- <paper-item value="sv">Svenska</paper-item>
37
- <paper-item value="tr">Türkçe</paper-item>
38
- <paper-item value="uk">Українська</paper-item>
39
- </pb-select>
40
- <p>with option "multi" as scrolling list</p>
41
- <pb-select label="language" name="lang2" values='["fr", "de"]' multi style="height: 300px;">
42
- <paper-item value="bg">Български</paper-item>
43
- <paper-item value="cs">český</paper-item>
44
- <paper-item value="de">Deutsch</paper-item>
45
- <paper-item value="en">English</paper-item>
46
- <paper-item value="es">Español</paper-item>
47
- <paper-item value="el">ελληνικά</paper-item>
48
- <paper-item value="fr">Français</paper-item>
49
- <paper-item value="it">Italiano</paper-item>
50
- <paper-item value="ka">ქართული</paper-item>
51
- <paper-item value="nl">Nederlands</paper-item>
52
- <paper-item value="no">Norsk</paper-item>
53
- <paper-item value="pl">Polski</paper-item>
54
- <paper-item value="pt">Português</paper-item>
55
- <paper-item value="ro">Română</paper-item>
56
- <paper-item value="ru">русский</paper-item>
57
- <paper-item value="sl">Slovenščina</paper-item>
58
- <paper-item value="sv">Svenska</paper-item>
59
- <paper-item value="tr">Türkçe</paper-item>
60
- <paper-item value="uk">Українська</paper-item>
61
- </pb-select>
62
- <button type="submit"><paper-button>Submit</paper-button></button>
63
- </form>
64
- <p>Parameters which would be sent: <code id="output"></code></p>
65
- </pb-page>
66
- <script>
67
- const form = document.getElementById('form');
68
- form.addEventListener('submit', (ev) => {
69
- ev.preventDefault();
70
- const data = new URLSearchParams(new FormData(form)).toString();
71
- document.getElementById('output').innerHTML = data;
72
- });
73
- </script>
74
- </template>
75
- </pb-demo-snippet>
76
-
77
- </body>
55
+
56
+ <pb-page
57
+ id="pb-select-demo-page"
58
+ locales="../i18n/{{ns}}/{{lng}}.json"
59
+ endpoint="https://teipublisher.com/exist/apps/tei-publisher" api-version="1.0.0"
60
+ api-version="1.0.0"
61
+ >
62
+ <section class="demo" aria-labelledby="pb-select-demo-title">
63
+ <header>
64
+ <h2 id="pb-select-demo-title">Use pb-select in a native form</h2>
65
+ <p>Select single or multiple options and inspect the serialized form output.</p>
66
+ </header>
67
+
68
+ <form id="select-demo-form" class="demo__section" action="">
69
+ <section class="demo__section">
70
+ <h3>Single selection</h3>
71
+ <pb-select label="Language" name="lang1" value="es">
72
+ <span value="bg">Български</span>
73
+ <span value="cs">Česky</span>
74
+ <span value="de">Deutsch</span>
75
+ <span value="en">English</span>
76
+ <span value="es">Español</span>
77
+ <span value="el">Ελληνικά</span>
78
+ <span value="fr">Français</span>
79
+ <span value="it">Italiano</span>
80
+ <span value="ka">ქართული</span>
81
+ <span value="nl">Nederlands</span>
82
+ <span value="no">Norsk</span>
83
+ <span value="pl">Polski</span>
84
+ <span value="pt">Português</span>
85
+ <span value="ro">Română</span>
86
+ <span value="ru">Русский</span>
87
+ <span value="sl">Slovenščina</span>
88
+ <span value="sv">Svenska</span>
89
+ <span value="tr">Türkçe</span>
90
+ <span value="uk">Українська</span>
91
+ </pb-select>
92
+ </section>
93
+
94
+ <section class="demo__section">
95
+ <h3>Multiple selection</h3>
96
+ <p>Select several languages at once. Already selected values stay checked.</p>
97
+ <pb-select label="Languages" name="lang2" multi values='["fr","de"]'>
98
+ <span value="bg">Български</span>
99
+ <span value="cs">Česky</span>
100
+ <span value="de">Deutsch</span>
101
+ <span value="en">English</span>
102
+ <span value="es">Español</span>
103
+ <span value="el">Ελληνικά</span>
104
+ <span value="fr">Français</span>
105
+ <span value="it">Italiano</span>
106
+ <span value="ka">ქართული</span>
107
+ <span value="nl">Nederlands</span>
108
+ <span value="no">Norsk</span>
109
+ <span value="pl">Polski</span>
110
+ <span value="pt">Português</span>
111
+ <span value="ro">Română</span>
112
+ <span value="ru">Русский</span>
113
+ <span value="sl">Slovenščina</span>
114
+ <span value="sv">Svenska</span>
115
+ <span value="tr">Türkçe</span>
116
+ <span value="uk">Українська</span>
117
+ </pb-select>
118
+ </section>
119
+
120
+ <section class="demo__section">
121
+ <h3>Options loaded remotely</h3>
122
+ <p>pb-select can fetch choices from a JSON endpoint. This example loads from <code>select.json</code>.</p>
123
+ <pb-select label="Remote language" name="lang3" value="en" source="./select.json">
124
+ <span value="" hidden>Loading…</span>
125
+ </pb-select>
126
+ </section>
127
+
128
+ <div class="demo__actions">
129
+ <button type="submit" class="pb-button pb-button--contained">Submit</button>
130
+ <button type="button" class="pb-button pb-button--outlined" id="reset-demo">Reset selections</button>
131
+ </div>
132
+ </form>
133
+
134
+ <section class="demo__section">
135
+ <h3>Serialized form output</h3>
136
+ <pre class="demo__output" id="select-demo-output"></pre>
137
+ </section>
138
+ </section>
139
+ </pb-page>
140
+ </template>
141
+ </pb-demo-snippet>
142
+
143
+ <script type="module">
144
+ import { ready, stampIfNeeded, firePageReady, syncPbSelect, wireFormOutput } from '../src/docs/demo-utils.js'
145
+
146
+ const initialState = Object.freeze({
147
+ lang1: 'es',
148
+ lang2: ['fr', 'de'],
149
+ lang3: 'en'
150
+ })
151
+
152
+ async function hydrateDemo () {
153
+ await ready(['pb-demo-snippet', 'pb-select'])
154
+ const snippet = document.querySelector('pb-demo-snippet')
155
+ stampIfNeeded(snippet)
156
+
157
+ const form = snippet.querySelector('#select-demo-form')
158
+ const output = snippet.querySelector('#select-demo-output')
159
+ const reset = snippet.querySelector('#reset-demo')
160
+ if (!form || !output) return
161
+
162
+ const single = form.querySelector('pb-select[name="lang1"]')
163
+ const multi = form.querySelector('pb-select[name="lang2"]')
164
+ const remote = form.querySelector('pb-select[name="lang3"]')
165
+
166
+ if (single) single.value = initialState.lang1
167
+ if (multi) multi.values = [...initialState.lang2]
168
+ if (remote) remote.value = initialState.lang3
169
+
170
+ await Promise.all([single, multi, remote].filter(Boolean).map(syncPbSelect))
171
+
172
+ const render = wireFormOutput(form, output)
173
+ render()
174
+
175
+ reset?.addEventListener('click', async () => {
176
+ if (single) single.value = initialState.lang1
177
+ if (multi) multi.values = [...initialState.lang2]
178
+ if (remote) remote.value = initialState.lang3
179
+ await Promise.all([single, multi, remote].filter(Boolean).map(syncPbSelect))
180
+ render()
181
+ })
182
+
183
+ firePageReady({ endpoint: '.', apiVersion: '1.0.0' })
184
+ }
185
+
186
+ if (document.readyState === 'loading') {
187
+ document.addEventListener('DOMContentLoaded', hydrateDemo)
188
+ } else {
189
+ hydrateDemo()
190
+ }
191
+ </script>
192
+ </body>
78
193
  </html>
package/dist/demo/pb-select2.html CHANGED
@@ -1,39 +1,93 @@
1
- <html>
2
- <head>
3
- <title>Using pb-select</title>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Using pb-select (remote list)</title>
6
+ <link rel="stylesheet" href="demo.css">
7
+ <script type="module" src="../src/docs/pb-demo-snippet.js"></script>
8
+ <script type="module" src="../src/pb-page.js"></script>
9
+ <script type="module" src="../src/pb-select.js"></script>
10
+ <script type="module" src="../src/pb-lang.js"></script>
11
+ </head>
12
+ <body>
13
+ <h1>Using pb-select with remote data</h1>
14
+ <pb-demo-snippet>
15
+ <template>
4
16
  <style>
5
- pb-autocomplete {
6
- margin-bottom: 20px;
7
- }
17
+ :host {
18
+ font-family: var(--pb-font-family, 'Roboto', sans-serif);
19
+ color: #303030;
20
+ }
21
+
22
+ .demo {
23
+ max-width: 560px;
24
+ margin: 0 auto;
25
+ padding: 24px;
26
+ display: flex;
27
+ flex-direction: column;
28
+ gap: 20px;
29
+ background: #fff;
30
+ border-radius: 10px;
31
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
32
+ }
33
+
34
+ .demo__output {
35
+ font-family: 'Roboto Mono', monospace;
36
+ background: #f5f5f5;
37
+ padding: 12px;
38
+ border-radius: 6px;
39
+ min-height: 1.5rem;
40
+ }
8
41
  </style>
9
- <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script><script type="module" src="../pb-components-bundle.js"></script>
10
- </head>
11
- <body>
12
- <h1>Using pb-select with a remote data source</h1>
13
-
14
- <pb-demo-snippet>
15
- <template>
16
- <p>Reads the items to be shown from a JSON file:</p>
17
- <pb-page locales="../i18n/{{ns}}/{{lng}}.json" endpoint="https://teipublisher.com/exist/apps/tei-publisher" api-version="1.0.0">
18
- <iron-form id="form">
19
- <form id="form" action="">
20
- <pb-select label="language" name="lang" value="pl" source="./select.json">
21
- </pb-select>
22
- <button type="submit"><paper-button>Submit</paper-button></button>
23
- </form>
24
- </iron-form>
25
- <p>Parameters which would be sent: <code id="output"></code></p>
26
- </pb-page>
27
- <script>
28
- const form = document.getElementById('form');
29
- form.addEventListener('iron-form-submit', (ev) => {
30
- ev.preventDefault();
31
- const data = JSON.stringify(form.serializeForm());
32
- document.getElementById('output').innerHTML = data;
33
- });
34
- </script>
35
- </template>
36
- </pb-demo-snippet>
37
-
38
- </body>
39
- </html>
42
+
43
+ <pb-page id="pb-select2-page" endpoint="https://teipublisher.com/exist/apps/tei-publisher" api-version="1.0.0" api-version="1.0.0">
44
+ <section class="demo">
45
+ <form id="select2-form" action="">
46
+ <pb-select
47
+ label="Language"
48
+ name="lang"
49
+ value="pl"
50
+ source="./select.json"
51
+ >
52
+ <span value="" hidden>Loading…</span>
53
+ </pb-select>
54
+ <button type="submit" class="pb-button pb-button--contained">Submit</button>
55
+ </form>
56
+ <pre id="select2-output" class="demo__output"></pre>
57
+ </section>
58
+ </pb-page>
59
+ </template>
60
+ </pb-demo-snippet>
61
+
62
+ <script type="module">
63
+ import { ready, stampIfNeeded, firePageReady, syncPbSelect, wireFormOutput } from '../src/docs/demo-utils.js'
64
+
65
+ const initialState = Object.freeze({ lang: 'pl' })
66
+
67
+ async function hydrate () {
68
+ await ready(['pb-demo-snippet', 'pb-select'])
69
+ const snippet = document.querySelector('pb-demo-snippet')
70
+ stampIfNeeded(snippet)
71
+
72
+ const form = document.querySelector('#select2-form')
73
+ const output = document.querySelector('#select2-output')
74
+ const control = form?.querySelector('pb-select[name="lang"]')
75
+ if (!form || !output || !control) return
76
+
77
+ control.value = initialState.lang
78
+ await syncPbSelect(control)
79
+
80
+ const render = wireFormOutput(form, output)
81
+ render()
82
+
83
+ firePageReady({ endpoint: '.', apiVersion: '1.0.0' })
84
+ }
85
+
86
+ if (document.readyState === 'loading') {
87
+ document.addEventListener('DOMContentLoaded', hydrate)
88
+ } else {
89
+ hydrate()
90
+ }
91
+ </script>
92
+ </body>
93
+ </html>
package/dist/demo/pb-select3.html CHANGED
@@ -1,43 +1,111 @@
1
- <html>
2
- <head>
3
- <title>Using pb-select</title>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Using pb-select with subform</title>
6
+ <link rel="stylesheet" href="demo.css">
7
+ <script type="module" src="../src/docs/pb-demo-snippet.js"></script>
8
+ <script type="module" src="../src/pb-page.js"></script>
9
+ <script type="module" src="../src/pb-select.js"></script>
10
+ <script type="module" src="../src/pb-lang.js"></script>
11
+ </head>
12
+ <body>
13
+ <h1>Using pb-select with additional form controls</h1>
14
+ <pb-demo-snippet>
15
+ <template>
4
16
  <style>
5
- pb-autocomplete {
6
- margin-bottom: 20px;
7
- }
17
+ :host {
18
+ font-family: var(--pb-font-family, 'Roboto', sans-serif);
19
+ color: #303030;
20
+ }
21
+
22
+ .demo {
23
+ max-width: 640px;
24
+ margin: 0 auto;
25
+ padding: 24px;
26
+ display: flex;
27
+ flex-direction: column;
28
+ gap: 20px;
29
+ background: #fff;
30
+ border-radius: 10px;
31
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
32
+ }
33
+
34
+ .demo__subform {
35
+ display: flex;
36
+ gap: 12px;
37
+ align-items: center;
38
+ }
39
+
40
+ .demo__output {
41
+ font-family: 'Roboto Mono', monospace;
42
+ background: #f5f5f5;
43
+ padding: 12px;
44
+ border-radius: 6px;
45
+ min-height: 1.5rem;
46
+ }
8
47
  </style>
9
- <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script><script type="module" src="../pb-components-bundle.js"></script>
10
- </head>
11
- <body>
12
- <h1>Using pb-select with a remote data source</h1>
13
-
14
- <pb-demo-snippet>
15
- <template>
16
- <p>Reads the items to be shown from a JSON file:</p>
17
- <pb-page locales="../i18n/{{ns}}/{{lng}}.json" endpoint="https://teipublisher.com/exist/apps/tei-publisher" api-version="1.0.0">
18
- <iron-form id="form">
19
- <form action="">
20
- <pb-select label="Title" name="title" source="api/search/autocomplete?query=s">
21
- <pb-select label="Field" name="field" slot="subform" value="title">
22
- <paper-item value="title">Title</paper-item>
23
- <paper-item value="author">Author</paper-item>
24
- </pb-select>
25
- </pb-select>
26
- <button type="submit"><paper-button>Submit</paper-button></button>
27
- </form>
28
- </iron-form>
29
- <p>Parameters which would be sent: <code id="output"></code></p>
30
- </pb-page>
31
- <script>
32
- const form = document.getElementById('form');
33
- form.addEventListener('iron-form-submit', (ev) => {
34
- ev.preventDefault();
35
- const data = JSON.stringify(form.serializeForm());
36
- document.getElementById('output').innerHTML = data;
37
- });
38
- </script>
39
- </template>
40
- </pb-demo-snippet>
41
-
42
- </body>
43
- </html>
48
+
49
+ <pb-page id="pb-select3-page" endpoint="https://teipublisher.com/exist/apps/tei-publisher" api-version="1.0.0" api-version="1.0.0">
50
+ <section class="demo">
51
+ <form id="select3-form" action="">
52
+ <pb-select
53
+ label="Result"
54
+ name="result"
55
+ value="en"
56
+ source="./select.json"
57
+ >
58
+ <span value="" hidden>Loading…</span>
59
+ <div slot="subform" class="demo__subform">
60
+ <label for="select3-field">Field</label>
61
+ <select id="select3-field" name="field">
62
+ <option value="title" selected>Title</option>
63
+ <option value="author">Author</option>
64
+ </select>
65
+ </div>
66
+ </pb-select>
67
+ <button type="submit" class="pb-button pb-button--contained">Submit</button>
68
+ </form>
69
+ <pre id="select3-output" class="demo__output"></pre>
70
+ </section>
71
+ </pb-page>
72
+ </template>
73
+ </pb-demo-snippet>
74
+
75
+ <script type="module">
76
+ import { ready, stampIfNeeded, firePageReady, syncPbSelect, wireFormOutput } from '../src/docs/demo-utils.js'
77
+
78
+ const initialState = Object.freeze({ result: 'en', field: 'title' })
79
+
80
+ async function hydrate () {
81
+ await ready(['pb-demo-snippet', 'pb-select'])
82
+ const snippet = document.querySelector('pb-demo-snippet')
83
+ stampIfNeeded(snippet)
84
+
85
+ const form = document.querySelector('#select3-form')
86
+ const output = document.querySelector('#select3-output')
87
+ const select = form?.querySelector('pb-select[name="result"]')
88
+ const field = form?.querySelector('select[name="field"]')
89
+ if (!form || !output || !select || !field) return
90
+
91
+ select.value = initialState.result
92
+ field.value = initialState.field
93
+ await syncPbSelect(select)
94
+
95
+ const render = wireFormOutput(form, output)
96
+ render()
97
+
98
+ field.addEventListener('change', render)
99
+ select.addEventListener('change', render)
100
+
101
+ firePageReady({ endpoint: '.', apiVersion: '1.0.0' })
102
+ }
103
+
104
+ if (document.readyState === 'loading') {
105
+ document.addEventListener('DOMContentLoaded', hydrate)
106
+ } else {
107
+ hydrate()
108
+ }
109
+ </script>
110
+ </body>
111
+ </html>
package/dist/demo/pb-svg.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes" />
6
6
 
7
7
  <title>pb-svg Demo</title>
8
- <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script><script type="module" src="../pb-components-bundle.js"></script>
8
+ <script type="module" src="../pb-components-bundle.js"></script>
9
9
  </head>
10
10
 
11
11
  <body>
package/dist/demo/pb-table-grid.html CHANGED
@@ -1,17 +1,28 @@
1
1
  <html>
2
- <head>
3
- <title>Using pb-table-grid</title>
4
- <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script><script type="module" src="../pb-components-bundle.js"></script>
5
- </head>
6
- <body>
7
- <h1>Using pb-table-grid</h1>
8
-
9
- <pb-page theme="components.css" url-path="query" api-version="1.0.0">
10
- <pb-table-grid class="table-grid" source="./people.json" css-path="../css/gridjs" resizable>
11
- <pb-table-column label="Name" property="name"></pb-table-column>
12
- <pb-table-column label="Born" property="birth"></pb-table-column>
13
- <pb-table-column label="Died" property="death"></pb-table-column>
14
- </pb-table-grid>
2
+ <head>
3
+ <meta charset="utf-8" />
4
+ <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes" />
5
+ <title>Using pb-table-grid</title>
6
+ <script type="module" src="../pb-components-bundle.js"></script>
7
+ </head>
8
+ <body>
9
+ <pb-demo-snippet>
10
+ <template>
11
+ <pb-page
12
+ theme="components.css"
13
+ url-path="query"
14
+ api-version="1.0.0"
15
+ require-language="require-language"
16
+ locales="../i18n/{{ns}}/{{lng}}.json"
17
+ endpoint="https://teipublisher.com/exist/apps/tei-publisher" api-version="1.0.0"
18
+ >
19
+ <pb-table-grid class="table-grid" source="./people.json" css-path="../css/gridjs" resizable>
20
+ <pb-table-column label="Name" property="name"></pb-table-column>
21
+ <pb-table-column label="Born" property="birth"></pb-table-column>
22
+ <pb-table-column label="Died" property="death"></pb-table-column>
23
+ </pb-table-grid>
15
24
  </pb-page>
16
- </body>
17
- </html>
25
+ </template>
26
+ </pb-demo-snippet>
27
+ </body>
28
+ </html>