@panoramax/web-viewer 3.2.3-develop-6e69906d → 3.2.3-develop-8b82a4e5

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 (61) hide show
  1. package/build/index.css +2 -2
  2. package/build/index.css.map +1 -1
  3. package/build/index.js +535 -216
  4. package/build/index.js.map +1 -1
  5. package/build/widgets.html +1 -1
  6. package/docs/reference/components/core/PhotoViewer.md +2 -0
  7. package/docs/reference/components/core/Viewer.md +2 -0
  8. package/docs/reference/components/layout/BottomDrawer.md +35 -0
  9. package/docs/reference/components/layout/Tabs.md +45 -0
  10. package/docs/reference/components/menus/PictureLegend.md +1 -0
  11. package/docs/reference/components/ui/Button.md +3 -2
  12. package/docs/reference/components/ui/CopyButton.md +7 -4
  13. package/docs/reference/components/ui/LinkButton.md +1 -0
  14. package/docs/reference/components/ui/ListGroup.md +22 -0
  15. package/docs/reference/components/ui/widgets/Legend.md +11 -0
  16. package/docs/reference/components/ui/widgets/OSMEditors.md +15 -0
  17. package/docs/reference/components/ui/widgets/PictureLegendActions.md +32 -0
  18. package/docs/reference.md +6 -2
  19. package/mkdocs.yml +5 -1
  20. package/package.json +1 -1
  21. package/public/widgets.html +45 -9
  22. package/src/components/core/Basic.css +1 -0
  23. package/src/components/core/PhotoViewer.css +0 -23
  24. package/src/components/core/PhotoViewer.js +41 -22
  25. package/src/components/core/Viewer.css +6 -31
  26. package/src/components/core/Viewer.js +40 -11
  27. package/src/components/layout/BottomDrawer.js +204 -0
  28. package/src/components/layout/CorneredGrid.js +3 -0
  29. package/src/components/layout/Tabs.js +133 -0
  30. package/src/components/layout/index.js +2 -0
  31. package/src/components/menus/PictureLegend.js +162 -23
  32. package/src/components/menus/PictureMetadata.js +220 -110
  33. package/src/components/menus/Share.js +2 -142
  34. package/src/components/styles.js +47 -47
  35. package/src/components/ui/Button.js +4 -2
  36. package/src/components/ui/CopyButton.js +34 -5
  37. package/src/components/ui/LinkButton.js +6 -7
  38. package/src/components/ui/ListGroup.js +66 -0
  39. package/src/components/ui/Map.js +4 -1
  40. package/src/components/ui/QualityScore.js +19 -24
  41. package/src/components/ui/TogglableGroup.js +47 -53
  42. package/src/components/ui/index.js +1 -0
  43. package/src/components/ui/widgets/Legend.js +29 -6
  44. package/src/components/ui/widgets/OSMEditors.js +153 -0
  45. package/src/components/ui/widgets/PictureLegendActions.js +131 -0
  46. package/src/components/ui/widgets/index.js +5 -4
  47. package/src/translations/en.json +14 -8
  48. package/src/translations/fr.json +14 -8
  49. package/src/utils/InitParameters.js +2 -1
  50. package/src/utils/geocoder.js +3 -1
  51. package/src/utils/picture.js +1 -2
  52. package/src/utils/widgets.js +5 -43
  53. package/tests/components/core/__snapshots__/PhotoViewer.test.js.snap +12 -32
  54. package/tests/components/core/__snapshots__/Viewer.test.js.snap +5 -25
  55. package/tests/components/ui/__snapshots__/Photo.test.js.snap +6 -2
  56. package/tests/utils/InitParameters.test.js +7 -9
  57. package/tests/utils/__snapshots__/picture.test.js.snap +13 -4
  58. package/tests/utils/picture.test.js +2 -2
  59. package/tests/utils/widgets.test.js +0 -59
  60. package/docs/reference/components/ui/widgets/Share.md +0 -15
  61. package/src/components/ui/widgets/Share.js +0 -30
