carbon-components-angular 5.10.0 → 5.10.1

package/docs/documentation.json

@@ -41251,7 +41251,7 @@
         },
         {
             "name": "Radio",
-            "id": "component-Radio-b46eb45aeba1d607b1abfe948208d8d1412575b5f04d2154e8433e2cd71cb4386018927ca69c9955856589fc882d5416c3584d8f18d2eb0ec2ace241b86fabc5",
+            "id": "component-Radio-c8843624caafee7784002695d7c9e979bc0495b0e346d046ad569302a7e7448065485546a2b71d719a295a1c29cc1bb163df73988f28ab7b47da0d3b35fb3de2",
             "file": "src/radio/radio.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -41265,14 +41265,13 @@
             "selector": "cds-radio, ibm-radio",
             "styleUrls": [],
             "styles": [],
-            "template": "<input\n\t*ngIf=\"!skeleton\"\n\tclass=\"cds--radio-button\"\n\ttype=\"radio\"\n\t[checked]=\"checked\"\n\t[disabled]=\"disabled || disabledFromGroup\"\n\t[name]=\"name\"\n\t[id]=\"id\"\n\t[required]=\"required\"\n\t[value]=\"value\"\n\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t(change)=\"onChange($event)\"\n\t(click)=\"onClick($event)\">\n<div *ngIf=\"skeleton\" class=\"cds--radio-button cds--skeleton\"></div>\n<label\n\tclass=\"cds--radio-button__label\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t[ngClass]=\"{\n\t\t'cds--skeleton': skeleton\n\t}\"\n\t[for]=\"id\"\n\tid=\"label-{{id}}\">\n\t<span class=\"cds--radio-button__appearance\"></span>\n\t<ng-content></ng-content>\n</label>\n\t",
+            "template": "<input\n\t*ngIf=\"!skeleton\"\n\tclass=\"cds--radio-button\"\n\ttype=\"radio\"\n\t[checked]=\"checked\"\n\t[disabled]=\"disabled || disabledFromGroup\"\n\t[name]=\"name\"\n\t[id]=\"id\"\n\t[required]=\"required\"\n\t[attr.value]=\"value\"\n\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t(change)=\"onChange($event)\"\n\t(click)=\"onClick($event)\">\n<div *ngIf=\"skeleton\" class=\"cds--radio-button cds--skeleton\"></div>\n<label\n\tclass=\"cds--radio-button__label\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t[ngClass]=\"{\n\t\t'cds--skeleton': skeleton\n\t}\"\n\t[for]=\"id\"\n\tid=\"label-{{id}}\">\n\t<span class=\"cds--radio-button__appearance\"></span>\n\t<ng-content></ng-content>\n</label>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
             "inputsClass": [
                 {
                     "name": "ariaLabel",
-                    "defaultValue": "\"\"",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUsed to set the `aria-label` attribute on the input label.\n",
@@ -41360,13 +41359,12 @@
                 },
                 {
                     "name": "value",
-                    "defaultValue": "\"\"",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThe value of the `Radio`.\n",
                     "description": "<p>The value of the <code>Radio</code>.</p>\n",
                     "line": 98,
-                    "type": "string",
+                    "type": "any",
                     "decorators": []
                 }
             ],
@@ -41527,8 +41525,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3183,
-                                "end": 3185,
+                                "pos": 3186,
+                                "end": 3188,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -41547,8 +41545,8 @@
                                 }
                             ],
                             "tagName": {
-                                "pos": 3177,
-                                "end": 3182,
+                                "pos": 3180,
+                                "end": 3185,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -41615,7 +41613,7 @@
             "description": "<p>class: Radio (extends Checkbox)</p>\n<p>selector: <code>n-radio</code></p>\n<p>source: <code>src/forms/radio.component.ts</code></p>\n<div><pre class=\"line-numbers\"><code class=\"language-html\">    &lt;cds-radio [(ngModel)]=&quot;radioState&quot;&gt;Radio&lt;/cds-radio&gt;</code></pre></div><p>Also see: <a href=\"#cds-radio-group\"><code>RadioGroup</code></a></p>\n",
             "rawdescription": "\n\nclass: Radio (extends Checkbox)\n\nselector: `n-radio`\n\nsource: `src/forms/radio.component.ts`\n\n```html\n\t<cds-radio [(ngModel)]=\"radioState\">Radio</cds-radio>\n```\n\nAlso see: [`RadioGroup`](#cds-radio-group)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { RadioChange } from \"./radio-change.class\";\n\n/**\n * class: Radio (extends Checkbox)\n *\n * selector: `n-radio`\n *\n * source: `src/forms/radio.component.ts`\n *\n * ```html\n *\t<cds-radio [(ngModel)]=\"radioState\">Radio</cds-radio>\n * ```\n *\n * Also see: [`RadioGroup`](#cds-radio-group)\n */\n@Component({\n\tselector: \"cds-radio, ibm-radio\",\n\ttemplate: `\n\t\t<input\n\t\t\t*ngIf=\"!skeleton\"\n\t\t\tclass=\"cds--radio-button\"\n\t\t\ttype=\"radio\"\n\t\t\t[checked]=\"checked\"\n\t\t\t[disabled]=\"disabled || disabledFromGroup\"\n\t\t\t[name]=\"name\"\n\t\t\t[id]=\"id\"\n\t\t\t[required]=\"required\"\n\t\t\t[value]=\"value\"\n\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t(change)=\"onChange($event)\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t<div *ngIf=\"skeleton\" class=\"cds--radio-button cds--skeleton\"></div>\n\t\t<label\n\t\t\tclass=\"cds--radio-button__label\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--skeleton': skeleton\n\t\t\t}\"\n\t\t\t[for]=\"id\"\n\t\t\tid=\"label-{{id}}\">\n\t\t\t<span class=\"cds--radio-button__appearance\"></span>\n\t\t\t<ng-content></ng-content>\n\t\t</label>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Radio,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Radio {\n\t/**\n\t * Used to dynamically create unique ids for the `Radio`.\n\t */\n\tstatic radioCount = 0;\n\n\t@Input() checked = false;\n\n\t@Input() name = \"\";\n\n\t@Input() disabled = false;\n\n\t@Input() labelPlacement: \"right\" | \"left\" =  \"right\";\n\n\t@Input() set ariaLabelledby(value: string) {\n\t\tthis._labelledby = value;\n\t}\n\n\tget ariaLabelledby() {\n\t\tif (this._labelledby) {\n\t\t\treturn this._labelledby;\n\t\t}\n\t\treturn `label-${this.id}`;\n\t}\n\n\t/**\n\t * Used to set the `aria-label` attribute on the input label.\n\t */\n\t@Input() ariaLabel = \"\";\n\n\t/**\n\t * Sets the HTML required attribute\n\t */\n\t@Input() required = false;\n\t/**\n\t * The value of the `Radio`.\n\t */\n\t@Input() value = \"\";\n\t/**\n\t * Set to `true` for a loading table.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * The id for the `Radio`.\n\t */\n\t@Input() id = `radio-${Radio.radioCount++}`;\n\t/**\n\t * emits when the state of the radio changes\n\t */\n\t@Output() change = new EventEmitter<RadioChange>();\n\n\t@HostBinding(\"class.cds--radio-button-wrapper\") hostClass = true;\n\n\t@HostBinding(\"class.cds--radio-button-wrapper--label-left\") get labelLeft() {\n\t\treturn this.labelPlacement === \"left\";\n\t}\n\n\t/**\n\t * Reflects whether or not the input is disabled at `RadioGroup` level.\n\t */\n\tdisabledFromGroup = false;\n\n\tprotected _labelledby = \"\";\n\n\t/**\n\t * Handler provided by the `RadioGroup` to bubble events up\n\t */\n\tradioChangeHandler = (event: RadioChange) => {};\n\n\t/**\n\t * Synchronizes with the `RadioGroup` in the event of a changed `Radio`.\n\t * Emits the changes of both the `RadioGroup` and `Radio`.\n\t */\n\tonChange(event: Event) {\n\t\tevent.stopPropagation();\n\t}\n\n\tonClick(event: Event) {\n\t\tthis.checked = (event.target as HTMLInputElement).checked;\n\t\tconst radioEvent = new RadioChange(this, this.value);\n\t\tthis.change.emit(radioEvent);\n\t\tthis.radioChangeHandler(radioEvent);\n\t}\n\n\t/**\n\t * Method called by `RadioGroup` with a callback function to bubble `RadioChange` events\n\t * @param fn callback that expects a `RadioChange` as an argument\n\t */\n\tregisterRadioChangeHandler(fn: (event: RadioChange) => void) {\n\t\tthis.radioChangeHandler = fn;\n\t}\n\n\tsetDisabledFromGroup(disabled: boolean) {\n\t\tthis.disabledFromGroup = disabled;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { RadioChange } from \"./radio-change.class\";\n\n/**\n * class: Radio (extends Checkbox)\n *\n * selector: `n-radio`\n *\n * source: `src/forms/radio.component.ts`\n *\n * ```html\n *\t<cds-radio [(ngModel)]=\"radioState\">Radio</cds-radio>\n * ```\n *\n * Also see: [`RadioGroup`](#cds-radio-group)\n */\n@Component({\n\tselector: \"cds-radio, ibm-radio\",\n\ttemplate: `\n\t\t<input\n\t\t\t*ngIf=\"!skeleton\"\n\t\t\tclass=\"cds--radio-button\"\n\t\t\ttype=\"radio\"\n\t\t\t[checked]=\"checked\"\n\t\t\t[disabled]=\"disabled || disabledFromGroup\"\n\t\t\t[name]=\"name\"\n\t\t\t[id]=\"id\"\n\t\t\t[required]=\"required\"\n\t\t\t[attr.value]=\"value\"\n\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t(change)=\"onChange($event)\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t<div *ngIf=\"skeleton\" class=\"cds--radio-button cds--skeleton\"></div>\n\t\t<label\n\t\t\tclass=\"cds--radio-button__label\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--skeleton': skeleton\n\t\t\t}\"\n\t\t\t[for]=\"id\"\n\t\t\tid=\"label-{{id}}\">\n\t\t\t<span class=\"cds--radio-button__appearance\"></span>\n\t\t\t<ng-content></ng-content>\n\t\t</label>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Radio,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Radio {\n\t/**\n\t * Used to dynamically create unique ids for the `Radio`.\n\t */\n\tstatic radioCount = 0;\n\n\t@Input() checked = false;\n\n\t@Input() name = \"\";\n\n\t@Input() disabled = false;\n\n\t@Input() labelPlacement: \"right\" | \"left\" =  \"right\";\n\n\t@Input() set ariaLabelledby(value: string) {\n\t\tthis._labelledby = value;\n\t}\n\n\tget ariaLabelledby() {\n\t\tif (this._labelledby) {\n\t\t\treturn this._labelledby;\n\t\t}\n\t\treturn `label-${this.id}`;\n\t}\n\n\t/**\n\t * Used to set the `aria-label` attribute on the input label.\n\t */\n\t@Input() ariaLabel: string;\n\n\t/**\n\t * Sets the HTML required attribute\n\t */\n\t@Input() required = false;\n\t/**\n\t * The value of the `Radio`.\n\t */\n\t@Input() value;\n\t/**\n\t * Set to `true` for a loading table.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * The id for the `Radio`.\n\t */\n\t@Input() id = `radio-${Radio.radioCount++}`;\n\t/**\n\t * emits when the state of the radio changes\n\t */\n\t@Output() change = new EventEmitter<RadioChange>();\n\n\t@HostBinding(\"class.cds--radio-button-wrapper\") hostClass = true;\n\n\t@HostBinding(\"class.cds--radio-button-wrapper--label-left\") get labelLeft() {\n\t\treturn this.labelPlacement === \"left\";\n\t}\n\n\t/**\n\t * Reflects whether or not the input is disabled at `RadioGroup` level.\n\t */\n\tdisabledFromGroup = false;\n\n\tprotected _labelledby = \"\";\n\n\t/**\n\t * Handler provided by the `RadioGroup` to bubble events up\n\t */\n\tradioChangeHandler = (event: RadioChange) => {};\n\n\t/**\n\t * Synchronizes with the `RadioGroup` in the event of a changed `Radio`.\n\t * Emits the changes of both the `RadioGroup` and `Radio`.\n\t */\n\tonChange(event: Event) {\n\t\tevent.stopPropagation();\n\t}\n\n\tonClick(event: Event) {\n\t\tthis.checked = (event.target as HTMLInputElement).checked;\n\t\tconst radioEvent = new RadioChange(this, this.value);\n\t\tthis.change.emit(radioEvent);\n\t\tthis.radioChangeHandler(radioEvent);\n\t}\n\n\t/**\n\t * Method called by `RadioGroup` with a callback function to bubble `RadioChange` events\n\t * @param fn callback that expects a `RadioChange` as an argument\n\t */\n\tregisterRadioChangeHandler(fn: (event: RadioChange) => void) {\n\t\tthis.radioChangeHandler = fn;\n\t}\n\n\tsetDisabledFromGroup(disabled: boolean) {\n\t\tthis.disabledFromGroup = disabled;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -41669,7 +41667,7 @@
         },
         {
             "name": "RadioGroup",
-            "id": "component-RadioGroup-a19039796bb3d83a44c8da02981e5727d2e4efd7ceeeedc28725a9d37ae2a75f9ef8687bd0f0370ace0f9e8a5e174cbc9028166c032683618365a947fa026480",
+            "id": "component-RadioGroup-eb7f6b447e4eb186c075006786b0a294153ab7d41ecb0c9b9e4a9ddf3610b8351cbcb82263f96c5550fdbb23264650fab8a998e623e482edaa152a7a4ab18c08",
             "file": "src/radio/radio-group.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -41683,7 +41681,7 @@
             "selector": "cds-radio-group, ibm-radio-group",
             "styleUrls": [],
             "styles": [],
-            "template": "<div\n\tclass=\"cds--radio-button-group\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t[ngClass]=\"{\n\t\t'cds--radio-button-group--vertical': orientation === 'vertical',\n\t\t'cds--radio-button-group--label-left': labelPlacement === 'left'\n\t}\">\n\t<ng-content></ng-content>\n</div>\n\t",
+            "template": "<fieldset\n\tclass=\"cds--radio-button-group\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t[ngClass]=\"{\n\t\t'cds--radio-button-group--vertical': orientation === 'vertical',\n\t\t'cds--radio-button-group--label-left': labelPlacement === 'left',\n\t\t'cds--radio-button-group--invalid' : !warn && invalid,\n\t\t'cds--radio-button-group--warning': !invalid && warn\n\t}\"\n\t[attr.data-invalid]=\"invalid ? true : null\">\n\t<legend *ngIf=\"legend\" class=\"cds--label\">\n\t\t<ng-template *ngIf=\"isTemplate(legend); else legendLabel;\" [ngTemplateOutlet]=\"legend\"></ng-template>\n\t\t<ng-template #legendLabel>{{legend}}</ng-template>\n\t</legend>\n\t<ng-content></ng-content>\n</fieldset>\n<div class=\"cds--radio-button__validation-msg\">\n\t<ng-container *ngIf=\"!warn && invalid\">\n\t\t<svg\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--radio-button__invalid-icon\">\n\t\t</svg>\n\t\t<div class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t</div>\n\t</ng-container>\n\t<ng-container *ngIf=\"!invalid && warn\">\n\t\t<svg\n\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\tclass=\"cds--radio-button__invalid-icon cds--radio-button__invalid-icon--warning\"\n\t\t\tsize=\"16\">\n\t\t</svg>\n\t\t<div class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t</div>\n\t</ng-container>\n</div>\n<div\n\t*ngIf=\"helperText && !invalid && !warn\"\n\tclass=\"cds--form__helper-text\"\n\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n</div>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -41694,7 +41692,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUsed to set the `aria-label` attribute on the radio group element.\n",
                     "description": "<p>Used to set the <code>aria-label</code> attribute on the radio group element.</p>\n",
-                    "line": 81,
+                    "line": 213,
                     "type": "string",
                     "decorators": []
                 },
