import { r as registerInstance, h, H as Host } from './core-34fac203.js';

const FormGroup = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    componentDidLoad() {
        if (this.anjLabel && this.anjControl && (this.anjLabel.for !== this.anjControl.inputId)) {
            this.anjLabel.for = this.anjControl.inputId;
            this.anjLabel.labelId = this.anjControl.labelId;
            this.anjLabel.optional = !this.anjControl.required;
        }
    }
    onInputDidLoad({ target }) {
        this.anjControl = target;
        this.componentDidLoad();
    }
    onLabelDidLoad({ target }) {
        this.anjLabel = target;
        this.componentDidLoad();
    }
    onFocus() {
        this.focused = true;
    }
    onBlur() {
        this.focused = false;
    }
    onValidChanged({ detail }) {
        this.invalid = detail;
    }
    onContextChanged({ detail }) {
        this.context = detail;
    }
    render() {
        return (h(Host, { class: { 'anj-focused': this.focused, 'anj-invalid': this.invalid, 'anj-disabled': this.anjControl ? this.anjControl.disabled : false } }, this.anjControl && !this.anjLabel ? [
            h("label", { class: "anj-hidden-control", id: this.anjControl.labelId, htmlFor: this.anjControl.inputId }, this.anjControl.placeholder),
            h("slot", null)
        ] : undefined));
    }
    static get style() { return "anj-form-group {\n  display: block;\n  font-size: 0.875rem;\n  font-family: var(--anj-font-family);\n  font-weight: normal;\n  line-height: 1.5;\n  outline: none;\n  --anj-form-control-border: var(--anj-border);\n  margin-bottom: 1.5rem;\n  position: relative;\n}\nanj-form-group, anj-form-group::before, anj-form-group::after {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  outline: none;\n}\nanj-form-group:focus, anj-form-group:active, anj-form-group *:focus, anj-form-group *:active {\n  outline: none;\n}\nanj-form-group .anj-hidden-control {\n  clip: rect(0 0 0 0);\n  height: 0;\n  left: 0;\n  opacity: 0;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 0;\n}\nanj-form-group.anj-focused {\n  --anj-form-control-border: var(--anj-highlight);\n}\nanj-form-group.anj-invalid {\n  --anj-form-control-border: var(--anj-danger);\n}\nanj-form-group.anj-invalid > anj-form-error {\n  display: block;\n}\nanj-form-group.anj-invalid > anj-form-helper {\n  display: none;\n}\n\ntd anj-form-group {\n  display: inline-block;\n  margin-bottom: -1px;\n  width: 100%;\n}"; }
};

export { FormGroup as anj_form_group };
