import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BdVwMG9u.js';
import { _ as __decorate, a as __metadata } from './tslib.es6-dfXERft2.js';
import { d as defaultBalAriaForm } from './form-FCLKfv6B.js';
import { d as deepReady, a as waitAfterFramePaint } from './helpers-BNj87EbG.js';
import { L as ListenToMutation } from './mutation.decorator-DhVeNnnY.js';
import { B as BEM } from './bem-ByiN-QjD.js';
import { b as balBreakpoints } from './breakpoints.subject-C32mP6rF.js';
import { L as ListenToBreakpoints } from './breakpoints.decorator-Da-lbVYy.js';
import './browser-B1u-Mq75.js';
import './config.utils-B7jugjyM.js';
import './listener-CClDIhvK.js';
import './device-TtMibDFL.js';
import './tokens.esm-C22U88Bg.js';

const balFieldCss = ":root{--bal-field-label-horizontal-width:33.3333%;--bal-field-label-column-gap:.5rem}.bal-field,.bal-field-label,.bal-field-control,.bal-field-message,.bal-field-hint{display:block;position:relative;font-family:var(--bal-font-family-text)}.bal-field-label{display:inline}.bal-field-label~.bal-field-control{margin-top:.25rem}.bal-field-hint{display:inline-block;margin-left:.25rem;height:1rem;width:1rem}.bal-field-hint__hint{position:absolute;top:2px;left:0}.bal-field-message{line-height:var(--bal-line-height-normal)}.bal-field-hidden{display:none !important;visibility:hidden !important}.bal-field-control{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;gap:.5rem}.bal-field-control .bal-input{-ms-flex:1;flex:1}@media screen and (max-width: 768px){.bal-field-control--expanded-on-mobile{-ms-flex-direction:column;flex-direction:column}.bal-field-control--expanded-on-mobile .bal-button,.bal-field-control--expanded-on-mobile .bal-button .button{width:100%}}.bal-field-message{margin-top:0 !important}.bal-field-control+.bal-field-message{min-height:1.375rem;line-height:1.375rem}.bal-field-control:not(:has(+.bal-field-message)){padding-bottom:1.375rem}.bal-field--horizontal{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:var(--bal-field-label-column-gap);-moz-column-gap:var(--bal-field-label-column-gap);column-gap:var(--bal-field-label-column-gap);-ms-flex-align:center;align-items:center}.bal-field--horizontal .bal-field-label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-width:var(--bal-field-label-horizontal-width);max-width:var(--bal-field-label-horizontal-width);-ms-flex-pack:end;justify-content:flex-end;text-align:right;margin-bottom:0}.bal-field--horizontal .bal-field-control{-ms-flex:1;flex:1;padding-bottom:0;-ms-flex-item-align:end;align-self:flex-end}.bal-field--horizontal .bal-field-message{-ms-flex-preferred-size:100%;flex-basis:100%;margin-top:0 !important;margin-left:calc(var(--bal-field-label-horizontal-width) + var(--bal-field-label-column-gap))}.bal-field--horizontal .bal-field-hint{margin-left:0}.bal-field--horizontal .bal-field-hint .bal-hint{top:0}.bal-field--horizontal .bal-field-hint~.bal-field-message{margin-left:calc(var(--bal-field-label-horizontal-width) + var(--bal-field-label-column-gap)*2 + 1.125rem)}.bal-field--horizontal .bal-field-label~.bal-field-control{margin-top:0}";

