'use strict';

var index = require('./index-BjHIBY-I.js');
var randomString = require('./random-string-BTzDB2ee.js');

const buttonGroupCss = () => `@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}:host(limel-button-group){display:flex;box-sizing:border-box;align-items:center;border-radius:3.75rem;background-color:var(--button-group-background-color, rgb(var(--contrast-400)));width:max-content;max-width:100%;flex-wrap:nowrap}:host([disabled]:not([disabled=false])){cursor:not-allowed;opacity:0.4}.button{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}.button:hover,.button:focus,.button:focus-visible{will-change:color, background-color, box-shadow, transform}.button:hover,.button:focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.button:hover{box-shadow:var(--button-shadow-hovered)}.button:active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset-pressed)}.button:hover,.button:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.button:has(input[disabled]):hover{box-shadow:none;transform:none}.button{position:relative;display:inline-grid;grid-auto-flow:column;align-items:center;max-width:100%;min-width:2rem;height:2rem;padding:0 0.0625rem;margin:0.125rem;border-radius:1rem;font-size:var(--limel-theme-default-font-size);user-select:none}.button:not(:last-child):after{content:"";display:block;height:1rem;width:0.125rem;border-radius:0.25rem;background-color:var(--button-group-text-color, rgb(var(--contrast-1200)));opacity:0.1;position:absolute;right:-0.1875rem;top:0;bottom:0;margin:auto}.button label{cursor:pointer;transition:color 0.2s ease;display:flex;align-items:center;flex:1;height:100%;min-width:0}.button label:has(>limel-badge) .button__label{padding-right:0.25rem}.button input[type=radio]{position:absolute;width:0;opacity:0}.button input[type=radio]:focus-visible+label:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:3.75rem;box-shadow:var(--shadow-depth-8-focused)}.button:focus-within{outline:none;color:var(--lime-primary-color, var(--limel-theme-primary-color))}.button:only-child .button__label{padding-left:0.75rem}.button:first-child .button__label{padding-left:0.75rem}.button.button--selected{background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset);color:var(--lime-primary-color, var(--limel-theme-primary-color))}.button.button--selected:active{box-shadow:var(--button-shadow-inset-pressed)}.button__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--limel-theme-default-small-font-size);padding:0 0.75rem}.button__icon{border-radius:50%;vertical-align:middle}limel-badge{margin-right:0.25rem;pointer-events:none}.button:not(.button--selected){--badge-background-color:rgb(var(--contrast-200))}`;

const ButtonGroup = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.change = index.createEvent(this, "change");
        /**
         * List of buttons for the group
         */
        this.value = [];
        /**
         * True if the button-group should be disabled
         */
        this.disabled = false;
        this.radioGroupName = randomString.createRandomString();
        this.setSelectedButton = () => {
            var _a;
            this.selectedButtonId = (_a = this.value.find((button) => {
                return button.selected;
            })) === null || _a === void 0 ? void 0 : _a.id;
        };
        this.renderButton = this.renderButton.bind(this);
        this.onChange = this.onChange.bind(this);
        this.renderContent = this.renderContent.bind(this);
    }
    componentWillLoad() {
        this.setSelectedButton();
    }
    render() {
        return (index.h(index.Host, { key: '2295d3bf146ae9d3aa44c4a4c3281ce1b72d8a63', role: "radiogroup" }, this.value.map(this.renderButton)));
    }
    renderButton(button) {
        // Prefix with 'b' because html IDs cannot start with a digit,
        // and we need to differentiate from the ID on the limel-icon. /Ads
        const buttonId = `b${button.id}`;
        const classes = {
            button: true,
            'button--selected': this.isButtonChecked(button),
        };
        return (index.h("div", { class: classes }, index.h("input", { type: "radio", name: this.radioGroupName, checked: this.isButtonChecked(button), disabled: this.disabled, id: buttonId, onChange: this.onChange }), index.h("label", { htmlFor: buttonId }, this.renderContent(button), this.renderBadge(button))));
    }
    renderContent(button) {
        if (button.icon) {
            return this.renderIcon(button);
        }
        return this.renderLabel(button);
    }
    isButtonChecked(button) {
        return button.id === this.selectedButtonId;
    }
    renderLabel(button) {
        return index.h("span", { class: "button__label" }, button.title);
    }
    renderIcon(button) {
        // Prefix with 'i' because html IDs cannot start with a digit,
        // and we need to differentiate from the "buttonId". /Ads
        const iconId = `i${button.id}`;
        return [
            index.h("limel-icon", { id: iconId, class: "button__icon", "aria-label": button.title, name: button.icon, size: "small", badge: true }),
            index.h("limel-tooltip", { elementId: iconId, label: button.title }),
        ];
    }
    renderBadge(button) {
        if (!button.badge) {
            return;
        }
        return index.h("limel-badge", { label: button.badge });
    }
    onChange(event) {
        event.stopPropagation();
        const target = event.target;
        // The ID is prefixed with `b` in the HTML, remember? /Ads
        this.selectedButtonId = target.id.slice(1);
        const button = this.value.find((item) => {
            return item.id === this.selectedButtonId;
        });
        this.change.emit(button);
    }
    valueChanged() {
        this.setSelectedButton();
    }
    static get watchers() { return {
        "value": [{
                "valueChanged": 0
            }]
    }; }
};
ButtonGroup.style = buttonGroupCss();

exports.limel_button_group = ButtonGroup;
