@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
@@ -0,0 +1,27 @@
1
+ <html>
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>pb-page with app-header (no _notifyLayoutChanged)</title>
6
+ <!-- Minimal scripts for local dev demos -->
7
+ <script type="module" src="../src/pb-page.js"></script>
8
+ <style>
9
+ body { font-family: sans-serif; }
10
+ app-header { display: block; height: 48px; background: #eee; }
11
+ main { padding: 16px; }
12
+ </style>
13
+ </head>
14
+ <body>
15
+ <!-- app-header is a plain element without private methods; pb-page must not crash -->
16
+ <pb-page endpoint="https://teipublisher.com/exist/apps/tei-publisher" api-version="1.0.0">
17
+ <app-header-layout>
18
+ <app-header slot="header" fixed></app-header>
19
+ <main>
20
+ <h2>pb-page guard demo</h2>
21
+ <p>This page should load without errors even though <code>app-header</code> does not implement <code>_notifyLayoutChanged</code>.</p>
22
+ </main>
23
+ </app-header-layout>
24
+ </pb-page>
25
+ </body>
26
+ </html>
27
+
@@ -6,7 +6,7 @@
6
6
  <title>pb-popover Demo</title>
7
7
  <link rel="stylesheet" href="demo.css">
8
8
 
9
- <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script><script type="module" src="../pb-components-bundle.js"></script>
9
+ <script type="module" src="../pb-components-bundle.js"></script>
10
10
  </head>
11
11
 
12
12
  <body>
@@ -7,7 +7,7 @@
7
7
 
8
8
  <title>pb-print-preview Demo</title>
9
9
  <link rel="stylesheet" href="demo.css">
10
- <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script><script type="module" src="../pb-components-bundle.js"></script>
10
+ <script type="module" src="../pb-components-bundle.js"></script>
11
11
  <style>
12
12
  pb-print-preview {
13
13
  height: 80vh;
@@ -29,4 +29,4 @@
29
29
  </pb-demo-snippet>
30
30
  </body>
31
31
 
32
- </html>
32
+ </html>
@@ -4,8 +4,8 @@
4
4
  <meta charset="utf-8" />
5
5
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes" />
6
6
 
7
- <title>pb-document 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>
7
+ <title>pb-progress Demo</title>
8
+ <script type="module" src="../pb-components-bundle.js"></script>
9
9
  </head>
10
10
 
11
11
  <body>
@@ -32,11 +32,11 @@
32
32
  if (started) {
33
33
  started = false;
34
34
  btn.innerHTML = 'Click to start';
35
- document.dispatchEvent(new CustomEvent('pb-end-update'));
35
+ pbEvents.emit('pb-end-update');
36
36
  } else {
37
37
  started = true;
38
38
  btn.innerHTML = 'Click to stop';
39
- document.dispatchEvent(new CustomEvent('pb-start-update'));
39
+ pbEvents.emit('pb-start-update');
40
40
  }
41
41
  });
42
42
  </script>
@@ -3,8 +3,8 @@
3
3
  <meta charset="utf-8"/>
4
4
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"/>
5
5
 
6
- <title>pb-code-highlight Demo</title>
7
- <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script><script type="module" src="../pb-components-bundle.js"></script>
6
+ <title>pb-repeat Demo</title>
7
+ <script type="module" src="../pb-components-bundle.js"></script>
8
8
  </head>
9
9
 
10
10
  <body>
@@ -20,42 +20,38 @@
20
20
  }
21
21
  </style>
22
22
  <pb-page>