package/build/widgets.html CHANGED
@@ -1 +1 @@
1
- <!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><title>Panoramax Widgets</title><style>body{font-family:sans-serif;padding-bottom:100px}h2{text-align:center}.test-bench{display:flex;width:100%;max-width:600px;margin:7px auto;justify-content:space-between;align-items:center}.test-bench h3{margin:0}hr.test-sep{width:100%;max-width:600px}</style><script defer="defer" src="index.js"></script><link href="index.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><h1>Panoramax widgets</h1><p>Test page for common Panoramax viewer widgets</p><h2>Button</h2><div class="test-bench"><h3>Text + click</h3><pnx-button onclick='alert("Stuff")'>Click to do stuff</pnx-button></div><div class="test-bench"><h3>Icon</h3><pnx-button>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Active</h3><pnx-button active="true">Settings</pnx-button></div><div class="test-bench"><h3>CSS override</h3><div style="width:50%;display:flex;gap:5px;max-width:300px"><pnx-button style="width:50%">⚙️ Settings</pnx-button><pnx-button style="width:50%">🖨️ Print</pnx-button></div></div><hr class="test-sep"/><div class="test-bench"><h3>Full</h3><pnx-button kind="full">⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Full active</h3><pnx-button kind="full" active>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Full L</h3><pnx-button kind="full" size="l">⚙️</pnx-button></div><div class="test-bench"><h3>Full XXL</h3><pnx-button kind="full" size="xxl">⚙️</pnx-button></div><div class="test-bench"><h3>Outline</h3><pnx-button kind="outline">⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Outline active</h3><pnx-button kind="outline" active>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Outline L</h3><pnx-button kind="outline" size="l">⚙️</pnx-button></div><div class="test-bench"><h3>Outline XXL</h3><pnx-button kind="outline" size="xxl">⚙️</pnx-button></div><div class="test-bench"><h3>Flat</h3><pnx-button kind="flat">⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Flat active</h3><pnx-button kind="flat" active>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Flat L</h3><pnx-button kind="flat" size="l">⚙️</pnx-button></div><div class="test-bench"><h3>Flat XXL</h3><pnx-button kind="flat" size="xxl">⚙️</pnx-button></div><h2>Link Button</h2><div class="test-bench"><h3>None set</h3><pnx-link-button>Click for nothing</pnx-link-button></div><div class="test-bench"><h3>All set</h3><pnx-link-button target="_blank" href="https://panoramax.fr" title="Do stuff">Click to do stuff</pnx-link-button></div><h2>Copy button</h2><div class="test-bench"><h3>Default + text</h3><pnx-copy-button text="copypasta1"></pnx-copy-button></div><div class="test-bench"><h3>Custom + text</h3><pnx-copy-button text="copypasta2">🌐 Share URL</pnx-copy-button></div><div class="test-bench"><h3>Default + input</h3><div style="display:flex;gap:5px;align-items:center"><input value="copypasta3" id="copy-input-1"/><pnx-copy-button input="copy-input-1"></pnx-copy-button></div></div><h2>Button Group</h2><div class="test-bench"><h3>Full Row x2</h3><div><pnx-button-group dir="row"><pnx-button>☹️</pnx-button><pnx-button>🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Full Row x3</h3><div><pnx-button-group dir="row"><pnx-button>☹️</pnx-button><pnx-button>😐</pnx-button><pnx-button>🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Full Row mixed</h3><div><pnx-button-group dir="row"><pnx-button>☹️</pnx-button><pnx-link-button>😐</pnx-link-button><pnx-copy-button>🙂</pnx-copy-button></pnx-button-group></div></div><div class="test-bench"><h3>Full Column x2</h3><div><pnx-button-group dir="column"><pnx-button>☹️</pnx-button><pnx-button>🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Full Column x3</h3><div><pnx-button-group dir="column"><pnx-button>☹️</pnx-button><pnx-button>😐</pnx-button><pnx-button>🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Full Column mixed</h3><div><pnx-button-group dir="column"><pnx-button>☹️</pnx-button><pnx-link-button>😐</pnx-link-button><pnx-copy-button>🙂</pnx-copy-button></pnx-button-group></div></div><hr class="test-sep"/><div class="test-bench"><h3>Outline Row x2</h3><div><pnx-button-group dir="row"><pnx-button kind="outline">☹️</pnx-button><pnx-button kind="outline">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Outline Row x3</h3><div><pnx-button-group dir="row"><pnx-button kind="outline">☹️</pnx-button><pnx-button kind="outline">😐</pnx-button><pnx-button kind="outline">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Outline Column x2</h3><div><pnx-button-group dir="column"><pnx-button kind="outline">☹️</pnx-button><pnx-button kind="outline">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Outline Column x3</h3><div><pnx-button-group dir="column"><pnx-button kind="outline">☹️</pnx-button><pnx-button kind="outline">😐</pnx-button><pnx-button kind="outline">🙂</pnx-button></pnx-button-group></div></div><hr class="test-sep"/><div class="test-bench"><h3>Flat Row x2</h3><div><pnx-button-group dir="row"><pnx-button kind="flat">☹️</pnx-button><pnx-button kind="flat">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Flat Row x3</h3><div><pnx-button-group dir="row"><pnx-button kind="flat">☹️</pnx-button><pnx-button kind="flat">😐</pnx-button><pnx-button kind="flat">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Flat Column x2</h3><div><pnx-button-group dir="column"><pnx-button kind="flat">☹️</pnx-button><pnx-button kind="flat">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Flat Column x3</h3><div><pnx-button-group dir="column"><pnx-button kind="flat">☹️</pnx-button><pnx-button kind="flat">😐</pnx-button><pnx-button kind="flat">🙂</pnx-button></pnx-button-group></div></div><hr class="test-sep"/><div class="test-bench"><h3>Row XL</h3><div><pnx-button-group size="xl" dir="row"><pnx-button kind="flat">☹️</pnx-button><pnx-button kind="flat">😐</pnx-button><pnx-button kind="flat">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Column XL</h3><div><pnx-button-group size="xl" dir="column"><pnx-button kind="flat">☹️</pnx-button><pnx-button kind="flat">😐</pnx-button><pnx-button kind="flat">🙂</pnx-button></pnx-button-group></div></div><h2>5-stars grade</h2><div class="test-bench"><h3>With a grade</h3><pnx-grade stars="5"/></div><div class="test-bench"><h3>Without a grade</h3><pnx-grade/></div><h2>Quality Score</h2><div class="test-bench"><h3>Classic no grade</h3><pnx-quality-score/></div><div class="test-bench"><h3>Classic 1/5</h3><pnx-quality-score grade="1"/></div><div class="test-bench"><h3>Classic 2/5</h3><pnx-quality-score grade="2"/></div><div class="test-bench"><h3>Classic 3/5</h3><pnx-quality-score grade="3"/></div><div class="test-bench"><h3>Classic 4/5</h3><pnx-quality-score grade="4"/></div><div class="test-bench"><h3>Classic 5/5</h3><pnx-quality-score grade="5"/></div><hr class="test-sep"/><div class="test-bench"><h3>Input</h3><pnx-quality-score input="qs"/></div><div class="test-bench"><h3>Input 1/5</h3><pnx-quality-score input="qs" grade="1"/></div><div class="test-bench"><h3>Input 2/5</h3><pnx-quality-score input="qs" grade="2"/></div><div class="test-bench"><h3>Input 3/5</h3><pnx-quality-score input="qs" grade="3"/></div><div class="test-bench"><h3>Input 4/5</h3><pnx-quality-score input="qs" grade="4"/></div><div class="test-bench"><h3>Input 5/5</h3><pnx-quality-score input="qs" grade="5"/></div><div class="test-bench"><h3>Input many</h3><pnx-quality-score input="qs" grade="1,3,5"/></div><h2>Search bar</h2><div class="test-bench"><h3>Simple</h3><pnx-search-bar placeholder="Start your search"></pnx-search-bar></div><div class="test-bench"><h3>With pre</h3><pnx-search-bar placeholder="Look for a place"><span slot="pre">🗺️</span></pnx-search-bar></div><div class="test-bench"><h3>Reduced</h3><pnx-search-bar reduceable reduced placeholder="Look for a place"></pnx-search-bar></div><hr class="test-sep"/><div class="test-bench"><h3>Size md full</h3><pnx-search-bar size="md" placeholder="Look for a place"><span slot="pre">🗺️</span></pnx-search-bar></div><div class="test-bench"><h3>Size md reduced</h3><pnx-search-bar size="md" reduceable reduced placeholder="Look for a place"></pnx-search-bar></div><div class="test-bench"><h3>Size xxl full</h3><pnx-search-bar size="xxl" placeholder="Look for a place"><span slot="pre">🗺️</span></pnx-search-bar></div><div class="test-bench"><h3>Size xxl reduced</h3><pnx-search-bar size="xxl" reduceable reduced placeholder="Look for a place"></pnx-search-bar></div><h2>Progress bar</h2><div class="test-bench"><h3>Half</h3><pnx-progress-bar value="42"></pnx-progress-bar></div><div class="test-bench"><h3>Indeterminate</h3><pnx-progress-bar></pnx-progress-bar></div><div class="test-bench"><h3>Full</h3><pnx-progress-bar value="100"></pnx-progress-bar></div></body></html>
1
+ <!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><title>Panoramax Widgets</title><style>body{font-family:sans-serif;padding-bottom:100px}h1,h2,nav,p{text-align:center}.test-bench{display:flex;width:100%;max-width:600px;margin:7px auto;justify-content:space-between;align-items:center}.test-bench h3{margin:0}hr.test-sep{width:100%;max-width:600px}</style><script defer="defer" src="index.js"></script><link href="index.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><h1>Panoramax widgets</h1><p>Test page for common Panoramax viewer widgets</p><nav><a href="#button">Button</a> <a href="#link-button">Link Button</a> <a href="#copy-button">Copy button</a> <a href="#button-group">Button Group</a> <a href="#5stars">5-stars grade</a> <a href="#quality-score">Quality Score</a> <a href="#search-bar">Search bar</a> <a href="#progress-bar">Progress bar</a> <a href="#tabs">Tabs</a></nav><h2 id="button">Button</h2><div class="test-bench"><h3>Text + click</h3><pnx-button onclick='alert("Stuff")'>Click to do stuff</pnx-button></div><div class="test-bench"><h3>Icon</h3><pnx-button>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Active</h3><pnx-button active="true">Settings</pnx-button></div><div class="test-bench"><h3>CSS override</h3><div style="width:50%;display:flex;gap:5px;max-width:300px"><pnx-button style="width:50%">⚙️ Settings</pnx-button><pnx-button style="width:50%">🖨️ Print</pnx-button></div></div><hr class="test-sep"/><div class="test-bench"><h3>Full</h3><pnx-button kind="full">⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Full active</h3><pnx-button kind="full" active>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Full L</h3><pnx-button kind="full" size="l">⚙️</pnx-button></div><div class="test-bench"><h3>Full XXL</h3><pnx-button kind="full" size="xxl">⚙️</pnx-button></div><div class="test-bench"><h3>Outline</h3><pnx-button kind="outline">⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Outline active</h3><pnx-button kind="outline" active>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Outline L</h3><pnx-button kind="outline" size="l">⚙️</pnx-button></div><div class="test-bench"><h3>Outline XXL</h3><pnx-button kind="outline" size="xxl">⚙️</pnx-button></div><div class="test-bench"><h3>Inline</h3><pnx-button kind="inline">⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Inline active</h3><pnx-button kind="inline" active>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Inline L</h3><pnx-button kind="inline" size="l">⚙️</pnx-button></div><div class="test-bench"><h3>Inline XXL</h3><pnx-button kind="inline" size="xxl">⚙️</pnx-button></div><div class="test-bench"><h3>Superinline</h3><pnx-button kind="superinline">⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Superinline active</h3><pnx-button kind="superinline" active>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Superinline L</h3><pnx-button kind="superinline" size="l">⚙️</pnx-button></div><div class="test-bench"><h3>Superinline XXL</h3><pnx-button kind="superinline" size="xxl">⚙️</pnx-button></div><div class="test-bench"><h3>Flat</h3><pnx-button kind="flat">⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Flat active</h3><pnx-button kind="flat" active>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Flat L</h3><pnx-button kind="flat" size="l">⚙️</pnx-button></div><div class="test-bench"><h3>Flat XXL</h3><pnx-button kind="flat" size="xxl">⚙️</pnx-button></div><div class="test-bench"><h3>Superflat</h3><pnx-button kind="superflat">⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Superflat active</h3><pnx-button kind="superflat" active>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Superflat L</h3><pnx-button kind="superflat" size="l">⚙️</pnx-button></div><div class="test-bench"><h3>Superflat XXL</h3><pnx-button kind="superflat" size="xxl">⚙️</pnx-button></div><h2 id="link-button">Link Button</h2><div class="test-bench"><h3>None set</h3><pnx-link-button>Click for nothing</pnx-link-button></div><div class="test-bench"><h3>All set</h3><pnx-link-button target="_blank" href="https://panoramax.fr" title="Do stuff">Click to do stuff</pnx-link-button></div><h2 id="copy-button">Copy button</h2><div class="test-bench"><h3>Default + text</h3><pnx-copy-button text="copypasta1"></pnx-copy-button></div><div class="test-bench"><h3>Custom + text</h3><pnx-copy-button text="copypasta2">🌐 Share URL</pnx-copy-button></div><div class="test-bench"><h3>Default + input</h3><div style="display:flex;gap:5px;align-items:center"><input value="copypasta3" id="copy-input-1"/><pnx-copy-button input="copy-input-1"></pnx-copy-button></div></div><h2 id="button-group">Button Group</h2><div class="test-bench"><h3>Full Row x2</h3><div><pnx-button-group dir="row"><pnx-button>☹️</pnx-button><pnx-button>🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Full Row x3</h3><div><pnx-button-group dir="row"><pnx-button>☹️</pnx-button><pnx-button>😐</pnx-button><pnx-button>🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Full Row mixed</h3><div><pnx-button-group dir="row"><pnx-button>☹️</pnx-button><pnx-link-button>😐</pnx-link-button><pnx-copy-button>🙂</pnx-copy-button></pnx-button-group></div></div><div class="test-bench"><h3>Full Column x2</h3><div><pnx-button-group dir="column"><pnx-button>☹️</pnx-button><pnx-button>🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Full Column x3</h3><div><pnx-button-group dir="column"><pnx-button>☹️</pnx-button><pnx-button>😐</pnx-button><pnx-button>🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Full Column mixed</h3><div><pnx-button-group dir="column"><pnx-button>☹️</pnx-button><pnx-link-button>😐</pnx-link-button><pnx-copy-button>🙂</pnx-copy-button></pnx-button-group></div></div><hr class="test-sep"/><div class="test-bench"><h3>Outline Row x2</h3><div><pnx-button-group dir="row"><pnx-button kind="outline">☹️</pnx-button><pnx-button kind="outline">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Outline Row x3</h3><div><pnx-button-group dir="row"><pnx-button kind="outline">☹️</pnx-button><pnx-button kind="outline">😐</pnx-button><pnx-button kind="outline">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Outline Column x2</h3><div><pnx-button-group dir="column"><pnx-button kind="outline">☹️</pnx-button><pnx-button kind="outline">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Outline Column x3</h3><div><pnx-button-group dir="column"><pnx-button kind="outline">☹️</pnx-button><pnx-button kind="outline">😐</pnx-button><pnx-button kind="outline">🙂</pnx-button></pnx-button-group></div></div><hr class="test-sep"/><div class="test-bench"><h3>Flat Row x2</h3><div><pnx-button-group dir="row"><pnx-button kind="flat">☹️</pnx-button><pnx-button kind="flat">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Flat Row x3</h3><div><pnx-button-group dir="row"><pnx-button kind="flat">☹️</pnx-button><pnx-button kind="flat">😐</pnx-button><pnx-button kind="flat">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Flat Column x2</h3><div><pnx-button-group dir="column"><pnx-button kind="flat">☹️</pnx-button><pnx-button kind="flat">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Flat Column x3</h3><div><pnx-button-group dir="column"><pnx-button kind="flat">☹️</pnx-button><pnx-button kind="flat">😐</pnx-button><pnx-button kind="flat">🙂</pnx-button></pnx-button-group></div></div><hr class="test-sep"/><div class="test-bench"><h3>Row XL</h3><div><pnx-button-group size="xl" dir="row"><pnx-button kind="flat">☹️</pnx-button><pnx-button kind="flat">😐</pnx-button><pnx-button kind="flat">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Column XL</h3><div><pnx-button-group size="xl" dir="column"><pnx-button kind="flat">☹️</pnx-button><pnx-button kind="flat">😐</pnx-button><pnx-button kind="flat">🙂</pnx-button></pnx-button-group></div></div><h2 id="5stars">5-stars grade</h2><div class="test-bench"><h3>With a grade</h3><pnx-grade stars="5"/></div><div class="test-bench"><h3>Without a grade</h3><pnx-grade/></div><h2 id="quality-score">Quality Score</h2><div class="test-bench"><h3>Classic no grade</h3><pnx-quality-score/></div><div class="test-bench"><h3>Classic 1/5</h3><pnx-quality-score grade="1"/></div><div class="test-bench"><h3>Classic 2/5</h3><pnx-quality-score grade="2"/></div><div class="test-bench"><h3>Classic 3/5</h3><pnx-quality-score grade="3"/></div><div class="test-bench"><h3>Classic 4/5</h3><pnx-quality-score grade="4"/></div><div class="test-bench"><h3>Classic 5/5</h3><pnx-quality-score grade="5"/></div><hr class="test-sep"/><div class="test-bench"><h3>Input</h3><pnx-quality-score input="qs"/></div><div class="test-bench"><h3>Input 1/5</h3><pnx-quality-score input="qs" grade="1"/></div><div class="test-bench"><h3>Input 2/5</h3><pnx-quality-score input="qs" grade="2"/></div><div class="test-bench"><h3>Input 3/5</h3><pnx-quality-score input="qs" grade="3"/></div><div class="test-bench"><h3>Input 4/5</h3><pnx-quality-score input="qs" grade="4"/></div><div class="test-bench"><h3>Input 5/5</h3><pnx-quality-score input="qs" grade="5"/></div><div class="test-bench"><h3>Input many</h3><pnx-quality-score input="qs" grade="1,3,5"/></div><h2 id="search-bar">Search bar</h2><div class="test-bench"><h3>Simple</h3><pnx-search-bar placeholder="Start your search"></pnx-search-bar></div><div class="test-bench"><h3>With pre</h3><pnx-search-bar placeholder="Look for a place"><span slot="pre">🗺️</span></pnx-search-bar></div><div class="test-bench"><h3>Reduced</h3><pnx-search-bar reduceable reduced placeholder="Look for a place"></pnx-search-bar></div><hr class="test-sep"/><div class="test-bench"><h3>Size md full</h3><pnx-search-bar size="md" placeholder="Look for a place"><span slot="pre">🗺️</span></pnx-search-bar></div><div class="test-bench"><h3>Size md reduced</h3><pnx-search-bar size="md" reduceable reduced placeholder="Look for a place"></pnx-search-bar></div><div class="test-bench"><h3>Size xxl full</h3><pnx-search-bar size="xxl" placeholder="Look for a place"><span slot="pre">🗺️</span></pnx-search-bar></div><div class="test-bench"><h3>Size xxl reduced</h3><pnx-search-bar size="xxl" reduceable reduced placeholder="Look for a place"></pnx-search-bar></div><h2 id="progress-bar">Progress bar</h2><div class="test-bench"><h3>Half</h3><pnx-progress-bar value="42"></pnx-progress-bar></div><div class="test-bench"><h3>Indeterminate</h3><pnx-progress-bar></pnx-progress-bar></div><div class="test-bench"><h3>Full</h3><pnx-progress-bar value="100"></pnx-progress-bar></div><h2 id="tabs">Tabs</h2><div class="test-bench"><h3>Many</h3><pnx-tabs><h4 slot="title">Tab 1</h4><div slot="content">Tab 1 content</div><h4 slot="title">Tab 2</h4><div slot="content">Tab 2 content</div><h4 slot="title">Tab 3</h4><div slot="content">Tab 3 content</div></pnx-tabs></div></body></html>
package/docs/reference/components/core/PhotoViewer.md CHANGED
@@ -11,6 +11,7 @@
11
11
  **Slot**: `bottom-left` The bottom-left corner
