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 defaultConfig } from './config.default.js';
import { L as ListenToConfig } from './config.decorator.js';
import { L as Logger } from './log.js';
import { i as i18nBalLabel } from './bal-label.i18n.js';
import { d as defaultBalAriaForm } from './form.js';

const balLabelCss = ":root,:host{--bal-label-font-family:var(--bal-form-field-label-font-family);--bal-label-font-weight:var(--bal-form-field-label-font-weight);--bal-label-small-font-family:var(--bal-form-field-label-font-family);--bal-label-small-font-weight:var(--bal-form-field-label-font-weight);--bal-label-small-font-size:var(--bal-text-size-small);--bal-label-small-font-size-tablet:var(--bal-text-size-small-tablet);--bal-label-small-font-size-desktop:var(--bal-text-size-small-desktop);--bal-label-small-line-height:var(--bal-line-height-small);--bal-label-small-line-height-tablet:var(--bal-line-height-tablet-small);--bal-label-small-line-height-desktop:var(--bal-line-height-desktop-small)}.bal-label{display:inline;-webkit-box-sizing:content-box;box-sizing:content-box;position:static;word-break:break-word}.bal-label__native{display:inline;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;white-space:pre;min-width:0;font-family:var(--bal-label-font-family);font-weight:var(--bal-label-font-weight);font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal)}.bal-label__native--multiline{white-space:normal}.bal-label__native--no-wrap{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.bal-label__native--small{font-family:var(--bal-label-small-font-family);font-size:var(--bal-label-small-font-size);line-height:var(--bal-label-small-line-height)}@media screen and (min-width: 769px),print{.bal-label__native--small{font-size:var(--bal-label-small-font-size-tablet);line-height:var(--bal-label-small-line-height-tablet)}}@media screen and (min-width: 1024px){.bal-label__native--small{font-size:var(--bal-label-small-font-size-desktop);line-height:var(--bal-label-small-line-height-desktop)}}.bal-label__native--large{font-family:var(--bal-font-family-title);font-size:var(--bal-text-size-large);line-height:var(--bal-line-height-large)}@media screen and (min-width: 769px),print{.bal-label__native--large{font-size:var(--bal-text-size-large-tablet);line-height:var(--bal-line-height-tablet-large)}}@media screen and (min-width: 1024px){.bal-label__native--large{font-size:var(--bal-text-size-large-desktop);line-height:var(--bal-line-height-desktop-large)}}.bal-label__native--x-large{font-family:var(--bal-font-family-title);font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-label__native--x-large{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-label__native--x-large{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}.bal-label__native--xx-large{font-family:var(--bal-font-family-title);font-size:var(--bal-text-size-xx-large);line-height:var(--bal-line-height-xx-large)}@media screen and (min-width: 769px),print{.bal-label__native--xx-large{font-size:var(--bal-text-size-xx-large-tablet);line-height:var(--bal-line-height-tablet-xx-large)}}@media screen and (min-width: 1024px){.bal-label__native--xx-large{font-size:var(--bal-text-size-xx-large-desktop);line-height:var(--bal-line-height-desktop-xx-large)}}.bal-label__native--xxx-large{font-family:var(--bal-font-family-title);font-size:var(--bal-text-size-xxx-large);line-height:var(--bal-line-height-xxx-large)}@media screen and (min-width: 769px),print{.bal-label__native--xxx-large{font-size:var(--bal-text-size-xxx-large-tablet);line-height:var(--bal-line-height-tablet-xxx-large)}}@media screen and (min-width: 1024px){.bal-label__native--xxx-large{font-size:var(--bal-text-size-xxx-large-desktop);line-height:var(--bal-line-height-desktop-xxx-large)}}.bal-label__native--success{color:var(--bal-form-field-label-success-color)}.bal-label__native--danger{color:var(--bal-form-field-label-danger-color)}.bal-label__native--disabled{color:var(--bal-form-field-label-disabled-color) !important}.bal-label__native--regular{font-weight:var(--bal-font-weight-regular)}.bal-label__native--hovered{color:var(--bal-form-field-label-color-hover)}.bal-label__native--pressed{color:var(--bal-form-field-label-color-active)}.bal-label__native--danger.bal-label__native--hovered{color:var(--bal-form-field-label-danger-color-hover)}.bal-label__native--danger.bal-label__native--pressed{color:var(--bal-form-field-label-danger-color-active)}";