23
- <iron-form id="form">
24
- <form action="">
25
- <pb-repeat>
26
- <template>
27
- <label>First name:</label>
28
- <input type="text" name="first">
29
- <label>Surname:</label>
30
- <input type="text" name="surname">
31
- <label>Title:</label>
32
- <select name="title">
33
- <option></option>
34
- <option>Dr.</option>
35
- <option>Prof.</option>
36
- </select>
37
- <label>Vegetarian:</label>
38
- <input type="checkbox" name="veggie">
39
- </template>
40
- </pb-repeat>
41
- <button type="submit">Save</button>
42
- </form>
43
- </iron-form>
23
+ <form action="" id="form">
24
+ <pb-repeat>
25
+ <template>
26
+ <label>First name:</label>
27
+ <input type="text" name="first">
28
+ <label>Surname:</label>
29
+ <input type="text" name="surname">
30
+ <label>Title:</label>
31
+ <select name="title">
32
+ <option></option>
33
+ <option>Dr.</option>
34
+ <option>Prof.</option>
35
+ </select>
36
+ <label>Vegetarian:</label>
37
+ <input type="checkbox" name="veggie" value="yes">
38
+ </template>
39
+ </pb-repeat>
40
+ <button type="submit" class="pb-button pb-button--contained">Save</button>
41
+ </form>
44
42
  <pre id="output"></pre>
43
+ <script type="module">
44
+ const form = document.getElementById('form')
45
+ const output = document.getElementById('output')
46
+ if (form && output) {
47
+ form.addEventListener('submit', (ev) => {
48
+ ev.preventDefault()
49
+ const data = new URLSearchParams(new FormData(form)).toString()
50
+ output.textContent = data
51
+ })
52
+ }
53
+ </script>
45
54
  </pb-page>
46
- <script>
47
- window.addEventListener('WebComponentsReady', () => {
48
- const form = document.getElementById('form');
49
- form.addEventListener('iron-form-presubmit', (ev) => {
50
- ev.preventDefault();
51
- const data = form.serializeForm();
52
- const queryString = Object.keys(data).map((key) => {
53
- return key + '=' + data[key]
54
- }).join('&');
55
- document.getElementById('output').innerText = queryString;
56
- });
57
- });
58
- </script>
59
55
  </template>
60
56
  </pb-demo-snippet>
61
57
  </body>
@@ -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-search 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>
@@ -47,12 +47,15 @@
47
47
  <main>
48
48
  <pb-search id="search-form">
49
49
  <div class="targets">
50
- <paper-checkbox name="tei-target" value="tei-text"><pb-i18n key="search.sections">Search sections</pb-i18n></paper-checkbox>
51
- <paper-checkbox name="tei-target" value="tei-head"><pb-i18n key="search.headings">Search headings</pb-i18n></paper-checkbox>
50
+ <input id="tei-text" type="checkbox" name="tei-target" value="tei-text">
51
+ <label for="tei-text"><pb-i18n key="search.sections">Search sections</pb-i18n></label>
52
+
53
+ <input id="tei-head" type="checkbox" name="tei-target" value="tei-head">
54
+ <label for="tei-head"><pb-i18n key="search.headings">Search headings</pb-i18n></label>
52
55
  </div>
53
56
  <div class="buttons">
54
- <paper-button slot="searchButton"><pb-i18n key="search.search"></pb-i18n></paper-button>
55
- <paper-button slot="resetButton"><pb-i18n key="search.reset"></pb-i18n></paper-button>
57
+ <button slot="searchButton"><pb-i18n key="search.search"></pb-i18n></button>
58
+ <button slot="resetButton"><pb-i18n key="search.reset"></pb-i18n></button>
56
59
  </div>
57
60
  </pb-search>
58
61
  <pb-paginate per-page="10" range="5"></pb-paginate>
@@ -62,6 +65,14 @@
62
65
  </pb-page>
63
66
  </template>
64
67
  </pb-demo-snippet>
68
+ <script type="module">
69
+ import { firePageReady } from '../src/docs/demo-utils.js'
70
+ if (document.readyState === 'loading') {
71
+ document.addEventListener('DOMContentLoaded', () => firePageReady({ endpoint: '/exist/apps/tei-publisher' }))
72
+ } else {
73
+ firePageReady({ endpoint: '/exist/apps/tei-publisher' })
74
+ }
75
+ </script>
65
76
  </body>
66
77
 
67
78
  </html>
@@ -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-search 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>
@@ -43,8 +43,8 @@
43
43
  <main>
44
44
  <pb-search id="search-form">
45
45
  <pb-select label="search in" name="tei-target" value="tei-text">
46
- <paper-item value="tei-text">In text</paper-item>
47
- <paper-item value="tei-head">In headings</paper-item>
46
+ <option value="tei-text">In text</option>
47
+ <option value="tei-head">In headings</option>
48
48
  </pb-select>
