import { __esDecorate, __runInitializers } from "tslib";
/* eslint-disable max-len */
import { html } from 'lit';
import { property, queryAsync, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { when } from 'lit/directives/when.js';
import { ripple } from '../../effects/rippleDirective.js';
import { UiElement } from '../../UiElement.js';
import { isDisabled, setDisabled } from '../../../lib/disabled.js';
import '../../ripple/ui-ripple.js';
/**
 * The type of the icon button rendered.
 */
export var IconButtonType;
(function (IconButtonType) {
    IconButtonType["filled"] = "filled";
    IconButtonType["tonal"] = "tonal";
    IconButtonType["outlined"] = "outlined";
    IconButtonType["standard"] = "standard";
})(IconButtonType || (IconButtonType = {}));
let UiIconButton = (() => {
    let _classSuper = UiElement;
    let _instanceExtraInitializers = [];
    let _type_decorators;
    let _type_initializers = [];
    let _type_extraInitializers = [];
    let _toggle_decorators;
    let _toggle_initializers = [];
    let _toggle_extraInitializers = [];
    let _active_decorators;
    let _active_initializers = [];
    let _active_extraInitializers = [];
    let _ripple_decorators;
    let _ripple_initializers = [];
    let _ripple_extraInitializers = [];
    let _showRipple_decorators;
    let _showRipple_initializers = [];
    let _showRipple_extraInitializers = [];
    let _set_disabled_decorators;
    return class UiIconButton extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _type_decorators = [property({ type: String, reflect: true })];
            _toggle_decorators = [property({ type: Boolean, reflect: true })];
            _active_decorators = [property({ type: Boolean, reflect: true })];
            _ripple_decorators = [queryAsync('ui-ripple')];
            _showRipple_decorators = [state()];
            _set_disabled_decorators = [property({ reflect: true, type: Boolean })];
            __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, _toggle_decorators, { kind: "accessor", name: "toggle", static: false, private: false, access: { has: obj => "toggle" in obj, get: obj => obj.toggle, set: (obj, value) => { obj.toggle = value; } }, metadata: _metadata }, _toggle_initializers, _toggle_extraInitializers);
            __esDecorate(this, null, _active_decorators, { kind: "accessor", name: "active", static: false, private: false, access: { has: obj => "active" in obj, get: obj => obj.active, set: (obj, value) => { obj.active = value; } }, metadata: _metadata }, _active_initializers, _active_extraInitializers);
            __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, _showRipple_decorators, { kind: "accessor", name: "showRipple", static: false, private: false, access: { has: obj => "showRipple" in obj, get: obj => obj.showRipple, set: (obj, value) => { obj.showRipple = value; } }, metadata: _metadata }, _showRipple_initializers, _showRipple_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 });
        }
        #type_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _type_initializers, void 0));
        /**
         * The type of the rendered button according to Material 3 spec.
         *
         * @default {ButtonType.filled}
         * @attribute
         */
        get type() { return this.#type_accessor_storage; }
        set type(value) { this.#type_accessor_storage = value; }
        #toggle_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _toggle_initializers, void 0));
        /**
         * Whether the button can be toggled.
         * A toggle button behaves different as it gets the `aria-pressed` attribute
         * which changes depending on the pressed state.
         * A toggle button is activated until it is clicked/pressed again.
         * A toggle button dispatched `active` event when the press state change.
         * The host can check the `active` property to know the state.
         *
         * @attribute
         */
        get toggle() { return this.#toggle_accessor_storage; }
        set toggle(value) { this.#toggle_accessor_storage = value; }
        #active_accessor_storage = (__runInitializers(this, _toggle_extraInitializers), __runInitializers(this, _active_initializers, void 0));
        /**
         * A flag that determines whether the button is activated (pressed when `toggle` is set).
         * It is `undefined` and makes no effect when `toggle` is not set.
         *
         * @attribute
         */
        get active() { return this.#active_accessor_storage; }
        set active(value) { this.#active_accessor_storage = value; }
        #ripple_accessor_storage = (__runInitializers(this, _active_extraInitializers), __runInitializers(this, _ripple_initializers, void 0));
        get ripple() { return this.#ripple_accessor_storage; }
        set ripple(value) { this.#ripple_accessor_storage = value; }
        #showRipple_accessor_storage = (__runInitializers(this, _ripple_extraInitializers), __runInitializers(this, _showRipple_initializers, false));
        get showRipple() { return this.#showRipple_accessor_storage; }
        set showRipple(value) { this.#showRipple_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);
        }
        getRipple = (__runInitializers(this, _showRipple_extraInitializers), () => {
            this.showRipple = true;
            return this.ripple;
        });
        constructor() {
            super();
            this.type = IconButtonType.standard;
            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('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');
            }
        }
        update(changedProperties) {
            if (changedProperties.has('active')) {
                this.setAttribute('aria-pressed', String(this.active));
            }
            super.update(changedProperties);
        }
        async pressRipple() {
            const element = await this.getRipple();
            if (element && !element.isPressed) {
                element.beginPress();
            }
        }
        async endRipple() {
            const element = await this.getRipple();
            element?.endPress();
        }
        beginPress(options) {
            super.beginPress(options);
            this.pressRipple();
        }
        endPress(config) {
            super.endPress(config);
            this.endRipple();
            const { cancelled, reason } = config;
            if (cancelled) {
                return;
            }
            if (!reason || reason === 'enter' || reason === 'space') {
                if (this.toggle) {
                    this.active = !this.active;
                    // note, only dispatch events when user interacting with the UI.
                    this.dispatchEvent(new Event('active'));
                }
            }
            if (reason === 'enter' || reason === 'space') {
                if (!this.toggle) {
                    this.click();
                }
            }
        }
        render() {
            const { pressed = false } = this;
            const containerClasses = classMap({
                surface: true,
                pressed,
            });
            return html `
      <div class="${containerClasses}" ${ripple(this.getRipple)}>
        <div class="container"></div>
        <div class="state"></div>
        ${when(this.showRipple, this.renderRipple)}
        <div class="content">
          <slot></slot>
        </div>
      </div>
    `;
        }
        renderRipple = () => {
            const { disabled } = this;
            return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
        };
    };
})();
/**
 * @fires active - An event dispatched when the `active` state  has changed. This only happens when the button is `toggle`.
 */
export default UiIconButton;
//# sourceMappingURL=IconButton.js.map