radh-ui/dist/esm/radh-swappy-radios.entry.js

Stencil Component Starter

import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a9700b09.js';

const radhSwappyRadiosCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-height:100vh;color:#0f273d;font-family:'Lato', sans-serif}h3{font-size:2.5rem;font-weight:bold}.swappy-radios label{display:block;position:relative;padding-left:4rem;margin-bottom:1.5rem;cursor:pointer;font-size:2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#555}.swappy-radios label:hover input~.radio{opacity:0.8}.swappy-radios input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.swappy-radios input:checked~span{color:#ff4646;-webkit-transition:color .5s;transition:color .5s}.swappy-radios input:checked~.radio{background-color:#ff4646;opacity:1 !important}.swappy-radios input:checked~.radio::after{opacity:1}.swappy-radios .radio{position:absolute;top:0;left:0;height:2.5rem;width:2.5rem;background:#c9ded6}.swappy-radios .radio::after{display:block;content:'';position:absolute;opacity:0;top:0.75rem;left:0.75rem;width:1rem;height:1rem;background:#fff}";

class RADHSwappyRadios {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.nameRadios = 'options';
        this.labelRadios = 'Select An Option';
        this.optionsRadios = ['Banana', 'Strawberry'];
        this.selectedOption = createEvent(this, "selectedOption", 7);
    }
    async getSelectedRadio() {
        return this.selectRadio;
    }
    handleKeyDown(ev) {
        if (ev.key === 'ArrowUp' || ev.key === 'ArrowLeft') {
            ev.preventDefault();
            if (this.selected === 0) {
                this.selected = this.radios.length - 1;
            }
            else {
                this.selected--;
            }
        }
        if (ev.key === 'ArrowDown' || ev.key === 'ArrowRight') {
            ev.preventDefault();
            if (this.selected === this.radios.length - 1) {
                this.selected = 0;
            }
            else {
                this.selected++;
            }
        }
    }
    componentDidLoad() {
        this.radios = Array.from(this.elem.shadowRoot.querySelectorAll('input[type="radio"]'));
    }
    get selected() {
        return this.selectRadio;
    }
    set selected(ind) {
        console.log('selected: ' + ind);
        if (isFinite(this.selected)) {
            let previousSelected = this.radios[this.selected];
            previousSelected.tabIndex = -1;
            previousSelected.setAttribute('aria-checked', 'false');
        }
        let newSelected = this.radios[ind];
        newSelected.tabIndex = 0;
        newSelected.focus();
        newSelected.setAttribute('aria-checked', 'true');
        this.elem.setAttribute('selected', '' + ind);
        this.selectRadio = ind;
    }
    onChangeRadio(ev) {
        this.selected = this.radios.indexOf(ev.target);
        this.selectedOption.emit(this.selected);
    }
    render() {
        return (h("div", { class: "swappy-radios", role: "radiogroup", "aria-labelledby": "swappy-radios-label" }, h("h3", { id: "swappy-radios-label" }, this.labelRadios), this.optionsRadios.map(option => {
            console.log(option);
            return (h("label", null, h("input", { type: "radio", name: this.nameRadios, "on-click": (ev) => this.onChangeRadio(ev) }), h("span", { class: "radio" }), h("span", null, option)));
        })));
    }
    get elem() { return getElement(this); }
}
RADHSwappyRadios.style = radhSwappyRadiosCss;

export { RADHSwappyRadios as radh_swappy_radios };