@@ -41704,7 +41702,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUsed to set the `aria-labelledby` attribute on the radio group element.\n",
                     "description": "<p>Used to set the <code>aria-labelledby</code> attribute on the radio group element.</p>\n",
-                    "line": 86,
+                    "line": 218,
                     "type": "string",
                     "decorators": []
                 },
@@ -41714,26 +41712,65 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to true to disable the whole radio group\n",
                     "description": "<p>Set to true to disable the whole radio group</p>\n",
-                    "line": 164,
+                    "line": 173,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "helperText",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nSets the optional helper text.\n",
+                    "description": "<p>Sets the optional helper text.</p>\n",
+                    "line": 223,
+                    "type": "string | TemplateRef<any>",
+                    "decorators": []
+                },
+                {
+                    "name": "invalid",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nSet to `true` to show the invalid state.\n",
+                    "description": "<p>Set to <code>true</code> to show the invalid state.</p>\n",
+                    "line": 228,
                     "type": "boolean",
                     "decorators": []
                 },
+                {
+                    "name": "invalidText",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nValue displayed if combobox is in an invalid state.\n",
+                    "description": "<p>Value displayed if combobox is in an invalid state.</p>\n",
+                    "line": 233,
+                    "type": "string | TemplateRef<any>",
+                    "decorators": []
+                },
                 {
                     "name": "labelPlacement",
                     "defaultValue": "\"right\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 75,
+                    "line": 206,
                     "type": "\"right\" | \"left\"",
                     "decorators": []
                 },
