radh-ui/dist/collection/components/radh-swappy-radios/radh-swappy-radios.js

Stencil Component Starter

import { Component, Element, Event, h, Listen, Method, Prop } from '@stencil/core';
export class RADHSwappyRadios {
    constructor() {
        this.nameRadios = 'options';
        this.labelRadios = 'Select An Option';
        this.optionsRadios = ['Banana', 'Strawberry'];
    }
    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)));
            })));
    }
    static get is() { return "radh-swappy-radios"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["radh-swappy-radios.css"]
    }; }
    static get styleUrls() { return {
        "$": ["radh-swappy-radios.css"]
    }; }
    static get properties() { return {
        "nameRadios": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "name-radios",
            "reflect": false,
            "defaultValue": "'options'"
        },
        "labelRadios": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label-radios",
            "reflect": false,
            "defaultValue": "'Select An Option'"
        },
        "optionsRadios": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "string[]",
                "resolved": "string[]",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "['Banana', 'Strawberry']"
        }
    }; }
    static get events() { return [{
            "method": "selectedOption",
            "name": "selectedOption",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get methods() { return {
        "getSelectedRadio": {
            "complexType": {
                "signature": "() => Promise<number>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<number>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "elem"; }
    static get listeners() { return [{
            "name": "keydown",
            "method": "handleKeyDown",
            "target": undefined,
            "capture": false,
            "passive": false
        }]; }
}