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

package/build/components/ui/Button.js

@@ -1,77 +0,0 @@
-import { LitElement } from "lit";
-import { btn } from "../styles.js";
-
-/**
- * Button element displays a direct action button.
- * Binds to a HTML button, so you can use any events offered by it.
- * @class Panoramax.components.ui.Button
- * @element pnx-button
- * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
- * @example
- * ```html
- * <pnx-button kind="flat" size="l" @click=${() => alert("click!")}>
- *    Click on me
- * </pnx-button>
- * ```
- */
-export default class Button extends LitElement {
-	/** @private */
-	static styles = btn;
-
-	/**
-	 * Component properties.
-	 * @memberof Panoramax.components.ui.Button#
-	 * @type {Object}
-	 * @property {boolean} [active=false] Whether the button is in an active state.
-	 * @property {string} [kind=full] The style variation of the button (full, fullwarn, fullsuccess, outline, flat, superflat, inline, superinline)
-	 * @property {string} [size=md] The size of the button (sm, md, l, xl, xxl)
-	 * @property {boolean} [disabled=false] Whether the button is disabled.
-	 * @property {string} [type] The button type (e.g., 'submit').
-	 * @property {string} [title] Tooltip text displayed when hovering over the button
-	 */
-	static properties = {
-		active: {type: Boolean},
-		kind: {type: String},
-		size: {type: String},
-		disabled: {type: Boolean},
-		type: {type: String},
-		title: { type: String },
-	};
-
-	constructor() {
-		super();
-		this.active = false;
-		this.disabled = false;
-		this.kind = "full";
-		this.size = "md";
-	}
-
-	/** @private */
-	connectedCallback() {
-		super.connectedCallback();
-
-		if(this.type === "submit") {
-			this.addEventListener("click", () => this.closest("FORM")?.requestSubmit());
-		}
-	}
-
-	/** @private */
-	render() {
-		const b = document.createElement("button");
-		b.setAttribute("part", "btn");
-
-		this.constructor.observedAttributes
-			.filter(k => this[k] !== undefined && this[k] !== false && !["active", "kind", "size"].includes(k))
-			.forEach(k => b.setAttribute(k, this[k]));
-
-		b.classList.add("pnx-btn", `pnx-btn-${this.kind}`, `pnx-btn-${this.size}`);
-		if(this.active) { b.classList.add("pnx-btn-active"); }
-
-		const slot = document.createElement("slot");
-		b.appendChild(slot);
-
-		return b;
-	}
-}
-
-customElements.define("pnx-button", Button);

package/build/components/ui/ButtonGroup.css

@@ -1,59 +0,0 @@
-/* Also defined in styles.js */
-
-pnx-button-group > pnx-button {
-	display: inline-flex;
-}
-
-pnx-button-group > pnx-button::part(btn) {
-	height: unset;
-}
-
-/* Togglable in group */
-pnx-button-group > pnx-togglable-group > pnx-button {
-	width: 100%;
-	height: 100%;
-}
-
-/* Row */
-pnx-button-group[dir="row"] > :not(:first-child):not(:last-child)::part(btn),
-pnx-button-group[dir="row"] > :not(:first-child):not(:last-child) > ::part(btn) {
-	border-radius: 0;
-	border-left: none;
-	border-right: none;
-}
-
-pnx-button-group[dir="row"] > :first-child::part(btn),
-pnx-button-group[dir="row"] > :first-child > ::part(btn) {
-	border-top-right-radius: 0;
-	border-bottom-right-radius: 0;
-	border-right: none;
-}
-
-pnx-button-group[dir="row"] > :last-child::part(btn),
-pnx-button-group[dir="row"] > :last-child > ::part(btn) {
-	border-top-left-radius: 0;
-	border-bottom-left-radius: 0;
-	border-left: none;
-}
-
-/* Column */
-pnx-button-group[dir="column"] > :not(:first-child):not(:last-child)::part(btn),
-pnx-button-group[dir="column"] > :not(:first-child):not(:last-child) > ::part(btn) {
-	border-radius: 0;
-	border-top: none;
-	border-bottom: none;
-}
-
-pnx-button-group[dir="column"] > :first-child::part(btn),
-pnx-button-group[dir="column"] > :first-child > ::part(btn) {
-	border-bottom-right-radius: 0;
-	border-bottom-left-radius: 0;
-	border-bottom: none;
-}
-
-pnx-button-group[dir="column"] > :last-child::part(btn),
-pnx-button-group[dir="column"] > :last-child > ::part(btn) {
-	border-top-left-radius: 0;
-	border-top-right-radius: 0;
-	border-top: none;
-}

