docs: fix demos

src/app/components/carousel-demo/carousel-example-01/carousel-example-01.component.html

@@ -1,5 +1,5 @@
-<ly-carousel #_carousel>
-  <ly-carousel-item *ngFor="let item of items" [srcImg]="item.img">
+<ly-carousel [withClass]="classes.carousel">
+  <ly-carousel-item [withClass]="classes.carouselItem" *ngFor="let item of items" [srcImg]="item.img">
     <h1>{{item.title}}</h1>
   </ly-carousel-item>
 </ly-carousel>

src/app/components/carousel-demo/carousel-example-01/carousel-example-01.component.ts

@@ -1,13 +1,25 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { LyTheme2 } from '@alyle/ui';
+
+const styles = {
+  carousel: {
+    maxWidth: '360px',
+    height: '220px',
+    margin: 'auto'
+  },
+  carouselItem: {
+    textAlign: 'center'
+  }
+};
 
 @Component({
   selector: 'carousel-example-01',
   templateUrl: './carousel-example-01.component.html',
-  styleUrls: ['./carousel-example-01.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   preserveWhitespaces: false
 })
-export class CarouselExample01Component implements OnInit {
+export class CarouselExample01Component {
+  classes = this.theme.addStyleSheet(styles, 'carousel-example-01');
   items: any[] = [
     {
       title: 'Mountains',
@@ -24,10 +36,9 @@ export class CarouselExample01Component implements OnInit {
     }
   ];
 
-  constructor() { }
-
-  ngOnInit() {
+  constructor(
+    private theme: LyTheme2
+  ) {
 
   }
-
 }

src/app/components/icon-button-demo/icon-button-example-01/icon-button-example-01.component.ts

@@ -1,14 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'icon-button-example-01',
   templateUrl: './icon-button-example-01.component.html',
-  styleUrls: ['./icon-button-example-01.component.css']
 })
-export class IconButtonExample01Component implements OnInit {
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}
+export class IconButtonExample01Component { }

src/app/components/menu-demo/menu-demo-01/menu-demo-01.component.ts

@@ -1,15 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'menu-demo-01',
-  templateUrl: './menu-demo-01.component.html',
-  styleUrls: ['./menu-demo-01.component.scss']
+  templateUrl: './menu-demo-01.component.html'
 })
-export class MenuDemo01Component implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}
+export class MenuDemo01Component { }

src/app/components/multiple-themes/multiple-themes-demo-01/multiple-themes-demo-01.component.ts

