'use strict';

var index = require('./index-feA4skrY.js');
var aria = require('./aria-BzkqcV7W.js');
var attributes = require('./attributes-Cp0kpySW.js');
var helpers = require('./helpers-HuaiWXrB.js');
var bem = require('./bem-p0PWVN8n.js');
require('./browser-BwmkTmm8.js');
require('./config.utils-Civnz2jT.js');

const balButtonCss = "bal-button,.bal-button{display:inline-block;position:static}bal-button.is-fullwidth,.bal-button.is-fullwidth{width:100%;-ms-flex:1 1 100%;flex:1 1 100%}bal-button[disabled] bal-icon,.bal-button[disabled] bal-icon{pointer-events:none}.bal-button .button-label.has-no-wrap{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.bal-button-group{display:-ms-flexbox;display:flex}.bal-button-group--position-center{-ms-flex-pack:center;justify-content:center}.bal-button-group--position-left{-ms-flex-pack:start;justify-content:flex-start}.bal-button-group--position-right{-ms-flex-pack:end;justify-content:flex-end}@media screen and (max-width: 768px){.bal-button-group--direction-auto .field.is-grouped,.bal-button-group--direction-auto .bal-button,.bal-button-group--direction-auto .bal-button .button{width:100% !important}}@media screen and (max-width: 768px){.bal-button-group--direction-column .field.is-grouped,.bal-button-group--direction-column .bal-button,.bal-button-group--direction-column .bal-button .button{width:100% !important}}";

