var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { css, customElement, html, property } from '../../../../../external/lit/index.js';
import { UmbLitElement } from '../../../../core/lit-element/index.js';
/**
 * @element umb-ref-rte-block
 */
let UmbRefRteBlockElement = class UmbRefRteBlockElement extends UmbLitElement {
    render() {
        const blockValue = { ...this.content, $settings: this.settings, $index: this.index };
        return html `
			<uui-ref-node
				standalone
				.readonly=${!(this.config?.showContentEdit ?? false)}
				.href=${this.config?.showContentEdit ? this.config?.editContentPath : undefined}>
				<div class="selection-background" aria-hidden="true">&emsp;</div>
				<umb-icon slot="icon" .name=${this.icon}></umb-icon>
				<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${blockValue}></umb-ufm-render>
			</uui-ref-node>
		`;
    }
    static { this.styles = [
        css `
			:host {
				display: block;
			}

			uui-ref-node {
				min-height: var(--uui-size-16);
			}

			:host([unpublished]) umb-icon,
			:host([unpublished]) umb-ufm-render {
				opacity: 0.6;
			}

			/* HACK: Stretches a space character (&emsp;) to be full-width to make the RTE block appear text-selectable. [LK,NL] */
			.selection-background {
				position: absolute;
				pointer-events: none;
				font-size: 100vw;
				inset: 0;
				overflow: hidden;
				z-index: 0;
			}

			umb-ufm-render {
				user-select: none;
			}

			umb-icon,
			umb-ufm-render {
				z-index: 1;
			}
		`,
    ]; }
};
__decorate([
    property({ type: String })
], UmbRefRteBlockElement.prototype, "label", void 0);
__decorate([
    property({ type: String })
], UmbRefRteBlockElement.prototype, "icon", void 0);
__decorate([
    property({ type: Number, attribute: false })
], UmbRefRteBlockElement.prototype, "index", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], UmbRefRteBlockElement.prototype, "unpublished", void 0);
__decorate([
    property({ attribute: false })
], UmbRefRteBlockElement.prototype, "content", void 0);
__decorate([
    property({ attribute: false })
], UmbRefRteBlockElement.prototype, "settings", void 0);
__decorate([
    property({ attribute: false })
], UmbRefRteBlockElement.prototype, "config", void 0);
UmbRefRteBlockElement = __decorate([
    customElement('umb-ref-rte-block')
], UmbRefRteBlockElement);
export { UmbRefRteBlockElement };
export default UmbRefRteBlockElement;
