From 2ef3166649c2a7588d2e9804aaa8f5c7dbe86b4e Mon Sep 17 00:00:00 2001
From: magahernandez <mghm291097@gmail.com>
Date: Thu, 1 Oct 2020 18:06:59 -0400
Subject: [PATCH] Add carousel component

---
 src/app/app.component.ts                      |  1 +
 .../00-main/items.ts                          |  1 +
 .../alerts/items.component.html               |  3 +++
 .../carousel/carousel.component.css           |  0
 .../carousel/carousel.component.html          | 26 +++++++++++++++++++
 .../carousel/carousel.component.ts            | 15 +++++++++++
 ...mple-bootstrap-prototype-routing.module.ts |  2 ++
 .../example-bootstrap-prototype.module.ts     |  2 ++
 .../search-bar/search-bar.component.html      |  2 +-
 .../01-prototype/exercice.component.html      |  4 +++
 10 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 src/app/modules/application/example-bootstrap-prototype/carousel/carousel.component.css
 create mode 100644 src/app/modules/application/example-bootstrap-prototype/carousel/carousel.component.html
 create mode 100644 src/app/modules/application/example-bootstrap-prototype/carousel/carousel.component.ts

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 5d5cabc3..a270d6d0 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -67,6 +67,7 @@ export class AppComponent {
         { name: 'blockquotes', link: 'bootstrap-prototype/blockquotes' },
         { name: 'breadcrumb', link: 'bootstrap-prototype/breadcrumb' },
         { name: 'buttons', link: 'bootstrap-prototype/buttons' },
+        { name: 'carousel', link: 'bootstrap-prototype/carousel'},
         { name: 'collapse', link: 'bootstrap-prototype/collapse' },
         { name: 'dropdowns', link: 'bootstrap-prototype/dropdowns' },
         { name: 'forms', link: 'bootstrap-prototype/forms' },
diff --git a/src/app/modules/application/example-bootstrap-prototype/00-main/items.ts b/src/app/modules/application/example-bootstrap-prototype/00-main/items.ts
index 2fd7abfb..13b31df0 100644
--- a/src/app/modules/application/example-bootstrap-prototype/00-main/items.ts
+++ b/src/app/modules/application/example-bootstrap-prototype/00-main/items.ts
@@ -16,4 +16,5 @@ export const ITEMS: any[] =
     { id: 14, name: 'Spinners', link: 'spinners' },
     { id: 15, name: 'Toasts', link: 'toasts' },
     { id: 16, name: 'Tooltips', link: 'tooltips' },
+    { id: 17, name: 'Carousel', link: 'carousel' },
   ];
diff --git a/src/app/modules/application/example-bootstrap-prototype/alerts/items.component.html b/src/app/modules/application/example-bootstrap-prototype/alerts/items.component.html
index 1776c487..72088174 100644
--- a/src/app/modules/application/example-bootstrap-prototype/alerts/items.component.html
+++ b/src/app/modules/application/example-bootstrap-prototype/alerts/items.component.html
@@ -10,6 +10,9 @@ <h2 class="card-title text-primary">Alerts</h2>
     <div class="alert alert-info" role="alert">
       A simple info alert—check it out!
     </div>
+    <div class="alert alert-danger" role="alert">
+      A simple danger alert—check it out!
+    </div>
     <hr>
     <div class="alert alert-primary" role="alert">
       A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
diff --git a/src/app/modules/application/example-bootstrap-prototype/carousel/carousel.component.css b/src/app/modules/application/example-bootstrap-prototype/carousel/carousel.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/modules/application/example-bootstrap-prototype/carousel/carousel.component.html b/src/app/modules/application/example-bootstrap-prototype/carousel/carousel.component.html
new file mode 100644
index 00000000..b6318462
--- /dev/null
+++ b/src/app/modules/application/example-bootstrap-prototype/carousel/carousel.component.html
@@ -0,0 +1,26 @@
+<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
+    <ol class="carousel-indicators">
+      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
+      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
+      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+    </ol>
+    <div class="carousel-inner">
+      <div class="carousel-item active">
+        <img class="d-block w-100" src="https://media.giphy.com/media/RfqiR12yhtHpwaItBq/giphy.gif" alt="First slide">
+      </div>
+      <div class="carousel-item">
+        <img class="d-block w-100" src="https://media.giphy.com/media/RfqiR12yhtHpwaItBq/giphy.gif" alt="Second slide">
+      </div>
+      <div class="carousel-item">
+        <img class="d-block w-100" src="https://media.giphy.com/media/RfqiR12yhtHpwaItBq/giphy.gif" alt="Third slide">
+      </div>
+    </div>
+    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+      <span class="sr-only">Previous</span>
+    </a>
+    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+      <span class="sr-only">Next</span>
+    </a>
+  </div>
\ No newline at end of file
diff --git a/src/app/modules/application/example-bootstrap-prototype/carousel/carousel.component.ts b/src/app/modules/application/example-bootstrap-prototype/carousel/carousel.component.ts
new file mode 100644
index 00000000..82db8a05
--- /dev/null
+++ b/src/app/modules/application/example-bootstrap-prototype/carousel/carousel.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-carousel',
+  templateUrl: './carousel.component.html',
+  styleUrls: ['./carousel.component.css']
+})
+export class CarouselComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/modules/application/example-bootstrap-prototype/example-bootstrap-prototype-routing.module.ts b/src/app/modules/application/example-bootstrap-prototype/example-bootstrap-prototype-routing.module.ts
index 9b8c2149..ccaa7792 100644
--- a/src/app/modules/application/example-bootstrap-prototype/example-bootstrap-prototype-routing.module.ts
+++ b/src/app/modules/application/example-bootstrap-prototype/example-bootstrap-prototype-routing.module.ts
@@ -7,6 +7,7 @@ import { AlertsComponent } from './alerts/items.component';
 import { BadgeComponent } from './badge/items.component';
 import { BlockquotesComponent } from './blockquotes/items.component';
 import { BreadcrumbComponent } from './breadcrumb/items.component';
