import { __decorate } from "tslib";
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 '../../ui/effects/rippleDirective.js';
import { UiElement } from "../../ui/UiElement.js";
import elementStyles from './AppNavigationItem.styles.js';
import '../../define/ui/ui-ripple.js';
export default class AppNavigationItemElement extends UiElement {
    static get styles() {
        return elementStyles;
    }
    constructor() {
        super();
        /**
         * When set, the button is a disabled state.
         * @attribute
         */
        this.disabled = false;
        /**
         * Whether the navigation item is selected.
         * @attribute
         */
        this.selected = false;
        this.showRipple = false;
        this.getRipple = () => {
            this.showRipple = true;
            return this.ripple;
        };
        this.renderRipple = () => {
            const { disabled } = this;
            return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
        };
        this.hasIcon = false;
        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));
        this.addEventListener('focus', this.handleFocus.bind(this));
        this.addEventListener('blur', this.handleBlur.bind(this));
    }
    connectedCallback() {
        super.connectedCallback();
        if (!this.hasAttribute('role')) {
            this.setAttribute('role', 'button');
        }
        if (!this.hasAttribute('tabindex') && !this.disabled) {
            this.setAttribute('tabindex', '0');
        }
    }
    async handleFocus() {
        const _ripple = await this.getRipple();
        _ripple?.beginFocus();
    }
    async handleBlur() {
        const _ripple = await this.getRipple();
        _ripple?.endFocus();
    }
    async handleKeyDown(e) {
        super.handleKeyDown(e);
        if (['Space'].includes(e.code)) {
            const _ripple = await this.getRipple();
            _ripple?.beginPress();
        }
    }
    async handleKeyUp(e) {
        super.handleKeyUp(e);
        if (['Space'].includes(e.code)) {
            const _ripple = await this.getRipple();
            _ripple?.endPress();
            this.click();
        }
    }
    /**
     * Sets the `_hasIcon` state property when the "icon" slot change event is dispatched.
     */
    iconSlotChange(e) {
        const slot = e.target;
        this.hasIcon = !!slot.assignedNodes().length;
    }
    render() {
        const { pressed = false } = this;
        const containerClasses = classMap({
            surface: true,
            withIcon: this.hasIcon,
            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">
        ${this.renderIcon()}
        <slot></slot>
      </div>
    </div>
    `;
    }
    renderIcon() {
        return html `<slot name="icon" @slotchange="${this.iconSlotChange}"></slot>`;
    }
}
__decorate([
    property({ reflect: true, type: Boolean })
], AppNavigationItemElement.prototype, "disabled", void 0);
__decorate([
    property({ reflect: true, type: Boolean })
], AppNavigationItemElement.prototype, "selected", void 0);
__decorate([
    queryAsync('ui-ripple')
], AppNavigationItemElement.prototype, "ripple", void 0);
__decorate([
    state()
], AppNavigationItemElement.prototype, "showRipple", void 0);
__decorate([
    state()
], AppNavigationItemElement.prototype, "hasIcon", void 0);
//# sourceMappingURL=AppNavigationItemElement.js.map