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, when } from '../../../../../external/lit/index.js';
import { UmbLitElement } from '../../../lit-element/index.js';
import { UmbTextStyles } from '../../../style/index.js';
import '../../../../ufm/index.js';
/**
 *  @element umb-property-layout
 *  @description - Element for displaying a property in an workspace.
 *  @slot editor - Slot for rendering the Property Editor
 *  @slot description - Slot for rendering things below the label.
 *  @slot action-menu - Slot for rendering the Property Action Menu
 */
let UmbPropertyLayoutElement = class UmbPropertyLayoutElement extends UmbLitElement {
    constructor() {
        super(...arguments);
        /**
         * Alias. The technical name of the property.
         * @type {string}
         * @attr
         * @default ''
         */
        this.alias = '';
        /**
         * Label. Name of the property.
         * @type {string}
         * @attr
         * @default ''
         */
        this.label = '';
        /**
         * Orientation: Horizontal is the default where label goes left and editor right.
         * Vertical is where label goes above the editor.
         * @enum ['horizontal', 'vertical']
         * @attr
         * @default ''
         */
        this.orientation = 'horizontal';
        /**
         * Description: render a description underneath the label.
         * @type {string}
         * @attr
         * @default ''
         */
        this.description = '';
    }
    render() {
        // TODO: Only show alias on label if user has access to DocumentType within settings:
        return html `
			<div id="headerColumn">
				<uui-label id="label" title=${this.alias} ?required=${this.mandatory}>
					${this.localize.string(this.label)}
					${when(this.invalid, () => html `<div id="invalid-badge"><uui-badge color="invalid" attention>!</uui-badge></div>`)}
				</uui-label>
				<slot name="action-menu"></slot>
				${this.#renderDescription()}
				<slot name="description"></slot>
			</div>
			<div id="editorColumn">
				<umb-form-validation-message>
					<slot name="editor"></slot>
				</umb-form-validation-message>
			</div>
		`;
    }
    #renderDescription() {
        if (!this.description)
            return;
        const ufmValue = { alias: this.alias, label: this.label, description: this.description };
        return html `<umb-ufm-render id="description" .markdown=${this.description} .value=${ufmValue}></umb-ufm-render>`;
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			:host {
				display: grid;
				grid-template-columns: 200px minmax(0, 1fr);
				column-gap: var(--uui-size-layout-2);
				padding: var(--uui-size-layout-1) 0;
				container-type: inline-size;
			}

			:host > div {
				grid-column: span 2;
			}

			@container (width > 700px) {
				:host(:not([orientation='vertical'])) > div {
					grid-column: span 1;
				}
			}

			#headerColumn {
				position: relative;
				height: min-content;
				top: var(--umb-property-layout-header-top);
			}
			@container (width > 700px) {
				:host(:not([orientation='vertical'])) #headerColumn {
					position: sticky;
					top: var(--umb-property-layout-header-top, calc(var(--uui-size-space-2) * -1));
				}
			}

			:host {
				/* TODO: Temp solution to not get a yellow asterisk when invalid. */
				--umb-temp-uui-color-invalid: var(--uui-color-invalid);
			}

			#label {
				position: relative;
				word-break: break-word;
				/* TODO: Temp solution to not get a yellow asterisk when invalid. */
				--uui-color-invalid: var(--uui-color-danger);
			}
			#invalid-badge {
				display: inline-block;
				position: relative;
				width: 18px;
				height: 1em;
				margin-right: 6px;
			}
			uui-badge {
				//height: var(--uui-color-invalid);
				background-color: var(--umb-temp-uui-color-invalid);
				color: var(--uui-color-invalid-contrast);
			}

			#description {
				color: var(--uui-color-text-alt);
			}

			#editorColumn {
				margin-top: var(--uui-size-space-3);
			}
			@container (width > 700px) {
				:host(:not([orientation='vertical'])) #editorColumn {
					margin-top: 0;
				}
			}
		`,
    ]; }
};
__decorate([
    property({ type: String })
], UmbPropertyLayoutElement.prototype, "alias", void 0);
__decorate([
    property({ type: String })
], UmbPropertyLayoutElement.prototype, "label", void 0);
__decorate([
    property({ type: String, reflect: true })
], UmbPropertyLayoutElement.prototype, "orientation", void 0);
__decorate([
    property({ type: String })
], UmbPropertyLayoutElement.prototype, "description", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], UmbPropertyLayoutElement.prototype, "invalid", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], UmbPropertyLayoutElement.prototype, "mandatory", void 0);
UmbPropertyLayoutElement = __decorate([
    customElement('umb-property-layout')
], UmbPropertyLayoutElement);
export { UmbPropertyLayoutElement };
