'use strict';

var index = require('./index-feA4skrY.js');
var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
var bem = require('./bem-p0PWVN8n.js');
var form = require('./form-BSlIiqcR.js');
var log = require('./log-CXDMiw7o.js');
var balLabel_i18n = require('./bal-label.i18n-BcNNm9Es.js');
var config_default = require('./config.default-Cko-wpRU.js');
var config_decorator = require('./config.decorator-CUe4yCTd.js');
require('./browser-BwmkTmm8.js');
require('./config.utils-Civnz2jT.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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.language = config_default.defaultConfig.language;
        this.region = config_default.defaultConfig.region;
        this.ariaForm = form.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.BEM.block('label');
        const suffix = this.required === false ? balLabel_i18n.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 (index.h(index.Host, { key: '84c07a4280f41852128ec5994de83c043d1858e9', class: Object.assign({}, block.class()) }, index.h("label", { key: 'a85d81f26e1439240ee560fda4ba736c29f23187', 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)) }, index.h("slot", { key: '74757f068bbc4e5377176f29323978cdfe5ac743' }), suffix)));
    }
    get el() { return index.getElement(this); }
};
tslib_es6.__decorate([
    log.Logger('bal-label'),
    tslib_es6.__metadata("design:type", Function),
    tslib_es6.__metadata("design:paramtypes", [Function]),
    tslib_es6.__metadata("design:returntype", void 0)
], Label.prototype, "createLogger", null);
tslib_es6.__decorate([
    config_decorator.ListenToConfig(),
    tslib_es6.__metadata("design:type", Function),
    tslib_es6.__metadata("design:paramtypes", [Object]),
    tslib_es6.__metadata("design:returntype", Promise)
], Label.prototype, "configChanged", null);
let labelIds = 0;
Label.style = balLabelCss;

exports.bal_label = Label;
