@panoramax/web-viewer 4.4.0-develop-746bcb00 → 4.4.0-develop-d8b38e70

package/docs/images/class_diagram.drawio

@@ -1,144 +0,0 @@
-<mxfile host="app.diagrams.net" agent="Mozilla/5.0 (X11; Linux x86_64; rv:136.0) Gecko/20100101 Firefox/136.0" version="26.1.1">
-  <diagram id="C5RBs43oDa-KdzZeNtuy" name="Page-1">
-    <mxGraphModel dx="983" dy="448" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
-      <root>
-        <mxCell id="WIyWlLk6GJQsqaUBKTNV-0" />
-        <mxCell id="WIyWlLk6GJQsqaUBKTNV-1" parent="WIyWlLk6GJQsqaUBKTNV-0" />
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-1" value="Basic" style="swimlane;fontStyle=1;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=26;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" parent="WIyWlLk6GJQsqaUBKTNV-1" vertex="1">
-          <mxGeometry x="20" y="40" width="160" height="34" as="geometry" />
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-3" value="" style="line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;strokeColor=inherit;" parent="-sBJLWWXFzCuZ66xZKHM-1" vertex="1">
-          <mxGeometry y="26" width="160" height="8" as="geometry" />
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-9" value="PhotoViewer" style="swimlane;fontStyle=1;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=26;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" parent="WIyWlLk6GJQsqaUBKTNV-1" vertex="1">
-          <mxGeometry x="20" y="148" width="160" height="34" as="geometry" />
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-10" value="" style="line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;strokeColor=inherit;" parent="-sBJLWWXFzCuZ66xZKHM-9" vertex="1">
-          <mxGeometry y="26" width="160" height="8" as="geometry" />
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-11" value="CoverageMap" style="swimlane;fontStyle=1;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=26;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" parent="WIyWlLk6GJQsqaUBKTNV-1" vertex="1">
-          <mxGeometry x="200" y="148" width="160" height="34" as="geometry" />
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-12" value="" style="line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;strokeColor=inherit;" parent="-sBJLWWXFzCuZ66xZKHM-11" vertex="1">
-          <mxGeometry y="26" width="160" height="8" as="geometry" />
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-13" value="Editor" style="swimlane;fontStyle=1;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=26;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" parent="WIyWlLk6GJQsqaUBKTNV-1" vertex="1">
-          <mxGeometry x="380" y="148" width="160" height="34" as="geometry" />
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-14" value="" style="line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;strokeColor=inherit;" parent="-sBJLWWXFzCuZ66xZKHM-13" vertex="1">
-          <mxGeometry y="26" width="160" height="8" as="geometry" />
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-15" value="Extends" style="endArrow=block;endSize=16;endFill=0;html=1;rounded=0;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-9" target="-sBJLWWXFzCuZ66xZKHM-1" edge="1">
-          <mxGeometry width="160" relative="1" as="geometry">
-            <mxPoint x="310" y="260" as="sourcePoint" />
-            <mxPoint x="470" y="260" as="targetPoint" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-17" value="" style="endArrow=none;html=1;rounded=0;" parent="WIyWlLk6GJQsqaUBKTNV-1" edge="1">
-          <mxGeometry width="50" height="50" relative="1" as="geometry">
-            <mxPoint x="100" y="128" as="sourcePoint" />
-            <mxPoint x="460" y="128" as="targetPoint" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-19" value="" style="endArrow=none;html=1;rounded=0;exitX=0.5;exitY=0;exitDx=0;exitDy=0;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-11" edge="1">
-          <mxGeometry width="50" height="50" relative="1" as="geometry">
-            <mxPoint x="370" y="290" as="sourcePoint" />
-            <mxPoint x="280" y="130" as="targetPoint" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-20" value="" style="endArrow=none;html=1;rounded=0;exitX=0.5;exitY=0;exitDx=0;exitDy=0;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-13" edge="1">
-          <mxGeometry width="50" height="50" relative="1" as="geometry">
-            <mxPoint x="290" y="170" as="sourcePoint" />
-            <mxPoint x="460" y="130" as="targetPoint" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-22" value="components.core" style="swimlane;whiteSpace=wrap;html=1;startSize=23;" parent="WIyWlLk6GJQsqaUBKTNV-1" vertex="1">
-          <mxGeometry x="10" y="10" width="540" height="240" as="geometry" />
-        </mxCell>
-        <mxCell id="l_DTcpemKbOkDnIudQOG-0" value="Viewer" style="swimlane;fontStyle=1;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=26;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" vertex="1" parent="-sBJLWWXFzCuZ66xZKHM-22">
-          <mxGeometry x="60" y="200" width="160" height="34" as="geometry" />
-        </mxCell>
-        <mxCell id="l_DTcpemKbOkDnIudQOG-1" value="" style="line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;strokeColor=inherit;" vertex="1" parent="l_DTcpemKbOkDnIudQOG-0">
-          <mxGeometry y="26" width="160" height="8" as="geometry" />
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-23" value="components.ui" style="swimlane;whiteSpace=wrap;html=1;" parent="WIyWlLk6GJQsqaUBKTNV-1" vertex="1">
-          <mxGeometry x="10" y="271" width="540" height="90" as="geometry" />
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-26" value="Photo" style="swimlane;fontStyle=1;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=26;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" parent="-sBJLWWXFzCuZ66xZKHM-23" vertex="1">
-          <mxGeometry x="10" y="40" width="160" height="34" as="geometry" />
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-27" value="" style="line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;strokeColor=inherit;" parent="-sBJLWWXFzCuZ66xZKHM-26" vertex="1">
-          <mxGeometry y="26" width="160" height="8" as="geometry" />
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-28" value="Loader" style="swimlane;fontStyle=1;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=26;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" parent="-sBJLWWXFzCuZ66xZKHM-23" vertex="1">
-          <mxGeometry x="370" y="40" width="160" height="34" as="geometry" />
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-29" value="" style="line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;strokeColor=inherit;" parent="-sBJLWWXFzCuZ66xZKHM-28" vertex="1">
-          <mxGeometry y="26" width="160" height="8" as="geometry" />
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-24" value="Map" style="swimlane;fontStyle=1;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=26;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" parent="-sBJLWWXFzCuZ66xZKHM-23" vertex="1">
-          <mxGeometry x="190" y="40" width="160" height="34" as="geometry" />
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-25" value="" style="line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;strokeColor=inherit;" parent="-sBJLWWXFzCuZ66xZKHM-24" vertex="1">
-          <mxGeometry y="26" width="160" height="8" as="geometry" />
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-30" value="Use" style="endArrow=open;endSize=12;dashed=1;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0;entryDx=0;entryDy=0;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="l_DTcpemKbOkDnIudQOG-0" target="-sBJLWWXFzCuZ66xZKHM-24" edge="1">
-          <mxGeometry x="0.3561" y="-10" width="160" relative="1" as="geometry">
-            <mxPoint x="370" y="300" as="sourcePoint" />
-            <mxPoint x="234" y="272" as="targetPoint" />
-            <mxPoint as="offset" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-31" value="Use" style="endArrow=open;endSize=12;dashed=1;html=1;rounded=0;entryX=0.123;entryY=0.023;entryDx=0;entryDy=0;entryPerimeter=0;exitX=0.114;exitY=0.919;exitDx=0;exitDy=0;exitPerimeter=0;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-10" target="-sBJLWWXFzCuZ66xZKHM-26" edge="1">
-          <mxGeometry x="0.4701" width="160" relative="1" as="geometry">
-            <mxPoint x="40" y="200" as="sourcePoint" />
-            <mxPoint x="530" y="300" as="targetPoint" />
-            <mxPoint as="offset" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-32" value="Use" style="endArrow=open;endSize=12;dashed=1;html=1;rounded=0;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-1" target="-sBJLWWXFzCuZ66xZKHM-28" edge="1">
-          <mxGeometry x="0.3304" width="160" relative="1" as="geometry">
-            <mxPoint x="111" y="204" as="sourcePoint" />
-            <mxPoint x="290" y="280" as="targetPoint" />
-            <Array as="points">
-              <mxPoint x="580" y="49" />
-              <mxPoint x="580" y="287" />
-            </Array>
-            <mxPoint as="offset" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-38" value="Use" style="endArrow=open;endSize=12;dashed=1;html=1;rounded=0;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0;entryDx=0;entryDy=0;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-13" target="-sBJLWWXFzCuZ66xZKHM-24" edge="1">
-          <mxGeometry x="0.4416" y="4" width="160" relative="1" as="geometry">
-            <mxPoint x="320" y="390" as="sourcePoint" />
-            <mxPoint x="480" y="390" as="targetPoint" />
-            <mxPoint as="offset" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-39" value="Use" style="endArrow=open;endSize=12;dashed=1;html=1;rounded=0;exitX=1;exitY=1;exitDx=0;exitDy=0;entryX=0.75;entryY=0;entryDx=0;entryDy=0;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-11" target="-sBJLWWXFzCuZ66xZKHM-24" edge="1">
-          <mxGeometry x="0.2678" y="6" width="160" relative="1" as="geometry">
-            <mxPoint x="210" y="360" as="sourcePoint" />
-            <mxPoint x="240" y="270" as="targetPoint" />
-            <mxPoint as="offset" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="-sBJLWWXFzCuZ66xZKHM-41" value="Use" style="endArrow=open;endSize=12;dashed=1;html=1;rounded=0;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0.75;entryY=0;entryDx=0;entryDy=0;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-13" target="-sBJLWWXFzCuZ66xZKHM-26" edge="1">
-          <mxGeometry width="160" relative="1" as="geometry">
-            <mxPoint x="150" y="370" as="sourcePoint" />
-            <mxPoint x="310" y="370" as="targetPoint" />
-            <Array as="points">
-              <mxPoint x="350" y="260" />
-              <mxPoint x="190" y="280" />
-            </Array>
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="l_DTcpemKbOkDnIudQOG-4" value="Extends" style="endArrow=block;endSize=16;endFill=0;html=1;rounded=0;exitX=0.441;exitY=0.022;exitDx=0;exitDy=0;exitPerimeter=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="l_DTcpemKbOkDnIudQOG-0">
-          <mxGeometry x="-0.2397" y="-30" width="160" relative="1" as="geometry">
-            <mxPoint x="110" y="158" as="sourcePoint" />
-            <mxPoint x="140" y="182" as="targetPoint" />
-            <mxPoint as="offset" />
-          </mxGeometry>
-        </mxCell>
-      </root>
-    </mxGraphModel>
-  </diagram>
-</mxfile>