+                {
+                    "name": "legend",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 208,
+                    "type": "string | TemplateRef<any>",
+                    "decorators": []
+                },
                 {
                     "name": "name",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReplaces the name associated with the `RadioGroup` with the provided parameter.\n",
                     "description": "<p>Replaces the name associated with the <code>RadioGroup</code> with the provided parameter.</p>\n",
-                    "line": 149,
+                    "line": 158,
                     "type": "string",
                     "decorators": []
                 },
@@ -41742,7 +41779,7 @@
                     "defaultValue": "\"horizontal\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 73,
+                    "line": 204,
                     "type": "\"horizontal\" | \"vertical\"",
                     "decorators": []
                 },
@@ -41752,7 +41789,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the passed in `Radio` item as the selected input within the `RadioGroup`.\n",
                     "description": "<p>Sets the passed in <code>Radio</code> item as the selected input within the <code>RadioGroup</code>.</p>\n",
-                    "line": 103,
+                    "line": 112,
                     "type": "Radio | null",
                     "decorators": []
                 },
@@ -41762,7 +41799,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns the skeleton value in the `RadioGroup` if there is one.\n",
                     "description": "<p>Returns the skeleton value in the <code>RadioGroup</code> if there is one.</p>\n",
-                    "line": 179,
+                    "line": 188,
                     "type": "any",
                     "decorators": []
                 },
@@ -41772,9 +41809,30 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the value/state of the selected `Radio` within the `RadioGroup` to the passed in value.\n",
                     "description": "<p>Sets the value/state of the selected <code>Radio</code> within the <code>RadioGroup</code> to the passed in value.</p>\n",
-                    "line": 129,
+                    "line": 138,
                     "type": "any",
                     "decorators": []
+                },
+                {
+                    "name": "warn",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nSet to `true` to show a warning (contents set by warnText)\n",
+                    "description": "<p>Set to <code>true</code> to show a warning (contents set by warnText)</p>\n",
+                    "line": 238,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "warnText",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nSets the warning text\n",
+                    "description": "<p>Sets the warning text</p>\n",
+                    "line": 243,
+                    "type": "string | TemplateRef<any>",
+                    "decorators": []
                 }
             ],
             "outputsClass": [
@@ -41785,7 +41843,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits event notifying other classes of a change using a `RadioChange` class.\n",
                     "description": "<p>Emits event notifying other classes of a change using a <code>RadioChange</code> class.</p>\n",
-                    "line": 91,
+                    "line": 248,
                     "type": "EventEmitter<RadioChange>"
                 }
             ],
@@ -41798,7 +41856,7 @@
                     "type": "function",
                     "optional": false,
                     "description": "<p>Needed to properly implement ControlValueAccessor.</p>\n",
