'use strict';

var index = require('./index-feA4skrY.js');
var bem = require('./bem-p0PWVN8n.js');
var browser = require('./browser-BwmkTmm8.js');

const HEADING_TAGS = {
    'display': 'h1',
    'display-2': 'h1',
    'h1': 'h1',
    'h2': 'h2',
    'h3': 'h3',
    'h4': 'h4',
    'h5': 'h5',
    'span': 'span',
    'p': 'p',
    'xxxxx-large': 'h1',
    'xxxx-large': 'h1',
    'xxx-large': 'h1',
    'xx-large': 'h1',
    'x-large': 'h2',
    'large': 'h3',
    'medium': 'h4',
    'normal': 'h5',
};
const HEADING_ORDER = [
    'xxxxx-large',
    'xxxx-large',
    'xxx-large',
    'xx-large',
    'x-large',
    'large',
    'medium',
    'normal',
];
const HEADING_SIZES = {
    'display': 'xxxxx-large',
    'display-2': 'xxxx-large',
    'h1': 'xxx-large',
    'h2': 'xx-large',
    'h3': 'x-large',
    'h4': 'large',
    'h5': 'normal',
    'p': 'normal',
    'span': 'normal',
    'xxxxx-large': 'xxxxx-large',
    'xxxx-large': 'xxxx-large',
    'xxx-large': 'xxx-large',
    'xx-large': 'xx-large',
    'x-large': 'x-large',
    'large': 'large',
    'medium': 'medium',
    'normal': 'normal',
};
const HEADING_COLORS = {
    primary: 'primary',
    info: 'primary',
    blue: 'primary',
    success: 'success',
    warning: 'warning',
    danger: 'danger',
    white: 'white',
};

const balHeadingCss = ":root{--bal-heading-color-white:var(--bal-color-text-white);--bal-heading-color-success:var(--bal-color-text-success);--bal-heading-color-warning:var(--bal-color-text-warning);--bal-heading-color-danger:var(--bal-color-text-danger)}.bal-heading{display:block;position:static;margin:0}.bal-heading:not(:last-child){margin-bottom:var(--bal-space-x-small)}.bal-heading.bal-heading--level-display:not(:last-child){margin-bottom:var(--bal-space-normal)}.bal-heading--space-all,.bal-heading--space-top{margin-top:var(--bal-space-x-small)}.bal-heading--space-all,.bal-heading--space-bottom{margin-bottom:var(--bal-space-x-small)}.bal-heading--level-display.bal-heading--space-all,.bal-heading--level-display.bal-heading--space-top{margin-top:var(--bal-space-normal)}.bal-heading--level-display.bal-heading--space-all,.bal-heading--level-display.bal-heading--space-bottom{margin-bottom:var(--bal-space-normal)}.bal-heading--space-top,.bal-heading--space-top:not(:last-child){margin-bottom:0}.bal-heading--space-none,.bal-heading--space-none:not(:last-child){margin:0}.bal-heading__text{margin:0 !important;padding:0;font-weight:var(--bal-font-weight-bold);font-family:var(--bal-font-family-title)}.bal-heading__text--no-wrap{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.bal-heading__text--subtitle{font-weight:var(--bal-font-weight-light)}.bal-heading__text--shadow{text-shadow:var(--bal-text-shadow-normal)}.bal-heading__text--color-white{color:var(--bal-heading-color-white)}.bal-heading__text--color-success{color:var(--bal-heading-color-success)}.bal-heading__text--color-warning{color:var(--bal-heading-color-warning)}.bal-heading__text--color-danger{color:var(--bal-heading-color-danger)}.bal-heading__text--size-normal{font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal)}@media screen and (min-width: 769px),print{.bal-heading__text--size-normal{font-size:var(--bal-text-size-normal-tablet);line-height:var(--bal-line-height-tablet-normal)}}@media screen and (min-width: 1024px){.bal-heading__text--size-normal{font-size:var(--bal-text-size-normal-desktop);line-height:var(--bal-line-height-desktop-normal)}}.bal-heading__text--size-medium{font-size:var(--bal-text-size-medium);line-height:var(--bal-line-height-medium)}@media screen and (min-width: 769px),print{.bal-heading__text--size-medium{font-size:var(--bal-text-size-medium-tablet);line-height:var(--bal-line-height-tablet-medium)}}@media screen and (min-width: 1024px){.bal-heading__text--size-medium{font-size:var(--bal-text-size-medium-desktop);line-height:var(--bal-line-height-desktop-medium)}}.bal-heading__text--size-large{font-size:var(--bal-text-size-large);line-height:var(--bal-line-height-large)}@media screen and (min-width: 769px),print{.bal-heading__text--size-large{font-size:var(--bal-text-size-large-tablet);line-height:var(--bal-line-height-tablet-large)}}@media screen and (min-width: 1024px){.bal-heading__text--size-large{font-size:var(--bal-text-size-large-desktop);line-height:var(--bal-line-height-desktop-large)}}.bal-heading__text--size-x-large{font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-heading__text--size-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-heading__text--size-x-large{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}.bal-heading__text--size-xx-large{font-size:var(--bal-text-size-xx-large);line-height:var(--bal-line-height-xx-large)}@media screen and (min-width: 769px),print{.bal-heading__text--size-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-heading__text--size-xx-large{font-size:var(--bal-text-size-xx-large-desktop);line-height:var(--bal-line-height-desktop-xx-large)}}.bal-heading__text--size-xxx-large{font-size:var(--bal-text-size-xxx-large);line-height:var(--bal-line-height-xxx-large)}@media screen and (min-width: 769px),print{.bal-heading__text--size-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-heading__text--size-xxx-large{font-size:var(--bal-text-size-xxx-large-desktop);line-height:var(--bal-line-height-desktop-xxx-large)}}.bal-heading__text--size-xxxx-large{font-size:var(--bal-text-size-xxxx-large);line-height:var(--bal-line-height-xxxx-large)}@media screen and (min-width: 769px),print{.bal-heading__text--size-xxxx-large{font-size:var(--bal-text-size-xxxx-large-tablet);line-height:var(--bal-line-height-tablet-xxxx-large)}}@media screen and (min-width: 1024px){.bal-heading__text--size-xxxx-large{font-size:var(--bal-text-size-xxxx-large-desktop);line-height:var(--bal-line-height-desktop-xxxx-large)}}.bal-heading__text--size-xxxxx-large{font-size:var(--bal-text-size-xxxxx-large);line-height:var(--bal-line-height-xxxxx-large)}@media screen and (min-width: 769px),print{.bal-heading__text--size-xxxxx-large{font-size:var(--bal-text-size-xxxxx-large-tablet);line-height:var(--bal-line-height-tablet-xxxxx-large)}}@media screen and (min-width: 1024px){.bal-heading__text--size-xxxxx-large{font-size:var(--bal-text-size-xxxxx-large-desktop);line-height:var(--bal-line-height-desktop-xxxxx-large)}}";

