@3mo/empty-state/dist/EmptyState.js

A web component to display an empty state

import { __decorate } from "tslib";
import { html, component, Component, property, css } from '@a11d/lit';
/**
 * @element mo-empty-state
 *
 * @ssr true
 *
 * @attr icon
 *
 * @slot - Error message
 */
let EmptyState = class EmptyState extends Component {
    static get styles() {
        return css `
			:host {
				display: flex;
				user-select: none;
			}

			:host, mo-flex {
				align-items: center;
				justify-content: center;
				text-align: center;
			}

			mo-heading, mo-icon {
				color: color-mix(in srgb, currentColor, transparent 67%);
			}

			mo-heading {
				font-weight: 500;
			}

			mo-icon {
				font-size: 48px;
			}
		`;
    }
    get template() {
        return html `
			<mo-flex gap='8px'>
				${!this.icon ? html.nothing : html `<mo-icon icon=${this.icon}></mo-icon>`}
				<mo-heading>
					<slot></slot>
				</mo-heading>
			</mo-flex>
		`;
    }
};
__decorate([
    property()
], EmptyState.prototype, "icon", void 0);
EmptyState = __decorate([
    component('mo-empty-state')
], EmptyState);
export { EmptyState };