import { __esDecorate, __runInitializers } from "tslib";
import { html } from 'lit';
import { queryAsync, state } from 'lit/decorators.js';
import { when } from 'lit/directives/when.js';
import { classMap } from 'lit/directives/class-map.js';
import { RadioSelectionController } from '../../../controllers/RadioSelectionController.js';
import CheckedElement from '../../checkbox/internals/CheckedElement.js';
import { ripple } from '../../effects/rippleDirective.js';
import '../../ripple/ui-ripple.js';
import '../../focus-ring/ui-focus-ring.js';
let RadioElement = (() => {
    let _classSuper = CheckedElement;
    let _ripple_decorators;
    let _ripple_initializers = [];
    let _ripple_extraInitializers = [];
    let _showRipple_decorators;
    let _showRipple_initializers = [];
    let _showRipple_extraInitializers = [];
    return class RadioElement extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _ripple_decorators = [queryAsync('ui-ripple')];
            _showRipple_decorators = [state()];
            __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);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        selection = new RadioSelectionController(this);
        _validationError = 'Please select one of these options.';
        #ripple_accessor_storage = __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; }
        getRipple = (__runInitializers(this, _showRipple_extraInitializers), () => {
            this.showRipple = true;
            return this.ripple;
        });
        endPress(config) {
            const downConfig = { ...config };
            if (this.checked) {
                // prohibits toggling of the radio button.
                downConfig.cancelled = true;
            }
            super.endPress(downConfig);
        }
        connectedCallback() {
            super.connectedCallback();
            this.selection.clearRequired();
            this.selection.clearTabindex();
        }
        handleClick(e) {
            super.handleClick(e);
            this.selection.handleSelection();
            this.focus();
        }
        _setChecked(value = false) {
            if (value) {
                this.selection.handleSelection();
            }
            this._updateFormValue();
            this.setAttribute('aria-checked', String(value));
        }
        async handleKeyDown(e) {
            super.handleKeyDown(e);
            this.selection.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();
            }
        }
        async handleFocus() {
            const _ripple = await this.getRipple();
            _ripple?.beginFocus();
        }
        async handleBlur() {
            const _ripple = await this.getRipple();
            _ripple?.endFocus();
        }
        render() {
            const { pressed = false } = this;
            const surfaceClasses = classMap({
                surface: true,
                pressed,
            });
            return html `
      <ui-focus-ring part="focus-ring" .control="${this}"></ui-focus-ring>
      <div class="${surfaceClasses}" ${ripple(this.getRipple)}>
        <div class="container"></div>
        <div class="state"></div>
        ${when(this.showRipple, this.renderRipple)}
        <div class="content">
          <div class="outer"></div>
          <div class="inner"></div>
        </div>
      </div>
    `;
        }
        renderRipple = () => {
            const { disabled } = this;
            return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
        };
    };
})();
/**
 * A form-associated radio button.
 *
 * ```html
 * <label>
 *  <api-radio name="fruit" value="apple"></api-radio>
 *  Apple
 * </label>
 * <label>
 *  <api-radio name="fruit" value="banana"></api-radio>
 *  Banana
 * </label>
 * <label>
 *  <api-radio name="fruit" value="mango"></api-radio>
 *  Mango
 * </label>
 * ```
 *
 * The radio supports keyboard navigation as the `<input type="radio"/>` does.
 * Radio buttons are grouped by name. This means if another button with the same name
 * is selected, all other with the same name are deselected. It is possible to use
 * two radio inputs with the same name in different forms in the same document.
 * The grouping only affects inputs inside the form.
 */
export default RadioElement;
//# sourceMappingURL=RadioElement.js.map