import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as defaultBalAriaForm } from './form.js';

const FieldMessage = /*@__PURE__*/ proxyCustomElement(class FieldMessage extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.ariaForm = defaultBalAriaForm;
        /**
         * Defines the color of the message.
         */
        this.color = '';
        /**
         * If `true` the component gets a invalid red style.
         */
        this.invalid = false;
        /**
         * If `true` the component gets a valid green style.
         */
        this.valid = false;
        /**
         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
         */
        this.disabled = false;
        /**
         * If `true` the element can not mutated, meaning the user can not edit the control.
         */
        this.readonly = false;
        /**
         * If `true` the element will not reserve any space for an upcoming message.
         */
        this.noReservedSpace = false;
    }
    /**
     * @internal
     */
    async setAriaForm(ariaForm) {
        this.ariaForm = Object.assign({}, ariaForm);
    }
    render() {
        return (h(Host, { key: '24a1ad8e6d848841fd1e83428aa14430ed6fe5fc', id: this.ariaForm.messageId, class: {
                'bal-field-message': true,
                'help': true,
                'is-danger': this.invalid,
                'is-success': this.valid,
                'is-disabled': this.disabled || this.readonly,
                [`is-${this.color}`]: !!this.color,
            }, style: { minHeight: this.noReservedSpace ? '0' : undefined } }, h("slot", { key: '2cb9fb2480527f5b4ae63611f3a424fcc202bc36' })));
    }
}, [260, "bal-field-message", {
        "color": [1],
        "invalid": [4],
        "valid": [4],
        "disabled": [4],
        "readonly": [4],
        "noReservedSpace": [4, "no-reserved-space"],
        "ariaForm": [32],
        "setAriaForm": [64]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-field-message"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-field-message":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, FieldMessage);
            }
            break;
    } });
}

const BalFieldMessage = FieldMessage;
const defineCustomElement = defineCustomElement$1;

export { BalFieldMessage, defineCustomElement };