package/build/components/ui/ButtonGroup.js

@@ -1,69 +0,0 @@
-import { LitElement, css, html } from "lit";
-import ButtonGroupStyles from "./ButtonGroup.css" with { type: "css" };
-document.adoptedStyleSheets.push(ButtonGroupStyles);
-
-/**
- * Button Group element allows to merge many button in a single bar.
- * @class Panoramax.components.ui.ButtonGroup
- * @element pnx-button-group
- * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
- * @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>
- * ```
- */
-export default class ButtonGroup extends LitElement {
-	/** @private */
-	static styles = css`
-		div {
-			display: flex;
-			flex-wrap: nowrap;
-			align-items: stretch;
-			align-content: stretch;
-			justify-content: center;
-		}
-
-		div.row { flex-direction: row; }
-		div.column { flex-direction: column; }
-
-		div.xl { line-height: 38px; font-size: 20px; }
-		div.row.xl { height: 38px; }
-		div.column.xl { width: 38px; }
-
-		div.row ::slotted(*) { height: 100%; min-width: 24px; }
-		div.column ::slotted(*) { width: 100%; min-height: 24px; }
-
-		div.row.xl ::slotted(*) { min-width: 38px; }
-		div.column.xl ::slotted(*) { min-height: 38px; }
-	`;
-
-	/**
-     * Component properties.
-	 * @memberof Panoramax.components.ui.ButtonGroup#
-     * @type {Object}
-     * @property {string} [dir] Group direction (row, column)
-     * @property {string} [size] Group size (md, xl)
-     */
-	static properties = {
-		dir: {type: String},
-		size: {type: String},
-	};
-
-	constructor() {
-		super();
-		this.dir = "row";
-		this.size = "md";
-	}
-
-	/** @private */
-	render() {
-		return html`<div class="${this.dir} ${this.size}" part="btn-group">
-			<slot></slot>
-		</div>`;
-	}
-}
-
-customElements.define("pnx-button-group", ButtonGroup);

package/build/components/ui/CopyButton.js

@@ -1,110 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { fa } from "../../utils/widgets.js";
-import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
-import { btn, faSvg } from "../styles.js";
-import { classMap } from "lit/directives/class-map.js";
-
-/**
- * Copy Button element allows top copy in clipboard some text.
- * @class Panoramax.components.ui.CopyButton
- * @element pnx-copy-button
- * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
- * @slot `oncopy` The content to display after user click
- * @example
- * ```html
- * <pnx-copy-button text="content to copy" ._t=${viewer._t}>
- *   Copy me !
- *   <img src="success.jpg" slot="oncopy" />
- * </pnx-copy-button>
- * ```
- */
-export default class CopyButton extends LitElement {
-	/** @private */
-	static styles = [faSvg, btn, css`
-		.pnx-btn-unstyled {
-			border: none;
-			background: none;
-			font-family: var(--font-family);
-			font-size: 1em;
-			color: var(--widget-font);
-			cursor: pointer;
-			padding: 0;
-			margin: 0;
-		}
-	`];
-
-	/**
-     * Component properties.
-	 * @memberof Panoramax.components.ui.CopyButton#
-     * @type {Object}
-     * @property {string} [text] Text to copy in clipboard on click (use either this parameter or input, not both)
-	 * @property {input} [input] ID of a HTML input field to copy content from in clipboard (use either this parameter or text, not both)
-	 * @property {string} [kind=full] The style variation of the button (full, fullwarn, fullsuccess, outline, flat, superflat, inline, superinline)
-	 * @property {string} [size=md] The size of the button (sm, md, l, xl, xxl)
-	 * @property {boolean} [unstyled=false] Disable all styling (for list group integration)
-	 * @property {string} [title] Tooltip text displayed when hovering over the button
-     */
-	static properties = {
-		text: {type: String},
-		input: {type: String},
-		kind: {type: String},
-		size: {type: String},
-		unstyled: {type: Boolean},
-		title: { type: String },
-		_active: {state: true, type: Boolean},
-	};
-
-	constructor() {
-		super();
-		this.data = "";
-		this.input = "";
-		this.unstyled = false;
-		this.kind = "full";
-		this.size = "md";
-		this._active = false;
-		this.addEventListener("click", this._onClick);
-	}
-
-	/** @private */
-	_onClick(e) {
-		e.stopPropagation();
-
-		let textToCopy;
-		if(this.input !== "") {
-			const inputField = document.getElementById(this.input);
-			textToCopy = inputField.innerText || inputField.value;
-		}
-		else if(this.text !== "") {
-			textToCopy = this.text;
-		}
-
-		if(!navigator?.clipboard) {
-			alert("Clipboard is not available");
-		}
-		else {
-			navigator.clipboard.writeText(textToCopy);
-			this._active = true;
-			setTimeout(() => this._active = false, 2000);
-		}
-	}
-
-	/** @private */
-	render() {
-		const classes = {
-			"pnx-btn": !this.unstyled,
-			"pnx-btn-full": !this.unstyled,
-			"pnx-btn-active": !this.unstyled && this._active,
-			"pnx-btn-unstyled": this.unstyled,
-			[`pnx-btn-${this.kind}`]: !this.unstyled,
-			[`pnx-btn-${this.size}`]: !this.unstyled,
-		};
-		return html`<button title=${this.title} class=${classMap(classes)} part="btn">
-			${this._active ?
-				html`<slot name="oncopy">${this._t?.pnx.copied || ""} ${fa(faCheck)}</slot>` :
-				html`<slot>${fa(faCopy)} ${this._t?.pnx.copy || ""}</slot>`
-			}
-		</button>`;
-	}
-}
-
-customElements.define("pnx-copy-button", CopyButton);

