import { h } from "@stencil/core";
export class DgaRadioButtonUsage {
    constructor() {
        this.activeStep = 1;
        this.activeRadio = "radion-1";
    }
    render() {
        return (h("div", { key: '98cc692b7bbf00f4c2b81a1eac61fd50426b31b4' }, h("h1", { key: 'cf8a04177caf0843219d130c813509ba63a42e5e' }, "RadioButton Example"), h("div", { key: 'f7da63fa2a8549a4650993bb9269bd77d8101c34', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'd7aa22dd8cf4d81e5951ddb7af00899772b7d311', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-radio-button", { key: '092d8390c368ccfb54c87aa25340402e2a5c6dbc',
            // id="radio1"
            label: "Radio Label 1", hasHelperText: true, helperText: "When a selection needs a further detailed explanation, it goes here.", alertMessage: true, alertText: "Error/Warning message", name: "radio", value: 'radion-1', checked: this.activeRadio === 'radion-1', onChange: (e) => this.activeRadio = e.target.value }), h("dga-radio-button", { key: 'a6608133248a301f4b8467ee7838373c0aea9acd',
            // id="radio2"
            label: "Radio Label 2", hasHelperText: true, helperText: "When a selection needs a further detailed explanation, it goes here.", alertMessage: true, alertText: "Error/Warning message", name: "radio", value: 'radion-2', checked: this.activeRadio === 'radion-2', onChange: (e) => this.activeRadio = e.target.value })), h("div", { key: 'd09896f9d2f0307494535b388ebe8b82428bd007', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
    }
    static get is() { return "dga-radio-button-usage"; }
    static get states() {
        return {
            "activeStep": {},
            "activeRadio": {}
        };
    }
}
