import { __esDecorate, __runInitializers } from "tslib";
import { html } from 'lit';
import { property, query, queryAssignedElements } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { UiElement } from '../../UiElement.js';
import { ripple } from '../../effects/rippleDirective.js';
import { check } from '../../icons/Icons.js';
import { isDisabled, setDisabled } from '../../../lib/disabled.js';
import '../../ripple/ui-ripple.js';
let SegmentedButton = (() => {
    let _classSuper = UiElement;
    let _instanceExtraInitializers = [];
    let _ripple_decorators;
    let _ripple_initializers = [];
    let _ripple_extraInitializers = [];
    let _selected_decorators;
    let _selected_initializers = [];
    let _selected_extraInitializers = [];
    let _leadingIcons_decorators;
    let _leadingIcons_initializers = [];
    let _leadingIcons_extraInitializers = [];
    let _set_disabled_decorators;
    return class SegmentedButton extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _ripple_decorators = [query('ui-ripple')];
            _selected_decorators = [property({ type: Boolean })];
            _leadingIcons_decorators = [queryAssignedElements({ flatten: true, slot: 'icon' })];
            _set_disabled_decorators = [property({ reflect: true, type: Boolean })];
            __esDecorate(this, null, _ripple_decorators, { kind: "accessor", name: "ripple", static: false, private: false, access: { has: obj => "ripple" in obj, get: obj => obj.ripple, set: (obj, value) => { obj.ripple = value; } }, metadata: _metadata }, _ripple_initializers, _ripple_extraInitializers);
            __esDecorate(this, null, _selected_decorators, { kind: "accessor", name: "selected", static: false, private: false, access: { has: obj => "selected" in obj, get: obj => obj.selected, set: (obj, value) => { obj.selected = value; } }, metadata: _metadata }, _selected_initializers, _selected_extraInitializers);
            __esDecorate(this, null, _leadingIcons_decorators, { kind: "accessor", name: "leadingIcons", static: false, private: false, access: { has: obj => "leadingIcons" in obj, get: obj => obj.leadingIcons, set: (obj, value) => { obj.leadingIcons = value; } }, metadata: _metadata }, _leadingIcons_initializers, _leadingIcons_extraInitializers);
            __esDecorate(this, null, _set_disabled_decorators, { kind: "setter", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #ripple_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _ripple_initializers, void 0));
        get ripple() { return this.#ripple_accessor_storage; }
        set ripple(value) { this.#ripple_accessor_storage = value; }
        #selected_accessor_storage = (__runInitializers(this, _ripple_extraInitializers), __runInitializers(this, _selected_initializers, false));
        /**
         * Whether the button is selected.
         * @attribute
         */
        get selected() { return this.#selected_accessor_storage; }
        set selected(value) { this.#selected_accessor_storage = value; }
        #leadingIcons_accessor_storage = (__runInitializers(this, _selected_extraInitializers), __runInitializers(this, _leadingIcons_initializers, void 0));
        get leadingIcons() { return this.#leadingIcons_accessor_storage; }
        set leadingIcons(value) { this.#leadingIcons_accessor_storage = value; }
        get disabled() {
            return isDisabled(this);
        }
        /**
         * When set, the button is a disabled state.
         * @attribute
         */
        set disabled(value) {
            const old = isDisabled(this);
            setDisabled(this, value);
            this.requestUpdate('disabled', old);
        }
        constructor() {
            super();
            this.actionController.cancelKeyboardEvents = true;
            this.addEventListener('keydown', this.handleKeyDown.bind(this));
            this.addEventListener('keyup', this.handleKeyUp.bind(this));
            this.addEventListener('click', this.handleClick.bind(this));
            this.addEventListener('pointerdown', this.handlePointerDown.bind(this));
            this.addEventListener('pointerup', this.handlePointerUp.bind(this));
            this.addEventListener('pointercancel', this.handlePointerCancel.bind(this));
            this.addEventListener('pointerenter', this.handlePointerEnter.bind(this));
            this.addEventListener('pointerleave', this.handlePointerLeave.bind(this));
            this.addEventListener('contextmenu', this.handleContextMenu.bind(this));
        }
        connectedCallback() {
            super.connectedCallback();
            if (!this.hasAttribute('role')) {
                this.setAttribute('role', 'button');
            }
            if (!this.hasAttribute('tabindex') && !this.disabled) {
                this.setAttribute('tabindex', '0');
            }
        }
        beginPress(options) {
            super.beginPress(options);
            this.ripple.beginPress(options.positionEvent);
        }
        endPress(options) {
            super.endPress(options);
            this.ripple.endPress();
            if (!options.cancelled) {
                this.dispatchEvent(new Event('trigger', { bubbles: true, composed: true }));
            }
        }
        handlePointerEnter(e) {
            this.ripple.beginHover(e);
        }
        handlePointerLeave(e) {
            super.handlePointerLeave(e);
            this.ripple.endHover();
        }
        handleIconSlotChange() {
            this.requestUpdate();
        }
        render() {
            const { pressed = false, selected = false } = this;
            const surfaceClasses = classMap({
                surface: true,
                pressed,
                selected,
            });
            return html `
      <div class="${surfaceClasses}" ${ripple(() => this.ripple)}>
        ${this.renderRipple()}
        <div class="content">
          ${this.leadingContent()}
          <slot></slot>
        </div>
      </div>
    `;
        }
        leadingContent() {
            const { leadingIcons } = this;
            const classes = {
                leading: true,
                visible: !!this.selected || !!leadingIcons.length,
            };
            return html ` <div class="${classMap(classes)}">${this.renderLeadingIcon()} ${this.renderChecked()}</div> `;
        }
        renderLeadingIcon() {
            const { leadingIcons } = this;
            const classes = {
                'leading-icon': true,
                'with-icon': !!leadingIcons.length,
                'hidden': !!this.selected,
            };
            return html `
      <div class="${classMap(classes)}"><slot name="icon" @slotchange="${this.handleIconSlotChange}"></slot></div>
    `;
        }
        renderChecked() {
            const iconClasses = classMap({
                'check-mark': true,
                'checked': !!this.selected,
            });
            return html `<span class="${iconClasses}" role="presentation">${check}</span>`;
        }
        renderRipple = (__runInitializers(this, _leadingIcons_extraInitializers), () => {
            const { disabled } = this;
            return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
        });
    };
})();
/**
 * @fires trigger - When a button is triggered.
 * @slot - Default slot for the label
 * @slot icon - A slot to render an icon.
 */
export default SegmentedButton;
//# sourceMappingURL=SegmentedButton.js.map