@panoramax/web-viewer 5.0.0-develop-d26305dd → 5.0.0-develop-be5ba1a7

package/build/components/ui/LinkButton.js

@@ -1,67 +0,0 @@
-import { LitElement } from "lit";
-import { btn } from "../styles.js";
-
-/**
- * Link Button element displays a HTML `<a>` anchor with a button style.
- * @class Panoramax.components.ui.LinkButton
- * @element pnx-link-button
- * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
- * @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>
- * ```
- */
-export default class LinkButton extends LitElement {
-	/** @private */
-	static styles = btn;
-
-	/**
-	 * Component properties.
-	 * @memberof Panoramax.components.ui.LinkButton#
-	 * @type {Object}
-	 * @property {string} [href] The URL the button should navigate to when clicked
-	 * @property {string} [target] Specifies where to open the linked document (e.g., '_blank')
-	 * @property {string} [title] Tooltip text displayed when hovering over the button
-	 * @property {string} [download] Indicates if the linked resource should be downloaded
-	 * @property {string} [class] Custom CSS class for additional styling
-	 * @property {string} [kind=full] The style variation of the button (full, fullwarn, fullsuccess, outline, flat, superflat)
-	 * @property {string} [size=md] The size of the button (sm, md, l, xl, xxl)
-	 */
-	static properties = {
-		href: { type: String },
-		target: { type: String },
-		title: { type: String },
-		download: { type: String },
-		class: { type: String },
-		kind: {type: String},
-		size: {type: String},
-	};
-
-	constructor() {
-		super();
-		this.kind = "full";
-		this.size = "md";
-	}
-
-	/** @private */
-	render() {
-		const a = document.createElement("a");
-		a.setAttribute("part", "btn");
-		this.constructor.observedAttributes
-			.filter(k => this[k] !== undefined)
-			.forEach(k => a.setAttribute(k, this[k]));
-		a.classList.add("pnx-btn", `pnx-btn-${this.kind}`, `pnx-btn-${this.size}`);
-		const slot = document.createElement("slot");
-		a.appendChild(slot);
-		return a;
-	}
-}
-
-customElements.define("pnx-link-button", LinkButton);

package/build/components/ui/ListGroup.js

@@ -1,66 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { panel } from "../styles.js";
-
-/**
- * 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.
- * @class Panoramax.components.ui.ListGroup
- * @element pnx-list-group
- * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
- * @slot `default` Any element you want to add in list.
- * @example
- * ```html
- * <pnx-list-group>
- *   <a href="https://web.site/">First link</a>
- *   <button>Second button</button>
- * </pnx-list-group>
- * ```
- */
-export default class ListGroup extends LitElement {
-	/** @private */
-	static styles = [ panel, css`
-		:host ::slotted(*) {
-			text-decoration: none;
-			border: none;
-			border-bottom: 1px solid var(--widget-border-div);
-			background: none;
-			display: block;
-			width: 100%;
-			color: var(--widget-font);
-			font-family: var(--font-family);
-			cursor: pointer;
-			font-size: 1em;
-			font-weight: 400;
-			line-height: 18px;
-			padding: 5px 10px;
-  			min-width: 150px;
-			width: 100%;
-			text-align: left;
-			box-sizing: border-box;
-		}
-
-		:host ::slotted(*:hover) {
-			background-color: var(--widget-bg-hover);
-		}
-
-		:host ::slotted(*:first-child) {
-			border-top-left-radius: 5px;
-			border-top-right-radius: 5px;
-		}
-
-		:host ::slotted(*:last-child) {
-			border: none;
-			border-bottom-left-radius: 5px;
-			border-bottom-right-radius: 5px;
-		}
-	` ];
-
-	/** @private */
-	render() {
-		return html`<slot></slot>`;
-	}
-}
-
-customElements.define("pnx-list-group", ListGroup);

package/build/components/ui/ListItem.js