49
49
  </pb-search>
50
50
  <pb-paginate per-page="10" range="5"></pb-paginate>
@@ -56,4 +56,4 @@
56
56
  </pb-demo-snippet>
57
57
  </body>
58
58
 
59
- </html>
59
+ </html>
@@ -4,9 +4,9 @@
4
4
  <meta charset="utf-8" />
5
5
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes" />
6
6
 
7
- <title>pb-search multi Demo</title>
7
+ <title>pb-search Demo</title>
8
8
  <link rel="Stylesheet" href="demo.css">
9
- <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script><script type="module" src="../pb-components-bundle.js"></script>
9
+ <script type="module" src="../pb-components-bundle.js"></script>
10
10
  </head>
11
11
 
12
12
  <body>
@@ -50,7 +50,7 @@
50
50
  <h2>multi-select</h2>
51
51
  <pb-custom-form id="custom-form">
52
52
  <input type="text" name="custom">
53
- <button type="submit" slot="searchButton">Submit</button>
53
+ <button type="submit" slot="searchButtonBottom">Submit</button>
54
54
  <button type="reset" slot="resetButton">Reset</button>
55
55
  </pb-custom-form>
56
56
  <pb-search id="search-form" subforms="pb-custom-form"></pb-search>
@@ -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-search 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>
@@ -24,8 +24,8 @@
24
24
  <h2>paper buttons for search + reset</h2>
25
25
 
26
26
  <pb-search id="search-form">
27
- <paper-button slot="searchButton">submit</paper-button>
28
- <paper-button slot="resetButton">reset</paper-button>
27
+ <button slot="searchButton">submit</button>
28
+ <button slot="resetButton">reset</button>
29
29
  </pb-search>
30
30
 
31
31
  <h2>native buttons for search + reset</h2>
@@ -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-select-feature 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>
@@ -41,10 +41,10 @@
41
41
  {"name": "Normalized View", "properties": {"mode": "norm", "view": "single", "root": null}}
42
42
  ]'></pb-select-feature>
43
43
  <pb-navigation direction="backward" keyboard="left">
44
- <paper-icon-button icon="icons:chevron-left"></paper-icon-button>
44
+ <pb-icon-button icon="icons:chevron-left"></pb-icon-button>
45
45
  </pb-navigation>
46
46
  <pb-navigation direction="forward" keyboard="right">
47
- <paper-icon-button icon="icons:chevron-right"></paper-icon-button>
47
+ <pb-icon-button icon="icons:chevron-right"></pb-icon-button>
48
48
  </pb-navigation>
49
49
  </div>
50
50
  <main>
@@ -55,4 +55,4 @@
55
55
  </pb-demo-snippet>
56
56
  </body>
57
57
 
58
- </html>
58
+ </html>
@@ -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-select-feature 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>
@@ -50,11 +50,11 @@
50
50
  ]' emit="ex2" subscribe="ex2"></pb-select-feature>
51
51
  <!-- Navigate to previous page -->
52
52
  <pb-navigation direction="backward" keyboard="left" emit="ex2" subscribe="ex2">
53
- <paper-icon-button icon="icons:chevron-left"></paper-icon-button>
53
+ <pb-icon-button icon="icons:chevron-left"></pb-icon-button>
54
54
  </pb-navigation>
55
55
  <!-- Navigate to next page -->
56
56
  <pb-navigation direction="forward" keyboard="right" emit="ex2" subscribe="ex2">
57
- <paper-icon-button icon="icons:chevron-right"></paper-icon-button>
57
+ <pb-icon-button icon="icons:chevron-right"></pb-icon-button>
58
58
  </pb-navigation>
59
59
  </div>
60
60
  <main>
@@ -66,4 +66,4 @@
66
66
  </pb-demo-snippet>
67
67
  </body>
68
68
 
69
- </html>
69
+ </html>
@@ -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-select-feature 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>
@@ -56,4 +56,4 @@
56
56
  </pb-demo-snippet>
57
57
  </body>
58
58
 
59
- </html>
59
+ </html>
@@ -1,55 +1,60 @@
1
1
  <html>
