@panoramax/web-viewer/src/components/ui/ListItem.js

Panoramax web viewer for geolocated pictures

import { LitElement, html, css } 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: 50px;
			box-sizing: border-box;
		}
		.list-item:hover { background: var(--widget-bg-hover); }
		.icon {
			margin-right: 16px;
			display: flex;
			align-items: center;
			gap: 10px;
		}
		.action { margin-left: 16px; }
		.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
	 */
	static properties = {
		title: { type: String },
		subtitle: { type: String },
	};

	/** @private */
	render() {
		return html`
			<div class="list-item">
				<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);