import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$2 } from './bal-label2.js';

const FieldLabel = /*@__PURE__*/ proxyCustomElement(class FieldLabel extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        /**
         * PUBLIC PROPERTY API
         * ------------------------------------------------------
         */
        /**
         * The value of the for attribute must be a single id for a labeled
         * form-related element in the same document as the <label> element.
         * So, any given label element can be associated with only one form control.
         */
        this.htmlFor = undefined;
        /**
         * If `true` the form control needs to be filled. If it is set to
         * `false` an optional label is added to the label..
         */
        this.required = true;
        /**
         * If `true` the component gets a valid green style.
         */
        this.valid = undefined;
        /**
         * If `true` the component gets a invalid red style.
         */
        this.invalid = undefined;
        /**
         * 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 = undefined;
        /**
         * If `true` the element can not mutated, meaning the user can not edit the control.
         */
        this.readonly = undefined;
        /**
         * Defines the size of the font. Default is like a heading 5 and small is used
         * with the form fields.
         */
        this.size = 'small';
        /**
         * Defines the font weight of the label.
         */
        this.weight = 'bold';
    }
    /**
     * LIFECYCLE
     * ------------------------------------------------------
     */
    componentDidLoad() {
        if (this.element) {
            this.parentBalFieldElement = this.element.closest('bal-field');
            if (this.parentBalFieldElement) {
                this.parentBalFieldElement.classList.add('has-label');
            }
        }
    }
    disconnectedCallback() {
        if (this.parentBalFieldElement) {
            this.parentBalFieldElement.classList.remove('has-label');
        }
    }
    /**
     * RENDER
     * ------------------------------------------------------
     */
    render() {
        return (h(Host, { key: '6685a5711aba2152b975fe49fe114a9edb400679', class: "bal-field-label" }, h("bal-label", { key: 'f677ab02ba144832c6304dc99c3e2900079e38b7', multiline: true, size: this.size, htmlFor: this.htmlFor, required: this.required, valid: this.valid, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, weight: this.weight }, h("slot", { key: '687bfc73cab2cf7bef4e3e15b6a9090d5ba29d38' }))));
    }
    get element() { return this; }
}, [262, "bal-field-label", {
        "htmlFor": [1, "html-for"],
        "required": [4],
        "valid": [4],
        "invalid": [4],
        "disabled": [4],
        "readonly": [4],
        "size": [1],
        "weight": [1]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-field-label", "bal-label"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-field-label":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, FieldLabel);
            }
            break;
        case "bal-label":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const BalFieldLabel = FieldLabel;
const defineCustomElement = defineCustomElement$1;

export { BalFieldLabel, defineCustomElement };