const Heading = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * PUBLIC PROPERTY API
         * ------------------------------------------------------
         */
        /**
         * The actual heading level used in the HTML markup.
         */
        this.level = 'h1';
        /**
         * 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 heading gets displayed slimmer.
         */
        this.subtitle = false;
        /**
         * The theme type of the toast.
         */
        this.color = '';
        /**
         * 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;
    }
    levelWatcher() {
        this.updateAutoFontSize();
    }
    visualLevelWatcher() {
        this.updateAutoFontSize();
    }
    autoLevelWatcher() {
        this.updateAutoFontSize();
    }
    /**
     * LIFECYCLE
     * ------------------------------------------------------
     */
    connectedCallback() {
        this.updateAutoFontSize();
    }
    componentDidRender() {
        if (this.autoLevel && this.autoFontSize) {
            const rows = this.rows;
            if (rows > 1) {
                const minSize = HEADING_SIZES[this.autoLevel];
                if (minSize !== this.autoFontSize) {
                    const nextIndex = HEADING_ORDER.indexOf(this.autoFontSize) + 1;
                    this.autoFontSize = HEADING_ORDER[nextIndex];
                }
            }
        }
    }
    updateAutoFontSize() {
        this.autoFontSize = this.fontSize;
    }
    /**
     * GETTERS
     * ------------------------------------------------------
     */
    get rows() {
        if (this.headingEl && browser.balBrowser.hasWindow) {
            const computedStyle = window.getComputedStyle(this.headingEl);
            const lineHeight = parseInt(computedStyle.lineHeight.slice(0, -2), 10);
            const height = this.headingEl.offsetHeight;
            return height / lineHeight;
        }
        return 1;
    }
    get fontColor() {
        if (this.inverted) {
            return 'white';
        }
        return HEADING_COLORS[this.color];
    }
    get fontSize() {
        return HEADING_SIZES[this.visualLevel ? this.visualLevel : this.level];
    }
    get tag() {
        return HEADING_TAGS[this.level];
    }
    /**
     * RENDER
     * ------------------------------------------------------
     */
    render() {
        const block = bem.BEM.block('heading');
        const bemTextEl = block.element('text');
        const Heading = this.tag;
        const fontColor = this.fontColor;
        return (index.h(index.Host, { key: 'bb045a6d0ed10c2143cb77f5852ac967e1b3b21a', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== undefined)), block.modifier(`level-${this.level}`).class()) }, index.h(Heading, { key: 'ff31969a001a5706206f134d96c7f85dd8334176', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemTextEl.class()), bemTextEl.modifier('no-wrap').class(this.noWrap)), bemTextEl.modifier('subtitle').class(this.subtitle)), bemTextEl.modifier('shadow').class(this.shadow)), bemTextEl.modifier(`color-${fontColor}`).class()), bemTextEl.modifier(`size-${this.autoFontSize}`).class()), ref: (headingEl) => (this.headingEl = headingEl), "data-testid": "bal-heading" }, index.h("slot", { key: '5ce82d9f2158abb4c0243cb6028d45ba3c60e7c5' }))));
    }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "level": ["levelWatcher"],
        "visualLevel": ["visualLevelWatcher"],
        "autoLevel": ["autoLevelWatcher"]
    }; }
};
Heading.style = balHeadingCss;

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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * 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.BEM.block('text');
        return (index.h(index.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)) }, index.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" }, index.h("slot", { key: '33ad603fa81fe33512f02b5ed716bd4ec8e675cd' }))));
    }
};
Text.style = balTextCss;

exports.bal_heading = Heading;
exports.bal_text = Text;
