v6.0.1 fix demo - migrate sharedstyles to external css to support prod build

Author: clouless

projects/cloukit/toggle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloukit/toggle",
-  "version": "6.0.1",
+  "version": "6.0.2",
   "peerDependencies": {
     "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
     "@angular/core": "^6.0.0-rc.0 || ^6.0.0",

src/app/demo/demo.component.ts

@@ -3,15 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'cloukit-demo',
   templateUrl: './demo.component.html',
-  styles: [ '.demo { padding:10px; font-family:sans-serif; }'],
+  styleUrls: [ './demo.styles.css' ]
 })
-export class DemoComponent {
-  public static sharedStyles = [
-    '.row { display: flex; align-items:center; }',
-    '.label { width:250px; margin-right:10px; }',
-    '.superButton--ml { margin-left:50px; }',
-    `.superButton { border:2px solid #710ECC; outline:0; background-color:#710ECC; color:#fff;
-      border-radius:0px; padding:4px 8px 4px 8px; color:#fff; cursor:pointer; font-size:1rem; }`,
-    '.superButton:hover, .superButtonSecondary:hover { border:2px solid #710ECC; background-color:#fff; color:#710ECC;  }',
-  ];
-}
+export class DemoComponent { }

src/app/demo/demo.styles.css

@@ -0,0 +1,30 @@
+.demo {
+  padding:10px;
+  font-family:sans-serif;
+}
+.row {
+  display: flex;
+  align-items:center;
+}
+.label {
+  width:250px;
+  margin-right:10px;
+}
+.superButton--ml {
+  margin-left:50px;
+}
+.superButton {
+  border:2px solid #710ECC;
+  outline:0;
+  background-color:#710ECC;
+  color:#fff;
+  border-radius:0px;
+  padding:4px 8px 4px 8px;
+  color:#fff;
+  cursor:pointer;
+  font-size:1rem;
+}
+.superButton:hover {
+  border:2px solid #710ECC;
+  background-color:#fff; color:#710ECC;
+}

src/app/demo/stories/story-00-basic.ts

@@ -1,11 +1,10 @@
 import { Component } from '@angular/core';
 import { FormGroup, FormControl } from '@angular/forms';
-import { DemoComponent } from '../demo.component';
 
 @Component({
   selector: 'cloukit-story-00-basic',
   templateUrl: './story-00-basic.html',
-  styles: [ ].concat(DemoComponent.sharedStyles),
+  styleUrls: [ '../demo.styles.css' ]
 })
 export class Story00Component {
 

src/app/demo/stories/story-01-themed.ts

@@ -1,6 +1,5 @@
 import { Component } from '@angular/core';
 import { FormGroup, FormControl } from '@angular/forms';
-import { DemoComponent } from '../demo.component';
 import { CloukitThemeService } from '@cloukit/theme';
 import { CloukitToggleComponentThemeDefault } from '../../../../projects/cloukit/toggle/src/public_api';
 
@@ -15,7 +14,7 @@ export class AwesomeToggleTheme extends CloukitToggleComponentThemeDefault {
 @Component({
   selector: 'cloukit-story-01-themed',
   templateUrl: './story-01-themed.html',
-  styles: [ ].concat(DemoComponent.sharedStyles),
+  styleUrls: [ '../demo.styles.css' ]
 })
 export class Story01Component {