const Button = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.balClick = index.createEvent(this, "balClick");
        this.balNavigate = index.createEvent(this, "balNavigate");
        this.balFocus = index.createEvent(this, "balFocus");
        this.balBlur = index.createEvent(this, "balBlur");
        this.balDidRender = index.createEvent(this, "balDidRender");
        this.inheritAttributes = {};
        this.isLargestContentPaintDone = false;
        /**
         * The color to use from your application's color palette.
         */
        this.color = 'primary';
        /**
         * The type of button.
         */
        this.elementType = 'button';
        /**
         * If `true`, the user cannot interact with the button.
         */
        this.disabled = false;
        /**
         * Size of the button
         */
        this.size = '';
        /**
         * Specifies where to display the linked URL.
         * Only applies when an `href` is provided.
         */
        this.target = '_self';
        /**
         * If `true` adds a box shadow to improve readability on image background
         * */
        this.shadow = false;
        /**
         * If `true` the width of the buttons is limited
         */
        this.square = false;
        /**
         * If `true` the button has a active theme
         */
        this.isActive = false;
        /**
         * If `true` the button has a full width
         */
        this.expanded = false;
        /**
         * If `true` the button has no padding and a reduced height
         */
        this.flat = false;
        /**
         * If `true` the button is outlined
         */
        this.outlined = false;
        /**
         * If `true` the button is inverted
         */
        this.inverted = false;
        /**
         * If `true` the label is hidden and a loading spinner is shown instead.
         */
        this.loading = false;
        /**
         * If `true` the button is rounded.
         */
        this.rounded = false;
        /**
         * If `true` the button is a popup.
         */
        this.balPopup = undefined;
        /**
         * Name of the left button icon
         */
        this.icon = '';
        /**
         * If `true` the icon turns
         */
        this.iconTurn = false;
        /**
         * Name of the right button icon
         */
        this.iconRight = '';
        /**
         * The label of the button will not break
         */
        this.noWrap = false;
        /**
         * The name of the button, which is submitted with the form data.
         */
        this.name = '';
        /**
         * The value of the button, which is submitted with the form data.
         */
        this.value = '';
        /**
         * A11y attributes for the native button element.
         */
        this.a11yControls = undefined;
        /**
         * A11y attributes for the native button element.
         */
        this.a11yTitle = undefined;
        /**
         * A11y attributes for the native button element.
         */
        this.a11yLabel = undefined;
        /**
         * A11y attributes for the native button element.
         */
        this.a11yHaspopup = undefined;
        this.onFocus = () => {
            this.balFocus.emit();
        };
        this.onBlur = () => {
            this.balBlur.emit();
        };
        this.onClick = (ev) => {
            if (!this.disabled) {
                this.balClick.emit(ev);
                if (this.href !== undefined) {
                    this.balNavigate.emit(ev);
                }
            }
        };
    }
    listenOnClick(ev) {
        if (this.disabled && ev.target && ev.target === this.el) {
            ev.preventDefault();
            ev.stopPropagation();
        }
    }
    componentDidLoad() {
        helpers.rOnLoad(() => (this.isLargestContentPaintDone = true));
    }
    componentWillLoad() {
        this.inheritAttributes = attributes.inheritAttributes(this.el, [
            'title',
            'aria-label',
            'aria-controls',
            'aria-hidden',
            'tabindex',
            'aria-haspopup',
        ]);
        if (this.el.hasAttribute('bal-popup') && !this.a11yHaspopup) {
            this.a11yHaspopup = 'true';
        }
    }
    componentDidRender() {
        this.balDidRender.emit();
    }
    get isIconInverted() {
        return this.inverted;
    }
    get buttonCssClass() {
        return {
            'button': true,
            [`is-${this.color}`]: true,
            'is-flat': this.flat,
            'is-square': this.square,
            'is-small': this.size === 'small',
            'is-inverted': this.inverted,
            'is-active': this.isActive,
            'is-outlined': this.outlined,
            'is-fullwidth': this.expanded,
            'is-disabled': this.disabled,
            'is-loading': this.loading,
            'is-rounded': this.rounded === true,
            'has-blur-shadow': this.shadow === true,
        };
    }
    get leftIconAttrs() {
        if (!this.icon || this.loading) {
            return {
                style: { display: 'none' },
            };
        }
        return {};
    }
    get leftRightAttrs() {
        if (!this.iconRight || this.loading) {
            return {
                style: { display: 'none' },
            };
        }
        return {};
    }
    get loadingAttrs() {
        if (!this.loading) {
            return {
                style: { display: 'none' },
            };
        }
        return {
            style: { position: 'absolute' },
        };
    }
    handleClick(ev) {
        if (this.disabled) {
            ev.preventDefault();
            ev.stopPropagation();
        }
    }
    render() {
        const { elementType, download, href, rel, target, name, value } = this;
        const TagType = this.href === undefined ? 'button' : 'a';
        const attrs = TagType === 'button'
            ? { type: elementType, name, value }
            : {
                download,
                href,
                rel,
                target,
            };
        const spinnerColor = () => {
            if (this.disabled) {
                return 'blue';
            }
            switch (this.color) {
                case 'primary':
                case 'success':
                case 'warning':
                case 'danger':
                    return this.inverted ? 'blue' : 'white';
                default:
                    return this.inverted ? 'white' : 'blue';
            }
        };
        const ariaAttributes = {
            'title': this.a11yTitle || this.inheritAttributes['title'],
            'aria-label': this.a11yLabel || this.inheritAttributes['aria-label'] || this.a11yTitle || this.inheritAttributes['title'],
            'aria-controls': this.a11yControls || this.inheritAttributes['aria-controls'],
            'aria-haspopup': this.a11yHaspopup || this.inheritAttributes['aria-haspopup'],
        };
        return (index.h(index.Host, { onClick: this.handleClick, class: {
                'bal-button': true,
                'control': true,
                'is-fullwidth': this.expanded,
                'is-disabled': this.disabled,
            } }, index.h(TagType, Object.assign({}, attrs, this.inheritAttributes, { type: this.elementType, class: this.buttonCssClass, part: "native", disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, "aria-disabled": aria.ariaBooleanToString(this.disabled), "data-testid": "bal-button" }, ariaAttributes), this.isLargestContentPaintDone && this.loading ? (index.h("bal-spinner", Object.assign({ color: spinnerColor(), small: true }, this.loadingAttrs, { deactivated: !this.loading }))) : (''), this.isLargestContentPaintDone && this.icon ? (index.h("bal-icon", Object.assign({}, this.leftIconAttrs, { class: this.square ? '' : 'icon-left', name: this.icon, size: this.square ? this.size : 'small', turn: this.iconTurn, inverted: this.isIconInverted }))) : (''), index.h("span", { class: {
                'button-label': true,
                'has-no-wrap': this.noWrap,
                'is-small': this.size === 'small',
            }, style: { opacity: this.loading ? '0' : '1' }, "data-testid": "bal-button-label" }, index.h("slot", null)), this.isLargestContentPaintDone && this.iconRight ? (index.h("bal-icon", Object.assign({}, this.leftRightAttrs, { class: "icon-right", name: this.iconRight, size: 'small', turn: this.iconTurn, inverted: this.isIconInverted }))) : (''))));
    }
    get el() { return index.getElement(this); }
};
Button.style = balButtonCss;

const ButtonGroup = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * The value of the button, which is submitted with the form data.
         */
        this.position = '';
        /**
         * `auto` will position the button items vertical and full width.
         * `row` will force that the buttons are also horizontal on mobile.
         */
        this.direction = 'auto';
        /**
         * If `true` the flex direction is used in reverse on mobile.
         */
        this.reverse = false;
    }
    render() {
        const block = bem.BEM.block('button-group');
        return (index.h(index.Host, { key: 'a41720ea16a458ae915bece1adf109d2f20ea8ec', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`position-${this.position}`).class()), block.modifier(`direction-${this.direction}`).class()) }, index.h("div", { key: '03f0d65f12c0ac0e14f4854ef85e845fe51f9e62', class: {
                'field': true,
                'is-grouped': true,
                'is-reverse': this.reverse,
                [`has-direction-${this.direction}`]: true,
            } }, index.h("slot", { key: 'a65f6a5a52b522c600c4df6c0963cdd59ad07462' }))));
    }
};

exports.bal_button = Button;
exports.bal_button_group = ButtonGroup;