+import { CarouselComponent } from './carousel/carousel.component';
 import { ButtonsComponent } from './buttons/items.component';
 import { TooltipsComponent } from './tooltips/items.component';
 import { CollapseComponent } from './collapse/items.component';
@@ -32,6 +33,7 @@ const routes: Routes = [
       { path: 'badge', component: BadgeComponent },
       { path: 'blockquotes', component: BlockquotesComponent },
       { path: 'breadcrumb', component: BreadcrumbComponent },
+      { path: 'carousel', component: CarouselComponent },
       { path: 'buttons', component: ButtonsComponent },
       { path: 'tooltips', component: TooltipsComponent },
       { path: 'collapse', component: CollapseComponent },
diff --git a/src/app/modules/application/example-bootstrap-prototype/example-bootstrap-prototype.module.ts b/src/app/modules/application/example-bootstrap-prototype/example-bootstrap-prototype.module.ts
index 3b1141d3..aaeffff8 100644
--- a/src/app/modules/application/example-bootstrap-prototype/example-bootstrap-prototype.module.ts
+++ b/src/app/modules/application/example-bootstrap-prototype/example-bootstrap-prototype.module.ts
@@ -3,10 +3,12 @@ import { CommonModule } from '@angular/common';
 
 import { ExampleBootstrapPrototypeRoutingModule } from './example-bootstrap-prototype-routing.module';
 import { ExampleBootstrapPrototypeComponent } from './example-bootstrap-prototype.component';
+import { CarouselComponent } from './carousel/carousel.component';
 
 @NgModule({
   declarations: [
     ExampleBootstrapPrototypeComponent,
+    CarouselComponent,
   ],
   exports: [
     ExampleBootstrapPrototypeComponent,
diff --git a/src/app/modules/application/example-crud/components/search-bar/search-bar.component.html b/src/app/modules/application/example-crud/components/search-bar/search-bar.component.html
index 604eda5a..ee0375de 100644
--- a/src/app/modules/application/example-crud/components/search-bar/search-bar.component.html
+++ b/src/app/modules/application/example-crud/components/search-bar/search-bar.component.html
@@ -5,7 +5,7 @@
         <form class="form-inline">
           <input #edit aria-label="Searchfield" type="text" name="searchField" [ngModel]="searchField"
             class="form-control form-control-sm mb-2 mr-2" id="searchField" placeholder="{{placeholder}}"
-            style="max-width: 160px;">
+            style="max-width: 160px;" (keypress)="searching()">
           <button aria-label="Search" (click)="searching()" type="submit" class="btn btn-outline-primary btn-sm mb-2"><i
               class="fas fa-search"></i></button>
         </form>
diff --git a/src/app/modules/application/example-reactive-form/01-prototype/exercice.component.html b/src/app/modules/application/example-reactive-form/01-prototype/exercice.component.html
index 00338227..35551883 100644
--- a/src/app/modules/application/example-reactive-form/01-prototype/exercice.component.html
+++ b/src/app/modules/application/example-reactive-form/01-prototype/exercice.component.html
@@ -6,6 +6,10 @@
           <label for="name">Name</label>
           <input type="text" class="form-control" id="name" value="Avengers: Endgame">
         </div>
+        <div class="form-group col-md-9">
+          <label for="name">Subname</label>
+          <input type="text" class="form-control" id="name" value="Subname">
+        </div>
         <div class="form-group col-md-3">
           <label for="releaseDate">Release Date</label>
           <input type="text" class="form-control" id="releaseDate" value="April 24, 2019">