{"_id":"@terminus/ui-radio-group","_rev":"61-8c8a0c5eae8b12e3a050c4f95a76ab50","name":"@terminus/ui-radio-group","dist-tags":{"latest":"4.0.0","next":"4.0.0"},"versions":{"0.0.1":{"name":"@terminus/ui-radio-group","version":"0.0.1","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^1.0.10","@terminus/ngx-tools":"^8.0.5","@terminus/ui-icon":"*","@terminus/ui-utilities":"*","@terminus/ui-validation-messages":"*"},"main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0"},"description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@0.0.1","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-DGnU29c/DdZOsY4ESOHpfY9dDLnxZvpJ3OCcPHZyk6mW9sH5Bx6bleTq1aKWSkCrE1KSEV1319gwre2ECH5iLQ==","shasum":"f12d99267a43f89ff6e9099d9694e3a64583b15a","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-0.0.1.tgz","fileCount":63,"unpackedSize":381023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1d5QCRA9TVsSAnZWagAAecYP+wdX0QAc1ZTfJjo75yJa\nJCJNXuAvBUDoNTDEg8ULyB5mNdnMqu0cuUa+MjTPe3iGJZy/+GG+CrEcf4im\ngHpc7rqduat0hh1BXOQ+hktNUVYMJgo0FikpGJ/vuDPndKl+m2C0oLiPPIYI\nb5i6AtaT73TsNLEipY/UmvRediR5XHT8VPpIF/edIxA59K172fhX/scSnLjI\nM+GSAc3wrp2DsK81NahVJdbvyCwlNKOJghDwFYLtJNpbU/nOPxJyAHHREnnQ\n9ttbpvOflYEfApseTXJf6HXriyZN5at2EaT+LP8JdXNzNLqGzWS5FQGDgydg\nWx5N3yB5T8XoH577R+NJRfemNZXGEUvESvT0yU+G0CfM+fTM6LQgiVhPaWq/\nFZcnegSB7FLLAqvpRQV0dTVs377xxY6awWrGdAVqVzvjlufEsHVV/OIxjqSb\nWm5SoIzJ7sY2JjaFzaAryZnDg86ezC90UrQ0eYMFpAZA55EJJvbusXFvomTy\nZ7awH5E29kniwR+wXD5oAiRYXBga09c8JFNjyxnk/McgvoX2mSRLHeJL0Umt\njjqif+BjgjA76awvcO42I/gF9+6ScDESUrRYva2B8i57Jq2cv8bA49+C7PJ8\np5pmrJ8DNRiWsSvo7jP0pPsNhVzZgNNOPzeDlhPpIahGRPym+QwW+OGEhq+5\nAhR7\r\n=WOhw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGCVGxx8QBwFErDO65R6cPI6ypwdw/xT1wT1fPgqJEqPAiArMwpoznrdG2Lh2BNwe1XjQSfyGCHKVfaclS33zbD7zw=="}]},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmUser":{"name":"benjamincharity","email":"ben@benjamincharity.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_0.0.1_1591074383500_0.6892621171680058"},"_hasShrinkwrap":false},"1.0.0":{"name":"@terminus/ui-radio-group","version":"1.0.0","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^1.0.10","@terminus/ngx-tools":"^8.0.5","@terminus/ui-icon":"^0.0.1","@terminus/ui-utilities":"^0.0.1","@terminus/ui-validation-messages":"^0.0.1","tslib":"^1.10.0"},"readme":"<h1>Radio Group</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Github release][gh-release-badge]][gh-releases] [![Library size][file-size-badge]][raw-distribution-js]\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n**Table of Contents**\n\n- [Usage](#usage)\n  - [Sub-labels](#sub-labels)\n  - [No validation or hint](#no-validation-or-hint)\n  - [Event driven](#event-driven)\n  - [Required](#required)\n  - [Disabled](#disabled)\n    - [Disabled option](#disabled-option)\n  - [Visual mode](#visual-mode)\n    - [Small](#small)\n  - [Centered content](#centered-content)\n  - [Custom content](#custom-content)\n- [Test Helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n\n## Usage\n\nPass in:\n\n1. An array of items\n1. A form control\n1. A formatter function to determine the UI display value\n1. A formatter function to determine the model value\n\n```html\n<form [formGroup]=\"myForm\">\n  <ts-radio-group\n    [options]=\"items$ | async\"\n    [formControl]=\"myForm.get('myRadioGroup')\"\n    [formatUILabelFn]=\"uiFormatter\"\n    [formatModelValueFn]=\"modelFormatter\"\n  ></ts-radio-group>\n\n  <button (click)=\"submit(myForm.value)\">Submit</button>\n</form>\n```\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    bing: 'Some helper text for my item',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    bing: 'Some helper text for my item',\n    disabled: true,\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    bing: 'Some helper text for my item',\n  },\n]);\n\n// Create a form\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null],\n});\n\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// Use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n\n### Sub-labels\n\nPassing a formatter function to `formatUISubLabelFn` will enable sub-label support:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n```typescript\n// Use the 'bing' value as a sub-label\nuiSubFormatter = (v) => v.bing;\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### No validation or hint\n\nA flag to define whether this radio group field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-radio-group\n  [formControl]=\"myFormCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-radio-group>\n```\n\n### Event driven\n\nListen for change events:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  (selectionChange)=\"selected($event)\"\n></ts-radio-group>\n```\n\n\n### Required\n\nTo define the radio group as 'required', set the required validator on the form group:\n\n```typescript\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null, [Validators.required]],\n});\n```\n\n\n### Disabled\n\nTo disable the entire radio group, set `isDisabled` to true:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n  [isDisabled]=\"true\"\n></ts-radio-group>\n```\n\n\n#### Disabled option\n\nTo disabled only a single option, define the `disabled` key on the item object:\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    disabled: true, // This radio option will be disabled\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n  },\n]);\n```\n\n\n### Visual mode\n\nVisual mode displays radio options as large clickable areas containing content.\n\nEnable by setting the `isVisual` flag:\n\n```html\n<ts-radio-group [isVisual]=\"true\"></ts-radio-group>\n```\n\n#### Small\n\nFor a smaller clickable area, use the `small` flag.\n\nNOTE: The maximum content should be a title with two lines and body with 3 lines\n\n```html\n<ts-radio-group [isVisual]=\"true\" [small]=\"true\"></ts-radio-group>\n```\n\n### Centered content\n\nBy default the content is centered when in visual mode. Setting `centeredContent` to `false` will use standard top/left alignment.\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [centeredContent]=\"false\"\n  ...\n></ts-radio-group>\n```\n\n### Custom content\n\n`TsRadioOption` now accepts an optional `template` key with a string template:\n\n```typescript\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    template: `<a href=\"${this.myLink}\">My link!</a>`\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    // if no template is defined, it will fall back to `formatUILabelFn` for the display value\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    template: `<h3>Hi!</h3> <p>Here is a thing!</p>`\n  },\n]);\n```\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-radio-group/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                     |\n|------------------------------|\n| `getAllRadioGroupInstances`  |\n| `getRadioGroupInstance`      |\n| `getRadioGroupParentElement` |\n| `selectStandardRadio`        |\n| `selectVisualRadio`          |\n\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/master/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/master/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-radio-group.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-radio-group\n[gh-release-badge]:    https://img.shields.io/github/release/GetTerminus/terminus-oss.svg\n[gh-releases]:         https://github.com/GetTerminus/terminus-ui/releases/\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/CI%20Release/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.js\n","readmeFilename":"README.md","description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@1.0.0","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-J7AebwI8zUHDUDovFy1b//RxzQSQmTeTisBK8hbabwMvBjXVHjR/HU1r/NmvDsXHI0V0CirzVf+TZNMnxvNBwg==","shasum":"5f91f55ab9ad4f2e1b7438d14f0b38e5362f4edb","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-1.0.0.tgz","fileCount":21,"unpackedSize":44197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2TsnCRA9TVsSAnZWagAAm6gQAIXclItbFNI+hdgDYJ2c\nIJK0TdfzUCtI/r49DA+eWRHdDjsY18N3ENwKkxu3WVqn3l53Br2Lel6qD689\nYxnBew4aska+rZ4VBWyGw07z3AibEivNvG6pVY1hRsKwefXWWUjOszu7vGB3\nN0xpN8/hspd89ZTLNwjkwrkgPLCBZpqb99quAwd5e8ODDMlU9nE1GudeF1Gz\ncqzeNCnYZ0Mpy1pLZEKLG9RbH6sFkVzLUfoq3m6Ptwaxg4ykJEeghs0zuWfp\nBDPDz3YcD3+by0th4jCIS7rMULI4Z8L+NE0DJfiAlZeVuHavYTAmLw152vE2\n9MriIROyg4hCiJTHxS9oLkNIg0W1ewglBJ0/36zZsmz4larpr32L0liZ8qKV\ndi98kNcuZU6XCzJIBMxyT89Q3y+23n2/f8oXmcfpUQYnTfCPvOYowEFLPwpp\nUwE1GXBpOhAjRlEtOc1VT1TAud1zOpv/gRKUh33wmJiK01AhCR9F4yGQyta8\n/2nMUWVUNtYozbUj91NHTgtBawlWKBqf6K2RFQO5fKSYRCS+WsKZ9e9odymZ\nHV77IoFSmasC4thd2H+XidXpUPFgbLLpZlyYeLrEc80QOZ1FkyY2NQi+sgvF\nTtp5C1udUbRVhIkvGsEiOTWCP9XWcLQtHPkGJ+oWWHOFb+RPPI/5lEd3+izF\nwRfT\r\n=waJr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuQlxoGoAV6sY+kthBpSMNYpB8OCeTZipE5k+8pZSlYwIhAI9cezXrFKKtuDGE8Fv9cUgzlug/SLJwwTmxNBa+je6j"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_1.0.0_1591294758963_0.8913950892187767"},"_hasShrinkwrap":false},"1.0.1":{"name":"@terminus/ui-radio-group","version":"1.0.1","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^1.0.10","@terminus/ngx-tools":"^8.0.5","@terminus/ui-icon":"^0.0.1","@terminus/ui-utilities":"^0.0.1","@terminus/ui-validation-messages":"^0.0.1","tslib":"^1.10.0"},"description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@1.0.1","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-qoM3oai+smX4sHgp17ZHluAv3Sc3kX3BA8kej+Qlxe7FVoIFKEapLnUfmtvy2WBz3QEZpHhWx2W/veXdec4mqg==","shasum":"87f632f444709e03cf500eebd3338f928d6737da","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-1.0.1.tgz","fileCount":22,"unpackedSize":44251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2apVCRA9TVsSAnZWagAANu0P/RmhJiToiBXCUyVlAXRo\nH/Z0Jgvs7NcVuWbcKp9Rto/ya4oKP6ABtxm1Yht9Hslq1H3WQtkGTSArY8a2\nhRT1G1OBy5Ah0jGb2nGJ5os+Knvg+kS2tF6O03NoqN3tdObQox12KxXwK8qB\n9Z/o1qi7pjxuxZK/TNLKve9bz39qk4JqJK18vSqIq06y6GSIpWxdlD4Wq/+r\n6iE3hkHBzuzj3IXsM+FLcI9+TWhpjj1K3OH1iSFZDNnqVM5QARNzBSXhANrB\nfrMsR1/7VRldxFweBt3NRpkMK3RVMhEVJ4Kl4MAZYs2HplGXAItFqFfupscm\nDptTfAcDuTywMVd2AebNpg92g4fEDPLQqo0ATPT0z/hFBq10JQE/k1/suEjE\nxjdmHnDJ/KRV+XK1MRiIszBzeVX6+3seci5fvtPd3L5J774LAOGira8zod9d\nZXGFCb1447YBx9gCeShqAdvoMTQKGXPMYkzTIwHVF+Rd5Fojl5ODzj1zSRNz\nm7DBNWK1cvSTSVhfg7nq6jptrNVLBLigmvzQHLqDOLMp03DVEM++sgDEjS4f\n3SaMlxZQ/h0V1JojzC0drJNO43LP0YXcjCGa5xuhtbxJPV+FVrZ5LC4sGV5n\nnwEegXxGfStbs+FrCNJXL8d//bKpvP0pxJjBuqJlNEu31FErf2138mksWcpn\nWZDJ\r\n=qQzd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZf0qN3x1yfaFuhmgmme9jSnysU+x4xCtKYGjIT8+AVAIhALFg4kwFxC/CWbw6FqI4TR1XRPLgMoVu2Ky5/+CTIYB+"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_1.0.1_1591323220969_0.4130925090558102"},"_hasShrinkwrap":false},"1.0.2":{"name":"@terminus/ui-radio-group","version":"1.0.2","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.0.2","@terminus/ngx-tools":"^8.0.5","@terminus/ui-icon":"^1.0.0","@terminus/ui-utilities":"^1.0.0","@terminus/ui-validation-messages":"^1.0.0"},"main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0"},"readme":"<h1>Radio Group</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Github release][gh-release-badge]][gh-releases] [![Library size][file-size-badge]][raw-distribution-js]\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n**Table of Contents**\n\n- [Usage](#usage)\n  - [Sub-labels](#sub-labels)\n  - [No validation or hint](#no-validation-or-hint)\n  - [Event driven](#event-driven)\n  - [Required](#required)\n  - [Disabled](#disabled)\n    - [Disabled option](#disabled-option)\n  - [Visual mode](#visual-mode)\n    - [Small](#small)\n  - [Centered content](#centered-content)\n  - [Custom content](#custom-content)\n- [Test Helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n\n## Usage\n\nPass in:\n\n1. An array of items\n1. A form control\n1. A formatter function to determine the UI display value\n1. A formatter function to determine the model value\n\n```html\n<form [formGroup]=\"myForm\">\n  <ts-radio-group\n    [options]=\"items$ | async\"\n    [formControl]=\"myForm.get('myRadioGroup')\"\n    [formatUILabelFn]=\"uiFormatter\"\n    [formatModelValueFn]=\"modelFormatter\"\n  ></ts-radio-group>\n\n  <button (click)=\"submit(myForm.value)\">Submit</button>\n</form>\n```\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    bing: 'Some helper text for my item',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    bing: 'Some helper text for my item',\n    disabled: true,\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    bing: 'Some helper text for my item',\n  },\n]);\n\n// Create a form\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null],\n});\n\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// Use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n\n### Sub-labels\n\nPassing a formatter function to `formatUISubLabelFn` will enable sub-label support:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n```typescript\n// Use the 'bing' value as a sub-label\nuiSubFormatter = (v) => v.bing;\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### No validation or hint\n\nA flag to define whether this radio group field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-radio-group\n  [formControl]=\"myFormCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-radio-group>\n```\n\n### Event driven\n\nListen for change events:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  (selectionChange)=\"selected($event)\"\n></ts-radio-group>\n```\n\n\n### Required\n\nTo define the radio group as 'required', set the required validator on the form group:\n\n```typescript\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null, [Validators.required]],\n});\n```\n\n\n### Disabled\n\nTo disable the entire radio group, set `isDisabled` to true:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n  [isDisabled]=\"true\"\n></ts-radio-group>\n```\n\n\n#### Disabled option\n\nTo disabled only a single option, define the `disabled` key on the item object:\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    disabled: true, // This radio option will be disabled\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n  },\n]);\n```\n\n\n### Visual mode\n\nVisual mode displays radio options as large clickable areas containing content.\n\nEnable by setting the `isVisual` flag:\n\n```html\n<ts-radio-group [isVisual]=\"true\"></ts-radio-group>\n```\n\n#### Small\n\nFor a smaller clickable area, use the `small` flag.\n\nNOTE: The maximum content should be a title with two lines and body with 3 lines\n\n```html\n<ts-radio-group [isVisual]=\"true\" [small]=\"true\"></ts-radio-group>\n```\n\n### Centered content\n\nBy default the content is centered when in visual mode. Setting `centeredContent` to `false` will use standard top/left alignment.\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [centeredContent]=\"false\"\n  ...\n></ts-radio-group>\n```\n\n### Custom content\n\n`TsRadioOption` now accepts an optional `template` key with a string template:\n\n```typescript\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    template: `<a href=\"${this.myLink}\">My link!</a>`\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    // if no template is defined, it will fall back to `formatUILabelFn` for the display value\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    template: `<h3>Hi!</h3> <p>Here is a thing!</p>`\n  },\n]);\n```\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-radio-group/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                     |\n|------------------------------|\n| `getAllRadioGroupInstances`  |\n| `getRadioGroupInstance`      |\n| `getRadioGroupParentElement` |\n| `selectStandardRadio`        |\n| `selectVisualRadio`          |\n\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/master/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/master/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-radio-group.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-radio-group\n[gh-release-badge]:    https://img.shields.io/github/release/GetTerminus/terminus-oss.svg\n[gh-releases]:         https://github.com/GetTerminus/terminus-ui/releases/\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.js\n","readmeFilename":"README.md","description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@1.0.2","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-Pxur/+7rVJsL62MT+0EL0ZYL3/3QIsJ8LV8E3GRjIRLN84eNYEQY9x8fuB2OH5s2dF6XzAHJUOvX61bllzfBfQ==","shasum":"601f00b60bc3faedb1e81188b6f1dab20ed48b30","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-1.0.2.tgz","fileCount":64,"unpackedSize":381491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4TDmCRA9TVsSAnZWagAA2FAP/1FsEpYdrCVy2NcQOTBG\n+ZiiVwY8KK+brooPNTd6LFJzwQzowjL/F9ZAUEXtnTsFsLolYEm4kZTeFRNh\nmCXUIYgnXf5Ylpr7C0NZmnD+sYSUTmWWH27bq+hC7Ikc9L/KZnI7kDYtY6kW\n6TQBcANWUt+wFznPhvUNPLfHNrWp7KNHWXs1aLiaEzTew3pUx16qnMagWDF6\n1xBCW8dJ8PLRu4RnVe1t/oeeSoZee7wfyEh2FiwBs65tUq6fcvgqcqXvferL\njC4UHXEXnVpPVGbGho6SYyUG+48OI753wWBxAYmj5oKGKvo9KgnxVKmoM3uu\n80ZEyZrYZhMqOXWp+luzziLQpR/iopJdSkB1q8ABzrh5/2rTunNNBHvkXTmj\nI3tOLSFtonE045mC4GPcTwqpglfPJ435uGB4Q8QKfF4EVMLnXoMruwkbQuE3\ncUG5gQ5cNJiU3X/3OuMdS9OmMmsIdqkYP+ZwNcI6Ef7XD1uSVticUmKyuW4N\nS+28BzxP1APX5G6K+o1pqLLmj+/faPysoNfk9T0xCeXNcJKCyJ+Mkt55gc/7\nsDoxJ7AZzl2KknsbRw7TMpvVU5j6GG9iNoLfN9alquhdxclWLnLdqmYHgFr7\n7xhEd1LS8c2nuGQVQ3u9ATgmtM/kJOOoTJZpto+n44rmGssLmAe+8zMq0xuS\n9O0Y\r\n=EQeP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHjrd4fwkxKoEwsKzAdLoogiYN9oYkAnTlMvs7pHomNJAiAj7s/RcO5USVCtucq+Lfk6YleCpjUDqzxyr62aX20sXQ=="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"benjamincharity","email":"ben@benjamincharity.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_1.0.2_1591816421500_0.11103482297683165"},"_hasShrinkwrap":false},"1.0.3":{"name":"@terminus/ui-radio-group","version":"1.0.3","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.0.2","@terminus/ngx-tools":"^8.0.5","@terminus/ui-icon":"^1.0.0","@terminus/ui-utilities":"^1.0.0","@terminus/ui-validation-messages":"^1.0.0"},"main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@terminus/ui-pipes":"1.0.3","date-fns":"2.14.0"},"description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@1.0.3","_nodeVersion":"12.18.0","_npmVersion":"lerna/3.22.1/node@v12.18.0+x64 (linux)","dist":{"integrity":"sha512-WEWCYCL8jjU2AeaM5ZsMTpljNbl6SLzsxQLHroDxdt6NKi8GQQNeObYlri/rbrSXJsZLkKKHPABeZNq+OifTbQ==","shasum":"c178b505d5a11b7ab545235b5b7e7cd27a71384a","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-1.0.3.tgz","fileCount":65,"unpackedSize":382818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4j1gCRA9TVsSAnZWagAAVx0P/j7uFN6pdOXa6tnc63d0\neCl30/czb2tz6zam5lnlhy4noy2NIOemzdCPphIJ2IH/Rztu5gjvkqQEFUDQ\nT8XHeDdsNlgLRO6Ke/I56c2qIo3QVFe5+O3qGPfB1AL5rBO5u7GeYOwEoIv+\nuLod793eq0R8PYXE+bfkZVCcNX9B6xQAWW3fZuvuUg0wn94z73W48+OElw59\n8ZUMaUCB55nTXkG7gOlgKTaFlSiOyEFHM6BoY6HXsBG8FeJnO1KS8xDgYmzX\nCDm7AoZvSBk2yw0HMOcUrocZRDCe2oV00dI6eu6BQR0wm5WjOTOsQ59TT3KU\nS0rwdh4rLCY9RqBTKnWz7esevGoY2lnMLeRT0yMr3tNUo0g1oNBxeayedW31\nS87Qi+UMSQ4j2HfiBXXZBdBbKY/9FmyWAPuXkbuoSQdWFB2RF68cogDcmVJt\nzXUNtGbVhFcpsZBsZBLz2UUcgia41fNUvLejV6r03LBuXLQtd+/zRb90Dy71\n9CRGKfBh80SwTnxq3Oeyeoua/irZ7fowf1iE954b+Wxx5ZUe9EFfq8Th00sL\nkuHIJDN+nbp1jUZ0g9HNj9uDETXyffZHi6ZUmxGTtchJiY1IK3+w8Xbbg3ee\nmWWeD1aXQuCLGeefz7m97amjr9QQNCAuygRfsmNOSzOfL4q4DBcrySTRD8vN\nty0b\r\n=Icln\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLS+aRO6loFcK/OAzHRgi9g1HEzp+AMaUGqeNim59G5AIhALksM2SARCRlVGDDaDHv3XIsS2TZov+jtkVSdX7FI32V"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_1.0.3_1591885151606_0.8314267230519694"},"_hasShrinkwrap":false},"1.0.4":{"name":"@terminus/ui-radio-group","version":"1.0.4","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.0.2","@terminus/ngx-tools":"^8.0.5","@terminus/ui-icon":"^1.0.0","@terminus/ui-utilities":"^1.0.0","@terminus/ui-validation-messages":"^1.0.0"},"main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0"},"description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@1.0.4","_nodeVersion":"12.18.0","_npmVersion":"lerna/3.22.1/node@v12.18.0+x64 (linux)","dist":{"integrity":"sha512-oCKd7AKBdvMNVns5TbdYc6wfb3yIR1aULtuBZyjcsptHu2ne8Wz+G3F5bts1gqzooUYlQz294cIKgNN9epK80g==","shasum":"bf09b8ac37181b1d66e95da8e6d14e8b686ac386","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-1.0.4.tgz","fileCount":65,"unpackedSize":382850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8iFJCRA9TVsSAnZWagAASS0QAKO5Tz9QyNNlheRpDe/7\nyh3V0a8zJ8SsKPfsymagCVipycK8DIbudVge727mCK/ekjr5SeWsAM+De2Mj\niS5yCqZpHE8C+s/6LpkCYjz6+jBTIdTm8xkvYP5zryec7bgVAiZG4xh+evnx\nXULpR5HA2fwf2Kw+7P3rJ77ZhGFCO9u8isDyLFxVhMHCM9kZduWlFudlL5H7\nxGMBLwfICALYk0pEq2bolHTeqHxcntRF7XvgijsRkBk0MejqpptNPBT/00eD\nFcjTjMmMOimFVXHGBNQJkA9Nu4RvNGVLMbPlRIJ+SztDPZBZ/tVbLckr61qN\nKbu/DUffSzRl1b8Nf4Pbu/Rm4je1VdL7+EqMB3MR4jleKkj7nSae2JdGxvWK\nGc5iyFN0VdCAxrgeIbNW73YlB4xKsZg3MaT/VoHObhDbAUw7PHYFNBYOG7xZ\nekjAYM/PBzapNuG1XtuBOBXK+PLad9TaBM3Zn+ydjMeNl5tSZRJ8uqhpKKEe\nshiRxQDBrzMFMQRw7PWBKxVPr9DN7oSPRYsqdD1uRwfLa1XiXvI9u4wqoNcG\nQWvTQtAjbHefNWZnxR9m9ptCgd9wQauE3GNEihisnzwj8YbxFAQb92+5+/2i\nlStH+Oz7DegMhKAA2nQ4/Zwv6+qqMOcX+/SerYJQPaJ2cy8c5CJawzYV1akx\nTgRv\r\n=SHgU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCme5nVjDWucOiawdjrGE+6MCcZSmU6h1cTqGZTXzYMtAIgJu+h4An6TyXmNThKMRqZxd827OllqY6MOdNhxuCIkvE="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_1.0.4_1592926536709_0.8001490047992517"},"_hasShrinkwrap":false},"1.0.5":{"name":"@terminus/ui-radio-group","version":"1.0.5","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.0.2","@terminus/ngx-tools":"^8.0.5","@terminus/ui-icon":"^1.0.0","@terminus/ui-utilities":"^1.0.0","@terminus/ui-validation-messages":"^1.0.0"},"main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0"},"readme":"<h1>Radio Group</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Github release][gh-release-badge]][gh-releases] [![Library size][file-size-badge]][raw-distribution-js]\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n**Table of Contents**\n\n- [Usage](#usage)\n  - [Sub-labels](#sub-labels)\n  - [No validation or hint](#no-validation-or-hint)\n  - [Event driven](#event-driven)\n  - [Required](#required)\n  - [Disabled](#disabled)\n    - [Disabled option](#disabled-option)\n  - [Visual mode](#visual-mode)\n    - [Small](#small)\n  - [Centered content](#centered-content)\n  - [Custom content](#custom-content)\n- [Test Helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n\n## Usage\n\nPass in:\n\n1. An array of items\n1. A form control\n1. A formatter function to determine the UI display value\n1. A formatter function to determine the model value\n\n```html\n<form [formGroup]=\"myForm\">\n  <ts-radio-group\n    [options]=\"items$ | async\"\n    [formControl]=\"myForm.get('myRadioGroup')\"\n    [formatUILabelFn]=\"uiFormatter\"\n    [formatModelValueFn]=\"modelFormatter\"\n  ></ts-radio-group>\n\n  <button (click)=\"submit(myForm.value)\">Submit</button>\n</form>\n```\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    bing: 'Some helper text for my item',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    bing: 'Some helper text for my item',\n    disabled: true,\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    bing: 'Some helper text for my item',\n  },\n]);\n\n// Create a form\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null],\n});\n\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// Use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n\n### Sub-labels\n\nPassing a formatter function to `formatUISubLabelFn` will enable sub-label support:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n```typescript\n// Use the 'bing' value as a sub-label\nuiSubFormatter = (v) => v.bing;\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### No validation or hint\n\nA flag to define whether this radio group field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-radio-group\n  [formControl]=\"myFormCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-radio-group>\n```\n\n### Event driven\n\nListen for change events:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  (selectionChange)=\"selected($event)\"\n></ts-radio-group>\n```\n\n\n### Required\n\nTo define the radio group as 'required', set the required validator on the form group:\n\n```typescript\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null, [Validators.required]],\n});\n```\n\n\n### Disabled\n\nTo disable the entire radio group, set `isDisabled` to true:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n  [isDisabled]=\"true\"\n></ts-radio-group>\n```\n\n\n#### Disabled option\n\nTo disabled only a single option, define the `disabled` key on the item object:\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    disabled: true, // This radio option will be disabled\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n  },\n]);\n```\n\n\n### Visual mode\n\nVisual mode displays radio options as large clickable areas containing content.\n\nEnable by setting the `isVisual` flag:\n\n```html\n<ts-radio-group [isVisual]=\"true\"></ts-radio-group>\n```\n\n#### Small\n\nFor a smaller clickable area, use the `small` flag.\n\nNOTE: The maximum content should be a title with two lines and body with 3 lines\n\n```html\n<ts-radio-group [isVisual]=\"true\" [small]=\"true\"></ts-radio-group>\n```\n\n### Centered content\n\nBy default the content is centered when in visual mode. Setting `centeredContent` to `false` will use standard top/left alignment.\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [centeredContent]=\"false\"\n  ...\n></ts-radio-group>\n```\n\n### Custom content\n\n`TsRadioOption` now accepts an optional `template` key with a string template:\n\n```typescript\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    template: `<a href=\"${this.myLink}\">My link!</a>`\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    // if no template is defined, it will fall back to `formatUILabelFn` for the display value\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    template: `<h3>Hi!</h3> <p>Here is a thing!</p>`\n  },\n]);\n```\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-radio-group/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                     |\n|------------------------------|\n| `getAllRadioGroupInstances`  |\n| `getRadioGroupInstance`      |\n| `getRadioGroupParentElement` |\n| `selectStandardRadio`        |\n| `selectVisualRadio`          |\n\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-radio-group.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-radio-group\n[gh-release-badge]:    https://img.shields.io/github/release/GetTerminus/terminus-oss.svg\n[gh-releases]:         https://github.com/GetTerminus/terminus-ui/releases/\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.js\n","readmeFilename":"README.md","description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@1.0.5","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-aOKYIpvPjvWdMOUL+lZtATSISCh6S4a468DgP9bsrdjzdqRybBU0RsCManQHTEA+YrUIqtJ2DlYg+NGTYyc5jQ==","shasum":"6dae1e595fa4b23de821498680feba1e02e61223","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-1.0.5.tgz","fileCount":65,"unpackedSize":383064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBJc7CRA9TVsSAnZWagAA2G0P/iqFjD6AuLwfFraEEw9O\ndG4/isbC3d+95qMUK97VHrwQgeyT/+FNoWS6HkL30NM2oX8gg932wXZivVgX\nOLvtQh+KKwUsKhBO6jowqBR4TotTSVaWI7rU8Xg8MEYgI0BhECgQbzdQl5co\nRu+kbnXwqDt2qA8WqCCQHIZ1FlJm394E32y6OtAbgFn62bc/WbvzLGnHDWit\nvUiFV8KaaW6YK+ufsT5EX9F4FKybNyAYSfw3q2E3r5ZP45GQKrOrWFml850A\nRzP6Frp5gWpk2LvV4j41I1yrt3D8tLrBXZw7CWebPwjtHwRSVjhhT7JXcSVh\nGmhmyDGThGWvuhv+YdAz/++TnB5hbvzXZOaPUXRmzv9HtoRMACTtvhavLJNk\nFBptMvugMNTzeSGZajHynnhdO3JEQ4CRIBwo4k3jInRUHqZJWrP8mDXzmy08\nBMN/Qh5Dicu/C8+0AGMxL/0gG3IQRhYx6SiENWXPiGpRshqWpGR9UuxGG5Ps\nfEB+SWHV/rm35xLa2Hor57RATdIILaJU8OfvsFHosgSdyJDsNVjr/aO3QqPn\n0TOKAHp2dEk02tmSscBf7/xrzTm0PCsi7f6OkmHoTzj6L4uZNhRg+NrZl9Bl\nvAuv/F6ZAKei7KFca4AinFfvtaHimpcyph4vGUnbpfkbSQWqlKOt+3lC9nya\nuRC1\r\n=5uj3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG13IqjHT7ojlt37fhti57Fglx/df7e1f+5Na8Y807sLAiALvv/vucfAywhke+YkQWa/+sNUjnSEu4dzrblGkqJdnQ=="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_1.0.5_1594136378735_0.6400814404562292"},"_hasShrinkwrap":false},"1.1.0":{"name":"@terminus/ui-radio-group","version":"1.1.0","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.0.2","@terminus/ngx-tools":"^8.0.5","@terminus/ui-icon":"^1.0.0","@terminus/ui-utilities":"^1.0.0","@terminus/ui-validation-messages":"^1.0.0"},"main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@terminus/ui-pipes":"1.0.5","date-fns":"2.14.0"},"description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@1.1.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-84H2MUlEXUKIY8S/90BlFYCQU22NHzgw0d/3HT9nxbokFZ+E3uT3ZS8tzoNYSg2/zZDgGKGUsGYjcwEod2y3mg==","shasum":"4121f3559cd0413ea2dd1bffd149c5c2f8c659f1","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-1.1.0.tgz","fileCount":65,"unpackedSize":381846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB3TkCRA9TVsSAnZWagAAJTQP/RGwbwqlTIgDaTAWXzWX\noL6Yg58cac+U79tzYqtw41f2eogZ3e/yQuiKsmg+wapUgm+ud/DTWbZpdqrC\noFW3j7UkAnQ1wrgysVAuwKX/fINwwi/ST5YAeUfFADWRl38GCyIFD3jXeYC5\nYWo59MXqm1zBG40+oN8RwFNYnFsXE2PiiNUh46CtgnWcosqGtpsuwDowxEQ7\nCdTvbDVafpLGiT++HR9K7OXPpf14zBFgR0r+gIP8a+DfXT9SqT8YuGGhCYt1\nR1AkfjrndYw5hH7jWW/o+iM/v4627nNmfjQ0eZQMPMfKEbCukRzMzw5KYw0h\nn7Czdn5hsoXbo35wmdQdatISDEblbpV9hqgMx0hWSMkNK7Ek2/3ZzevbiRg2\nKsrq86oVQbhxABoalpc/XGwWmqcIZFpnTENXLYpeOUl2ULZCb6w+45UJfEeT\nCjDi49ZEpohUy7MFCQo87peunCFs1FtDl3SGT2f+n5HKt6Eds8IDVY1U3SC5\nIZeOEAJMvoA821oBmfRVN+fFoMNRKhbaEwEEcewg4aQ2gCuDfi6AUJrP7qi7\nfS+uAoEuiIs2ftAl5mKM0Z5WDg5FRV++YgEyi4pBbtJ4D6Q9sLTWpTY9PCPm\nHSGwp+d875OV5QbRcj/Khm5kO6qj0WUxVUcSfBPv2oOAQsUdwB0DRs0XKaGY\nYngL\r\n=rZ8N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHZlt/bvVxyHmU3Eb/cipMzY0YCO5mgWuKSf21KUrjbYAiEAoolR/c5ZUGxtwtL7CnaShCaxY3WS3sbV58ssqPQHeaw="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_1.1.0_1594324196240_0.08923192918384526"},"_hasShrinkwrap":false},"1.1.1":{"name":"@terminus/ui-radio-group","version":"1.1.1","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.0.2","@terminus/ngx-tools":"^8.0.5","@terminus/ui-icon":"^1.0.0","@terminus/ui-utilities":"^1.0.0","@terminus/ui-validation-messages":"^1.0.0"},"main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@terminus/ui-pipes":"1.0.5","date-fns":"2.14.0"},"readme":"<h1>Radio Group</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Github release][gh-release-badge]][gh-releases] [![Library size][file-size-badge]][raw-distribution-js]\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n**Table of Contents**\n\n- [Usage](#usage)\n  - [Sub-labels](#sub-labels)\n  - [No validation or hint](#no-validation-or-hint)\n  - [Event driven](#event-driven)\n  - [Required](#required)\n  - [Disabled](#disabled)\n    - [Disabled option](#disabled-option)\n  - [Visual mode](#visual-mode)\n    - [Small](#small)\n  - [Centered content](#centered-content)\n  - [Custom content](#custom-content)\n- [Test Helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n\n## Usage\n\nPass in:\n\n1. An array of items\n1. A form control\n1. A formatter function to determine the UI display value\n1. A formatter function to determine the model value\n\n```html\n<form [formGroup]=\"myForm\">\n  <ts-radio-group\n    [options]=\"items$ | async\"\n    [formControl]=\"myForm.get('myRadioGroup')\"\n    [formatUILabelFn]=\"uiFormatter\"\n    [formatModelValueFn]=\"modelFormatter\"\n  ></ts-radio-group>\n\n  <button (click)=\"submit(myForm.value)\">Submit</button>\n</form>\n```\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    bing: 'Some helper text for my item',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    bing: 'Some helper text for my item',\n    disabled: true,\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    bing: 'Some helper text for my item',\n  },\n]);\n\n// Create a form\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null],\n});\n\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// Use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n\n### Sub-labels\n\nPassing a formatter function to `formatUISubLabelFn` will enable sub-label support:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n```typescript\n// Use the 'bing' value as a sub-label\nuiSubFormatter = (v) => v.bing;\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### No validation or hint\n\nA flag to define whether this radio group field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-radio-group\n  [formControl]=\"myFormCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-radio-group>\n```\n\n### Event driven\n\nListen for change events:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  (selectionChange)=\"selected($event)\"\n></ts-radio-group>\n```\n\n\n### Required\n\nTo define the radio group as 'required', set the required validator on the form group:\n\n```typescript\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null, [Validators.required]],\n});\n```\n\n\n### Disabled\n\nTo disable the entire radio group, set `isDisabled` to true:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n  [isDisabled]=\"true\"\n></ts-radio-group>\n```\n\n\n#### Disabled option\n\nTo disabled only a single option, define the `disabled` key on the item object:\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    disabled: true, // This radio option will be disabled\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n  },\n]);\n```\n\n\n### Visual mode\n\nVisual mode displays radio options as large clickable areas containing content.\n\nEnable by setting the `isVisual` flag:\n\n```html\n<ts-radio-group [isVisual]=\"true\"></ts-radio-group>\n```\n\n#### Small\n\nFor a smaller clickable area, use the `small` flag.\n\nNOTE: The maximum content should be a title with two lines and body with 3 lines\n\n```html\n<ts-radio-group [isVisual]=\"true\" [small]=\"true\"></ts-radio-group>\n```\n\n### Centered content\n\nBy default the content is centered when in visual mode. Setting `centeredContent` to `false` will use standard top/left alignment.\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [centeredContent]=\"false\"\n  ...\n></ts-radio-group>\n```\n\n### Custom content\n\n`TsRadioOption` now accepts an optional `template` key with a string template:\n\n```typescript\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    template: `<a href=\"${this.myLink}\">My link!</a>`\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    // if no template is defined, it will fall back to `formatUILabelFn` for the display value\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    template: `<h3>Hi!</h3> <p>Here is a thing!</p>`\n  },\n]);\n```\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-radio-group/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                     |\n|------------------------------|\n| `getAllRadioGroupInstances`  |\n| `getRadioGroupInstance`      |\n| `getRadioGroupParentElement` |\n| `selectStandardRadio`        |\n| `selectVisualRadio`          |\n\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-radio-group.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-radio-group\n[gh-release-badge]:    https://img.shields.io/github/release/GetTerminus/terminus-oss.svg\n[gh-releases]:         https://github.com/GetTerminus/terminus-ui/releases/\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.js\n","readmeFilename":"README.md","description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@1.1.1","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-9jza/AUHdMUzsAyXyJpbm58WmZrjD9lp/kWK7zrhbArScGhRtEKvQupDc0AuGyubWUBBnjQqBJhRM78dHts1pA==","shasum":"e5e9a06cf0c97124698677f6df1b718ccb5ede8d","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-1.1.1.tgz","fileCount":65,"unpackedSize":385057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCHYkCRA9TVsSAnZWagAA0RsP/17UrugpdL1F9mbhfy1d\n5oNvS9vRvcSY/6cO3/arR9wznGGSvwOTZwUnB1L6TgcbuA2pcct8682BuJAk\n9Zqe+4OXtyhwKL3S2ONDeQs8NkiwUnDcwMFDHKm4aAv8lyuo31nTTwG4QXDN\nOwOk6SpwZ/idb0JqOogBjTcbP5aPpdWS7D8FFuatO9TxMSnVhAW+SV0smDe/\nrWUpZfhCOhfKgAM9moRrMCufIOHawt3j39NmS0IMTP3Z013UGTGhS22J2oum\naCdfwJ0/lbJXc8MeF57WQxa1z/0z6xd8I6QWdVlAocBakpCETnJqhxYYVIBk\nC3Mze+bSKzSHc44ELnq4UjgoEcQDzVCZWhiPloqnoyWhXVYfyJWGVRGL8n4H\nS3qAXUB31o5TdnSp4jAC+T7Dw3qZFfc3c6RAffVgahYZBBw2crvWnwygS/Kq\nhPEnGC2ibBoOUt0oGL6owqDwoAe5kJCkoBs5Nu0HvhXd2svvOsoMrWcWMkIv\nMHjpyu86pgmBe9brY6mYdI92pq4Di0BbgxXjq6K1r3KULIOU2VvXAxPDAiTE\nMK5TX/hYwqZl7Aa4cRn9z2nbzULzlPUnCgadkGqGeWb0xzpH4ZOQCTR7yyQb\nMqiqZHpNoGOWxo4FR+KTmxtZv82YvJPIMQ62mPCRI9SY90piRJEwKpv3dgUu\nyGeU\r\n=vSeP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/9x54N7ivUj/z+Zx2h9v+yNPKdBA5T01IRihL88dx1QIgdGIT92kEJXX2Z8tgp623Xnl4JO/Ozk7Ksocr7iLEKd0="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_1.1.1_1594390051696_0.26924827488426817"},"_hasShrinkwrap":false},"1.1.2":{"name":"@terminus/ui-radio-group","version":"1.1.2","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.1.0","@terminus/ngx-tools":"^8.0.5","@terminus/ui-icon":"^1.0.0","@terminus/ui-utilities":"^1.0.0","@terminus/ui-validation-messages":"^1.0.0"},"main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@terminus/ui-pipes":"1.0.5","date-fns":"2.14.0"},"description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@1.1.2","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-Y5VNEmFcY9m1nS6dWRREiF5Y2zXK2fADNQDacOe8ADuFgYODK8rJRL7hOyehV8FCMmxUeP9UE8QG2t4PefmxAA==","shasum":"51e87c07c27bfd6c205088186c368024b508d511","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-1.1.2.tgz","fileCount":65,"unpackedSize":385370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDFC4CRA9TVsSAnZWagAA8LQP/1oXIr6Yh8ItEgXbnZmX\nl8IUp1cqry5vEMDfV5RHZF2LYl98Gz1Zf11+wk5/vvoWMyp43KPGwtw5mtjl\nxh5Rob/ugfJYFQrJ5H1bTyZ1BLGRILCzPDhZGjlxUe2OVtq9LpFPeUyTppFO\nsfk53462IOsZdGhLT3hiL06xhsg851VmzIWP7DgEAiHDvandGd9Q1PzubCd/\nm/a+d3+E/fHwJAcrKbdBVzHByXboYGkR3e06+Y+Khea7BBG4a0wr1oNZgmwr\nkMIBdnng03XGIdy5VMxJNqFmt42GNU28cHdMludMib1dNfeU+67jQRolNyOU\nnQwTKXBqGn3M2FCm8cfdxYMEYvt9kfrj6U8PaXfr21fGIXzoD2v5QVG+m7hv\nB7OnbpNEPyXmhtpbIOxLf53SkE2J+1+VKXY0KW63d7JQ3l3yvWpZqv91/SEz\nHlqhzt13jZv+Hp1QUgDBWysBuVB1dFLL9CDjtp5j9DzBoO8grxkqAJn/Fyz7\nDC4ordn9JG2LKtoPVbQOdAFgnoNsybuBfgQsNw87V5a61HCLnvlQdlmlo8/j\nx/p0m7ov7OiDyBIUxmH8Wqw/tbkRjirv/mWuvJg0nxgolREJn9uiYIsp9MfB\nRFGW3UVZMEOvT75lDYUddUWqJ/4GBtcjMskUwvOyMFqEFUcoPxmK2si7xbyQ\nAiU+\r\n=RmN9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICaC4r6D1FXYIvGtbd32X8WEVez5HZKOivPtAxa79smhAiAsq3uYtX/jXMjkVypEqjWxhYbbXmqq02kKHW1RR7ls7g=="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_1.1.2_1594642615657_0.8114100924132952"},"_hasShrinkwrap":false},"1.1.3":{"name":"@terminus/ui-radio-group","version":"1.1.3","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.1.0","@terminus/ngx-tools":"^8.0.5","@terminus/ui-icon":"^1.0.0","@terminus/ui-utilities":"^1.0.0","@terminus/ui-validation-messages":"^1.0.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"10.0.0","@terminus/ui-pipes":"1.0.6","date-fns":"2.14.0"},"description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@1.1.3","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-gdN5XhSXy+oLyTzYHlBJ3VKZ4HMGaDzWOsIBYSHFEGH8SJiqaZyjXTucn5rsA3cods7+FXimjKr0ltNulDPAiA==","shasum":"92303d7d9b250f42007a584046ef783a0934400f","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-1.1.3.tgz","fileCount":65,"unpackedSize":386785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDLT/CRA9TVsSAnZWagAAUNIP/1Xu5k4+d2C1GQTlds4x\n1Bbw385sb3hVAAWPERxFMqinuAXw88xNIf9N7shLUXSoxWgpVE7UhQ2ihAVJ\nsXfI8OPPdMNsYBh6oBNma43Tc7lK55+HeqdPv0GoYbzVbWm3dICYzp6+BeE4\nQjFbJwPRk8L8FoDXsLbHu9OdH+sjiD4gWgwFKGh7WG4cnx+Z+0CwF8QwVd38\naJRN1ASabRIoUhbaBtGf2YbWb5YldBRekwfXOMlL6PdE6Xh/cXrK1a7fM1mu\nAvPRNQFms+2kXQ/VSFqvtzUizn7Lg/Y9YF9rW5otWjKHcXo00iXOULAV7/00\nUMw0YQ408JCUghw5fVoihKnw676avdoPeHSmfgjn7duGb+feUVJNKrNAlKWd\nFMiZWBNUX/nW4ahPvU1w/8TM0fwrzSSboMdPUVS4aJ/fn3SApU6WiWp2N5gG\nmim6Zo41TNNC9KrQ9R+1MItvMNFiFsqZDzQp5Jn5+NkX+DbDRVH+UbQmAohi\ngUdyd3pKeFOkyhKxB0pfm4pp/GyktSTo8xt7YAqg3q2BsiF4uTiybbK7rXhE\nSnxoMTzv6Rve5nEP0VOMkm0t5R8XZMHybC6plnYopP/JPH4+nWlTLbxrErH+\nTS2esYphG4NjdNR8RSUXWUytonh0EJdGFeAinBpI+ukLx+bhn/RQqmPckStL\nxesh\r\n=5Rb8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCD98AKLP/3NkjhoFskuPZMHHi+pLw1G7VmlUudD7HbYQIgcx8oQiS1FPEuXIu6JfPM9YpEt0PjRXnbCMC8+Cu2/tg="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_1.1.3_1594668287217_0.12073266394383508"},"_hasShrinkwrap":false},"2.0.0":{"name":"@terminus/ui-radio-group","version":"2.0.0","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/ngx-tools":"^8.0.5","@terminus/ui-icon":"^1.0.0","@terminus/ui-utilities":"^1.0.0","@terminus/ui-validation-messages":"^1.0.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"10.0.0","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@terminus/ui-pipes":"1.0.7","date-fns":"2.14.0","@fortawesome/pro-regular-svg-icons":"5.14.0"},"readme":"<h1>Radio Group</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n**Table of Contents**\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [Sub-labels](#sub-labels)\n  - [No validation or hint](#no-validation-or-hint)\n  - [Event driven](#event-driven)\n  - [Required](#required)\n  - [Disabled](#disabled)\n    - [Disabled option](#disabled-option)\n  - [Visual mode](#visual-mode)\n    - [Small](#small)\n  - [Centered content](#centered-content)\n  - [Custom content](#custom-content)\n- [Test Helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@popperjs/core`\n- `@terminus/design-tokens`\n- `@terminus/ngx-tools`\n- `@terminus/ui-icon`\n- `@terminus/ui-pipes`\n- `@terminus/ui-styles`\n- `@terminus/ui-utilities`\n- `@terminus/ui-radio-group`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-radio-group\n```\n\n### Modules that need to be in NgModule\n\n- `TsRadioGroupModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nPass in:\n\n1. An array of items\n1. A form control\n1. A formatter function to determine the UI display value\n1. A formatter function to determine the model value\n\n```html\n<form [formGroup]=\"myForm\">\n  <ts-radio-group\n    [options]=\"items$ | async\"\n    [formControl]=\"myForm.get('myRadioGroup')\"\n    [formatUILabelFn]=\"uiFormatter\"\n    [formatModelValueFn]=\"modelFormatter\"\n  ></ts-radio-group>\n\n  <button (click)=\"submit(myForm.value)\">Submit</button>\n</form>\n```\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    bing: 'Some helper text for my item',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    bing: 'Some helper text for my item',\n    disabled: true,\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    bing: 'Some helper text for my item',\n  },\n]);\n\n// Create a form\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null],\n});\n\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// Use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### Sub-labels\n\nPassing a formatter function to `formatUISubLabelFn` will enable sub-label support:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n```typescript\n// Use the 'bing' value as a sub-label\nuiSubFormatter = (v) => v.bing;\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### No validation or hint\n\nA flag to define whether this radio group field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-radio-group\n  [formControl]=\"myFormCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-radio-group>\n```\n\n### Event driven\n\nListen for change events:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  (selectionChange)=\"selected($event)\"\n></ts-radio-group>\n```\n\n### Required\n\nTo define the radio group as 'required', set the required validator on the form group:\n\n```typescript\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null, [Validators.required]],\n});\n```\n\n### Disabled\n\nTo disable the entire radio group, set `isDisabled` to true:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n  [isDisabled]=\"true\"\n></ts-radio-group>\n```\n\n#### Disabled option\n\nTo disabled only a single option, define the `disabled` key on the item object:\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    disabled: true, // This radio option will be disabled\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n  },\n]);\n```\n\n### Visual mode\n\nVisual mode displays radio options as large clickable areas containing content.\n\nEnable by setting the `isVisual` flag:\n\n```html\n<ts-radio-group [isVisual]=\"true\"></ts-radio-group>\n```\n\n#### Small\n\nFor a smaller clickable area, use the `small` flag.\n\nNOTE: The maximum content should be a title with two lines and body with 3 lines\n\n```html\n<ts-radio-group [isVisual]=\"true\" [small]=\"true\"></ts-radio-group>\n```\n\n### Centered content\n\nBy default the content is centered when in visual mode. Setting `centeredContent` to `false` will use standard top/left alignment.\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [centeredContent]=\"false\"\n  ...\n></ts-radio-group>\n```\n\n### Custom content\n\n`TsRadioOption` now accepts an optional `template` key with a string template:\n\n```typescript\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    template: `<a href=\"${this.myLink}\">My link!</a>`\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    // if no template is defined, it will fall back to `formatUILabelFn` for the display value\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    template: `<h3>Hi!</h3> <p>Here is a thing!</p>`\n  },\n]);\n```\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-radio-group/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                     |\n|------------------------------|\n| `getAllRadioGroupInstances`  |\n| `getRadioGroupInstance`      |\n| `getRadioGroupParentElement` |\n| `selectStandardRadio`        |\n| `selectVisualRadio`          |\n\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-radio-group.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-radio-group\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.js\n","readmeFilename":"README.md","description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@2.0.0","_nodeVersion":"12.18.2","_npmVersion":"lerna/3.22.1/node@v12.18.2+x64 (linux)","dist":{"integrity":"sha512-BEmT2gkjFu+oemYHEdKc+Aum5idP7m67mnKf4zZqSNH0BQRMG9NbKsh1TmHc2PJZLWEBClRtqGdUEO94JPZuEw==","shasum":"cf3853e49900b3f57f829e076ea02e16f427d7a5","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-2.0.0.tgz","fileCount":69,"unpackedSize":393739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHy2nCRA9TVsSAnZWagAANuIP/iorsffo0aSSP4o8GxcY\nadl2gQoSusir+dMVY78oPPUHxnxez0TpP3gMuhoRzX93csSAfI79yZwTjjvu\n5vkK34/zjrHseDDQ/Fn2psxzY0iCAYatOlhMgM5nMm5r+JbFmOD3JJKNhPaO\niquVYPiuz/9ybcfXuuN4XzSMPYqtGnm3/FhX03Q9BAxVLN1T9Jb98mQ73EJv\njqY07iV418ppr3WLXLN+u5PT5UAP/JIYO4cqo9b6bFaNL1eNgtKGEQ1tl5ZX\nNCA7x5Kd8sCL38tnxS36oXj/wGXTMkIOJ1z/1ZhPHlYvhH18gFmxsV58ifoc\n4mjqejMly3hwUGr179zltV5Bv/EsbqkjV1co1lDMe04Yml3g6ZsWcOsQ4z3K\nXNQTjrZY9zYtt+akfHd3BjcBny/fRStYjUalSoWEedQii8ZBlQvUoEXJsNqs\nI8n1dPQJ0cjeRJtLRISxOATkYa2UEHJZjV9p6HneJ2zVXxEg4cElQlHMQAsb\nTWjfmBjykCxphagkd0gxPV3Pvk2DeueBfHegCstSImml2RHzfb4OOGj3EtQ3\nXN8+v83NI38XPulndGy6g0I/7CGebj3jMAWSbBobzYtOdfOKbvwLHs3MmbjP\n5kyWpkT4+Ac40+I3v60Oj0LX1bbz+crc16oI6LadYFEihgVSI331ll3GfTaG\n8bNw\r\n=QrvU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDTmJCjuzOSp1luIvRsNC1jR4dMRjfugu9EbPEMmuCvwAiB68ehLK8Cm3a/C58Ae+/ODPqWCYJkCoUOeljDqN1p9DA=="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_2.0.0_1595878822943_0.40496159317404934"},"_hasShrinkwrap":false},"2.0.1":{"name":"@terminus/ui-radio-group","version":"2.0.1","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/ngx-tools":"^8.0.5","@terminus/ui-icon":"^2.0.0","@terminus/ui-utilities":"^1.0.7","@terminus/ui-validation-messages":"^1.0.11"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"10.0.0","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@terminus/ui-pipes":"1.0.8","date-fns":"2.14.0","@fortawesome/pro-regular-svg-icons":"5.14.0"},"description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@2.0.1","_nodeVersion":"12.18.2","_npmVersion":"lerna/3.22.1/node@v12.18.2+x64 (linux)","dist":{"integrity":"sha512-fTJ29RjAfU6xCUVSHpYL4Y4be8adV3iC2Kz2xGvhIeW3EPFjVthyNpQIR8dQgXgkmglFlTrMf2hVsoU2OWxz5Q==","shasum":"ba19f3891e289d8730b394532ec77d879446c5c9","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-2.0.1.tgz","fileCount":69,"unpackedSize":394037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIERjCRA9TVsSAnZWagAAUwoP+wccwpWTBjnRiOAAFEhD\n/nwV58/lyttlwP63c5Jtc4WKk6wdXyi9/bXLiZkZFM5SfbaxuslS0EgGTVvH\n60RNEHjASMt6o/KfTDLTGPxdGnHDWjzTK+L7zeJSrqqhT0zSgijGRAHoS71E\nyeBSsB3FHh85iSpQJaEuJaefIJByfRO/v0valMG+QnnJhRU5TOp72qN+vw4q\n2fUXhq/vlGc5xAF5kT1pDwl0Q8Zzhj138my4AvO/7gjtWyOwmYzCxS9eBPFT\nBLd7QiyGILead8CQRCrKiwQ0V9H/NHdmR/4PzR07Ae96udlWjxk2y6UYC162\neNaOLfUSvnOZzQOjP/gJtZhQW1BbmB8oCByMHnsRnnuvViryKconUoJzI75a\noLRHkwrTxl+dCUWNtRzhmjRRFWgqMOPZ2i/dhyR0cse5VByl0rPgFYC1jc2T\naX2OvwY9pSfxwGKdJCEFKWS5nwpV7dcQ+uxAE9fpAm6LbUu9+SBs3Da/eWiq\n6Y5Cb5UAfinSX1ldmXc8UHjlpWd9E4t1urh122AjEvi7+a7/dnD0O2XaeZ9Z\nI9wdFzldfLd6/t4mvNRX7Bo5YFTVeXffSnTAse1rAfFFcMHOpqBdhH+gQjv+\nnZ0VPjt02Yibry/d9lh2IsF+aNDEoqLHZ/qL98Awcd8fzde4F4/SGdZS3SOj\npP4x\r\n=hlQS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuB/sP+4hRbVhhJKd230G9ahz3Jb78cpWj1nNMP5G9JQIhAILcrblu5XApl26Hz+yV3ofhucp+wJdBJxLhqm58f52t"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_2.0.1_1595950179227_0.6242172231792049"},"_hasShrinkwrap":false},"2.0.2":{"name":"@terminus/ui-radio-group","version":"2.0.2","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/ngx-tools":"^8.0.5","@terminus/ui-icon":"^2.0.0","@terminus/ui-utilities":"^1.0.7","@terminus/ui-validation-messages":"^1.0.11"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"10.0.0","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@terminus/ui-pipes":"1.0.8","date-fns":"2.14.0","@fortawesome/pro-regular-svg-icons":"5.14.0"},"readme":"<h1>Radio Group</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n**Table of Contents**\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [Sub-labels](#sub-labels)\n  - [No validation or hint](#no-validation-or-hint)\n  - [Event driven](#event-driven)\n  - [Required](#required)\n  - [Disabled](#disabled)\n    - [Disabled option](#disabled-option)\n  - [Visual mode](#visual-mode)\n    - [Small](#small)\n  - [Centered content](#centered-content)\n  - [Custom content](#custom-content)\n- [Test Helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@popperjs/core`\n- `@terminus/design-tokens`\n- `@terminus/ngx-tools`\n- `@terminus/ui-icon`\n- `@terminus/ui-pipes`\n- `@terminus/ui-styles`\n- `@terminus/ui-utilities`\n- `@terminus/ui-radio-group`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-radio-group\n```\n\n### Modules that need to be in NgModule\n\n- `TsRadioGroupModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nPass in:\n\n1. An array of items\n1. A form control\n1. A formatter function to determine the UI display value\n1. A formatter function to determine the model value\n\n```html\n<form [formGroup]=\"myForm\">\n  <ts-radio-group\n    [options]=\"items$ | async\"\n    [formControl]=\"myForm.get('myRadioGroup')\"\n    [formatUILabelFn]=\"uiFormatter\"\n    [formatModelValueFn]=\"modelFormatter\"\n  ></ts-radio-group>\n\n  <button (click)=\"submit(myForm.value)\">Submit</button>\n</form>\n```\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    bing: 'Some helper text for my item',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    bing: 'Some helper text for my item',\n    disabled: true,\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    bing: 'Some helper text for my item',\n  },\n]);\n\n// Create a form\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null],\n});\n\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// Use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### Sub-labels\n\nPassing a formatter function to `formatUISubLabelFn` will enable sub-label support:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n```typescript\n// Use the 'bing' value as a sub-label\nuiSubFormatter = (v) => v.bing;\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### No validation or hint\n\nA flag to define whether this radio group field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-radio-group\n  [formControl]=\"myFormCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-radio-group>\n```\n\n### Event driven\n\nListen for change events:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  (selectionChange)=\"selected($event)\"\n></ts-radio-group>\n```\n\n### Required\n\nTo define the radio group as 'required', set the required validator on the form group:\n\n```typescript\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null, [Validators.required]],\n});\n```\n\n### Disabled\n\nTo disable the entire radio group, set `isDisabled` to true:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n  [isDisabled]=\"true\"\n></ts-radio-group>\n```\n\n#### Disabled option\n\nTo disabled only a single option, define the `disabled` key on the item object:\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    disabled: true, // This radio option will be disabled\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n  },\n]);\n```\n\n### Visual mode\n\nVisual mode displays radio options as large clickable areas containing content.\n\nEnable by setting the `isVisual` flag:\n\n```html\n<ts-radio-group [isVisual]=\"true\"></ts-radio-group>\n```\n\n#### Small\n\nFor a smaller clickable area, use the `small` flag.\n\nNOTE: The maximum content should be a title with two lines and body with 3 lines\n\n```html\n<ts-radio-group [isVisual]=\"true\" [small]=\"true\"></ts-radio-group>\n```\n\n### Centered content\n\nBy default the content is centered when in visual mode. Setting `centeredContent` to `false` will use standard top/left alignment.\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [centeredContent]=\"false\"\n  ...\n></ts-radio-group>\n```\n\n### Custom content\n\n`TsRadioOption` now accepts an optional `template` key with a string template:\n\n```typescript\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    template: `<a href=\"${this.myLink}\">My link!</a>`\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    // if no template is defined, it will fall back to `formatUILabelFn` for the display value\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    template: `<h3>Hi!</h3> <p>Here is a thing!</p>`\n  },\n]);\n```\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-radio-group/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                     |\n|------------------------------|\n| `getAllRadioGroupInstances`  |\n| `getRadioGroupInstance`      |\n| `getRadioGroupParentElement` |\n| `selectStandardRadio`        |\n| `selectVisualRadio`          |\n\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-radio-group.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-radio-group\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.js\n","readmeFilename":"README.md","description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@2.0.2","_nodeVersion":"12.18.2","_npmVersion":"lerna/3.22.1/node@v12.18.2+x64 (linux)","dist":{"integrity":"sha512-RYjXOR2cc0R/STpYjxaDL1OyQB8UEGawXHBz2bJLZu/wb1fu9I5T/QTYjiC37hlVMD7wCU3+YTeDaiLZIQh6sQ==","shasum":"d9e250bb86b6cc0511642b54bb1b17a55a8f808c","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-2.0.2.tgz","fileCount":69,"unpackedSize":394722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIG5pCRA9TVsSAnZWagAA4IgP/i4AsTEkS3FFbcccHF2v\nWn90rpq5xxmw0N5ty4B8FvpKbQjwjtnEp6sQJkK+BlAZ1aGLFUJng3cNQFDV\n6jcLl06sEAcltR+lE7YcucmB09YFKOENQHUmCJnVd/QztHUdZF3fZ+tj3Eu3\nYEqKEUBcdTMEklYYlBO72QfjgN9hwJCZrgVssOf7xhyFCrvfP4bgJ+heVw4s\n5WZvmQzh9yzcST4EJ3f0ykSSvtX5vV3Ikv47Jhy5wvGecjP3SVfHCRXFgcX3\nNaVkKqINFqVWb7wz7wwUe7WoEBH/x9t0EsHB9Ww5ieOESbidXbzFlnSsX78u\nZRWeysAhGhwk7vm6YqVITOc9WZz0Xutn/VDlJ1/VVzKeI54ADXIBRynvZrM9\nQNBV02hIt01y2k0PV/eemz/S4D+57MRcTSxv/+6Gg2ZPr35KFh8wWXSiwkUo\nUWWvrrHKMt40TVc+KKCf4k72RDdCqEFyRxljMk86I/dTiRdOk7+15neC2qvA\nwyvLnsauLUEiqa+tUh83VqBfXR2KkG53qf2EDDzWPcaSPGdxbg1SdFUqxZ47\nztY57S3+dUgqjP3PMqlqZcmODMX9ArMJKvF//cdRU8xlGKV+kK1yxaG5Jxqi\neF5YFo8O8Ze1VxFhEKZA2PiRwvUXGO0FXGVN31R9l3i2dTh+fTjjMk59LIDY\nR9Qc\r\n=+/rE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdJ66a2S9037YLIHYxv0qe//MdP61c4WjDIFDultshAQIgN2NAhY4AfU3YMI1f1hBr9k5pHHF7DqBsQkNQMwXeffQ="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_2.0.2_1595960936778_0.47965119644061227"},"_hasShrinkwrap":false},"2.0.3":{"name":"@terminus/ui-radio-group","version":"2.0.3","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/ngx-tools":"^8.0.5","@terminus/ui-icon":"^2.0.0","@terminus/ui-utilities":"^1.0.7","@terminus/ui-validation-messages":"^1.0.11"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"10.0.0","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@terminus/ui-pipes":"1.0.8","date-fns":"2.14.0","@fortawesome/pro-solid-svg-icons":"5.14.0"},"description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@2.0.3","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-kbHOlfclKlKwQ78AWOBEPMWcaDWIjIRO7EEnsmhLXafnbdbR8LTlJeuJmwx2r1RwL6Fto1X5nJqUMu3FxcrheQ==","shasum":"226434a189e8aee5a331d21a3f9c0b787f9bfadd","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-2.0.3.tgz","fileCount":69,"unpackedSize":394990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIXQqCRA9TVsSAnZWagAAzckP/AkVCxoVmwJP4MaNt68X\nJZ6xPGcZcnstRO2PeYSCulF2CgdElWTV/AlmGe6W94hCDWNZVhgGS4WdQmu7\nlHqwkvjeiLuCb5iEESOCFK49D/3fGdhF7mJdsJ4lkPKRXD4aina2FbsD8rCe\nKgYrQ8aNp1WlIGxQxB6Jc6VMVTNZBYI+Ffu5D6lMxsMhYsyChbxXS/DPHYvW\nzRIupCb3gR8zNOvaMcxRjL/kuBcNZfwbC8nztvjAL27LiapwN+6Gjm4NvQ3s\npJBV1AzZXHuKzGOu8qXSvEB0LJU+uMDc5ZWVgIRlI5BD7kX9CqQMHn/Qh/Y7\nr8BEsvvitGg8JvTVGpY0A85DEXoHYi9/RxJ5HdcGedHp97O30ihK8bHiqZfJ\nbzNxKiGljW9yz6Vg/ygOaNTNPYYEi19Ozvt1KZ8BL6XuDU6Tng0S9/rsTEm6\n36mNApNUOR1znpyXeQ6KjW7Q83m6htXmZukhmIGdL5pAloHNQrQs/T73X5Xj\nxCazGKPB19A38UGdL4aFttOfVoPZZRkirHepoBvYMV7mInWgf6QNXrl9B4Mo\nQV7APK5Ft/wpc3C7B7ivRJsMHB0R/BOGfWITX/LIgFKHVGPtCadl5iqpMbXF\nWTJ0T+1hrj1gfmaJkmj8rdDgYuRGtFqWcxj7eOtt04ufRpNM5cASs9qZ1IDb\nLC5C\r\n=yfcN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE/PBOv65ujHO0hwzRkcP58NKwuvpDKyMI+vMGT/sjdhAiEAxt3aYpvyx29kobFedT0WGz7TP0jchhVkvD3J5Ikqhvc="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_2.0.3_1596027945926_0.7888800921146628"},"_hasShrinkwrap":false},"2.0.4":{"name":"@terminus/ui-radio-group","version":"2.0.4","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/ngx-tools":"^8.0.5","@terminus/ui-icon":"^2.0.0","@terminus/ui-utilities":"^1.0.7","@terminus/ui-validation-messages":"^1.0.11"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"10.0.0","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@terminus/ui-pipes":"1.0.8","date-fns":"2.14.0","@fortawesome/pro-solid-svg-icons":"5.14.0"},"description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@2.0.4","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-kc5ki8UwfYos0Q/S+ynumqIj49CTN9j33H2dCnsdcY9QldoXBEK3rCUJZZu9Y859wz8s5I+GAqyCeT9uSmGHCg==","shasum":"f159b0acc7be3028e216524e9a47e89016d5b928","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-2.0.4.tgz","fileCount":69,"unpackedSize":395208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIZb+CRA9TVsSAnZWagAAdOsP/2sWEEcr0XAUWalffLDG\nXMTQcLRWjMlj/LkRYzKl1I1H+OhoRGPDyW27mtsKpyw1NeM7D+I49MeypwVB\naInlf/ZldWKQXqRBiv1/GglbBmJCApBCNsnqNyxKRz4DsC0rI+JE0XdleCXX\nc0cMdkh/hk4B7BTBMSdUX0PVjPVYYL42lPCM07WfGdSLWp3dks4SS07fhu+L\nOX6g7FcENeQGEPaTOm1Mn0BjHo/oQkbBlMdqE49d7lEVEn2qXdgAP/+NRq/V\ne0jhzZnEUfxsQVL8oy+1buiJwymlHD0s1dGN9yIy4ACaSKYOX15iOfaGOJht\n1H8l1M/d7rl28S2uI+0AMaW0oM2Lu0a+ShgZcQOpYFzuk2cqyQtG3dzZ5DbP\ni8hfOvmdlBL4q2wjYwVg+z1czX3ItnA817iPPnH+DnraidZTWqjiTsm5Xflk\nw4RmoodPO6JFSc/8dheWjHQlVW6jVy5+9lT7zesJKDgIMZ8PkORob+GnZ/ah\nzrpb3AoEu/E/vwapRRYmQui6aWFlDaB0W1gvv3Hsqf2q2epoTocRtwghvfiC\ndQf9OlbQwZyJl+4AhNU9eTeazEltIxye8gNjAekWNCpn2uZ+gwMWbx5CJ1fR\nKLsSIrjHmEM5RqoBNVJgWwRHmNS6mRxkS0IDWhn8cZOtdo16U+6mCMosqQCY\nKqop\r\n=j5WE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG3pBeHvR9hyn9/hT4aDCLkEXaeJZ8ECYguW95BvyXmAAiANXi8rC13JSpmi4C2JunvcSA0eEgPBJrNo0gCAL/QY3g=="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_2.0.4_1596036862130_0.6207646600365686"},"_hasShrinkwrap":false},"2.0.5":{"name":"@terminus/ui-radio-group","version":"2.0.5","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-icon":"^2.0.0","@terminus/ui-utilities":"^1.0.7","@terminus/ui-validation-messages":"^1.0.11"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","rxjs":"6.5.5","date-fns":"2.14.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@terminus/ui-pipes":"1.0.9","@fortawesome/pro-solid-svg-icons":"5.14.0"},"readme":"<h1>Radio Group</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n**Table of Contents**\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [Sub-labels](#sub-labels)\n  - [No validation or hint](#no-validation-or-hint)\n  - [Event driven](#event-driven)\n  - [Required](#required)\n  - [Disabled](#disabled)\n    - [Disabled option](#disabled-option)\n  - [Visual mode](#visual-mode)\n    - [Small](#small)\n  - [Centered content](#centered-content)\n  - [Custom content](#custom-content)\n- [Test Helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@popperjs/core`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-icon`\n- `@terminus/ui-pipes`\n- `@terminus/ui-styles`\n- `@terminus/ui-utilities`\n- `@terminus/ui-radio-group`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-radio-group\n```\n\n### Modules that need to be in NgModule\n\n- `TsRadioGroupModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nPass in:\n\n1. An array of items\n1. A form control\n1. A formatter function to determine the UI display value\n1. A formatter function to determine the model value\n\n```html\n<form [formGroup]=\"myForm\">\n  <ts-radio-group\n    [options]=\"items$ | async\"\n    [formControl]=\"myForm.get('myRadioGroup')\"\n    [formatUILabelFn]=\"uiFormatter\"\n    [formatModelValueFn]=\"modelFormatter\"\n  ></ts-radio-group>\n\n  <button (click)=\"submit(myForm.value)\">Submit</button>\n</form>\n```\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    bing: 'Some helper text for my item',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    bing: 'Some helper text for my item',\n    disabled: true,\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    bing: 'Some helper text for my item',\n  },\n]);\n\n// Create a form\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null],\n});\n\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// Use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### Sub-labels\n\nPassing a formatter function to `formatUISubLabelFn` will enable sub-label support:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n```typescript\n// Use the 'bing' value as a sub-label\nuiSubFormatter = (v) => v.bing;\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### No validation or hint\n\nA flag to define whether this radio group field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-radio-group\n  [formControl]=\"myFormCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-radio-group>\n```\n\n### Event driven\n\nListen for change events:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  (selectionChange)=\"selected($event)\"\n></ts-radio-group>\n```\n\n### Required\n\nTo define the radio group as 'required', set the required validator on the form group:\n\n```typescript\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null, [Validators.required]],\n});\n```\n\n### Disabled\n\nTo disable the entire radio group, set `isDisabled` to true:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n  [isDisabled]=\"true\"\n></ts-radio-group>\n```\n\n#### Disabled option\n\nTo disabled only a single option, define the `disabled` key on the item object:\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    disabled: true, // This radio option will be disabled\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n  },\n]);\n```\n\n### Visual mode\n\nVisual mode displays radio options as large clickable areas containing content.\n\nEnable by setting the `isVisual` flag:\n\n```html\n<ts-radio-group [isVisual]=\"true\"></ts-radio-group>\n```\n\n#### Small\n\nFor a smaller clickable area, use the `small` flag.\n\nNOTE: The maximum content should be a title with two lines and body with 3 lines\n\n```html\n<ts-radio-group [isVisual]=\"true\" [small]=\"true\"></ts-radio-group>\n```\n\n### Centered content\n\nBy default the content is centered when in visual mode. Setting `centeredContent` to `false` will use standard top/left alignment.\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [centeredContent]=\"false\"\n  ...\n></ts-radio-group>\n```\n\n### Custom content\n\n`TsRadioOption` now accepts an optional `template` key with a string template:\n\n```typescript\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    template: `<a href=\"${this.myLink}\">My link!</a>`\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    // if no template is defined, it will fall back to `formatUILabelFn` for the display value\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    template: `<h3>Hi!</h3> <p>Here is a thing!</p>`\n  },\n]);\n```\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-radio-group/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                     |\n|------------------------------|\n| `getAllRadioGroupInstances`  |\n| `getRadioGroupInstance`      |\n| `getRadioGroupParentElement` |\n| `selectStandardRadio`        |\n| `selectVisualRadio`          |\n\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-radio-group.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-radio-group\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.js\n","readmeFilename":"README.md","description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@2.0.5","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-pB0cpxgPnVP0PpyLcgFA5VV2VhEqNucS80uspipIz1NxkKO5T9rVs8tN4g3GoPL2W9pATKB/brx53K9IW2SFoA==","shasum":"c9011e66fb21c22cad08ece8a2d43451803c1356","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-2.0.5.tgz","fileCount":69,"unpackedSize":395337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJCQqCRA9TVsSAnZWagAAFsgQAJOFlqZMZZZMYrD6fYxO\nbUVnQ6tG4oXN9IV+UIim1t7eKhnG3I51OvfN41q9kD/RmHZvfu1vCPKHtA/x\nuilTJImDCyBqUGrSDgSkn+t1OfdwfJPmtN9nTl58FdlxP0k0O6n+MPXuz8HM\neXxhOyE6bDXuJlHGZWS1MejEQn9CWPjOOOpjOYyaW/wo10EZQNt8J4CMl0cF\nMF3fX8abFt1vvlLU+1Iqk95Bx0GsFAVrXbT70YBe7Apt/RO4JTn10P3zJMPQ\n+TKfqhDHle+Pjdpt3xxRum1FQ2C94FGErlsSFx9V29KRPC5G8XxhhAXXYC7O\ny58vbirPOndYTOF6V4EN8esaHAXXJ4JshoxFOPfHMpSX5IPOiYLglnkI4qWX\nrhKsCjFBGgBRXl9ffnbruMCOiL+kWzOKQs6rOmc3D9qx2ReI7oWQ9NySVFIA\npfj3JQTuTdwOsIUsMd3afe5uWIREWK3qnCl6gB4p/qS6IcN32+GXOd90cHK+\nlQ0rhVsacNHESOVP11VaPGEO+iA3dOgtEIjqcEq+9xcZgv4VFNLa/7K4J8uR\nNQedazdEpcinxzq8nppVswCCJk8U7UIpCkLrzsJFCKa/U6Uaqjgwn+7KdiAG\n/pgcgwQMicdBCC3irY90Ie2CdnLyurRNfh0iy0+U9XubDUWQazKnx7xIXd3p\nB5+w\r\n=YkmX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAgWkvILE+a1mvlOygDXY0uWyZILhLZLv/uZBatanVLwIhAJLn5cJz0YNV+t029W/S0dKfSq2+9t0/PVM3CncxbxL6"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_2.0.5_1596204073677_0.8220365077342711"},"_hasShrinkwrap":false},"2.0.6":{"name":"@terminus/ui-radio-group","version":"2.0.6","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-icon":"^2.0.0","@terminus/ui-utilities":"^1.0.7","@terminus/ui-validation-messages":"^1.0.11"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","rxjs":"6.6.2","date-fns":"2.15.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@terminus/ui-pipes":"1.0.9","@fortawesome/pro-solid-svg-icons":"5.14.0"},"readme":"<h1>Radio Group</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n**Table of Contents**\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [Sub-labels](#sub-labels)\n  - [No validation or hint](#no-validation-or-hint)\n  - [Event driven](#event-driven)\n  - [Required](#required)\n  - [Disabled](#disabled)\n    - [Disabled option](#disabled-option)\n  - [Visual mode](#visual-mode)\n    - [Small](#small)\n  - [Centered content](#centered-content)\n  - [Custom content](#custom-content)\n- [Test Helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@popperjs/core`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-icon`\n- `@terminus/ui-pipes`\n- `@terminus/ui-styles`\n- `@terminus/ui-utilities`\n- `@terminus/ui-radio-group`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-radio-group\n```\n\n### Modules that need to be in NgModule\n\n- `TsRadioGroupModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nPass in:\n\n1. An array of items\n1. A form control\n1. A formatter function to determine the UI display value\n1. A formatter function to determine the model value\n\n```html\n<form [formGroup]=\"myForm\">\n  <ts-radio-group\n    [options]=\"items$ | async\"\n    [formControl]=\"myForm.get('myRadioGroup')\"\n    [formatUILabelFn]=\"uiFormatter\"\n    [formatModelValueFn]=\"modelFormatter\"\n  ></ts-radio-group>\n\n  <button (click)=\"submit(myForm.value)\">Submit</button>\n</form>\n```\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    bing: 'Some helper text for my item',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    bing: 'Some helper text for my item',\n    disabled: true,\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    bing: 'Some helper text for my item',\n  },\n]);\n\n// Create a form\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null],\n});\n\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// Use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### Sub-labels\n\nPassing a formatter function to `formatUISubLabelFn` will enable sub-label support:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n```typescript\n// Use the 'bing' value as a sub-label\nuiSubFormatter = (v) => v.bing;\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### No validation or hint\n\nA flag to define whether this radio group field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-radio-group\n  [formControl]=\"myFormCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-radio-group>\n```\n\n### Event driven\n\nListen for change events:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  (selectionChange)=\"selected($event)\"\n></ts-radio-group>\n```\n\n### Required\n\nTo define the radio group as 'required', set the required validator on the form group:\n\n```typescript\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null, [Validators.required]],\n});\n```\n\n### Disabled\n\nTo disable the entire radio group, set `isDisabled` to true:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n  [isDisabled]=\"true\"\n></ts-radio-group>\n```\n\n#### Disabled option\n\nTo disabled only a single option, define the `disabled` key on the item object:\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    disabled: true, // This radio option will be disabled\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n  },\n]);\n```\n\n### Visual mode\n\nVisual mode displays radio options as large clickable areas containing content.\n\nEnable by setting the `isVisual` flag:\n\n```html\n<ts-radio-group [isVisual]=\"true\"></ts-radio-group>\n```\n\n#### Small\n\nFor a smaller clickable area, use the `small` flag.\n\nNOTE: The maximum content should be a title with two lines and body with 3 lines\n\n```html\n<ts-radio-group [isVisual]=\"true\" [small]=\"true\"></ts-radio-group>\n```\n\n### Centered content\n\nBy default the content is centered when in visual mode. Setting `centeredContent` to `false` will use standard top/left alignment.\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [centeredContent]=\"false\"\n  ...\n></ts-radio-group>\n```\n\n### Custom content\n\n`TsRadioOption` now accepts an optional `template` key with a string template:\n\n```typescript\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    template: `<a href=\"${this.myLink}\">My link!</a>`\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    // if no template is defined, it will fall back to `formatUILabelFn` for the display value\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    template: `<h3>Hi!</h3> <p>Here is a thing!</p>`\n  },\n]);\n```\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-radio-group/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                     |\n|------------------------------|\n| `getAllRadioGroupInstances`  |\n| `getRadioGroupInstance`      |\n| `getRadioGroupParentElement` |\n| `selectStandardRadio`        |\n| `selectVisualRadio`          |\n\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-radio-group.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-radio-group\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.js\n","readmeFilename":"README.md","description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@2.0.6","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-8m7gKikRBnqkj4u3ncmUffEw1+o3grlYpUBA+6BWgH2BEGfWQzatrihL+1RMHK8V3J6TJa00yX1Fbm09miF92A==","shasum":"0183487bd9020e363e76e5b0e76506dae987f094","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-2.0.6.tgz","fileCount":69,"unpackedSize":395549,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJEUjCRA9TVsSAnZWagAAbKAP/jUmCW6UwqbktwFhfPB5\ng+e1iYmfCC2NlhNmZW06fGHF7KgLYL5Lt/h7+xK0+pjUxEOe9/DXVem6gL9/\naPRnc9BJzIbBIapZgNHk+ClGPFMrJsLzkV3pCuCV7/4ov0W5pTwHKer0u34S\nUeFqRkG0cf/qkig72lIgvIVxKjieVPitv1Lg455JaTyMEAMaxGgwFHkuh1GC\n2e5rgjOGnF1eEmqrUe346j3vyqFDOJwuqDMowC+a7EmBtNcDYPL41z5oOz7K\niwnq4Z9lBYGLEaFalMinhqIac6jxo4XHgB87p28AcKxyItp+2AYgStpEg+he\nrbvp3Zy9kqTX7nHgNB8+0U1ghmWi6Yk0EyQBPzWpd5t5abB/A38bp66yIJj0\nmEEaTcv1B/Wq0E52qDk7tG1H/zLX7lIuCU5wRFdB5eDV4YcbV/4JJYsPfYzO\nYnxjwwmLgMDdNnXdLMsThHoTBRihtsL/G15qhZYXrMQfkPfcz/cd5F3mJb0L\nutyrYo5eEcOmAIaZ8qPish9vbHqK+j4348lqyNof2ObFRuk/hxkviU4tlgEX\nZwFceORtw7SzrsHvBmRiPzRCxjlI2hZ2aSoMpS5RxgBxk3UHJWOatwaHfePg\nseYk3yI+GsAQnrg0mWENriEdd9LOTnXtm3FbLAi+DQeP1vMXPwY5uxqfQidb\nWSTJ\r\n=oFas\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNpWMVZDfaYLnZXCMdcreNGJnZRiGQbBoTp+1Yrd8qIQIgO/Pe28heqGBaVTMTczNBzC10xuAuM5ml02aVvVQU4Eg="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_2.0.6_1596212515238_0.4955565681066427"},"_hasShrinkwrap":false},"2.0.7":{"name":"@terminus/ui-radio-group","version":"2.0.7","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-icon":"^2.0.0","@terminus/ui-utilities":"^1.0.7","@terminus/ui-validation-messages":"^1.0.11"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","rxjs":"6.6.2","date-fns":"2.15.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@terminus/ui-pipes":"1.0.9","@fortawesome/pro-solid-svg-icons":"5.14.0"},"description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@2.0.7","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-3ZFKu7CQegieQslBdCvZZw1HfRQ0bDDOLsKmYGJtN4LKXVXQ+z5YAWYpbtCCl3ud41N5H/XP6lB5RbgrNAOgtg==","shasum":"97aaf1fa7a27d230451274bbc1543cbae2773aa5","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-2.0.7.tgz","fileCount":69,"unpackedSize":395835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKwSMCRA9TVsSAnZWagAA0aEP/ih/vOCS35VjlzH3dC+b\nrlPde8JdMLp4+qKLlTe/9irfG+/IWiAcrj97lPTDXL4+0q9nhvK+skhOfwUb\ntHgyNrMP0NDxF7GkBJbWBDFUp8VI8hjr7SOlzzJ6GUlQVPn3bcz5I/ZF7Zif\npWGzhOp0tD6L4UULclMPG5cLAhVTr3pJsPfyjGSGm1rDVEQzZ9Re2HWPT6+V\nxLLs77JddHTYX8Ug1hxRBfM01aOz3kQpyKIfEA4ymP3P8vaFr1G8jdSjJsXA\n+3opY8lC8sld2JEqf2DrZ8N9IUsrlhp8mhlwcLpYHN74+emUrGdtIlgTdAku\nTR+XwoUQv2OYZk1Y30AyyAPWygRFdmX/laow+SQerNp/MxM1ICxGIPYmDq3S\noUz32sdnL2o8q5334ac3MLpc2ueUb0fMimdRERfwlYZwiM/ojARXIn1xVj7z\nBrHUyfHTqiGVLBRQCQHIOmrbX05fgwmduB6U5xtrJj82tYE9wO4sBlMva9wl\njSWPitfdbVa0CmFjckuRJaIM34ZHu9Bb2/O/z2zLkNIZZjXLJnAVETSZoy/K\n218x8LfeCSkGGUFl5XTacyGbMqR2b/k/4jKvVRdCBd/RvsE2R9Q/zLMo6Dg6\n8D6sYGh4CcAgcG93FTfW+HgOzk/NjM/r3f7MTkzV+e4KQpCgqb5BzY79X8/W\n/20Y\r\n=mAtb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOPu3k7i6+bCWChzdcTXYVaMksmJlOCKKCVMdrTeBqmAIgY3RyzrKsBRdtbfvuCNk5FmAHodBvsrvhkoqVo+9OnTk="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_2.0.7_1596654732026_0.31872488522845255"},"_hasShrinkwrap":false},"2.0.8":{"name":"@terminus/ui-radio-group","version":"2.0.8","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-icon":"^2.0.5","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","rxjs":"6.6.2","date-fns":"2.15.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@terminus/ui-pipes":"1.0.10","@fortawesome/pro-solid-svg-icons":"5.14.0"},"description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@2.0.8","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-qMTHzbU9wMe2fAod/winekp+wq4uI5lrTwXNOLajDffBOQhIjHVV/BO66quAVtIE4LeVV8aXdofdAZHyR8Yfgw==","shasum":"c01a505cfc41f6cfd1f5ecc40363ff1511d2df68","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-2.0.8.tgz","fileCount":69,"unpackedSize":396049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMXP1CRA9TVsSAnZWagAAGf0P/jzs9+U3+4rR/KSpe0xV\nK1FAqK7/wZdJbcXxar3cwSJ2RT3KlxGnQxcq9prJEZRbWdU8qyHHGXVoFFGU\nofPSJQAFxklOAR7X6duZ0bQKjeLdq0CO7O46BDkR0RebkL7Ml5Wn/VNFK1s6\njG2PG8hfm6/afseK7+cvJlAnYdVPmuyQ8V+kbK5SLxx9lDHkd3HwRlU3ToQT\nGgY56tX8bslCNLT+CkxGbvghEpz2urtoJ0GcjDA+7I9Zzl3QQ1G6nOJfD42E\nhRRe/KB6u1ThaGjZtW2GL5btz2IYA/0QLCTcKtq4oFiUTbkrG2+fHtjpKSqJ\n5zgdtGaHUuWUA43XcDt1o4+WgWRZEYqwd3Q7i6+pZ6xl5feo6DiVj6VW0ApE\n6bL+zTC2NmJD7aQBPaRyZfsL3mqnEaW8yVh6OH4tzqjxsmcuhQiPtHaXI9aA\n/AYFzeZ7uQoK1H/nJSC1DdHcB+MyjIv4mmSk7R2WY5wv+7kbHcejyRdd4dof\njiXD0sngrhNZwNiMQqc6S7a6WOuvtFNR7lLe8Y4xuP3aHUpNcyeBkySmhSai\nY7vfpYdmtcxNn929Gt6eDCtUmwpsfdAgxd1wpMokd44RDS7isBnya5dWhRg6\n/enAWrxC1FZn5j4jVy8wVXyO0S964SVUxefv1wtVqgRdS84ptgFwYF/+fzM5\npBlt\r\n=li3u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFxL8PHjMbVWOtWOQqPTCWGpQLNUBCV7h2cqJMRDVBuYAiBogn5j4KgIbMSHXcVCW3yR274+KW3WM3IFY2drSSgEHw=="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_2.0.8_1597076468818_0.953774960870079"},"_hasShrinkwrap":false},"2.0.9":{"name":"@terminus/ui-radio-group","version":"2.0.9","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-icon":"^2.0.5","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","rxjs":"6.6.2","date-fns":"2.15.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@terminus/ui-pipes":"1.0.12","@fortawesome/pro-solid-svg-icons":"5.14.0"},"readme":"<h1>Radio Group</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [Sub-labels](#sub-labels)\n  - [No validation or hint](#no-validation-or-hint)\n  - [Event driven](#event-driven)\n  - [Required](#required)\n  - [Disabled](#disabled)\n    - [Disabled option](#disabled-option)\n  - [Visual mode](#visual-mode)\n    - [Small](#small)\n  - [Centered content](#centered-content)\n  - [Custom content](#custom-content)\n- [Test Helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@popperjs/core`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-icon`\n- `@terminus/ui-pipes`\n- `@terminus/ui-styles`\n- `@terminus/ui-utilities`\n- `@terminus/ui-radio-group`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-radio-group\n```\n\n### Modules that need to be in NgModule\n\n- `TsRadioGroupModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nPass in:\n\n1. An array of items\n1. A form control\n1. A formatter function to determine the UI display value\n1. A formatter function to determine the model value\n\n```html\n<form [formGroup]=\"myForm\">\n  <ts-radio-group\n    [options]=\"items$ | async\"\n    [formControl]=\"myForm.get('myRadioGroup')\"\n    [formatUILabelFn]=\"uiFormatter\"\n    [formatModelValueFn]=\"modelFormatter\"\n  ></ts-radio-group>\n\n  <button (click)=\"submit(myForm.value)\">Submit</button>\n</form>\n```\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    bing: 'Some helper text for my item',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    bing: 'Some helper text for my item',\n    disabled: true,\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    bing: 'Some helper text for my item',\n  },\n]);\n\n// Create a form\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null],\n});\n\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// Use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### Sub-labels\n\nPassing a formatter function to `formatUISubLabelFn` will enable sub-label support:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n```typescript\n// Use the 'bing' value as a sub-label\nuiSubFormatter = (v) => v.bing;\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### No validation or hint\n\nA flag to define whether this radio group field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-radio-group\n  [formControl]=\"myFormCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-radio-group>\n```\n\n### Event driven\n\nListen for change events:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  (selectionChange)=\"selected($event)\"\n></ts-radio-group>\n```\n\n### Required\n\nTo define the radio group as 'required', set the required validator on the form group:\n\n```typescript\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null, [Validators.required]],\n});\n```\n\n### Disabled\n\nTo disable the entire radio group, set `isDisabled` to true:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n  [isDisabled]=\"true\"\n></ts-radio-group>\n```\n\n#### Disabled option\n\nTo disabled only a single option, define the `disabled` key on the item object:\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    disabled: true, // This radio option will be disabled\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n  },\n]);\n```\n\n### Visual mode\n\nVisual mode displays radio options as large clickable areas containing content.\n\nEnable by setting the `isVisual` flag:\n\n```html\n<ts-radio-group [isVisual]=\"true\"></ts-radio-group>\n```\n\n#### Small\n\nFor a smaller clickable area, use the `small` flag.\n\nNOTE: The maximum content should be a title with two lines and body with 3 lines\n\n```html\n<ts-radio-group [isVisual]=\"true\" [small]=\"true\"></ts-radio-group>\n```\n\n### Centered content\n\nBy default the content is centered when in visual mode. Setting `centeredContent` to `false` will use standard top/left alignment.\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [centeredContent]=\"false\"\n  ...\n></ts-radio-group>\n```\n\n### Custom content\n\n`TsRadioOption` now accepts an optional `template` key with a string template:\n\n```typescript\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    template: `<a href=\"${this.myLink}\">My link!</a>`\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    // if no template is defined, it will fall back to `formatUILabelFn` for the display value\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    template: `<h3>Hi!</h3> <p>Here is a thing!</p>`\n  },\n]);\n```\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-radio-group/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                     |\n|------------------------------|\n| `getAllRadioGroupInstances`  |\n| `getRadioGroupInstance`      |\n| `getRadioGroupParentElement` |\n| `selectStandardRadio`        |\n| `selectVisualRadio`          |\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-radio-group.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-radio-group\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.js\n","readmeFilename":"README.md","description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@2.0.9","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-/fPvgbbN6rwvN83STQQeFpnS391SGlLtDi0x2kCnCwAh9/Mob19qXdgyUvK6GSNNa/0ObJldqUlSDlJJY/dThQ==","shasum":"d9a637be649a0809e12898537c0d2fc2395228ad","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-2.0.9.tgz","fileCount":69,"unpackedSize":396188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNq56CRA9TVsSAnZWagAA7CIP/R+lFtXVCg+Vd7ZzyEyk\numZ47pZM8Hah3eSEw6WJeZZvgcLmC2GTIak045DBa3dkqCb9UmtLdFkBQRr+\n1BoRiPDqMzHCGRkk5xNPKKbLUZhMvoRUD0ePkMv7+WMpwQmU3SdeqBfCpNaE\ntyRbhZT3r8gVaLfY+6RNpAT71bRa0urtfIX193kKaX9YM+gcY1eRN0WZ2/+/\ndHzOwxvsDp02sefwUUPOsp4ZT0NbCvqmdJQ8hS0tRRTuh6CNHw4kQHz4Xy/A\neD2BLC+82x6UBH3v7BevRIlMU9fIFuOFvPzLI+JZrKawvMEWZ4CYpZXPd7df\nm6JF5mpwZAoSpee68Uw79ruDF5u+uvY8DgRagaqskJFQALXJ8y57fJjzloxv\nY/rI4uM4qhtybGasZPXsvfotjnZ3bH2c4aCw83NFZr49yg+P2K10ZvYRmEqi\nQ94KorqR+YkJUeIugdZjFoGN0EDmVNF+vzJ7O1VO4pjhCVJfIePUOufVtB8U\nSom00FLmuZjD+dFpn9iUzVlkFTojNcFf5m1ZYkoE0eL52BCDAu81Be5rK/wU\np19hgbybS9qYsYYk5sjqfTJHFTDqAzdIeuLKGwAbYxZJEvzCUIr/8nN8IclS\nheA4nqdn31oMKIsuXiJnozDf1sgdCWg7oAU6FHuqP9lgDcvbE7ZG4TR8EZvT\nr/WP\r\n=nOMJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDV1+bXcaZY40lKpCklbtHVhi51BM30PuBkeXNRKLckpwIhANvFAQoorYtxlf7sXV0v7PssAvl6YdaR+8aTmDj63Kjb"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_2.0.9_1597419129818_0.5205907239220269"},"_hasShrinkwrap":false},"2.0.10":{"name":"@terminus/ui-radio-group","version":"2.0.10","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-icon":"^2.0.5","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","rxjs":"6.6.2","date-fns":"2.15.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@terminus/ui-pipes":"1.0.12","@fortawesome/pro-solid-svg-icons":"5.14.0"},"description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@2.0.10","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-a1qwVxhDX9l7bf+D2F5i/8fFTckGhGwRsSZ1LLQ54fUXp60QV1efSPewtGE10zdeoL+pkykI7VmLpxmN7kUhHw==","shasum":"e1e47201da4764d69b4176d237ba7f1bfb6cec41","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-2.0.10.tgz","fileCount":69,"unpackedSize":396516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPpeHCRA9TVsSAnZWagAAPIsP+gLITRmhyAin7WWRQ5De\nbtaFNJ9H3wqvYTC8Cf5RA58URMij0lOrLbs6jKjeVLDYIJlLst0bJh2q+LqX\nhMtKHQG+r7O7nIQFyFvac//yg5lqGqni7o0ysyyVNVLO8oP5OLI62dHZ2n4X\nPD0sR2B9kNS0o4HtsZUXDVJf4OOQlzRTJeptBchCHPmI+AAN9NyN+vWB/1pk\nGp1EbKuEgD6O0Z0+pW+GFjsPxXHERGrTEo3/Bngje13+YAVRn3WeU83s6pXE\nYgTfUg4EtavRAt7FfM2p8P0YPmF+jCxBZKtmKBb8kTiTDlKrxoB5JGEgiJBL\nNxG/774fnMZ0W9d4uxOoP3Dbs652Tl7SZANDa1hxecfBLkDm5XyYse6Kp6mZ\nAZYIv1bvEk7qOyPIaJmRefZAtIod21AusZwrYlzRRPZPTiFlMvXBQ4/PSXEu\njkN1BGCmcLMxlCPg6ZedT4YOe1pWNq+Xxcm3KpxV3tQ2+c1igS6cT1T3ij2E\njwHi/aXDi3e4/tFRsKWiY48Eia1Cmb8x2R4ESroctZmu91bP5Y1es7y5UBbO\nZbg+/OizA+9rD5FRTQ/14wvJXSIayJ2SYMEWwTHwDvJGEkw6FSNcniIrRMeD\n33W2wiXuxG1adoPgSp2aRFBnAVHGw7iAi0zm4gcMJUJrm19lE1xpvMD5Vzd4\nnkeZ\r\n=UGAN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFM1lxFoDHujhqKonvOKBwMCIBQR6Drja9obsYbFv8lQIgBCv1oF6R/yWc3FO4EaMaw7zjq+ziXWc35+iwhcF8ZJc="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_2.0.10_1597937543192_0.22317666331324304"},"_hasShrinkwrap":false},"2.0.11":{"name":"@terminus/ui-radio-group","version":"2.0.11","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-icon":"^2.0.5","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","rxjs":"6.6.2","date-fns":"2.15.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@terminus/ui-pipes":"1.0.12","@fortawesome/pro-solid-svg-icons":"5.14.0"},"readme":"<h1>Radio Group</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [Sub-labels](#sub-labels)\n  - [No validation or hint](#no-validation-or-hint)\n  - [Event driven](#event-driven)\n  - [Required](#required)\n  - [Disabled](#disabled)\n    - [Disabled option](#disabled-option)\n  - [Visual mode](#visual-mode)\n    - [Small](#small)\n  - [Centered content](#centered-content)\n  - [Custom content](#custom-content)\n- [Test Helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@popperjs/core`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-icon`\n- `@terminus/ui-pipes`\n- `@terminus/ui-styles`\n- `@terminus/ui-utilities`\n- `@terminus/ui-radio-group`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-radio-group\n```\n\n### Modules that need to be in NgModule\n\n- `TsRadioGroupModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nPass in:\n\n1. An array of items\n1. A form control\n1. A formatter function to determine the UI display value\n1. A formatter function to determine the model value\n\n```html\n<form [formGroup]=\"myForm\">\n  <ts-radio-group\n    [options]=\"items$ | async\"\n    [formControl]=\"myForm.get('myRadioGroup')\"\n    [formatUILabelFn]=\"uiFormatter\"\n    [formatModelValueFn]=\"modelFormatter\"\n  ></ts-radio-group>\n\n  <button (click)=\"submit(myForm.value)\">Submit</button>\n</form>\n```\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    bing: 'Some helper text for my item',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    bing: 'Some helper text for my item',\n    disabled: true,\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    bing: 'Some helper text for my item',\n  },\n]);\n\n// Create a form\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null],\n});\n\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// Use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### Sub-labels\n\nPassing a formatter function to `formatUISubLabelFn` will enable sub-label support:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n```typescript\n// Use the 'bing' value as a sub-label\nuiSubFormatter = (v) => v.bing;\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### No validation or hint\n\nA flag to define whether this radio group field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-radio-group\n  [formControl]=\"myFormCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-radio-group>\n```\n\n### Event driven\n\nListen for change events:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  (selectionChange)=\"selected($event)\"\n></ts-radio-group>\n```\n\n### Required\n\nTo define the radio group as 'required', set the required validator on the form group:\n\n```typescript\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null, [Validators.required]],\n});\n```\n\n### Disabled\n\nTo disable the entire radio group, set `isDisabled` to true:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n  [isDisabled]=\"true\"\n></ts-radio-group>\n```\n\n#### Disabled option\n\nTo disabled only a single option, define the `disabled` key on the item object:\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    disabled: true, // This radio option will be disabled\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n  },\n]);\n```\n\n### Visual mode\n\nVisual mode displays radio options as large clickable areas containing content.\n\nEnable by setting the `isVisual` flag:\n\n```html\n<ts-radio-group [isVisual]=\"true\"></ts-radio-group>\n```\n\n#### Small\n\nFor a smaller clickable area, use the `small` flag.\n\nNOTE: The maximum content should be a title with two lines and body with 3 lines\n\n```html\n<ts-radio-group [isVisual]=\"true\" [small]=\"true\"></ts-radio-group>\n```\n\n### Centered content\n\nBy default the content is centered when in visual mode. Setting `centeredContent` to `false` will use standard top/left alignment.\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [centeredContent]=\"false\"\n  ...\n></ts-radio-group>\n```\n\n### Custom content\n\n`TsRadioOption` now accepts an optional `template` key with a string template:\n\n```typescript\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    template: `<a href=\"${this.myLink}\">My link!</a>`\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    // if no template is defined, it will fall back to `formatUILabelFn` for the display value\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    template: `<h3>Hi!</h3> <p>Here is a thing!</p>`\n  },\n]);\n```\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-radio-group/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                     |\n|------------------------------|\n| `getAllRadioGroupInstances`  |\n| `getRadioGroupInstance`      |\n| `getRadioGroupParentElement` |\n| `selectStandardRadio`        |\n| `selectVisualRadio`          |\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-radio-group.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-radio-group\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.js\n","readmeFilename":"README.md","description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@2.0.11","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-QEdwpLUJ+dpIqv/oa7PB6z1gkvfnOCAdXI4dJn8Gct3OqFHBpczBIZGD2LQgDX8cGZwGxXDOxKMVp7VQeHJWbA==","shasum":"13dee10265e7ebd935c847d16d1f864edec17a98","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-2.0.11.tgz","fileCount":69,"unpackedSize":397073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP++nCRA9TVsSAnZWagAAhQAP/j+NDUjJNR9WI7/DgYOF\nERsBAWQ/1PoKIlYXl17gWM710Wot/E0LNqEVAQ4TZ+7So63HR17HfN+rLLhL\nOj++dSpjLdfaXzHuX4dkyItkd7GPZMMIitwPzOJxpj/3DvqgewBjU3fzprxQ\nxexyVaRKTXX0K6CkPmMRBDl1YiT67SSUi1kS1Pszq4bwMW0xvfPUhymH729C\nQHRP94Dw5tgo5dgZhTbWtHppoNzaGLKzzVtIItOJdhSWKotx0Z83Z2KXgpE6\nIDUqsAlQ02kasChyX+RsfNr+pvrQSE1fPqF1wO5z0TS1DzAoiHVhBQbB1RPf\njn+83TdUVcnlV/3Fd30y2RMwBAoFmAK0+u5Ucqk/+kllEfaYMFHBpvxeQ1Ex\njafDJCbScGLfFojQdrNsGcXsigBJFQV7YDTVVrQCS4IueIAbmk7iOYwVLySR\neA+tDMlw6BTY+gJinaIzsxPgT/5NT1GZs9Vzl6uZdwgW2ai14AfGHDLER7ML\nA5JccKUt2amE+N6WQMmBY7PitbJcM6fDFF+/YJvLHZvwemFvoKrYXEyAHzDR\n1rO8ArbGhofY5byDvcTdRe5ZAznH2Xq3qvmuFQHSUbFskwf8KDw+OqJ3glX/\nUM8aOPcyrAbdlxgFIG1qSc5nB+oHC3lN6kgE4hxFMmOWK7AzwaMTV50i/Hu1\ncbUL\r\n=opat\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCKyQnkTxHmfhwAPBWe6EV4kVOIqk4qOwAl5WwqsOZgAIhAL6IKZS6SVP6pYpC7AAA3y+r4YAM0CO8jAjUUx6PofAQ"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_2.0.11_1598025638656_0.3081465731104833"},"_hasShrinkwrap":false},"2.0.12":{"name":"@terminus/ui-radio-group","version":"2.0.12","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-icon":"^2.0.5","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","rxjs":"6.6.2","date-fns":"2.15.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@terminus/ui-pipes":"1.0.12","@fortawesome/pro-solid-svg-icons":"5.14.0"},"readme":"<h1>Radio Group</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [Sub-labels](#sub-labels)\n  - [No validation or hint](#no-validation-or-hint)\n  - [Event driven](#event-driven)\n  - [Required](#required)\n  - [Disabled](#disabled)\n    - [Disabled option](#disabled-option)\n  - [Visual mode](#visual-mode)\n    - [Small](#small)\n  - [Centered content](#centered-content)\n  - [Custom content](#custom-content)\n- [Test Helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@popperjs/core`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-icon`\n- `@terminus/ui-pipes`\n- `@terminus/ui-styles`\n- `@terminus/ui-utilities`\n- `@terminus/ui-radio-group`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-radio-group\n```\n\n### Modules that need to be in NgModule\n\n- `TsRadioGroupModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nPass in:\n\n1. An array of items\n1. A form control\n1. A formatter function to determine the UI display value\n1. A formatter function to determine the model value\n\n```html\n<form [formGroup]=\"myForm\">\n  <ts-radio-group\n    [options]=\"items$ | async\"\n    [formControl]=\"myForm.get('myRadioGroup')\"\n    [formatUILabelFn]=\"uiFormatter\"\n    [formatModelValueFn]=\"modelFormatter\"\n  ></ts-radio-group>\n\n  <button (click)=\"submit(myForm.value)\">Submit</button>\n</form>\n```\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    bing: 'Some helper text for my item',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    bing: 'Some helper text for my item',\n    disabled: true,\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    bing: 'Some helper text for my item',\n  },\n]);\n\n// Create a form\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null],\n});\n\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// Use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### Sub-labels\n\nPassing a formatter function to `formatUISubLabelFn` will enable sub-label support:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n```typescript\n// Use the 'bing' value as a sub-label\nuiSubFormatter = (v) => v.bing;\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### No validation or hint\n\nA flag to define whether this radio group field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-radio-group\n  [formControl]=\"myFormCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-radio-group>\n```\n\n### Event driven\n\nListen for change events:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  (selectionChange)=\"selected($event)\"\n></ts-radio-group>\n```\n\n### Required\n\nTo define the radio group as 'required', set the required validator on the form group:\n\n```typescript\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null, [Validators.required]],\n});\n```\n\n### Disabled\n\nTo disable the entire radio group, set `isDisabled` to true:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n  [isDisabled]=\"true\"\n></ts-radio-group>\n```\n\n#### Disabled option\n\nTo disabled only a single option, define the `disabled` key on the item object:\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    disabled: true, // This radio option will be disabled\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n  },\n]);\n```\n\n### Visual mode\n\nVisual mode displays radio options as large clickable areas containing content.\n\nEnable by setting the `isVisual` flag:\n\n```html\n<ts-radio-group [isVisual]=\"true\"></ts-radio-group>\n```\n\n#### Small\n\nFor a smaller clickable area, use the `small` flag.\n\nNOTE: The maximum content should be a title with two lines and body with 3 lines\n\n```html\n<ts-radio-group [isVisual]=\"true\" [small]=\"true\"></ts-radio-group>\n```\n\n### Centered content\n\nBy default the content is centered when in visual mode. Setting `centeredContent` to `false` will use standard top/left alignment.\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [centeredContent]=\"false\"\n  ...\n></ts-radio-group>\n```\n\n### Custom content\n\n`TsRadioOption` now accepts an optional `template` key with a string template:\n\n```typescript\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    template: `<a href=\"${this.myLink}\">My link!</a>`\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    // if no template is defined, it will fall back to `formatUILabelFn` for the display value\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    template: `<h3>Hi!</h3> <p>Here is a thing!</p>`\n  },\n]);\n```\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-radio-group/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                     |\n|------------------------------|\n| `getAllRadioGroupInstances`  |\n| `getRadioGroupInstance`      |\n| `getRadioGroupParentElement` |\n| `selectStandardRadio`        |\n| `selectVisualRadio`          |\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-radio-group.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-radio-group\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.js\n","readmeFilename":"README.md","description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@2.0.12","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-3KfTDmM++K6Odn4cQAeuvwPB91Hr4BtpCKqtuHS+yyg7TMvyzOuzMV/dPx8xrTAQGqmzF2KhwzdZdGIODtb1Ow==","shasum":"f76b116f903968235b4dfb0ca2bbd73c51a24381","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-2.0.12.tgz","fileCount":69,"unpackedSize":397288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRS62CRA9TVsSAnZWagAAZdEP/10o8Wh+Bh0dBK9hsoep\nh2aI14oRt9mJh1qnGH9f52wVWYvFFMU2PMQA5HeLL9NHwSd4H7JlwVPPzwEc\n8H0W6NKdw/3nqMhKFezaYFTYvEK+7DDSV7Prc7f24gekD6nNnTEMVKnhWWs6\nqND+TdqIiWk6A7dNvFpiVKTEKWSUBLMlKXy0NJpwN4B99jsWaRinfvSeSrWQ\nuhum9Ewd73io35suaroVscA3mPe8SvarZx5ZKfPNhgs3gzO/WxzB2/hAZTcR\nKNaHySJOssMFMfZMNt2UDTjMz4Hk7MfNVpJy6HT/nQsd6IS+WzqpIT8Eg6yP\n2oiOCX2AMJYqAlfy6FSVnQyEGRu9R79HNSFdkVMJmkGE1Ck0mzUPP6G5T+P0\n/Mk29oWsqgzVcy6npvjnyrwCkqSmePERvgR57FbCJf1GULGYfxTXNu1rD79C\nqImYgqq6sv8RuWMXd9y1ctidGTUGH8C3xaEPMyASupJXFXqOUb/cAnNczmCs\nIzrIV4NUk7S0w8qUgTSLthdoyQyTj/43szpAXm7SK/A1tU5bCeDuR0soaDYr\nCz9yQr9MrDingVNP23p1O4ZZXErNeeTmZeBe3hDXkcvPiyO94q29i8Ss42+V\nYoudaqO9UqgGAzXdWYyfBuZL0ZYhRWou/9WXFFV17dsidOsCGO3CMgHirt9/\nQDyK\r\n=XVV5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFrTJuldAewKqIYW+nmRvDTzyM8wwg6tLy8cqhp4YHRfAiBGx/Pk9bvzPVVKK23qzkJclBQ8b53Xv6HUvkL3rzf5Dg=="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_2.0.12_1598369461967_0.8262616874765827"},"_hasShrinkwrap":false},"2.0.13":{"name":"@terminus/ui-radio-group","version":"2.0.13","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-icon":"^2.0.5","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","rxjs":"6.6.2","date-fns":"2.15.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@terminus/ui-pipes":"1.0.13","@fortawesome/pro-solid-svg-icons":"5.14.0"},"readme":"<h1>Radio Group</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [Sub-labels](#sub-labels)\n  - [No validation or hint](#no-validation-or-hint)\n  - [Event driven](#event-driven)\n  - [Required](#required)\n  - [Disabled](#disabled)\n    - [Disabled option](#disabled-option)\n  - [Visual mode](#visual-mode)\n    - [Small](#small)\n  - [Centered content](#centered-content)\n  - [Custom content](#custom-content)\n- [Test Helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@popperjs/core`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-icon`\n- `@terminus/ui-pipes`\n- `@terminus/ui-styles`\n- `@terminus/ui-utilities`\n- `@terminus/ui-radio-group`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-radio-group\n```\n\n### Modules that need to be in NgModule\n\n- `TsRadioGroupModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nPass in:\n\n1. An array of items\n1. A form control\n1. A formatter function to determine the UI display value\n1. A formatter function to determine the model value\n\n```html\n<form [formGroup]=\"myForm\">\n  <ts-radio-group\n    [options]=\"items$ | async\"\n    [formControl]=\"myForm.get('myRadioGroup')\"\n    [formatUILabelFn]=\"uiFormatter\"\n    [formatModelValueFn]=\"modelFormatter\"\n  ></ts-radio-group>\n\n  <button (click)=\"submit(myForm.value)\">Submit</button>\n</form>\n```\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    bing: 'Some helper text for my item',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    bing: 'Some helper text for my item',\n    disabled: true,\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    bing: 'Some helper text for my item',\n  },\n]);\n\n// Create a form\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null],\n});\n\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// Use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### Sub-labels\n\nPassing a formatter function to `formatUISubLabelFn` will enable sub-label support:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n```typescript\n// Use the 'bing' value as a sub-label\nuiSubFormatter = (v) => v.bing;\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### No validation or hint\n\nA flag to define whether this radio group field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-radio-group\n  [formControl]=\"myFormCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-radio-group>\n```\n\n### Event driven\n\nListen for change events:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  (selectionChange)=\"selected($event)\"\n></ts-radio-group>\n```\n\n### Required\n\nTo define the radio group as 'required', set the required validator on the form group:\n\n```typescript\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null, [Validators.required]],\n});\n```\n\n### Disabled\n\nTo disable the entire radio group, set `isDisabled` to true:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n  [isDisabled]=\"true\"\n></ts-radio-group>\n```\n\n#### Disabled option\n\nTo disabled only a single option, define the `disabled` key on the item object:\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    disabled: true, // This radio option will be disabled\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n  },\n]);\n```\n\n### Visual mode\n\nVisual mode displays radio options as large clickable areas containing content.\n\nEnable by setting the `isVisual` flag:\n\n```html\n<ts-radio-group [isVisual]=\"true\"></ts-radio-group>\n```\n\n#### Small\n\nFor a smaller clickable area, use the `small` flag.\n\nNOTE: The maximum content should be a title with two lines and body with 3 lines\n\n```html\n<ts-radio-group [isVisual]=\"true\" [small]=\"true\"></ts-radio-group>\n```\n\n### Centered content\n\nBy default the content is centered when in visual mode. Setting `centeredContent` to `false` will use standard top/left alignment.\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [centeredContent]=\"false\"\n  ...\n></ts-radio-group>\n```\n\n### Custom content\n\n`TsRadioOption` now accepts an optional `template` key with a string template:\n\n```typescript\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    template: `<a href=\"${this.myLink}\">My link!</a>`\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    // if no template is defined, it will fall back to `formatUILabelFn` for the display value\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    template: `<h3>Hi!</h3> <p>Here is a thing!</p>`\n  },\n]);\n```\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-radio-group/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                     |\n|------------------------------|\n| `getAllRadioGroupInstances`  |\n| `getRadioGroupInstance`      |\n| `getRadioGroupParentElement` |\n| `selectStandardRadio`        |\n| `selectVisualRadio`          |\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-radio-group.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-radio-group\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.js\n","readmeFilename":"README.md","description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@2.0.13","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-owWWFd40DDWWoRMnoeO/w+mFZ9FDhjfOLjkP8JevxagupJJBEsqY9ELX6Qo44KeAZ29psSlxUiqrAKVV4ig7yA==","shasum":"ad9b4147dc905fd0503e7ef1b1bc6241a6320e1f","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-2.0.13.tgz","fileCount":69,"unpackedSize":397503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRVnXCRA9TVsSAnZWagAAuvAP/R1q4H5Qi3qJ1FgZNkun\nB74SqMfJRwaak9t2P9qWdQpVX8koFDmWpN3m+BPfEzUcEWLmz5R8ynYIjV5q\nO89SkXE9TmaIwFI2m1015VyM0xdLHABJgQa+iQ7ywRJoqYPSYXtAA3IGH7hH\nHwynNZtTAo/EKAaK/IhRpqfze3wQrQQwF3r/sJ/ykL8HYhdQWiv6qRqQra+y\nrs3iX1WwJLY1L1PK5fmRtjVbik5a1la7zSizNMi06OIsNJEmWyjjvzKtJQH4\n0uaC3AuNkjpT84q+E0fj3LJWZV7gZb2GjwWEANKCEKlYe5kvzlfsrw2qNBt2\n9dD+V7H7FRIoE9yfOMlVKl53xKQxDo7/0lpX1caQ9XH39RPDWSp57go1LIQT\nOUfhGRleV2ET+KeGDZE9cVICAZeLuN098I5SwoUd660a7Ym3tic5I12om7nY\nP3LphSlp3p0d51BS6qYkIgvn0So7NjUbQN9baD6biElZcCipmGUBA0nsgBds\nLAjjL1Pp8wCNvmbu92hOuM+frRU8u2yChL8mlkzbrXLFuXQPKgIZPB11c9ds\nRiNhv84clcNGTH6YrAjJDVUNZEUzu2xCPHnAFcKoSsn56o9jspsomc1eRQW4\nBDoBuG4vIeOSX4mPtMyTXQbYhHM6Skia6jWmAb7UN9eCbLqM8VlzG8/qk/k2\n9NkW\r\n=lCYW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjAgh+DNZhxSf9qBxa+YyEeKz2yy0USCK/gg3fJVDWIwIhAITE58Ta2VTLkIBYXP0qRbFf43yUEcynTqecnYD+O862"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_2.0.13_1598380502597_0.1060525811070816"},"_hasShrinkwrap":false},"2.0.14":{"name":"@terminus/ui-radio-group","version":"2.0.14","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-icon":"^2.0.5","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","rxjs":"6.6.2","date-fns":"2.15.0","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@terminus/ui-pipes":"1.0.13","@fortawesome/pro-solid-svg-icons":"5.14.0"},"readme":"<h1>Radio Group</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [Sub-labels](#sub-labels)\n  - [No validation or hint](#no-validation-or-hint)\n  - [Event driven](#event-driven)\n  - [Required](#required)\n  - [Disabled](#disabled)\n    - [Disabled option](#disabled-option)\n  - [Visual mode](#visual-mode)\n    - [Small](#small)\n  - [Centered content](#centered-content)\n  - [Custom content](#custom-content)\n- [Test Helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@popperjs/core`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-icon`\n- `@terminus/ui-pipes`\n- `@terminus/ui-styles`\n- `@terminus/ui-utilities`\n- `@terminus/ui-radio-group`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-radio-group\n```\n\n### Modules that need to be in NgModule\n\n- `TsRadioGroupModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nPass in:\n\n1. An array of items\n1. A form control\n1. A formatter function to determine the UI display value\n1. A formatter function to determine the model value\n\n```html\n<form [formGroup]=\"myForm\">\n  <ts-radio-group\n    [options]=\"items$ | async\"\n    [formControl]=\"myForm.get('myRadioGroup')\"\n    [formatUILabelFn]=\"uiFormatter\"\n    [formatModelValueFn]=\"modelFormatter\"\n  ></ts-radio-group>\n\n  <button (click)=\"submit(myForm.value)\">Submit</button>\n</form>\n```\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    bing: 'Some helper text for my item',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    bing: 'Some helper text for my item',\n    disabled: true,\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    bing: 'Some helper text for my item',\n  },\n]);\n\n// Create a form\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null],\n});\n\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// Use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### Sub-labels\n\nPassing a formatter function to `formatUISubLabelFn` will enable sub-label support:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n```typescript\n// Use the 'bing' value as a sub-label\nuiSubFormatter = (v) => v.bing;\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### No validation or hint\n\nA flag to define whether this radio group field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-radio-group\n  [formControl]=\"myFormCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-radio-group>\n```\n\n### Event driven\n\nListen for change events:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  (selectionChange)=\"selected($event)\"\n></ts-radio-group>\n```\n\n### Required\n\nTo define the radio group as 'required', set the required validator on the form group:\n\n```typescript\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null, [Validators.required]],\n});\n```\n\n### Disabled\n\nTo disable the entire radio group, set `isDisabled` to true:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n  [isDisabled]=\"true\"\n></ts-radio-group>\n```\n\n#### Disabled option\n\nTo disabled only a single option, define the `disabled` key on the item object:\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    disabled: true, // This radio option will be disabled\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n  },\n]);\n```\n\n### Visual mode\n\nVisual mode displays radio options as large clickable areas containing content.\n\nEnable by setting the `isVisual` flag:\n\n```html\n<ts-radio-group [isVisual]=\"true\"></ts-radio-group>\n```\n\n#### Small\n\nFor a smaller clickable area, use the `small` flag.\n\nNOTE: The maximum content should be a title with two lines and body with 3 lines\n\n```html\n<ts-radio-group [isVisual]=\"true\" [small]=\"true\"></ts-radio-group>\n```\n\n### Centered content\n\nBy default the content is centered when in visual mode. Setting `centeredContent` to `false` will use standard top/left alignment.\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [centeredContent]=\"false\"\n  ...\n></ts-radio-group>\n```\n\n### Custom content\n\n`TsRadioOption` now accepts an optional `template` key with a string template:\n\n```typescript\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    template: `<a href=\"${this.myLink}\">My link!</a>`\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    // if no template is defined, it will fall back to `formatUILabelFn` for the display value\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    template: `<h3>Hi!</h3> <p>Here is a thing!</p>`\n  },\n]);\n```\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-radio-group/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                     |\n|------------------------------|\n| `getAllRadioGroupInstances`  |\n| `getRadioGroupInstance`      |\n| `getRadioGroupParentElement` |\n| `selectStandardRadio`        |\n| `selectVisualRadio`          |\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-radio-group.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-radio-group\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.js\n","readmeFilename":"README.md","description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@2.0.14","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-xpNziPsLam2bewA3L9PsUCfMnPD2Bq1Se5ZgMQENNxmkpuHXHIrBG6aHLqAB5qRP0pD2XTIqmkYH5ISqWSvscw==","shasum":"8114f2055b0cd78f9efe153b400244d6c0aec509","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-2.0.14.tgz","fileCount":69,"unpackedSize":397821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRoUUCRA9TVsSAnZWagAA6soP+gP7230ExvNZQ160RsGy\nlNQs7g7PjjGXQOtB8AUsFEnUOh4nQjnnEeklb1mz3jSvIBGeoStPzHNoSvV6\n2DaFoRxqN0XurRF2GhQUP2c328Dz8D1G4QDzyx5OGPVSVNBzteGE6IU0JRrj\nXm1nI5WotyMRaz4Y1cYs5SHO5YFsVOYNZo4RKB3OHdxk4gkD21ePv6eLOaUj\na6FA+7iokXYGZ/McUFV4JD1AErrfAxYrwka3yPnc6Nql8MlNrc5aTmXhdMrF\n7iMLdZzUZKRX7xhR6RF1RLcc2ZVDuvrEZkQYQC3GEUXf066HKdSwrbtDbnem\nsNF/Uf5//4yihpWModyCrtJH1zxrba7bfb3PIAfxUP8f1s7/8BGp7TXGXQVz\nHZaWzIzYghF4FSCuPnrklZRWH6c3kKJjoVyjAnd1+WqjV2bgpK2BjfSwt5+x\nWB68B4wxI1f6VHIt20P879M1ZuHas7D3KhY+quV9K76k+d+x1MieisASkyzU\nQ3+mTClUIgQNZu5sxLBwcmZrkuTF50H517A+K6qxJ2NE9pWsb8j0706N7UKq\najt7zYvzdwtaVBnOfNQnsNi1Ekh+iMIiQ70p/unuNk+AG8bBWuCMjgBx7TW7\nnD1lfe3RG5Fs3412+b/9zCHF/wua3DEyuXDHyDAqFWOun/NuRWSensMr3udI\nOzNX\r\n=Gghu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG8hYo55F2Xr/66fJ0miU/FJs3JBMdfxpmpAKoI7hdm4AiB0obnT8TEjPACdsB0x4jJl4I/9D8jPjIx4pXS2VWiWHQ=="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_2.0.14_1598457107975_0.09897352567220308"},"_hasShrinkwrap":false},"2.0.15":{"name":"@terminus/ui-radio-group","version":"2.0.15","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-icon":"^2.0.5","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","rxjs":"6.6.2","date-fns":"2.15.0","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0","@terminus/ui-pipes":"1.0.14"},"readme":"<h1>Radio Group</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [Sub-labels](#sub-labels)\n  - [No validation or hint](#no-validation-or-hint)\n  - [Event driven](#event-driven)\n  - [Required](#required)\n  - [Disabled](#disabled)\n    - [Disabled option](#disabled-option)\n  - [Visual mode](#visual-mode)\n    - [Small](#small)\n  - [Centered content](#centered-content)\n  - [Custom content](#custom-content)\n- [Test Helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@popperjs/core`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-icon`\n- `@terminus/ui-pipes`\n- `@terminus/ui-styles`\n- `@terminus/ui-utilities`\n- `@terminus/ui-radio-group`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-radio-group\n```\n\n### Modules that need to be in NgModule\n\n- `TsRadioGroupModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nPass in:\n\n1. An array of items\n1. A form control\n1. A formatter function to determine the UI display value\n1. A formatter function to determine the model value\n\n```html\n<form [formGroup]=\"myForm\">\n  <ts-radio-group\n    [options]=\"items$ | async\"\n    [formControl]=\"myForm.get('myRadioGroup')\"\n    [formatUILabelFn]=\"uiFormatter\"\n    [formatModelValueFn]=\"modelFormatter\"\n  ></ts-radio-group>\n\n  <button (click)=\"submit(myForm.value)\">Submit</button>\n</form>\n```\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    bing: 'Some helper text for my item',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    bing: 'Some helper text for my item',\n    disabled: true,\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    bing: 'Some helper text for my item',\n  },\n]);\n\n// Create a form\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null],\n});\n\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// Use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### Sub-labels\n\nPassing a formatter function to `formatUISubLabelFn` will enable sub-label support:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n```typescript\n// Use the 'bing' value as a sub-label\nuiSubFormatter = (v) => v.bing;\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### No validation or hint\n\nA flag to define whether this radio group field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-radio-group\n  [formControl]=\"myFormCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-radio-group>\n```\n\n### Event driven\n\nListen for change events:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  (selectionChange)=\"selected($event)\"\n></ts-radio-group>\n```\n\n### Required\n\nTo define the radio group as 'required', set the required validator on the form group:\n\n```typescript\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null, [Validators.required]],\n});\n```\n\n### Disabled\n\nTo disable the entire radio group, set `isDisabled` to true:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n  [isDisabled]=\"true\"\n></ts-radio-group>\n```\n\n#### Disabled option\n\nTo disabled only a single option, define the `disabled` key on the item object:\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    disabled: true, // This radio option will be disabled\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n  },\n]);\n```\n\n### Visual mode\n\nVisual mode displays radio options as large clickable areas containing content.\n\nEnable by setting the `isVisual` flag:\n\n```html\n<ts-radio-group [isVisual]=\"true\"></ts-radio-group>\n```\n\n#### Small\n\nFor a smaller clickable area, use the `small` flag.\n\nNOTE: The maximum content should be a title with two lines and body with 3 lines\n\n```html\n<ts-radio-group [isVisual]=\"true\" [small]=\"true\"></ts-radio-group>\n```\n\n### Centered content\n\nBy default the content is centered when in visual mode. Setting `centeredContent` to `false` will use standard top/left alignment.\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [centeredContent]=\"false\"\n  ...\n></ts-radio-group>\n```\n\n### Custom content\n\n`TsRadioOption` now accepts an optional `template` key with a string template:\n\n```typescript\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    template: `<a href=\"${this.myLink}\">My link!</a>`\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    // if no template is defined, it will fall back to `formatUILabelFn` for the display value\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    template: `<h3>Hi!</h3> <p>Here is a thing!</p>`\n  },\n]);\n```\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-radio-group/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                     |\n|------------------------------|\n| `getAllRadioGroupInstances`  |\n| `getRadioGroupInstance`      |\n| `getRadioGroupParentElement` |\n| `selectStandardRadio`        |\n| `selectVisualRadio`          |\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-radio-group.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-radio-group\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.js\n","readmeFilename":"README.md","description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@2.0.15","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-c4pehM2IeATMBkzD7q3nV/ndVcuv8l8QHJ8kl31uGJslwl64s2XNDpxGZRIFWkF900vLzFicNNBrct7aaSZ30w==","shasum":"43d615bce2313151f5e8102027bbdd4e0f7beab2","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-2.0.15.tgz","fileCount":69,"unpackedSize":397420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUXklCRA9TVsSAnZWagAAeoIP/3L/Yafz5cHic+U6C1M4\n8kBkGq2oHqaVySyhepr7Myw291hbDlva+XiSaDcfK8waDxapDBZweLPj5SZr\no8xOba7AvvDD3q5BdvBKveIk7A+kh/70DNHqMMxxWi4Z/dDg6LBcpXo/oCB9\nv1Abl9XZdAT9zadelG95fFNj1xZcEi58q7OmfntAi/ZFuvLCKYKvXNid/qbx\nN4FJaOKd9eKVC5VUUxz+7//GOZ/4cLDUxJTluYBwdI8hFLKE56lGk1TBHzU7\n2AqF0Up3SiI6V5jbuJ/qoI2Dur6gPCIFNzq2qqFTIG9Y46UU5KBrImbRWOFg\n8F5IJMzOq516soWD7cBfuAcc5a3iN2au+TgZIIh9efeqcJMBbcPsTckHXh7x\ndhFd3pY/ARbC4U2M9VZ5SG4tNUDD3CfkPbTTgGenTllfgie2xpu3Jl+OV6Sn\nOXsM2yvu5ieTjLKWZG10PkFHSGYZG7uIUWp91jZS5rw1huCrormIbaqzHNyM\nmvTCXhSn4ir8i/ySjrTfsDabN/HRnWk66BLObpPnIx37hYFQYK0yDBil6HaB\nBK406Ig+seXS0r1CJOycdD6IljZLrp7pqWj4Ufw6StrmBzOrZwvqPpPmJK7p\nuSNRf7IxmTXvl7/SSkLuAQaNiyi01V81X29YLAUuY3utOzjXoylWyZlwKv8B\nUXlM\r\n=jFPx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGws0/yoe74Ae4rLhe8+y+C1k5hijY3mXO0sJvAbnCOaAiEAi6RRga0k+KfOdib6aHQg8bWYz4qckwR4lJJC2F2eaKI="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_2.0.15_1599174949063_0.04524302673706915"},"_hasShrinkwrap":false},"2.0.16":{"name":"@terminus/ui-radio-group","version":"2.0.16","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-icon":"^2.0.5","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","rxjs":"6.6.2","date-fns":"2.15.0","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0","@terminus/ui-pipes":"1.0.15"},"readme":"<h1>Radio Group</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [Sub-labels](#sub-labels)\n  - [No validation or hint](#no-validation-or-hint)\n  - [Event driven](#event-driven)\n  - [Required](#required)\n  - [Disabled](#disabled)\n    - [Disabled option](#disabled-option)\n  - [Visual mode](#visual-mode)\n    - [Small](#small)\n  - [Centered content](#centered-content)\n  - [Custom content](#custom-content)\n- [Test Helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@popperjs/core`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-icon`\n- `@terminus/ui-pipes`\n- `@terminus/ui-styles`\n- `@terminus/ui-utilities`\n- `@terminus/ui-radio-group`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-radio-group\n```\n\n### Modules that need to be in NgModule\n\n- `TsRadioGroupModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nPass in:\n\n1. An array of items\n1. A form control\n1. A formatter function to determine the UI display value\n1. A formatter function to determine the model value\n\n```html\n<form [formGroup]=\"myForm\">\n  <ts-radio-group\n    [options]=\"items$ | async\"\n    [formControl]=\"myForm.get('myRadioGroup')\"\n    [formatUILabelFn]=\"uiFormatter\"\n    [formatModelValueFn]=\"modelFormatter\"\n  ></ts-radio-group>\n\n  <button (click)=\"submit(myForm.value)\">Submit</button>\n</form>\n```\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    bing: 'Some helper text for my item',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    bing: 'Some helper text for my item',\n    disabled: true,\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    bing: 'Some helper text for my item',\n  },\n]);\n\n// Create a form\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null],\n});\n\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// Use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### Sub-labels\n\nPassing a formatter function to `formatUISubLabelFn` will enable sub-label support:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n```typescript\n// Use the 'bing' value as a sub-label\nuiSubFormatter = (v) => v.bing;\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### No validation or hint\n\nA flag to define whether this radio group field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-radio-group\n  [formControl]=\"myFormCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-radio-group>\n```\n\n### Event driven\n\nListen for change events:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  (selectionChange)=\"selected($event)\"\n></ts-radio-group>\n```\n\n### Required\n\nTo define the radio group as 'required', set the required validator on the form group:\n\n```typescript\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null, [Validators.required]],\n});\n```\n\n### Disabled\n\nTo disable the entire radio group, set `isDisabled` to true:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n  [isDisabled]=\"true\"\n></ts-radio-group>\n```\n\n#### Disabled option\n\nTo disabled only a single option, define the `disabled` key on the item object:\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    disabled: true, // This radio option will be disabled\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n  },\n]);\n```\n\n### Visual mode\n\nVisual mode displays radio options as large clickable areas containing content.\n\nEnable by setting the `isVisual` flag:\n\n```html\n<ts-radio-group [isVisual]=\"true\"></ts-radio-group>\n```\n\n#### Small\n\nFor a smaller clickable area, use the `small` flag.\n\nNOTE: The maximum content should be a title with two lines and body with 3 lines\n\n```html\n<ts-radio-group [isVisual]=\"true\" [small]=\"true\"></ts-radio-group>\n```\n\n### Centered content\n\nBy default the content is centered when in visual mode. Setting `centeredContent` to `false` will use standard top/left alignment.\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [centeredContent]=\"false\"\n  ...\n></ts-radio-group>\n```\n\n### Custom content\n\n`TsRadioOption` now accepts an optional `template` key with a string template:\n\n```typescript\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    template: `<a href=\"${this.myLink}\">My link!</a>`\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    // if no template is defined, it will fall back to `formatUILabelFn` for the display value\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    template: `<h3>Hi!</h3> <p>Here is a thing!</p>`\n  },\n]);\n```\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-radio-group/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                     |\n|------------------------------|\n| `getAllRadioGroupInstances`  |\n| `getRadioGroupInstance`      |\n| `getRadioGroupParentElement` |\n| `selectStandardRadio`        |\n| `selectVisualRadio`          |\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-radio-group.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-radio-group\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.js\n","readmeFilename":"README.md","description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@2.0.16","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-VEUsbEABDG6UVE02f8eNGO6ppATsdQqP7wnmQeH+QCsR3odCr6IA6xfsLZHPx+f5MKK/e4GisePCLeX4ZeO6MQ==","shasum":"e6c73bc8c446cf5902e885ac1e6f18959343de28","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-2.0.16.tgz","fileCount":69,"unpackedSize":397657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUlcJCRA9TVsSAnZWagAASk0P/1ZhtUgr88J4S0gILlG3\n+75nrjRxIq+do2R2MHxpNKC7HukiZYMXtEZhoTQHTjrYTfSwk2hFi4aXXx4F\nq886xkQPizMeb5t5NNw2qhIXyoyijqJbkaW24DjM7PUAoXIiaimsC8T5Bj55\nJ7mSnIMKAhMUG5BfKrzuseHGyGRt4A9nNPg7cdxg/pvl1ilzZBLa+nZQA24q\nU8wPyrmpE6y+Ng6pQsZuzSPh3/s7OezFF+B3X28R5/5XUVhzhKTapi9Rf53h\nFNPGX+Z0SMOMpnWcVUiUnzaFURy24GuZ0oX86NUrrvWA9awUKVmyraqNCqNn\numH2aFI4wFCxtK2XVnzuTNw8R6bz65lpOnpTiphsSx4aIVSozNa/Fx2EmcoS\n9w/HICtouEjQ2Ts0ucuraVcSW5PNKWiMuXoaf0GuQoneE4DL7UWhT9005wjZ\n5Inkkj5K6tZTM9v1++5migBwEQPsD8ZYUO/P9QoBhOjYAdnQAu8kD/a0/U8P\nFCtowpA1ja7nuhe85DJRp8l+Dn37qMSWgq54KvT+9JyB+zvAk/TYExxxj0pQ\nrJX7XFD4sCCXv4GLM4+0APsqZxYUbk9+K+VQ5b799a4n6xjOb9/R6zGBOcN4\nlNOoJpjaDJdEa6uMGObwSpbp7sQoetzSLDdhfHs4W0cRfL3mluLq3PpJ/YFL\nanZY\r\n=sLmL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCT743NkNnGMWa4hRfldEsGxziS3qqihdQ+a2T5TCtYeQIhAKZwGgFkjp4VXEftJ6SMd0yZ5ydiCr3ZtUezjQkHVvzd"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_2.0.16_1599231753018_0.2610823878010893"},"_hasShrinkwrap":false},"2.1.0":{"name":"@terminus/ui-radio-group","version":"2.1.0","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.2.4","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-icon":"^2.0.5","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","rxjs":"6.6.2","date-fns":"2.15.0","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0","@terminus/ui-pipes":"1.1.0"},"readme":"<h1>Radio Group</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [Sub-labels](#sub-labels)\n  - [No validation or hint](#no-validation-or-hint)\n  - [Event driven](#event-driven)\n  - [Required](#required)\n  - [Disabled](#disabled)\n    - [Disabled option](#disabled-option)\n  - [Visual mode](#visual-mode)\n    - [Small](#small)\n  - [Centered content](#centered-content)\n  - [Custom content](#custom-content)\n- [Test Helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@popperjs/core`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-icon`\n- `@terminus/ui-pipes`\n- `@terminus/ui-styles`\n- `@terminus/ui-utilities`\n- `@terminus/ui-radio-group`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-radio-group\n```\n\n### Modules that need to be in NgModule\n\n- `TsRadioGroupModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nPass in:\n\n1. An array of items\n1. A form control\n1. A formatter function to determine the UI display value\n1. A formatter function to determine the model value\n\n```html\n<form [formGroup]=\"myForm\">\n  <ts-radio-group\n    [options]=\"items$ | async\"\n    [formControl]=\"myForm.get('myRadioGroup')\"\n    [formatUILabelFn]=\"uiFormatter\"\n    [formatModelValueFn]=\"modelFormatter\"\n  ></ts-radio-group>\n\n  <button (click)=\"submit(myForm.value)\">Submit</button>\n</form>\n```\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    bing: 'Some helper text for my item',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    bing: 'Some helper text for my item',\n    disabled: true,\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    bing: 'Some helper text for my item',\n  },\n]);\n\n// Create a form\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null],\n});\n\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// Use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### Sub-labels\n\nPassing a formatter function to `formatUISubLabelFn` will enable sub-label support:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n```typescript\n// Use the 'bing' value as a sub-label\nuiSubFormatter = (v) => v.bing;\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### No validation or hint\n\nA flag to define whether this radio group field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-radio-group\n  [formControl]=\"myFormCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-radio-group>\n```\n\n### Event driven\n\nListen for change events:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  (selectionChange)=\"selected($event)\"\n></ts-radio-group>\n```\n\n### Required\n\nTo define the radio group as 'required', set the required validator on the form group:\n\n```typescript\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null, [Validators.required]],\n});\n```\n\n### Disabled\n\nTo disable the entire radio group, set `isDisabled` to true:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n  [isDisabled]=\"true\"\n></ts-radio-group>\n```\n\n#### Disabled option\n\nTo disabled only a single option, define the `disabled` key on the item object:\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    disabled: true, // This radio option will be disabled\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n  },\n]);\n```\n\n### Visual mode\n\nVisual mode displays radio options as large clickable areas containing content.\n\nEnable by setting the `isVisual` flag:\n\n```html\n<ts-radio-group [isVisual]=\"true\"></ts-radio-group>\n```\n\n#### Small\n\nFor a smaller clickable area, use the `small` flag.\n\nNOTE: The maximum content should be a title with two lines and body with 3 lines\n\n```html\n<ts-radio-group [isVisual]=\"true\" [small]=\"true\"></ts-radio-group>\n```\n\n### Centered content\n\nBy default the content is centered when in visual mode. Setting `centeredContent` to `false` will use standard top/left alignment.\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [centeredContent]=\"false\"\n  ...\n></ts-radio-group>\n```\n\n### Custom content\n\n`TsRadioOption` now accepts an optional `template` key with a string template:\n\n```typescript\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    template: `<a href=\"${this.myLink}\">My link!</a>`\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    // if no template is defined, it will fall back to `formatUILabelFn` for the display value\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    template: `<h3>Hi!</h3> <p>Here is a thing!</p>`\n  },\n]);\n```\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-radio-group/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                     |\n|------------------------------|\n| `getAllRadioGroupInstances`  |\n| `getRadioGroupInstance`      |\n| `getRadioGroupParentElement` |\n| `selectStandardRadio`        |\n| `selectVisualRadio`          |\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-radio-group.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-radio-group\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.js\n","readmeFilename":"README.md","description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@2.1.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-LUcqB1wSztutxNiIjc3n0lTYyiIZB2f3yDDR1+uqN/4NFSzl+Q4gNGEio2Neitgf/3cd5Uq0bu7EzoRZ9jmqww==","shasum":"3b34ae28b9ec90d2894bfd77ee6760fd1ec66487","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-2.1.0.tgz","fileCount":69,"unpackedSize":398174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9MHCRA9TVsSAnZWagAAWoAP/jnUtxvCnjaGe1EiP5KD\nlD0euKlQuszgp/PA445GHK/4WdbfHHlpn8f4bCzs4nA5UXGuNfmoUhXHJp9P\n60i9rrKkyei5SNX3nRwX530y4miDKiHT/it1Lyea6f9OyuRoBf2B0wREngvW\nCzlhLzNQUq50/NYhN/vFzh960IeSE/Y7WmyWjX2AgOo/09aEHu4wOa5026e7\nOfy2WG43AUmFm+ER03WCOW2HJm93MdXLPJtQxoBgkEXObb1qf2kzXI+rwIpH\nYhJb/KBxTh6PL7Q4M6SAKKiS2EFDGUF1EfNjz1QCPTpEiSZopM5quukxaOe4\n/StUI5cDPD5h4bpuR/61hV82o/fNPRKM+lY4RU5wZ8RpKbjNiXv0cOXWS83k\nBHIzyoVRNlGT83kABUYfM3GBROyTyKsoUGG3AMdVDBkY6NVvpDnpZvD7ZJcL\ndnSaRP072ccqp42Qox7O894AWs69fcm5lEjeu6cQV6+x6+Brsk0n5EzdTyeI\nmRF6cLbVgyCF6E6Lk9bsg2rEAZiwZaZ2Hya9/zjjXVyE35uFR1nefX7H/2ic\nQLAHi68aC8f9doj/uyJH1ugpJXPIW9+uZDe0ouWp4UXADTyhvGGVEpu0QEux\nxWVAS5zeoBvtAImDzE7lszfcQkQ/c3ubrWbVO2DQCEOdXLrbHrKXtQmG3MFI\nL+Wv\r\n=MzPO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG6qXCL/Ezv0+2FE8r0QG8QSO4aOge5sGnS24QYINbtPAiEAjZu9FfTNvMGJty01Cr7eWnPYjo8VKJTe10BGao+Sl1E="}]},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_2.1.0_1599591174507_0.7143893949664752"},"_hasShrinkwrap":false},"2.1.1":{"name":"@terminus/ui-radio-group","version":"2.1.1","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.2.4","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-icon":"^2.0.5","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","rxjs":"6.6.2","date-fns":"2.15.0","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0","@terminus/ui-pipes":"1.1.1"},"description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@2.1.1","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-QQEuHxoT9pRJxHdfl0sDoFchfjwbrXCurlBaAR+OQDcNLK3DqYw2hodWESPslK23XqAXSD6LqdOSFI8vLiDiaQ==","shasum":"73dd63ce6fa48d43043901d2a2bd6659264ddde5","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-2.1.1.tgz","fileCount":69,"unpackedSize":398386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7V3CRA9TVsSAnZWagAA9zIP/0tPbfuVbKGZNHEymYuL\nw/Henc7xQJpND3/UAPI1JojQvRYgyiMDq16wjKWcL37zJNH/euJgP0IFVl4r\n7tBxVV4V7TMyuMdgH09hHIxO3GxLLCRfKljbTkykiBJPQaa3yfsZ6bDFF8K5\n14iEaVjwlvYRXTWg1gA+hSdXlEKP8xiBMwBJKN3kLT0V1/94AZaYsjdrGtMl\nGGN9JbmI/CFS8eS65xwgk1SKABbPg/py0rnY2T+7Rw33dckYQqOrdDBdObBo\nhms5zQbFhRv9w+XEJQObMx55y/GxFhJFPZFPv9lzkUcEPIKX4suKEQOMYt8j\neGaA7VmBn/cRc395z8FY5IJxIfevo+CsJSWcX+NIR/8i8CGHi5pWaiaDfhnR\nc+6wOWGK0kraaVZBHOb5H0s/rmTAQy+VTzetn+JF++X7xKYn7TxmiKRhcHye\nvpKaVkDwm1GNFrabpXDAg9yl/n4cNknile0mkrc/7RNGJIg6os4Zc7Pljm6x\no6HHYT8NiShNGB0uTb2/TU32EDVvXwZT0VIuzLWjdGLxgJfzltP6gF4abVIV\nBm14581rlHe7ky/9QsaSVYnuEqqlfyqhez75yh13St7w8W3ECEMf+Y3ohyHj\n7/uSnHSiJykC4bxdHjOhclPiqN09Rff1LS8XVWXxFXSnxsrcoCZJKc6t581A\nLKbw\r\n=Nlqr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBfN37PqspPE+xn5Rs4/zePGEbUK3Be7+bOHatTna2igIhAKDe/1uAGhBbqsVdFmdAedO6Ltd6SjtegDFWWYEjww8l"}]},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_2.1.1_1599845750870_0.2010124381030165"},"_hasShrinkwrap":false},"2.1.2":{"name":"@terminus/ui-radio-group","version":"2.1.2","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.2.4","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-icon":"^2.0.5","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","rxjs":"6.6.2","date-fns":"2.15.0","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0","@terminus/ui-pipes":"1.1.2"},"readme":"<h1>Radio Group</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [Sub-labels](#sub-labels)\n  - [No validation or hint](#no-validation-or-hint)\n  - [Event driven](#event-driven)\n  - [Required](#required)\n  - [Disabled](#disabled)\n    - [Disabled option](#disabled-option)\n  - [Visual mode](#visual-mode)\n    - [Small](#small)\n  - [Centered content](#centered-content)\n  - [Custom content](#custom-content)\n- [Test Helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@popperjs/core`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-icon`\n- `@terminus/ui-pipes`\n- `@terminus/ui-styles`\n- `@terminus/ui-utilities`\n- `@terminus/ui-radio-group`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-radio-group\n```\n\n### Modules that need to be in NgModule\n\n- `TsRadioGroupModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nPass in:\n\n1. An array of items\n1. A form control\n1. A formatter function to determine the UI display value\n1. A formatter function to determine the model value\n\n```html\n<form [formGroup]=\"myForm\">\n  <ts-radio-group\n    [options]=\"items$ | async\"\n    [formControl]=\"myForm.get('myRadioGroup')\"\n    [formatUILabelFn]=\"uiFormatter\"\n    [formatModelValueFn]=\"modelFormatter\"\n  ></ts-radio-group>\n\n  <button (click)=\"submit(myForm.value)\">Submit</button>\n</form>\n```\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    bing: 'Some helper text for my item',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    bing: 'Some helper text for my item',\n    disabled: true,\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    bing: 'Some helper text for my item',\n  },\n]);\n\n// Create a form\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null],\n});\n\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// Use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### Sub-labels\n\nPassing a formatter function to `formatUISubLabelFn` will enable sub-label support:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n```typescript\n// Use the 'bing' value as a sub-label\nuiSubFormatter = (v) => v.bing;\n// Use the 'bar' value as the UI display\nuiFormatter = (v) => v.bar;\n// use the 'foo' value to save to the model\nmodelFormatter = (v) => v.foo;\n```\n\n### No validation or hint\n\nA flag to define whether this radio group field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-radio-group\n  [formControl]=\"myFormCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-radio-group>\n```\n\n### Event driven\n\nListen for change events:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  (selectionChange)=\"selected($event)\"\n></ts-radio-group>\n```\n\n### Required\n\nTo define the radio group as 'required', set the required validator on the form group:\n\n```typescript\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null, [Validators.required]],\n});\n```\n\n### Disabled\n\nTo disable the entire radio group, set `isDisabled` to true:\n\n```html\n<ts-radio-group\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUISubLabelFn]=\"uiSubFormatter\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n  [isDisabled]=\"true\"\n></ts-radio-group>\n```\n\n#### Disabled option\n\nTo disabled only a single option, define the `disabled` key on the item object:\n\n```typescript\n// Define items to be passed to the radio group\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    disabled: true, // This radio option will be disabled\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n  },\n]);\n```\n\n### Visual mode\n\nVisual mode displays radio options as large clickable areas containing content.\n\nEnable by setting the `isVisual` flag:\n\n```html\n<ts-radio-group [isVisual]=\"true\"></ts-radio-group>\n```\n\n#### Small\n\nFor a smaller clickable area, use the `small` flag.\n\nNOTE: The maximum content should be a title with two lines and body with 3 lines\n\n```html\n<ts-radio-group [isVisual]=\"true\" [small]=\"true\"></ts-radio-group>\n```\n\n### Centered content\n\nBy default the content is centered when in visual mode. Setting `centeredContent` to `false` will use standard top/left alignment.\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [centeredContent]=\"false\"\n  ...\n></ts-radio-group>\n```\n\n### Custom content\n\n`TsRadioOption` now accepts an optional `template` key with a string template:\n\n```typescript\nitems$: Observable<TsRadioOption[]> = of([\n  {\n    foo: 'foo_value',\n    bar: 'Foo Display',\n    template: `<a href=\"${this.myLink}\">My link!</a>`\n  },\n  {\n    foo: 'bar_value',\n    bar: 'Bar Display',\n    // if no template is defined, it will fall back to `formatUILabelFn` for the display value\n  },\n  {\n    foo: 'baz_value',\n    bar: 'Baz Display',\n    template: `<h3>Hi!</h3> <p>Here is a thing!</p>`\n  },\n]);\n```\n\n```html\n<ts-radio-group\n  [isVisual]=\"true\"\n  [options]=\"items$ | async\"\n  [formControl]=\"myForm.get('myRadioGroup')\"\n  [formatUILabelFn]=\"uiFormatter\"\n  [formatModelValueFn]=\"modelFormatter\"\n></ts-radio-group>\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-radio-group/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                     |\n|------------------------------|\n| `getAllRadioGroupInstances`  |\n| `getRadioGroupInstance`      |\n| `getRadioGroupParentElement` |\n| `selectStandardRadio`        |\n| `selectVisualRadio`          |\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-radio-group.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-radio-group\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.js\n","readmeFilename":"README.md","description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@2.1.2","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-KIAMXk4DW1Ra7kWqyVtVg0OLH3fLoqbugSjYx4BdnxDAfNxU25p2zCnO90xpUiPo75tTnjyeb7P7GEUECpKoJA==","shasum":"597a77596ddda0d6d11642a31daf578008970349","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-2.1.2.tgz","fileCount":69,"unpackedSize":398994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX6rBCRA9TVsSAnZWagAAX7sP+gOkawniqxWPiN3epKUG\nbf4eYYy3MDSufxmMBzc6xFVSBj/eKDDFsU1w1o1VPQry6TAIqMW+dyjbYfCv\nfXjg3QSWyZBujzyuyKZI2dkMjYQ+vtwv9mriyEi+CJ2PCecdGPc8Hl+/QQKQ\nBTin2iOwt8kHV1Ilh0GLHHWV8IhoCg5ozV/SUQC68zSxWylvzS3ybnLFjJp0\nd2w/DxokIocjU0imV5pt3QZRI7Y5eT1FwgQBsw0YLOVZinZiZaLMxfLvRQo1\nei7smQYoZpYJteemzIoEdhZ1z6yFGHGBTm2fHxkZk41g611bDTFOyK2RCH24\nHxBvayQQt8U3JtFvHLDm5AMOTKbEID5w6sD9uCDygZ0l0CD+GltPeX3nGYt7\nceL+FEdIgapffRlwxb8wHowXAB/SBj1i24LpO5X9hsnxb8UWN8JQtafq8fPk\nMvcIph8sdsZFnnCWVecmLI7PAUomtvqOXpLNJJTRSZp29UwhtV3kl1iZefer\nqXaj49byLFP6SaKJAPBj/U6tG1+KtjSJ1OcVusoX/i0MxZQkIY3Gj4EhV4iI\nv7CQeD7MB3vuJiqtHRxKKIaQKjW1pA9dZW5/7opEDEPo6cY/dsxVYjXqf/zH\nK6kaT28VylA+Jvv/7XdhEqLX/WDFvALN91M8xG/a21EpigtSdG/aDrBSYjup\niKF+\r\n=HUou\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB56p45Cr/odxdZX2uiPeFy2n6xSVnvABnlwBQrQ/nW6AiAKpDty8aTgJN3PcpjYW1iYIRf/sSWjqev0gwHvQpoABw=="}]},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_2.1.2_1600105152954_0.32582679288475314"},"_hasShrinkwrap":false},"2.1.3":{"name":"@terminus/ui-radio-group","version":"2.1.3","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.2.4","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-icon":"^2.0.5","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","rxjs":"6.6.3","date-fns":"2.16.1","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0","@terminus/ui-pipes":"1.1.4"},"description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@2.1.3","_nodeVersion":"12.18.4","_npmVersion":"lerna/3.22.1/node@v12.18.4+x64 (linux)","dist":{"integrity":"sha512-vqETb9Q+xfDvFsFbkhK/FIBu3V2QGp+gc9Fipm1ewialc/39/XdoUo3CjPgErxbFtTaWh7OYbjGRdDw8t9j1bg==","shasum":"a0c0a2c6424738a57b138376da7426e937af8305","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-2.1.3.tgz","fileCount":69,"unpackedSize":416710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfeyEkCRA9TVsSAnZWagAA8rsQAJrLUrFzHCWAAMd1Orsl\n87lCC1NByDnHwe4V49L9E3wsVJ/TDtNzRCjJzJV48fetZOpwd23g8DOeyKEW\nb33rjbRYmj94rzkpp7/btlZ9xUdcOCiuN0T6rO43XZU8w4jRQI/dGk2AVmvx\nXpYfGOQDqh3hDjorbup/iS/7psHv5AskE4Bn1+jwXvhNgd1BQdRGi2Yq/aSb\nycMecZJ2wv6a5xeDDvJmzo/nJsabtWrafh+3x7L4Ft/mUNC/w/UVgg6TOv+2\nLPVSaJrIDsV9cMHPdUlJbz2LknlsrDI6QpmHV82igkTuiitlXZL5E+//F19h\nKEOAr8G8N9SZO2zeaFP20cqY7njUihcO/QnP82wBisTFeqjCq9ljfn3ih0fw\nNXGf3ltSJxRthyDBvIqVPXQoUbW8el5ESz9qnT1VFRuWq1jjyy8OZByiHHFq\nBsBzI0z/kJpNQymZpHKBYJBoyAfgJASrohASop6s/7KnZg5ALLbPMPSJMZv3\nMELNC1LAUBn8KkgRAm4Uv6U5sF1ljLSy9MzgK92/hCNcduEdOm5CKwygVdrm\ng2J1XYRhJ1ziX3fGKhwenLU6WHAxIrQCMiVohR/A6wI5uWAPtYT2yhGqjgZR\nFnSHx4wv3mg7zMj6bfv7QnUHmNWsb41/uQPJvj2PTOPH/aj4l3MbYjDveLBw\nY9TL\r\n=F/+k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdn7RggbStbaeoBS0ZpE/xpHGXylOM7Nudw1Py42XA1QIgNSC9pitPKrQB2qi6hVf/gOei6cMTwDEx1ICB9dYzZdU="}]},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_2.1.3_1601904931920_0.4194193497298999"},"_hasShrinkwrap":false},"3.0.0":{"name":"@terminus/ui-radio-group","version":"3.0.0","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/forms":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","rxjs":"6.6.3","date-fns":"2.16.1","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular/flex-layout":"9.0.0-beta.31","@angular/material":"9.2.4","@terminus/ui-autofocus":"1.1.4","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@terminus/ui-pipes":"1.1.5","@angular/cdk":"9.2.4"},"description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@3.0.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-eJ1w7IXoZaXWus01dgp9PrTvGKuXtIGlRIg3EdFPS3LjyWWYggmr430+ova0eBMWnA5Q3BSKWT+h9HcLVzyXgQ==","shasum":"808870637e155cb394d2cd8bc9f030fd949dee91","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-3.0.0.tgz","fileCount":69,"unpackedSize":600605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhuuvCRA9TVsSAnZWagAAoEUQAJNMfK9mkOUJZ+W+9byg\nttzTDYcNMlt5LKSyI2hzMwKXWf8B0nlOCmz1iZ/9rJZQnaoxGWC6fAE/u8rT\naiAEGx3vbd6ms4VQS1cpqtTXLt2JRvz+GwcSm/EjqhbNOCeYnmaNjyPyI6yO\nNNfkimGsfoOs4BYeUqcfHJKMitDzdrho6lvuWZKbMyAtpcit6TBz7o2zij13\nuVRWa0nBC/J0Sr8YndwENPgT+DokBVX6Y+PVvrqd3CR8zyoVyi/Kd0RHcKNb\n2gB6DNQZY3OkFBDUo+OFygIvrZ2n/82v77qPRsi7uJPVLsSrnNpbPLBBGljl\nteiuVUsdCH3QSSBrfSUcJl4FuuGsl8LmcFj5GRHL5nPT4/NIObu2+8F+Z8Gf\nDX9atT7WVwquwtCqCacpdahTiNbsq78h2WL558DF7h6u9ZaEh2TVCIMBFjeq\ne+Zdsa8Mjg7wnPLxxgr9Tp4j5TdEh+m1Z5q+ndTtSvbQzngg8ECsUW39WmAA\nKvp8VazkDK4+va/TgKuU+Flcwhog6uMhe5nOckFYueulNTGgzF8wrwcr8IOl\nicbHIBR6/Vq2dmaKjuQPuyEX3yeDqmiRShCdwSnNn5Mo4mNQ7y+sBDZGK7j/\nmSQB1r6EBgRySiy+xDK0K7rxJ7BW+Mm7TD4gCjm8fd7ZRnccipcdT/l8lu+1\nFGrJ\r\n=USIa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEZ8cmLlDIWiqijZZ8eIVevItgO4m/AnMZukqJSBxCNQIhAJ01jo0ek7W861mIKDsse8P9D7VlgWqkdS/lyavcf2a5"}]},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_3.0.0_1602677679272_0.719298871954904"},"_hasShrinkwrap":false},"3.0.1":{"name":"@terminus/ui-radio-group","version":"3.0.1","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/forms":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","rxjs":"6.6.3","date-fns":"2.16.1","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular/flex-layout":"9.0.0-beta.31","@angular/material":"9.2.4","@terminus/ui-autofocus":"1.1.4","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@terminus/ui-pipes":"1.1.5","@angular/cdk":"9.2.4"},"readme":"<h1>Radio Group</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [State control](#state-control)\n  - [Sub-labels](#sub-labels)\n  - [Validation](#validation)\n    - [Validation messages](#validation-messages)\n    - [No validation or hint](#no-validation-or-hint)\n  - [Fieldset](#fieldset)\n  - [Events](#events)\n  - [Required](#required)\n  - [Disabled](#disabled)\n  - [Manually set selection](#manually-set-selection)\n  - [Visual mode](#visual-mode)\n- [Test Helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/forms`\n- `@angular/platform-browser`\n- `@popperjs/core`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-pipes`\n- `@terminus/ui-styles`\n- `@terminus/ui-utilities`\n- `@terminus/ui-radio-group`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-radio-group\n```\n\n### Modules that need to be in NgModule\n\n- `TsRadioGroupModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nPass in one or more `<ts-radio-button>` components to a `<ts-radio-group>`:\n\n```html\n<ts-radio-group>\n  <ts-radio-button value=\"1\">One</ts-radio-button>\n  <ts-radio-button value=\"2\">Two</ts-radio-button>\n  <ts-radio-button value=\"3\">Three</ts-radio-button>\n</ts-radio-group>\n\n<!-- Or dynamically -->\n<ts-radio-group>\n  <ng-container *ngFor=\"let item of items\">\n    <ts-radio-button [value]=\"item.id\">{{ item.title }}</ts-radio-button>\n  </ng-container>\n</ts-radio-group>\n```\n\n### State control\n\nState can be managed by `ngModel`, `FormControl` or `formControlName`:\n\n```html\n<!-- FormGroup -->\n<form [formGroup]=\"formGroupForm\">\n  <ts-radio-group [formControl]=\"formGroupForm.get('myGroup')\">\n    <ng-container *ngFor=\"let item of items;\">\n      <ts-radio-button [value]=\"item.id\">{{ item.title }}</ts-radio-button>\n    </ng-container>\n  </ts-radio-group>\n</form>\n\n<!-- formGroupName -->\n<form [formGroup]=\"formGroupNameForm\">\n  <ts-radio-group formControlName=\"myGroup\">\n    <ng-container *ngFor=\"let item of items;\">\n      <ts-radio-button [value]=\"item.id\">{{ item.title }}</ts-radio-button>\n    </ng-container>\n  </ts-radio-group>\n</form>\n\n<!-- ngModel -->\n<ts-radio-group [(ngModel)]=\"myModel\">\n  <ng-container *ngFor=\"let item of items;\">\n    <ts-radio-button [value]=\"item.id\">{{ item.title }}</ts-radio-button>\n  </ng-container>\n</ts-radio-group>\n```\n\n### Sub-labels\n\nConsumers have full control over the content of each radio button. Extra content such as icons or sub-labels can be\nadded directly in the template:\n\n```html\n<ts-radio-group>\n  <ts-radio-button value=\"1\">\n    One\n    <small>My sublabel</small>\n  </ts-radio-button>\n  <ts-radio-button value=\"2\">\n    Two\n    <small>My second sublabel</small>\n  </ts-radio-button>\n</ts-radio-group>\n```\n\n### Validation\n\n#### Validation messages\n\nTo enable validation messages the `<ts-radio-group>` must be using a control to manage state - and that control must be\npassed in to the `validationFormControl` input:\n\n```html\n<ts-radio-group formControlName=\"myGroup\" [validationFormControl]=\"formGroupForm.get('myGroup')\">\n  ...\n</ts-radio-group>\n```\n\n#### No validation or hint\n\nDisable the validation and hint section for the control\n\n```html\n<ts-radio-group [noValidationOrHint]=\"true\">\n  ...\n</ts-radio-group>\n```\n\n### Fieldset\n\nThe wrapping fieldset supports a `form` ID and a legend value:\n\n```html\n<ts-radio-group fieldsetId=\"myFormId\" fieldsetLegend=\"My radio group!\">\n  ...\n</ts-radio-group>\n```\n\n### Events\n\nThe group and individual radio buttons both emit selection change events:\n\n```html\n<ts-radio-group (selectionChange)=\"groupChange($event)\">\n  <ts-radio-button value=\"one\" (selectionChange)=\"optionChange($event)\">One</ts-radio-button>\n</ts-radio-group>\n```\n\n| Event                      | Description                                   | Payload         |\n|:---------------------------|:----------------------------------------------|:----------------|\n| `selectionChange` (group)  | Fired when the radio group selection changes  | `TsRadioChange` |\n| `selectionChange` (button) | Fired when the radio button selection changes | `TsRadioChange` |\n\n### Required\n\nThe `required` DOM attribute must be added by setting the `@Input` at the group or button level:\n\n```html\n<!-- This will set the required attribute on all child radio buttons -->\n<ts-radio-group [isRequired]=\"true\">\n  <ts-radio-button value=\"one\">One</ts-radio-button>\n  <ts-radio-button value=\"two\">Two</ts-radio-button>\n</ts-radio-group>\n\n<!-- Or, set at an individual level -->\n<ts-radio-group>\n  <ts-radio-button value=\"one\" [isRequired]=\"true\">One</ts-radio-button>\n  <ts-radio-button value=\"two\" [isRequired]=\"true\">Two</ts-radio-button>\n</ts-radio-group>\n```\n\nIf using ReactiveForms, also set the `FormControl` as required:\n\n```typescript\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null, [Validators.required]],\n});\n```\n\n### Disabled\n\nTo disable the entire radio group, set `isDisabled` to true:\n\n```html\n<!-- This will disable all child radio buttons -->\n<ts-radio-group [isDisabled]=\"true\">\n  <ts-radio-button value=\"one\">One</ts-radio-button>\n  <ts-radio-button value=\"two\">Two</ts-radio-button>\n</ts-radio-group>\n\n<!-- Or, disable at an individual level -->\n<ts-radio-group>\n  <ts-radio-button value=\"one\" [isDisabled]=\"true\">One</ts-radio-button>\n  <ts-radio-button value=\"two\" [isDisabled]=\"false\">Two</ts-radio-button>\n</ts-radio-group>\n```\n\n### Manually set selection\n\nA single option can be programmatically marked as selected:\n\n```html\n<ts-radio-group>\n  <ts-radio-button value=\"one\">One</ts-radio-button>\n  <ts-radio-button value=\"two\" [isChecked]=\"true\">Two</ts-radio-button>\n</ts-radio-group>\n```\n\n### Visual mode\n\nVisual mode displays radio options as large clickable areas containing content.\n\nThis input defaults to `none` which outputs a standard radio group.\n\n```typescript\n// All available visual format options:\nexport type TS_VISUAL_FORMATS\n  = 'none'\n  | 'visual'\n  | 'visual-centered'\n  | 'visual-small'\n  | 'visual-small-centered'\n;\n```\n\n```html\n<ts-radio-group [visualFormat]=\"visual-centered\"></ts-radio-group>\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-radio-group/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                     |\n|------------------------------|\n| `getAllRadioGroupInstances`  |\n| `getRadioGroupInstance`      |\n| `getRadioGroupParentElement` |\n| `selectStandardRadio`        |\n| `selectVisualRadio`          |\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-radio-group.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-radio-group\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.js\n","readmeFilename":"README.md","description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@3.0.1","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-b+jkJSRNINxdl2aanSu+DpbxkZYg4a6z5DhbKwqcCpjtJEsqQFg+rbSqVlGsnIxfN5QRw4F2OwO6us3+95t4qQ==","shasum":"b0a92bf442edc81bb0790c85f9513150cb71001c","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-3.0.1.tgz","fileCount":69,"unpackedSize":603614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhwUJCRA9TVsSAnZWagAAFPAP/3hKTNLQzPbpLC2hM9PX\n9fdJwWmqbwOEC5aQMy8MLod08pXab8C9EWKuaCHR1rv+QHn4GfT/AxDJSLK2\nvnuIibJbwJeT9Xc7x/FImVcUy2kVwmj/YqSAvAtpLWP/X7p3MmYYcWB25yGU\n5X+SZA8uJ4D1vseFG6pND+9D27SAqRLHxVbecvhsPUDOJqXjR2mpXPc+uFrQ\ng343LJn8p72opfXVvTp50qdsXW8jwEN/i/ziyF8Qo6+Xtp6ycd4MpSJKMQPQ\nxE3KYj4/vh++ARBzMqq7zBGelHB3smlJto4VLYG8EYvSpUM1FLkAqTej9c86\noyeTYslRxJn/HywlqiyscOVJklR1+ui/KS16avOalUJOn2mHMrk+JMt1wMJu\n1WZtZ9WQ46UUt7rnNhrSfJScTol8OQRD8AgG5Zdz1/vujOJ7BfSTGHDA4p73\nQqPS3cBadMA2IA+IjAEFlslnyPtGz2joBdubZ1Z5oGKhme760YAvua4XUwWW\nh5F1N8KXHJPrr+Y/5HKDOq/W/1tiHh+ITF6dWvlvt9fSzl1ZGhXpcJgKtBhL\nrCKtGkPc1TINprvgMCpSFo6/lmbHrzBTzsr7OLCUNq7RAlJ1u4EjTVQ/w3Uz\n0PM/K4nW45FRioFc34ePmHTxiGOdsktlOrfp6Jrg7vIZ7WJXKml4F3Amx+hl\nHt24\r\n=4zhh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4GBg8OHMWCNKbH9GzdYfMv2qkKg1sW0Hye1Cj1RIZgQIgC+T3NHQonbB9oIBFFcxiF+whsNDYvae0CvOsZAT9BBk="}]},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_3.0.1_1602684168506_0.5810111092975492"},"_hasShrinkwrap":false},"3.0.2":{"name":"@terminus/ui-radio-group","version":"3.0.2","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/forms":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","rxjs":"6.6.3","date-fns":"2.16.1","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular/flex-layout":"9.0.0-beta.31","@angular/material":"9.2.4","@terminus/ui-autofocus":"1.1.4","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@terminus/ui-pipes":"1.1.5","@angular/cdk":"9.2.4"},"readme":"<h1>Radio Group</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [State control](#state-control)\n  - [Sub-labels](#sub-labels)\n  - [Validation](#validation)\n    - [Validation messages](#validation-messages)\n    - [No validation or hint](#no-validation-or-hint)\n  - [Fieldset](#fieldset)\n  - [Events](#events)\n  - [Required](#required)\n  - [Disabled](#disabled)\n  - [Manually set selection](#manually-set-selection)\n  - [Visual mode](#visual-mode)\n- [Test Helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/forms`\n- `@angular/platform-browser`\n- `@popperjs/core`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-pipes`\n- `@terminus/ui-styles`\n- `@terminus/ui-utilities`\n- `@terminus/ui-radio-group`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-radio-group\n```\n\n### Modules that need to be in NgModule\n\n- `TsRadioGroupModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nPass in one or more `<ts-radio-button>` components to a `<ts-radio-group>`:\n\n```html\n<ts-radio-group>\n  <ts-radio-button value=\"1\">One</ts-radio-button>\n  <ts-radio-button value=\"2\">Two</ts-radio-button>\n  <ts-radio-button value=\"3\">Three</ts-radio-button>\n</ts-radio-group>\n\n<!-- Or dynamically -->\n<ts-radio-group>\n  <ng-container *ngFor=\"let item of items\">\n    <ts-radio-button [value]=\"item.id\">{{ item.title }}</ts-radio-button>\n  </ng-container>\n</ts-radio-group>\n```\n\n### State control\n\nState can be managed by `ngModel`, `FormControl` or `formControlName`:\n\n```html\n<!-- FormGroup -->\n<form [formGroup]=\"formGroupForm\">\n  <ts-radio-group [formControl]=\"formGroupForm.get('myGroup')\">\n    <ng-container *ngFor=\"let item of items;\">\n      <ts-radio-button [value]=\"item.id\">{{ item.title }}</ts-radio-button>\n    </ng-container>\n  </ts-radio-group>\n</form>\n\n<!-- formGroupName -->\n<form [formGroup]=\"formGroupNameForm\">\n  <ts-radio-group formControlName=\"myGroup\">\n    <ng-container *ngFor=\"let item of items;\">\n      <ts-radio-button [value]=\"item.id\">{{ item.title }}</ts-radio-button>\n    </ng-container>\n  </ts-radio-group>\n</form>\n\n<!-- ngModel -->\n<ts-radio-group [(ngModel)]=\"myModel\">\n  <ng-container *ngFor=\"let item of items;\">\n    <ts-radio-button [value]=\"item.id\">{{ item.title }}</ts-radio-button>\n  </ng-container>\n</ts-radio-group>\n```\n\n### Sub-labels\n\nConsumers have full control over the content of each radio button. Extra content such as icons or sub-labels can be\nadded directly in the template:\n\n```html\n<ts-radio-group>\n  <ts-radio-button value=\"1\">\n    One\n    <small>My sublabel</small>\n  </ts-radio-button>\n  <ts-radio-button value=\"2\">\n    Two\n    <small>My second sublabel</small>\n  </ts-radio-button>\n</ts-radio-group>\n```\n\n### Validation\n\n#### Validation messages\n\nTo enable validation messages the `<ts-radio-group>` must be using a control to manage state - and that control must be\npassed in to the `validationFormControl` input:\n\n```html\n<ts-radio-group formControlName=\"myGroup\" [validationFormControl]=\"formGroupForm.get('myGroup')\">\n  ...\n</ts-radio-group>\n```\n\n#### No validation or hint\n\nDisable the validation and hint section for the control\n\n```html\n<ts-radio-group [noValidationOrHint]=\"true\">\n  ...\n</ts-radio-group>\n```\n\n### Fieldset\n\nThe wrapping fieldset supports a `form` ID and a legend value:\n\n```html\n<ts-radio-group fieldsetId=\"myFormId\" fieldsetLegend=\"My radio group!\">\n  ...\n</ts-radio-group>\n```\n\n### Events\n\nThe group and individual radio buttons both emit selection change events:\n\n```html\n<ts-radio-group (selectionChange)=\"groupChange($event)\">\n  <ts-radio-button value=\"one\" (selectionChange)=\"optionChange($event)\">One</ts-radio-button>\n</ts-radio-group>\n```\n\n| Event                      | Description                                   | Payload         |\n|:---------------------------|:----------------------------------------------|:----------------|\n| `selectionChange` (group)  | Fired when the radio group selection changes  | `TsRadioChange` |\n| `selectionChange` (button) | Fired when the radio button selection changes | `TsRadioChange` |\n\n### Required\n\nThe `required` DOM attribute must be added by setting the `@Input` at the group or button level:\n\n```html\n<!-- This will set the required attribute on all child radio buttons -->\n<ts-radio-group [isRequired]=\"true\">\n  <ts-radio-button value=\"one\">One</ts-radio-button>\n  <ts-radio-button value=\"two\">Two</ts-radio-button>\n</ts-radio-group>\n\n<!-- Or, set at an individual level -->\n<ts-radio-group>\n  <ts-radio-button value=\"one\" [isRequired]=\"true\">One</ts-radio-button>\n  <ts-radio-button value=\"two\" [isRequired]=\"true\">Two</ts-radio-button>\n</ts-radio-group>\n```\n\nIf using ReactiveForms, also set the `FormControl` as required:\n\n```typescript\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null, [Validators.required]],\n});\n```\n\n### Disabled\n\nTo disable the entire radio group, set `isDisabled` to true:\n\n```html\n<!-- This will disable all child radio buttons -->\n<ts-radio-group [isDisabled]=\"true\">\n  <ts-radio-button value=\"one\">One</ts-radio-button>\n  <ts-radio-button value=\"two\">Two</ts-radio-button>\n</ts-radio-group>\n\n<!-- Or, disable at an individual level -->\n<ts-radio-group>\n  <ts-radio-button value=\"one\" [isDisabled]=\"true\">One</ts-radio-button>\n  <ts-radio-button value=\"two\" [isDisabled]=\"false\">Two</ts-radio-button>\n</ts-radio-group>\n```\n\n### Manually set selection\n\nA single option can be programmatically marked as selected:\n\n```html\n<ts-radio-group>\n  <ts-radio-button value=\"one\">One</ts-radio-button>\n  <ts-radio-button value=\"two\" [isChecked]=\"true\">Two</ts-radio-button>\n</ts-radio-group>\n```\n\n### Visual mode\n\nVisual mode displays radio options as large clickable areas containing content.\n\nThis input defaults to `none` which outputs a standard radio group.\n\n```typescript\n// All available visual format options:\nexport type TS_VISUAL_FORMATS\n  = 'none'\n  | 'visual'\n  | 'visual-centered'\n  | 'visual-small'\n  | 'visual-small-centered'\n;\n```\n\n```html\n<ts-radio-group [visualFormat]=\"visual-centered\"></ts-radio-group>\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-radio-group/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                     |\n|------------------------------|\n| `getAllRadioGroupInstances`  |\n| `getRadioGroupInstance`      |\n| `getRadioGroupParentElement` |\n| `selectStandardRadio`        |\n| `selectVisualRadio`          |\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-radio-group.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-radio-group\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.js\n","readmeFilename":"README.md","description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@3.0.2","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-0Exwm+h646vyeAYJOlJZO6CTko7WP15dMoIyhG1VgmMDpxlB2VrpDRGVAxo/B4k9DdgsTmYHfLyZOeoiG7UWXA==","shasum":"9300d1338cc78c6c25b1f176aca214b6fe7afc86","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-3.0.2.tgz","fileCount":69,"unpackedSize":604301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhwyQCRA9TVsSAnZWagAAYjgQAIVM6EidDWq/IMOGZoCn\n79TOzbxgHUPO1ks/XS8up0Lit9eXMxb9ma7Al4laTDbzw2l/2t+ySE0bX54z\nv2zUYpBq9mqKGfdLksh9RghEoqvvAM+Drm/raRGIltHSGOtX9E5/4y1cKDoT\nY9X8JTlECG86w8G6N4U52fX6EFfYixiE7FvZ++DDaoEBf4if2XPZsmxul3sX\nc9eC9tKZrixlnNgf+FTmziTzidqbfjyY/XXF3teZH8oSXtddyuFYjn5DopLT\nd8dynAE6W4Y1I4OM/aiVOcrvGIumA5XsVTlgjZldaUAf1Vtg65IDie2Cc1vN\nV2syfnzWNCSm7UdWFWTY+iIIdbGGD0Pe7rDWaX/mnX0v55uKdQioDRXwhcww\nU+8yS/2f6l3nJTr2dZ76tn7zLHvir8Y7khyYpF0Vb2Me9r31WV0dEr8HeWOG\nQ4ks1Ow46F07jX3ANwX3SecTt/nl3i+pm7ZIEpVKeBrLjd3CHyMzCljjDT6m\n4vrE2bOCJFjrsRaPxDSSb7th6xpNDGfOL9/EEUvGo9r5Pjmxnj/dR/w9jKPM\nFuCSkoD7GIu6qqupvAffcY9HAWazTJP2fT4uq0TL6LCSpwe3sQjpLCHgqIUz\nvvoDSVh3tBbeda1Zciuof5ZJIu5TgXQ8JHTD9UXc4vlZD+bGkmyU9KUKysVK\nhSSe\r\n=WJbn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtExMVwNRKHKbhkhCd5HAmw4qS94nwfIj9ez8QPVottgIhAPDUMhG2PDQxSbAxJgIyyEH50g7ITBd4VYepnx2+Alpn"}]},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_3.0.2_1602686095993_0.9008200094177479"},"_hasShrinkwrap":false},"3.1.0":{"name":"@terminus/ui-radio-group","version":"3.1.0","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/forms":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","rxjs":"6.6.3","date-fns":"2.16.1","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular/flex-layout":"9.0.0-beta.31","@angular/material":"9.2.4","@terminus/ui-autofocus":"1.1.4","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@terminus/ui-pipes":"1.1.5","@angular/cdk":"9.2.4"},"description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@3.1.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-rReGPAboTpWfxfyVFCN3vNvpV5ssRiTTkrLlCY5uzC1JJczE3wJ3zNBjVA2aSig6jgsERjJmLCsF3gttmOdN/A==","shasum":"3c757ea7b31dc11b29bc9bb6906ce0d98803a6d6","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-3.1.0.tgz","fileCount":75,"unpackedSize":651791,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoEPaCRA9TVsSAnZWagAAHx0P/2fTbiklBpnqjYROsoEL\nFEnu1l7ojSKiej59nDnULrEuukMS0E/wxPnvzxE3sl33ehj70trMXVRxMWmy\nHOrA5lQJmhrbEoZkgUqOgjem/+ARP0Nh2XQ3lGVtHbVckzzwLqHfUHBfudAG\nK4gx+c/HIUkI0tYXP5O9r8r+4aW/wDxTQPE1HbRMyw5k9e/Qu/luhXuIp1lj\nJWENoZ/UvrrpBWPGrqhPab4tpSfepwnXmC9lWjc8wh6rm8mfS19RUliBRZMD\nkJI/LHYCPlLeSIVvbYRhCy4FLKltAGN+VT2nu2+ZDCOKrQC80+xhRnmQk1Y9\n5hFUbJUQaonIiQ3+rMjbUNanq8yNb8tHUQ5Y1JWFykllT2TdhL8Vj2kTraOU\nIjin0SZwBexoillxq0H/VMg9F2grtqqpq2pR8LMrs4ytL2mDB5kVulX0nvgB\n/thUg7t9L5t0uCYCNFWqvRBwzPjEQI3LNNbD4lBRrEhkQDiE8DQbMRvAcLr3\nYh5I0tQaku5prXygfLROP0CPzjlSRcZD4q6dNER+C3sUUbdIKdouI+6hmfHF\nZGoI+meZfjof0F+8lcHw5n7iduuhCtxoosmJKQF69AzMrRMgyd0Lxj7b89Yo\nPoxb9SH7hx5FVI4SWO7gEKrg2eD/vUNVoXB8gYvmJZB4LkEA6xw1zsU9OWnb\nOnAJ\r\n=C0Pg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDt7nvlP7xivxdtuX02MVy0H2jgixQkFdMQQvmVKG6UzQIgKH5lLTwct5FX3KcmW0oTJED82V2rIq9lrbjepCG4Tqw="}]},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_3.1.0_1604338650095_0.09983485836273998"},"_hasShrinkwrap":false},"3.1.1":{"name":"@terminus/ui-radio-group","version":"3.1.1","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/forms":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","rxjs":"6.6.3","date-fns":"2.16.1","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular/flex-layout":"9.0.0-beta.31","@angular/material":"9.2.4","@terminus/ui-autofocus":"1.1.4","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@terminus/ui-pipes":"1.2.0","@angular/cdk":"9.2.4"},"description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@3.1.1","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-anyMgCDAt+jCgTY72i+CUpPcrUrtcSJabr8NmleVREDfb3FlZX182tzd1gj07aQfukybY6SE+I4PDkDFbJeJRQ==","shasum":"24ae6c42ecd8ebfc367cd59aa74def7d12e47126","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-3.1.1.tgz","fileCount":75,"unpackedSize":652062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpYCvCRA9TVsSAnZWagAAYEcP/RJFgA5bVAb+Y9h1Wxxq\na0VsypJrTXoAySQZYTXetyMUqdieEzF+hmB/yZs4j49QJn33BoPpYONhxGuC\nw8Tbr1ydcjXarpXQy4edU9o068haQfmCgxFNFN+UVtRaoptdl7qinMPjlHDD\nyvda+aMqXjmNSgWHn/pHoUgmq+CauG6DOADL2cZMDSL3Is6DZpN7LQJeai0F\n7JdaWomTDBGBaZsW8YCOLJ+CwK81tR9ItU/gNhavqc8smWjlKHI0FbJ3N30c\nJBhCslE4Zi2hSjeatBv5tJbVs5QWXYeI6H4Qm8Ld+A7o9jGCH/NHf8PyfvBG\nIP7qjge7+wBvcXDZUlVmNU6nyRfNI0IDtbThxKhFElJUM0wVVcOEZGs+Qoxj\n6dJ+N6lFtGq7thF17AEKRUMnferdN9ska3eAkEOP9fEehMHzFXM93sqTBRHt\n7hU/TyQA6MKtm40gnvlFnE6bdqRPhgVUL6cErL4Xn6eHtMt6BMRDxFD4/vYa\nOhNtSeRKZTUZH4aKGNIiaqevt9J+FzNg+UCFIrVJ5L9D3CcSDyuCk0oHEgsK\nhn52x67jcxRm89+ocPKQnWlFlXrm+C79eUujBDApYF2MdptDm4VJd2RfPezZ\noPhRZq+UCazJe6U9rTV8YqNAlLFLsraAI77zUWcaH+vSNC64oJmSlmFHHsQs\njGMx\r\n=avpG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFKBGmpVZKO/Z+J1pNnC5X+rmcgvfl7wV/8qjRRG0gD4AiEAn5y7All/U7kzZhL1652C2stdt3QhSI5wqK3h+fLWFNI="}]},"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_3.1.1_1604681902704_0.7722283374326238"},"_hasShrinkwrap":false},"3.1.2":{"name":"@terminus/ui-radio-group","version":"3.1.2","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/cdk":"^9.2.4","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/forms":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-pipes":"^1.2.0","@terminus/ui-validation-messages":"^1.0.14","date-fns":"^2.16.1","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12"},"description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@3.1.2","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-vUK3+VQkzlHyFVuLKrIGhy7RmWPFoYxMt2qImzKEznMOwGLeKjvf7+mptXNu8srw0OMn7UUBgObHW8RNM4kOIA==","shasum":"c01e370fc1e6ee295f0c944abdc1de2555345ad4","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-3.1.2.tgz","fileCount":75,"unpackedSize":651988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfq9MoCRA9TVsSAnZWagAAhlMP/07kVreKqZo1XUfWXVgV\nRIugTDGjjHaaI8IdPjNNErmup5xihdBQ+EbUi5T8qvEJevVnFD1umSzzuGqC\nBlWVaSsAdC+6afuo3JFwQLostBHNEyTRBbKxwenDf55OzcXUF32BFE2QlIBW\n6Jz9pVa3xj+viHWsc66+l/hFnSgRMqsuoGicdwE4scncPqd8kLxY7nVFczGI\nJy8rN71blh/no69L0/1guerq4bs6ct6XxlL/nIezHSPttE2oxBHPjdrgLV03\nHdX58W+mNqyZ1H78rHD/DHQfKbKjxKiH+4xp/gaI06w9rV63ch9rG8+bzzQL\nYtQ2EwCJglPwzfnavKRljj8m7kVm7EXQVj9gtLFEeR6cxBo+IMM//I2KoiJ8\nw7goNkBm0lZq3ejYQ7y2ECx8DSEiZ95OKOp3bd7sWTGJnr4I2zMyBvtucYNt\nffKTx/o/xOh0zP0K239PhivAsO4+4VdMYCN/BlUX6kVCP72rcgZouVz4Qpaq\nouN8LpozuEy3O5lWA1hnY5trCi1/ApgxYSo7wpv7gDl7dV3g63n7t403PzUs\nf50sA8lwPiD0FS1mydUsVUC8FVVmGzBMjAKcNnYa5Em+oZMwtBfrM6geq3tX\nVb2QK+1usulmjLFvvaBOrRoWRJ3c7ISg6iFB07uvaG/Cj8QhUf9ZaPOQ230/\nNyqq\r\n=Nxse\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2i+Kl6IVnkPUJaQUFeLXvwY0l9KctQ/7YnI4j1oJp3AIhANvksTEJ9PJhqEK8hTKoMAvt5llDOctbQfVr/PWKEc3m"}]},"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_3.1.2_1605096231853_0.7964781827481697"},"_hasShrinkwrap":false},"3.1.3":{"name":"@terminus/ui-radio-group","version":"3.1.3","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"peerDependencies":{"@angular/cdk":"^9.2.4","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/forms":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-pipes":"^1.2.0","@terminus/ui-styles":"^1.1.0","@terminus/ui-validation-messages":"^1.0.14","date-fns":"^2.16.1","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm5/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm5":"esm5/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm5":"fesm5/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12"},"description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@3.1.3","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-VObIpK0f1X18mf3nVF+ZpHPZLb7biLjYXO/MsX4RMONc0gF7H+yFlnJ1EXWEeuTpGm2rG9bFvBoYf9KtrwFrSg==","shasum":"d59bc37c0207558b1411842d2f305ba18ab6dc88","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-3.1.3.tgz","fileCount":75,"unpackedSize":652390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrB3JCRA9TVsSAnZWagAAMxcP+wXSD/tLM8pE1YThLG3L\n6Zl3QKJ3jnOX3oUKkG363kJ5ibXZoh4/wkFORBDCCHddhyfgbden6sOlM8OL\nKga2gDcoBJAOt699NOWDmhOg6mMGyUbafjWtt+pqrDg60JdjCjWNF7g2hEuG\n+jklHpgYIIGLhQffbXcoED69PecuiMecn9wWIgW8DdNQDQ2dEGO+vGwbxfU+\nhcB7Xp6USPbwScypeCm9267z5Xmtu6TR5X/WoYeDIL/sxc7EPBJrPjdHcYYK\ngGtVucpvd2INlUaFwwk27zXl2ezp2KEfzN4zZO85jxDabna2b8Mj1dwy4Mwx\nYqQst650FnyCifdwRba/HysU2YlrFWbT7fO6AuDWuLGPaubcu0/3z2ymUA1j\nsK605LH4z1vZimA547zZq+TQn5oKuzoaJ8Z2PD0Lx4sua1WlEScYl50VMIxe\nb3671+9JiLFER/aEwyqssh9Z12fJtL2J2YPl+M3C3f1MdOJ3NG1VT7KpVvn5\nlsCcWfup18T1KbvSEIzGnzcgdGx2ixwmarosAtx9t1u/dhDB21jAF9/Y98FN\ngagOdnop86KE3H1+wqmFqaIxvhrj8YDJKBqZ72MN2IfW8OQClhJYV1KzB5Aq\nqA640YrXMrL0OxB2nSfIMXg0Dq2NQSDBq5+NUeGnYmsMpQE0igYI5h9mv13T\nN0/Q\r\n=qA9y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFII7j97zCOTUeFuiDm+ZMxSW190JCiKz6YRIzya1/hjAiEA8bHkSbwg+W+JkaDdx7awd7TdrI/57MW/OnC/PulnG5w="}]},"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_3.1.3_1605115337132_0.9413405405181654"},"_hasShrinkwrap":false},"4.0.0":{"name":"@terminus/ui-radio-group","version":"4.0.0","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/radio-group"},"dependencies":{"tslib":"^2.0.3","@angular-devkit/schematics":"11.0.4","@schematics/angular":"11.0.4"},"peerDependencies":{"@angular/cdk":"^11.0.3","@angular/common":"^11.0.4","@angular/core":"^11.0.4","@angular/forms":"^11.0.4","@angular/platform-browser":"^11.0.4","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^2.0.0","@terminus/ui-pipes":"^2.0.0","@terminus/ui-styles":"^2.0.0","@terminus/ui-validation-messages":"^2.0.0","date-fns":"^2.16.1","rxjs":"^6.6.3"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-radio-group.umd.js","module":"fesm2015/terminus-ui-radio-group.js","es2015":"fesm2015/terminus-ui-radio-group.js","esm2015":"esm2015/terminus-ui-radio-group.js","fesm2015":"fesm2015/terminus-ui-radio-group.js","typings":"terminus-ui-radio-group.d.ts","metadata":"terminus-ui-radio-group.metadata.json","sideEffects":false,"readme":"<h1>Radio Group</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [Installation](#installation)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [State control](#state-control)\n  - [Sub-labels](#sub-labels)\n  - [Validation](#validation)\n    - [Validation messages](#validation-messages)\n    - [No validation or hint](#no-validation-or-hint)\n  - [Fieldset](#fieldset)\n  - [Events](#events)\n  - [Required](#required)\n  - [Disabled](#disabled)\n  - [Manually set selection](#manually-set-selection)\n  - [Visual mode](#visual-mode)\n  - [Segmented mode](#segmented-mode)\n- [Test Helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-radio-group\n```\n\n### CSS imports\n\nIn your top-level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nPass in one or more `<ts-radio-button>` components to a `<ts-radio-group>`:\n\n```html\n<ts-radio-group>\n  <ts-radio-button value=\"1\">One</ts-radio-button>\n  <ts-radio-button value=\"2\">Two</ts-radio-button>\n  <ts-radio-button value=\"3\">Three</ts-radio-button>\n</ts-radio-group>\n\n<!-- Or dynamically -->\n<ts-radio-group>\n  <ng-container *ngFor=\"let item of items\">\n    <ts-radio-button [value]=\"item.id\">{{ item.title }}</ts-radio-button>\n  </ng-container>\n</ts-radio-group>\n```\n\n### State control\n\nState can be managed by `ngModel`, `FormControl` or `formControlName`:\n\n```html\n<!-- FormGroup -->\n<form [formGroup]=\"formGroupForm\">\n  <ts-radio-group [formControl]=\"formGroupForm.get('myGroup')\">\n    <ng-container *ngFor=\"let item of items;\">\n      <ts-radio-button [value]=\"item.id\">{{ item.title }}</ts-radio-button>\n    </ng-container>\n  </ts-radio-group>\n</form>\n\n<!-- formGroupName -->\n<form [formGroup]=\"formGroupNameForm\">\n  <ts-radio-group formControlName=\"myGroup\">\n    <ng-container *ngFor=\"let item of items;\">\n      <ts-radio-button [value]=\"item.id\">{{ item.title }}</ts-radio-button>\n    </ng-container>\n  </ts-radio-group>\n</form>\n\n<!-- ngModel -->\n<ts-radio-group [(ngModel)]=\"myModel\">\n  <ng-container *ngFor=\"let item of items;\">\n    <ts-radio-button [value]=\"item.id\">{{ item.title }}</ts-radio-button>\n  </ng-container>\n</ts-radio-group>\n```\n\n### Sub-labels\n\nConsumers have full control over the content of each radio button. Extra content such as icons or sub-labels can be\nadded directly in the template:\n\n```html\n<ts-radio-group>\n  <ts-radio-button value=\"1\">\n    One\n    <small>My sublabel</small>\n  </ts-radio-button>\n  <ts-radio-button value=\"2\">\n    Two\n    <small>My second sublabel</small>\n  </ts-radio-button>\n</ts-radio-group>\n```\n\n### Validation\n\n#### Validation messages\n\nTo enable validation messages the `<ts-radio-group>` must be using a control to manage state - and that control must be\npassed in to the `validationFormControl` input:\n\n```html\n<ts-radio-group formControlName=\"myGroup\" [validationFormControl]=\"formGroupForm.get('myGroup')\">\n  ...\n</ts-radio-group>\n```\n\n#### No validation or hint\n\nDisable the validation and hint section for the control\n\n```html\n<ts-radio-group [noValidationOrHint]=\"true\">\n  ...\n</ts-radio-group>\n```\n\n### Fieldset\n\nThe wrapping fieldset supports a `form` ID and a legend value:\n\n```html\n<ts-radio-group fieldsetId=\"myFormId\" fieldsetLegend=\"My radio group!\">\n  ...\n</ts-radio-group>\n```\n\n### Events\n\nThe group and individual radio buttons both emit selection change events:\n\n```html\n<ts-radio-group (selectionChange)=\"groupChange($event)\">\n  <ts-radio-button value=\"one\" (selectionChange)=\"optionChange($event)\">One</ts-radio-button>\n</ts-radio-group>\n```\n\n| Event                      | Description                                   | Payload         |\n|:---------------------------|:----------------------------------------------|:----------------|\n| `selectionChange` (group)  | Fired when the radio group selection changes  | `TsRadioChange` |\n| `selectionChange` (button) | Fired when the radio button selection changes | `TsRadioChange` |\n\n### Required\n\nThe `required` DOM attribute must be added by setting the `@Input` at the group or button level:\n\n```html\n<!-- This will set the required attribute on all child radio buttons -->\n<ts-radio-group [isRequired]=\"true\">\n  <ts-radio-button value=\"one\">One</ts-radio-button>\n  <ts-radio-button value=\"two\">Two</ts-radio-button>\n</ts-radio-group>\n\n<!-- Or, set at an individual level -->\n<ts-radio-group>\n  <ts-radio-button value=\"one\" [isRequired]=\"true\">One</ts-radio-button>\n  <ts-radio-button value=\"two\" [isRequired]=\"true\">Two</ts-radio-button>\n</ts-radio-group>\n```\n\nIf using ReactiveForms, also set the `FormControl` as required:\n\n```typescript\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null, [Validators.required]],\n});\n```\n\n### Disabled\n\nTo disable the entire radio group, set `isDisabled` to true:\n\n```html\n<!-- This will disable all child radio buttons -->\n<ts-radio-group [isDisabled]=\"true\">\n  <ts-radio-button value=\"one\">One</ts-radio-button>\n  <ts-radio-button value=\"two\">Two</ts-radio-button>\n</ts-radio-group>\n\n<!-- Or, disable at an individual level -->\n<ts-radio-group>\n  <ts-radio-button value=\"one\" [isDisabled]=\"true\">One</ts-radio-button>\n  <ts-radio-button value=\"two\" [isDisabled]=\"false\">Two</ts-radio-button>\n</ts-radio-group>\n```\n\n### Manually set selection\n\nA single option can be programmatically marked as selected:\n\n```html\n<ts-radio-group>\n  <ts-radio-button value=\"one\">One</ts-radio-button>\n  <ts-radio-button value=\"two\" [isChecked]=\"true\">Two</ts-radio-button>\n</ts-radio-group>\n```\n\n### Visual mode\n\nVisual mode displays radio options as large clickable areas containing content.\n\nThis input defaults to `none` which outputs a standard radio group.\n\n```typescript\n// All available visual format options:\nexport type TS_VISUAL_FORMATS\n  = 'none'\n  | 'visual'\n  | 'visual-centered'\n  | 'visual-small'\n  | 'visual-small-centered'\n  | 'segmented'\n  | 'segmented-vertical'\n;\n```\n\n```html\n<ts-radio-group visualFormat=\"visual-centered\"></ts-radio-group>\n```\n\n### Segmented mode\n\nSegmented mode displays radio options much like 'tabs' or 'button groups'. This mode can display in horizontal or\nvertical layout:\n\n```html\n<ts-radio-group visualFormat=\"segmented\">...</ts-radio-group>\n<ts-radio-group visualFormat=\"segmented-vertical\">...</ts-radio-group>\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-radio-group/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                     |\n|------------------------------|\n| `getAllRadioGroupInstances`  |\n| `getRadioGroupInstance`      |\n| `getRadioGroupParentElement` |\n| `selectStandardRadio`        |\n| `selectVisualRadio`          |\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-radio-group.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-radio-group\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.js\n","readmeFilename":"README.md","description":"<h1>Radio Group</h1>","_id":"@terminus/ui-radio-group@4.0.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.22.1/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-L65BA43uaPkoW8HKNFGn8kIyOrplmGPdwLqrsHZlFwkmwuFPcWYQe7oBNIneZhoIVJRkdXDq8pzYFcQcPyhcqA==","shasum":"87b7b7e91a989fcb48eddb6eabbf4edd30b902b7","tarball":"https://registry.npmjs.org/@terminus/ui-radio-group/-/ui-radio-group-4.0.0.tgz","fileCount":55,"unpackedSize":415642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2hfpCRA9TVsSAnZWagAAU/wP/0qIaVS/SjV9Pkp6hTZG\nH4ZE4/oFyjPcU6p9pFgkRmzRWhsYvR8jyNNUxInmfZTEDRuzAtVwUDevQ+xM\n0WvXXkHmZqMiOhzlwD4IQR81mdw+R4hJ0QDInQ07mdWOEdjm8RIkMOtjY7g+\nU+p1IP45jneAgI1yR4y7CsS8CmAx1WoUvnZFzgaDCXLMjL42GHr5k/+UJPiO\nVagQUQwy7iOqr7h31GzO+qL5Q61ASMdzZwu8uVPJjlbUSQz5ryhvrrK7HSos\nLJl3JQiCHO1GhCSbG0rDTYYEff/dcHTsCQLAUylVUXk3UOnEUH6NQ1oylno+\nuum0d1W03/NmlezfAX9UxTG6Iuu0LprgJ6JA6MZrnNkw7bLizExWGY+oBI0Z\nDA71lou7muuzaaSn7STKYvasqF3ppx6O5dNds6/Ku4qOKXKzjRbvKc/I3u5o\neQirDLg3jn58DgB0kwO/X1bJiq8cenOGSB8+oOguuze+gv+Qni14OCKEcisZ\n2INW2dqXwRn7AaAoBXBF48NCd3wP7OEn47J3SzfontJ2gRndqppKO3KFAYyz\nZp5QYxql08WwhO/bjW8WMs1phmCOUKIYnbtDb6gk9wEqEq27KCYZDb2H5pH5\npwBlhIak+CpotUoEFQzGyA7S9Lm4tC/Z5WPw7rap8m+WmBFam4t/rra7euPg\nz0Dt\r\n=VThn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC24tf3xsGC6uBjQNP5bvWIvKrRkFNerhQSvxJCELpYYAiAOE+EUy4ajwwa5vNlpTUgvaumLvRWUhfqnThxquTtdGg=="}]},"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"maintainers":[{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-radio-group_4.0.0_1608128488959_0.13081408019684826"},"_hasShrinkwrap":false}},"time":{"created":"2020-06-02T05:06:23.349Z","0.0.1":"2020-06-02T05:06:23.614Z","modified":"2022-04-07T05:16:19.384Z","1.0.0":"2020-06-04T18:19:19.060Z","1.0.1":"2020-06-05T02:13:41.085Z","1.0.2":"2020-06-10T19:13:41.694Z","1.0.3":"2020-06-11T14:19:11.717Z","1.0.4":"2020-06-23T15:35:36.863Z","1.0.5":"2020-07-07T15:39:38.864Z","1.1.0":"2020-07-09T19:49:56.371Z","1.1.1":"2020-07-10T14:07:31.797Z","1.1.2":"2020-07-13T12:16:55.808Z","1.1.3":"2020-07-13T19:24:47.398Z","2.0.0":"2020-07-27T19:40:23.104Z","2.0.1":"2020-07-28T15:29:39.397Z","2.0.2":"2020-07-28T18:28:56.894Z","2.0.3":"2020-07-29T13:05:46.171Z","2.0.4":"2020-07-29T15:34:22.278Z","2.0.5":"2020-07-31T14:01:13.843Z","2.0.6":"2020-07-31T16:21:55.387Z","2.0.7":"2020-08-05T19:12:12.186Z","2.0.8":"2020-08-10T16:21:08.945Z","2.0.9":"2020-08-14T15:32:10.053Z","2.0.10":"2020-08-20T15:32:23.314Z","2.0.11":"2020-08-21T16:00:38.765Z","2.0.12":"2020-08-25T15:31:02.076Z","2.0.13":"2020-08-25T18:35:02.788Z","2.0.14":"2020-08-26T15:51:48.147Z","2.0.15":"2020-09-03T23:15:49.229Z","2.0.16":"2020-09-04T15:02:33.126Z","2.1.0":"2020-09-08T18:52:54.679Z","2.1.1":"2020-09-11T17:35:51.017Z","2.1.2":"2020-09-14T17:39:13.049Z","2.1.3":"2020-10-05T13:35:32.104Z","3.0.0":"2020-10-14T12:14:39.448Z","3.0.1":"2020-10-14T14:02:48.667Z","3.0.2":"2020-10-14T14:34:56.093Z","3.1.0":"2020-11-02T17:37:30.205Z","3.1.1":"2020-11-06T16:58:22.853Z","3.1.2":"2020-11-11T12:03:52.029Z","3.1.3":"2020-11-11T17:22:17.325Z","4.0.0":"2020-12-16T14:21:29.095Z"},"maintainers":[{"email":"brian.malinconico@terminus.com","name":"bmalinconico-terminus"},{"email":"atlwendy@gmail.com","name":"atlwendy"},{"email":"devops@terminus.com","name":"terminus_devops"}],"description":"<h1>Radio Group</h1>","homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"author":{"name":"@terminus"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"license":"MIT","readme":"<h1>Radio Group</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [State control](#state-control)\n  - [Sub-labels](#sub-labels)\n  - [Validation](#validation)\n    - [Validation messages](#validation-messages)\n    - [No validation or hint](#no-validation-or-hint)\n  - [Fieldset](#fieldset)\n  - [Events](#events)\n  - [Required](#required)\n  - [Disabled](#disabled)\n  - [Manually set selection](#manually-set-selection)\n  - [Visual mode](#visual-mode)\n  - [Segmented mode](#segmented-mode)\n- [Test Helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/forms`\n- `@angular/platform-browser`\n- `@popperjs/core`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-pipes`\n- `@terminus/ui-styles`\n- `@terminus/ui-utilities`\n- `@terminus/ui-radio-group`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-radio-group\n```\n\n### Modules that need to be in NgModule\n\n- `TsRadioGroupModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nPass in one or more `<ts-radio-button>` components to a `<ts-radio-group>`:\n\n```html\n<ts-radio-group>\n  <ts-radio-button value=\"1\">One</ts-radio-button>\n  <ts-radio-button value=\"2\">Two</ts-radio-button>\n  <ts-radio-button value=\"3\">Three</ts-radio-button>\n</ts-radio-group>\n\n<!-- Or dynamically -->\n<ts-radio-group>\n  <ng-container *ngFor=\"let item of items\">\n    <ts-radio-button [value]=\"item.id\">{{ item.title }}</ts-radio-button>\n  </ng-container>\n</ts-radio-group>\n```\n\n### State control\n\nState can be managed by `ngModel`, `FormControl` or `formControlName`:\n\n```html\n<!-- FormGroup -->\n<form [formGroup]=\"formGroupForm\">\n  <ts-radio-group [formControl]=\"formGroupForm.get('myGroup')\">\n    <ng-container *ngFor=\"let item of items;\">\n      <ts-radio-button [value]=\"item.id\">{{ item.title }}</ts-radio-button>\n    </ng-container>\n  </ts-radio-group>\n</form>\n\n<!-- formGroupName -->\n<form [formGroup]=\"formGroupNameForm\">\n  <ts-radio-group formControlName=\"myGroup\">\n    <ng-container *ngFor=\"let item of items;\">\n      <ts-radio-button [value]=\"item.id\">{{ item.title }}</ts-radio-button>\n    </ng-container>\n  </ts-radio-group>\n</form>\n\n<!-- ngModel -->\n<ts-radio-group [(ngModel)]=\"myModel\">\n  <ng-container *ngFor=\"let item of items;\">\n    <ts-radio-button [value]=\"item.id\">{{ item.title }}</ts-radio-button>\n  </ng-container>\n</ts-radio-group>\n```\n\n### Sub-labels\n\nConsumers have full control over the content of each radio button. Extra content such as icons or sub-labels can be\nadded directly in the template:\n\n```html\n<ts-radio-group>\n  <ts-radio-button value=\"1\">\n    One\n    <small>My sublabel</small>\n  </ts-radio-button>\n  <ts-radio-button value=\"2\">\n    Two\n    <small>My second sublabel</small>\n  </ts-radio-button>\n</ts-radio-group>\n```\n\n### Validation\n\n#### Validation messages\n\nTo enable validation messages the `<ts-radio-group>` must be using a control to manage state - and that control must be\npassed in to the `validationFormControl` input:\n\n```html\n<ts-radio-group formControlName=\"myGroup\" [validationFormControl]=\"formGroupForm.get('myGroup')\">\n  ...\n</ts-radio-group>\n```\n\n#### No validation or hint\n\nDisable the validation and hint section for the control\n\n```html\n<ts-radio-group [noValidationOrHint]=\"true\">\n  ...\n</ts-radio-group>\n```\n\n### Fieldset\n\nThe wrapping fieldset supports a `form` ID and a legend value:\n\n```html\n<ts-radio-group fieldsetId=\"myFormId\" fieldsetLegend=\"My radio group!\">\n  ...\n</ts-radio-group>\n```\n\n### Events\n\nThe group and individual radio buttons both emit selection change events:\n\n```html\n<ts-radio-group (selectionChange)=\"groupChange($event)\">\n  <ts-radio-button value=\"one\" (selectionChange)=\"optionChange($event)\">One</ts-radio-button>\n</ts-radio-group>\n```\n\n| Event                      | Description                                   | Payload         |\n|:---------------------------|:----------------------------------------------|:----------------|\n| `selectionChange` (group)  | Fired when the radio group selection changes  | `TsRadioChange` |\n| `selectionChange` (button) | Fired when the radio button selection changes | `TsRadioChange` |\n\n### Required\n\nThe `required` DOM attribute must be added by setting the `@Input` at the group or button level:\n\n```html\n<!-- This will set the required attribute on all child radio buttons -->\n<ts-radio-group [isRequired]=\"true\">\n  <ts-radio-button value=\"one\">One</ts-radio-button>\n  <ts-radio-button value=\"two\">Two</ts-radio-button>\n</ts-radio-group>\n\n<!-- Or, set at an individual level -->\n<ts-radio-group>\n  <ts-radio-button value=\"one\" [isRequired]=\"true\">One</ts-radio-button>\n  <ts-radio-button value=\"two\" [isRequired]=\"true\">Two</ts-radio-button>\n</ts-radio-group>\n```\n\nIf using ReactiveForms, also set the `FormControl` as required:\n\n```typescript\nmyForm = this.formBuilder.group({\n  myRadioGroup: [null, [Validators.required]],\n});\n```\n\n### Disabled\n\nTo disable the entire radio group, set `isDisabled` to true:\n\n```html\n<!-- This will disable all child radio buttons -->\n<ts-radio-group [isDisabled]=\"true\">\n  <ts-radio-button value=\"one\">One</ts-radio-button>\n  <ts-radio-button value=\"two\">Two</ts-radio-button>\n</ts-radio-group>\n\n<!-- Or, disable at an individual level -->\n<ts-radio-group>\n  <ts-radio-button value=\"one\" [isDisabled]=\"true\">One</ts-radio-button>\n  <ts-radio-button value=\"two\" [isDisabled]=\"false\">Two</ts-radio-button>\n</ts-radio-group>\n```\n\n### Manually set selection\n\nA single option can be programmatically marked as selected:\n\n```html\n<ts-radio-group>\n  <ts-radio-button value=\"one\">One</ts-radio-button>\n  <ts-radio-button value=\"two\" [isChecked]=\"true\">Two</ts-radio-button>\n</ts-radio-group>\n```\n\n### Visual mode\n\nVisual mode displays radio options as large clickable areas containing content.\n\nThis input defaults to `none` which outputs a standard radio group.\n\n```typescript\n// All available visual format options:\nexport type TS_VISUAL_FORMATS\n  = 'none'\n  | 'visual'\n  | 'visual-centered'\n  | 'visual-small'\n  | 'visual-small-centered'\n  | 'segmented'\n  | 'segmented-vertical'\n;\n```\n\n```html\n<ts-radio-group visualFormat=\"visual-centered\"></ts-radio-group>\n```\n\n### Segmented mode\n\nSegmented mode displays radio options much like 'tabs' or 'button groups'. This mode can display in horizontal or\nvertical layout:\n\n```html\n<ts-radio-group visualFormat=\"segmented\">...</ts-radio-group>\n<ts-radio-group visualFormat=\"segmented-vertical\">...</ts-radio-group>\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-radio-group/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                     |\n|------------------------------|\n| `getAllRadioGroupInstances`  |\n| `getRadioGroupInstance`      |\n| `getRadioGroupParentElement` |\n| `selectStandardRadio`        |\n| `selectVisualRadio`          |\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-radio-group.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-radio-group\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-radio-group/bundles/terminus-ui-radio-group.umd.js\n","readmeFilename":"README.md"}