@@ -3,7 +3,6 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
 @Component({
   selector: 'multiple-themes-demo-01',
   templateUrl: './multiple-themes-demo-01.component.html',
-  styleUrls: ['./multiple-themes-demo-01.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MultipleThemesDemo01Component { }

src/app/components/multiple-themes/multiple-themes-demo-01/multiple-themes-demo-01.module.ts

@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
 import { MultipleThemesDemo01Component } from './multiple-themes-demo-01.component';
 import { LyCommonModule } from '@alyle/ui';
 import { LyButtonModule } from '@alyle/ui/button';
-import { RouterModule } from '@angular/router';
 import { ThemeMinimaModule } from '@alyle/ui/themes/minima';
 import { LyCardModule } from '@alyle/ui/card';
 
@@ -12,7 +11,6 @@ import { LyCardModule } from '@alyle/ui/card';
     CommonModule,
     LyCommonModule,
     ThemeMinimaModule, // <-- import theme module
-    RouterModule,
     LyCommonModule,
     LyCardModule,
     LyButtonModule

src/app/components/radio-demo/radio-example-01/radio-example-01.component.ts

@@ -3,7 +3,6 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
 @Component({
   selector: 'radio-example-01',
   templateUrl: './radio-example-01.component.html',
-  styleUrls: ['./radio-example-01.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   preserveWhitespaces: false
 })

src/app/components/resizing-cropping-images-demo/resizing-cropping-images-example-01/resizing-cropping-images-example-01.component.html

@@ -1,4 +1,4 @@
-<div class="actions">
+<div [withClass]="classes.actions">
   <button raised ly-button bg="primary" (click)="_fileInput.click()">
     <ly-icon>image</ly-icon>
     <span>Select File</span>
@@ -7,19 +7,19 @@
   <input #_fileInput type="file" (change)="cropping.selectInputEvent($event)" accept="image/*" hidden>
   <button raised ly-button bg="accent" *ngIf="cropping.isCropped">Upload</button>
 </div>
-<div class="resize-image">
+<div>
   <button (click)="cropping.zoomIn()" ly-icon-button class="material-icons">zoom_in</button>
   <button (click)="cropping.zoomOut()" ly-icon-button class="material-icons">zoom_out</button>
   <button (click)="cropping.center()" ly-button>center</button>
   <button (click)="cropping.fit()" ly-button>fit</button>
   <button (click)="cropping.fitToScreen()" ly-button>fit to screen</button>
-  <ly-cropping #cropping
+  <ly-cropping [withClass]="classes.cropping" #cropping
   [config]="myConfig"
-  (cropped)="oncropped($event)"
+  (cropped)="onCropped($event)"
   (loaded)="onloaded()"
   (error)="onerror()">
     <span>Drag and drop image</span>
   </ly-cropping>
-  <button *ngIf="cropping.isLoaded" color="accent" (click)="crop()" ly-button>crop</button>
+  <button *ngIf="cropping.isLoaded" color="accent" (click)="cropping.crop()" ly-button>crop</button>
 </div>
 <img *ngIf="cropping.isCropped" [src]="cropping.result">

src/app/components/resizing-cropping-images-demo/resizing-cropping-images-example-01/resizing-cropping-images-example-01.component.ts

@@ -1,31 +1,40 @@
-import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 
-import { LyResizingCroppingImages, LyResizingCroppingImagesConfig, CroppedImage } from '@alyle/ui/resizing-cropping-images';
+import { LyResizingCroppingImagesConfig } from '@alyle/ui/resizing-cropping-images';
+import { LyTheme2 } from '@alyle/ui';
+
+const styles = {
+  actions: {
+    display: 'flex',
+    justifyContent: 'space-between'
+  },
+  cropping: {
+    maxWidth: '400px',
+    height: '300px'
+  }
+};
 
 @Component({
   selector: 'resizing-cropping-images-example-01',
   templateUrl: './resizing-cropping-images-example-01.component.html',
-  styleUrls: ['./resizing-cropping-images-example-01.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   preserveWhitespaces: false
 })
 export class ResizingCroppingImagesExample01Component {
-  @ViewChild(LyResizingCroppingImages) img: LyResizingCroppingImages;
+  classes = this.theme.addStyleSheet(styles, 'resizing-cropping-images-example-01');
   result: string;
   myConfig: LyResizingCroppingImagesConfig = {
     width: 150, // Default `250`
     height: 150, // Default `200`
-    fill: '#ff2997'
+    fill: '#ff2997' // Default transparent if type = png else #000
   };
 
-  constructor() { }
-
-  crop() {
-    const imgCropped: CroppedImage = this.img.crop();
-  }
+  constructor(
+    private theme: LyTheme2
+  ) { }
 
-  oncropped(e) {
-    console.log('cropped', e);
+  onCropped(e) {
+    console.log('cropped img: ', e);
   }
   onloaded() {
     console.log('img loaded');

src/app/components/resizing-cropping-images-demo/resizing-cropping-images-example-02/resizing-cropping-images-example-02.component.html

@@ -1,4 +1,4 @@
-<div class="actions">
+<div [withClass]="classes.actions">
   <button raised ly-button bg="primary" (click)="_fileInput.click()">
     <ly-icon start>image</ly-icon>
     <span end>Select File</span>
@@ -7,18 +7,17 @@
   <input #_fileInput type="file" (change)="cropping.selectInputEvent($event)" accept="image/*" hidden>
   <button raised ly-button bg="accent" *ngIf="cropping.isCropped">Upload</button>
 </div>
-<div class="resize-image">
+<div>
   <button (click)="cropping.zoomIn()" ly-icon-button class="material-icons">zoom_in</button>
   <button (click)="cropping.zoomOut()" ly-icon-button class="material-icons">zoom_out</button>
   <button (click)="cropping.center()" ly-button>center</button>
   <button (click)="cropping.fit()" ly-button>fit</button>
   <button (click)="cropping.fitToScreen()" ly-button>fit to screen</button>
-  <ly-cropping #cropping
+  <ly-cropping [withClass]="classes.cropping" #cropping
+  (cropped)="onCropped($event)"
   [config]="myConfig">
     <span>Drag and drop image</span>
   </ly-cropping>
-  <!-- <ly-cropping #cropping format="png" src="https://dummyimage.com/500x350/000/00ffd5.png"></ly-cropping> -->
-  <!-- <ly-cropping [config]="myConfig" #cropping src="assets/img/Mountains-Blue.jpg"></ly-cropping> -->
-  <button *ngIf="cropping.isLoaded" color="accent" (click)="crop()" ly-button>crop</button>
+  <button *ngIf="cropping.isLoaded" color="accent" (click)="cropping.crop()" ly-button>crop</button>
 </div>
 <img *ngIf="cropping.isCropped" [src]="cropping.result">

src/app/components/resizing-cropping-images-demo/resizing-cropping-images-example-02/resizing-cropping-images-example-02.component.ts

@@ -1,35 +1,38 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ViewChild
-  } from '@angular/core';
-import {
-  CroppedImage,
-  ImageResolution,
-  LyResizingCroppingImages,
-  LyResizingCroppingImagesConfig
-  } from '@alyle/ui/resizing-cropping-images';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ImageResolution, LyResizingCroppingImagesConfig } from '@alyle/ui/resizing-cropping-images';
+import { LyTheme2 } from '@alyle/ui';
+
+const styles = {
+  actions: {
+    display: 'flex',
+    justifyContent: 'space-between'
+  },
+  cropping: {
+    maxWidth: '400px',
+    height: '300px'
+  }
+};
 
 @Component({
   selector: 'resizing-cropping-images-example-02',
   templateUrl: './resizing-cropping-images-example-02.component.html',
-  styleUrls: ['./resizing-cropping-images-example-02.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ResizingCroppingImagesExample02Component {
-
-  @ViewChild(LyResizingCroppingImages) img: LyResizingCroppingImages;
+  classes = this.theme.addStyleSheet(styles, 'resizing-cropping-images-example-01');
   result: string;
   myConfig: LyResizingCroppingImagesConfig = {
     width: 150, // Default `250`
     height: 150, // Default `200`,
     output: ImageResolution.OriginalImage // Default ImageResolution.Default
   };
 
-  constructor() { }
+  constructor(
+    private theme: LyTheme2
+  ) { }
 
-  crop() {
-    const imgCropped: CroppedImage = this.img.crop();
+  onCropped(e) {
+    console.log('cropped img: ', e);
   }
 
 }

src/app/components/resizing-cropping-images-demo/resizing-cropping-images-example-03/resizing-cropping-images-example-03.component.html

@@ -1,4 +1,4 @@
-<div class="actions">
+<div [withClass]="classes.actions">
   <button raised ly-button bg="primary" (click)="_fileInput.click()">
     <ly-icon start>image</ly-icon>
     <span end>Select File</span>
@@ -15,10 +15,11 @@
     <button (click)="cropping.fitToScreen()" ly-button>fit to screen</button>
     <button (click)="cropping['1:1']()" ly-button>1:1</button>
     <ly-cropping #cropping
+    [withClass]="classes.cropping"
     [config]="myConfig">
       <span>Drag and drop image</span>
     </ly-cropping>
-    <button *ngIf="cropping.isLoaded" color="accent" (click)="crop()" ly-button>crop</button>
+    <button *ngIf="cropping.isLoaded" color="accent" (click)="cropping.crop()" ly-button>crop</button>
   </div>
   <img *ngIf="cropping.isCropped" [src]="cropping.result">
 

src/app/components/resizing-cropping-images-demo/resizing-cropping-images-example-03/resizing-cropping-images-example-03.component.ts

@@ -1,14 +1,25 @@
-import { Component, ChangeDetectionStrategy, ViewChild } from '@angular/core';
-import { LyResizingCroppingImages, LyResizingCroppingImagesConfig, CroppedImage } from '@alyle/ui/resizing-cropping-images';
+import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
+import { LyResizingCroppingImages, LyResizingCroppingImagesConfig } from '@alyle/ui/resizing-cropping-images';
+import { LyTheme2 } from '@alyle/ui';
+
+const styles = {
+  actions: {
+    display: 'flex',
+    justifyContent: 'space-between'
+  },
+  cropping: {
+    maxWidth: '400px',
+    height: '300px'
+  }
+};
 
 @Component({
   selector: 'resizing-cropping-images-example-03',
   templateUrl: './resizing-cropping-images-example-03.component.html',
-  styleUrls: ['./resizing-cropping-images-example-03.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ResizingCroppingImagesExample03Component {
-
+  classes = this.theme.addStyleSheet(styles, 'resizing-cropping-images-example-03');
   @ViewChild(LyResizingCroppingImages) img: LyResizingCroppingImages;
   result: string;
   myConfig: LyResizingCroppingImagesConfig = {
@@ -20,10 +31,7 @@ export class ResizingCroppingImagesExample03Component {
     }
   };
 
-  constructor() { }
-
-  crop() {
-    const imgCropped: CroppedImage = this.img.crop();
-  }
-
+  constructor(
+    private theme: LyTheme2
+  ) { }
 }