@@ -1,90 +0,0 @@
-import { LitElement, css, html } from "lit";
-
-/**
- * ListItem is a list entry, in a Material Design fashion.
- * @class Panoramax.components.ui.ListItem
- * @element pnx-list-item
- * @slot `icon` The left icon (symbol for this item)
- * @slot `action` The right icon (symbol for an interactive action)
- * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
- * @example
- * ```html
- * <pnx-list-item title="My feature" subtitle="It is very cool">
- *   <img src="..." slot="icon" />
- *   <img src="..." slot="action" />
- * </pnx-list-item>
- * ```
- */
-export default class ListItem extends LitElement {
-	/** @private */
-	static styles = css`
-		.list-item {
-			display: flex;
-			align-items: center;
-			padding: 8px 16px;
-			cursor: pointer;
-			border-bottom: 1px solid #ddd;
-			font-family: var(--font-family);
-			background: var(--white);
-			min-height: 40px;
-			box-sizing: border-box;
-		}
-		.list-item:hover { background: var(--widget-bg-hover); }
-		.icon {
-			margin-right: 16px;
-			display: flex;
-			align-items: center;
-			gap: 10px;
-			position: relative;
-		}
-		.action {
-			margin-left: 16px;
-			display: flex;
-  			gap: 5px;
-		}
-		.content {
-			flex: 1;
-		}
-		.title {
-			font-weight: 600;
-		}
-		.subtitle {
-			font-size: 0.9em;
-			color: var(--grey-dark);
-		}
-	`;
-
-	/**
-	 * Component properties.
-	 * @memberof Panoramax.components.ui.ListItem#
-	 * @type {Object}
-	 * @property {string} title The item title
-	 * @property {string} [subtitle] The item subtitle
-	 * @property {string} [tooltip] A display-on-hover label
-	 */
-	static properties = {
-		title: { type: String },
-		subtitle: { type: String },
-		tooltip: { type: String },
-	};
-
-	/** @private */
-	render() {
-		return html`
-			<div class="list-item" title=${this.tooltip}>
-				<div class="icon">
-					<slot name="icon"></slot>
-				</div>
-				<div class="content">
-					<div class="title">${this.title}</div>
-					<div class="subtitle">${this.subtitle}</div>
-				</div>
-				<div class="action">
-					<slot name="action"></slot>
-				</div>
-			</div>
-		`;
-	}
-}
-
-customElements.define("pnx-list-item", ListItem);

package/build/components/ui/Loader.js

