@universal-material/web/radio/radio.js

Material web components

import { __decorate } from "tslib";
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { styles as baseStyles } from '../shared/base.styles.js';
import { UmSelectionControl } from '../shared/selection-control/selection-control.js';
import { styles } from './radio.styles.js';
let UmRadio = class UmRadio extends UmSelectionControl {
    static { this.styles = [baseStyles, styles]; }
    renderIndicator() {
        return html `
      <div class="indicator"></div>
    `;
    }
    get checked() {
        return super.checked;
    }
    set checked(value) {
        super.checked = value;
        if (!value) {
            return;
        }
        this.uncheckSiblings();
        if (this.input) {
            this.input.tabIndex = 0;
        }
    }
    get #siblings() {
        if (!this.name) {
            return [this];
        }
        return Array.from(this.getRootNode().querySelectorAll(`${this.tagName}[name="${this.name}"]`));
    }
    constructor() {
        super();
        this.hideStateLayer = false;
        this.inputType = 'radio';
    }
    firstUpdated(changedProperties) {
        super.firstUpdated(changedProperties);
        this.ensureOnlyOneChecked();
    }
    connectedCallback() {
        super.connectedCallback();
        this.addEventListener('keydown', this.#handleKeyDown);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.removeEventListener('keydown', this.#handleKeyDown);
    }
    #handleKeyDown(event) {
        const isDown = event.key === 'ArrowDown';
        const isUp = event.key === 'ArrowUp';
        const isLeft = event.key === 'ArrowLeft';
        const isRight = event.key === 'ArrowRight';
        if (!isLeft && !isRight && !isDown && !isUp) {
            return;
        }
        // Don't try to select another sibling if there aren't any.
        const siblings = this.#siblings;
        if (!siblings.length) {
            return;
        }
        event.preventDefault();
        const isRtl = getComputedStyle(this).direction === 'rtl';
        const forwards = isRtl ? isLeft || isDown : isRight || isDown;
        const factor = forwards ? 1 : -1;
        const thisIndex = siblings.indexOf(this);
        let nextIndex = thisIndex + factor;
        while (nextIndex !== thisIndex) {
            if (nextIndex >= siblings.length) {
                // Return to start if moving past the last item.
                nextIndex = 0;
            }
            else if (nextIndex < 0) {
                // Go to end if moving before the first item.
                nextIndex = siblings.length - 1;
            }
            const nextSibling = siblings[nextIndex];
            if (nextSibling.disabled) {
                nextIndex += factor;
                continue;
            }
            const clickCanceled = !nextSibling.dispatchEvent(new Event('click', {
                bubbles: true,
                cancelable: true,
            }));
            nextSibling.input.focus();
            if (clickCanceled) {
                break;
            }
            nextSibling.checked = true;
            nextSibling.dispatchEvent(new Event('change', { bubbles: true }));
            break;
        }
    }
    ensureOnlyOneChecked() {
        if (!this.name) {
            return;
        }
        const radios = Array.from(document.querySelectorAll(`${this.tagName}[name="${this.name}"]`));
        const lastChecked = radios.reverse().find(r => r.checked);
        if (!lastChecked) {
            return;
        }
        lastChecked.checked = true;
    }
    uncheckSiblings() {
        for (const radio of this.#siblings) {
            if (radio === this) {
                continue;
            }
            if (radio.input) {
                radio.input.tabIndex = -1;
            }
            radio.checked = false;
        }
    }
};
__decorate([
    property({ type: Boolean, attribute: 'hide-state-layer', reflect: true })
], UmRadio.prototype, "hideStateLayer", void 0);
UmRadio = __decorate([
    customElement('u-radio')
], UmRadio);
export { UmRadio };
//# sourceMappingURL=radio.js.map