From 8efd084cb5a7f07d0271f9783c36df800c7313c3 Mon Sep 17 00:00:00 2001
From: lkramarov <lkramarov@ptsecurity.com>
Date: Fri, 16 Aug 2019 15:41:05 +0300
Subject: [PATCH] changed dev-example for radio

---
 packages/mosaic-dev/radio/module.ts     |  6 ++-
 packages/mosaic-dev/radio/styles.scss   |  4 +-
 packages/mosaic-dev/radio/template.html | 59 ++++++++++++++-----------
 3 files changed, 39 insertions(+), 30 deletions(-)

diff --git a/packages/mosaic-dev/radio/module.ts b/packages/mosaic-dev/radio/module.ts
index ec08fcd12..6119b6365 100644
--- a/packages/mosaic-dev/radio/module.ts
+++ b/packages/mosaic-dev/radio/module.ts
@@ -3,7 +3,7 @@ import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { McRadioModule } from '../../mosaic/radio';
+import { McRadioChange, McRadioModule } from '../../mosaic/radio';
 import { ThemePickerModule } from '../theme-picker';
 
 
@@ -29,6 +29,10 @@ export class DemoComponent {
         {name: 'Yes', value: 'true', selected: false},
         {name: 'No', value: 'false', selected: true}
     ];
+
+    onChange($event: McRadioChange) {
+        console.log('McRadioChange: ', $event);
+    }
 }
 
 @NgModule({
diff --git a/packages/mosaic-dev/radio/styles.scss b/packages/mosaic-dev/radio/styles.scss
index 5232e6c54..86bbde564 100644
--- a/packages/mosaic-dev/radio/styles.scss
+++ b/packages/mosaic-dev/radio/styles.scss
@@ -2,8 +2,8 @@
 @import '../../mosaic/core/theming/prebuilt/dark-theme';
 @import '../../mosaic/core/visual/prebuilt/default-visual';
 
-body {
-    margin: 18px;
+.dev-container {
+    padding: 16px;
 }
 
 .example-radio-group {
diff --git a/packages/mosaic-dev/radio/template.html b/packages/mosaic-dev/radio/template.html
index 4dca83d5f..389deebcf 100644
--- a/packages/mosaic-dev/radio/template.html
+++ b/packages/mosaic-dev/radio/template.html
@@ -1,34 +1,39 @@
 
 <!--<theme-picker></theme-picker>-->
 
-<mc-radio-group class="example-radio-group" [(ngModel)]="favoriteFruit">
-    <mc-radio-button class="example-radio-button" *ngFor="let season of fruits" [value]="season">
-        {{season}}
-    </mc-radio-button>
-</mc-radio-group>
+<div class="dev-container">
+    <mc-radio-group
+        class="example-radio-group"
+        [(ngModel)]="favoriteFruit"
+        (change)="onChange($event)">
+        <mc-radio-button class="example-radio-button" *ngFor="let season of fruits" [value]="season">
+            {{season}}
+        </mc-radio-button>
+    </mc-radio-group>
 
-<div class="example-selected-value">Your favorite fruit is: {{favoriteFruit}}</div>
+    <div class="example-selected-value">Your favorite fruit is: {{favoriteFruit}}</div>
 
-<p class="mc-headline">Disabled buttons</p>
+    <p class="mc-headline">Disabled buttons</p>
 
-<mc-radio-group
-    class="example-radio-group"
-    name="my_options"
-    [disabled]="isDisabled">
-    <mc-radio-button class="example-radio-button" value="option_1">Option 1</mc-radio-button>
-    <mc-radio-button class="example-radio-button" value="option_2">Option 2</mc-radio-button>
-    <mc-radio-button class="example-radio-button" value="option_3">Option 3</mc-radio-button>
-</mc-radio-group>
+    <mc-radio-group
+        class="example-radio-group"
+        name="my_options"
+        [disabled]="isDisabled">
+        <mc-radio-button class="example-radio-button" value="option_1">Option 1</mc-radio-button>
+        <mc-radio-button class="example-radio-button" value="option_2">Option 2</mc-radio-button>
+        <mc-radio-button class="example-radio-button" value="option_3">Option 3</mc-radio-button>
+    </mc-radio-group>
 
-<p class="mc-headline">Disabled selected buttons</p>
-<mc-radio-group class="example-radio-group">
-    <mc-radio-button
-        class="example-radio-button"
-        *ngFor="let data of selectionList"
-        name="data.value"
-        [disabled]="true"
-        [checked]="data.selected"
-        [value]="data.value">
-        {{data.name}}
-    </mc-radio-button>
-</mc-radio-group>
+    <p class="mc-headline">Disabled selected buttons</p>
+    <mc-radio-group class="example-radio-group">
+        <mc-radio-button
+            class="example-radio-button"
+            *ngFor="let data of selectionList"
+            name="data.value"
+            [disabled]="true"
+            [checked]="data.selected"
+            [value]="data.value">
+            {{data.name}}
+        </mc-radio-button>
+    </mc-radio-group>
+</div>