import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { B as BEM } from './bem.js';

const balTextCss = ":root{--bal-text-color-light-blue:var(--bal-color-text-light-blue);--bal-text-color-blue-dark:var(--bal-color-text-primary-dark);--bal-text-color-blue-light:var(--bal-color-text-hovered);--bal-text-color-primary-light:var(--bal-color-text-primary-light);--bal-text-color-primary-dark:var(--bal-color-text-primary-dark);--bal-text-color-white:var(--bal-color-text-white);--bal-text-color-black:var(--bal-color-text-black);--bal-text-color-grey:var(--bal-color-text-grey);--bal-text-color-primary:var(--bal-color-text-primary);--bal-text-color-blue:var(--bal-color-text-primary);--bal-text-color-info:var(--bal-color-text-info);--bal-text-color-success:var(--bal-color-text-success);--bal-text-color-warning:var(--bal-color-text-warning);--bal-text-color-danger:var(--bal-color-text-danger);--bal-text-color-danger-dark:var(--bal-color-text-danger-dark);--bal-text-color-danger-darker:var(--bal-color-text-danger-darker)}.bal-text{display:block;-webkit-box-sizing:content-box;box-sizing:content-box;position:static;word-break:break-word;margin:0 0 var(--bal-space-normal) 0}.bal-text--inline{display:inline;margin:0}.bal-text--space-all{margin-top:var(--bal-space-normal);margin-bottom:var(--bal-space-normal)}.bal-text--space-top{margin-top:var(--bal-space-normal);margin-bottom:0}.bal-text--space-bottom{margin-top:0;margin-bottom:var(--bal-space-normal)}.bal-text--space-none{margin:0}.bal-text__text{padding:0;margin:0}.bal-text__text--no-wrap{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.bal-text__text--bold{font-weight:var(--bal-font-weight-bold)}.bal-text__text--shadow{text-shadow:var(--bal-text-shadow-normal)}.bal-text__text--heading{font-family:var(--bal-font-family-title)}.bal-text__text--size-small{font-size:var(--bal-text-size-small);line-height:var(--bal-line-height-small)}@media screen and (min-width: 769px),print{.bal-text__text--size-small{font-size:var(--bal-text-size-small-tablet);line-height:var(--bal-line-height-tablet-small)}}@media screen and (min-width: 1024px){.bal-text__text--size-small{font-size:var(--bal-text-size-small-desktop);line-height:var(--bal-line-height-desktop-small)}}.bal-text__text--size-block{font-size:var(--bal-text-size-medium);line-height:var(--bal-line-height-medium)}@media screen and (min-width: 769px),print{.bal-text__text--size-block{font-size:var(--bal-text-size-medium-tablet);line-height:var(--bal-line-height-tablet-medium)}}@media screen and (min-width: 1024px){.bal-text__text--size-block{font-size:var(--bal-text-size-medium-desktop);line-height:var(--bal-line-height-desktop-medium)}}.bal-text__text--size-lead{font-size:var(--bal-text-size-large);line-height:var(--bal-line-height-large)}@media screen and (min-width: 769px),print{.bal-text__text--size-lead{font-size:var(--bal-text-size-large-tablet);line-height:var(--bal-line-height-tablet-large)}}@media screen and (min-width: 1024px){.bal-text__text--size-lead{font-size:var(--bal-text-size-large-desktop);line-height:var(--bal-line-height-desktop-large)}}.bal-text__text--color-light-blue{color:var(--bal-text-color-light-blue)}.bal-text__text--color-blue-dark{color:var(--bal-text-color-primary-dark)}.bal-text__text--color-blue-light{color:var(--bal-text-color-blue-light)}.bal-text__text--color-primary-light{color:var(--bal-text-color-primary-light)}.bal-text__text--color-primary-dark{color:var(--bal-text-color-primary-dark)}.bal-text__text--color-white{color:var(--bal-text-color-white)}.bal-text__text--color-black{color:var(--bal-text-color-black)}.bal-text__text--color-grey{color:var(--bal-text-color-grey)}.bal-text__text--color-primary{color:var(--bal-text-color-primary)}.bal-text__text--color-blue{color:var(--bal-text-color-primary)}.bal-text__text--color-info{color:var(--bal-text-color-info)}.bal-text__text--color-success{color:var(--bal-text-color-success)}.bal-text__text--color-warning{color:var(--bal-text-color-warning)}.bal-text__text--color-danger{color:var(--bal-text-color-danger)}.bal-text__text--color-danger-dark{color:var(--bal-text-color-danger-dark)}.bal-text__text--color-danger-darker{color:var(--bal-text-color-danger-darker)}";

