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 { B as BalScrollHandler } from './scroll.js';
import { p as preventDefault } from './utils.js';
import { d as defineCustomElement$8 } from './bal-button2.js';
import { d as defineCustomElement$7 } from './bal-button-group2.js';
import { d as defineCustomElement$6 } from './bal-close2.js';
import { d as defineCustomElement$5 } from './bal-heading2.js';
import { d as defineCustomElement$4 } from './bal-icon2.js';
import { d as defineCustomElement$3 } from './bal-popup2.js';
import { d as defineCustomElement$2 } from './bal-spinner2.js';
import { d as defineCustomElement$1 } from './bal-stack2.js';
import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
import { b as balBreakpoints } from './breakpoints.subject.js';
import { i as isEnterKey, a as isSpaceKey } from './keyboard.helpers.js';
import { L as ListenToConfig } from './config.decorator.js';

const balHintCss = "@media (hover: hover)and (pointer: fine){.bal-hint__icon:focus-visible:not(:active){-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-hint-content-background:var(--bal-color-grey-2);--bal-hint-content-border-color:var(--bal-color-grey-2);--bal-hint-icon-color-hover:var(--bal-color-light-blue-5)}.bal-hint{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block}.bal-hint__icon{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;z-index:var(--bal-z-index-popup) !important}.bal-hint__icon:hover svg,.bal-hint__icon:hover g,.bal-hint__icon:hover path,.bal-hint__icon:hover circle{fill:var(--bal-hint-icon-color-hover)}.bal-hint .bal-popup__container{z-index:var(--bal-z-index-popup);background:var(--bal-hint-content-background);border:8px solid var(--bal-hint-content-border-color)}.bal-hint__content{width:auto;max-width:30rem;min-width:16.25rem;display:-ms-flexbox;display:flex;gap:1.5rem;-ms-flex-direction:column;flex-direction:column}@media screen and (max-width: 768px){.bal-hint__content{padding:1.25rem;min-height:100%}.bal-hint__content>div{-ms-flex:1;flex:1}}.bal-hint__content__title{display:block;margin-bottom:1rem}.bal-hint__content__title__heading{font-family:var(--bal-title-font-family);font-weight:var(--bal-title-font-weight);font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-tablet);line-height:var(--bal-line-height-tablet-x-large)}}@media screen and (min-width: 1024px){.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}@media screen and (min-width: 769px),print{.bal-hint__content__buttons--is-hidden-desktop{display:none !important}}.bal-hint__content__text__field{font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);line-height:var(--bal-text-line-height-text);font-size:var(--bal-text-size-normal)}.bal-hint__overlay__content{position:fixed;display:none;overflow:auto;top:0;left:0;right:0;bottom:0;z-index:var(--bal-z-index-popup)}.bal-hint__overlay__content--active{display:block}";

