@panoramax/web-viewer 3.2.3 → 4.0.0-develop-39167b4d

package/docs/reference/components/ui/Photo.md

@@ -0,0 +1,385 @@
+<a name="Panoramax.components.ui.Photo"></a>
+
+## Panoramax.components.ui.Photo ⇐ <code>[photo-sphere-viewer.core.Viewer](https://photo-sphere-viewer.js.org/api/classes/Core.Viewer.html)</code>
+**Kind**: static class of <code>Panoramax.components.ui</code>  
+**Extends**: <code>[photo-sphere-viewer.core.Viewer](https://photo-sphere-viewer.js.org/api/classes/Core.Viewer.html)</code>  
+**Emits**: [<code>picture-loading</code>](#Panoramax.components.ui.Photo+event_picture-loading), [<code>picture-preview-started</code>](#Panoramax.components.ui.Photo+event_picture-preview-started), [<code>picture-preview-stopped</code>](#Panoramax.components.ui.Photo+event_picture-preview-stopped), [<code>view-rotated</code>](#Panoramax.components.ui.Photo+event_view-rotated), [<code>picture-loaded</code>](#Panoramax.components.ui.Photo+event_picture-loaded), [<code>picture-tiles-loaded</code>](#Panoramax.components.ui.Photo+event_picture-tiles-loaded), [<code>transition-duration-changed</code>](#Panoramax.components.ui.Photo+event_transition-duration-changed), [<code>sequence-playing</code>](#Panoramax.components.ui.Photo+event_sequence-playing), [<code>sequence-stopped</code>](#Panoramax.components.ui.Photo+event_sequence-stopped), [<code>pictures-navigation-changed</code>](#Panoramax.components.ui.Photo+event_pictures-navigation-changed), [<code>ready</code>](#Panoramax.components.ui.Photo+event_ready)  
+
+* [.Photo](#Panoramax.components.ui.Photo) ⇐ <code>[photo-sphere-viewer.core.Viewer](https://photo-sphere-viewer.js.org/api/classes/Core.Viewer.html)</code>
+    * [new Photo(parent, container, [options])](#new_Panoramax.components.ui.Photo_new)
+    * [.getPictureMetadata()](#Panoramax.components.ui.Photo+getPictureMetadata) ⇒ <code>object</code>
+    * [.getPictureId()](#Panoramax.components.ui.Photo+getPictureId) ⇒ <code>string</code> \| <code>null</code>
+    * [.goToNextPicture()](#Panoramax.components.ui.Photo+goToNextPicture)
+    * [.goToPrevPicture()](#Panoramax.components.ui.Photo+goToPrevPicture)
+    * [.goToPosition(lat, lon)](#Panoramax.components.ui.Photo+goToPosition) ⇒ <code>Promise</code>
+    * [.getXY()](#Panoramax.components.ui.Photo+getXY) ⇒ <code>object</code>
+    * [.getXYZ()](#Panoramax.components.ui.Photo+getXYZ) ⇒ <code>object</code>
+    * [.getPictureOriginalHeading()](#Panoramax.components.ui.Photo+getPictureOriginalHeading) ⇒ <code>number</code>
+    * [.getPictureRelativeHeading()](#Panoramax.components.ui.Photo+getPictureRelativeHeading) ⇒ <code>number</code>
+    * [.clearPictureMetadataCache()](#Panoramax.components.ui.Photo+clearPictureMetadataCache)
+    * [.setXYZ(x, y, z)](#Panoramax.components.ui.Photo+setXYZ)
+    * [.setHigherContrast(enable)](#Panoramax.components.ui.Photo+setHigherContrast)
+    * [.getTransitionDuration()](#Panoramax.components.ui.Photo+getTransitionDuration) ⇒ <code>number</code>
+    * [.setTransitionDuration(value)](#Panoramax.components.ui.Photo+setTransitionDuration)
+    * [.showErrorOverlay(e, label, dissmisable)](#Panoramax.components.ui.Photo+showErrorOverlay)
+    * [.playSequence()](#Panoramax.components.ui.Photo+playSequence)
+    * [.stopSequence()](#Panoramax.components.ui.Photo+stopSequence)
+    * [.isSequencePlaying()](#Panoramax.components.ui.Photo+isSequencePlaying) ⇒ <code>boolean</code>
+    * [.toggleSequencePlaying()](#Panoramax.components.ui.Photo+toggleSequencePlaying)
+    * [.getPicturesNavigation()](#Panoramax.components.ui.Photo+getPicturesNavigation) ⇒ <code>string</code>
+    * [.setPicturesNavigation(pn)](#Panoramax.components.ui.Photo+setPicturesNavigation)
+    * [.forceRefresh()](#Panoramax.components.ui.Photo+forceRefresh)
+    * ["ready"](#Panoramax.components.ui.Photo+event_ready)
+    * ["picture-loading"](#Panoramax.components.ui.Photo+event_picture-loading)
+    * ["picture-preview-started"](#Panoramax.components.ui.Photo+event_picture-preview-started)
+    * ["picture-preview-stopped"](#Panoramax.components.ui.Photo+event_picture-preview-stopped)
+    * ["view-rotated"](#Panoramax.components.ui.Photo+event_view-rotated)
+    * ["picture-loaded"](#Panoramax.components.ui.Photo+event_picture-loaded)
+    * ["picture-tiles-loaded"](#Panoramax.components.ui.Photo+event_picture-tiles-loaded)
+    * ["transition-duration-changed"](#Panoramax.components.ui.Photo+event_transition-duration-changed)
+    * ["sequence-playing"](#Panoramax.components.ui.Photo+event_sequence-playing)
+    * ["sequence-stopped"](#Panoramax.components.ui.Photo+event_sequence-stopped)
+    * ["pictures-navigation-changed"](#Panoramax.components.ui.Photo+event_pictures-navigation-changed)
+
+<a name="new_Panoramax.components.ui.Photo_new"></a>
+
+### new Photo(parent, container, [options])
+Photo is the component showing a single picture.
+It uses Photo Sphere Viewer as a basis, and pre-configure dialog with STAC API.
+
+Note that all functions of [PhotoSphereViewer Viewer class](https://photo-sphere-viewer.js.org/api/classes/core.viewer) are available as well.
+
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| parent | <code>Panoramax.components.core.basic</code> |  | The parent view |
+| container | <code>Element</code> |  | The DOM element to create into |
+| [options] | <code>object</code> |  | The viewer options. Can be any of [Photo Sphere Viewer options](https://photo-sphere-viewer.js.org/guide/config.html#standard-options) |
+| [options.transitionDuration] | <code>number</code> |  | The number of milliseconds the transition animation should be. |
+| [options.position] | <code>Array.&lt;number&gt;</code> |  | Initial geographical coordinates (as [latitude, longitude]) to find picture nearby. Only used if no picture ID is set. |
+| [options.shouldGoFast] | <code>function</code> |  | Function returning a boolean to indicate if we may skip loading HD images. |
+| [options.picturesNavigation] | <code>string</code> | <code>&quot;any&quot;</code> | The allowed pictures navigation ("any": no restriction, "seq": only pictures in same sequence, "pic": only selected picture) |
+
+**Example**  
+```js
+const psv = new Panoramax.components.ui.Photo(viewer, psvNode, {transitionDuration: 500})
+```
+<a name="Panoramax.components.ui.Photo+getPictureMetadata"></a>
+
+### photo.getPictureMetadata() ⇒ <code>object</code>
+Access currently shown picture metadata
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Returns**: <code>object</code> - Picture metadata  
+<a name="Panoramax.components.ui.Photo+getPictureId"></a>
+
+### photo.getPictureId() ⇒ <code>string</code> \| <code>null</code>
+Get current picture ID, or loading picture ID if any.
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Returns**: <code>string</code> \| <code>null</code> - Picture ID (current or loading), or null if none is selected.  
+<a name="Panoramax.components.ui.Photo+goToNextPicture"></a>
+
+### photo.goToNextPicture()
+Displays next picture in current sequence (if any)
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Throws**:
+
+- <code>Error</code> If no picture is selected, or no next picture available
+
+<a name="Panoramax.components.ui.Photo+goToPrevPicture"></a>
+
+### photo.goToPrevPicture()
+Displays previous picture in current sequence (if any)
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Throws**:
+
+- <code>Error</code> If no picture is selected, or no previous picture available
+
+<a name="Panoramax.components.ui.Photo+goToPosition"></a>
+
+### photo.goToPosition(lat, lon) ⇒ <code>Promise</code>
+Displays in viewer a picture near to given coordinates
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Fulfil**: <code>string</code> Picture ID if picture found  
+**Reject**: <code>Error</code> If no picture found  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| lat | <code>number</code> | Latitude (WGS84) |
+| lon | <code>number</code> | Longitude (WGS84) |
+
+<a name="Panoramax.components.ui.Photo+getXY"></a>
+
+### photo.getXY() ⇒ <code>object</code>
+Get 2D position of sphere currently shown to user
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Returns**: <code>object</code> - Position in format { x: heading in degrees (0° = North, 90° = East, 180° = South, 270° = West), y: top/bottom position in degrees (-90° = bottom, 0° = front, 90° = top) }  
+<a name="Panoramax.components.ui.Photo+getXYZ"></a>
+
+### photo.getXYZ() ⇒ <code>object</code>
+Get 3D position of sphere currently shown to user
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Returns**: <code>object</code> - Position in format { x: heading in degrees (0° = North, 90° = East, 180° = South, 270° = West), y: top/bottom position in degrees (-90° = bottom, 0° = front, 90° = top), z: zoom (0 = wide, 100 = zoomed in) }  
+<a name="Panoramax.components.ui.Photo+getPictureOriginalHeading"></a>
+
+### photo.getPictureOriginalHeading() ⇒ <code>number</code>
+Get capture orientation of current picture, based on its GPS.
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Returns**: <code>number</code> - Picture original heading in degrees (0 to 360°)  
+<a name="Panoramax.components.ui.Photo+getPictureRelativeHeading"></a>
+
+### photo.getPictureRelativeHeading() ⇒ <code>number</code>
+Computes the relative heading of currently selected picture.
+This gives the angle of capture compared to sequence path (vehicle movement).
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Returns**: <code>number</code> - Relative heading in degrees (-180 to 180)  
+<a name="Panoramax.components.ui.Photo+clearPictureMetadataCache"></a>
+
+### photo.clearPictureMetadataCache()
+Clears the Photo Sphere Viewer metadata cache.
+It is useful when current picture or sequence has changed server-side after first load.
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+<a name="Panoramax.components.ui.Photo+setXYZ"></a>
+
+### photo.setXYZ(x, y, z)
+Change the shown position in picture
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| x | <code>number</code> | X position (in degrees) |
+| y | <code>number</code> | Y position (in degrees) |
+| z | <code>number</code> | Z position (0-100) |
+
+<a name="Panoramax.components.ui.Photo+setHigherContrast"></a>
+
+### photo.setHigherContrast(enable)
+Enable or disable higher contrast on picture
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| enable | <code>boolean</code> | True to enable higher contrast |
+
+<a name="Panoramax.components.ui.Photo+getTransitionDuration"></a>
+
+### photo.getTransitionDuration() ⇒ <code>number</code>
+Get the duration of stay on a picture during a sequence play.
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Returns**: <code>number</code> - The duration (in milliseconds)  
+<a name="Panoramax.components.ui.Photo+setTransitionDuration"></a>
+
+### photo.setTransitionDuration(value)
+Changes the duration of stay on a picture during a sequence play.
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| value | <code>number</code> | The new duration (in milliseconds, between 100 and 3000) |
+
+<a name="Panoramax.components.ui.Photo+showErrorOverlay"></a>
+
+### photo.showErrorOverlay(e, label, dissmisable)
+Display an error message to user on screen
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| e | <code>object</code> | The initial error |
+| label | <code>str</code> | The main error label to display |
+| dissmisable | <code>boolean</code> | Is error dissmisable |
+
+<a name="Panoramax.components.ui.Photo+playSequence"></a>
+
+### photo.playSequence()
+Goes continuously to next picture in sequence as long as possible
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+<a name="Panoramax.components.ui.Photo+stopSequence"></a>
+
+### photo.stopSequence()
+Stops playing current sequence
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+<a name="Panoramax.components.ui.Photo+isSequencePlaying"></a>
+
+### photo.isSequencePlaying() ⇒ <code>boolean</code>
+Is there any sequence being played right now ?
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Returns**: <code>boolean</code> - True if sequence is playing  
+<a name="Panoramax.components.ui.Photo+toggleSequencePlaying"></a>
+
+### photo.toggleSequencePlaying()
+Starts/stops the reading of pictures in a sequence
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+<a name="Panoramax.components.ui.Photo+getPicturesNavigation"></a>
+
+### photo.getPicturesNavigation() ⇒ <code>string</code>
+Get current pictures navigation mode.
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Returns**: <code>string</code> - The picture navigation mode ("any": no restriction, "seq": only pictures in same sequence, "pic": only selected picture)  
+<a name="Panoramax.components.ui.Photo+setPicturesNavigation"></a>
+
+### photo.setPicturesNavigation(pn)
+Switch the allowed navigation between pictures.
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| pn | <code>string</code> | The picture navigation mode ("any": no restriction, "seq": only pictures in same sequence, "pic": only selected picture) |
+
+<a name="Panoramax.components.ui.Photo+forceRefresh"></a>
+
+### photo.forceRefresh()
+Force reload of texture and tiles.
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+<a name="Panoramax.components.ui.Photo+event_ready"></a>
+
+### "ready"
+Triggered once when the panorama image has been loaded and the viewer is ready to perform the first render.
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**See**: [Photo Sphere Viewer documentation](https://photo-sphere-viewer.js.org/guide/events.html#ready)  
+<a name="Panoramax.components.ui.Photo+event_picture-loading"></a>
+
+### "picture-loading"
+Event for picture starting to load
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.picId | <code>string</code> | The picture unique identifier |
+| detail.lon | <code>number</code> | Longitude (WGS84) |
+| detail.lat | <code>number</code> | Latitude (WGS84) |
+| detail.x | <code>number</code> | New x position (in degrees, 0-360), corresponds to heading (0° = North, 90° = East, 180° = South, 270° = West) |
+| detail.y | <code>number</code> | New y position (in degrees) |
+| detail.z | <code>number</code> | New z position (0-100) |
+| detail.first | <code>boolean</code> | True if first picture loaded |
+
+<a name="Panoramax.components.ui.Photo+event_picture-preview-started"></a>
+
+### "picture-preview-started"
+Event for picture preview
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.picId | <code>string</code> | The picture ID |
+| detail.coordinates | <code>Array.&lt;number&gt;</code> | [x,y] coordinates |
+| detail.direction | <code>number</code> | The theorical picture orientation |
+
+<a name="Panoramax.components.ui.Photo+event_picture-preview-stopped"></a>
+
+### "picture-preview-stopped"
+Event for end of picture preview
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.picId | <code>string</code> | The picture ID |
+
+<a name="Panoramax.components.ui.Photo+event_view-rotated"></a>
+
+### "view-rotated"
+Event for viewer rotation
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.x | <code>number</code> | New x position (in degrees, 0-360), corresponds to heading (0° = North, 90° = East, 180° = South, 270° = West) |
+| detail.y | <code>number</code> | New y position (in degrees) |
+| detail.z | <code>number</code> | New Z position (between 0 and 100) |
+
+<a name="Panoramax.components.ui.Photo+event_picture-loaded"></a>
+
+### "picture-loaded"
+Event for picture load (low-resolution image is loaded)
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.picId | <code>string</code> | The picture unique identifier |
+| detail.lon | <code>number</code> | Longitude (WGS84) |
+| detail.lat | <code>number</code> | Latitude (WGS84) |
+| detail.x | <code>number</code> | New x position (in degrees, 0-360), corresponds to heading (0° = North, 90° = East, 180° = South, 270° = West) |
+| detail.y | <code>number</code> | New y position (in degrees) |
+| detail.z | <code>number</code> | New z position (0-100) |
+| detail.first | <code>boolean</code> | True if first picture loaded |
+
+<a name="Panoramax.components.ui.Photo+event_picture-tiles-loaded"></a>
+
+### "picture-tiles-loaded"
+Event launched when all visible tiles of a picture are loaded
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.picId | <code>string</code> | The picture unique identifier |
+
+<a name="Panoramax.components.ui.Photo+event_transition-duration-changed"></a>
+
+### "transition-duration-changed"
+Event for transition duration change
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.duration | <code>string</code> | New duration (in milliseconds) |
+
+<a name="Panoramax.components.ui.Photo+event_sequence-playing"></a>
+
+### "sequence-playing"
+Event for sequence starting to play
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+<a name="Panoramax.components.ui.Photo+event_sequence-stopped"></a>
+
+### "sequence-stopped"
+Event for sequence stopped playing
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+<a name="Panoramax.components.ui.Photo+event_pictures-navigation-changed"></a>
+
+### "pictures-navigation-changed"
+Event for pictures navigation mode change
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.value | <code>string</code> | New mode (any, pic, seq) |
+

package/docs/reference/components/ui/Popup.md

@@ -0,0 +1,56 @@
+<a name="Panoramax.components.ui.Popup"></a>
+
+## Panoramax.components.ui.Popup ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.ui</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Emits**: [<code>open</code>](#Panoramax.components.ui.Popup+event_open), [<code>close</code>](#Panoramax.components.ui.Popup+event_close)  
+**Element**: pnx-popup  
+
+* [.Popup](#Panoramax.components.ui.Popup) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new Popup()](#new_Panoramax.components.ui.Popup_new)
+    * [.properties](#Panoramax.components.ui.Popup+properties) : <code>Object</code>
+    * [.close()](#Panoramax.components.ui.Popup+close)
+    * ["open"](#Panoramax.components.ui.Popup+event_open)
+    * ["close"](#Panoramax.components.ui.Popup+event_close)
+
+<a name="new_Panoramax.components.ui.Popup_new"></a>
+
+### new Popup()
+Popup Element displays a full overlay container.
+
+**Example**  
+```html
+<pnx-popup @close=${() => alert("closed")}>
+   <h3>Popup content</h3>
+</pnx-popup>
+```
+<a name="Panoramax.components.ui.Popup+properties"></a>
+
+### popup.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>Popup</code>](#Panoramax.components.ui.Popup)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [visible] | <code>boolean</code> | <code>true</code> | Is the popup visible to user ? |
+
+<a name="Panoramax.components.ui.Popup+close"></a>
+
+### popup.close()
+Close popup
+
+**Kind**: instance method of [<code>Popup</code>](#Panoramax.components.ui.Popup)  
+<a name="Panoramax.components.ui.Popup+event_open"></a>
+
+### "open"
+Event for popup opening
+
+**Kind**: event emitted by [<code>Popup</code>](#Panoramax.components.ui.Popup)  
+<a name="Panoramax.components.ui.Popup+event_close"></a>
+
+### "close"
+Event for popup closing
+
+**Kind**: event emitted by [<code>Popup</code>](#Panoramax.components.ui.Popup)  

package/docs/reference/components/ui/ProgressBar.md

@@ -0,0 +1,32 @@
+<a name="Panoramax.components.ui.ProgressBar"></a>
+
+## Panoramax.components.ui.ProgressBar ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.ui</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Element**: pnx-progress-bar  
+
+* [.ProgressBar](#Panoramax.components.ui.ProgressBar) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new ProgressBar()](#new_Panoramax.components.ui.ProgressBar_new)
+    * [.properties](#Panoramax.components.ui.ProgressBar+properties) : <code>Object</code>
+
+<a name="new_Panoramax.components.ui.ProgressBar_new"></a>
+
+### new ProgressBar()
+Progress bar with nice styling.
+
+**Example**  
+```html
+<pnx-loader value="42" ._t=${viewer._t} />
+```
+<a name="Panoramax.components.ui.ProgressBar+properties"></a>
+
+### progressBar.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>ProgressBar</code>](#Panoramax.components.ui.ProgressBar)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| [value] | <code>number</code> | Progress bar percentage (0-100) or empty for indeterminate state |
+

package/docs/reference/components/ui/QualityScore.md

@@ -0,0 +1,45 @@
+<a name="Panoramax.components.ui.QualityScore"></a>
+
+## Panoramax.components.ui.QualityScore ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.ui</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Emits**: [<code>change</code>](#Panoramax.components.ui.QualityScore+event_change)  
+**Element**: pnx-quality-score  
+
+* [.QualityScore](#Panoramax.components.ui.QualityScore) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new QualityScore()](#new_Panoramax.components.ui.QualityScore_new)
+    * [.properties](#Panoramax.components.ui.QualityScore+properties) : <code>Object</code>
+    * ["change"](#Panoramax.components.ui.QualityScore+event_change)
+
+<a name="new_Panoramax.components.ui.QualityScore_new"></a>
+
+### new QualityScore()
+Quality Score element displays the picture quality grade.
+
+**Example**  
+```html
+<!-- Read-only -->
+<pnx-quality-score grade="5" ._t=${viewer._t} />
+
+<!-- Input -->
+<pnx-quality-score grade="5" input="pnx-qs-input" @change=${() => alert('changed')} ._t=${viewer._t} />
+```
+<a name="Panoramax.components.ui.QualityScore+properties"></a>
+
+### qualityScore.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>QualityScore</code>](#Panoramax.components.ui.QualityScore)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [grade] | <code>number</code> \| <code>string</code> | <code>0</code> | The grade (5=A, 1=E, 0=none selected), or a list of grades |
+| [input] | <code>string</code> | <code>false</code> | If set, score is an input and value is used as ID prefix |
+
+<a name="Panoramax.components.ui.QualityScore+event_change"></a>
+
+### "change"
+Event for grade change
+
+**Kind**: event emitted by [<code>QualityScore</code>](#Panoramax.components.ui.QualityScore)  

package/docs/reference/components/ui/SearchBar.md

@@ -0,0 +1,63 @@
+<a name="Panoramax.components.ui.SearchBar"></a>
+
+## Panoramax.components.ui.SearchBar ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.ui</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Emits**: [<code>result</code>](#Panoramax.components.ui.SearchBar+event_result)  
+**Element**: pnx-search-bar  
+
+* [.SearchBar](#Panoramax.components.ui.SearchBar) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new SearchBar()](#new_Panoramax.components.ui.SearchBar_new)
+    * [.properties](#Panoramax.components.ui.SearchBar+properties) : <code>Object</code>
+    * ["result"](#Panoramax.components.ui.SearchBar+event_result)
+
+<a name="new_Panoramax.components.ui.SearchBar_new"></a>
+
+### new SearchBar()
+Search Bar Element displays an interactive search widget.
+
+**Example**  
+```html
+<pnx-search-bar
+  id="my-search-bar"
+  placeholder="Search something..."
+  .searcher=${mysearchfct}
+  ._parent=${viewer}
+  reduceable="false"
+  reduced="false"
+  size="xxl" @result=${e => console.log(e.detail)}
+>
+  <!-- Optional icon for display on left-side of search bar -->
+</pnx-search-bar>
+```
+<a name="Panoramax.components.ui.SearchBar+properties"></a>
+
+### searchBar.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>SearchBar</code>](#Panoramax.components.ui.SearchBar)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [id] | <code>string</code> |  | The ID attribute set on component and prefix for input as well |
+| [placeholder] | <code>string</code> |  | Default text to display on empty field |
+| [reduceable] | <code>boolean</code> | <code>false</code> | Can the search bar be collapsed (for mobile view) |
+| [reduced] | <code>boolean</code> | <code>false</code> | Is the search bar currently collapsed ? |
+| [value] | <code>string</code> |  | The default input value |
+| [size] | <code>string</code> | <code>&quot;md&quot;</code> | The component sizing (md, xxl) |
+| [searcher] | <code>function</code> |  | Search callback, function that takes as parameter the input text value, and resolves on list of results ({title, subtitle} and any other data you'd like to get on validation) |
+| [no-menu-closure] | <code>boolean</code> | <code>false</code> | Set to true to ignore menu closure events |
+
+<a name="Panoramax.components.ui.SearchBar+event_result"></a>
+
+### "result"
+Event for search result clicked
+
+**Kind**: event emitted by [<code>SearchBar</code>](#Panoramax.components.ui.SearchBar)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail | <code>object</code> \| <code>null</code> | The data associated to clicked item (format based on searcher function results), or null on reset |
+

package/docs/reference/components/ui/TogglableGroup.md

@@ -0,0 +1,39 @@
+<a name="Panoramax.components.ui.TogglableGroup"></a>
+
+## Panoramax.components.ui.TogglableGroup ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.ui</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Element**: pnx-togglable-group  
+**Slot**: `button` The button on which click leads to open/close menu  
+**Slot**: `default` The menu to make shown/hidden on button click  
+
+* [.TogglableGroup](#Panoramax.components.ui.TogglableGroup) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new TogglableGroup()](#new_Panoramax.components.ui.TogglableGroup_new)
+    * [.properties](#Panoramax.components.ui.TogglableGroup+properties) : <code>Object</code>
+
+<a name="new_Panoramax.components.ui.TogglableGroup_new"></a>
+
+### new TogglableGroup()
+Togglable Group element allows to make a menu appear/disappear based on button click.
+
+**Example**  
+```html
+<pnx-togglable-group padded="false" ._parent=${viewer}>
+  <pnx-button slot="button">
+    Open menu
+  </pnx-button>
+  <div>Menu content</div>
+</pnx-togglable-group>
+```
+<a name="Panoramax.components.ui.TogglableGroup+properties"></a>
+
+### togglableGroup.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>TogglableGroup</code>](#Panoramax.components.ui.TogglableGroup)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| [padded] | <code>string</code> | If set, adds a 15px padding to the menu panel. |
+

package/docs/reference/components/ui/widgets/GeoSearch.md

@@ -0,0 +1,32 @@
+<a name="Panoramax.components.ui.widgets.GeoSearch"></a>
+
+## Panoramax.components.ui.widgets.GeoSearch ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.ui.widgets</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Element**: pnx-widget-geosearch  
+
+* [.GeoSearch](#Panoramax.components.ui.widgets.GeoSearch) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new GeoSearch()](#new_Panoramax.components.ui.widgets.GeoSearch_new)
+    * [.properties](#Panoramax.components.ui.widgets.GeoSearch+properties) : <code>Object</code>
+
+<a name="new_Panoramax.components.ui.widgets.GeoSearch_new"></a>
+
+### new GeoSearch()
+Ready-to-use geocoder search bar.
+
+**Example**  
+```html
+<pnx-widget-geosearch _parent=${viewer} />
+```
+<a name="Panoramax.components.ui.widgets.GeoSearch+properties"></a>
+
+### geoSearch.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>GeoSearch</code>](#Panoramax.components.ui.widgets.GeoSearch)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [geocoder] | <code>string</code> | <code>&quot;nominatim&quot;</code> | The geocoder engine to use (nominatim, ban) |
+