import { __esDecorate, __runInitializers } from "tslib";
import { LitElement, html } from 'lit';
import { property, queryAssignedElements } from 'lit/decorators.js';
import UiButtonElement from './button.js';
let ButtonGroup = (() => {
    let _classSuper = LitElement;
    let _multiple_decorators;
    let _multiple_initializers = [];
    let _multiple_extraInitializers = [];
    let _type_decorators;
    let _type_initializers = [];
    let _type_extraInitializers = [];
    let _size_decorators;
    let _size_initializers = [];
    let _size_extraInitializers = [];
    let _buttons_decorators;
    let _buttons_initializers = [];
    let _buttons_extraInitializers = [];
    return class ButtonGroup extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _multiple_decorators = [property({ type: Boolean })];
            _type_decorators = [property({ type: String })];
            _size_decorators = [property({ type: String, reflect: true })];
            _buttons_decorators = [queryAssignedElements({ flatten: true, selector: 'ui-button' })];
            __esDecorate(this, null, _multiple_decorators, { kind: "accessor", name: "multiple", static: false, private: false, access: { has: obj => "multiple" in obj, get: obj => obj.multiple, set: (obj, value) => { obj.multiple = value; } }, metadata: _metadata }, _multiple_initializers, _multiple_extraInitializers);
            __esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
            __esDecorate(this, null, _size_decorators, { kind: "accessor", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
            __esDecorate(this, null, _buttons_decorators, { kind: "accessor", name: "buttons", static: false, private: false, access: { has: obj => "buttons" in obj, get: obj => obj.buttons, set: (obj, value) => { obj.buttons = value; } }, metadata: _metadata }, _buttons_initializers, _buttons_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #multiple_accessor_storage = __runInitializers(this, _multiple_initializers, false
        /**
         * The type of button group.
         * - 'standard': Standard button group.
         * - 'connected': Connected button group (buttons are visually connected).
         * @attribute
         */
        );
        /**
         * If true, multiple buttons can be selected.
         * When set to false, the group deselects all other buttons when one is selected.
         * @attribute
         */
        get multiple() { return this.#multiple_accessor_storage; }
        set multiple(value) { this.#multiple_accessor_storage = value; }
        #type_accessor_storage = (__runInitializers(this, _multiple_extraInitializers), __runInitializers(this, _type_initializers, 'standard'
        /**
         * The size of the buttons used with this group.
         * @attribute
         */
        ));
        /**
         * The type of button group.
         * - 'standard': Standard button group.
         * - 'connected': Connected button group (buttons are visually connected).
         * @attribute
         */
        get type() { return this.#type_accessor_storage; }
        set type(value) { this.#type_accessor_storage = value; }
        #size_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _size_initializers, 's'));
        /**
         * The size of the buttons used with this group.
         * @attribute
         */
        get size() { return this.#size_accessor_storage; }
        set size(value) { this.#size_accessor_storage = value; }
        #buttons_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _buttons_initializers, void 0));
        get buttons() { return this.#buttons_accessor_storage; }
        set buttons(value) { this.#buttons_accessor_storage = value; }
        /**
         * The MutationObserver instance used to watch for changes in slotted children.
         */
        observer = __runInitializers(this, _buttons_extraInitializers);
        connectedCallback() {
            super.connectedCallback();
            this.observer = new MutationObserver(this.handleMutations.bind(this));
            this.observer.observe(this, { childList: true, subtree: true, attributes: true, attributeFilter: ['selected'] });
            this.updateChildren();
        }
        disconnectedCallback() {
            super.disconnectedCallback();
            this.observer?.disconnect();
            this.observer = undefined;
        }
        firstUpdated(changed) {
            this.updateChildren();
            super.firstUpdated(changed);
        }
        willUpdate(changed) {
            if (changed.has('size')) {
                this.updateChildren();
            }
        }
        handleMutations(mutations) {
            for (const mutation of mutations) {
                if (mutation.type === 'attributes' && mutation.attributeName === 'selected') {
                    const target = mutation.target;
                    if (target instanceof UiButtonElement && target.toggle && target.selected) {
                        this.activate(target);
                    }
                }
                else if (mutation.type === 'childList') {
                    this.updateChildren();
                }
            }
        }
        updateChildren() {
            const isConnected = this.type === 'connected';
            this.buttons.forEach((button) => {
                button.size = this.size;
                if (isConnected) {
                    button.shape = 'square';
                }
                else {
                    button.shape = 'round';
                }
            });
        }
        /**
         * In multi selection mode, this method does nothing.
         * In single selection mode, it activates the clicked button and deactivates all others.
         */
        activate(button) {
            if (this.multiple) {
                // In multiselection, we don't need to do anything here
                return;
            }
            this.buttons.forEach((btn) => {
                if (!btn.toggle || btn === button || !btn.selected) {
                    return;
                }
                btn.selected = false;
            });
            if (button.toggle && !button.selected) {
                button.selected = true;
            }
        }
        render() {
            return html `<slot></slot>`;
        }
    };
})();
/**
 * A group of buttons that can be selected.
 *
 * When a group of buttons is added to the group element, the group element
 * becomes the manager of the buttons type, size, and selection state.
 *
 * All buttons added to the group will inherit the size from the group, but also the `shape` is set
 * based on the group type.
 *
 * Buttons don't need to be have the `toggle` attribute set. In such case, the button
 * will not participate in the selection state management.
 */
export default ButtonGroup;
//# sourceMappingURL=group.js.map