const Field = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.balFormControlDidLoad = createEvent(this, "balFormControlDidLoad");
        this.fieldId = `bal-field-${FieldIds++}`;
        this.formControlElement = ['bal-field-control'];
        this.inputElements = [
            'bal-input',
            'bal-number-input',
            'bal-textarea',
            'bal-select',
            'bal-checkbox',
            'bal-radio',
            'bal-input-group',
            'bal-date',
            'bal-input-date',
            'bal-input-stepper',
            'bal-input-slider',
            'bal-file-upload',
            'bal-dropdown',
            'bal-segment',
        ];
        this.formElements = [...this.formControlElement, 'bal-field-label', 'bal-field-message'];
        /**
         * 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 = undefined;
        /**
         * If true, label and input are aligned horizontally within the field component, with the message positioned in a new line below.
         */
        this.horizontal = false;
        /**
         * If `true` the component gets a invalid red style.
         */
        this.invalid = undefined;
        /**
         * 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 = undefined;
        /**
         * If `true` the element can not mutated, meaning the user can not edit the control.
         */
        this.readonly = undefined;
        /**
         * If `true` a loading spinner is visible at the end of the input
         */
        this.loading = undefined;
        this.isDirectChild = (el) => {
            if (!el) {
                return false;
            }
            const parent = el.parentElement;
            if (!parent) {
                return false;
            }
            if (parent.nodeName.toLowerCase() === 'bal-field' && parent !== this.el) {
                return false;
            }
            if (parent === this.el) {
                return true;
            }
            return this.isDirectChild(parent);
        };
        this.isVisible = (el) => {
            if (!el) {
                return false;
            }
            return el.ariaHidden !== 'true';
        };
        this.findDirectChild = (selectors) => {
            const element = this.el.querySelector(selectors);
            const isDirectChild = this.isDirectChild(element);
            if (isDirectChild) {
                if (this.isVisible(element)) {
                    return element;
                }
            }
            return undefined;
        };
        this.findDirectChildren = (selectors) => {
            return selectors
                .map(selector => {
                return Array.from(this.el.querySelectorAll(selector)).filter(this.isDirectChild).filter(this.isVisible);
            })
                .flat();
        };
        this.mutationObserverActive = true;
    }
    requiredHandler() {
        this.updateProps([...this.inputElements, 'bal-field-label'], 'required');
    }
    invalidHandler() {
        this.updateProps([...this.inputElements, ...this.formElements], 'invalid');
    }
    validHandler() {
        this.updateProps([...this.inputElements, ...this.formElements], 'valid');
    }
    disabledHandler() {
        this.updateProps([...this.inputElements, ...this.formElements], 'disabled');
    }
    readonlyHandler() {
        this.updateProps([...this.inputElements, ...this.formElements], 'readonly');
    }
    loadingHandler() {
        this.updateProps([...this.inputElements, ...this.formControlElement], 'loading');
    }
    connectedCallback() {
        this.triggerAllHandlers();
    }
    componentWillLoad() {
        this.triggerAllHandlers();
    }
    async componentDidLoad() {
        await this.syncAriaAttributes();
    }
    async syncAriaAttributes() {
        await deepReady(this.el);
        await waitAfterFramePaint();
        const label = this.findDirectChild('bal-field-label bal-label');
        const message = this.findDirectChild('bal-field-message');
        const controls = this.findDirectChildren([
            'bal-field-control bal-input',
            'bal-field-control bal-select',
            'bal-field-control bal-input-date',
            'bal-field-control bal-dropdown',
            'bal-field-control bal-checkbox',
            'bal-field-control bal-radio',
            'bal-field-control bal-segment',
            'bal-field-control bal-segment-item',
            'bal-field-control bal-checkbox-group',
            'bal-field-control bal-radio-group',
            'bal-field-control bal-number-input',
            'bal-field-control bal-time-input',
            'bal-field-control bal-input-slider',
            'bal-field-control bal-input-stepper',
            'bal-field-control bal-textarea',
            'bal-field-control bal-file-upload',
        ]);
        const ariaForm = Object.assign({}, defaultBalAriaForm);
        if (label) {
            ariaForm.labelId = `${this.fieldId}-lbl`;
        }
        if (message) {
            ariaForm.messageId = `${this.fieldId}-msg`;
        }
        for (let index = 0; index < controls.length; index++) {
            const control = controls[index];
            if (index === 0) {
                ariaForm.controlId = `${this.fieldId}-ctrl`;
                await (label === null || label === void 0 ? void 0 : label.setAriaForm(ariaForm));
                await (message === null || message === void 0 ? void 0 : message.setAriaForm(ariaForm));
                await (control === null || control === void 0 ? void 0 : control.setAriaForm(ariaForm));
            }
            else {
                ariaForm.controlId = `${this.fieldId}-ctrl-${index}`;
                await (control === null || control === void 0 ? void 0 : control.setAriaForm(ariaForm));
            }
        }
    }
    mutationListener() {
        this.triggerAllHandlers();
        this.syncAriaAttributes();
    }
    triggerAllHandlers() {
        this.requiredHandler();
        this.invalidHandler();
        this.validHandler();
        this.readonlyHandler();
        this.disabledHandler();
        this.loadingHandler();
    }
    updateProps(selectors, key) {
        const value = this[key];
        if (value !== undefined) {
            this.notifyComponents(selectors, input => (input[key] = value));
        }
    }
    notifyComponents(selectors, callback) {
        const components = this.el.querySelectorAll(selectors.join(', '));
        components.forEach(c => callback(c));
    }
    render() {
        return (h(Host, { key: 'ef05b294a516d40c5089d051feeb46715f581bc1', id: this.fieldId, class: {
                'bal-field': true,
                'field': true,
                'bal-field--invalid': this.invalid === true,
                'bal-field--horizontal': this.horizontal === true,
            } }, h("slot", { key: '5710d7fd141b21d699004d7982d5d5bb7238cd94' }), h("span", { key: 'e1b36343cdcb60960bcdac4d938c946f40041334', class: "bal-field-hidden" })));
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "required": ["requiredHandler"],
        "invalid": ["invalidHandler"],
        "valid": ["validHandler"],
        "disabled": ["disabledHandler"],
        "readonly": ["readonlyHandler"],
        "loading": ["loadingHandler"]
    }; }
};
__decorate([
    ListenToMutation({ subtree: false, waitAfterFramePrint: true }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], Field.prototype, "mutationListener", null);
let FieldIds = 0;
Field.style = balFieldCss;

const FieldControl = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * @deprecated
         * Baloise icon for the right side of the input
         */
        this.iconRight = '';
        /**
         * @deprecated
         * Baloise icon for the left side of the input
         */
        this.iconLeft = '';
        /**
         * If `true` on mobile devices the form control children are aligned verticaly and expanded to the full width
         */
        this.expandedOnMobile = undefined;
        /**
         * If `true` a loading spinner is visible at the end of the input
         */
        this.loading = false;
    }
    get buildIconLeftTemplate() {
        if (this.iconLeft) {
            return h("bal-icon", { name: this.iconLeft, color: "info", class: "is-left", size: "small" });
        }
        return '';
    }
    get buildIconRightTemplate() {
        if (this.iconRight) {
            return h("bal-icon", { name: this.iconRight, color: "info", class: "is-right", size: "small" });
        }
        return '';
    }
    render() {
        return (h(Host, { key: 'f2dbde868506b54d5b5e2fc14b5c29c417d42891', class: {
                'bal-field-control': true,
                'control': true,
                'has-icons-left': !!this.iconLeft,
                'has-icons-right': !!this.iconRight,
                'is-loading': this.loading,
                'bal-field-control--expanded-on-mobile': !!this.expandedOnMobile,
            } }, h("slot", { key: '274cd16bccefc825d85e4b1222da7c523a1aa937' }), this.buildIconLeftTemplate, this.buildIconRightTemplate));
    }
};

