feat(radio): Eva style

src/app/playground-components.ts

@@ -794,6 +794,18 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
         component: 'RadioShowcaseComponent',
         name: 'Radio Showcase',
       },
+      {
+        path: 'radio-statuses.component',
+        link: '/radio/radio-statuses.component',
+        component: 'RadioStatusesComponent',
+        name: 'Radio Statuses',
+      },
+      {
+        path: 'radio-disabled-group.component',
+        link: '/radio/radio-disabled-group.component',
+        component: 'RadioDisabledGroupComponent',
+        name: 'Radio Disabled Group',
+      },
     ],
   },
   {

src/framework/theme/components/radio/_radio.component.theme.scss

@@ -4,80 +4,66 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@mixin input-border-color($color) {
-  input:checked + .radio-indicator,
-  input:hover:not(:disabled) + .radio-indicator {
-    border-color: $color;
-  }
-}
-
-@mixin nb-input-status-color($origin-border-color) {
-  @include input-border-color($origin-border-color);
-  &.success {
-    @include input-border-color(nb-theme(color-success));
-  }
-  &.warning {
-    @include input-border-color(nb-theme(color-warning));
-  }
-  &.danger {
-    @include input-border-color(nb-theme(color-danger));
-  }
-}
-
-@mixin nb-radio-check-mark($size, $color) {
-  &::before {
-    background-color: $color;
-    height: calc(#{$size} * 0.6);
-    width: calc(#{$size} * 0.6);
-    border: solid $color;
-  }
-}
-
-@mixin set-box-style($bg, $size, $border-size, $border-color) {
-  background-color: $bg;
-  width: $size;
-  height: $size;
-  border: $border-size solid $border-color;
-}
-
 @mixin nb-radio-theme() {
   nb-radio {
-    .radio-indicator {
-      @include set-box-style(
-          nb-theme(radio-bg),
-          nb-theme(radio-size),
-          nb-theme(radio-border-size),
-          nb-theme(radio-border-color)
-      );
-
-      @include nb-radio-check-mark(nb-theme(radio-size), nb-theme(radio-checkmark));
+    .radio-circle {
+      height: nb-theme(radio-height);
+      width: nb-theme(radio-width);
+      background-color: nb-theme(radio-background-color);
+      border-style: nb-theme(radio-border-style);
+      border-width: nb-theme(radio-border-width);
     }
 
-    input:checked + .radio-indicator,
-    input:disabled:checked + .radio-indicator {
-      @include set-box-style(
-          nb-theme(radio-checked-bg),
-          nb-theme(radio-checked-size),
-          nb-theme(radio-checked-border-size),
-          nb-theme(radio-checked-border-color)
-      );
-      @include nb-radio-check-mark(nb-theme(radio-checked-size), nb-theme(radio-checked-checkmark));
+    .native-input:focus + .radio-circle {
+      box-shadow: 0 0 0 nb-theme(radio-outline-width) nb-theme(radio-outline-color);
     }
 
-    input:disabled + .radio-indicator {
-      @include set-box-style(
-          nb-theme(radio-disabled-bg),
-          nb-theme(radio-disabled-size),
-          nb-theme(radio-disabled-border-size),
-          nb-theme(radio-disabled-border-color)
-      );
-      @include nb-radio-check-mark(nb-theme(radio-disabled-size), nb-theme(radio-disabled-checkmark));
+    .native-input:disabled + .radio-circle {
+      border-color: nb-theme(radio-disabled-border-color);
+    }
+    .native-input:disabled:checked + .radio-circle::before {
+      background-color: nb-theme(radio-disabled-inner-circle-color);
     }
+    .native-input:disabled ~ .text {
+      color: nb-theme(radio-disabled-text-color);
+    }
+
+    @each $status in nb-get-statuses() {
+      .native-input:enabled + .radio-circle.status-#{$status} {
+        border-color: nb-theme(radio-#{$status}-border-color);
+      }
+      .native-input:enabled:checked + .radio-circle.status-#{$status}::before {
+        background-color: nb-theme(radio-#{$status}-inner-circle-color);;
+      }
+
+      .native-input:enabled:focus + .radio-circle.status-#{$status} {
+        border-color: nb-theme(radio-#{$status}-focus-border-color);
+      }
+      .native-input:enabled:checked:focus + .radio-circle.status-#{$status}::before {
+        background-color: nb-theme(radio-#{$status}-focus-inner-circle-color);
+      }
 
-    @include nb-input-status-color(nb-theme(radio-checked-border-color));
+      label:hover .native-input:enabled + .radio-circle.status-#{$status} {
+        border-color: nb-theme(radio-#{$status}-hover-border-color);
+      }
+      label:hover .native-input:checked:enabled + .radio-circle.status-#{$status}::before {
+        background-color: nb-theme(radio-#{$status}-hover-inner-circle-color);
+      }
+
+      .native-input:enabled:active + .radio-circle.status-#{$status} {
+        border-color: nb-theme(radio-#{$status}-active-border-color);
+      }
+      .native-input:enabled:checked:active + .radio-circle.status-#{$status}::before {
+        background-color: nb-theme(radio-#{$status}-active-inner-circle-color);
+      }
+    }
 
-    .radio-description {
-      color: nb-theme(radio-fg);
+    .text {
+      color: nb-theme(radio-text-color);
+      font-family: nb-theme(radio-text-font-family);
+      font-size: nb-theme(radio-text-font-size);
+      font-weight: nb-theme(radio-text-font-weight);
+      line-height: nb-theme(radio-text-line-height);
     }
   }
 }

src/framework/theme/components/radio/radio-group.component.ts

@@ -23,31 +23,31 @@ import {
 import { isPlatformBrowser } from '@angular/common';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { fromEvent, merge } from 'rxjs';
-import { filter, switchMap, take, takeWhile } from 'rxjs/operators';
+import { filter, switchMap, take, takeUntil, takeWhile } from 'rxjs/operators';
 import { convertToBoolProperty } from '../helpers';
 import { NB_DOCUMENT } from '../../theme.options';
 import { NbRadioComponent } from './radio.component';
-
+import { NbComponentStatus } from '../component-status';
 
 /**
  * The `NbRadioGroupComponent` is the wrapper for `nb-radio` button.
  * It provides form bindings:
  *
  * ```html
  * <nb-radio-group [(ngModel)]="selectedOption">
- *   <nb-radio>Option 1</nb-radio>
- *   <nb-radio>Option 2</nb-radio>
- *   <nb-radio>Option 3</nb-radio>
+ *   <nb-radio value="1">Option 1</nb-radio>
+ *   <nb-radio value="2">Option 2</nb-radio>
+ *   <nb-radio value="3">Option 3</nb-radio>
  * </nb-radio-group>
  * ```
  *
  * Also, you can use `value` and `valueChange` for binding without forms.
  *
  * ```html
  * <nb-radio-group [(value)]="selectedOption">
- *   <nb-radio>Option 1</nb-radio>
- *   <nb-radio>Option 2</nb-radio>
- *   <nb-radio>Option 3</nb-radio>
+ *   <nb-radio value="1">Option 1</nb-radio>
+ *   <nb-radio value="2">Option 2</nb-radio>
+ *   <nb-radio value="3">Option 3</nb-radio>
  * </nb-radio-group>
  * ```
  *
@@ -59,13 +59,12 @@ import { NbRadioComponent } from './radio.component';
  * </nb-radio-group>
  * ```
  *
+ * You can change radio group status by setting `status` input.
+ * @stacked-example(Statuses, radio/radio-statuses.component)
+ *
  * Also, you can disable the whole group using `disabled` attribute.
+ * @stacked-example(Disabled group, radio/radio-disabled-group.component)
  *
- * ```html
- * <nb-radio-group disabled>
- *   ...
- * </nb-radio-group>
- * ```
  * */
 @Component({
   selector: 'nb-radio-group',
@@ -82,34 +81,63 @@ import { NbRadioComponent } from './radio.component';
 })
 export class NbRadioGroupComponent implements AfterContentInit, OnDestroy, ControlValueAccessor {
 
-  @ContentChildren(NbRadioComponent, { descendants: true }) radios: QueryList<NbRadioComponent>;
+  protected alive: boolean = true;
+  protected isTouched: boolean = false;
+  protected onChange = (value: any) => {};
+  protected onTouched = () => {};
 
-  @Input('value')
-  set setValue(value: any) {
-    this.value = value;
+  @Input()
+  get value(): any {
+    return this._value;
+  }
+  set value(value: any) {
+    this._value = value;
     this.updateValues();
   }
+  protected _value: any;
 
-  @Input('name')
-  set setName(name: string) {
-    this.name = name;
+  @Input()
+  get name(): string {
+    return this._name;
+  }
+  set name(name: string) {
+    this._name = name;
     this.updateNames();
   }
+  protected _name: string;
 
-  @Input('disabled')
-  set setDisabled(disabled: boolean) {
-    this.disabled = convertToBoolProperty(disabled);
+  @Input()
+  get disabled(): boolean {
+    return this._disabled;
+  }
+  set disabled(disabled: boolean) {
+    this._disabled = convertToBoolProperty(disabled);
     this.updateDisabled();
   }
+  protected _disabled: boolean;
 
-  @Output() valueChange: EventEmitter<any> = new EventEmitter();
+  /**
+   * Radio buttons status.
+   * Possible values are `primary` (default), `success`, `warning`, `danger`, `info`.
+   */
+  @Input()
+  get status(): NbComponentStatus {
+    return this._status;
+  }
+  set status(status: NbComponentStatus) {
+    if (status === '') {
+      this._status = this._defaultStatus;
+    } else {
+      this._status = status;
+    }
+    this.updateStatus();
+  }
+  protected readonly _defaultStatus: NbComponentStatus = 'primary';
+  protected _status: NbComponentStatus = this._defaultStatus;
 
-  protected disabled: boolean;
-  protected value: any;
-  protected name: string;
-  protected alive: boolean = true;
-  protected onChange = (value: any) => {};
-  protected onTouched = () => {};
+  @ContentChildren(NbRadioComponent, { descendants: true }) radios: QueryList<NbRadioComponent>;
+
+  @Output() valueChange: EventEmitter<any> = new EventEmitter();
 
   constructor(
     protected cd: ChangeDetectorRef,
@@ -119,11 +147,11 @@ export class NbRadioGroupComponent implements AfterContentInit, OnDestroy, Contr
   ) {}
 
   ngAfterContentInit() {
-    this.updateNames();
-    this.updateValues();
-    this.updateDisabled();
-    this.subscribeOnRadiosValueChange();
-    this.subscribeOnRadiosBlur();
+    this.updateAndSubscribeToRadios();
+
+    this.radios.changes
+      .pipe(takeWhile(() => this.alive))
+      .subscribe(() => this.updateAndSubscribeToRadios());
   }
 
   ngOnDestroy() {
@@ -146,6 +174,15 @@ export class NbRadioGroupComponent implements AfterContentInit, OnDestroy, Contr
     }
   }
 
+  protected updateAndSubscribeToRadios() {
+    this.updateNames();
+    this.updateValues();
+    this.updateDisabled();
+    this.updateStatus();
+    this.subscribeOnRadiosValueChange();
+    this.subscribeOnRadiosBlur();
+  }
+
   protected updateNames() {
     if (this.radios) {
       this.radios.forEach((radio: NbRadioComponent) => radio.name = this.name);
@@ -162,14 +199,17 @@ export class NbRadioGroupComponent implements AfterContentInit, OnDestroy, Contr
 
   protected updateDisabled() {
     if (this.radios && typeof this.disabled !== 'undefined') {
-      this.radios.forEach((radio: NbRadioComponent) => radio.setDisabled = this.disabled);
+      this.radios.forEach((radio: NbRadioComponent) => radio.disabled = this.disabled);
       this.markRadiosForCheck();
     }
   }
 
   protected subscribeOnRadiosValueChange() {
     merge(...this.radios.map((radio: NbRadioComponent) => radio.valueChange))
-      .pipe(takeWhile(() => this.alive))
+      .pipe(
+        takeWhile(() => this.alive),
+        takeUntil(this.radios.changes),
+      )
       .subscribe((value: any) => {
         this.writeValue(value);
         this.propagateValue(value);
@@ -186,21 +226,37 @@ export class NbRadioGroupComponent implements AfterContentInit, OnDestroy, Contr
   }
 
   protected subscribeOnRadiosBlur() {
-    if (!isPlatformBrowser(this.platformId)) {
+    if (!isPlatformBrowser(this.platformId) || this.isTouched) {
       return;
     }
 
     const hostElement = this.hostElement.nativeElement;
     fromEvent<Event>(hostElement, 'focusin')
       .pipe(
+        takeWhile(() => this.alive),
         filter(event => hostElement.contains(event.target as Node)),
         switchMap(() => merge(
           fromEvent<Event>(this.document, 'focusin'),
           fromEvent<Event>(this.document, 'click'),
         )),
         filter(event => !hostElement.contains(event.target as Node)),
         take(1),
+        takeUntil(this.radios.changes),
       )
-      .subscribe(() => this.onTouched());
+      .subscribe(() => this.markTouched());
+  }
+
+  protected markTouched() {
+    this.isTouched = true;
+    this.onTouched();
+  }
+
+  protected updateStatus() {
+    if (this.radios) {
+      this.radios.forEach((radio: NbRadioComponent) => {
+        radio.status = this.status;
+        radio.markForCheck();
+      });
+    }
   }
 }