@panoramax/web-viewer 3.2.3 → 4.0.0

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

@@ -0,0 +1,35 @@
+<a name="Panoramax.components.layout.BottomDrawer"></a>
+
+## Panoramax.components.layout.BottomDrawer ⇐ <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-bottom-drawer  
+**Slot**: `default` The drawer content  
+
+* [.BottomDrawer](#Panoramax.components.layout.BottomDrawer) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new BottomDrawer()](#new_Panoramax.components.layout.BottomDrawer_new)
+    * [.properties](#Panoramax.components.layout.BottomDrawer+properties) : <code>Object</code>
+
+<a name="new_Panoramax.components.layout.BottomDrawer_new"></a>
+
+### new BottomDrawer()
+BottomDrawer layout offers a mobile-like drawer menu, coming from bottom of the screen.
+
+**Example**  
+```html
+<pnx-bottom-drawer openness="opened">
+  <p>My drawer content</p>
+</pnx-bottom-drawer>
+```
+<a name="Panoramax.components.layout.BottomDrawer+properties"></a>
+
+### bottomDrawer.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>BottomDrawer</code>](#Panoramax.components.layout.BottomDrawer)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [openness] | <code>string</code> | <code>&quot;half-opened&quot;</code> | How much the drawer should be opened (closed, half-opened, opened) |
+

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/layout/Tabs.md

@@ -0,0 +1,45 @@
+<a name="Panoramax.components.layout.Tabs"></a>
+
+## Panoramax.components.layout.Tabs ⇐ <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-tabs  
+**Slot**: `title` A single tab name  
+**Slot**: `content` A single tab content  
+
+* [.Tabs](#Panoramax.components.layout.Tabs) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new Tabs()](#new_Panoramax.components.layout.Tabs_new)
+    * [.properties](#Panoramax.components.layout.Tabs+properties) : <code>Object</code>
+
+<a name="new_Panoramax.components.layout.Tabs_new"></a>
+
+### new Tabs()
+Tabs offers a nice paged content rendering based on tabs buttons.
+The list of tab names are passed through `title` slots, and content using `content` slots.
+Note that tab names and contents should respect a coherent order.
+
+**Example**  
+```html
+<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>
+```
+<a name="Panoramax.components.layout.Tabs+properties"></a>
+
+### tabs.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>Tabs</code>](#Panoramax.components.layout.Tabs)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [activeTabIndex] | <code>string</code> | <code>0</code> | The selected tab index |
+

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.
+
+**Example**  
+```html
+<pnx-map-legend ._parent=${viewer} />
+```

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

@@ -0,0 +1,16 @@
+<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  
+**Slot**: `editors` External links to map editors, or any tool that may be helpful. Defaults to OSM tools (iD & JOSM).  
+<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} />
+```

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

@@ -0,0 +1,15 @@
+<a name="Panoramax.components.menus.PlayerOptions"></a>
+
+## Panoramax.components.menus.PlayerOptions ⇐ <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-player-options  
+<a name="new_Panoramax.components.menus.PlayerOptions_new"></a>
+
+### new PlayerOptions()
+Player Options menu displays player speed and contrast settings.
+
+**Example**  
+```html
+<pnx-player-options ._parent=${viewer} />
+```

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

@@ -0,0 +1,15 @@
+<a name="Panoramax.components.menus.QualityScoreDoc"></a>
+
+## Panoramax.components.menus.QualityScoreDoc ⇐ <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-quality-score-doc  
+<a name="new_Panoramax.components.menus.QualityScoreDoc_new"></a>
+
+### new QualityScoreDoc()
+Quality Score Doc displays a synthetic summary of how Quality Score is computed.
+
+**Example**  
+```html
+<pnx-quality-score-doc ._t=${viewer._t} />
+```

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

@@ -0,0 +1,15 @@
+<a name="Panoramax.components.menus.ReportForm"></a>
+
+## Panoramax.components.menus.ReportForm ⇐ <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-report-form  
+<a name="new_Panoramax.components.menus.ReportForm_new"></a>
+
+### new ReportForm()
+Report Form displays a form to send issues about pictures.
+
+**Example**  
+```html
+<pnx-report-form ._parent=${viewer} />
+```

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

@@ -0,0 +1,15 @@
+<a name="Panoramax.components.menus.ShareMenu"></a>
+
+## Panoramax.components.menus.ShareMenu ⇐ <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-share-menu  
+<a name="new_Panoramax.components.menus.ShareMenu_new"></a>
+
+### new ShareMenu()
+Share Menu displays links for quick picture sharing.
+
+**Example**  
+```html
+<pnx-share-menu ._parent=${viewer} />
+```

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

@@ -0,0 +1,40 @@
+<a name="Panoramax.components.ui.Button"></a>
+
+## Panoramax.components.ui.Button ⇐ <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-button  
+
+* [.Button](#Panoramax.components.ui.Button) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new Button()](#new_Panoramax.components.ui.Button_new)
+    * [.properties](#Panoramax.components.ui.Button+properties) : <code>Object</code>
+
+<a name="new_Panoramax.components.ui.Button_new"></a>
+
+### new Button()
+Button element displays a direct action button.
+Binds to a HTML button, so you can use any events offered by it.
+
+**Example**  
+```html
+<pnx-button kind="flat" size="l" @click=${() => alert("click!")}>
+   Click on me
+</pnx-button>
+```
+<a name="Panoramax.components.ui.Button+properties"></a>
+
+### button.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>Button</code>](#Panoramax.components.ui.Button)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [active] | <code>boolean</code> | <code>false</code> | Whether the button is in an active state. |
+| [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, outline, flat, superflat, inline, superinline) |
+| [size] | <code>string</code> | <code>&quot;md&quot;</code> | The size of the button (sm, md, l, xl, xxl) |
+| [disabled] | <code>boolean</code> | <code>false</code> | Whether the button is disabled. |
+| [type] | <code>string</code> |  | The button type (e.g., 'submit'). |
+| [title] | <code>string</code> |  | Tooltip text displayed when hovering over the button |
+

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

@@ -0,0 +1,36 @@
+<a name="Panoramax.components.ui.ButtonGroup"></a>
+
+## Panoramax.components.ui.ButtonGroup ⇐ <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-button-group  
+
+* [.ButtonGroup](#Panoramax.components.ui.ButtonGroup) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new ButtonGroup()](#new_Panoramax.components.ui.ButtonGroup_new)
+    * [.properties](#Panoramax.components.ui.ButtonGroup+properties) : <code>Object</code>
+
+<a name="new_Panoramax.components.ui.ButtonGroup_new"></a>
+
+### new ButtonGroup()
+Button Group element allows to merge many button in a single bar.
+
+**Example**  
+```html
+<pnx-button-group id="pnx-widget-player" dir="row" size="xl" class="pnx-print-hidden">
+  <pnx-button>B1</pnx-button>
+  <pnx-button>B2</pnx-button>
+</pnx-button-group>
+```
+<a name="Panoramax.components.ui.ButtonGroup+properties"></a>
+
+### buttonGroup.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>ButtonGroup</code>](#Panoramax.components.ui.ButtonGroup)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| [dir] | <code>string</code> | Group direction (row, column) |
+| [size] | <code>string</code> | Group size (md, xl) |
+

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

@@ -0,0 +1,38 @@
+<a name="Panoramax.components.ui.CopyButton"></a>
+
+## Panoramax.components.ui.CopyButton ⇐ <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-copy-button  
+
+* [.CopyButton](#Panoramax.components.ui.CopyButton) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new CopyButton()](#new_Panoramax.components.ui.CopyButton_new)
+    * [.properties](#Panoramax.components.ui.CopyButton+properties) : <code>Object</code>
+
+<a name="new_Panoramax.components.ui.CopyButton_new"></a>
+
+### new CopyButton()
+Copy Button element allows top copy in clipboard some text.
+
+**Example**  
+```html
+<pnx-copy-button text="content to copy" ._t=${viewer._t}>
+  Copy me !
+</pnx-copy-button>
+```
+<a name="Panoramax.components.ui.CopyButton+properties"></a>
+
+### copyButton.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>CopyButton</code>](#Panoramax.components.ui.CopyButton)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [text] | <code>string</code> |  | Text to copy in clipboard on click (use either this parameter or input, not both) |
+| [input] | <code>input</code> |  | ID of a HTML input field to copy content from in clipboard (use either this parameter or text, not both) |
+| [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, outline, flat, superflat, inline, superinline) |
+| [size] | <code>string</code> | <code>&quot;md&quot;</code> | The size of the button (sm, md, l, xl, xxl) |
+| [unstyled] | <code>boolean</code> | <code>false</code> | Disable all styling (for list group integration) |
+

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

@@ -0,0 +1,32 @@
+<a name="Panoramax.components.ui.Grade"></a>
+
+## Panoramax.components.ui.Grade ⇐ <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-grade  
+
+* [.Grade](#Panoramax.components.ui.Grade) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new Grade()](#new_Panoramax.components.ui.Grade_new)
+    * [.properties](#Panoramax.components.ui.Grade+properties) : <code>Object</code>
+
+<a name="new_Panoramax.components.ui.Grade_new"></a>
+
+### new Grade()
+Grade element displays a 5-star rating.
+
+**Example**  
+```html
+<pnx-grade stars="5" .t=${viewer._t} />
+```
+<a name="Panoramax.components.ui.Grade+properties"></a>
+
+### grade.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>Grade</code>](#Panoramax.components.ui.Grade)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [stars] | <code>number</code> | <code>0</code> | 1 to 5 grade (or 0 for unknown value) |
+

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

@@ -0,0 +1,45 @@
+<a name="Panoramax.components.ui.LinkButton"></a>
+
+## Panoramax.components.ui.LinkButton ⇐ <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-link-button  
+
+* [.LinkButton](#Panoramax.components.ui.LinkButton) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new LinkButton()](#new_Panoramax.components.ui.LinkButton_new)
+    * [.properties](#Panoramax.components.ui.LinkButton+properties) : <code>Object</code>
+
+<a name="new_Panoramax.components.ui.LinkButton_new"></a>
+
+### new LinkButton()
+Link Button element displays a HTML `<a>` anchor with a button style.
+
+**Example**  
+```html
+<pnx-link-button
+  title="Redirect to other website"
+  kind="outline"
+  href="https://panoramax.fr"
+  target="_blank"
+>
+  Click to go on Panoramax
+</pnx-link-button>
+```
+<a name="Panoramax.components.ui.LinkButton+properties"></a>
+
+### linkButton.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>LinkButton</code>](#Panoramax.components.ui.LinkButton)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [href] | <code>string</code> |  | The URL the button should navigate to when clicked |
+| [target] | <code>string</code> |  | Specifies where to open the linked document (e.g., '_blank') |
+| [title] | <code>string</code> |  | Tooltip text displayed when hovering over the button |
+| [download] | <code>string</code> |  | Indicates if the linked resource should be downloaded |
+| [class] | <code>string</code> |  | Custom CSS class for additional styling |
+| [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, outline, flat, superflat) |
+| [size] | <code>string</code> | <code>&quot;md&quot;</code> | The size of the button (sm, md, l, xl, xxl) |
+

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

@@ -0,0 +1,22 @@
+<a name="Panoramax.components.ui.ListGroup"></a>
+
+## Panoramax.components.ui.ListGroup ⇐ <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-list-group  
+**Slot**: `default` Any element you want to add in list.  
+<a name="new_Panoramax.components.ui.ListGroup_new"></a>
+
+### new ListGroup()
+List Group element displays a menu having a list of rapid actions (links, buttons).
+
+Note that you may only want to use basic HTML elements (`a`, `button`) instead of Panoramax ones.
+The list group overrides style, so using `pnx-*` component may conflict on styling.
+
+**Example**  
+```html
+<pnx-list-group>
+  <a href="https://web.site/">First link</a>
+  <button>Second button</button>
+</pnx-list-group>
+```

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

@@ -0,0 +1,56 @@
+<a name="Panoramax.components.ui.Loader"></a>
+
+## Panoramax.components.ui.Loader ⇐ <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-loader  
+
+* [.Loader](#Panoramax.components.ui.Loader) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new Loader()](#new_Panoramax.components.ui.Loader_new)
+    * [.properties](#Panoramax.components.ui.Loader+properties) : <code>Object</code>
+    * [.isVisible()](#Panoramax.components.ui.Loader+isVisible) ⇒ <code>boolean</code>
+    * [.dismiss([err], [errMeaningful], [next])](#Panoramax.components.ui.Loader+dismiss)
+
+<a name="new_Panoramax.components.ui.Loader_new"></a>
+
+### new Loader()
+Loader component display a full page covering for user waiting.
+
+**Example**  
+```html
+<pnx-loader ._parent=${this.viewer} />
+```
+<a name="Panoramax.components.ui.Loader+properties"></a>
+
+### loader.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>Loader</code>](#Panoramax.components.ui.Loader)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [visible] | <code>boolean</code> | <code>true</code> | Is the loader visible to user ? |
+| [no-label] | <code>boolean</code> | <code>false</code> | Set to true to avoid loading label display |
+| [value] | <code>number</code> |  | Progress bar percentage (0-100) |
+
+<a name="Panoramax.components.ui.Loader+isVisible"></a>
+
+### loader.isVisible() ⇒ <code>boolean</code>
+Is the loader currently visible ?
+
+**Kind**: instance method of [<code>Loader</code>](#Panoramax.components.ui.Loader)  
+**Returns**: <code>boolean</code> - True if visible  
+<a name="Panoramax.components.ui.Loader+dismiss"></a>
+
+### loader.dismiss([err], [errMeaningful], [next])
+Dismiss loader, or show error
+
+**Kind**: instance method of [<code>Loader</code>](#Panoramax.components.ui.Loader)  
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [err] | <code>object</code> | <code></code> | Optional error object to show in browser console |
+| [errMeaningful] | <code>str</code> | <code></code> | Optional error message to show to user |
+| [next] | <code>fct</code> | <code></code> | Optional function to run after loader dismiss |
+