const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.language = defaultConfig.language;
        this.region = defaultConfig.region;
        this.ariaForm = defaultBalAriaForm;
        /**
         * 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;
        /**
         * Define the id of the native label element
         */
        this.htmlId = `bal-lbl-${labelIds++}`;
        /**
         * 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;
        /**
         * When true, the text will be truncated with a text overflow ellipsis instead of wrapping.
         * Please note that text overflow can only occur in block or inline-block level elements,
         * as these elements require a width to overflow.
         */
        this.noWrap = false;
        /**
         * When true, the text will is able to break on multiple lines.
         */
        this.multiline = false;
        /**
         * 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 = '';
        /**
         * Defines the font weight of the label.
         */
        this.weight = 'bold';
        /**
         * @internal
         */
        this.hovered = false;
        /**
         * @internal
         */
        this.pressed = false;
    }
    createLogger(log) {
        this.log = log;
    }
    /**
     * LISTENERS
     * ------------------------------------------------------
     */
    /**
     * @internal define config for the component
     */
    async configChanged(state) {
        this.language = state.language;
        this.region = state.region;
    }
    /**
     * PUBLIC METHODS
     * ------------------------------------------------------
     */
    /**
     * @internal define config for the component
     */
    async setAriaForm(ariaForm) {
        this.ariaForm = Object.assign({}, ariaForm);
    }
    /**
     * RENDER
     * ------------------------------------------------------
     */
    render() {
        const block = BEM.block('label');
        const suffix = this.required === false ? i18nBalLabel[this.language].optional || '' : '';
        const disabled = !!this.disabled || !!this.readonly;
        const danger = !!this.invalid;
        const success = !!this.valid;
        const regular = this.weight === 'regular';
        const small = this.size === 'small';
        const large = this.size === 'large';
        const xLarge = this.size === 'x-large';
        const xxLarge = this.size === 'xx-large';
        const xxxLarge = this.size === 'xxx-large';
        const id = this.ariaForm.labelId || this.htmlId;
        const htmlFor = this.htmlFor || this.ariaForm.controlId;
        return (h(Host, { key: '0fe607cc7952863906e22d2f684ec7a92ee9c48a', class: Object.assign({}, block.class()) }, h("label", { key: '61d3f5ed4eac70ae2cd5b94242563ca4f2404efb', id: id, htmlFor: htmlFor, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('multiline').class(this.multiline)), block.element('native').modifier('no-wrap').class(this.noWrap)), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('danger').class(danger)), block.element('native').modifier('success').class(success)), block.element('native').modifier('regular').class(regular)), block.element('native').modifier('small').class(small)), block.element('native').modifier('large').class(large)), block.element('native').modifier('x-large').class(xLarge)), block.element('native').modifier('xx-large').class(xxLarge)), block.element('native').modifier('xxx-large').class(xxxLarge)), block.element('native').modifier('hovered').class(this.hovered)), block.element('native').modifier('pressed').class(this.pressed)) }, h("slot", { key: '2e4d3b6e54d0661520f1d6fbebddd7efdfa22258' }), suffix)));
    }
    get el() { return this; }
    static get style() { return balLabelCss; }
}, [4, "bal-label", {
        "htmlFor": [1, "html-for"],
        "htmlId": [1, "html-id"],
        "required": [4],
        "noWrap": [4, "no-wrap"],
        "multiline": [4],
        "valid": [4],
        "invalid": [4],
        "disabled": [4],
        "readonly": [4],
        "size": [1],
        "weight": [1],
        "hovered": [4],
        "pressed": [4],
        "language": [32],
        "region": [32],
        "ariaForm": [32],
        "configChanged": [64],
        "setAriaForm": [64]
    }]);
__decorate([
    Logger('bal-label'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function]),
    __metadata("design:returntype", void 0)
], Label.prototype, "createLogger", null);
__decorate([
    ListenToConfig(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", Promise)
], Label.prototype, "configChanged", null);
let labelIds = 0;
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-label"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-label":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Label);
            }
            break;
    } });
}

export { Label as L, defineCustomElement as d };