12
12
  **Slot**: `bottom` The bottom middle corner
13
13
  **Slot**: `bottom-right` The bottom-right corner
14
+ **Slot**: `editors` External links to map editors, or any tool that may be helpful. Defaults to OSM tools (iD & JOSM).
14
15
  **Properties**
15
16
 
16
17
  | Name | Type | Description |
@@ -72,6 +73,7 @@ Make sure to set width/height through CSS for proper display.
72
73
  style="width: 300px; height: 250px"
73
74
  >
74
75
  <p slot="top-right">My custom text</p>
76
+ <p slot="editors"><a href="https://my.own.tool/">Edit in my own tool</a></p>
75
77
  </pnx-photo-viewer>
76
78
 
77
79
  <!-- With only your custom widgets -->
package/docs/reference/components/core/Viewer.md CHANGED
@@ -11,6 +11,7 @@
11
11
  **Slot**: `bottom-left` The bottom-left corner
12
12
  **Slot**: `bottom` The bottom middle corner
13
13
  **Slot**: `bottom-right` The bottom-right corner
14
+ **Slot**: `editors` External links to map editors, or any tool that may be helpful. Defaults to OSM tools (iD & JOSM).
14
15
  **Properties**
15
16
 
16
17
  | Name | Type | Description |
@@ -77,6 +78,7 @@ Make sure to set width/height through CSS for proper display.
77
78
  style="width: 300px; height: 250px"
