import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { _ as __decorate, a as __metadata } from './tslib.es6.js';
import { B as BEM } from './bem.js';
import { d as defineCustomElement$c } from './bal-button2.js';
import { d as defineCustomElement$b } from './bal-button-group2.js';
import { d as defineCustomElement$a } from './bal-close2.js';
import { d as defineCustomElement$9 } from './bal-heading2.js';
import { d as defineCustomElement$8 } from './bal-hint2.js';
import { d as defineCustomElement$7 } from './bal-hint-text2.js';
import { d as defineCustomElement$6 } from './bal-hint-title2.js';
import { d as defineCustomElement$5 } from './bal-icon2.js';
import { d as defineCustomElement$4 } from './bal-popup2.js';
import { d as defineCustomElement$3 } from './bal-spinner2.js';
import { d as defineCustomElement$2 } from './bal-stack2.js';
import { b as balBreakpoints } from './breakpoints.subject.js';
import { L as ListenToBreakpoints } from './breakpoints.decorator.js';

const FieldHint = /*@__PURE__*/ proxyCustomElement(class FieldHint extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        /**
         * 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' })))));
    }
}, [262, "bal-field-hint", {
        "hideTitleOnDesktop": [4, "hide-title-on-desktop"],
        "subject": [1],
        "closeLabel": [1, "close-label"],
        "small": [4],
        "isDesktop": [32]
    }]);
__decorate([
    ListenToBreakpoints(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], FieldHint.prototype, "breakpointListener", null);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-field-hint", "bal-button", "bal-button-group", "bal-close", "bal-heading", "bal-hint", "bal-hint-text", "bal-hint-title", "bal-icon", "bal-popup", "bal-spinner", "bal-stack"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-field-hint":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, FieldHint);
            }
            break;
        case "bal-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$c();
            }
            break;
        case "bal-button-group":
            if (!customElements.get(tagName)) {
                defineCustomElement$b();
            }
            break;
        case "bal-close":
            if (!customElements.get(tagName)) {
                defineCustomElement$a();
            }
            break;
        case "bal-heading":
            if (!customElements.get(tagName)) {
                defineCustomElement$9();
            }
            break;
        case "bal-hint":
            if (!customElements.get(tagName)) {
                defineCustomElement$8();
            }
            break;
        case "bal-hint-text":
            if (!customElements.get(tagName)) {
                defineCustomElement$7();
            }
            break;
        case "bal-hint-title":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "bal-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "bal-popup":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "bal-spinner":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "bal-stack":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const BalFieldHint = FieldHint;
const defineCustomElement = defineCustomElement$1;

export { BalFieldHint, defineCustomElement };