2
- <head>
3
- <title>Using pb-select</title>
4
- <link rel="stylesheet" href="demo.css">
5
- <style>
6
- pb-autocomplete {
7
- margin-bottom: 20px;
8
- }
9
- </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
- <h1>Use pb-select with i18n and iron-form</h1>
14
-
15
- <p>This demo checks if option and selection labels are properly translated.</p>
16
-
17
- <pb-demo-snippet>
18
- <template>
19
- <pb-page language="fr">
20
- <pb-lang label="language" selected="en">
21
- <paper-item value="tr">Türkçe</paper-item>
22
- <paper-item value="en">English</paper-item>
23
- <paper-item value="fr">Français</paper-item>
24
- <paper-item value="sl">Slovenščina</paper-item>
25
- </pb-lang>
26
-
27
- <iron-form id="form">
28
- <form action="">
29
- <pb-select name="format" value="latex" multi>
30
- <paper-item value="latex"><pb-i18n key="menu.download.pdf-latex">untranslated</pb-i18n></paper-item>
31
- <paper-item value="fo"><pb-i18n key="menu.download.pdf-fo">untranslated</pb-i18n></paper-item>
32
- <paper-item value="epub"><pb-i18n key="menu.download.epub-download">untranslated</pb-i18n></paper-item>
33
- </pb-select>
34
-
35
- <button type="submit"><paper-button>Submit</paper-button></button>
36
- </form>
37
- </iron-form>
38
-
39
- <p>Parameters which would be sent: <code id="output"></code></p>
40
- </pb-page>
41
-
42
-
43
- <script>
44
- const form = document.getElementById('form');
45
- form.addEventListener('iron-form-submit', (ev) => {
46
- ev.preventDefault();
47
- const data = JSON.stringify(form.serializeForm());
48
- document.getElementById('output').innerHTML = data;
49
- });
2
+
3
+ <head>
4
+ <title>Using pb-select</title>
5
+ <link rel="stylesheet" href="demo.css">
6
+ <style>
7
+ pb-autocomplete {
8
+ margin-bottom: 20px;
9
+ }
10
+ </style>
11
+ <script type="module" src="../pb-components-bundle.js"></script>
12
+ </head>
13
+
14
+ <body>
15
+ <h1>Use pb-select with i18n</h1>
16
+
17
+ <p>This demo checks if option and selection labels are properly translated.</p>
18
+
19
+ <pb-demo-snippet>
20
+ <template>
21
+ <pb-page language="fr">
22
+ <pb-lang label="language" selected="en">
23
+ <option value="tr">Türkçe</option>
24
+ <option value="en">English</option>
25
+ <option value="fr">Français</option>
26
+ <option value="sl">Slovenščina</option>
27
+ </pb-lang>
28
+
29
+ <form action="" id="form">
30
+ <pb-select name="format" value="latex" multi>
31
+ <option value="latex"><pb-i18n
32
+ key="menu.download.pdf-latex">untranslated</pb-i18n></option>
33
+ <option value="fo"><pb-i18n
34
+ key="menu.download.pdf-fo">untranslated</pb-i18n></option>
35
+ <option value="epub"><pb-i18n
36
+ key="menu.download.epub-download">untranslated</pb-i18n></option>
37
+ </pb-select>
38
+
39
+ <button type="submit" class="pb-button pb-button--contained">Submit</button>
40
+ </form>
41
+
42
+ <p>Parameters which would be sent: <code id="output"></code></p>
43
+ <script type="module">
44
+ const form = document.getElementById('form')
45
+ const output = document.getElementById('output')
46
+ if (form && output) {
47
+ form.addEventListener('submit', (ev) => {
48
+ ev.preventDefault()
49
+ const params = new URLSearchParams(new FormData(form)).toString()
50
+ output.textContent = params
51
+ })
52
+ }
50
53
  </script>
51
- </template>
52
- </pb-demo-snippet>
53
-
54
- </body>
55
- </html>
54
+ </pb-page>
55
+ </template>
56
+ </pb-demo-snippet>
57
+
58
+ </body>
59
+
60
+ </html>
@@ -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-select-odd 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>