package/build/components/ui/Grade.js

@@ -1,54 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { fa } from "../../utils/widgets.js";
-import { faStar } from "@fortawesome/free-solid-svg-icons";
-import { faStar as farStar } from "@fortawesome/free-regular-svg-icons";
-import { faSvg } from "../styles.js";
-
-/**
- * Grade element displays a 5-star rating.
- * @class Panoramax.components.ui.Grade
- * @element pnx-grade
- * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
- * @example
- * ```html
- * <pnx-grade stars="5" .t=${viewer._t} />
- * ```
- */
-export default class Grade extends LitElement {
-	/** @private */
-	static styles = [ faSvg, css`
-		span { color: var(--orange); }
-	`];
-
-	/**
-     * Component properties.
-	 * @memberof Panoramax.components.ui.Grade#
-     * @type {Object}
-     * @property {number} [stars=0] 1 to 5 grade (or 0 for unknown value)
-     */
-	static properties = {
-		stars: {type: Number},
-	};
-
-	constructor() {
-		super();
-		this.stars = 0;
-	}
-
-	/** @private */
-	render() {
-		const nbStars = this.stars || 0;
-		const fastars = [];
-		for(let i=1; i <= nbStars; i++) {
-			fastars.push(fa(faStar));
-		}
-		for(let i=nbStars+1; i <= 5; i++) {
-			fastars.push(fa(farStar));
-		}
-		return html`<span>
-			${fastars}
-		</span> (${this.stars ? this.stars+"/5" : this._t?.pnx.metadata_quality_missing || "?"})`;
-	}
-}
-
-customElements.define("pnx-grade", Grade);

package/build/components/ui/GradeFilter.js

