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 { UmbValidationInvalidEvent, UmbValidationValidEvent } from '../events/index.js';
import { css, customElement, html, property, repeat, unsafeHTML } from '../../../../external/lit/index.js';
import { UmbLitElement } from '../../lit-element/index.js';
/**
 * @description - Component for displaying one or more validation messages from UMB/UUI Form Control within the given scope.
 * Notice: Only supports components that is build on the UMB / UUI FormControlMixing.
 * @slot - for button contents
 * @slot message - for extras in the messages container
 * @see FormControlMixin
 */
let UmbFormValidationMessageElement = class UmbFormValidationMessageElement extends UmbLitElement {
    /**
     * Set the element containing Form Controls of interest.
     * @type {string}
     * @default
     */
    get for() {
        return this._for;
    }
    set for(value) {
        let element = null;
        if (typeof value === 'string') {
            const scope = this.getRootNode();
            element = scope?.getElementById(value);
        }
        else if (value instanceof HTMLElement) {
            element = value;
        }
        const newScope = element ?? this;
        const oldScope = this._for;
        if (oldScope === newScope) {
            return;
        }
        if (oldScope !== null) {
            oldScope.removeEventListener(UmbValidationInvalidEvent.TYPE, this.#onControlInvalid);
            oldScope.removeEventListener(UmbValidationValidEvent.TYPE, this.#onControlValid);
        }
        this._for = newScope;
        this._for.addEventListener(UmbValidationInvalidEvent.TYPE, this.#onControlInvalid);
        this._for.addEventListener(UmbValidationValidEvent.TYPE, this.#onControlValid);
    }
    constructor() {
        super();
        this._for = null;
        this._messages = new Map();
        this.#onControlInvalid = async (e) => {
            const ctrl = e.composedPath()[0];
            if (ctrl.pristine === false) {
                // Currently we only show message from components who does have the pristine property. (we only want to show messages from fields that are NOT pristine aka. that are dirty or in a from that has been submitted)
                // Notice we use the localization controller here, this is different frm the UUI component which uses the same name.
                this._messages.set(ctrl, this.localize.string(ctrl.validationMessage));
            }
            else {
                this._messages.delete(ctrl);
            }
            this.requestUpdate();
        };
        this.#onControlValid = (e) => {
            const ctrl = e.composedPath()[0];
            this._messages.delete(ctrl);
            this.requestUpdate();
        };
        if (this.for === null) {
            this.for = this;
        }
    }
    #onControlInvalid;
    #onControlValid;
    render() {
        return html `
			<slot></slot>
			<div id="messages">
				${repeat(this._messages, (item) => html `<div>${unsafeHTML(item[1])}</div>`)}
				<slot name="message"></slot>
			</div>
		`;
    }
    static { this.styles = [
        css `
			#messages {
				color: var(--uui-color-invalid-standalone);
			}
		`,
    ]; }
};
__decorate([
    property({ reflect: false, attribute: true })
], UmbFormValidationMessageElement.prototype, "for", null);
UmbFormValidationMessageElement = __decorate([
    customElement('umb-form-validation-message')
], UmbFormValidationMessageElement);
export { UmbFormValidationMessageElement };