78
79
  >
79
80
  <p slot="top-right">My custom text</p>
81
+ <p slot="editors"><a href="https://my.own.tool/">Edit in my own tool</a></p>
80
82
  </pnx-viewer>
81
83
 
82
84
  <!-- With only your custom widgets -->
package/docs/reference/components/layout/BottomDrawer.md ADDED
@@ -0,0 +1,35 @@
1
+ <a name="Panoramax.components.layout.BottomDrawer"></a>
2
+
3
+ ## Panoramax.components.layout.BottomDrawer ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
4
+ **Kind**: static class of <code>Panoramax.components.layout</code>
5
+ **Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
6
+ **Element**: pnx-bottom-drawer
7
+ **Slot**: `default` The drawer content
8
+
9
+ * [.BottomDrawer](#Panoramax.components.layout.BottomDrawer) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
10
+ * [new BottomDrawer()](#new_Panoramax.components.layout.BottomDrawer_new)
11
+ * [.properties](#Panoramax.components.layout.BottomDrawer+properties) : <code>Object</code>
12
+
13
+ <a name="new_Panoramax.components.layout.BottomDrawer_new"></a>
14
+
15
+ ### new BottomDrawer()
16
+ BottomDrawer layout offers a mobile-like drawer menu, coming from bottom of the screen.
17
+
18
+ **Example**
19
+ ```html
20
+ <pnx-bottom-drawer openness="opened">
21
+ <p>My drawer content</p>
22
+ </pnx-bottom-drawer>
23
+ ```
24
+ <a name="Panoramax.components.layout.BottomDrawer+properties"></a>
25
+
26
+ ### bottomDrawer.properties : <code>Object</code>
27
+ Component properties.
28
+
29
+ **Kind**: instance property of [<code>BottomDrawer</code>](#Panoramax.components.layout.BottomDrawer)
30
+ **Properties**
31
+
32
+ | Name | Type | Default | Description |
33
+ | --- | --- | --- | --- |
34
+ | [openness] | <code>string</code> | <code>&quot;half-opened&quot;</code> | How much the drawer should be opened (closed, half-opened, opened) |
35
+
package/docs/reference/components/layout/Tabs.md ADDED
@@ -0,0 +1,45 @@
1
+ <a name="Panoramax.components.layout.Tabs"></a>
2
+
3
+ ## Panoramax.components.layout.Tabs ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
4
+ **Kind**: static class of <code>Panoramax.components.layout</code>
5
+ **Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
6
+ **Element**: pnx-tabs
7
+ **Slot**: `title` A single tab name
8
+ **Slot**: `content` A single tab content
9
+
10
+ * [.Tabs](#Panoramax.components.layout.Tabs) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
11
+ * [new Tabs()](#new_Panoramax.components.layout.Tabs_new)
12
+ * [.properties](#Panoramax.components.layout.Tabs+properties) : <code>Object</code>
13
+
14
+ <a name="new_Panoramax.components.layout.Tabs_new"></a>
15
+
16
+ ### new Tabs()
17
+ Tabs offers a nice paged content rendering based on tabs buttons.
18
+ The list of tab names are passed through `title` slots, and content using `content` slots.
19
+ Note that tab names and contents should respect a coherent order.
20
+
21
+ **Example**
22
+ ```html
23
+ <pnx-tabs>
24
+ <h4 slot="title">Tab 1</h4>
25
+ <div slot="content">Tab 1 content</div>
26
+
27
+ <h4 slot="title">Tab 2</h4>
28
+ <div slot="content">Tab 2 content</div>
29
+
30
+ <h4 slot="title">Tab 3</h4>
31
+ <div slot="content">Tab 3 content</div>
32
+ </pnx-tabs>
33
+ ```
34
+ <a name="Panoramax.components.layout.Tabs+properties"></a>
35
+
36
+ ### tabs.properties : <code>Object</code>
37
+ Component properties.
38
+
39
+ **Kind**: instance property of [<code>Tabs</code>](#Panoramax.components.layout.Tabs)
40
+ **Properties**
41
+
42
+ | Name | Type | Default | Description |
43
+ | --- | --- | --- | --- |
44
+ | [activeTabIndex] | <code>string</code> | <code>0</code> | The selected tab index |
45
+
package/docs/reference/components/menus/PictureLegend.md CHANGED
@@ -4,6 +4,7 @@
4
4
  **Kind**: static class of <code>Panoramax.components.menus</code>
5
5
  **Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
6
6
  **Element**: pnx-picture-legend
7
+ **Slot**: `editors` External links to map editors, or any tool that may be helpful. Defaults to OSM tools (iD & JOSM).
7
8
  <a name="new_Panoramax.components.menus.PictureLegend_new"></a>
8
9
 
9
10
  ### new PictureLegend()
package/docs/reference/components/ui/Button.md CHANGED
@@ -32,8 +32,9 @@ Component properties.
32
32
  | Name | Type | Default | Description |
33
33
  | --- | --- | --- | --- |
34
34
  | [active] | <code>boolean</code> | <code>false</code> | Whether the button is in an active state. |
35
- | [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, outline, flat, superflat) |
36
- | [size] | <code>string</code> | <code>&quot;md&quot;</code> | The size of the button (md, l, xl, xxl) |
35
+ | [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, outline, flat, superflat, inline, superinline) |
36
+ | [size] | <code>string</code> | <code>&quot;md&quot;</code> | The size of the button (sm, md, l, xl, xxl) |
37
37
  | [disabled] | <code>boolean</code> | <code>false</code> | Whether the button is disabled. |
38
38
  | [type] | <code>string</code> | | The button type (e.g., 'submit'). |
39
+ | [title] | <code>string</code> | | Tooltip text displayed when hovering over the button |
39
40
 
package/docs/reference/components/ui/CopyButton.md CHANGED
@@ -28,8 +28,11 @@ Component properties.
28
28
  **Kind**: instance property of [<code>CopyButton</code>](#Panoramax.components.ui.CopyButton)
29
29
  **Properties**
30
30
 
31
- | Name | Type | Description |
32
- | --- | --- | --- |
33
- | [text] | <code>string</code> | Text to copy in clipboard on click (use either this parameter or input, not both) |
34
- | [input] | <code>input</code> | ID of a HTML input field to copy content from in clipboard (use either this parameter or text, not both) |
31
+ | Name | Type | Default | Description |
32
+ | --- | --- | --- | --- |
33
+ | [text] | <code>string</code> | | Text to copy in clipboard on click (use either this parameter or input, not both) |
34
+ | [input] | <code>input</code> | | ID of a HTML input field to copy content from in clipboard (use either this parameter or text, not both) |
35
+ | [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, outline, flat, superflat, inline, superinline) |
36
+ | [size] | <code>string</code> | <code>&quot;md&quot;</code> | The size of the button (sm, md, l, xl, xxl) |
37
+ | [unstyled] | <code>boolean</code> | <code>false</code> | Disable all styling (for list group integration) |
35
38
 
package/docs/reference/components/ui/LinkButton.md CHANGED
@@ -41,4 +41,5 @@ Component properties.
41
41
  | [download] | <code>string</code> | | Indicates if the linked resource should be downloaded |
42
42
  | [class] | <code>string</code> | | Custom CSS class for additional styling |
43
43
  | [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, outline, flat, superflat) |
44
+ | [size] | <code>string</code> | <code>&quot;md&quot;</code> | The size of the button (sm, md, l, xl, xxl) |
44
45
 
package/docs/reference/components/ui/ListGroup.md ADDED
@@ -0,0 +1,22 @@
1
+ <a name="Panoramax.components.ui.ListGroup"></a>
2
+
3
+ ## Panoramax.components.ui.ListGroup ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
4
+ **Kind**: static class of <code>Panoramax.components.ui</code>
5
+ **Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
6
+ **Element**: pnx-list-group
7
+ **Slot**: `default` Any element you want to add in list.
8
+ <a name="new_Panoramax.components.ui.ListGroup_new"></a>
9
+
10
+ ### new ListGroup()
11
+ List Group element displays a menu having a list of rapid actions (links, buttons).
12
+
13
+ Note that you may only want to use basic HTML elements (`a`, `button`) instead of Panoramax ones.
14
+ The list group overrides style, so using `pnx-*` component may conflict on styling.
15
+
16
+ **Example**
17
+ ```html
18
+ <pnx-list-group>
19
+ <a href="https://web.site/">First link</a>
20
+ <button>Second button</button>
21
+ </pnx-list-group>
22
+ ```
package/docs/reference/components/ui/widgets/Legend.md CHANGED
@@ -4,6 +4,7 @@
4
4
  **Kind**: static class of <code>Panoramax.components.ui.widgets</code>
5
5
  **Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
6
6
  **Element**: pnx-widget-legend
7
+ **Slot**: `editors` External links to map editors, or any tool that may be helpful. Defaults to OSM tools (iD & JOSM).
7
8
 
8
9
  * [.Legend](#Panoramax.components.ui.widgets.Legend) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
9
10
  * [new Legend()](#new_Panoramax.components.ui.widgets.Legend_new)
@@ -17,11 +18,21 @@ Also displays a default "About Panoramax" message.
17
18
 
18
19
  **Example**
19
20
  ```html
21
+ <!-- Default legend -->
20
22
  <pnx-widget-legend
21
23
  _parent=${viewer}
22
24
  focus="map"
23
25
  picture="PICTURE-ID-IF-ANY"
24
26
  />
27
+
28
+ <!-- With custom editor links -->
29
+ <pnx-widget-legend
30
+ _parent=${viewer}
31
+ focus="map"
32
+ picture="PICTURE-ID-IF-ANY"
33
+ >
34
+ <div slot="editors"><a href="http://my.own.tool">Edit in my own tool</a></div>
35
+ </pnx-widget-legend>
25
36
  ```
26
37
  <a name="Panoramax.components.ui.widgets.Legend+properties"></a>
27
38
 
package/docs/reference/components/ui/widgets/OSMEditors.md ADDED
@@ -0,0 +1,15 @@
1
+ <a name="Panoramax.components.ui.widgets.OSMEditors"></a>
2
+
3
+ ## Panoramax.components.ui.widgets.OSMEditors ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
4
+ **Kind**: static class of <code>Panoramax.components.ui.widgets</code>
5
+ **Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
6
+ **Element**: pnx-widget-osmeditors
7
+ <a name="new_Panoramax.components.ui.widgets.OSMEditors_new"></a>
8
+
9
+ ### new OSMEditors()
10
+ OSM Editors component offers direct links to OpenStreetMap's iD and JOSM editors.
11
+
12
+ **Example**
13
+ ```html
14
+ <pnx-widget-osmeditors _parent=${viewer} />
15
+ ```
package/docs/reference/components/ui/widgets/PictureLegendActions.md ADDED
@@ -0,0 +1,32 @@
1
+ <a name="Panoramax.components.ui.widgets.PictureLegendActions"></a>
2
+
3
+ ## Panoramax.components.ui.widgets.PictureLegendActions ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
4
+ **Kind**: static class of <code>Panoramax.components.ui.widgets</code>
5
+ **Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
6
+ **Element**: pnx-picture-legend-actions
7
+
8
+ * [.PictureLegendActions](#Panoramax.components.ui.widgets.PictureLegendActions) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
9
+ * [new PictureLegendActions()](#new_Panoramax.components.ui.widgets.PictureLegendActions_new)
10
+ * [.properties](#Panoramax.components.ui.widgets.PictureLegendActions+properties) : <code>Object</code>
11
+
12
+ <a name="new_Panoramax.components.ui.widgets.PictureLegendActions_new"></a>
13
+
14
+ ### new PictureLegendActions()
15
+ Picture Legend Actions is a menu showing up complementary actions for picture legend.
16
+
17
+ **Example**
18
+ ```html
19
+ <pnx-picture-legend-actions _parent=${viewer} />
20
+ ```
21
+ <a name="Panoramax.components.ui.widgets.PictureLegendActions+properties"></a>
22
+
23
+ ### pictureLegendActions.properties : <code>Object</code>
24
+ Component properties.
25
+
26
+ **Kind**: instance property of [<code>PictureLegendActions</code>](#Panoramax.components.ui.widgets.PictureLegendActions)
27
+ **Properties**
28
+
29
+ | Name | Type | Default | Description |
30
+ | --- | --- | --- | --- |
31
+ | [full] | <code>boolean</code> | <code>false</code> | Show advanced actions |
32
+
package/docs/reference.md CHANGED
@@ -16,8 +16,10 @@ Main web components:
16
16
 
17
17
  Layout helpers:
18
18
 
19
+ - [BottomDrawer](./reference/components/layout/BottomDrawer.md) : a mobile-like drawer from screen bottom.
19
20
  - [CorneredGrid](./reference/components/layout/CorneredGrid.md) : corner-oriented layout over a background component.
20
21
  - [Mini](./reference/components/layout/Mini.md) : reduced and collapsable mini component.
22
+ - [Tabs](./reference/components/layout/Tabs.md) : tabbed content manager.
21
23
 
22
24
  ## `components.menus`
23
25
 
@@ -42,7 +44,8 @@ Basic UI components:
42
44
  - [ButtonGroup](./reference/components/ui/ButtonGroup.md) : button bar.
43
45
  - [CopyButton](./reference/components/ui/CopyButton.md) : a copy-to-clipboard button.
44
46
  - [Grade](./reference/components/ui/Grade.md) : a 5-star rating display.
45
- - [LinkButton](./reference/components/ui/LinkButton.md) : a link button/
47
+ - [LinkButton](./reference/components/ui/LinkButton.md) : a link button.
48
+ - [ListGroup](./reference/components/ui/ListGroup.md) : a menu-like list of buttons and links.
46
49
  - [Loader](./reference/components/ui/Loader.md) : the fullscreen initial loader.
47
50
  - [Map](./reference/components/ui/Map.md) : the browseable map (MapLibre GL).
48
51
  - [MapMore](./reference/components/ui/MapMore.md) : advanced version of the browseable map.
@@ -62,8 +65,9 @@ More complex UI components (but not menus):
62
65
  - [Legend](./reference/components/ui/widgets/Legend.md) : a togglable map/picture legend.
63
66
  - [MapFiltersButton](./reference/components/ui/widgets/MapFiltersButton.md) : a togglable map filters button & menu.
64
67
  - [MapLayersButton](./reference/components/ui/widgets/MapLayersButton.md) : a togglable map layers button & menu.
68
+ - [OSMEditors](./reference/components/ui/widgets/OSMEditors.md) : shortcuts for OpenStreetMap editing tools.
69
+ - [PictureLegendActions](./reference/components/ui/widgets/PictureLegendActions.md) : various actions from picture legend.
65
70
  - [Player](./reference/components/ui/widgets/Player.md) : the previous/next/play/pause toolbar.
66
- - [Share](./reference/components/ui/widgets/Share.md) : a togglable share button & menu.
67
71
  - [Zoom](./reference/components/ui/widgets/Zoom.md) : the +/- zoom toolbar.
68
72
 
69
73
  ## `utils`
package/mkdocs.yml CHANGED
@@ -60,8 +60,10 @@ nav:
60
60
  - PhotoViewer: 'reference/components/core/PhotoViewer.md'
61
61
  - Viewer: 'reference/components/core/Viewer.md'
62
62
  - layout:
63
+ - BottomDrawer: 'reference/components/layout/BottomDrawer.md'
63
64
  - CorneredGrid: 'reference/components/layout/CorneredGrid.md'
64
65
  - Mini: 'reference/components/layout/Mini.md'
66
+ - Tabs: 'reference/components/layout/Tabs.md'
65
67
  - menus:
66
68
  - MapBackground: 'reference/components/menus/MapBackground.md'
67
69
  - MapFilters: 'reference/components/menus/MapFilters.md'
@@ -79,14 +81,16 @@ nav:
79
81
  - Legend: 'reference/components/ui/widgets/Legend.md'
80
82
  - MapFiltersButton: 'reference/components/ui/widgets/MapFiltersButton.md'
81
83
  - MapLayersButton: 'reference/components/ui/widgets/MapLayersButton.md'
84
+ - OSMEditors: 'reference/components/ui/widgets/OSMEditors.md'
85
+ - PictureLegendActions: 'reference/components/ui/widgets/PictureLegendActions.md'
82
86
  - Player: 'reference/components/ui/widgets/Player.md'
83
- - Share: 'reference/components/ui/widgets/Share.md'
84
87
  - Zoom: 'reference/components/ui/widgets/Zoom.md'
85
88
  - Button: 'reference/components/ui/Button.md'
86
89
  - ButtonGroup: 'reference/components/ui/ButtonGroup.md'
87
90
  - CopyButton: 'reference/components/ui/CopyButton.md'
88
91
  - Grade: 'reference/components/ui/Grade.md'
89
92
  - LinkButton: 'reference/components/ui/LinkButton.md'
93
+ - ListGroup: 'reference/components/ui/ListGroup.md'
90
94
  - Loader: 'reference/components/ui/Loader.md'
91
95
  - Map: 'reference/components/ui/Map.md'
92
96
  - MapMore: 'reference/components/ui/MapMore.md'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@panoramax/web-viewer",
3
- "version": "3.2.3-develop-6e69906d",
3
+ "version": "3.2.3-develop-8b82a4e5",
4
4
  "description": "Panoramax web viewer for geolocated pictures",
5
5
  "main": "build/index.js",
6
6
  "author": "Panoramax team",
package/public/widgets.html CHANGED
@@ -9,7 +9,7 @@
9
9
  font-family: sans-serif;
10
10
  padding-bottom: 100px;
11
11
  }
12
- h2 { text-align: center; }
12
+ h1, h2, p, nav { text-align: center; }
13
13
  .test-bench {
14
14
  display: flex;
15
15
  width: 100%;
@@ -29,8 +29,19 @@
29
29
  <noscript>You need to enable JavaScript to run this app.</noscript>
30
30
  <h1>Panoramax widgets</h1>
31
31
  <p>Test page for common Panoramax viewer widgets</p>
32
+ <nav>
33
+ <a href="#button">Button</a>
34
+ <a href="#link-button">Link Button</a>
35
+ <a href="#copy-button">Copy button</a>
36
+ <a href="#button-group">Button Group</a>
37
+ <a href="#5stars">5-stars grade</a>
38
+ <a href="#quality-score">Quality Score</a>
39
+ <a href="#search-bar">Search bar</a>
40
+ <a href="#progress-bar">Progress bar</a>
41
+ <a href="#tabs">Tabs</a>
42
+ </nav>
32
43
 
33
- <h2>Button</h2>
44
+ <h2 id="button">Button</h2>
34
45
  <div class="test-bench"><h3>Text + click</h3><pnx-button onclick="alert('Stuff')">Click to do stuff</pnx-button></div>
35
46
  <div class="test-bench"><h3>Icon</h3><pnx-button>⚙️ Settings</pnx-button></div>
36
47
  <div class="test-bench"><h3>Active</h3><pnx-button active="true">Settings</pnx-button></div>
@@ -50,16 +61,28 @@
50
61
  <div class="test-bench"><h3>Outline active</h3><pnx-button kind="outline" active>⚙️ Settings</pnx-button></div>
51
62
  <div class="test-bench"><h3>Outline L</h3><pnx-button kind="outline" size="l">⚙️</pnx-button></div>
52
63
  <div class="test-bench"><h3>Outline XXL</h3><pnx-button kind="outline" size="xxl">⚙️</pnx-button></div>
64
+ <div class="test-bench"><h3>Inline</h3><pnx-button kind="inline">⚙️ Settings</pnx-button></div>
65
+ <div class="test-bench"><h3>Inline active</h3><pnx-button kind="inline" active>⚙️ Settings</pnx-button></div>
66
+ <div class="test-bench"><h3>Inline L</h3><pnx-button kind="inline" size="l">⚙️</pnx-button></div>
67
+ <div class="test-bench"><h3>Inline XXL</h3><pnx-button kind="inline" size="xxl">⚙️</pnx-button></div>
68
+ <div class="test-bench"><h3>Superinline</h3><pnx-button kind="superinline">⚙️ Settings</pnx-button></div>
69
+ <div class="test-bench"><h3>Superinline active</h3><pnx-button kind="superinline" active>⚙️ Settings</pnx-button></div>
70
+ <div class="test-bench"><h3>Superinline L</h3><pnx-button kind="superinline" size="l">⚙️</pnx-button></div>
71
+ <div class="test-bench"><h3>Superinline XXL</h3><pnx-button kind="superinline" size="xxl">⚙️</pnx-button></div>
53
72
  <div class="test-bench"><h3>Flat</h3><pnx-button kind="flat">⚙️ Settings</pnx-button></div>
54
73
  <div class="test-bench"><h3>Flat active</h3><pnx-button kind="flat" active>⚙️ Settings</pnx-button></div>
55
74
  <div class="test-bench"><h3>Flat L</h3><pnx-button kind="flat" size="l">⚙️</pnx-button></div>
56
75
  <div class="test-bench"><h3>Flat XXL</h3><pnx-button kind="flat" size="xxl">⚙️</pnx-button></div>
76
+ <div class="test-bench"><h3>Superflat</h3><pnx-button kind="superflat">⚙️ Settings</pnx-button></div>
77
+ <div class="test-bench"><h3>Superflat active</h3><pnx-button kind="superflat" active>⚙️ Settings</pnx-button></div>
78
+ <div class="test-bench"><h3>Superflat L</h3><pnx-button kind="superflat" size="l">⚙️</pnx-button></div>
79
+ <div class="test-bench"><h3>Superflat XXL</h3><pnx-button kind="superflat" size="xxl">⚙️</pnx-button></div>
57
80
 
58
- <h2>Link Button</h2>
81
+ <h2 id="link-button">Link Button</h2>
59
82
  <div class="test-bench"><h3>None set</h3><pnx-link-button>Click for nothing</pnx-link-button></div>
60
83
  <div class="test-bench"><h3>All set</h3><pnx-link-button target="_blank" href="https://panoramax.fr" title="Do stuff">Click to do stuff</pnx-link-button></div>
61
84
 
62
- <h2>Copy button</h2>
85
+ <h2 id="copy-button">Copy button</h2>
63
86
  <div class="test-bench"><h3>Default + text</h3><pnx-copy-button text="copypasta1"></pnx-copy-button></div>
64
87
  <div class="test-bench"><h3>Custom + text</h3><pnx-copy-button text="copypasta2">🌐 Share URL</pnx-copy-button></div>
65
88
  <div class="test-bench">
@@ -70,7 +93,7 @@
70
93
  </div>
71
94
  </div>
72
95
 
73
- <h2>Button Group</h2>
96
+ <h2 id="button-group">Button Group</h2>
74
97
  <div class="test-bench">
75
98
  <h3>Full Row x2</h3>
76
99
  <div>
@@ -229,11 +252,11 @@
229
252
  </div>
230
253
  </div>
231
254
 
232
- <h2>5-stars grade</h2>
255
+ <h2 id="5stars">5-stars grade</h2>
233
256
  <div class="test-bench"><h3>With a grade</h3><pnx-grade stars="5" /></div>
234
257
  <div class="test-bench"><h3>Without a grade</h3><pnx-grade /></div>
235
258
 
236
- <h2>Quality Score</h2>
259
+ <h2 id="quality-score">Quality Score</h2>
237
260
  <div class="test-bench"><h3>Classic no grade</h3><pnx-quality-score /></div>
238
261
  <div class="test-bench"><h3>Classic 1/5</h3><pnx-quality-score grade="1" /></div>
239
262
  <div class="test-bench"><h3>Classic 2/5</h3><pnx-quality-score grade="2" /></div>
@@ -249,7 +272,7 @@
249
272
  <div class="test-bench"><h3>Input 5/5</h3><pnx-quality-score input="qs" grade="5" /></div>
250
273
  <div class="test-bench"><h3>Input many</h3><pnx-quality-score input="qs" grade="1,3,5" /></div>
251
274
 
252
- <h2>Search bar</h2>
275
+ <h2 id="search-bar">Search bar</h2>
253
276
  <div class="test-bench"><h3>Simple</h3><pnx-search-bar placeholder="Start your search"></pnx-search-bar></div>
254
277
  <div class="test-bench"><h3>With pre</h3><pnx-search-bar placeholder="Look for a place"><span slot="pre">🗺️</span></pnx-search-bar></div>
255
278
  <div class="test-bench">
@@ -262,9 +285,22 @@
262
285
  <div class="test-bench"><h3>Size xxl full</h3><pnx-search-bar size="xxl" placeholder="Look for a place"><span slot="pre">🗺️</span></pnx-search-bar></div>
263
286
  <div class="test-bench"><h3>Size xxl reduced</h3><pnx-search-bar size="xxl" reduceable reduced placeholder="Look for a place"></pnx-search-bar></div>
264
287
 
265
- <h2>Progress bar</h2>
288
+ <h2 id="progress-bar">Progress bar</h2>
266
289
  <div class="test-bench"><h3>Half</h3><pnx-progress-bar value="42"></pnx-progress-bar></div>
267
290
  <div class="test-bench"><h3>Indeterminate</h3><pnx-progress-bar></pnx-progress-bar></div>
268
291
  <div class="test-bench"><h3>Full</h3><pnx-progress-bar value="100"></pnx-progress-bar></div>
292
+
293
+ <h2 id="tabs">Tabs</h2>
294
+ <div class="test-bench">
295
+ <h3>Many</h3>
296
+ <pnx-tabs>
297
+ <h4 slot="title">Tab 1</h4>
298
+ <div slot="content">Tab 1 content</div>
299
+ <h4 slot="title">Tab 2</h4>
300
+ <div slot="content">Tab 2 content</div>
301
+ <h4 slot="title">Tab 3</h4>
302
+ <div slot="content">Tab 3 content</div>
303
+ </pnx-tabs>
304
+ </div>
269
305
  </body>
270
306
  </html>
package/src/components/core/Basic.css CHANGED
@@ -32,6 +32,7 @@
32
32
  --widget-font-active: var(--white);
33
33
  --widget-font-direct: var(--blue);
34
34
  --font-family: "Atkinson Hyperlegible Next", sans-serif;
35
+ overscroll-behavior-y: contain;
35
36
  }
36
37
 
37
38
  .pnx-hidden { display: none !important; }
package/src/components/core/PhotoViewer.css CHANGED
@@ -29,29 +29,6 @@ pnx-photo-viewer pnx-cornered-grid::part(corner-bottom-right) {
29
29
  }
30
30
  }
31
31
 
32
- /* Override legend positioning */
33
- @media screen and (max-width: 576px) {
34
- pnx-photo-viewer pnx-widget-legend {
35
- position: fixed;
36
- top: 0;
37
- left: 0;
38
- right: 0;
39
- }
40
-
41
- pnx-photo-viewer pnx-widget-legend::part(panel) {
42
- border-radius: 0;
43
- border-top: none;
44
- border-left: none;
45
- border-right: none;
46
- width: unset;
47
- max-width: unset;
48
- }
49
-
50
- pnx-photo-viewer pnx-widget-player {
51
- margin-top: 60px;
52
- }
53
- }
54
-
55
32
  @media screen and (min-width: 576px) {
56
33
  pnx-photo-viewer pnx-widget-legend {
57
34
  position: absolute;