docs(carousel): add demo with noPause function (valor-software#3708)

* docs(carousel): add demo with noPause function
add demo with toggle pause on hover button
close valor-software#3645

* docs(carousel): fix name and change binding

* docs(carousel): add modefied files after update

demo/src/app/components/+carousel/carousel-section.list.ts

@@ -2,6 +2,7 @@ import { DemoCarouseBasicComponent } from './demos/basic/basic';
 import { DemoCarouselCaptionsComponent } from './demos/captions/captions';
 import { DemoCarouselConfigComponent } from './demos/config/config';
 import { DemoCarouselDynamicComponent } from './demos/dynamic/dynamic';
+import { DemoCarouselNoPauseComponent } from './demos/no-pause/no-pause';
 import { DemoCarouselCustomContentComponent } from './demos/custom-content/custom-content';
 import { DemoCarouselIntervalComponent } from './demos/interval/interval';
 import { DemoCarouselDisableIndicatorComponent } from './demos/disable-indicator/disable-indicator';
@@ -13,10 +14,7 @@ import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo
 import { ExamplesComponent } from '../../docs/demo-section-components/demo-examples-section/index';
 import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section/index';
 
-import {
-  NgApiDocComponent,
-  NgApiDocConfigComponent
-} from '../../docs/api-docs';
+import { NgApiDocComponent, NgApiDocConfigComponent } from '../../docs/api-docs';
 
 export const demoComponentContent: ContentSection[] = [
   {
@@ -63,6 +61,14 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader?lang=markup!./demos/dynamic/dynamic.html'),
         outlet: DemoCarouselDynamicComponent
       },
+      {
+        title: 'Pause on hover',
+        anchor: 'pause-on-hover',
+        description: `<p>Click button to pause on hover.</p>`,
+        component: require('!!raw-loader?lang=typescript!./demos/no-pause/no-pause.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/no-pause/no-pause.html'),
+        outlet: DemoCarouselNoPauseComponent
+      },
       {
         title: 'Custom content',
         anchor: 'custom-content',

demo/src/app/components/+carousel/demos/index.ts

@@ -2,6 +2,7 @@ import { DemoCarouselDynamicComponent } from './dynamic/dynamic';
 import { DemoCarouseBasicComponent } from './basic/basic';
 import { DemoCarouselCaptionsComponent } from './captions/captions';
 import { DemoCarouselConfigComponent } from './config/config';
+import { DemoCarouselNoPauseComponent } from './no-pause/no-pause';
 import { DemoCarouselCustomContentComponent } from './custom-content/custom-content';
 import { DemoCarouselIntervalComponent } from './interval/interval';
 import { DemoCarouselDisableIndicatorComponent } from './disable-indicator/disable-indicator';
@@ -13,6 +14,8 @@ export const DEMO_COMPONENTS = [
   DemoCarouseBasicComponent,
   DemoCarouselCaptionsComponent,
   DemoCarouselConfigComponent,
+  DemoCarouselNoPauseComponent,
+  DemoCarouselConfigComponent,
   DemoCarouselCustomContentComponent,
   DemoCarouselIntervalComponent,
   DemoCarouselDisableIndicatorComponent,

demo/src/app/components/+carousel/demos/no-pause/no-pause.html

@@ -0,0 +1,29 @@
+<carousel [noPause]="noPause">
+  <slide>
+    <img src="assets/images/nature/4.jpg" alt="First slide" style="display: block; width: 100%;">
+    <div class="carousel-caption d-none d-md-block">
+      <h3>First slide label</h3>
+      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+    </div>
+  </slide>
+  <slide>
+    <img src="assets/images/nature/5.jpg" alt="Second slide" style="display: block; width: 100%;">
+    <div class="carousel-caption d-none d-md-block">
+      <h3>Second slide label</h3>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+  </slide>
+  <slide>
+    <img src="assets/images/nature/6.jpg" alt="Third slide" style="display: block; width: 100%;">
+    <div class="carousel-caption d-none d-md-block">
+      <h3>Third slide label</h3>
+      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
+    </div>
+  </slide>
+</carousel>
+<br/>
+<div>
+  <button type="button" class="btn btn-info"
+          (click)="noPause = !noPause">Toggle pause on hover
+  </button>
+</div>

demo/src/app/components/+carousel/demos/no-pause/no-pause.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-carousel-no-pause',
+  templateUrl: './no-pause.html'
+})
+export class DemoCarouselNoPauseComponent {
+  noPause = true;
+}