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 { i as i18nBalClose } from './bal-close.i18n.js';
import { d as defineCustomElement$1 } from './bal-icon2.js';
import { d as defaultConfig } from './config.default.js';
import { L as ListenToConfig } from './config.decorator.js';

const balCloseCss = "@media (hover: hover)and (pointer: fine){.bal-close__button:focus-visible:not(:active),.bal-close__button--inverted:focus-visible:not(:active){-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-close-background:transparent;--bal-close-background-focus-visible:var(--bal-form-field-control-background);--bal-close-background-focus-inverted-focus-visible:var(--bal-form-field-control-background);--bal-close-border-radius:var(--bal-radius-rounded)}.bal-close{position:static;display:inline-block}.bal-close__button{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-moz-appearance:none;-webkit-appearance:none;background-color:var(--bal-close-background);border:none;border-radius:var(--bal-close-border-radius);cursor:pointer;pointer-events:auto;display:inline-block;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;font-size:0;outline:none;position:relative;vertical-align:top;padding:.313rem}@media (hover: hover)and (pointer: fine){.bal-close__button:hover{background:rgba(0,7,57,.1)}}@media (hover: hover)and (pointer: fine){.bal-close__button:focus-visible:not(:active){background:var(--bal-close-background-focus-visible)}}.bal-close__button:active{background:rgba(0,7,57,.3)}@media (hover: hover)and (pointer: fine){.bal-close__button--inverted:hover{background:rgba(255,255,255,.3)}}@media (hover: hover)and (pointer: fine){.bal-close__button--inverted:focus-visible:not(:active){background:var(--bal-close-background-focus-inverted-focus-visible)}}.bal-close__button--inverted:active{background:rgba(255,255,255,.5)}.bal-close__button--size-small{padding:.25rem}.bal-close__button--size-medium{padding:.531rem}";

const Close = /*@__PURE__*/ proxyCustomElement(class Close extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.language = defaultConfig.language;
        this.region = defaultConfig.region;
        /**
         * Define the size of badge. Small is recommended for tabs.
         */
        this.size = '';
        /**
         * If `true` it supports dark backgrounds.
         */
        this.inverted = false;
    }
    /**
     * @internal define config for the component
     */
    async configChanged(state) {
        this.language = state.language;
        this.region = state.region;
    }
    render() {
        const blockEl = BEM.block('close');
        const buttonEl = blockEl.element('button');
        const iconEl = buttonEl.element('icon');
        const label = i18nBalClose[this.language].close;
        return (h(Host, { key: '087ee2337aa7bf8828fbcf32b3a8aa1ae74de0c7', class: Object.assign({}, blockEl.class()) }, h("button", { key: 'ff78161fb93ebc2e8c5855e3ca734f32a78db700', type: "button", "aria-label": label, title: label, tabindex: "0", class: Object.assign(Object.assign(Object.assign({}, buttonEl.class()), buttonEl.modifier('inverted').class(this.inverted)), buttonEl.modifier(`size-${this.size}`).class(this.size !== '')), "data-testid": "bal-close" }, h("bal-icon", { key: '6f69b61b7ddbd9c0d2c2c532e3115e3429d9acf3', name: "close", size: this.size === 'small' ? 'x-small' : this.size === 'medium' ? 'medium' : 'small', inverted: this.inverted, class: Object.assign({}, iconEl.class()) }))));
    }
    get el() { return this; }
    static get style() { return balCloseCss; }
}, [256, "bal-close", {
        "size": [1],
        "inverted": [4],
        "language": [32],
        "region": [32],
        "configChanged": [64]
    }]);
__decorate([
    ListenToConfig(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", Promise)
], Close.prototype, "configChanged", null);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-close", "bal-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-close":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Close);
            }
            break;
        case "bal-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { Close as C, defineCustomElement as d };
