@panoramax/web-viewer 3.2.3-develop-d7e5a16d → 3.2.3-develop-6257391e

package/docs/reference/components/core/Editor.md

@@ -0,0 +1,172 @@
+<a name="Panoramax.components.core.Editor"></a>
+
+## Panoramax.components.core.Editor ⇐ [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)
+**Kind**: static class of <code>Panoramax.components.core</code>  
+**Extends**: [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)  
+**Emits**: [<code>select</code>](Basic.md/#Panoramax.components.core.Basic+event_select), [<code>ready</code>](Basic.md/#Panoramax.components.core.Basic+event_ready), [<code>broken</code>](Basic.md/#Panoramax.components.core.Basic+event_broken)  
+**Element**: pnx-editor  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| loader | [<code>Loader</code>](../ui/Loader.md/#Panoramax.components.ui.Loader) | The loader screen |
+| api | [<code>API</code>](../../utils/API.md/#Panoramax.utils.API) | The API manager |
+| map | [<code>Map</code>](../ui/Map.md/#Panoramax.components.ui.Map) | The MapLibre GL map itself |
+| psv | [<code>Photo</code>](../ui/Photo.md/#Panoramax.components.ui.Photo) | The Photo Sphere Viewer component itself |
+
+
+* [.Editor](#Panoramax.components.core.Editor) ⇐ [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)
+    * [new Editor()](#new_Panoramax.components.core.Editor_new)
+    * [.properties](#Panoramax.components.core.Editor+properties) : <code>Object</code>
+    * [.previewSequenceHeadingChange([relHeading])](#Panoramax.components.core.Editor+previewSequenceHeadingChange)
+    * [.onceReady()](Basic.md/#Panoramax.components.core.Basic+onceReady) ⇒ <code>Promise</code>
+    * [.onceAPIReady()](Basic.md/#Panoramax.components.core.Basic+onceAPIReady) ⇒ <code>Promise</code>
+    * [.getClassName()](Basic.md/#Panoramax.components.core.Basic+getClassName) ⇒ <code>string</code>
+    * [.select([seqId], [picId], [force])](#Panoramax.components.core.Basic+select)
+    * [.isWidthSmall()](Basic.md/#Panoramax.components.core.Basic+isWidthSmall) ⇒ <code>boolean</code>
+    * [.isHeightSmall()](Basic.md/#Panoramax.components.core.Basic+isHeightSmall) ⇒ <code>boolean</code>
+    * ["menu-opened"](Basic.md/#Panoramax.components.core.Basic+event_menu-opened)
+    * ["select"](Basic.md/#Panoramax.components.core.Basic+event_select)
+    * ["ready"](Basic.md/#Panoramax.components.core.Basic+event_ready)
+    * ["broken"](Basic.md/#Panoramax.components.core.Basic+event_broken)
+
+<a name="new_Panoramax.components.core.Editor_new"></a>
+
+### new Editor()
+Editor allows to focus on a single sequence, and preview what you edits would look like.
+It shows both picture and map.
+
+**Example**  
+```html
+<pnx-editor
+  endpoint="https://panoramax.openstreetmap.fr/"
+/>
+```
+<a name="Panoramax.components.core.Editor+properties"></a>
+
+### editor.properties : <code>Object</code>
+Component properties. All of [Basic properties](Basic.md/#Panoramax.components.core.Basic+properties) are available as well.
+
+**Kind**: instance property of [<code>Editor</code>](#Panoramax.components.core.Editor)  
+**Mixes**: [<code>properties</code>](Basic.md/#Panoramax.components.core.Basic+properties)  
+**Overrides**: [<code>properties</code>](Basic.md/#Panoramax.components.core.Basic+properties)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [raster] | <code>object</code> |  | The MapLibre raster source for aerial background. This must be a JSON object following [MapLibre raster source definition](https://maplibre.org/maplibre-style-spec/sources/#raster). |
+| [background] | <code>string</code> | <code>&quot;streets&quot;</code> | Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street. |
+
+<a name="Panoramax.components.core.Editor+previewSequenceHeadingChange"></a>
+
+### editor.previewSequenceHeadingChange([relHeading])
+Preview on map how the new relative heading would reflect on all pictures.
+This doesn't change anything on API-side, it's just a preview.
+
+**Kind**: instance method of [<code>Editor</code>](#Panoramax.components.core.Editor)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [relHeading] | <code>number</code> | The new relative heading compared to sequence path. In degrees, between -180 and 180 (0 = front, -90 = left, 90 = right). Set to null to remove preview. |
+
+<a name="Panoramax.components.core.Basic+onceReady"></a>
+
+### editor.onceReady() ⇒ <code>Promise</code>
+Waits for component to have its first loading done.
+
+Each inheriting class must override this method.
+
+**Kind**: instance method of [<code>Editor</code>](#Panoramax.components.core.Editor)  
+**Fulfil**: <code>null</code> When initialization is complete.  
+**Reject**: <code>string</code> Error message  
+<a name="Panoramax.components.core.Basic+onceAPIReady"></a>
+
+### editor.onceAPIReady() ⇒ <code>Promise</code>
+Waits for initial API setup.
+
+**Kind**: instance method of [<code>Editor</code>](#Panoramax.components.core.Editor)  
+**Fulfil**: <code>null</code> When API is ready.  
+**Reject**: <code>string</code> Error message  
+<a name="Panoramax.components.core.Basic+getClassName"></a>
+
+### editor.getClassName() ⇒ <code>string</code>
+This allows to retrieve an always correct class name.
+This is crap, but avoids issues with Webpack & so on.
+
+Each inheriting class must override this method.
+
+**Kind**: instance method of [<code>Editor</code>](#Panoramax.components.core.Editor)  
+**Returns**: <code>string</code> - The class name (for example "Basic")  
+<a name="Panoramax.components.core.Basic+select"></a>
+
+### editor.select([seqId], [picId], [force])
+Change the currently picture and/or sequence.
+Calling the method without parameters unselects.
+
+**Kind**: instance method of [<code>Editor</code>](#Panoramax.components.core.Editor)  
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [seqId] | <code>string</code> | <code>null</code> | The sequence UUID |
+| [picId] | <code>string</code> | <code>null</code> | The picture UUID |
+| [force] | <code>boolean</code> | <code>false</code> | Force select even if already selected |
+
+<a name="Panoramax.components.core.Basic+isWidthSmall"></a>
+
+### editor.isWidthSmall() ⇒ <code>boolean</code>
+Is the view running in a small container (small embed or smartphone)
+
+**Kind**: instance method of [<code>Editor</code>](#Panoramax.components.core.Editor)  
+**Returns**: <code>boolean</code> - True if container is small  
+<a name="Panoramax.components.core.Basic+isHeightSmall"></a>
+
+### editor.isHeightSmall() ⇒ <code>boolean</code>
+Is the view running in a small-height container (small embed or smartphone)
+
+**Kind**: instance method of [<code>Editor</code>](#Panoramax.components.core.Editor)  
+**Returns**: <code>boolean</code> - True if container height is small  
+<a name="Panoramax.components.core.Basic+event_menu-opened"></a>
+
+### "menu-opened"
+Event for overlaying menu opening
+
+**Kind**: event emitted by [<code>Editor</code>](#Panoramax.components.core.Editor)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.menu | <code>Element</code> | The opened menu |
+
+<a name="Panoramax.components.core.Basic+event_select"></a>
+
+### "select"
+Event for sequence/picture selection
+
+**Kind**: event emitted by [<code>Editor</code>](#Panoramax.components.core.Editor)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.seqId | <code>string</code> | The selected sequence ID |
+| detail.picId | <code>string</code> | The selected picture ID (or null if not a precise picture clicked) |
+| [detail.prevSeqId] | <code>string</code> | The previously selected sequence ID (or null if none) |
+| [detail.prevPicId] | <code>string</code> | The previously selected picture ID (or null if none) |
+
+<a name="Panoramax.components.core.Basic+event_ready"></a>
+
+### "ready"
+Event for component being ready to use (API loaded)
+
+**Kind**: event emitted by [<code>Editor</code>](#Panoramax.components.core.Editor)  
+<a name="Panoramax.components.core.Basic+event_broken"></a>
+
+### "broken"
+Event for viewer failing to initially load
+
+**Kind**: event emitted by [<code>Editor</code>](#Panoramax.components.core.Editor)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.error | <code>string</code> | The user-friendly error message to display |
+

package/docs/reference/components/core/Viewer.md

@@ -0,0 +1,288 @@
+<a name="Panoramax.components.core.Viewer"></a>
+
+## Panoramax.components.core.Viewer ⇐ [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)
+**Kind**: static class of <code>Panoramax.components.core</code>  
+**Extends**: [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)  
+**Emits**: [<code>select</code>](Basic.md/#Panoramax.components.core.Basic+event_select), [<code>ready</code>](Basic.md/#Panoramax.components.core.Basic+event_ready), [<code>broken</code>](Basic.md/#Panoramax.components.core.Basic+event_broken), [<code>focus-changed</code>](#Panoramax.components.core.Viewer+event_focus-changed)  
+**Element**: pnx-viewer  
+**Slot**: `top-left` The top-left corner  
+**Slot**: `top` The top middle corner  
+**Slot**: `top-right` The top-right corner  
+**Slot**: `bottom-left` The bottom-left corner  
+**Slot**: `bottom` The bottom middle corner  
+**Slot**: `bottom-right` The bottom-right corner  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| loader | [<code>Loader</code>](../ui/Loader.md/#Panoramax.components.ui.Loader) | The loader screen |
+| api | [<code>API</code>](../../utils/API.md/#Panoramax.utils.API) | The API manager |
+| [map] | [<code>MapMore</code>](../ui/MapMore.md/#Panoramax.components.ui.MapMore) | The MapLibre GL map itself (if map is enabled) |
+| psv | [<code>Photo</code>](../ui/Photo.md/#Panoramax.components.ui.Photo) | The Photo Sphere Viewer component itself |
+| grid | [<code>CorneredGrid</code>](../layout/CorneredGrid.md/#Panoramax.components.layout.CorneredGrid) | The grid layout manager |
+| [mini] | [<code>Mini</code>](../layout/Mini.md/#Panoramax.components.layout.Mini) | The reduced/collapsed map/photo component (if map is enabled) |
+| popup | [<code>Popup</code>](../ui/Popup.md/#Panoramax.components.ui.Popup) | The popup container |
+| urlHandler | [<code>URLHandler</code>](../../utils/URLHandler.md/#Panoramax.utils.URLHandler) | The URL query parameters manager |
+
+
+* [.Viewer](#Panoramax.components.core.Viewer) ⇐ [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)
+    * [new Viewer()](#new_Panoramax.components.core.Viewer_new)
+    * [.properties](#Panoramax.components.core.Viewer+properties) : <code>Object</code>
+    * [.onceReady()](#Panoramax.components.core.Viewer+onceReady) ⇒ <code>Promise</code>
+    * [.oncePSVReady()](#Panoramax.components.core.Viewer+oncePSVReady) ⇒ <code>Promise</code>
+    * [.onceMapReady()](#Panoramax.components.core.Viewer+onceMapReady) ⇒ <code>Promise</code>
+    * [.onceFirstPicLoaded()](#Panoramax.components.core.Viewer+onceFirstPicLoaded) ⇒ <code>Promise</code>
+    * [.setPopup(visible, [content])](#Panoramax.components.core.Viewer+setPopup)
+    * [.moveCenter()](#Panoramax.components.core.Viewer+moveCenter)
+    * [.moveLeft()](#Panoramax.components.core.Viewer+moveLeft)
+    * [.moveRight()](#Panoramax.components.core.Viewer+moveRight)
+    * [.moveUp()](#Panoramax.components.core.Viewer+moveUp)
+    * [.moveDown()](#Panoramax.components.core.Viewer+moveDown)
+    * [.isMapWide()](#Panoramax.components.core.Viewer+isMapWide) ⇒ <code>boolean</code>
+    * [.onceAPIReady()](Basic.md/#Panoramax.components.core.Basic+onceAPIReady) ⇒ <code>Promise</code>
+    * [.getClassName()](Basic.md/#Panoramax.components.core.Basic+getClassName) ⇒ <code>string</code>
+    * [.select([seqId], [picId], [force])](#Panoramax.components.core.Basic+select)
+    * [.isWidthSmall()](Basic.md/#Panoramax.components.core.Basic+isWidthSmall) ⇒ <code>boolean</code>
+    * [.isHeightSmall()](Basic.md/#Panoramax.components.core.Basic+isHeightSmall) ⇒ <code>boolean</code>
+    * ["focus-changed"](#Panoramax.components.core.Viewer+event_focus-changed)
+    * ["menu-opened"](Basic.md/#Panoramax.components.core.Basic+event_menu-opened)
+    * ["select"](Basic.md/#Panoramax.components.core.Basic+event_select)
+    * ["ready"](Basic.md/#Panoramax.components.core.Basic+event_ready)
+    * ["broken"](Basic.md/#Panoramax.components.core.Basic+event_broken)
+
+<a name="new_Panoramax.components.core.Viewer_new"></a>
+
+### new Viewer()
+Viewer is the main component of Panoramax JS library, showing pictures and map.
+
+This component has a [CorneredGrid](../layout/CorneredGrid.md/#Panoramax.components.layout.CorneredGrid) layout, you can use directly any slot element to pass custom widgets.
+
+**Example**  
+```html
+<!-- Basic example -->
+<pnx-viewer
+  endpoint="https://panoramax.openstreetmap.fr/"
+/>
+
+<!-- With slotted widgets -->
+<pnx-viewer
+  endpoint="https://panoramax.openstreetmap.fr/"
+>
+  <p slot="top-right">My custom text</p>
+</pnx-viewer>
+
+<!-- With only your custom widgets -->
+<pnx-viewer
+  endpoint="https://panoramax.openstreetmap.fr/"
+  widgets="false"
+  map="false"
+>
+  <p slot="top-right">My custom text</p>
+</pnx-viewer>
+```
+<a name="Panoramax.components.core.Viewer+properties"></a>
+
+### viewer.properties : <code>Object</code>
+Component properties. All of [Basic properties](Basic.md/#Panoramax.components.core.Basic+properties) are available as well.
+
+**Kind**: instance property of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+**Mixes**: [<code>properties</code>](Basic.md/#Panoramax.components.core.Basic+properties)  
+**Overrides**: [<code>properties</code>](Basic.md/#Panoramax.components.core.Basic+properties)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [map] | <code>boolean</code> \| <code>object</code> | <code>true</code> | Should map be used (true/false), or an object with [any map option available in Map class](../ui/MapMore.md/#Panoramax.components.ui.MapMore) |
+| [psv] | <code>object</code> |  | [Any option to pass to Photo component](../ui/Photo.md/#Panoramax.components.ui.Photo) as an object |
+| [url-parameters] | <code>string</code> | <code>true</code> | Should the component add and update URL query parameters to save viewer state ? |
+| [focus] | <code>string</code> | <code>&quot;pic&quot;</code> | The component showing up as main component (pic, map) |
+| [geocoder] | <code>string</code> | <code>&quot;nominatim&quot;</code> | The geocoder engine to use (nominatim, ban) |
+| [widgets] | <code>string</code> | <code>true</code> | Use default set of widgets ? Set to false to avoid any widget to show up, and use slots to populate as you like. |
+
+<a name="Panoramax.components.core.Viewer+onceReady"></a>
+
+### viewer.onceReady() ⇒ <code>Promise</code>
+Waits for Viewer to be completely ready (map & PSV loaded, first picture also if one is wanted)
+
+**Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+**Overrides**: [<code>onceReady</code>](Basic.md/#Panoramax.components.core.Basic+onceReady)  
+**Returns**: <code>Promise</code> - When viewer is ready  
+<a name="Panoramax.components.core.Viewer+oncePSVReady"></a>
+
+### viewer.oncePSVReady() ⇒ <code>Promise</code>
+Waiting for Photo Sphere Viewer to be available.
+
+**Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+**Returns**: <code>Promise</code> - When PSV is ready to use  
+<a name="Panoramax.components.core.Viewer+onceMapReady"></a>
+
+### viewer.onceMapReady() ⇒ <code>Promise</code>
+Waiting for map to be available.
+
+**Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+**Returns**: <code>Promise</code> - When map is ready to use  
+<a name="Panoramax.components.core.Viewer+onceFirstPicLoaded"></a>
+
+### viewer.onceFirstPicLoaded() ⇒ <code>Promise</code>
+Waits for first picture to display on PSV.
+
+**Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+**Fulfil**: <code>undefined</code> When picture is shown  
+<a name="Panoramax.components.core.Viewer+setPopup"></a>
+
+### viewer.setPopup(visible, [content])
+Change full-page popup visibility and content
+
+**Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| visible | <code>boolean</code> |  | True to make it appear |
+| [content] | <code>string</code> \| <code>Array.&lt;Element&gt;</code> | <code>null</code> | The new popup content |
+
+<a name="Panoramax.components.core.Viewer+moveCenter"></a>
+
+### viewer.moveCenter()
+Move the view of main component to its center.
+For map, center view on selected picture.
+For picture, center view on image center.
+
+**Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+<a name="Panoramax.components.core.Viewer+moveLeft"></a>
+
+### viewer.moveLeft()
+Moves the view of main component slightly to the left.
+
+**Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+<a name="Panoramax.components.core.Viewer+moveRight"></a>
+
+### viewer.moveRight()
+Moves the view of main component slightly to the right.
+
+**Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+<a name="Panoramax.components.core.Viewer+moveUp"></a>
+
+### viewer.moveUp()
+Moves the view of main component slightly to the top.
+
+**Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+<a name="Panoramax.components.core.Viewer+moveDown"></a>
+
+### viewer.moveDown()
+Moves the view of main component slightly to the bottom.
+
+**Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+<a name="Panoramax.components.core.Viewer+isMapWide"></a>
+
+### viewer.isMapWide() ⇒ <code>boolean</code>
+Is the map shown as main element instead of viewer (wide map mode) ?
+
+**Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+**Returns**: <code>boolean</code> - True if map is wider than viewer  
+**Throws**:
+
+- <code>Error</code> If map is not enabled
+
+<a name="Panoramax.components.core.Basic+onceAPIReady"></a>
+
+### viewer.onceAPIReady() ⇒ <code>Promise</code>
+Waits for initial API setup.
+
+**Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+**Fulfil**: <code>null</code> When API is ready.  
+**Reject**: <code>string</code> Error message  
+<a name="Panoramax.components.core.Basic+getClassName"></a>
+
+### viewer.getClassName() ⇒ <code>string</code>
+This allows to retrieve an always correct class name.
+This is crap, but avoids issues with Webpack & so on.
+
+Each inheriting class must override this method.
+
+**Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+**Returns**: <code>string</code> - The class name (for example "Basic")  
+<a name="Panoramax.components.core.Basic+select"></a>
+
+### viewer.select([seqId], [picId], [force])
+Change the currently picture and/or sequence.
+Calling the method without parameters unselects.
+
+**Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [seqId] | <code>string</code> | <code>null</code> | The sequence UUID |
+| [picId] | <code>string</code> | <code>null</code> | The picture UUID |
+| [force] | <code>boolean</code> | <code>false</code> | Force select even if already selected |
+
+<a name="Panoramax.components.core.Basic+isWidthSmall"></a>
+
+### viewer.isWidthSmall() ⇒ <code>boolean</code>
+Is the view running in a small container (small embed or smartphone)
+
+**Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+**Returns**: <code>boolean</code> - True if container is small  
+<a name="Panoramax.components.core.Basic+isHeightSmall"></a>
+
+### viewer.isHeightSmall() ⇒ <code>boolean</code>
+Is the view running in a small-height container (small embed or smartphone)
+
+**Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+**Returns**: <code>boolean</code> - True if container height is small  
+<a name="Panoramax.components.core.Viewer+event_focus-changed"></a>
+
+### "focus-changed"
+Event for focus change (either map or picture is shown wide)
+
+**Kind**: event emitted by [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.focus | <code>string</code> | Component now focused on (map, pic) |
+
+<a name="Panoramax.components.core.Basic+event_menu-opened"></a>
+
+### "menu-opened"
+Event for overlaying menu opening
+
+**Kind**: event emitted by [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.menu | <code>Element</code> | The opened menu |
+
+<a name="Panoramax.components.core.Basic+event_select"></a>
+
+### "select"
+Event for sequence/picture selection
+
+**Kind**: event emitted by [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.seqId | <code>string</code> | The selected sequence ID |
+| detail.picId | <code>string</code> | The selected picture ID (or null if not a precise picture clicked) |
+| [detail.prevSeqId] | <code>string</code> | The previously selected sequence ID (or null if none) |
+| [detail.prevPicId] | <code>string</code> | The previously selected picture ID (or null if none) |
+
+<a name="Panoramax.components.core.Basic+event_ready"></a>
+
+### "ready"
+Event for component being ready to use (API loaded)
+
+**Kind**: event emitted by [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+<a name="Panoramax.components.core.Basic+event_broken"></a>
+
+### "broken"
+Event for viewer failing to initially load
+
+**Kind**: event emitted by [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.error | <code>string</code> | The user-friendly error message to display |
+

package/docs/reference/components/layout/CorneredGrid.md

@@ -0,0 +1,29 @@
+<a name="Panoramax.components.layout.CorneredGrid"></a>
+
+## Panoramax.components.layout.CorneredGrid ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.layout</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Element**: pnx-cornered-grid  
+**Slot**: `bg` The full size background component  
+**Slot**: `top-left` The top-left corner  
+**Slot**: `top` The top middle corner  
+**Slot**: `top-right` The top-right corner  
+**Slot**: `bottom-left` The bottom-left corner  
+**Slot**: `bottom` The bottom middle corner  
+**Slot**: `bottom-right` The bottom-right corner  
+<a name="new_Panoramax.components.layout.CorneredGrid_new"></a>
+
+### new CorneredGrid()
+CorneredGrid layout offers a convenient way to display overlay widgets on top of a background component.
+This is useful for showing buttons in corners over a map or picture display.
+Grid layout is organised through many slots (background and corners) : two rows (top, bottom) and three columns (right, middle, left).
+
+**Example**  
+```html
+<pnx-cornered-grid>
+  <pnx-map slot="bg" />
+  <pnx-button slot="top-left" />
+  <pnx-button slot="top-left" />
+  <pnx-legend slot="bottom" />
+</pnx-cornered-grid>
+```

package/docs/reference/components/layout/Mini.md

@@ -0,0 +1,45 @@
+<a name="Panoramax.components.layout.Mini"></a>
+
+## Panoramax.components.layout.Mini ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.layout</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Emits**: [<code>expand</code>](#Panoramax.components.layout.Mini+event_expand)  
+**Element**: pnx-mini  
+**Slot**: `default` The component to display.  
+
+* [.Mini](#Panoramax.components.layout.Mini) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new Mini()](#new_Panoramax.components.layout.Mini_new)
+    * [.properties](#Panoramax.components.layout.Mini+properties) : <code>Object</code>
+    * ["expand"](#Panoramax.components.layout.Mini+event_expand)
+
+<a name="new_Panoramax.components.layout.Mini_new"></a>
+
+### new Mini()
+Mini layout allows to show a reduced or collapsed component in a corner of a main component.
+For example, show a reduced map on top of a photo display.
+
+**Example**  
+```html
+<pnx-mini icon=${fa(faMap)} ._parent=${viewer}>
+  <pnx-map />
+</pnx-mini>
+```
+<a name="Panoramax.components.layout.Mini+properties"></a>
+
+### mini.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>Mini</code>](#Panoramax.components.layout.Mini)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [icon] | <code>string</code> |  | The icon to use in collapsed button. |
+| [collapsed] | <code>boolean</code> | <code>false</code> | Collapsed displays only a simple button. |
+
+<a name="Panoramax.components.layout.Mini+event_expand"></a>
+
+### "expand"
+Event when user ask for component expand
+
+**Kind**: event emitted by [<code>Mini</code>](#Panoramax.components.layout.Mini)  

package/docs/reference/components/menus/MapBackground.md

@@ -0,0 +1,32 @@
+<a name="Panoramax.components.menus.MapBackground"></a>
+
+## Panoramax.components.menus.MapBackground ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.menus</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Element**: pnx-map-background  
+
+* [.MapBackground](#Panoramax.components.menus.MapBackground) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new MapBackground()](#new_Panoramax.components.menus.MapBackground_new)
+    * [.properties](#Panoramax.components.menus.MapBackground+properties) : <code>Object</code>
+
+<a name="new_Panoramax.components.menus.MapBackground_new"></a>
+
+### new MapBackground()
+Map Background menu allows user to select background.
+
+**Example**  
+```html
+<pnx-map-background size="sm" _parent=${viewer} />
+```
+<a name="Panoramax.components.menus.MapBackground+properties"></a>
+
+### mapBackground.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>MapBackground</code>](#Panoramax.components.menus.MapBackground)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [size] | <code>string</code> | <code>&quot;md&quot;</code> | The size of the button (sm, md) |
+

package/docs/reference/components/menus/MapFilters.md

@@ -0,0 +1,15 @@
+<a name="Panoramax.components.menus.MapFilters"></a>
+
+## Panoramax.components.menus.MapFilters ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.menus</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Element**: pnx-map-filters-menu  
+<a name="new_Panoramax.components.menus.MapFilters_new"></a>
+
+### new MapFilters()
+Map Filters menu allows user to select map data they want displayed.
+
+**Example**  
+```html
+<pnx-map-filters-menu user-search="" _parent=${viewer} />
+```

package/docs/reference/components/menus/MapLayers.md

@@ -0,0 +1,15 @@
+<a name="Panoramax.components.menus.MapLayers"></a>
+
+## Panoramax.components.menus.MapLayers ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.menus</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Element**: pnx-map-layers-menu  
+<a name="new_Panoramax.components.menus.MapLayers_new"></a>
+
+### new MapLayers()
+Map Layers menu allows user to select background and map theme.
+
+**Example**  
+```html
+<pnx-map-layers-menu _parent=${viewer} />
+```

package/docs/reference/components/menus/MapLegend.md

@@ -0,0 +1,15 @@
+<a name="Panoramax.components.menus.MapLegend"></a>
+
+## Panoramax.components.menus.MapLegend ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.menus</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Element**: pnx-map-legend  
+<a name="new_Panoramax.components.menus.MapLegend_new"></a>
+
+### new MapLegend()
+Map legend displays information about map sources and Panoramax.
+
+**Example**  
+```html
+<pnx-map-legend ._parent=${viewer} />
+```

package/docs/reference/components/menus/PictureLegend.md

@@ -0,0 +1,15 @@
+<a name="Panoramax.components.menus.PictureLegend"></a>
+
+## Panoramax.components.menus.PictureLegend ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.menus</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Element**: pnx-picture-legend  
+<a name="new_Panoramax.components.menus.PictureLegend_new"></a>
+
+### new PictureLegend()
+Picture legend shows info about picture author, capture date, address, and access to metadata popup.
+
+**Example**  
+```html
+<pnx-picture-legend ._parent=${viewer} />
+```

package/docs/reference/components/menus/PictureMetadata.md

@@ -0,0 +1,15 @@
+<a name="Panoramax.components.menus.PictureMetadata"></a>
+
+## Panoramax.components.menus.PictureMetadata ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.menus</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Element**: pnx-picture-metadata  
+<a name="new_Panoramax.components.menus.PictureMetadata_new"></a>
+
+### new PictureMetadata()
+Picture metadata displays detailed info about a single picture (ID, capture context, EXIF attributes...).
+
+**Example**  
+```html
+<pnx-picture-metadata ._parent=${viewer} />
+```