const Hint = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.bodyScrollHandler = new BalScrollHandler();
        this.componentId = `bal-hint-${hintIds++}`;
        this.isActive = false;
        this.innerCloseLabel = 'Close';
        this.isMobile = balBreakpoints.isMobile;
        /**
         * Disables the close button for tablet and desktop
         */
        this.small = false;
        this.onPopupChange = (ev) => {
            this.isActive = ev.detail;
            if (this.isMobile) {
                if (this.isActive) {
                    this.bodyScrollHandler.disable();
                }
                else {
                    this.bodyScrollHandler.enable();
                }
            }
            preventDefault(ev);
        };
    }
    connectedCallback() {
        this.bodyScrollHandler.connect();
    }
    componentDidRender() {
        this.updateContent();
    }
    disconnectedCallback() {
        this.bodyScrollHandler.disconnect();
    }
    breakpointListener(breakpoints) {
        const isCurrentMobile = breakpoints.mobile;
        if (isCurrentMobile !== this.isMobile) {
            this.isActive = false;
        }
        this.isMobile = isCurrentMobile;
    }
    /**
     * @internal define config for the component
     */
    async configChanged(state) {
        if (!this.closeLabel) {
            switch (state.language) {
                case 'de':
                    this.innerCloseLabel = 'Schliessen';
                    break;
                case 'fr':
                    this.innerCloseLabel = 'Fermer';
                    break;
                case 'it':
                    this.innerCloseLabel = 'Chiudere';
                    break;
                case 'nl':
                    this.innerCloseLabel = 'Sluiten';
                    break;
                default:
                    this.innerCloseLabel = 'Close';
                    break;
            }
        }
    }
    /**
     * Toggles the hint box.
     */
    async toggle() {
        if (this.isActive) {
            this.dismiss();
        }
        else {
            this.present();
        }
    }
    /**
     * Opens the hint box.
     */
    async present() {
        if (this.popupElement) {
            this.popupElement.present();
        }
        this.isActive = true;
    }
    /**
     * Closes the hint box.
     */
    async dismiss() {
        if (this.popupElement) {
            this.popupElement.dismiss();
        }
        this.isActive = false;
    }
    updateContent() {
        if (this.hintContentEl && this.slotWrapperEl) {
            this.hintContentEl.innerHTML = this.slotWrapperEl.innerHTML;
        }
    }
    render() {
        const block = BEM.block('hint');
        const elIcon = block.element('icon');
        const elContent = block.element('content');
        const elButtons = elContent.element('buttons');
        const TriggerIcon = () => {
            return (h("bal-icon", { class: Object.assign({}, elIcon.class()), "bal-popup": this.componentId, "data-testid": "bal-hint-trigger", "aria-haspopup": "true", role: "button", name: "info-circle", tabindex: 0, onKeyDown: event => {
                    if (isEnterKey(event) || isSpaceKey(event)) {
                        event.preventDefault();
                        this.toggle();
                    }
                } }));
        };
        const HintContent = () => {
            return (h("div", { class: Object.assign({}, elContent.class()), "data-testid": "bal-hint-content" }, h("div", { ref: el => (this.hintContentEl = el) }), h("bal-button-group", { class: Object.assign(Object.assign({}, elButtons.class()), elButtons.modifier('is-hidden-desktop').class(this.small)) }, h("bal-button", { "data-testid": "bal-hint-close", color: "info", onClick: () => this.dismiss() }, this.closeLabel ? this.closeLabel : this.innerCloseLabel))));
        };
        const Popup = () => {
            return (h("div", { class: Object.assign({}, block.element('popup').class()) }, h(TriggerIcon, null), h("bal-popup", { id: this.componentId, placement: "right", closable: true, ref: el => (this.popupElement = el), onBalChange: this.onPopupChange, variant: this.isMobile ? 'fullscreen' : 'popover', offset: this.isMobile ? 0 : 16 }, h("bal-popup-content", null, h(HintContent, null)))));
        };
        return (h(Host, { class: Object.assign({}, block.class()) }, h(Popup, null), h("div", { ref: el => (this.slotWrapperEl = el), style: { display: 'none' } }, h("slot", null))));
    }
    get element() { return this; }
    static get style() { return balHintCss; }
}, [260, "bal-hint", {
        "closeLabel": [1, "close-label"],
        "small": [4],
        "isActive": [32],
        "innerCloseLabel": [32],
        "isMobile": [32],
        "configChanged": [64],
        "toggle": [64],
        "present": [64],
        "dismiss": [64]
    }]);
__decorate([
    ListenToBreakpoints(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], Hint.prototype, "breakpointListener", null);
__decorate([
    ListenToConfig(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", Promise)
], Hint.prototype, "configChanged", null);
let hintIds = 0;
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-hint", "bal-button", "bal-button-group", "bal-close", "bal-heading", "bal-icon", "bal-popup", "bal-spinner", "bal-stack"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-hint":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Hint);
            }
            break;
        case "bal-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$8();
            }
            break;
        case "bal-button-group":
            if (!customElements.get(tagName)) {
                defineCustomElement$7();
            }
            break;
        case "bal-close":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "bal-heading":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "bal-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "bal-popup":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "bal-spinner":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "bal-stack":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { Hint as H, defineCustomElement as d };
