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

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

@@ -0,0 +1,886 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, Host, } from "@stencil/core";
+import { Logger, isSpaceKey, inheritAttributes, isDescendant, waitAfterIdleCallback, stopEventBubbling, hasValue, OneOf, Type, setFormValue, } from "../../../utils/index";
+import { FOCUS_KEYS } from "../../structure/root/root.focus.util";
+import { RADIO_GROUP_COLUMNS, RADIO_TILE_COLORS, RADIO_LABEL_POSITIONS, } from "./radio.interfaces";
+/**
+ * Radio renders a radio button form control for selecting one option from a group with optional label and help text.
+ *
+ * @slot - The radio label content.
+ * @slot helper - The helper or hint text below the radio.
+ * @slot hint - A `ds-hint` shown alongside the label. In tile layout it is positioned in the top right corner.
+ * @part label - The label wrapper element.
+ * @part input - The native HTML input element.
+ * @part slot - The content slot wrapper.
+ * @part hint - The hint slot wrapper.
+ */
+export class Radio {
+    constructor() {
+        this.inputId = `ds-rb-${radioIds++}`;
+        this.inheritedAttributes = {};
+        this.keyboardMode = true;
+        this.focused = false;
+        this.wasFocused = false;
+        this.initialValue = false;
+        /**
+         * PUBLIC PROPERTY API
+         * ─────────────────────────────────────────────────────
+         */
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        this.autoInvalidOff = false;
+        /**
+         * If `true`, the checkbox is selected.
+         */
+        this.checked = false;
+        /**
+         * @internal
+         */
+        this.cols = 1;
+        /**
+         * @internal
+         */
+        this.colsMobile = 1;
+        /**
+         * @internal
+         */
+        this.colsTablet = 1;
+        /**
+         * 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;
+        /**
+         * Label of the radio item.
+         */
+        this.label = '';
+        /**
+         * Defines the position of the label, either before or after the radio input. Default is after.
+         */
+        this.labelPosition = 'right';
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        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 = false;
+        /**
+         * Defines the layout of the input
+         */
+        this.tile = false;
+        /**
+         * If `true` and `tile` is set, the radio circle is visually hidden. The tile remains fully clickable and keyboard-accessible.
+         */
+        this.hideTrigger = false;
+        /**
+         * EVENT HANDLERS
+         * ─────────────────────────────────────────────────────
+         */
+        this.handlePointerDown = () => (this.keyboardMode = false);
+        this.handleKeydown = (ev) => {
+            if (!isSpaceKey(ev)) {
+                this.wasFocused = false;
+            }
+            this.keyboardMode = FOCUS_KEYS.includes(ev.key);
+        };
+        this.handleChange = (ev) => {
+            this.checked = ev.target.checked;
+            this.dsChange.emit(this.checked);
+            setFormValue(this.internals, this.checked ? this.value : null);
+        };
+        this.handleFocus = (ev) => {
+            if (this.disabled || this.readonly)
+                return;
+            if (this.keyboardMode) {
+                this.focused = true;
+                this.wasFocused = true;
+            }
+            this.dsFocus.emit(ev);
+        };
+        this.handleBlur = (ev) => {
+            if (this.disabled || this.readonly)
+                return;
+            this.focused = false;
+            this.dsBlur.emit(ev);
+        };
+        this.handleClick = (ev) => {
+            var _a, _b;
+            if (this.disabled) {
+                return;
+            }
+            const element = ev.target;
+            if (element.href) {
+                return;
+            }
+            // Clicking the hint should open/close its panel without selecting the radio.
+            if ((_b = (_a = ev.target).closest) === null || _b === void 0 ? void 0 : _b.call(_a, '[slot="hint"]')) {
+                ev.preventDefault();
+                return;
+            }
+            if (this.wasFocused) {
+                this.focused = true;
+            }
+            // A click on the native input itself already selects it and fires `change`, which
+            // `handleChange` handles. Only intervene for clicks on slotted content. `ev.target` is
+            // retarget to the host across the shadow boundary, so check the composed path instead.
+            if (ev.composedPath()[0] === this.nativeInput) {
+                return;
+            }
+            this.toggleChecked(ev);
+        };
+        this.setChecked = (state) => {
+            this.checked = state;
+            this.dsChange.emit(this.checked);
+        };
+        this.toggleChecked = (ev) => {
+            ev.preventDefault();
+            this.setFocus();
+            this.checked = true;
+            this.setChecked(this.checked);
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * LIFECYCLE
+     * ─────────────────────────────────────────────────────
+     */
+    connectedCallback() {
+        if (this.value === undefined) {
+            this.value = this.inputId;
+        }
+        if (this.group) {
+            this.updateState();
+            this.group.addEventListener('dsChange', this.updateState);
+        }
+        this.el.addEventListener('keydown', this.handleKeydown);
+        this.el.addEventListener('touchstart', this.handlePointerDown);
+        this.el.addEventListener('mousedown', this.handlePointerDown);
+    }
+    componentWillLoad() {
+        setFormValue(this.internals, this.checked ? this.value : null);
+        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
+    }
+    disconnectedCallback() {
+        if (this.group) {
+            this.group.removeEventListener('dsChange', this.updateState);
+        }
+        this.el.removeEventListener('keydown', this.handleKeydown);
+        this.el.removeEventListener('touchstart', this.handlePointerDown);
+        this.el.removeEventListener('mousedown', this.handlePointerDown);
+    }
+    /**
+     * PUBLIC LISTENERS
+     * ─────────────────────────────────────────────────────
+     */
+    listenToClick(ev) {
+        if ((this.disabled || this.readonly) &&
+            ev.target &&
+            (ev.target === this.el || isDescendant(this.el, ev.target))) {
+            stopEventBubbling(ev);
+        }
+    }
+    /**
+     * PUBLIC METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    /**
+     * Sets the focus on the checkbox input element.
+     */
+    async setFocus() {
+        var _a;
+        await waitAfterIdleCallback();
+        (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+     * Sets blur on the native `input`. Use this method instead of the global
+     * `input.blur()`.
+     * @internal
+     */
+    async setBlur() {
+        var _a;
+        (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    /** @internal */
+    async setButtonTabindex(value) {
+        this.buttonTabindex = value;
+    }
+    /**
+     * @internal
+     * Options of the tab like label, value etc.
+     */
+    async updateState() {
+        if (this.group) {
+            const newChecked = this.group.value === this.value;
+            if (newChecked !== this.checked) {
+                this.checked = newChecked;
+            }
+        }
+    }
+    /**
+     * PRIVATE METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    get group() {
+        return this.el.closest('ds-radio-group');
+    }
+    hasHint() {
+        return this.el.querySelector('[slot="hint"]') !== null;
+    }
+    /**
+     * RENDER
+     * ─────────────────────────────────────────────────────
+     */
+    render() {
+        const value = typeof this.value === 'boolean' ? JSON.stringify(this.value) : this.value;
+        const inputAttributes = this.inheritedAttributes;
+        if (this.buttonTabindex !== undefined) {
+            inputAttributes['tabIndex'] = this.buttonTabindex;
+        }
+        return (h(Host, { key: '0489e47c67c33a90861b93efe8a6ad72766bdcc7', "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, "aria-invalid": this.invalid ? 'true' : null, class: {
+                'is-disabled': this.disabled || this.readonly,
+                'is-invalid': this.invalid,
+                'is-checked': this.checked,
+                'is-tile': this.tile,
+                [`has-tile-${this.tileColor}`]: this.tile && hasValue(this.tileColor),
+                'hide-trigger': this.tile && this.hideTrigger,
+                'has-label-left': this.labelPosition === 'left',
+                'has-label-top': this.labelPosition === 'top',
+                [`has-cols-${this.cols}`]: this.tile && this.cols > 1,
+                [`has-cols-${this.colsTablet}-tablet`]: this.tile && this.colsTablet > 1,
+                [`has-cols-${this.colsMobile}-mobile`]: this.tile && this.colsMobile > 1,
+            }, onClick: this.handleClick }, h("label", { key: '9d986d24a48c3d4d7b5377db6f07c0d298d3f4b1', id: "label", part: "label" }, h("input", Object.assign({ key: 'cb15de376cb040a9c17767add9c8db3a1a22b830', type: "radio", part: "input", id: this.inputId, name: this.name, value: value, tabindex: this.buttonTabindex, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, "aria-invalid": this.invalid ? 'true' : null, onChange: ev => this.handleChange(ev), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), h("div", { key: '9a09ae425ff814d5fd80f9127dcd0009bf3268b8', id: "slot", part: "slot" }, h("slot", { key: 'c4312d5c1746e2ebcb94c8e4a08351aa4254e073' })), this.hasHint() && (h("div", { key: '484394d840d5c236ad69ceb1c2a20ae9b17f2210', id: "hint", part: "hint" }, h("slot", { key: '724e496a138a54342a5e769c662feebc78205dec', name: "hint" }))))));
+    }
+    static get is() { return "ds-radio"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["radio.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["radio.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "autoInvalidOff": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, in Angular reactive forms the control will not be set invalid"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-invalid-off",
+                "defaultValue": "false"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the checkbox is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "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": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "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": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "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": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cols-tablet",
+                "defaultValue": "1"
+            },
+            "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"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the radio item."
+                },
+                "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'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the control, which is submitted with the form data."
+                },
+                "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": "false"
+            },
+            "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. The tile remains fully clickable and keyboard-accessible."
+                },
+                "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 radio."
+                },
+                "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": "A DOMString representing the value of the radio. This is not displayed on the\nclient-side, but on the server this is the value given to the data\nsubmitted with the radio's name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "focused": {},
+            "wasFocused": {},
+            "buttonTabindex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsBlur",
+                "name": "dsBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the toggle loses focus."
+                },
+                "complexType": {
+                    "original": "RadioBlurDetail",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "RadioBlurDetail": {
+                            "location": "import",
+                            "path": "./radio.interfaces",
+                            "id": "src/components/forms/radio/radio.interfaces.ts::RadioBlurDetail",
+                            "referenceLocation": "RadioBlurDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value property has changed."
+                },
+                "complexType": {
+                    "original": "RadioChangeDetail",
+                    "resolved": "boolean",
+                    "references": {
+                        "RadioChangeDetail": {
+                            "location": "import",
+                            "path": "./radio.interfaces",
+                            "id": "src/components/forms/radio/radio.interfaces.ts::RadioChangeDetail",
+                            "referenceLocation": "RadioChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsFocus",
+                "name": "dsFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the toggle has focus."
+                },
+                "complexType": {
+                    "original": "RadioFocusDetail",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "RadioFocusDetail": {
+                            "location": "import",
+                            "path": "./radio.interfaces",
+                            "id": "src/components/forms/radio/radio.interfaces.ts::RadioFocusDetail",
+                            "referenceLocation": "RadioFocusDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the focus on the checkbox input element.",
+                    "tags": []
+                }
+            },
+            "setBlur": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets blur on the native `input`. Use this method instead of the global\n`input.blur()`.",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "setButtonTabindex": {
+                "complexType": {
+                    "signature": "(value: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "updateState": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Options of the tab like label, value etc."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "listenToClick",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+__decorate([
+    Logger('radio'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Radio.prototype, "createLogger", null);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Radio.prototype, "autoInvalidOff", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Radio.prototype, "checked", void 0);
+__decorate([
+    OneOf(RADIO_GROUP_COLUMNS),
+    __metadata("design:type", Number)
+], Radio.prototype, "cols", void 0);
+__decorate([
+    OneOf(RADIO_GROUP_COLUMNS),
+    __metadata("design:type", Number)
+], Radio.prototype, "colsMobile", void 0);
+__decorate([
+    OneOf(RADIO_GROUP_COLUMNS),
+    __metadata("design:type", Number)
+], Radio.prototype, "colsTablet", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Radio.prototype, "disabled", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Radio.prototype, "invalid", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Radio.prototype, "label", void 0);
+__decorate([
+    OneOf(RADIO_LABEL_POSITIONS),
+    __metadata("design:type", String)
+], Radio.prototype, "labelPosition", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Radio.prototype, "name", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Radio.prototype, "readonly", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Radio.prototype, "required", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Radio.prototype, "tile", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Radio.prototype, "hideTrigger", void 0);
+__decorate([
+    OneOf(RADIO_TILE_COLORS),
+    __metadata("design:type", String)
+], Radio.prototype, "tileColor", void 0);
+let radioIds = 0;