package/docs/index.md

@@ -1,159 +0,0 @@
-# Web viewer documentation
-
-Welcome to Panoramax __Web Viewer__ documentation ! It will help you through all phases of setup, run and develop on Panoramax JS pictures viewer.
-
-![Web viewer screenshots](./images/screenshot.jpg)
-
-!!! note
-
-	If at some point you're lost or need help, you can contact us through [issues](https://gitlab.com/panoramax/clients/web-viewer/-/issues) or by [email](mailto:panoramax@panoramax.fr).
-
-## Install
-
-Many options are available for installing the viewer.
-
-=== ":simple-npm: NPM"
-
-	Panoramax viewer is available on NPM as [@panoramax/web-viewer](https://www.npmjs.com/package/@panoramax/web-viewer) package.
-
-	```bash
-	npm install @panoramax/web-viewer
-	```
-
-	If you want the latest version (corresponding to the `develop` git branch), you can use the `develop` NPM dist-tag:
-
-	```bash
-	npm install @panoramax/web-viewer@develop
-	```
-
-=== ":material-web: Hosted"
-
-	You can rely on various providers offering hosted NPM packages, for example JSDelivr.
-
-	```html
-	<!-- You may use another version than 4.1.0, just change the release in URL -->
-	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@panoramax/web-viewer@4.1.0/build/index.css" />
-	<script src="https://cdn.jsdelivr.net/npm/@panoramax/web-viewer@4.1.0/build/index.js"></script>
-	```
-
-=== ":material-code-tags: Source code"
-
-	You can install and use Panoramax web client based on code provided in this repository.
-
-	This library relies on any recent __Node.js__ version, which should be installed on your computer. Then, you can build the library using these commands:
-
-	```bash
-	git clone https://gitlab.com/panoramax/clients/web-viewer.git
-	cd web-viewer/
-	npm install
-	npm build
-	```
-
-
-## Basic usage
-
-First, you need to import Panoramax code:
-
-=== ":fontawesome-brands-js: Old-school JS"
-
-	Make sure to have both JS and CSS code available in your HTML `head` part:
-
-	```html
-	<!-- Change the actual path depending of where you installed the library -->
-	<link rel="stylesheet" type="text/css" href="web-viewer/build/index.css" />
-	<script src="web-viewer/build/index.js"></script>
-
-	<!-- You can use the lightweight version with only PhotoViewer as well -->
-	<link rel="stylesheet" type="text/css" href="web-viewer/build/photoviewer.css" />
-	<script src="web-viewer/build/photoviewer.js"></script>
-	```
-
-=== ":fontawesome-brands-node-js: New-style JS"
-
-	Make sure to import both JS and CSS in your code:
-
-	```js
-	import Panoramax from '@panoramax/web-viewer';
-	import '@panoramax/web-viewer/build/index.css';
-	```
-
-	If you prefer the lightweight version, only containing PhotoViewer component:
-
-	```js
-	import Panoramax from '@panoramax/web-viewer/build/photoviewer';
-	import '@panoramax/web-viewer/build/photoviewer.css';
-	```
-
-Once ready, you can create for example a viewer. We use web components to do so, you can create it in HTML or in other web components:
-
-```html
-<pnx-viewer
-  endpoint="https://api.panoramax.xyz/api"
-/>
-```
-
-[Many options are available to configure it finely](./reference/components/core/Viewer.md).
-
-You may also add some CSS to make sure your component has proper dimensions:
-
-```css
-pnx-viewer {
-	width: 300px;
-	height: 250px;
-}
-```
-
-Beyond classic viewer, other widgets are available and [can be tested online](https://viewer.geovisio.fr/).
-
-__Coverage map__
-
-A simple map for showing Panoramax data availability.
-
-```html
-<pnx-coverage-map
-  endpoint="https://api.panoramax.xyz/api"
-/>
-```
-
-[Many options are available as well](./reference/components/core/CoverageMap.md).
-
-__Photo Viewer__
-
-A photo-only viewer, showing one picture at a time, and offering navigation through sequence and nearby pictures.
-
-```html
-<pnx-photo-viewer
-  endpoint="https://api.panoramax.xyz/api"
-  sequence="id-to-an-existing-sequence"
-  picture="id-to-a-picture-in-this-sequence"
-/>
-```
-
-If you'd like a photo viewer that looks like an iframe embed (with only a small legend widget), you may use this code:
-
-```html
-<pnx-photo-viewer
-  endpoint="https://api.panoramax.xyz/api"
-  sequence="id-to-an-existing-sequence"
-  picture="id-to-a-picture-in-this-sequence"
-  widgets="false"
->
-	<pnx-widget-legend light slot="bottom-right"></pnx-widget-legend>
-</pnx-photo-viewer>
-```
-
-[Many options are available as well](./reference/components/core/PhotoViewer.md).
-
-__Editor__
-
-A map and photo viewer, focused on a single sequence, for previewing edits made to it.
-
-```html
-<pnx-editor
-  endpoint="https://panoramax.openstreetmap.fr/api"
-  sequence="id-to-an-existing-sequence"
-  picture="id-to-a-picture-in-this-sequence"
-/>
-```
-
-[Many options are available as well](./reference/components/core/Editor.md).

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

@@ -1,211 +0,0 @@
-<a name="Panoramax.components.core.Basic"></a>
-
-## Panoramax.components.core.Basic ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
-**Kind**: static class of <code>Panoramax.components.core</code>  
-**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
-**Emits**: [<code>select</code>](#Panoramax.components.core.Basic+event_select), [<code>ready</code>](#Panoramax.components.core.Basic+event_ready), [<code>broken</code>](#Panoramax.components.core.Basic+event_broken), [<code>menu-opened</code>](#Panoramax.components.core.Basic+event_menu-opened)  
-**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 |
-
-
-* [.Basic](#Panoramax.components.core.Basic) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
-    * [new Basic()](#new_Panoramax.components.core.Basic_new)
-    * [.properties](#Panoramax.components.core.Basic+properties) : <code>Object</code>
-    * [.onceReady()](#Panoramax.components.core.Basic+onceReady) ⇒ <code>Promise</code>
-    * [.onceAPIReady()](#Panoramax.components.core.Basic+onceAPIReady) ⇒ <code>Promise</code>
-    * [.getClassName()](#Panoramax.components.core.Basic+getClassName) ⇒ <code>string</code>
-    * [.select([seqId], [picId], [force])](#Panoramax.components.core.Basic+select)
-    * [.isWidthSmall()](#Panoramax.components.core.Basic+isWidthSmall) ⇒ <code>boolean</code>
-    * [.isWidthMedium()](#Panoramax.components.core.Basic+isWidthMedium) ⇒ <code>boolean</code>
-    * [.isHeightSmall()](#Panoramax.components.core.Basic+isHeightSmall) ⇒ <code>boolean</code>
-    * [.getSubComponentsNames()](#Panoramax.components.core.Basic+getSubComponentsNames) ⇒ <code>Array.&lt;string&gt;</code>
-    * [.addEventListener(type, listener, [options])](#Panoramax.components.core.Basic+addEventListener)
-    * [.onceAPIReady()](#Panoramax.components.core.Basic+onceAPIReady) ⇒ <code>Promise</code>
-    * ["menu-opened"](#Panoramax.components.core.Basic+event_menu-opened)
-    * ["select"](#Panoramax.components.core.Basic+event_select)
-    * ["ready"](#Panoramax.components.core.Basic+event_ready)
-    * ["broken"](#Panoramax.components.core.Basic+event_broken)
-
-<a name="new_Panoramax.components.core.Basic_new"></a>
-
-### new Basic()
-Basic core component is a basic container for common functions through all core components.
-It is not intended to be used directly, it's only to be extended by other core components.
-
-<a name="Panoramax.components.core.Basic+properties"></a>
-
-### basic.properties : <code>Object</code>
-Component properties.
-
-**Kind**: instance mixin of [<code>Basic</code>](#Panoramax.components.core.Basic)  
-**Properties**
-
-| Name | Type | Description |
-| --- | --- | --- |
-| endpoint | <code>string</code> | URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md)) |
-| [picture] | <code>string</code> | The picture ID to display |
-| [sequence] | <code>string</code> | The sequence ID of the picture displayed |
-| [fetch-options] | <code>object</code> | Set custom options for fetch calls made against API ([same syntax as fetch options parameter](https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters)) |
-| [lang] | <code>string</code> | To override language used for labels. Defaults to using user's preferred languages. |
-
-<a name="Panoramax.components.core.Basic+onceReady"></a>
-
-### basic.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>Basic</code>](#Panoramax.components.core.Basic)  
-**Fulfil**: <code>null</code> When initialization is complete.  
-**Reject**: <code>string</code> Error message  
-<a name="Panoramax.components.core.Basic+onceAPIReady"></a>
-
-### basic.onceAPIReady() ⇒ <code>Promise</code>
-Waits for initial API setup.
-
-**Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
-**Fulfil**: <code>null</code> When API is ready.  
-**Reject**: <code>string</code> Error message  
-<a name="Panoramax.components.core.Basic+getClassName"></a>
-
-### basic.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>Basic</code>](#Panoramax.components.core.Basic)  
-**Returns**: <code>string</code> - The class name (for example "Basic")  
-<a name="Panoramax.components.core.Basic+select"></a>
-
-### basic.select([seqId], [picId], [force])
-Change the currently picture and/or sequence.
-Calling the method without parameters unselects.
-
-**Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
-
-| 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>
-
-### basic.isWidthSmall() ⇒ <code>boolean</code>
-Is the view running in a small container (small embed or smartphone)
-
-**Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
-**Returns**: <code>boolean</code> - True if container is small  
-<a name="Panoramax.components.core.Basic+isWidthMedium"></a>
-
-### basic.isWidthMedium() ⇒ <code>boolean</code>
-Is the view running in a medium container (576-768px)
-
-**Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
-**Returns**: <code>boolean</code> - True if container is medium  
-<a name="Panoramax.components.core.Basic+isHeightSmall"></a>
-
-### basic.isHeightSmall() ⇒ <code>boolean</code>
-Is the view running in a small-height container (small embed or smartphone)
-
-**Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
-**Returns**: <code>boolean</code> - True if container height is small  
-<a name="Panoramax.components.core.Basic+getSubComponentsNames"></a>
-
-### basic.getSubComponentsNames() ⇒ <code>Array.&lt;string&gt;</code>
-List names of sub-components (like loader, api, map, psv) available in this component.
-
-**Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
-**Returns**: <code>Array.&lt;string&gt;</code> - Sub-components names.  
-<a name="Panoramax.components.core.Basic+addEventListener"></a>
-
-### basic.addEventListener(type, listener, [options])
-Listen to events from this components or one of its sub-components.
-
-For example, you can listen to `map` events using prefix `map:`.
-
-```js
-me.addEventListener("map:move", doSomething);
-```
-
-**Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
-
-| Param | Type | Description |
-| --- | --- | --- |
-| type | <code>string</code> | The event type to listen for |
-| listener | <code>function</code> | The event handler |
-| [options] | <code>object</code> | [Any original addEventListener available options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options) |
-
-<a name="Panoramax.components.core.Basic+onceAPIReady"></a>
-
-### basic.onceAPIReady() ⇒ <code>Promise</code>
-Waits for initial API setup.
-
-**Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
-**Fulfil**: <code>null</code> When API is ready.  
-**Reject**: <code>string</code> Error message  
-<a name="Panoramax.components.core.Basic+event_menu-opened"></a>
-
-### "menu-opened"
-Event for overlaying menu opening
-
-**Kind**: event emitted by [<code>Basic</code>](#Panoramax.components.core.Basic)  
-**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>Basic</code>](#Panoramax.components.core.Basic)  
-**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 when component is ready to use.
-This happens when loader screen disappear, with picture and map loaded.
-
-To follow more precisely loading steps, you can also watch for sub-components `ready` events.
-```js
-// Watch API-readiness
-viewer.addEventListener("api:ready", ...); // From parent
-viewer.api.addEventListener("ready", ...); // Or on sub-component
-```
-
-**Kind**: event emitted by [<code>Basic</code>](#Panoramax.components.core.Basic)  
-<a name="Panoramax.components.core.Basic+event_broken"></a>
-
-### "broken"
-Event for viewer failing to initially load.
-
-To follow more precisely loading failures, you can also watch for sub-components `broken` events.
-```js
-// Watch API breaks
-viewer.addEventListener("api:broken", ...); // From parent
-viewer.api.addEventListener("broken", ...); // Or on sub-component
-```
-
-**Kind**: event emitted by [<code>Basic</code>](#Panoramax.components.core.Basic)  
-**Properties**
-
-| Name | Type | Description |
-| --- | --- | --- |
-| detail.error | <code>string</code> | The user-friendly error message to display |
-