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 { UmbLitElement } from '../../../../core/lit-element/index.js';
import { css, customElement, html, property, when } from '../../../../../external/lit/index.js';
import '../../../../ufm/index.js';
let UmbBlockGridBlockElement = class UmbBlockGridBlockElement extends UmbLitElement {
    render() {
        const blockValue = { ...this.content, $settings: this.settings, $index: this.index };
        return html `
			<umb-ref-grid-block
				standalone
				.readonly=${!(this.config?.showContentEdit ?? false)}
				.href=${this.config?.showContentEdit ? this.config?.editContentPath : undefined}>
				<umb-icon slot="icon" .name=${this.icon}></umb-icon>
				<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${blockValue}></umb-ufm-render>
				${when(this.unpublished, () => html `
						<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}>
							<umb-localize key="blockEditor_notExposedLabel"></umb-localize>
						</uui-tag>
					`)}
				<umb-block-grid-areas-container slot="areas" draggable="false"></umb-block-grid-areas-container>
			</umb-ref-grid-block>
		`;
    }
    static { this.styles = [
        css `
			:host {
				display: block;
				margin-bottom: 1px;
			}

			umb-block-grid-areas-container::part(area) {
				margin: var(--uui-size-2);
			}

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

			uui-tag {
				margin-left: 0.5em;
				margin-bottom: -0.3em;
				margin-top: -0.3em;
				vertical-align: text-top;
			}

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

			@keyframes umb-icon-jiggle {
				0%,
				100% {
					transform: rotate(6deg);
				}
				50% {
					transform: rotate(-6deg);
				}
			}

			:host(.sortable) {
				umb-icon {
					animation: umb-icon-jiggle 500ms infinite ease-in-out;
				}
			}
		`,
    ]; }
};
__decorate([
    property({ attribute: false })
], UmbBlockGridBlockElement.prototype, "label", void 0);
__decorate([
    property({ type: String, reflect: false })
], UmbBlockGridBlockElement.prototype, "icon", void 0);
__decorate([
    property({ type: Number, attribute: false })
], UmbBlockGridBlockElement.prototype, "index", void 0);
__decorate([
    property({ attribute: false })
], UmbBlockGridBlockElement.prototype, "config", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], UmbBlockGridBlockElement.prototype, "unpublished", void 0);
__decorate([
    property({ attribute: false })
], UmbBlockGridBlockElement.prototype, "content", void 0);
__decorate([
    property({ attribute: false })
], UmbBlockGridBlockElement.prototype, "settings", void 0);
UmbBlockGridBlockElement = __decorate([
    customElement('umb-block-grid-block')
], UmbBlockGridBlockElement);
export { UmbBlockGridBlockElement };
export default UmbBlockGridBlockElement;
