atomicuilibrary 0.0.1

package/dist/collection/components/radio-group/radio-group.js

@@ -0,0 +1,903 @@
+import { h } from "@stencil/core";
+export class RadioGroup {
+    internals;
+    el;
+    value = '';
+    name = '';
+    disabled = false;
+    readonly = false;
+    required = false;
+    invalid = false;
+    label = '';
+    helperText = '';
+    errorMessage = '';
+    layout = 'vertical';
+    columns = 2;
+    gap = '16px';
+    size = 'md';
+    color = 'primary';
+    options = [];
+    labelPosition = 'right';
+    enableAnimation = true;
+    rippleEffect = true;
+    buttonGroup = false;
+    variant = 'default';
+    skeleton = false;
+    allowEmpty = false;
+    showDot = true;
+    /** Entrance animation */
+    reveal = 'none';
+    /** Delay for entry animation (ms) */
+    revealDelay = 0;
+    /** Stagger delay between items */
+    revealStagger = 60;
+    /** High-Fidelity: Searchable options */
+    searchable = false;
+    /** High-Fidelity: Search bar placeholder */
+    searchPlaceholder = 'Search items...';
+    /** High-Fidelity: RTL support */
+    rtl = false;
+    radios = [];
+    searchQuery = '';
+    radioGroupChange;
+    constructor() {
+        this.internals = this.el.attachInternals();
+    }
+    componentWillLoad() {
+        this.updateOptions();
+        this.internals.setFormValue(this.value);
+    }
+    componentDidLoad() {
+        this.syncRadios();
+    }
+    componentDidUpdate() {
+        this.syncRadios();
+    }
+    watchValue() {
+        this.syncRadios();
+    }
+    updateOptions() {
+        let newRadios = [];
+        if (typeof this.options === 'string') {
+            try {
+                newRadios = JSON.parse(this.options);
+            }
+            catch {
+                console.error('Invalid options JSON');
+                newRadios = [];
+            }
+        }
+        else if (Array.isArray(this.options)) {
+            newRadios = [...this.options];
+        }
+        if (JSON.stringify(this.radios) !== JSON.stringify(newRadios)) {
+            this.radios = newRadios;
+        }
+    }
+    handleRadioClick(event) {
+        if (!this.allowEmpty)
+            return;
+        // Handle both Shadow DOM and Light DOM targets
+        // Handle both Shadow DOM and Light DOM targets
+        const target = (event.target.closest('ui-radio') ||
+            (event.composedPath && event.composedPath().find((el) => el.tagName === 'UI-RADIO')));
+        if (target && !target.disabled && !this.disabled) {
+            // If clicking the currently selected radio
+            if (target.value === this.value) {
+                // Prevent default to stop native radio from enforcing checked state (though it usually stays checked)
+                event.preventDefault();
+                event.stopPropagation();
+                this.value = '';
+                this.radioGroupChange.emit({ value: '' });
+            }
+        }
+    }
+    handleRadioChange(event) {
+        // Update the group's value when a child radio is checked
+        const { checked, value } = event.detail;
+        if (checked) {
+            this.value = value;
+            this.internals.setFormValue(value);
+            this.updateValidity();
+            this.radioGroupChange.emit({ value });
+        }
+    }
+    updateValidity() {
+        if (this.required && !this.value) {
+            this.internals.setValidity({ valueMissing: true }, 'Please select an option.', this.el);
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    /**
+     * Checks the component's validity.
+     */
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    /**
+     * Reports the component's validity.
+     */
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    getRadios() {
+        const shadowRadios = Array.from(this.el.shadowRoot.querySelectorAll('ui-radio'));
+        const lightRadios = Array.from(this.el.querySelectorAll('ui-radio'));
+        return [...shadowRadios, ...lightRadios];
+    }
+    syncRadios() {
+        const radios = this.getRadios();
+        radios.forEach((radio, index) => {
+            radio.checked = radio.value === this.value;
+            radio.isButton = this.buttonGroup;
+            radio.variant = this.variant;
+            radio.skeleton = this.skeleton;
+            radio.name = this.name; // Propagate name
+            radio.reveal = this.reveal;
+            radio.revealDelay = this.revealDelay + (index * this.revealStagger);
+            radio.rtl = this.rtl;
+        });
+    }
+    renderLabel() {
+        if (!this.label)
+            return null;
+        return (h("div", { class: "radio-group-label" }, this.label, this.required && h("span", { class: "required-indicator" }, "*")));
+    }
+    renderSearch() {
+        if (!this.searchable)
+            return null;
+        return (h("div", { class: {
+                'radio-search': true,
+                'search-active': this.searchQuery.length > 0
+            } }, h("div", { class: "search-input-wrapper" }, h("ui-icon", { name: "search", library: "lucide", class: "search-icon" }), h("ui-input", { type: "text", placeholder: this.searchPlaceholder, onInputChange: (e) => { this.searchQuery = e.detail.toLowerCase(); }, value: this.searchQuery, size: "sm", fullWidth: true }), this.searchQuery.length > 0 && (h("ui-button", { variant: "ghost", class: "clear-search", onClick: () => { this.searchQuery = ''; }, ariaLabel: "Clear search", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" })))));
+    }
+    render() {
+        const visibleOptions = Array.isArray(this.radios) ? this.radios.filter(opt => !this.searchQuery || opt.label.toLowerCase().includes(this.searchQuery)) : [];
+        const containerClasses = {
+            'radio-group': true,
+            [`radio-group-${this.layout}`]: true,
+            'radio-group-disabled': this.disabled,
+            'radio-group-invalid': this.invalid,
+            'radio-group-button': this.buttonGroup,
+            [`radio-group-variant-${this.variant}`]: true,
+            'radio-group-skeleton': this.skeleton,
+        };
+        const radioListClasses = {
+            'radio-list': true,
+            [`radio-list-${this.layout}`]: true,
+        };
+        const listStyle = {
+            ...(this.layout === 'grid' ? { 'grid-template-columns': `repeat(${this.columns}, 1fr)` } : {}),
+            'gap': this.gap
+        };
+        return (h("div", { key: '8f4bf0db359a75ef98dfb5719adbd6b70fea3c38', class: containerClasses, role: "radiogroup", "aria-label": this.label, dir: this.rtl ? 'rtl' : 'ltr' }, this.renderLabel(), this.renderSearch(), h("div", { key: '6eb5c03abf60138dd6b20b7830fdc80310729bf8', class: radioListClasses, style: listStyle }, h("slot", { key: 'bdc217a91c554f749634d0b9ba2965b1f626ee27' }), visibleOptions.length === 0 && this.searchQuery && (h("div", { key: 'f7dd1dc1cda443e0877a64c5e04cba402f905c6f', class: "no-results" }, "No matches found")), visibleOptions.map((option, idx) => (h("ui-radio", { value: option.value, label: option.label, description: option.description, badge: option.badge, tooltip: option.tooltip, "tooltip-position": option.tooltipPosition, name: this.name, checked: this.value === option.value, disabled: this.disabled || option.disabled, readonly: this.readonly, invalid: this.invalid, size: this.size, color: this.color, "label-position": this.labelPosition, "show-dot": this.showDot, "enable-animation": this.enableAnimation, "ripple-effect": this.rippleEffect, "is-button": this.buttonGroup, variant: this.variant, skeleton: this.skeleton, reveal: this.reveal, "reveal-delay": this.revealDelay + (idx * this.revealStagger), rtl: this.rtl })))), this.renderHelperText()));
+    }
+    renderHelperText() {
+        if (this.invalid && this.errorMessage) {
+            return (h("div", { class: "helper-text error" }, h("ui-icon", { library: "lucide", name: "alert-circle", size: "14px" }), this.errorMessage));
+        }
+        if (this.helperText) {
+            return h("div", { class: "helper-text" }, this.helperText);
+        }
+        return null;
+    }
+    static get is() { return "ui-radio-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["radio-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["radio-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text",
+                "defaultValue": "''"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message",
+                "defaultValue": "''"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Orientation | 'grid'",
+                    "resolved": "\"grid\" | \"horizontal\" | \"vertical\"",
+                    "references": {
+                        "Orientation": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Orientation",
+                            "referenceLocation": "Orientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "layout",
+                "defaultValue": "'vertical'"
+            },
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "2"
+            },
+            "gap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gap",
+                "defaultValue": "'16px'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComponentSize",
+                    "resolved": "\"default\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\" | \"xxxl\" | \"xxxs\"",
+                    "references": {
+                        "ComponentSize": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::ComponentSize",
+                            "referenceLocation": "ComponentSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StatusColor",
+                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "references": {
+                        "StatusColor": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::StatusColor",
+                            "referenceLocation": "StatusColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'primary'"
+            },
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<{ value: string; label: string; description?: string; disabled?: boolean; }> | string",
+                    "resolved": "string | { value: string; label: string; description?: string; disabled?: boolean; }[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "options",
+                "defaultValue": "[]"
+            },
+            "labelPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LeftRight",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {
+                        "LeftRight": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::LeftRight",
+                            "referenceLocation": "LeftRight"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-position",
+                "defaultValue": "'right'"
+            },
+            "enableAnimation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-animation",
+                "defaultValue": "true"
+            },
+            "rippleEffect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ripple-effect",
+                "defaultValue": "true"
+            },
+            "buttonGroup": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-group",
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'bordered' | 'underlined' | 'card'",
+                    "resolved": "\"bordered\" | \"card\" | \"default\" | \"underlined\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "skeleton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "skeleton",
+                "defaultValue": "false"
+            },
+            "allowEmpty": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-empty",
+                "defaultValue": "false"
+            },
+            "showDot": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-dot",
+                "defaultValue": "true"
+            },
+            "reveal": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'fade-in' | 'slide-up' | 'zoom'",
+                    "resolved": "\"fade-in\" | \"none\" | \"slide-up\" | \"zoom\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Entrance animation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reveal",
+                "defaultValue": "'none'"
+            },
+            "revealDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Delay for entry animation (ms)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reveal-delay",
+                "defaultValue": "0"
+            },
+            "revealStagger": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stagger delay between items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reveal-stagger",
+                "defaultValue": "60"
+            },
+            "searchable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "High-Fidelity: Searchable options"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "searchable",
+                "defaultValue": "false"
+            },
+            "searchPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "High-Fidelity: Search bar placeholder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-placeholder",
+                "defaultValue": "'Search items...'"
+            },
+            "rtl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "High-Fidelity: RTL support"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rtl",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "radios": {},
+            "searchQuery": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "radioGroupChange",
+                "name": "radioGroupChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: string; }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Checks the component's validity.",
+                    "tags": []
+                }
+            },
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Reports the component's validity.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "watchValue"
+            }, {
+                "propName": "options",
+                "methodName": "updateOptions"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleRadioClick",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "radioChange",
+                "method": "handleRadioChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}