-                    "line": 336,
+                    "line": 401,
                     "rawdescription": "\n\nNeeded to properly implement ControlValueAccessor.\n"
                 },
                 {
@@ -41809,7 +41867,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Method set in registerOnChange to propagate changes back to the form.</p>\n",
-                    "line": 341,
+                    "line": 406,
                     "rawdescription": "\n\nMethod set in registerOnChange to propagate changes back to the form.\n"
                 },
                 {
@@ -41820,7 +41878,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Binds &#39;cds--form-item&#39; value to the class for <code>RadioGroup</code>.</p>\n",
-                    "line": 194,
+                    "line": 259,
                     "rawdescription": "\n\nBinds 'cds--form-item' value to the class for `RadioGroup`.\n",
                     "decorators": [
                         {
@@ -41840,7 +41898,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>Used for creating the <code>RadioGroup</code> &#39;name&#39; property dynamically.</p>\n",
-                    "line": 71,
+                    "line": 202,
                     "rawdescription": "\n\nUsed for creating the `RadioGroup` 'name' property dynamically.\n",
                     "modifierKind": [
                         124
@@ -41853,7 +41911,7 @@
                     "type": "QueryList<Radio>",
                     "optional": false,
                     "description": "<p>The <code>Radio</code> input items in the <code>RadioGroup</code>.</p>\n",
-                    "line": 97,
+                    "line": 254,
                     "rawdescription": "\n\nThe `Radio` input items in the `RadioGroup`.\n",
                     "decorators": [
                         {
@@ -41873,7 +41931,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 224,
+                    "line": 289,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUpdates the selected `Radio` to be checked (selected).\n",
@@ -41892,7 +41950,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 265,
+                    "line": 330,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCreates a class of `RadioChange` to emit the change in the `RadioGroup`.\n",
@@ -41915,7 +41973,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 329,
+                    "line": 394,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -41928,6 +41986,37 @@
                         167
                     ]
                 },
+                {
+                    "name": "isTemplate",
+                    "args": [
+                        {
+                            "name": "value",
+                            "type": "",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "boolean",
+                    "typeParameters": [],
+                    "line": 408,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "modifierKind": [
+                        123
+                    ],
+                    "jsdoctags": [
+                        {
+                            "name": "value",
+                            "type": "",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
+                },
                 {
                     "name": "registerOnChange",
                     "args": [
@@ -41941,7 +42030,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 316,
+                    "line": 381,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUsed to set method to propagate changes back to the form.\n",
@@ -41974,7 +42063,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 324,
+                    "line": 389,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRegisters a callback to be triggered when the control has been touched.\n",
@@ -41985,8 +42074,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 7354,
-                                "end": 7356,
+                                "pos": 9430,
+                                "end": 9432,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -41997,8 +42086,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 7348,
-                                "end": 7353,
+                                "pos": 9424,
+                                "end": 9429,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -42022,7 +42111,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 258,
+                    "line": 323,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\n`ControlValueAccessor` method to programmatically disable the `RadioGroup`.\n\nex: `this.formGroup.get(\"myRadioGroup\").disable();`\n\n",
@@ -42030,8 +42119,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 5985,
-                                "end": 5995,
+                                "pos": 8061,
+                                "end": 8071,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -42042,8 +42131,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 5979,
-                                "end": 5984,
+                                "pos": 8055,
+                                "end": 8060,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -42060,7 +42149,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 274,
+                    "line": 339,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSynchronizes radio properties.\n",
@@ -42072,7 +42161,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 233,
+                    "line": 298,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUse the value of the `RadioGroup` to update the selected radio to the right state (selected state).\n",
@@ -42091,7 +42180,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 291,
+                    "line": 356,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUpdates the value of the `RadioGroup` using the provided parameter.\n",
@@ -42119,7 +42208,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nBinds 'cds--form-item' value to the class for `RadioGroup`.\n",
                     "description": "<p>Binds &#39;cds--form-item&#39; value to the class for <code>RadioGroup</code>.</p>\n",
-                    "line": 194,
+                    "line": 259,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -42131,7 +42220,7 @@
                     "argsDecorator": [],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 329
+                    "line": 394
                 }
             ],
             "standalone": false,
@@ -42139,7 +42228,7 @@
             "description": "<p><a href=\"../../?path=/story/components-radio--basic\">See demo</a></p>\n<p>class: RadioGroup</p>\n<p>selector: <code>cds-radio-group</code></p>\n<p>source: <code>src/forms/radio.component.ts</code></p>\n<p>Ex:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-radio-group [(ngModel)]=&quot;radio&quot;&gt;\n    &lt;cds-radio *ngFor=&quot;let one of manyRadios&quot; [value]=&quot;one&quot;&gt;\n        Radio {{one}}\n    &lt;/cds-radio&gt;\n&lt;/cds-radio-group&gt;\n\nRadio selected: {{radio}}</code></pre></div><div><pre class=\"line-numbers\"><code class=\"language-ts\">    const manyRadios = [&quot;one&quot;, &quot;two&quot;, &quot;three&quot;, &quot;four&quot;, &quot;five&quot;, &quot;six&quot;];</code></pre></div><p>Also see: <a href=\"#cds-radio\">Radio</a></p>\n",
             "rawdescription": "\n\n[See demo](../../?path=/story/components-radio--basic)\n\nclass: RadioGroup\n\nselector: `cds-radio-group`\n\nsource: `src/forms/radio.component.ts`\n\nEx:\n\n```html\n<cds-radio-group [(ngModel)]=\"radio\">\n\t<cds-radio *ngFor=\"let one of manyRadios\" [value]=\"one\">\n\t\tRadio {{one}}\n\t</cds-radio>\n</cds-radio-group>\n\nRadio selected: {{radio}}\n```\n\n```ts\n\tconst manyRadios = [\"one\", \"two\", \"three\", \"four\", \"five\", \"six\"];\n```\n\nAlso see: [Radio](#cds-radio)\n",
             "type": "component",
-            "sourceCode": "import {\n\tAfterContentInit,\n\tContentChildren,\n\tComponent,\n\tEventEmitter,\n\tforwardRef,\n\tInput,\n\tOutput,\n\tQueryList,\n\tHostBinding,\n\tAfterViewInit,\n\tHostListener\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\nimport { Radio } from \"./radio.component\";\nimport { RadioChange } from \"./radio-change.class\";\n\n/**\n * [See demo](../../?path=/story/components-radio--basic)\n *\n * class: RadioGroup\n *\n * selector: `cds-radio-group`\n *\n * source: `src/forms/radio.component.ts`\n *\n * Ex:\n *\n * ```html\n * <cds-radio-group [(ngModel)]=\"radio\">\n * \t<cds-radio *ngFor=\"let one of manyRadios\" [value]=\"one\">\n *\t\tRadio {{one}}\n * \t</cds-radio>\n * </cds-radio-group>\n *\n * Radio selected: {{radio}}\n * ```\n *\n * ```ts\n *\tconst manyRadios = [\"one\", \"two\", \"three\", \"four\", \"five\", \"six\"];\n * ```\n *\n * Also see: [Radio](#cds-radio)\n */\n@Component({\n\tselector: \"cds-radio-group, ibm-radio-group\",\n\ttemplate: `\n\t\t<div\n\t\t\tclass=\"cds--radio-button-group\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--radio-button-group--vertical': orientation === 'vertical',\n\t\t\t\t'cds--radio-button-group--label-left': labelPlacement === 'left'\n\t\t\t}\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: RadioGroup,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class RadioGroup implements AfterContentInit, AfterViewInit, ControlValueAccessor {\n\t/**\n\t * Used for creating the `RadioGroup` 'name' property dynamically.\n\t */\n\tstatic radioGroupCount = 0;\n\n\t@Input() orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\n\n\t@Input() labelPlacement: \"right\" | \"left\" =  \"right\";\n\n\t/**\n\t * Used to set the `aria-label` attribute on the radio group element.\n\t */\n\t// tslint:disable-next-line:no-input-rename\n\t@Input() ariaLabel: string;\n\t/**\n\t * Used to set the `aria-labelledby` attribute on the radio group element.\n\t */\n\t// tslint:disable-next-line:no-input-rename\n\t@Input() ariaLabelledby: string;\n\n\t/**\n\t * Emits event notifying other classes of a change using a `RadioChange` class.\n\t */\n\t@Output() change: EventEmitter<RadioChange> = new EventEmitter<RadioChange>();\n\n\t/**\n\t * The `Radio` input items in the `RadioGroup`.\n\t */\n\t// tslint:disable-next-line:no-forward-ref\n\t@ContentChildren(forwardRef(() => Radio)) radios: QueryList<Radio>;\n\n\t/**\n\t * Sets the passed in `Radio` item as the selected input within the `RadioGroup`.\n\t */\n\t@Input()\n\tset selected(selected: Radio | null) {\n\t\tconst alreadySelected = (this._selected && this._selected.value) === (selected && selected.value);\n\t\tif (alreadySelected) {\n\t\t\t// no need to redo\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._selected) {\n\t\t\tthis._selected.checked = false;\n\t\t}\n\t\tthis._selected = selected;\n\t\tthis.value = selected ? selected.value : null;\n\t\tthis.checkSelectedRadio();\n\t}\n\n\t/**\n\t * Returns the `Radio` that is selected within the `RadioGroup`.\n\t */\n\tget selected() {\n\t\treturn this._selected;\n\t}\n\n\t/**\n\t * Sets the value/state of the selected `Radio` within the `RadioGroup` to the passed in value.\n\t */\n\t@Input()\n\tset value(newValue: any) {\n\t\tif (this._value !== newValue) {\n\t\t\tthis._value = newValue;\n\n\t\t\tthis.updateSelectedRadioFromValue();\n\t\t\tthis.checkSelectedRadio();\n\t\t}\n\t}\n\n\t/**\n\t * Returns the value/state of the selected `Radio` within the `RadioGroup`.\n\t */\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Replaces the name associated with the `RadioGroup` with the provided parameter.\n\t */\n\t@Input()\n\tset name(name: string) {\n\t\tthis._name = name;\n\t\tthis.updateRadios();\n\t}\n\t/**\n\t * Returns the associated name of the `RadioGroup`.\n\t */\n\tget name() {\n\t\treturn this._name;\n\t}\n\n\t/**\n\t * Set to true to disable the whole radio group\n\t */\n\t@Input()\n\tset disabled(disabled: boolean) {\n\t\tthis._disabled = disabled;\n\t\tthis.updateRadios();\n\t}\n\t/**\n\t * Returns the disabled value for the `RadioGroup`.\n\t */\n\tget disabled(): boolean {\n\t\treturn this._disabled;\n\t}\n\n\t/**\n\t * Returns the skeleton value in the `RadioGroup` if there is one.\n\t */\n\t@Input()\n\tget skeleton(): any {\n\t\treturn this._skeleton;\n\t}\n\n\t/**\n\t * Sets the skeleton value for all `Radio` to the skeleton value of `RadioGroup`.\n\t */\n\tset skeleton(value: any) {\n\t\tthis._skeleton = value;\n\t\tthis.updateChildren();\n\t}\n\n\t/**\n\t * Binds 'cds--form-item' value to the class for `RadioGroup`.\n\t */\n\t@HostBinding(\"class.cds--form-item\") radioButtonGroupClass = true;\n\n\t/**\n\t * To track whether the `RadioGroup` has been initialized.\n\t */\n\tprotected isInitialized = false;\n\t/**\n\t * Reflects whether or not the input is disabled and cannot be selected.\n\t */\n\tprotected _disabled = false;\n\t/**\n\t * Reflects whether or not the dropdown is loading.\n\t */\n\tprotected _skeleton = false;\n\t/**\n\t * The value of the selected option within the `RadioGroup`.\n\t */\n\tprotected _value: any = null;\n\t/**\n\t * The `Radio` within the `RadioGroup` that is selected.\n\t */\n\tprotected _selected: Radio = null;\n\t/**\n\t * The name attribute associated with the `RadioGroup`.\n\t */\n\tprotected _name = `radio-group-${RadioGroup.radioGroupCount++}`;\n\n\t/**\n\t * Updates the selected `Radio` to be checked (selected).\n\t */\n\tcheckSelectedRadio() {\n\t\tif (this.selected && !this._selected.checked) {\n\t\t\tthis.selected.checked = true;\n\t\t}\n\t}\n\n\t/**\n\t * Use the value of the `RadioGroup` to update the selected radio to the right state (selected state).\n\t */\n\tupdateSelectedRadioFromValue() {\n\t\tlet alreadySelected = this._selected != null && this._selected.value === this._value;\n\t\tif (this.radios && !alreadySelected) {\n\t\t\tif (this.selected && this.value) {\n\t\t\t\tthis.selected.checked = false;\n\t\t\t}\n\t\t\tthis._selected = null;\n\t\t\tthis.radios.forEach(radio => {\n\t\t\t\tif (radio.checked || radio.value === this._value) {\n\t\t\t\t\tthis._selected = radio;\n\t\t\t\t}\n\t\t\t});\n\t\t\tif (this.selected && !this.value) {\n\t\t\t\tthis._value = this.selected.value;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the `RadioGroup`.\n\t *\n\t * ex: `this.formGroup.get(\"myRadioGroup\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the inputs\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Creates a class of `RadioChange` to emit the change in the `RadioGroup`.\n\t */\n\temitChangeEvent(event: RadioChange) {\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(event.value);\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Synchronizes radio properties.\n\t */\n\tupdateRadios() {\n\t\tif (this.radios) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.radios.forEach(radio => {\n\t\t\t\t\tradio.name = this.name;\n\t\t\t\t\tradio.setDisabledFromGroup(this.disabled);\n\t\t\t\t\tif (this.labelPlacement === \"left\") {\n\t\t\t\t\t\tradio.labelPlacement = \"left\";\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Updates the value of the `RadioGroup` using the provided parameter.\n\t */\n\twriteValue(value: any) {\n\t\tthis.value = value;\n\t\tsetTimeout(() => {\n\t\t\tthis.updateSelectedRadioFromValue();\n\t\t\tthis.checkSelectedRadio();\n\t\t});\n\t}\n\n\tngAfterContentInit() {\n\t\tthis.radios.changes.subscribe(() => {\n\t\t\tthis.updateRadios();\n\t\t\tthis.updateRadioChangeHandler();\n\t\t});\n\n\t\tthis.updateChildren();\n\t\tthis.updateRadioChangeHandler();\n\t}\n\n\tngAfterViewInit() {\n\t\tthis.updateRadios();\n\t}\n\n\t/**\n\t * Used to set method to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the checkbox is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Needed to properly implement ControlValueAccessor.\n\t */\n\tonTouched: () => any = () => {};\n\n\t/**\n\t * Method set in registerOnChange to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => {};\n\n\tprotected updateChildren() {\n\t\tif (this.radios) {\n\t\t\tthis.radios.forEach(child => child.skeleton = this.skeleton);\n\t\t}\n\t}\n\n\tprotected updateRadioChangeHandler() {\n\t\tthis.radios.forEach(radio => {\n\t\t\tradio.registerRadioChangeHandler((event: RadioChange) => {\n\t\t\t\tif ((this.selected && this.selected.value) === event.value) {\n\t\t\t\t\t// no need to redo\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\t// deselect previous radio\n\t\t\t\tif (this.selected) {\n\t\t\t\t\tthis.selected.checked = false;\n\t\t\t\t}\n\t\t\t\t// update selected and value from the event\n\t\t\t\tthis._selected = event.source;\n\t\t\t\tthis._value = event.value;\n\t\t\t\t// bubble the event\n\t\t\t\tthis.emitChangeEvent(event);\n\t\t\t});\n\t\t});\n\t}\n}\n",
+            "sourceCode": "import {\n\tAfterContentInit,\n\tContentChildren,\n\tComponent,\n\tEventEmitter,\n\tforwardRef,\n\tInput,\n\tOutput,\n\tQueryList,\n\tHostBinding,\n\tAfterViewInit,\n\tHostListener,\n\tTemplateRef\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\nimport { Radio } from \"./radio.component\";\nimport { RadioChange } from \"./radio-change.class\";\n\n/**\n * [See demo](../../?path=/story/components-radio--basic)\n *\n * class: RadioGroup\n *\n * selector: `cds-radio-group`\n *\n * source: `src/forms/radio.component.ts`\n *\n * Ex:\n *\n * ```html\n * <cds-radio-group [(ngModel)]=\"radio\">\n * \t<cds-radio *ngFor=\"let one of manyRadios\" [value]=\"one\">\n *\t\tRadio {{one}}\n * \t</cds-radio>\n * </cds-radio-group>\n *\n * Radio selected: {{radio}}\n * ```\n *\n * ```ts\n *\tconst manyRadios = [\"one\", \"two\", \"three\", \"four\", \"five\", \"six\"];\n * ```\n *\n * Also see: [Radio](#cds-radio)\n */\n@Component({\n\tselector: \"cds-radio-group, ibm-radio-group\",\n\ttemplate: `\n\t\t<fieldset\n\t\t\tclass=\"cds--radio-button-group\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--radio-button-group--vertical': orientation === 'vertical',\n\t\t\t\t'cds--radio-button-group--label-left': labelPlacement === 'left',\n\t\t\t\t'cds--radio-button-group--invalid' : !warn && invalid,\n\t\t\t\t'cds--radio-button-group--warning': !invalid && warn\n\t\t\t}\"\n\t\t\t[attr.data-invalid]=\"invalid ? true : null\">\n\t\t\t<legend *ngIf=\"legend\" class=\"cds--label\">\n\t\t\t\t<ng-template *ngIf=\"isTemplate(legend); else legendLabel;\" [ngTemplateOutlet]=\"legend\"></ng-template>\n\t\t\t\t<ng-template #legendLabel>{{legend}}</ng-template>\n\t\t\t</legend>\n\t\t\t<ng-content></ng-content>\n\t\t</fieldset>\n\t\t<div class=\"cds--radio-button__validation-msg\">\n\t\t\t<ng-container *ngIf=\"!warn && invalid\">\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--radio-button__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<div class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngIf=\"!invalid && warn\">\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tclass=\"cds--radio-button__invalid-icon cds--radio-button__invalid-icon--warning\"\n\t\t\t\t\tsize=\"16\">\n\t\t\t\t</svg>\n\t\t\t\t<div class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t</div>\n\t\t<div\n\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: RadioGroup,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class RadioGroup implements AfterContentInit, AfterViewInit, ControlValueAccessor {\n\n\t/**\n\t * Sets the passed in `Radio` item as the selected input within the `RadioGroup`.\n\t */\n\t@Input()\n\tset selected(selected: Radio | null) {\n\t\tconst alreadySelected = (this._selected && this._selected.value) === (selected && selected.value);\n\t\tif (alreadySelected) {\n\t\t\t// no need to redo\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._selected) {\n\t\t\tthis._selected.checked = false;\n\t\t}\n\t\tthis._selected = selected;\n\t\tthis.value = selected ? selected.value : null;\n\t\tthis.checkSelectedRadio();\n\t}\n\n\t/**\n\t * Returns the `Radio` that is selected within the `RadioGroup`.\n\t */\n\tget selected() {\n\t\treturn this._selected;\n\t}\n\n\t/**\n\t * Sets the value/state of the selected `Radio` within the `RadioGroup` to the passed in value.\n\t */\n\t@Input()\n\tset value(newValue: any) {\n\t\tif (this._value !== newValue) {\n\t\t\tthis._value = newValue;\n\n\t\t\tthis.updateSelectedRadioFromValue();\n\t\t\tthis.checkSelectedRadio();\n\t\t}\n\t}\n\n\t/**\n\t * Returns the value/state of the selected `Radio` within the `RadioGroup`.\n\t */\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Replaces the name associated with the `RadioGroup` with the provided parameter.\n\t */\n\t@Input()\n\tset name(name: string) {\n\t\tthis._name = name;\n\t\tthis.updateRadios();\n\t}\n\t/**\n\t * Returns the associated name of the `RadioGroup`.\n\t */\n\tget name() {\n\t\treturn this._name;\n\t}\n\n\t/**\n\t * Set to true to disable the whole radio group\n\t */\n\t@Input()\n\tset disabled(disabled: boolean) {\n\t\tthis._disabled = disabled;\n\t\tthis.updateRadios();\n\t}\n\t/**\n\t * Returns the disabled value for the `RadioGroup`.\n\t */\n\tget disabled(): boolean {\n\t\treturn this._disabled;\n\t}\n\n\t/**\n\t * Returns the skeleton value in the `RadioGroup` if there is one.\n\t */\n\t@Input()\n\tget skeleton(): any {\n\t\treturn this._skeleton;\n\t}\n\n\t/**\n\t * Sets the skeleton value for all `Radio` to the skeleton value of `RadioGroup`.\n\t */\n\tset skeleton(value: any) {\n\t\tthis._skeleton = value;\n\t\tthis.updateChildren();\n\t}\n\t/**\n\t * Used for creating the `RadioGroup` 'name' property dynamically.\n\t */\n\tstatic radioGroupCount = 0;\n\n\t@Input() orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\n\n\t@Input() labelPlacement: \"right\" | \"left\" =  \"right\";\n\n\t@Input() legend: string | TemplateRef<any>;\n\n\t/**\n\t * Used to set the `aria-label` attribute on the radio group element.\n\t */\n\t@Input() ariaLabel: string;\n\n\t/**\n\t * Used to set the `aria-labelledby` attribute on the radio group element.\n\t */\n\t@Input() ariaLabelledby: string;\n\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\n\t/**\n\t * Set to `true` to show the invalid state.\n\t */\n\t@Input() invalid = false;\n\n\t/**\n\t * Value displayed if combobox is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\n\t/**\n\t* Set to `true` to show a warning (contents set by warnText)\n\t*/\n\t@Input() warn = false;\n\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\n\t/**\n\t * Emits event notifying other classes of a change using a `RadioChange` class.\n\t */\n\t@Output() change: EventEmitter<RadioChange> = new EventEmitter<RadioChange>();\n\n\t/**\n\t * The `Radio` input items in the `RadioGroup`.\n\t */\n\t// tslint:disable-next-line:no-forward-ref\n\t@ContentChildren(forwardRef(() => Radio)) radios: QueryList<Radio>;\n\n\t/**\n\t * Binds 'cds--form-item' value to the class for `RadioGroup`.\n\t */\n\t@HostBinding(\"class.cds--form-item\") radioButtonGroupClass = true;\n\n\t/**\n\t * To track whether the `RadioGroup` has been initialized.\n\t */\n\tprotected isInitialized = false;\n\t/**\n\t * Reflects whether or not the input is disabled and cannot be selected.\n\t */\n\tprotected _disabled = false;\n\t/**\n\t * Reflects whether or not the dropdown is loading.\n\t */\n\tprotected _skeleton = false;\n\t/**\n\t * The value of the selected option within the `RadioGroup`.\n\t */\n\tprotected _value: any = null;\n\t/**\n\t * The `Radio` within the `RadioGroup` that is selected.\n\t */\n\tprotected _selected: Radio = null;\n\t/**\n\t * The name attribute associated with the `RadioGroup`.\n\t */\n\tprotected _name = `radio-group-${RadioGroup.radioGroupCount++}`;\n\n\t/**\n\t * Updates the selected `Radio` to be checked (selected).\n\t */\n\tcheckSelectedRadio() {\n\t\tif (this.selected && !this._selected.checked) {\n\t\t\tthis.selected.checked = true;\n\t\t}\n\t}\n\n\t/**\n\t * Use the value of the `RadioGroup` to update the selected radio to the right state (selected state).\n\t */\n\tupdateSelectedRadioFromValue() {\n\t\tlet alreadySelected = this._selected != null && this._selected.value === this._value;\n\t\tif (this.radios && !alreadySelected) {\n\t\t\tif (this.selected && this.value) {\n\t\t\t\tthis.selected.checked = false;\n\t\t\t}\n\t\t\tthis._selected = null;\n\t\t\tthis.radios.forEach(radio => {\n\t\t\t\tif (radio.checked || radio.value === this._value) {\n\t\t\t\t\tthis._selected = radio;\n\t\t\t\t}\n\t\t\t});\n\t\t\tif (this.selected && !this.value) {\n\t\t\t\tthis._value = this.selected.value;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the `RadioGroup`.\n\t *\n\t * ex: `this.formGroup.get(\"myRadioGroup\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the inputs\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Creates a class of `RadioChange` to emit the change in the `RadioGroup`.\n\t */\n\temitChangeEvent(event: RadioChange) {\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(event.value);\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Synchronizes radio properties.\n\t */\n\tupdateRadios() {\n\t\tif (this.radios) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.radios.forEach(radio => {\n\t\t\t\t\tradio.name = this.name;\n\t\t\t\t\tradio.setDisabledFromGroup(this.disabled);\n\t\t\t\t\tif (this.labelPlacement === \"left\") {\n\t\t\t\t\t\tradio.labelPlacement = \"left\";\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Updates the value of the `RadioGroup` using the provided parameter.\n\t */\n\twriteValue(value: any) {\n\t\tthis.value = value;\n\t\tsetTimeout(() => {\n\t\t\tthis.updateSelectedRadioFromValue();\n\t\t\tthis.checkSelectedRadio();\n\t\t});\n\t}\n\n\tngAfterContentInit() {\n\t\tthis.radios.changes.subscribe(() => {\n\t\t\tthis.updateRadios();\n\t\t\tthis.updateRadioChangeHandler();\n\t\t});\n\n\t\tthis.updateChildren();\n\t\tthis.updateRadioChangeHandler();\n\t}\n\n\tngAfterViewInit() {\n\t\tthis.updateRadios();\n\t}\n\n\t/**\n\t * Used to set method to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the checkbox is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Needed to properly implement ControlValueAccessor.\n\t */\n\tonTouched: () => any = () => {};\n\n\t/**\n\t * Method set in registerOnChange to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => {};\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tprotected updateChildren() {\n\t\tif (this.radios) {\n\t\t\tthis.radios.forEach(child => child.skeleton = this.skeleton);\n\t\t}\n\t}\n\n\tprotected updateRadioChangeHandler() {\n\t\tthis.radios.forEach(radio => {\n\t\t\tradio.registerRadioChangeHandler((event: RadioChange) => {\n\t\t\t\tif ((this.selected && this.selected.value) === event.value) {\n\t\t\t\t\t// no need to redo\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\t// deselect previous radio\n\t\t\t\tif (this.selected) {\n\t\t\t\t\tthis.selected.checked = false;\n\t\t\t\t}\n\t\t\t\t// update selected and value from the event\n\t\t\t\tthis._selected = event.source;\n\t\t\t\tthis._value = event.value;\n\t\t\t\t// bubble the event\n\t\t\t\tthis.emitChangeEvent(event);\n\t\t\t});\n\t\t});\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -42165,7 +42254,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 103,
+                        "line": 112,
                         "rawdescription": "\n\nSets the passed in `Radio` item as the selected input within the `RadioGroup`.\n",
                         "description": "<p>Sets the passed in <code>Radio</code> item as the selected input within the <code>RadioGroup</code>.</p>\n",
                         "jsdoctags": [
@@ -42184,7 +42273,7 @@
                         "name": "selected",
                         "type": "",
                         "returnType": "",
-                        "line": 121,
+                        "line": 130,
                         "rawdescription": "\n\nReturns the `Radio` that is selected within the `RadioGroup`.\n",
                         "description": "<p>Returns the <code>Radio</code> that is selected within the <code>RadioGroup</code>.</p>\n"
                     }
@@ -42205,7 +42294,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 129,
+                        "line": 138,
                         "rawdescription": "\n\nSets the value/state of the selected `Radio` within the `RadioGroup` to the passed in value.\n",
                         "description": "<p>Sets the value/state of the selected <code>Radio</code> within the <code>RadioGroup</code> to the passed in value.</p>\n",
                         "jsdoctags": [
@@ -42224,7 +42313,7 @@
                         "name": "value",
                         "type": "",
                         "returnType": "",
-                        "line": 141,
+                        "line": 150,
                         "rawdescription": "\n\nReturns the value/state of the selected `Radio` within the `RadioGroup`.\n",
                         "description": "<p>Returns the value/state of the selected <code>Radio</code> within the <code>RadioGroup</code>.</p>\n"
                     }
@@ -42245,7 +42334,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 149,
+                        "line": 158,
                         "rawdescription": "\n\nReplaces the name associated with the `RadioGroup` with the provided parameter.\n",
                         "description": "<p>Replaces the name associated with the <code>RadioGroup</code> with the provided parameter.</p>\n",
                         "jsdoctags": [
@@ -42264,7 +42353,7 @@
                         "name": "name",
                         "type": "",
                         "returnType": "",
-                        "line": 156,
+                        "line": 165,
                         "rawdescription": "\n\nReturns the associated name of the `RadioGroup`.\n",
                         "description": "<p>Returns the associated name of the <code>RadioGroup</code>.</p>\n"
                     }
@@ -42285,7 +42374,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 164,
+                        "line": 173,
                         "rawdescription": "\n\nSet to true to disable the whole radio group\n",
                         "description": "<p>Set to true to disable the whole radio group</p>\n",
                         "jsdoctags": [
@@ -42304,7 +42393,7 @@
                         "name": "disabled",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 171,
+                        "line": 180,
                         "rawdescription": "\n\nReturns the disabled value for the `RadioGroup`.\n",
                         "description": "<p>Returns the disabled value for the <code>RadioGroup</code>.</p>\n"
                     }
@@ -42325,7 +42414,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 186,
+                        "line": 195,
                         "rawdescription": "\n\nSets the skeleton value for all `Radio` to the skeleton value of `RadioGroup`.\n",
                         "description": "<p>Sets the skeleton value for all <code>Radio</code> to the skeleton value of <code>RadioGroup</code>.</p>\n",
                         "jsdoctags": [
@@ -42344,7 +42433,7 @@
                         "name": "skeleton",
                         "type": "any",
                         "returnType": "any",
-                        "line": 179,
+                        "line": 188,
                         "rawdescription": "\n\nReturns the skeleton value in the `RadioGroup` if there is one.\n",
                         "description": "<p>Returns the skeleton value in the <code>RadioGroup</code> if there is one.</p>\n"
                     }
@@ -65295,13 +65384,13 @@
         },
         {
             "name": "RadioModule",
-            "id": "module-RadioModule-916932a999af2511bea978faacd079717aba4e7e14075ba1668f9c4b8aebb810c4e1f6d4baf5438c9c15396e8f78bd89271774f1f6c69fcc3b50e101a02374b3",
+            "id": "module-RadioModule-5b60c2abc6e47e3a77afa997f18bc6a5e5dedc04b6f929aa6766de1713b8323047ffb93c52475e0fb5f63965deed1af4eaace48e8ad1088cc2cbf39f13cba1e7",
             "description": "",
             "deprecationMessage": "",
             "deprecated": false,
             "file": "src/radio/radio.module.ts",
             "methods": [],
-            "sourceCode": "// modules\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule } from \"@angular/forms\";\nimport { CommonModule } from \"@angular/common\";\n\n// imports\nimport { Radio } from \"./radio.component\";\nimport { RadioGroup } from \"./radio-group.component\";\n\n@NgModule({\n\tdeclarations: [\n\t\tRadio,\n\t\tRadioGroup\n\t],\n\texports: [\n\t\tRadio,\n\t\tRadioGroup\n\t],\n\timports: [\n\t\tCommonModule,\n\t\tFormsModule\n\t]\n})\nexport class RadioModule { }\n",
+            "sourceCode": "// modules\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule } from \"@angular/forms\";\nimport { CommonModule } from \"@angular/common\";\n\n// imports\nimport { Radio } from \"./radio.component\";\nimport { RadioGroup } from \"./radio-group.component\";\nimport { IconModule } from \"carbon-components-angular/icon\";\n\n@NgModule({\n\tdeclarations: [\n\t\tRadio,\n\t\tRadioGroup\n\t],\n\texports: [\n\t\tRadio,\n\t\tRadioGroup\n\t],\n\timports: [\n\t\tCommonModule,\n\t\tFormsModule,\n\t\tIconModule\n\t]\n})\nexport class RadioModule { }\n",
             "children": [
                 {
                     "type": "providers",
@@ -65320,7 +65409,11 @@
                 },
                 {
                     "type": "imports",
-                    "elements": []
+                    "elements": [
+                        {
+                            "name": "IconModule"
+                        }
+                    ]
                 },
                 {
                     "type": "exports",
@@ -69486,7 +69579,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "Story<Radio>",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t<fieldset class=\"cds--fieldset\">\n\t\t<legend class=\"cds--label\">{{label}}</legend>\n\t\t<cds-radio-group\n\t\t\t[disabled]=\"disabled\"\n\t\t\taria-label=\"radiogroup\"\n\t\t\t[orientation]=\"orientation\"\n\t\t\t[labelPlacement]=\"labelPlacement\"\n\t\t\t(change)=\"onChange($event)\">\n\t\t\t<cds-radio value=\"Zero\" [checked]=\"true\">\n\t\t\t\tZero\n\t\t\t</cds-radio>\n\t\t\t<cds-radio [value]=\"One\">One</cds-radio>\n\t\t\t<cds-radio [value]=\"Two\">Two</cds-radio>\n\t\t\t<cds-radio [value]=\"Three\">Three</cds-radio>\n\t\t\t<cds-radio [value]=\"Four\" [disabled]=\"true\">Four</cds-radio>\n\t\t</cds-radio-group>\n\t</fieldset>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-radio-group\n\t\t\t[legend]=\"label\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\tariaLabel=\"radiogroup\"\n\t\t\t[orientation]=\"orientation\"\n\t\t\t[labelPlacement]=\"labelPlacement\"\n\t\t\t(change)=\"onChange($event)\">\n\t\t\t<cds-radio value=\"Zero\" [checked]=\"true\">\n\t\t\t\tZero\n\t\t\t</cds-radio>\n\t\t\t<cds-radio [value]=\"One\">One</cds-radio>\n\t\t\t<cds-radio [value]=\"Two\">Two</cds-radio>\n\t\t\t<cds-radio [value]=\"Three\">Three</cds-radio>\n\t\t\t<cds-radio [value]=\"Four\" [disabled]=\"true\">Four</cds-radio>\n\t\t</cds-radio-group>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -73823,7 +73916,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "Story<Radio>",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t<fieldset class=\"cds--fieldset\">\n\t\t<legend class=\"cds--label\">{{label}}</legend>\n\t\t<cds-radio-group\n\t\t\t[disabled]=\"disabled\"\n\t\t\taria-label=\"radiogroup\"\n\t\t\t[orientation]=\"orientation\"\n\t\t\t[labelPlacement]=\"labelPlacement\"\n\t\t\t(change)=\"onChange($event)\">\n\t\t\t<cds-radio value=\"Zero\" [checked]=\"true\">\n\t\t\t\tZero\n\t\t\t</cds-radio>\n\t\t\t<cds-radio [value]=\"One\">One</cds-radio>\n\t\t\t<cds-radio [value]=\"Two\">Two</cds-radio>\n\t\t\t<cds-radio [value]=\"Three\">Three</cds-radio>\n\t\t\t<cds-radio [value]=\"Four\" [disabled]=\"true\">Four</cds-radio>\n\t\t</cds-radio-group>\n\t</fieldset>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-radio-group\n\t\t\t[legend]=\"label\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\tariaLabel=\"radiogroup\"\n\t\t\t[orientation]=\"orientation\"\n\t\t\t[labelPlacement]=\"labelPlacement\"\n\t\t\t(change)=\"onChange($event)\">\n\t\t\t<cds-radio value=\"Zero\" [checked]=\"true\">\n\t\t\t\tZero\n\t\t\t</cds-radio>\n\t\t\t<cds-radio [value]=\"One\">One</cds-radio>\n\t\t\t<cds-radio [value]=\"Two\">Two</cds-radio>\n\t\t\t<cds-radio [value]=\"Three\">Three</cds-radio>\n\t\t\t<cds-radio [value]=\"Four\" [disabled]=\"true\">Four</cds-radio>\n\t\t</cds-radio-group>\n\t`\n})"
                 }
             ],
             "src/search/search.stories.ts": [
@@ -80801,8 +80894,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "RadioGroup",
-                "coveragePercent": 85,
-                "coverageCount": "23/27",
+                "coveragePercent": 82,
+                "coverageCount": "28/34",
                 "status": "very-good"
             },
             {