Merge master - develop (#5)

* Feature/scrolling-modal (#2)

* Definición del modal-scrolling mediante template

* Se implementa modal-scrolling mediante componente

* Feature/modal-events (#3)

* Implementación de modal-event mediante template

* Se implementa modal-event mediante compoente modal

* Feature/modal-confrim (#4)

* Implementación de modal confirm mediante template

* Implementación de modal-comfirm mediante componente

src/app/app.component.html

@@ -3,5 +3,8 @@ <h1>NGX - Modals</h1>
 <div class="container mt-5">
     <!-- <app-modal-template></app-modal-template> -->
     <!-- <app-modal-component></app-modal-component> -->
-    <app-modal-nested></app-modal-nested>
+    <!-- <app-modal-nested></app-modal-nested> -->
+    <!-- <app-modal-scrolling></app-modal-scrolling> -->
+    <!-- <app-modal-events></app-modal-events> -->
+    <app-modal-confirm></app-modal-confirm>
 </div>

src/app/app.module.ts

@@ -5,6 +5,9 @@ import { AppComponent } from './app.component';
 import { ModalTemplateModule } from './components/modal-template/modal-template.module';
 import { ModalComponentModule } from './components/modal-component/modal-component.module';
 import { ModalNestedModule } from './components/modal-nested/modal-nested.module';
+import { ModalScrollingModule } from './components/modal-scrolling/modal-scrolling.module';
+import { ModalEventsModule } from './components/modal-events/modal-events.module';
+import { ModalConfirmModule } from './components/modal-confirm/modal-confirm.module';
 
 @NgModule({
   declarations: [
@@ -15,6 +18,9 @@ import { ModalNestedModule } from './components/modal-nested/modal-nested.module
     ModalTemplateModule,
     ModalComponentModule,
     ModalNestedModule,
+    ModalScrollingModule,
+    ModalEventsModule,
+    ModalConfirmModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/modal-confirm/components/modal-confirm-component/modal-confirm-component.component.html

@@ -0,0 +1,5 @@
+<div class="modal-body text-center">
+  <p>Do you want to confirm?</p>
+  <button type="button" class="btn btn-default" (click)="confirmed(true)" >Yes</button>
+  <button type="button" class="btn btn-primary" (click)="confirmed(false)" >No</button>
+</div>

src/app/components/modal-confirm/components/modal-confirm-component/modal-confirm-component.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalConfirmComponentComponent } from './modal-confirm-component.component';
+
+describe('ModalConfirmComponentComponent', () => {
+  let component: ModalConfirmComponentComponent;
+  let fixture: ComponentFixture<ModalConfirmComponentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ModalConfirmComponentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModalConfirmComponentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/modal-confirm/components/modal-confirm-component/modal-confirm-component.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+import { Subject } from 'rxjs';
+
+@Component({
+  templateUrl: './modal-confirm-component.component.html',
+  styleUrls: ['./modal-confirm-component.component.scss']
+})
+export class ModalConfirmComponentComponent {
+
+  onConfirmModal = new Subject<boolean>();
+
+  constructor(public bsModalRef: BsModalRef) {}
+
+  confirmed(value: boolean): void {
+    this.onConfirmModal.next(value);
+    this.bsModalRef.hide();
+  }
+
+}

src/app/components/modal-confirm/components/modal-confirm-component/modal-confirm-component.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { ModalConfirmComponentComponent } from './modal-confirm-component.component';
+import { ModalModule } from 'ngx-bootstrap/modal';
+
+@NgModule({
+  declarations: [
+    ModalConfirmComponentComponent
+  ],
+  imports: [
+    BrowserModule,
+    ModalModule.forRoot(),
+  ],
+  entryComponents: [
+    ModalConfirmComponentComponent,
+  ]
+})
+export class ModalConfirmComponentModule {}

src/app/components/modal-confirm/modal-confirm.component.html

@@ -0,0 +1,3 @@
+<button type="button" class="btn btn-primary" (click)="openModal()">Open modal</button>
+<br><br>
+<pre class="card card-block card-header">{{message}}</pre>

src/app/components/modal-confirm/modal-confirm.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalConfirmComponent } from './modal-confirm.component';
+
+describe('ModalConfirmComponent', () => {
+  let component: ModalConfirmComponent;
+  let fixture: ComponentFixture<ModalConfirmComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ModalConfirmComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModalConfirmComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/modal-confirm/modal-confirm.component.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { ModalConfirmComponentComponent } from './components/modal-confirm-component/modal-confirm-component.component';
+
+@Component({
+  selector: 'app-modal-confirm',
+  templateUrl: './modal-confirm.component.html',
+  styleUrls: ['./modal-confirm.component.scss']
+})
+export class ModalConfirmComponent {
+
+  modalRef: BsModalRef;
+  message: boolean;
+  constructor(private modalService: BsModalService) {}
+
+  openModal() {
+    this.modalRef = this.modalService.show(ModalConfirmComponentComponent, {
+      class: 'modal-sm',
+      keyboard: false,
+      ignoreBackdropClick: true,
+    });
+    this.modalRef.content.onConfirmModal.subscribe((response: boolean) => {
+      this.message = response;
+    });
+  }
+
+}

src/app/components/modal-confirm/modal-confirm.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { ModalConfirmComponent } from './modal-confirm.component';
+import { ModalModule } from 'ngx-bootstrap/modal';
+import { ModalConfirmComponentModule } from './components/modal-confirm-component/modal-confirm-component.module';
+
+@NgModule({
+  declarations: [
+    ModalConfirmComponent
+  ],
+  imports: [
+    BrowserModule,
+    ModalModule.forRoot(),
+    ModalConfirmComponentModule,
+  ],
+  exports: [
+    ModalConfirmComponent,
+  ]
+})
+export class ModalConfirmModule { }

src/app/components/modal-events/components/modal-event-component/modal-event-component.component.html

@@ -0,0 +1,9 @@
+<div class="modal-header">
+  <h4 class="modal-title pull-left">Modal</h4>
+  <button type="button" class="close pull-right" aria-label="Close" (click)="closeModal()">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div class="modal-body">
+  This is a modal
+</div>

src/app/components/modal-events/components/modal-event-component/modal-event-component.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalEventComponentComponent } from './modal-event-component.component';
+
+describe('ModalEventComponentComponent', () => {
+  let component: ModalEventComponentComponent;
+  let fixture: ComponentFixture<ModalEventComponentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ModalEventComponentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModalEventComponentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/modal-events/components/modal-event-component/modal-event-component.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+
+@Component({
+  templateUrl: './modal-event-component.component.html',
+  styleUrls: ['./modal-event-component.component.scss']
+})
+export class ModalEventComponentComponent {
+
+  constructor(public bsModalRef: BsModalRef) { }
+
+  closeModal() {
+    this.bsModalRef.hide();
+  }
+
+}

src/app/components/modal-events/components/modal-event-component/modal-event-component.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { ModalEventComponentComponent } from './modal-event-component.component';
+import { ModalModule } from 'ngx-bootstrap/modal';
+
+@NgModule({
+  declarations: [
+    ModalEventComponentComponent
+  ],
+  imports: [
+    BrowserModule,
+    ModalModule.forRoot(),
+  ],
+  entryComponents: [
+    ModalEventComponentComponent
+  ]
+})
+export class ModalEventComponentModule {}

src/app/components/modal-events/modal-events.component.html

@@ -0,0 +1,3 @@
+<button type="button" class="btn btn-primary" (click)="openModal()">Open modal</button>
+<br><br>
+<pre class="card card-block card-header" *ngFor="let message of messages">{{message}}</pre>

src/app/components/modal-events/modal-events.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalEventsComponent } from './modal-events.component';
+
+describe('ModalEventsComponent', () => {
+  let component: ModalEventsComponent;
+  let fixture: ComponentFixture<ModalEventsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ModalEventsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModalEventsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/modal-events/modal-events.component.ts

@@ -0,0 +1,70 @@
+import { Component, ChangeDetectorRef } from '@angular/core';
+import { Subscription, combineLatest } from 'rxjs';
+import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { ModalEventComponentComponent } from './components/modal-event-component/modal-event-component.component';
+
+@Component({
+  selector: 'app-modal-events',
+  templateUrl: './modal-events.component.html',
+  styleUrls: ['./modal-events.component.scss']
+})
+export class ModalEventsComponent {
+
+  modalRef: BsModalRef;
+  subscriptions: Subscription[] = [];
+  messages: string[] = [];
+
+  constructor(
+    private modalService: BsModalService,
+    private changeDetection: ChangeDetectorRef,
+  ) {}
+
+  openModal() {
+    this.messages = [];
+
+    this.subscriptions.push(
+      this.modalService.onShow.subscribe((reason: string) => {
+        this.messages.push(`onShow event has been fired`);
+      })
+    );
+
+    this.subscriptions.push(
+      this.modalService.onShown.subscribe((reason: string) => {
+        this.messages.push(`onShown event has been fired`);
+      })
+    );
+
+    this.subscriptions.push(
+      this.modalService.onHide.subscribe((reason: string) => {
+        const eventReason = reason ? `, dismissed by ${reason}` : '';
+        this.messages.push(`onHide event has been fired${eventReason}`);
+      })
+    );
+
+    this.subscriptions.push(
+      this.modalService.onHidden.subscribe((reason: string) => {
+        const eventReason = reason ? `, dismissed by ${reason}` : '';
+        this.messages.push(`onHidden event has been fired${eventReason}`);
+        this.unsubscribe();
+      })
+    );
+
+    const combineEvents = combineLatest(
+      this.modalService.onShow,
+      this.modalService.onShown,
+      this.modalService.onHide,
+      this.modalService.onHidden
+    ).subscribe(() => this.changeDetection.markForCheck());
+    this.subscriptions.push(combineEvents);
+
+    this.modalRef = this.modalService.show(ModalEventComponentComponent);
+  }
+
+  unsubscribe() {
+    this.subscriptions.forEach((subscription: Subscription) => {
+      subscription.unsubscribe();
+    });
+    this.subscriptions = [];
+  }
+
+}

src/app/components/modal-events/modal-events.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { ModalEventsComponent } from './modal-events.component';
+import { ModalModule } from 'ngx-bootstrap/modal';
+import { ModalEventComponentModule } from './components/modal-event-component/modal-event-component.module';
+
+@NgModule({
+  declarations: [
+    ModalEventsComponent,
+  ],
+  imports: [
+    BrowserModule,
+    ModalModule.forRoot(),
+    ModalEventComponentModule,
+  ],
+  exports: [
+    ModalEventsComponent,
+  ]
+})
+export class ModalEventsModule { }

src/app/components/modal-scrolling/components/modal-scrolling-component/modal-scrolling-component.component.html

@@ -0,0 +1,10 @@
+<div class="modal-header">
+<h4 class="modal-title pull-left">Modal</h4>
+<button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
+    <span aria-hidden="true">&times;</span>
+</button>
+</div>
+<div class="modal-body">
+<p *ngFor="let item of items">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque delectus enim esse excepturi, impedit,
+    iste magnam officia optio, quam quis quisquam saepe sint unde velit vitae! Animi in iusto ut?</p>
+</div>