@@ -1,122 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { fa } from "../../utils/widgets.js";
-import { faStar } from "@fortawesome/free-solid-svg-icons";
-
-/**
- * Grade Filter allows to filter picture by their grade (for example, precision grade)
- * @class Panoramax.components.ui.GradeFilter
- * @element pnx-grade-filter
- * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
- * @fires Panoramax.components.ui.GradeFilter#change
- * @example
- * ```html
- * <pnx-grade-filter grade="5" input="pnx-g-input" @change=${() => alert('changed')} ._t=${viewer._t} />
- * ```
- */
-export default class GradeFilter extends LitElement {
-	/** @private */
-	static styles = css`
-		:host {
-			gap: 0;
-			align-items: stretch;
-			display: flex;
-		}
-		label {
-			display: inline-flex;
-			padding: 2px 7px;
-			background: none;
-			border: 1px solid var(--widget-border-btn);
-			color: var(--widget-font-direct);
-			cursor: pointer;
-			font-size: 16px;
-			text-decoration: none;
-			border-left-width: 0px;
-		}
-		label:hover {
-			background-color: var(--widget-bg-hover);
-		}
-		label:first-of-type {
-			border-top-left-radius: 8px;
-			border-bottom-left-radius: 8px;
-			border-left-width: 1px;
-		}
-		label:last-of-type {
-			border-top-right-radius: 8px;
-			border-bottom-right-radius: 8px;
-		}
-		label svg {
-			display: block;
-			width: 0.8em;
-		}
-		input[type="checkbox"] { display: none; }
-		input[type="checkbox"]:checked + label {
-			background-color: var(--widget-bg-active);
-			color: var(--widget-font-active);
-		}
-		input[type="checkbox"]:checked + label:first-of-type {
-			border-right-color: white;
-		}
-	`;
-
-	/**
-	 * Component properties.
-	 * @memberof Panoramax.components.ui.GradeFilter#
-	 * @type {Object}
-	 * @property {string} input ID prefix for input fields
-	 * @property {number|string} [grade=0] The grade (5 to 1 = precise grade, 0 = none selected), or a list of grades
-	 * @property {Object} labels Helper labels for each grade, as {"1": "L1", "2": "L2", ...}
-	 */
-	static properties = {
-		grade: {type: String},
-		input: {type: String},
-		labels: {type: Object},
-	};
-
-	constructor() {
-		super();
-		this.grade = 0;
-		this.input = "";
-		this.labels = {};
-	}
-
-	/** @private */
-	_onInput() {
-		// List all checked boxes
-		const newgrade = [];
-		for(let i of this.renderRoot.querySelectorAll("input")) {
-			if(i.checked) { newgrade.push(i.value); }
-		}
-		this.grade = newgrade.join(",");
-
-		/**
-		 * Event for grade change
-		 * @event Panoramax.components.ui.GradeFilter#change
-		 * @type {CustomEvent}
-		 */
-		this.dispatchEvent(new CustomEvent("change", {bubbles: true, composed: true}));
-	}
-
-	/** @private */
-	render() {
-		const grades = `${this.grade}`.split(",").map(v => parseInt(v)).filter(v => !isNaN(v));
-
-		return [5,4,3,2,1].map(v => html`
-			<input
-				id="${this.input}-${v}"
-				type="checkbox"
-				name=${this.input}
-				value=${v}
-				@change="${this._onInput}"
-				.checked=${grades.includes(v)}
-			/>
-			<label
-				for="${this.input}-${v}"
-				title=${this.labels?.[v] ? this.labels[v] : null}
-			>
-				${v} ${fa(faStar)}
-			</label>
-		`);
-	}
-}
-
-customElements.define("pnx-grade-filter", GradeFilter);

package/build/components/ui/IconSwitch.js