@@ -1,203 +0,0 @@
-import { LitElement, css, html, nothing, unsafeCSS } from "lit";
-import { inRangeRandom } from "../../utils/utils.js";
-
-const LogoDead = await fetch(new URL("../../img/logo_dead.svg", import.meta.url).href).then(res => res.text());
-const LoaderBg = new URL("../../img/loader_base.jpg", import.meta.url).href;
-
-/**
- * Loader component display a full page covering for user waiting.
- * @class Panoramax.components.ui.Loader
- * @element pnx-loader
- * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
- * @example
- * ```html
- * <pnx-loader ._parent=${this.viewer} />
- * ```
- */
-export default class Loader extends LitElement {
-	/** @private */
-	static styles = css`
-		:host {
-			position: absolute;
-			inset: 0;
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			gap: 10px;
-			align-items: center;
-			background-image: url('${unsafeCSS(LoaderBg)}');
-			background-repeat: no-repeat;
-			background-size: cover;
-			background-position: center;
-			z-index: 200;
-			font-family: var(--font-family);
-			font-weight: 550;
-			color: var(--black);
-			font-size: 1.4em;
-			text-align: center;
-			visibility: hidden;
-			opacity: 0;
-		}
-		:host(*[visible]) {
-			visibility: visible;
-			opacity: 1;
-		}
-
-		div.label {
-			background-color: rgba(255,255,255,0.5);
-			box-shadow: white 0 0 10px;
-			padding: 3px 10px;
-			border-radius: 50px;
-		}
-		/* Logo */
-		img.logo-dead { width: 100px; }
-	`;
-
-	/**
-	 * Component properties.
-	 * @memberof Panoramax.components.ui.Loader#
-	 * @type {Object}
-	 * @property {boolean} [visible=true] Is the loader visible to user ?
-	 * @property {boolean} [no-label=false] Set to true to avoid loading label display
-	 * @property {number} [value] Progress bar percentage (0-100)
-	 */
-	static properties = {
-		_mode: {state: true},
-		_label: {state: true},
-		_isLabelFun: {state: true},
-		visible: {type: Boolean, reflect: true},
-		"no-label": {type: Boolean},
-		value: {type: Number},
-	};
-
-	constructor() {
-		super();
-		this.visible = true;
-		this["no-label"] = false;
-		this._mode = "loading";
-		this._isLabelFun = false;
-		this.value = -1;
-	}
-
-	/** @private */
-	connectedCallback() {
-		super.connectedCallback();
-		this._nextLabel();
-	}
-
-	/**
-	 * Is the loader currently visible ?
-	 * @returns {boolean} True if visible
-	 * @memberof Panoramax.components.ui.Loader#
-	 */
-	isVisible() {
-		return this.visible;
-	}
-
-	/**
-	 * Dismiss loader, or show error
-	 * @param {object} [err] Optional error object to show in browser console
-	 * @param {str} [errMeaningful] Optional error message to show to user
-	 * @param {fct} [next] Optional function to run after loader dismiss
-	 * @memberof Panoramax.components.ui.Loader#
-	 */
-	dismiss(err = null, errMeaningful = null, next = null) {
-		clearTimeout(this._loaderLabelChanger);
-
-		if(!err) {
-			this.value = 100;
-			this._mode = "done";
-			this.visible = false;
-			this.style.transition = "all 0.5s";
-			setTimeout(() => {
-				if(this.parentNode) { this.parentNode.removeChild(this); }
-			}, 2000);
-
-			/**
-			 * 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
-			 * ```
-			 * @event Panoramax.components.core.Basic#ready
-			 * @type {CustomEvent}
-			 */
-			const readyEvt = new CustomEvent("ready");
-			this._parent.dispatchEvent(readyEvt);
-
-			if(next) { next(); }
-		}
-		else {
-			if(err !== true) { console.error(err); }
-
-			let errHtml = [ this._parent?._t.pnx.error, html`<br />` ];
-
-			if(errMeaningful) { errHtml.push(errMeaningful, html`<br />`); }
-
-			if(next) {
-				errHtml.push(html`<pnx-button kind="full">${this._parent?._t.pnx.error_click}</pnx-button>`);
-				this.addEventListener("click", next);
-			}
-			else { errHtml.push(html`<small>${this._parent?._t.pnx.error_retry}</small>`); }
-
-			this._mode = "error";
-			this._label = errHtml;
-
-			const errLabel = errMeaningful || "Panoramax JS had a blocking exception";
-
-			/**
-			 * 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
-			 * ```
-			 * @event Panoramax.components.core.Basic#broken
-			 * @type {CustomEvent}
-			 * @property {string} detail.error The user-friendly error message to display
-			 */
-			const brokenEvt = new CustomEvent("broken", {
-				detail: { error: errLabel }
-			});
-			this._parent.dispatchEvent(brokenEvt);
-
-			// Throw error
-			throw new Error(errLabel);
-		}
-	}
-
-	/** @private */
-	_nextLabel() {
-		if(!this._isLabelFun) {
-			this._label = this._parent?._t.pnx.loading_labels_serious[inRangeRandom(0, this._parent?._t.pnx.loading_labels_serious.length-1)];
-			this._isLabelFun = true;
-		}
-		else {
-			this._label = this._parent?._t.pnx.loading_labels_fun[inRangeRandom(0, this._parent?._t.pnx.loading_labels_fun.length-1)];
-		}
-		this._loaderLabelChanger = setTimeout(this._nextLabel.bind(this), inRangeRandom(500, 1500));
-	}
-
-	/** @private */
-	render() {
-		if(this._mode === "error") {
-			return html`
-				<img class="logo-dead" src=${LogoDead} alt="" title=${this._parent?._t.map.loading} />
-				${this._label}
-			`;
-		}
-
-		return html`
-			<pnx-progress-bar .value=${this.value}></pnx-progress-bar>
-			${this["no-label"] ? nothing : html`<div class="label">${this._label}</div>`}
-		`;
-	}
-}
-
-customElements.define("pnx-loader", Loader);

package/build/components/ui/Map.css

@@ -1,63 +0,0 @@
-.maplibregl-map.pnx-map {
-	background: white;
-}
-
-/* Picture thumbnail on map */
-.maplibregl-popup-content {
-	padding: 5px !important;
-	position: relative;
-	pointer-events: none !important;
-}
-
-.pnx-map-thumb {
-	display: inline-block;
-	text-align: center;
-	vertical-align: middle;
-	max-width: 130px;
-	max-height: 130px;
-}
-
-@keyframes rotating {
-	from { transform: rotate(0deg); }
-	to { transform: rotate(360deg); }
-}
-
-.pnx-map-thumb-loader {
-	background-color: rgb(230,230,230);
-	border-radius: 65px;
-	max-height: 60px;
-	margin: 5px 35px;
-	animation: rotating 2s linear infinite;
-}
-
-.pnx-map-thumb-legend {
-	display: block;
-	position: absolute;
-	bottom: 5px;
-	right: 5px;
-	left: 5px;
-	background-color: rgba(0,0,0,0.8);
-	color: white;
-	text-align: center;
-	font-style: italic;
-	font-size: 0.8em;
-	margin: 0;
-	padding: 0;
-}
-
-.maplibregl-marker {
-	width: 60px;
-}
-
-/* Resize canvas for print */
-@media print {
-	.pnx-map.maplibregl-map .maplibregl-canvas-container {
-		width: 100% !important;
-		height: unset !important;
-	}
-}
-
-/* Discard default indoor= widget */
-.pnx-map .maplibregl-ctrl-indoorequal {
-	display: none;
-}