const FieldHint = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Hide the title on desktop.
         */
        this.hideTitleOnDesktop = false;
        /**
         * Text of the inputs label
         */
        this.subject = '';
        /**
         * Text for the close button.
         */
        this.closeLabel = 'Close';
        /**
         * Disables the close button for tablet and desktop
         */
        this.small = false;
        this.isDesktop = balBreakpoints.isDesktop;
    }
    breakpointListener(breakpoints) {
        this.isDesktop = breakpoints.desktop;
    }
    render() {
        const block = BEM.block('field-hint');
        return (h(Host, { key: '90dbf0da0a0c7ec498538721135e2fdefc4ac238', class: Object.assign({}, block.class()) }, h("bal-hint", { key: '1976d07de449aa8b2897a375f61953f0c705e4ae', class: Object.assign({}, block.element('hint').class()), "data-testid": "bal-field-hint", closeLabel: this.closeLabel, small: this.small }, this.subject && !(this.hideTitleOnDesktop && this.isDesktop) ? (h("bal-hint-title", null, this.subject)) : (''), h("bal-hint-text", { key: 'ae2b48186e4f4c1adbfe7b3ed57a798a55a4cad0' }, h("slot", { key: 'e4a33e9e14ab86a15e78321fbd9f7325e0420ec5' })))));
    }
};
__decorate([
    ListenToBreakpoints(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], FieldHint.prototype, "breakpointListener", null);

const FieldLabel = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * 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 getElement(this); }
};

const FieldMessage = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        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' })));
    }
};

export { Field as bal_field, FieldControl as bal_field_control, FieldHint as bal_field_hint, FieldLabel as bal_field_label, FieldMessage as bal_field_message };