const Text = /*@__PURE__*/ proxyCustomElement(class Text extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        /**
         * PUBLIC API
         * ------------------------------------------------------
         */
        /**
         * Defines the size of the paragraph
         */
        this.size = '';
        /**
         * If `true` the text has heading font family
         */
        this.heading = false;
        /**
         * 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;
        /**
         * If `true` the text is bold
         */
        this.bold = false;
        /**
         * If `true` the text is shown as a display inline
         */
        this.inline = false;
        /**
         * Defines the color of the text.
         */
        this.color = '';
        /**
         * Defines at which position the heading has spacing.
         */
        this.space = '';
        /**
         * If `true` the color gets inverted for dark backgrounds
         */
        this.inverted = false;
        /**
         * If `true` adds a text shadow to improve readability on image background
         * */
        this.shadow = false;
        /**
         * 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 component gets a invalid style.
         */
        this.invalid = undefined;
        /**
         * @internal
         */
        this.hovered = false;
        /**
         * @internal
         */
        this.pressed = false;
    }
    /**
     * PRIVATE METHODS
     * ------------------------------------------------------
     */
    parseColor() {
        if (this.disabled) {
            return 'grey';
        }
        if (this.invalid) {
            if (this.pressed) {
                return 'danger-darker';
            }
            if (this.hovered) {
                return 'danger-dark';
            }
            return 'danger';
        }
        const color = this.inverted ? 'white' : this.color === 'info' ? 'primary' : this.color;
        if (this.pressed) {
            return 'primary-dark';
        }
        if (this.hovered) {
            return 'light-blue';
        }
        return color;
    }
    /**
     * RENDER
     * ------------------------------------------------------
     */
    render() {
        const Text = this.inline ? 'span' : 'p';
        const color = this.parseColor();
        const block = BEM.block('text');
        return (h(Host, { key: '8aceb26482ae28d7004f4bb81bdbad288dbbea71', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== '')), block.modifier(`inline`).class(this.inline)) }, h(Text, { key: 'efbe450accfb6df4813866cf7f64649c08ad2f07', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('text').class()), block.element('text').modifier(`color-${color}`).class(!!color)), block.element('text').modifier(`bold`).class(this.bold)), block.element('text').modifier(`heading`).class(this.heading)), block.element('text').modifier(`shadow`).class(this.shadow)), block.element('text').modifier(`no-wrap`).class(this.noWrap)), block
                .element('text')
                .modifier(`size-${this.size}`)
                .class(this.size !== '')), "data-testid": "bal-text" }, h("slot", { key: '33ad603fa81fe33512f02b5ed716bd4ec8e675cd' }))));
    }
    static get style() { return balTextCss; }
}, [260, "bal-text", {
        "size": [1],
        "heading": [4],
        "noWrap": [4, "no-wrap"],
        "bold": [4],
        "inline": [4],
        "color": [1],
        "space": [1],
        "inverted": [4],
        "shadow": [4],
        "disabled": [4],
        "invalid": [4],
        "hovered": [4],
        "pressed": [4]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-text"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-text":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Text);
            }
            break;
    } });
}

const BalText = Text;
const defineCustomElement = defineCustomElement$1;

export { BalText, defineCustomElement };
