@baloise/ds-core 20.0.0-next.10 → 20.0.0-next.11

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

@@ -0,0 +1,1076 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, } from "@stencil/core";
+import { Logger, stopEventBubbling, hasTagName, isDescendant, OneOf, Type, watchInvalidTextSlot, setFormValue, } from "../../../../utils/index";
+import { Field } from "../../input/field.util";
+import { defaultConfig, ListenToConfig } from "../../../../global/index";
+import { INPUT_COLORS } from "../../input/input.interfaces";
+import { RADIO_LABEL_POSITIONS, RADIO_TILE_COLORS, RADIO_GROUP_COLUMNS, } from "../radio.interfaces";
+/**
+ * Radio Group groups multiple radio inputs so only one option can be selected at a time within a form field.
+ *
+ * @slot - The radio items to display inside the group.
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
+ */
+export class RadioGroup {
+    constructor() {
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        this.hasInvalidTextSlotContent = false;
+        this.inputId = `ds-rg-${radioGroupIds++}`;
+        /**
+         * PUBLIC PROPERTY API
+         * ─────────────────────────────────────────────────────
+         */
+        /**
+         * If `true`, the radios can be deselected.
+         */
+        this.allowEmptySelection = false;
+        /**
+         * If `true`, disables the automatic `invalid`/`invalidText` behavior that the `@baloise/ds-angular` integration
+         * applies when the bound `NgControl` is touched and invalid. Only affects the Angular integration; it is a no-op
+         * in other framework integrations.
+         */
+        this.autoInvalidOff = false;
+        /**
+         * Defines the color of the input. The default value is `primary`.
+         */
+        this.color = 'primary';
+        /**
+         * Defines the column size like the grid.
+         */
+        this.cols = 1;
+        /**
+         * Defines the column size for mobile and bigger like the grid.
+         */
+        this.colsMobile = 1;
+        /**
+         * Defines the column size for tablet and bigger like the grid.
+         */
+        this.colsTablet = 1;
+        /**
+         * The description of the input, which is displayed below the input field.
+         */
+        this.description = '';
+        /**
+         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+         */
+        this.disabled = false;
+        /**
+         * If `true` the component gets a invalid style.
+         */
+        this.invalid = false;
+        /**
+         * The text to display when the input is in an invalid state.
+         */
+        this.invalidText = '';
+        /**
+         * The label of the input, which is displayed above the input field.
+         */
+        this.label = '';
+        /**
+         * Defines the position of the label, either before or after the radio input. Default is after.
+         */
+        this.labelPosition = 'right';
+        /**
+         * Shows a loading indicator at the end of the input and replaces the end slot content.
+         */
+        this.loading = false;
+        /**
+         * The name of the radios in the group. Child radios will inherit the name.
+         */
+        this.name = this.inputId;
+        /**
+         * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        this.readonly = false;
+        /**
+         * If `true`, the user must fill in a value before submitting a form.
+         */
+        this.required = true;
+        /**
+         * Defines the layout of the input
+         */
+        this.tile = false;
+        /**
+         * If `true` and `tile` is set, the radio circle is visually hidden on every radio in the group.
+         */
+        this.hideTrigger = false;
+        /**
+         * Displays the radios vertically.
+         */
+        this.vertical = false;
+        /**
+         * EVENT HANDLERS
+         * ─────────────────────────────────────────────────────
+         */
+        this.handleValueChange = async () => {
+            this.setRadioTabindex(this.value);
+            this.setRadioChecked();
+        };
+        this.handleSlotChange = () => {
+            this.passDownAttributes();
+            this.handleValueChange();
+        };
+        this.handleClick = (ev) => {
+            const element = ev.target;
+            if (element.href) {
+                return;
+            }
+            ev.preventDefault();
+            const selectedRadio = ev.target && ev.target.closest('ds-radio');
+            if (selectedRadio && !selectedRadio.disabled && !selectedRadio.readonly) {
+                const currentValue = this.value;
+                const newValue = selectedRadio.value;
+                if (newValue !== currentValue) {
+                    this.value = newValue;
+                }
+                else if (this.allowEmptySelection) {
+                    this.value = undefined;
+                }
+                this.dsChange.emit(this.value);
+                setFormValue(this.internals, this.value);
+            }
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    valueChanged() {
+        this.handleValueChange();
+    }
+    /**
+     * LIFECYCLE
+     * ─────────────────────────────────────────────────────
+     */
+    connectedCallback() {
+        this.initialValue = this.value;
+        setFormValue(this.internals, this.value);
+        this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
+            this.hasInvalidTextSlotContent = hasContent;
+        });
+        this.passDownAttributes();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.disconnectInvalidTextSlotWatcher) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    componentWillLoad() {
+        this.handleValueChange();
+    }
+    componentWillUpdate() {
+        this.passDownAttributes();
+    }
+    componentDidLoad() {
+        this.handleSlotChange();
+    }
+    /**
+     * PUBLIC LISTENERS
+     * ─────────────────────────────────────────────────────
+     */
+    listenToDsChange(ev) {
+        if (isDescendant(this.el, ev.target)) {
+            stopEventBubbling(ev);
+        }
+    }
+    listenToDsFocus(ev) {
+        const { target } = ev;
+        if (target && isDescendant(this.el, target) && hasTagName(target, 'ds-radio')) {
+            stopEventBubbling(ev);
+        }
+    }
+    listenToDsBlur(ev) {
+        const { target } = ev;
+        if (target && isDescendant(this.el, target) && hasTagName(target, 'ds-radio')) {
+            stopEventBubbling(ev);
+        }
+    }
+    /**
+     * The individual `ds-radio`s' own `dsBlur` never bubbles out of the group (see `listenToDsBlur` above), so
+     * the group emits its own `dsBlur` here instead — but only once focus actually leaves the group entirely,
+     * not when it moves between sibling radios (e.g. arrow-key navigation). `focusout` is composed, so this
+     * listener (attached to the host by default) still receives it across each radio's shadow boundary, and
+     * the platform retargets `relatedTarget` the same way it retargets `target` — so a related target that's
+     * still a descendant radio resolves to that `ds-radio` element, not its internal `<input>`.
+     */
+    listenToFocusOut(ev) {
+        const relatedTarget = ev.relatedTarget;
+        if (!relatedTarget || !isDescendant(this.el, relatedTarget)) {
+            this.dsBlur.emit(ev);
+        }
+    }
+    listenToReset(ev) {
+        const formElement = ev.target;
+        if (formElement === null || formElement === void 0 ? void 0 : formElement.contains(this.el)) {
+            this.value = this.initialValue;
+        }
+    }
+    listenToKeydown(ev) {
+        if (ev.target && !this.el.contains(ev.target)) {
+            return;
+        }
+        // Get all radios inside of the radio group and then
+        // filter out disabled radios since we need to skip those
+        const radios = this.getRadios().filter(radio => !radio.disabled);
+        const targetRadio = ev.target.closest('ds-radio');
+        // Only move the radio if the current focus is in the radio group
+        if (targetRadio && radios.includes(targetRadio)) {
+            const index = radios.findIndex(radio => radio === targetRadio);
+            const current = radios[index];
+            let next;
+            // If hitting arrow down or arrow right, move to the next radio
+            // If we're on the last radio, move to the first radio
+            if (['ArrowDown', 'ArrowRight'].includes(ev.code)) {
+                next = index === radios.length - 1 ? radios[0] : radios[index + 1];
+            }
+            // If hitting arrow up or arrow left, move to the previous radio
+            // If we're on the first radio, move to the last radio
+            if (['ArrowUp', 'ArrowLeft'].includes(ev.code)) {
+                next = index === 0 ? radios[radios.length - 1] : radios[index - 1];
+            }
+            if (next && radios.includes(next)) {
+                next.setFocus();
+                this.value = next.value;
+                this.dsChange.emit(this.value);
+                setFormValue(this.internals, this.value);
+            }
+            // Update the radio group value when a user presses the
+            // space bar on top of a selected radio
+            if (['Space'].includes(ev.code)) {
+                this.value = this.allowEmptySelection && this.value !== undefined ? undefined : current.value;
+                this.dsChange.emit(this.value);
+                setFormValue(this.internals, this.value);
+                // Prevent browsers from jumping to the bottom of the screen
+                ev.preventDefault();
+            }
+        }
+    }
+    /**
+     * PUBLIC METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    /** @internal */
+    async setValue(value) {
+        this.value = value;
+    }
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        this.language = state.language;
+        this.region = state.region;
+    }
+    /**
+     * PRIVATE METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    passDownAttributes() {
+        const isInvalid = this.invalid || this.hasInvalidTextSlotContent;
+        this.getRadios().forEach(radio => {
+            var _a;
+            if (this.disabled !== undefined) {
+                radio.disabled = this.disabled;
+            }
+            if (this.readonly !== undefined) {
+                radio.readonly = this.readonly;
+            }
+            radio.invalid = isInvalid;
+            radio.labelPosition = this.labelPosition;
+            radio.tile = this.tile;
+            radio.hideTrigger = this.hideTrigger;
+            radio.tileColor = (_a = radio.getAttribute('tile-color')) !== null && _a !== void 0 ? _a : this.tileColor;
+            radio.cols = this.cols;
+            radio.colsTablet = this.colsTablet;
+            radio.colsMobile = this.colsMobile;
+        });
+    }
+    setRadioChecked() {
+        this.getRadios().forEach((radio) => {
+            if (radio.updateState) {
+                radio.updateState();
+            }
+        });
+    }
+    setRadioTabindex(value) {
+        const radios = this.getRadios();
+        // Get the first radio that is not disabled and the checked one
+        const first = radios.find(radio => !radio.disabled);
+        const checked = radios.find(radio => radio.value === value && !radio.disabled);
+        if (!first && !checked) {
+            return;
+        }
+        // If an enabled checked radio exists, set it to be the focusable radio
+        // otherwise we default to focus the first radio
+        const focusable = checked || first;
+        for (const radio of radios) {
+            const tabindex = radio === focusable ? 0 : -1;
+            radio.setButtonTabindex(tabindex);
+        }
+    }
+    getRadios() {
+        return Array.from(this.el.querySelectorAll('ds-radio'));
+    }
+    /**
+     * RENDER
+     * ─────────────────────────────────────────────────────
+     */
+    render() {
+        return (h(Field, { key: '616a7ea2bbf1e25e64bd9952d80e2863c093175a', role: "fieldset", disabled: this.disabled, color: this.color, invalid: this.invalid || this.hasInvalidTextSlotContent, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
+                'is-vertical': this.vertical,
+                'is-tile': this.tile,
+            }, onClick: this.handleClick }, h("slot", { key: '72a97e481089b45a943b3309268e20c88ccc49c3', onSlotchange: this.handleSlotChange })));
+    }
+    static get is() { return "ds-radio-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["radio-group.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["radio-group.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "allowEmptySelection": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the radios can be deselected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-empty-selection",
+                "defaultValue": "false"
+            },
+            "autoInvalidOff": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, disables the automatic `invalid`/`invalidText` behavior that the `@baloise/ds-angular` integration\napplies when the bound `NgControl` is touched and invalid. Only affects the Angular integration; it is a no-op\nin other framework integrations."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "auto-invalid-off",
+                "defaultValue": "false"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputColor",
+                    "resolved": "\"danger\" | \"primary\" | \"success\" | \"warning\"",
+                    "references": {
+                        "InputColor": {
+                            "location": "import",
+                            "path": "../../input/input.interfaces",
+                            "id": "src/components/forms/input/input.interfaces.ts::InputColor",
+                            "referenceLocation": "InputColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the color of the input. The default value is `primary`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'primary'"
+            },
+            "cols": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "RadioGroupColumns",
+                    "resolved": "1 | 2 | 3 | 4",
+                    "references": {
+                        "RadioGroupColumns": {
+                            "location": "import",
+                            "path": "../radio.interfaces",
+                            "id": "src/components/forms/radio/radio.interfaces.ts::RadioGroupColumns",
+                            "referenceLocation": "RadioGroupColumns"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the column size like the grid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cols",
+                "defaultValue": "1"
+            },
+            "colsMobile": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "RadioGroupColumns",
+                    "resolved": "1 | 2 | 3 | 4",
+                    "references": {
+                        "RadioGroupColumns": {
+                            "location": "import",
+                            "path": "../radio.interfaces",
+                            "id": "src/components/forms/radio/radio.interfaces.ts::RadioGroupColumns",
+                            "referenceLocation": "RadioGroupColumns"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the column size for mobile and bigger like the grid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cols-mobile",
+                "defaultValue": "1"
+            },
+            "colsTablet": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "RadioGroupColumns",
+                    "resolved": "1 | 2 | 3 | 4",
+                    "references": {
+                        "RadioGroupColumns": {
+                            "location": "import",
+                            "path": "../radio.interfaces",
+                            "id": "src/components/forms/radio/radio.interfaces.ts::RadioGroupColumns",
+                            "referenceLocation": "RadioGroupColumns"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the column size for tablet and bigger like the grid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cols-tablet",
+                "defaultValue": "1"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The description of the input, which is displayed below the input field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the component gets a invalid style."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "invalidText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display when the input is in an invalid state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid-text",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label of the input, which is displayed above the input field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "labelPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RadioLabelPosition",
+                    "resolved": "\"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "RadioLabelPosition": {
+                            "location": "import",
+                            "path": "../radio.interfaces",
+                            "id": "src/components/forms/radio/radio.interfaces.ts::RadioLabelPosition",
+                            "referenceLocation": "RadioLabelPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the position of the label, either before or after the radio input. Default is after."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-position",
+                "defaultValue": "'right'"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a loading indicator at the end of the input and replaces the end slot content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the radios in the group. Child radios will inherit the name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name",
+                "defaultValue": "this.inputId"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the element can not mutated, meaning the user can not edit the control."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the user must fill in a value before submitting a form."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "true"
+            },
+            "tile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the layout of the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tile",
+                "defaultValue": "false"
+            },
+            "hideTrigger": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` and `tile` is set, the radio circle is visually hidden on every radio in the group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-trigger",
+                "defaultValue": "false"
+            },
+            "tileColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RadioTileColor",
+                    "resolved": "\"green\" | \"purple\" | \"red\" | \"yellow\" | undefined",
+                    "references": {
+                        "RadioTileColor": {
+                            "location": "import",
+                            "path": "../radio.interfaces",
+                            "id": "src/components/forms/radio/radio.interfaces.ts::RadioTileColor",
+                            "referenceLocation": "RadioTileColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the color of the tile checkbox."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tile-color"
+            },
+            "value": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "any | null",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the radio group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "vertical": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays the radios vertically."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "vertical",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "language": {},
+            "region": {},
+            "hasInvalidTextSlotContent": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsBlur",
+                "name": "dsBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus."
+                },
+                "complexType": {
+                    "original": "RadioGroupBlurDetail",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "RadioGroupBlurDetail": {
+                            "location": "import",
+                            "path": "../radio.interfaces",
+                            "id": "src/components/forms/radio/radio.interfaces.ts::RadioGroupBlurDetail",
+                            "referenceLocation": "RadioGroupBlurDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input value has changed."
+                },
+                "complexType": {
+                    "original": "RadioGroupChangeDetail",
+                    "resolved": "any",
+                    "references": {
+                        "RadioGroupChangeDetail": {
+                            "location": "import",
+                            "path": "../radio.interfaces",
+                            "id": "src/components/forms/radio/radio.interfaces.ts::RadioGroupChangeDetail",
+                            "referenceLocation": "RadioGroupChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsFocus",
+                "name": "dsFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input has focus."
+                },
+                "complexType": {
+                    "original": "RadioGroupFocusDetail",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "RadioGroupFocusDetail": {
+                            "location": "import",
+                            "path": "../radio.interfaces",
+                            "id": "src/components/forms/radio/radio.interfaces.ts::RadioGroupFocusDetail",
+                            "referenceLocation": "RadioGroupFocusDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setValue": {
+                "complexType": {
+                    "signature": "(value: number | string | boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string | number | boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "configChanged": {
+                "complexType": {
+                    "signature": "(state: DsConfigState) => Promise<void>",
+                    "parameters": [{
+                            "name": "state",
+                            "type": "DsConfigState",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DsConfigState": {
+                            "location": "import",
+                            "path": "@global",
+                            "id": "src/global/index.ts::DsConfigState",
+                            "referenceLocation": "DsConfigState"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "define config for the component"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "dsChange",
+                "method": "listenToDsChange",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "dsFocus",
+                "method": "listenToDsFocus",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "dsBlur",
+                "method": "listenToDsBlur",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "listenToFocusOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "reset",
+                "method": "listenToReset",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "listenToKeydown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+__decorate([
+    Logger('radio-group'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], RadioGroup.prototype, "createLogger", null);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], RadioGroup.prototype, "allowEmptySelection", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], RadioGroup.prototype, "autoInvalidOff", void 0);
+__decorate([
+    OneOf(INPUT_COLORS),
+    __metadata("design:type", String)
+], RadioGroup.prototype, "color", void 0);
+__decorate([
+    OneOf(RADIO_GROUP_COLUMNS),
+    __metadata("design:type", Number)
+], RadioGroup.prototype, "cols", void 0);
+__decorate([
+    OneOf(RADIO_GROUP_COLUMNS),
+    __metadata("design:type", Number)
+], RadioGroup.prototype, "colsMobile", void 0);
+__decorate([
+    OneOf(RADIO_GROUP_COLUMNS),
+    __metadata("design:type", Number)
+], RadioGroup.prototype, "colsTablet", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], RadioGroup.prototype, "description", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], RadioGroup.prototype, "disabled", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], RadioGroup.prototype, "invalid", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], RadioGroup.prototype, "invalidText", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], RadioGroup.prototype, "label", void 0);
+__decorate([
+    OneOf(RADIO_LABEL_POSITIONS),
+    __metadata("design:type", String)
+], RadioGroup.prototype, "labelPosition", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], RadioGroup.prototype, "loading", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], RadioGroup.prototype, "name", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], RadioGroup.prototype, "readonly", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], RadioGroup.prototype, "required", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], RadioGroup.prototype, "tile", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], RadioGroup.prototype, "hideTrigger", void 0);
+__decorate([
+    OneOf(RADIO_TILE_COLORS),
+    __metadata("design:type", String)
+], RadioGroup.prototype, "tileColor", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], RadioGroup.prototype, "vertical", void 0);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], RadioGroup.prototype, "configChanged", null);
+let radioGroupIds = 0;