{"__symbolic":"module","version":4,"metadata":{"TsRadioGroupModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":17,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/flex-layout","name":"FlexLayoutModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material/radio","name":"MatRadioModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/material/core","name":"MatRippleModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":24,"character":4},{"__symbolic":"reference","module":"@terminus/ui/icon","name":"TsIconModule","line":25,"character":4},{"__symbolic":"reference","module":"@terminus/ui/validation-messages","name":"TsValidationMessagesModule","line":26,"character":4}],"exports":[{"__symbolic":"reference","name":"TsRadioGroupComponent"}],"declarations":[{"__symbolic":"reference","name":"TsRadioGroupComponent"}]}]}],"members":{}},"TsRadioOption":{"__symbolic":"interface"},"TsRadioChange":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TsRadioGroupComponent"},{"__symbolic":"reference","name":"any"}]}]}},"TsRadioFormatFn":{"__symbolic":"interface"},"TsRadioGroupComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@terminus/ui/utilities","name":"TsReactiveFormBaseComponent","line":101,"character":43},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":91,"character":1},"arguments":[{"selector":"ts-radio-group","host":{"class":"ts-radio-group"},"providers":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@terminus/ui/utilities","name":"ControlValueAccessorProviderFactory","line":96,"character":14},"arguments":[{"__symbolic":"reference","name":"TsRadioGroupComponent"}]}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":97,"character":19},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":98,"character":17},"member":"None"},"exportAs":"tsRadioGroup","template":"<!-- STANDARD MODE -->\n<ng-container *ngIf=\"!isVisual\">\n\n  <mat-radio-group\n    class=\"c-radio qa-radio-group\"\n    [disabled]=\"isDisabled\"\n    [required]=\"isRequired\"\n    [class.c-radio--sublabel]=\"formatUISubLabelFn\"\n    [ngClass]=\"{'c-radio-sublabel--with-validation': !noValidationOrHint}\"\n    [(ngModel)]=\"value\"\n  >\n    <ng-container *ngFor=\"let option of options; trackBy: trackByFn\">\n\n      <mat-radio-button\n        class=\"c-radio__control qa-radio-control\"\n        [value]=\"retrieveValue(option, formatModelValueFn)\"\n        [disabled]=\"option.disabled\"\n        [name]=\"id\"\n        (change)=\"radioGroupChange($event)\"\n        #radio=\"matRadioButton\"\n      >\n        {{ retrieveValue(option, formatUILabelFn) }}\n\n        <small\n          class=\"c-radio__control-sublabel\"\n          *ngIf=\"formatUISubLabelFn\"\n        >\n          {{ retrieveValue(option, formatUISubLabelFn) }}\n        </small>\n      </mat-radio-button>\n\n    </ng-container>\n\n    <ts-validation-messages\n      class=\"qa-radio-validation-messages\"\n      *ngIf=\"formControl && !noValidationOrHint\"\n      [control]=\"formControl\"\n      [validateImmediately]=\"true\"\n    ></ts-validation-messages>\n  </mat-radio-group>\n\n</ng-container>\n\n\n<!-- VISUAL MODE -->\n<ng-container *ngIf=\"isVisual\">\n\n  <fieldset\n    class=\"c-radio c-radio--visual qa-radio-group\"\n    [class.c-radio--small]=\"small\"\n  >\n    <legend class=\"c-radio__legend\">\n      {{ label }}\n    </legend>\n\n    <div class=\"c-radio__options\">\n      <ng-container *ngFor=\"let option of options; trackBy: trackByFn\">\n        <label\n          class=\"c-radio__control qa-radio-control\"\n          [class.c-radio__control--disabled]=\"isDisabled || option.disabled\"\n          (click)=\"visualRadioGroupChange(option)\"\n        >\n          <input\n            type=\"radio\"\n            class=\"c-radio__input\"\n            [name]=\"id\"\n            [value]=\"retrieveValue(option, formatModelValueFn)\"\n            [disabled]=\"(isDisabled || option.disabled)\"\n            [checked]=\"retrieveValue(option, formatModelValueFn) === value\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledby\"\n            [attr.aria-describedby]=\"ariaDescribedby\"\n            [(ngModel)]=\"value\"\n          >\n          <div\n            class=\"c-radio__content\"\n            [class.c-radio__content--disabled]=\"isDisabled || option.disabled\"\n            [class.c-radio__content--centered]=\"centeredContent\"\n            mat-ripple\n            [matRippleDisabled]=\"(isDisabled || option.disabled) ? 'disabled' : null\"\n            [matRippleColor]=\"rippleColor\"\n          >\n            <ts-icon class=\"c-radio__content-checkmark\" [inline]=\"true\">\n              done\n            </ts-icon>\n\n            <ng-container *ngIf=\"!option.template\">\n              <span class=\"c-radio__content-label\">\n                {{ retrieveValue(option, formatUILabelFn) }}\n              </span>\n\n              <small\n                class=\"c-radio__control-sublabel\"\n                *ngIf=\"formatUISubLabelFn\"\n              >\n                {{ retrieveValue(option, formatUISubLabelFn) }}\n              </small>\n            </ng-container>\n\n            <span *ngIf=\"option.template\" [innerHTML]=\"domSanitizer.bypassSecurityTrustHtml(option.template)\"></span>\n          </div>\n        </label>\n      </ng-container>\n    </div>\n\n    <ts-validation-messages\n      class=\"qa-radio-validation-messages\"\n      *ngIf=\"formControl  && !noValidationOrHint\"\n      [control]=\"formControl\"\n      [validateImmediately]=\"true\"\n    ></ts-validation-messages>\n  </fieldset>\n\n</ng-container>\n","styles":[".ts-radio-group{display:block}.ts-radio-group :not(.mat-form-field-label-wrapper){box-sizing:border-box}.ts-radio-group h1,.ts-radio-group h2,.ts-radio-group h3,.ts-radio-group h4,.ts-radio-group h5,.ts-radio-group p{margin:unset}.ts-radio-group .c-radio{font-family:Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:16px;letter-spacing:.01em;font-weight:400;border:0;display:block;position:relative}.ts-radio-group .c-radio:not(.c-button):not(.c-input):not(.c-select):not(.ts-checkbox){line-height:20px}.c-radio .c-radio__control{display:block;margin-bottom:4px}.c-radio .c-radio__control-sublabel{font-family:Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:.02em;color:#999;display:block;line-height:1.2em}.c-radio--sublabel.c-radio-sublabel--with-validation{padding-bottom:1.25em}.c-radio--sublabel .c-radio__control .mat-radio-label{align-items:start}.c-radio--visual.c-radio--small .c-radio__control{float:left;height:7rem;margin-bottom:12px;width:13.75rem}.c-radio--visual.c-radio--small .c-radio__control:not(:last-child){margin-right:12px}.c-radio--visual .c-radio__legend{all:unset}.c-radio--visual:not(.c-radio--small) .c-radio__options{display:-ms-grid;display:grid;grid-gap:12px;grid-template-columns:repeat(auto-fill,minmax(12em,1fr))}.c-radio--visual .c-radio__control{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);transition:box-shadow 250ms cubic-bezier(.4,0,.2,1);background-position:center;background-repeat:no-repeat;background-size:cover;border-radius:3px;overflow:hidden;padding:16px;position:relative}.c-radio--visual .c-radio__control:active{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.c-radio--visual .c-radio__control::before{content:\"\";display:block;position:relative;padding-top:100%;width:100%}.c-radio--visual .c-radio__content{bottom:0;left:0;position:absolute;right:0;top:0;align-items:center;border:1px solid #cecdd1;border-radius:3px;padding:16px;transition:border-color .2s ease-in}.c-radio--visual .c-radio__content:focus:not(.c-radio__content--disabled),.c-radio--visual .c-radio__content:hover:not(.c-radio__content--disabled){border-color:#00538a;cursor:pointer}.c-radio--visual .c-radio__content::after{border-color:#00538a #00538a transparent transparent;border-style:solid;border-width:1em;content:'';opacity:0;position:absolute;right:-1px;top:-1px;z-index:1}.c-radio--visual .c-radio__content--centered{display:flex;flex-direction:column;justify-content:center}.c-radio--visual .c-radio__content--disabled{color:#999;cursor:not-allowed}.c-radio--visual .c-radio__content-checkmark{color:#fafafa;opacity:0;position:absolute;right:.1em;top:-.2em;transition:opacity .2s;will-change:opacity;z-index:2}.c-radio--visual .c-radio__input{display:none}.c-radio--visual .c-radio__input:checked~.c-radio__content:not(.c-radio__content--disabled){border:1px solid #00538a}.c-radio--visual .c-radio__input:checked~.c-radio__content.c-radio__content--disabled{border:1px solid #757575;color:#757575}.c-radio--visual .c-radio__input:checked~.c-radio__content.c-radio__content--disabled::after{border-right-color:#757575;border-top-color:#757575}.c-radio--visual .c-radio__input:checked~.c-radio__content .c-radio__content-checkmark,.c-radio--visual .c-radio__input:checked~.c-radio__content::after{opacity:1}"]}]}],"members":{"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":125,"character":3},"arguments":["aria-label"]}]}],"ariaLabelledby":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":131,"character":3},"arguments":["aria-labelledby"]}]}],"ariaDescribedby":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":137,"character":3},"arguments":["aria-describedby"]}]}],"centeredContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":144,"character":3}}]}],"formatUILabelFn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":152,"character":3}}]}],"formatUISubLabelFn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":174,"character":3}}]}],"formatModelValueFn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":196,"character":3}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":218,"character":3}}]}],"isDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":230,"character":3}}]}],"isVisual":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":236,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":242,"character":3}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":250,"character":3}}]}],"noValidationOrHint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":262,"character":3}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":271,"character":3}}]}],"small":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":287,"character":3}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":293,"character":3}}]}],"selectionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":299,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":304,"character":31},{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":305,"character":25}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"retrieveValue":[{"__symbolic":"method"}],"radioGroupChange":[{"__symbolic":"method"}],"visualRadioGroupChange":[{"__symbolic":"method"}],"trackByFn":[{"__symbolic":"method"}]}}},"origins":{"TsRadioGroupModule":"./radio-group.module","TsRadioOption":"./radio-group.component","TsRadioChange":"./radio-group.component","TsRadioFormatFn":"./radio-group.component","TsRadioGroupComponent":"./radio-group.component"},"importAs":"@terminus/ui/radio-group"}