@panoramax/web-viewer 4.0.3-develop-5b0cd5bb → 4.0.3-develop-25adfc80

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

@@ -4,6 +4,11 @@
 **Kind**: static class of <code>Panoramax.components.menus</code>  
 **Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
 **Element**: pnx-map-legend  
+
+* [.MapLegend](#Panoramax.components.menus.MapLegend) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new MapLegend()](#new_Panoramax.components.menus.MapLegend_new)
+    * [.properties](#Panoramax.components.menus.MapLegend+properties) : <code>Object</code>
+
 <a name="new_Panoramax.components.menus.MapLegend_new"></a>
 
 ### new MapLegend()
@@ -13,3 +18,15 @@ Map legend displays information about map sources.
 ```html
 <pnx-map-legend ._parent=${viewer} />
 ```
+<a name="Panoramax.components.menus.MapLegend+properties"></a>
+
+### mapLegend.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>MapLegend</code>](#Panoramax.components.menus.MapLegend)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [light] | <code>boolean</code> | <code>false</code> | Lighter version (for iframes) |
+

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

@@ -5,6 +5,11 @@
 **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).  
+
+* [.PictureLegend](#Panoramax.components.menus.PictureLegend) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new PictureLegend()](#new_Panoramax.components.menus.PictureLegend_new)
+    * [.properties](#Panoramax.components.menus.PictureLegend+properties) : <code>Object</code>
+
 <a name="new_Panoramax.components.menus.PictureLegend_new"></a>
 
 ### new PictureLegend()
@@ -14,3 +19,15 @@ Picture legend shows info about picture author, capture date, address, and acces
 ```html
 <pnx-picture-legend ._parent=${viewer} />
 ```
+<a name="Panoramax.components.menus.PictureLegend+properties"></a>
+
+### pictureLegend.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>PictureLegend</code>](#Panoramax.components.menus.PictureLegend)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [light] | <code>boolean</code> | <code>false</code> | Lighter version (for iframes) |
+

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

@@ -42,8 +42,9 @@ Component properties.
 **Kind**: instance property of [<code>Legend</code>](#Panoramax.components.ui.widgets.Legend)  
 **Properties**
 
-| Name | Type | Description |
-| --- | --- | --- |
-| [focus] | <code>string</code> | The focused main component (map, pic) |
-| [picture] | <code>string</code> | The picture ID |
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [focus] | <code>string</code> |  | The focused main component (map, pic) |
+| [picture] | <code>string</code> |  | The picture ID |
+| [light] | <code>boolean</code> | <code>false</code> | Lighter version (for iframes) |
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.0.3-develop-5b0cd5bb",
+  "version": "4.0.3-develop-25adfc80",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/components/core/PhotoViewer.js

@@ -7,7 +7,7 @@ import URLHandler from "../../utils/URLHandler";
 import Basic from "./Basic";
 import Photo, { PSV_DEFAULT_ZOOM, PSV_ANIM_DURATION } from "../ui/Photo";
 import { createWebComp } from "../../utils/widgets";
-import { isNullId } from "../../utils/utils";
+import { isNullId, isInIframe } from "../../utils/utils";
 import { default as InitParameters, alterPSVState, alterMapState, alterPhotoViewerState } from "../../utils/InitParameters";
 import PresetManager from "../../utils/PresetsManager";
 
@@ -125,20 +125,33 @@ export default class PhotoViewer extends Basic {
 	/** @private */
 	_initWidgets() {
 		if(this._initParams.getParentPostInit().widgets !== "false") {
-			this.grid.appendChild(createWebComp("pnx-widget-player", {
-				slot: "top",
-				_parent: this,
-				class: "pnx-only-psv pnx-print-hidden",
-				size: this.isHeightSmall() ? "md": "xl",
-			}));
-
-			this.grid.appendChild(createWebComp("pnx-annotations-switch", {
-				slot: "top",
-				_parent: this,
-				class: "pnx-only-psv pnx-print-hidden",
-			}));
-
-			if(!this.isWidthSmall()) {
+			if(!isInIframe()) {
+				this.grid.appendChild(createWebComp("pnx-widget-player", {
+					slot: "top",
+					_parent: this,
+					class: "pnx-only-psv pnx-print-hidden",
+					size: this.isHeightSmall() ? "md": "xl",
+				}));
+
+				this.grid.appendChild(createWebComp("pnx-annotations-switch", {
+					slot: "top",
+					_parent: this,
+					class: "pnx-only-psv pnx-print-hidden",
+					size: this.isHeightSmall() ? "md": "xl",
+				}));
+			}
+
+			if(isInIframe()) {
+				this.legend = createWebComp("pnx-widget-legend", {
+					slot: "bottom-right",
+					light: true,
+					_parent: this,
+					focus: this._initParams.getParentPostInit().focus,
+					picture: this._initParams.getParentPostInit().picture,
+				});
+				this.grid.appendChild(this.legend);
+			}
+			else if(!this.isWidthSmall()) {
 				this.legend = createWebComp("pnx-widget-legend", {
 					slot: !this.isWidthSmall() ? "top-left" : undefined,
 					_parent: this,

package/src/components/core/Viewer.css

@@ -56,7 +56,6 @@ pnx-viewer pnx-mini {
 	pnx-viewer pnx-mini {
 		min-width: unset;
 		min-height: unset;
-		margin-bottom: 40px;
 	}
 }
 

package/src/components/core/Viewer.js

@@ -3,10 +3,9 @@
 import "./Viewer.css";
 import { linkMapAndPhoto, saveMapParamsToLocalStorage, getMapParamsFromLocalStorage } from "../../utils/map";
 import PhotoViewer, {KEYBOARD_SKIP_FOCUS_WIDGETS} from "./PhotoViewer";
-import Basic from "./Basic";
 import MapMore from "../ui/MapMore";
 import { initMapKeyboardHandler } from "../../utils/map";
-import { isNullId } from "../../utils/utils";
+import { isNullId, isInIframe } from "../../utils/utils";
 import { createWebComp } from "../../utils/widgets";
 import { fa } from "../../utils/widgets";
 import { faPanorama } from "@fortawesome/free-solid-svg-icons/faPanorama";
@@ -16,7 +15,6 @@ import { default as InitParameters, alterMapState, alterViewerState } from "../.
 
 
 export const PSV_ZOOM_DELTA = 20;
-const PSV_MOVE_DELTA = Math.PI / 6;
 const MAP_MOVE_DELTA = 100;
 
 
@@ -150,7 +148,17 @@ export default class Viewer extends PhotoViewer {
 				_parent: this
 			}));
 			
-			if(!this.isWidthSmall()) {
+			if(isInIframe()) {
+				this.legend = createWebComp("pnx-widget-legend", {
+					slot: "bottom-right",
+					light: true,
+					_parent: this,
+					focus: this._initParams.getParentPostInit().focus,
+					picture: this._initParams.getParentPostInit().picture,
+				});
+				this.grid.appendChild(this.legend);
+			}
+			else if(!this.isWidthSmall()) {
 				this.legend = createWebComp("pnx-widget-legend", {
 					slot: this.isWidthSmall() ? "top" : "top-left",
 					_parent: this,
@@ -174,33 +182,38 @@ export default class Viewer extends PhotoViewer {
 				});
 			}
 
-			this.grid.appendChild(createWebComp("pnx-widget-player", {
-				slot: "top",
-				_parent: this,
-				class: "pnx-only-psv pnx-print-hidden",
-				size: this.isHeightSmall() ? "md": "xl",
-			}));
+			if(!isInIframe()) {
+				this.grid.appendChild(createWebComp("pnx-widget-player", {
+					slot: "top",
+					_parent: this,
+					class: "pnx-only-psv pnx-print-hidden",
+					size: this.isHeightSmall() ? "md": "xl",
+				}));
+			
+				this.grid.appendChild(createWebComp("pnx-annotations-switch", {
+					slot: "top",
+					_parent: this,
+					class: "pnx-only-psv pnx-print-hidden",
+					size: this.isHeightSmall() ? "md": "xl",
+				}));
 
-			this.grid.appendChild(createWebComp("pnx-annotations-switch", {
-				slot: "top",
-				_parent: this,
-				class: "pnx-only-psv pnx-print-hidden",
-			}));
+				this.grid.appendChild(createWebComp("pnx-widget-geosearch", {
+					slot: this.isWidthSmall() ? "top-right" : "top-left",
+					_parent: this,
+					class: "pnx-only-map pnx-print-hidden",
+					geocoder: this._initParams.getParentPostInit().geocoder,
+				}));
 
-			this.grid.appendChild(createWebComp("pnx-widget-geosearch", {
-				slot: this.isWidthSmall() ? "top-right" : "top-left",
-				_parent: this,
-				class: "pnx-only-map pnx-print-hidden",
-				geocoder: this._initParams.getParentPostInit().geocoder,
-			}));
-			this.grid.appendChild(createWebComp("pnx-widget-mapfilters", {
-				slot: this.isWidthSmall() ? "top-right" : "top-left",
-				_parent: this,
-				"user-search": this.api._endpoints.user_search !== null && this.api._endpoints.user_tiles !== null,
-				"quality-score": this.map?._hasQualityScore?.() || false,
-				class: "pnx-only-map pnx-print-hidden",
-			}));
-			this.grid.appendChild(createWebComp("pnx-widget-maplayers", { slot: "top-right", _parent: this, class: "pnx-only-map pnx-print-hidden" }));
+				this.grid.appendChild(createWebComp("pnx-widget-mapfilters", {
+					slot: this.isWidthSmall() ? "top-right" : "top-left",
+					_parent: this,
+					"user-search": this.api._endpoints.user_search !== null && this.api._endpoints.user_tiles !== null,
+					"quality-score": this.map?._hasQualityScore?.() || false,
+					class: "pnx-only-map pnx-print-hidden",
+				}));
+				
+				this.grid.appendChild(createWebComp("pnx-widget-maplayers", { slot: "top-right", _parent: this, class: "pnx-only-map pnx-print-hidden" }));
+			}
 		}
 	}
 

package/src/components/menus/MapLegend.js

@@ -24,17 +24,34 @@ export default class MapLegend extends LitElement {
 		}
 	`;
 
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.menus.MapLegend#
+	 * @type {Object}
+	 * @property {boolean} [light=false] Lighter version (for iframes)
+	 */
+	static properties = {
+		light: {type: Boolean},
+	};
+
+	constructor() {
+		super();
+		this.light = false;
+	}
+
 	/** @private */
 	render() {
 		/* eslint-disable indent */
 		const mapAttrib = this._parent?.map?._attribution?._innerContainer;
 		const mapLabelParts = this._parent?._t.map.map_data.split("{m}");
 
-		return html`
-			${mapAttrib && mapAttrib.innerHTML.length > 0
-				? html`${mapLabelParts.shift()}${mapAttrib}${mapLabelParts.shift()}`
-				: nothing}
-		`;
+		return this.light ?
+			(mapAttrib && mapAttrib.innerHTML.length > 0 ? mapAttrib : nothing)
+			: html`
+				${mapAttrib && mapAttrib.innerHTML.length > 0
+					? html`${mapLabelParts.shift()}${mapAttrib}${mapLabelParts.shift()}`
+					: nothing}
+			`;
 	}
 }
 

package/src/components/menus/PictureLegend.js

@@ -1,4 +1,5 @@
-import { LitElement, html, nothing, css } from "lit";
+import { LitElement, nothing, css } from "lit";
+import { html, unsafeStatic } from "lit/static-html.js";
 import { classMap } from "lit/directives/class-map.js";
 import { fa } from "../../utils/widgets";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft";
@@ -127,10 +128,22 @@ export default class PictureLegend extends LitElement {
 
 		/* Editors */
 		#pic-legend-editors { margin: 0 10px; }
+
+		/* Light version */
+		.pnx-picture-legend-light {
+			width: max-content;
+			font-size: 10px;
+		}
 	`];
 
-	/** @private */
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.menus.PictureLegend#
+	 * @type {Object}
+	 * @property {boolean} [light=false] Lighter version (for iframes)
+	 */
 	static properties = {
+		light: {type: Boolean},
 		_caption: { state: true },
 		_addr: { state: true },
 		_expanded: { state: true },
@@ -142,6 +155,7 @@ export default class PictureLegend extends LitElement {
 		super();
 		this._expanded = true;
 		this.collapsable = false;
+		this.light = false;
 	}
 
 	/** @private */
@@ -209,6 +223,22 @@ export default class PictureLegend extends LitElement {
 		const hiddenExpanded = classMap({"pnx-hidden": this._expanded});
 		const shownExpanded = classMap({"pnx-hidden": !this._expanded});
 
+		if(this.light) {
+			return html`<div class="pnx-picture-legend-light">
+				${this._caption.producer?.length > 0 ? html`
+					<a
+						href=${window.location.href}
+						target="_blank"
+						title=${this._parent?._t.pnx.share_page}
+					>${this._caption.producer[this._caption.producer.length-1]}</a>
+				</div>` : nothing}
+
+				${this._caption.producer?.length > 0 && this._caption?.license ? "|" : ""}
+
+				${this._caption?.license ? html`${unsafeStatic(this._caption.license)}` : nothing}
+			`;
+		}
+
 		return html`
 			<div class="headline">
 				${this._parent._setFocus ? html`

package/src/components/ui/AnnotationsSwitch.js

@@ -17,16 +17,31 @@ import { hasAnnotations } from "../../utils/picture";
 export default class AnnotationsSwitch extends LitElement {
 	/** @private */
 	static styles = css`
-		div {
-			font-family: var(--font-family);
-			font-size: 0.8em;
+		/* Custom button look */
+		pnx-button::part(btn) {
+			border-radius: 8px;
+			height: 26px;
+			width: 26px;
 		}
 
+		pnx-button[size="xl"]::part(btn) {
+			border-radius: 8px;
+			height: 38px;
+			width: 38px;
+		}
+
+		/* No-annotations badge */
 		.pnx-annotations-switch-empty {
 			position: absolute;
+			top: 1px;
+			right: 1px;
+			color: var(--orange);
+			height: 8px;
+		}
+
+		pnx-button[size="xl"] .pnx-annotations-switch-empty {
 			top: 2px;
 			right: 2px;
-			color: var(--orange);
 			height: 12px;
 		}
 
@@ -35,8 +50,15 @@ export default class AnnotationsSwitch extends LitElement {
 		}
 	`;
 
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.AnnotationsSwitch#
+	 * @type {Object}
+	 * @property {string} [size=xl] Button size (md, xl)
+	 */
 	/** @private */
 	static properties = {
+		size: {type: String},
 		_annotationsToggled: {state: true},
 		_warnNoAnnot: {state: true},
 	};
@@ -45,6 +67,7 @@ export default class AnnotationsSwitch extends LitElement {
 		super();
 		this._annotationsToggled = false;
 		this._warnNoAnnot = false;
+		this.size = "xl";
 	}
 
 	/** @private */
@@ -52,11 +75,6 @@ export default class AnnotationsSwitch extends LitElement {
 		super.connectedCallback();
 
 		this._parent.onceReady().then(() => {
-			this._annotationsToggled = this._parent.psv.areAnnotationsVisible() || false;
-			if(!this._annotationsToggled) {
-				this._parent.psv.toggleAllAnnotations(true);
-				this._annotationsToggled = true;
-			}
 			this._parent.psv.addEventListener("annotations-toggled", e => {
 				this._annotationsToggled = e.detail.visible;
 			});
@@ -66,6 +84,15 @@ export default class AnnotationsSwitch extends LitElement {
 				this._warnNoAnnot = !hasAnnotations(this._parent.psv.getPictureMetadata());
 			});
 		});
+
+		this._parent.onceFirstPicLoaded().then(() => {
+			this._annotationsToggled = this._parent.psv.areAnnotationsVisible() || false;
+
+			if(!this._annotationsToggled) {
+				this._parent.psv.toggleAllAnnotations(true);
+				this._annotationsToggled = true;
+			}
+		});
 	}
 
 	_onClick() {
@@ -78,7 +105,8 @@ export default class AnnotationsSwitch extends LitElement {
 		return html`
 			<pnx-button
 				kind="outline"
-				style="vertical-align: middle; width: 37px; height: 37px"
+				size=${this.size}
+				style="vertical-align: middle"
 				title=${[
 					this._annotationsToggled ? this._parent._t?.pnx.semantics_hide_annotations : this._parent._t?.pnx.semantics_show_annotations,
 					this._warnNoAnnot ? this._parent._t?.pnx.semantics_zero_annotations : null
@@ -86,7 +114,7 @@ export default class AnnotationsSwitch extends LitElement {
 				active=${this._annotationsToggled ? "" : nothing}
 				@click=${this._onClick}
 			>
-				${fa(faTags)}
+				${fa(faTags, { styles: { "height": "unset" }})}
 				${this._warnNoAnnot ? fa(faTriangleExclamation, { classes: "pnx-annotations-switch-empty" }) : nothing}
 			</pnx-button>
 		`;

package/src/components/ui/Photo.js

@@ -954,7 +954,7 @@ export default class Photo extends PSViewer {
 
 		if(!visible) { this._myMarkers.clearMarkers(); }
 		else {
-			let annotations = meta.properties.annotations;
+			let annotations = meta.properties.annotations || [];
 			if(annotations?.length === 0) { console.warn("No annotation available on picture", meta.id); }
 
 			const picBData = this.state.textureData.panoData?.baseData;

package/src/components/ui/widgets/Legend.js

@@ -1,9 +1,10 @@
-import {LitElement, html, css} from "lit";
+import { LitElement, html, css, nothing } from "lit";
 import { panel } from "../../styles";
 import { fa } from "../../../utils/widgets";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
 import PanoramaxImg from "../../../img/panoramax.svg";
 import { classMap } from "lit/directives/class-map.js";
+import { PanoramaxWebsiteURL } from "../../../utils/services";
 
 /**
  * Legend widget, handling switch between map and photo components.
@@ -55,6 +56,40 @@ export default class Legend extends LitElement {
 		.logo {
 			width: 45px;
 		}
+		pnx-map-legend {
+			display: block;
+			margin-top: 5px;
+		}
+
+		/* Lighter/smaller version */
+		.pnx-panel[part="panel"].pnx-legend-light {
+			display: flex;
+			gap: 3px;
+			padding: 3px 8px 3px 3px;
+			width: unset;
+			min-width: unset;
+			align-items: center;
+			font-size: 10px;
+			margin-right: -10px;
+			margin-bottom: -10px;
+			border-radius: 0;
+			border-top-left-radius: 5px;
+			border-right: none;
+  			border-bottom: none;
+		}
+		.pnx-legend-light a,
+		.pnx-legend-light .presentation {
+			font-size: 10px;
+		}
+		.pnx-legend-light .logo {
+			width: 15px;
+		}
+
+		.pnx-legend-light pnx-map-legend {
+			width: max-content;
+			margin-top: unset;
+			font-size: 10px;
+		}
 	`];
 
 	/**
@@ -63,41 +98,59 @@ export default class Legend extends LitElement {
 	 * @type {Object}
 	 * @property {string} [focus] The focused main component (map, pic)
 	 * @property {string} [picture] The picture ID
+	 * @property {boolean} [light=false] Lighter version (for iframes)
 	 */
 	static properties = {
 		focus: {type: String},
 		picture: {type: String},
+		light: {type: Boolean},
 	};
 
+	constructor() {
+		super();
+		this.light = false;
+	}
+
 	render() {
 		const classes = {
 			"pnx-panel": true,
 			"pnx-padded": this.focus == "map",
+			"pnx-legend-light": this.light,
 		};
 
 		return html`<div class=${classMap(classes)} part="panel">
 			<div
 				class="presentation"
-				style=${this.focus != "map" && this.picture ? "display: none": ""}
+				style=${!this.light && this.focus != "map" && this.picture ? "display: none": ""}
 			>
 				<img class="logo" src=${PanoramaxImg} alt="" />
-				<div>
-					${this._parent?._t.pnx.whats_panoramax}
-					<pnx-link-button
+
+				${this.light ? html`
+					&copy; <a
+						href=${PanoramaxWebsiteURL()}
 						title=${this._parent?._t.map.more_panoramax}
-						kind="superinline"
-						href="https://panoramax.fr"
 						target="_blank"
-						size="sm"
-					>
-						${fa(faInfoCircle)}
-					</pnx-link-button>
-				</div>
+					>${this._parent?._t.pnx.panoramax}</a> |
+				` : html`
+					<div>
+						${this._parent?._t.pnx.whats_panoramax}
+						<pnx-link-button
+							title=${this._parent?._t.map.more_panoramax}
+							kind="superinline"
+							href=${PanoramaxWebsiteURL()}
+							target="_blank"
+							size="sm"
+						>
+							${fa(faInfoCircle)}
+						</pnx-link-button>
+					</div>
+				`}
 			</div>
 			<pnx-picture-legend
 				._parent=${this._parent}
 				style=${this.focus == "map" ? "display: none": ""}
 				collapsable
+				light=${this.light || nothing}
 			>
 				<slot slot="editors" name="editors">
 					<pnx-widget-osmeditors ._parent=${this._parent} />
@@ -105,7 +158,8 @@ export default class Legend extends LitElement {
 			</pnx-picture-legend>
 			<pnx-map-legend
 				._parent=${this._parent}
-				style=${this.focus != "map" ? "display: none": "display: block; margin-top: 5px"}
+				style=${this.focus != "map" ? "display: none": ""}
+				light=${this.light || nothing}
 			></pnx-map-legend>
 		</div>`;
 	}

package/src/translations/en.json

@@ -39,6 +39,7 @@
         "share_embed": "Embed on your website",
         "share_embed_docs": "Read more about embed configuration",
         "share_print": "Print",
+        "panoramax": "Panoramax",
         "whats_panoramax": "Panoramax is the geo-commons for territories' pictures.",
         "copy": "Copy",
         "copied": "Copied",

package/src/translations/fr.json

@@ -39,6 +39,7 @@
         "share_embed": "Intégration sur votre site",
         "share_embed_docs": "Découvrir plus de possibilités pour l'intégration sur votre site",
         "share_print": "Imprimer",
+        "panoramax": "Panoramax",
         "whats_panoramax": "Panoramax est le géocommun des photos des territoires.",
         "copy": "Copier",
         "copied": "Copié",

package/src/utils/services.js

@@ -4,6 +4,14 @@
  */
 
 
+/**
+ * Panoramax website URL
+ * @returns {string} The website URL
+ */
+export function PanoramaxWebsiteURL() {
+	return "https://panoramax.fr";
+}
+
 /**
  * Panoramax Presets URL
  * @returns {string} The presets URL

package/tests/components/core/__snapshots__/PhotoViewer.test.js.snap

@@ -13,6 +13,7 @@ exports[`_initWidgets should handle widgets if width is not small 1`] = `
     Array [
       <pnx-annotations-switch
         class="pnx-only-psv pnx-print-hidden"
+        size="xl"
         slot="top"
       />,
     ],
@@ -64,6 +65,7 @@ exports[`_initWidgets should handle widgets if width is small 1`] = `
     Array [
       <pnx-annotations-switch
         class="pnx-only-psv pnx-print-hidden"
+        size="xl"
         slot="top"
       />,
     ],

package/tests/components/core/__snapshots__/Viewer.test.js.snap

@@ -26,6 +26,7 @@ exports[`_initWidgets should handle widgets if width is not small 1`] = `
     Array [
       <pnx-annotations-switch
         class="pnx-only-psv pnx-print-hidden"
+        size="xl"
         slot="top"
       />,
     ],
@@ -108,6 +109,7 @@ exports[`_initWidgets should handle widgets if width is small 1`] = `
     Array [
       <pnx-annotations-switch
         class="pnx-only-psv pnx-print-hidden"
+        size="xl"
         slot="top"
       />,
     ],