@@ -1,193 +0,0 @@
-import { LitElement, css, html } from "lit";
-
-/**
- * Icon Switch button, based on a native checkbox.
- * Checked state corresponds to "right" option selected, unchecked to "left".
- * @class Panoramax.components.ui.IconSwitch
- * @element pnx-icon-switch
- * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
- * @fires Panoramax.components.ui.IconSwitch#change
- * @example
- * ```html
- * <pnx-icon-switch
- *   checked="true"
- *   name="my-switch"
- *   @change=${doSomething}
- * >
- *   <img src="left.svg" slot="icon-left" />
- *   <span slot="label-left">Left</span>
- *   <img src="right.svg" slot="icon-right" />
- *   <span slot="label-right">Right</span>
- * </pnx-icon-switch>
- * ```
- */
-export default class IconSwitch extends LitElement {
-	static styles = css`
-		.toggle {
-			cursor: pointer;
-			display: flex;
-			align-items: flex-start;
-			justify-content: center;
-		}
-
-		.toggle-switch {
-			display: inline-block;
-			background: var(--widget-option-left);
-			border-radius: 11px;
-			width: 42px;
-			min-width: 42px;
-			max-width: 42px;
-			height: 22px;
-			min-height: 22px;
-			max-height: 22px;
-			position: relative;
-			vertical-align: middle;
-			transition: background 0.25s;
-			flex: 1;
-		}
-		.toggle-switch:before, .toggle-switch:after {
-			content: "";
-		}
-		.toggle-switch:before {
-			display: block;
-			background: linear-gradient(to bottom, #fff 0%, #eee 100%);
-			border-radius: 50%;
-			box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
-			width: 16px;
-			height: 16px;
-			position: absolute;
-			top: 3px;
-			left: 3px;
-			transition: left 0.25s;
-		}
-		.toggle:hover .toggle-switch:before {
-			background: linear-gradient(to bottom, #fff 0%, #fff 100%);
-			box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
-		}
-		.toggle-checkbox:checked + .toggle-switch {
-			background: var(--widget-option-right);
-		}
-		.toggle-checkbox:disabled + .toggle-switch:before,
-		.toggle-checkbox:disabled:hover + .toggle-switch:before {
-			background: var(--grey-pale);
-			box-shadow: none;
-		}
-		.toggle-checkbox:disabled + .toggle-switch {
-			background: var(--grey);
-			box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
-		}
-		.toggle-checkbox:checked + .toggle-switch:before {
-			left: 22px;
-		}
-
-		.toggle-icon {
-			pointer-events: none;
-			height: 22px;
-			width: 22px;
-			position: absolute;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			line-height: 11px;
-			font-size: 11px;
-			opacity: 1;
-			transition: opacity 0.15s 0.1s;
-		}
-
-		.toggle-icon.icon-left {
-			left: 0;
-			color: var(--widget-option-left);
-		}
-		.toggle-icon.icon-right {
-			right: 0;
-			color: var(--widget-option-right);
-		}
-
-		.toggle-checkbox:checked + .toggle-switch .toggle-icon.icon-left,
-		.toggle-checkbox:not(:checked) + .toggle-switch .toggle-icon.icon-right {
-			opacity: 0;
-			transition: opacity 0s;
-		}
-
-		.toggle-checkbox {
-			position: absolute;
-			visibility: hidden;
-		}
-
-		.toggle-label {
-			margin-left: 5px;
-			margin-right: 5px;
-			position: relative;
-			flex: 2;
-			text-align: center;
-			font-size: 0.9em;
-			line-height: 22px;
-		}
-	`;
-
-	/**
-	 * Component properties.
-	 * @memberof Panoramax.components.ui.IconSwitch#
-	 * @type {Object}
-	 * @property {boolean} checked True if checked
-	 * @property {boolean} disabled Inactive if true
-	 * @property {boolean} value The current switch value
-	 * @property {string} name The switch name (also serves as ID)
-	 */
-	static properties = {
-		checked: {type: Boolean, reflect: true},
-		disabled: {type: Boolean, reflect: true},
-		name: {type: String},
-	};
-
-	constructor() {
-		super();
-		this.checked = false;
-		this.disabled = false;
-		this.name = "pnx-icon-switch-1"; // Default name+ID to avoid issues
-	}
-
-	/** @private */
-	_onChange(e) {
-		this.checked = e.target.checked;
-		/**
-		 * Event for switch status change
-		 * @event Panoramax.components.ui.IconSwitch#change
-		 * @type {Event}
-		 */
-		this.dispatchEvent(new Event("change"));
-	}
-
-	/** @private */
-	render() {
-		return html`
-			<label class="toggle" for=${this.name}>
-				<span class="toggle-label">
-					<slot name="label-left"></slot>
-				</span>
-				<input
-					class="toggle-checkbox"
-					type="checkbox"
-					id=${this.name}
-					name=${this.name}
-					.checked=${this.checked}
-					.disabled=${this.disabled}
-					@change=${this._onChange.bind(this)}
-				/>
-				<div class="toggle-switch">
-					<span class="toggle-icon icon-left">
-						<slot name="icon-left"></slot>
-					</span>
-					<span class="toggle-icon icon-right">
-						<slot name="icon-right"></slot>
-					</span>
-				</div>
-				<span class="toggle-label">
-					<slot name="label-right"></slot>
-				</span>
-			</label>
-		`;
-	}
-}
-
-customElements.define("pnx-icon-switch", IconSwitch);