'use strict';

var index = require('./index-feA4skrY.js');
var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
var bem = require('./bem-p0PWVN8n.js');
var balClose_i18n = require('./bal-close.i18n-B3X5xlkl.js');
var config_default = require('./config.default-Cko-wpRU.js');
var config_decorator = require('./config.decorator-CUe4yCTd.js');
require('./config.utils-Civnz2jT.js');
require('./browser-BwmkTmm8.js');
require('./log-CXDMiw7o.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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.language = config_default.defaultConfig.language;
        this.region = config_default.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.BEM.block('close');
        const buttonEl = blockEl.element('button');
        const iconEl = buttonEl.element('icon');
        const label = balClose_i18n.i18nBalClose[this.language].close;
        return (index.h(index.Host, { key: '087ee2337aa7bf8828fbcf32b3a8aa1ae74de0c7', class: Object.assign({}, blockEl.class()) }, index.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" }, index.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 index.getElement(this); }
};
tslib_es6.__decorate([
    config_decorator.ListenToConfig(),
    tslib_es6.__metadata("design:type", Function),
    tslib_es6.__metadata("design:paramtypes", [Object]),
    tslib_es6.__metadata("design:returntype", Promise)
], Close.prototype, "configChanged", null);
Close.style = balCloseCss;

exports.bal_close = Close;
