import { __decorate, __metadata } from "tslib";
import { h, Host } from "@stencil/core";
import { BEM } from "../../utils/bem";
import { defaultConfig, ListenToConfig, } from "../../utils/config";
import { defaultBalAriaForm } from "../../utils/form";
import { Logger } from "../../utils/log";
import { i18nBalLabel } from "./bal-label.i18n";
export class Label {
    constructor() {
        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: '84c07a4280f41852128ec5994de83c043d1858e9', class: Object.assign({}, block.class()) }, 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)) }, h("slot", { key: '74757f068bbc4e5377176f29323978cdfe5ac743' }), suffix)));
    }
    static get is() { return "bal-label"; }
    static get originalStyleUrls() {
        return {
            "$": ["./bal-label.sass"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bal-label.css"]
        };
    }
    static get properties() {
        return {
            "htmlFor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The value of the for attribute must be a single id for a labeled\nform-related element in the same document as the <label> element.\nSo, any given label element can be associated with only one form control."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "html-for",
                "defaultValue": "undefined"
            },
            "htmlId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Define the id of the native label element"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "html-id",
                "defaultValue": "`bal-lbl-${labelIds++}`"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the form control needs to be filled. If it is set to\n`false` an optional label is added to the label.."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "required",
                "defaultValue": "true"
            },
            "noWrap": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "When true, the text will be truncated with a text overflow ellipsis instead of wrapping.\nPlease note that text overflow can only occur in block or inline-block level elements,\nas these elements require a width to overflow."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "no-wrap",
                "defaultValue": "false"
            },
            "multiline": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "When true, the text will is able to break on multiple lines."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "multiline",
                "defaultValue": "false"
            },
            "valid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true` the component gets a valid green style."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "valid",
                "defaultValue": "undefined"
            },
            "invalid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true` the component gets a invalid red style."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "invalid",
                "defaultValue": "undefined"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "undefined"
            },
            "readonly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true` the element can not mutated, meaning the user can not edit the control."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "readonly",
                "defaultValue": "undefined"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalLabelSize",
                    "resolved": "\"\" | \"large\" | \"small\" | \"x-large\" | \"xx-large\" | \"xxx-large\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the size of the font. Default is like a heading 5 and small is used\nwith the form fields."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size",
                "defaultValue": "''"
            },
            "weight": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalLabelWeight",
                    "resolved": "\"bold\" | \"regular\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the font weight of the label."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "weight",
                "defaultValue": "'bold'"
            },
            "hovered": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": undefined
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "hovered",
                "defaultValue": "false"
            },
            "pressed": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": undefined
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "pressed",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "language": {},
            "region": {},
            "ariaForm": {}
        };
    }
    static get methods() {
        return {
            "configChanged": {
                "complexType": {
                    "signature": "(state: BalConfigState) => Promise<void>",
                    "parameters": [{
                            "name": "state",
                            "type": "BalConfigState",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "BalConfigState": {
                            "location": "import",
                            "path": "../../utils/config",
                            "id": "src/utils/config/index.ts::BalConfigState"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": [{
                            "name": "internal",
                            "text": "define config for the component"
                        }]
                }
            },
            "setAriaForm": {
                "complexType": {
                    "signature": "(ariaForm: BalAriaForm) => Promise<void>",
                    "parameters": [{
                            "name": "ariaForm",
                            "type": "BalAriaForm",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "BalAriaForm": {
                            "location": "import",
                            "path": "../../utils/form",
                            "id": "src/utils/form.ts::BalAriaForm"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": [{
                            "name": "internal",
                            "text": "define config for the component"
                        }]
                }
            }
        };
    }
    static get elementRef() { return "el"; }
}
__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;
