import { __esDecorate, __runInitializers } from "tslib";
import { html, nothing } from 'lit';
import { query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import CheckedElement from './CheckedElement.js';
import { check, checkIndeterminate } from '../../icons/Icons.js';
import '../../ripple/ui-ripple.js';
import '@material/web/focus/md-focus-ring.js';
let CheckboxElement = (() => {
    let _classSuper = CheckedElement;
    let _ripple_decorators;
    let _ripple_initializers = [];
    let _ripple_extraInitializers = [];
    return class CheckboxElement extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _ripple_decorators = [query('ui-ripple')];
            __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);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        get _icon() {
            const { indeterminate, checked } = this;
            if (indeterminate) {
                return checkIndeterminate;
            }
            if (checked) {
                return check;
            }
            return nothing;
        }
        #ripple_accessor_storage = __runInitializers(this, _ripple_initializers, void 0);
        get ripple() { return this.#ripple_accessor_storage; }
        set ripple(value) { this.#ripple_accessor_storage = value; }
        pressRipple(options) {
            const element = this.ripple;
            if (element && !element.isPressed) {
                element.beginPress(options.positionEvent);
            }
        }
        endRipple() {
            this.ripple?.endPress();
        }
        beginPress(options) {
            super.beginPress(options);
            this.pressRipple(options);
        }
        endPress(config) {
            super.endPress(config);
            this.endRipple();
        }
        async handleKeyDown(e) {
            super.handleKeyDown(e);
            if (['Space'].includes(e.code)) {
                this.ripple?.beginPress();
            }
        }
        async handleKeyUp(e) {
            super.handleKeyUp(e);
            if (['Space'].includes(e.code)) {
                this.ripple?.endPress();
            }
        }
        handlePointerEnter(e) {
            super.handlePointerEnter(e);
            if (this.ripple) {
                this.ripple.beginHover(e);
            }
        }
        handlePointerLeave(e) {
            super.handlePointerLeave(e);
            if (this.ripple) {
                this.ripple.endHover();
            }
        }
        render() {
            const { pressed = false } = this;
            const containerClasses = classMap({
                surface: true,
                pressed,
            });
            return html `
      <md-focus-ring part="focus-ring" .control="${this}"></md-focus-ring>
      <div class="${containerClasses}">
        <div class="container"></div>
        <div class="state"></div>
        <ui-ripple class="ripple" unbounded ?disabled="${this.disabled}"></ui-ripple>
        <div class="icon">${this._icon}</div>
      </div>
    `;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _ripple_extraInitializers);
        }
    };
})();
export default CheckboxElement;
//# sourceMappingURL=CheckboxElement.js.map