feat(theme): add new Chat UI components set

docs/app/app.module.ts

@@ -8,6 +8,7 @@ import { InjectionToken, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {
   NbThemeModule,
   NbSidebarModule,
@@ -29,6 +30,7 @@ const docs = require('../output.json');
 @NgModule({
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     FormsModule,
     HttpClientModule,
     NbSidebarModule,

docs/structure.ts

@@ -214,6 +214,16 @@ export const structure = [
           'NbRouteTabsetComponent',
         ],
       },
+      {
+        type: 'tabs',
+        name: 'Chat UI',
+        icon: 'chat-ui.svg',
+        source: [
+          'NbChatComponent',
+          'NbChatMessageComponent',
+          'NbChatFormComponent',
+        ],
+      },
       {
         type: 'tabs',
         name: 'Actions',

e2e/chat.e2e-spec.ts

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { browser, element, by } from 'protractor';
+import { colors, chatSizes as sizes } from './component-shared';
+import { waitFor } from './e2e-helper';
+
+let chats: any[] = [];
+
+function prepareChats() {
+  const result: any[] = [];
+
+  let elementNumber: number = 1;
+  for (const { colorKey, color } of colors) {
+    for (const { sizeKey, height } of sizes) {
+      result.push({
+        size: sizeKey,
+        height: height,
+        colorKey,
+        color,
+        elementNumber,
+      });
+      elementNumber++;
+    }
+  }
+
+  return result;
+}
+
+describe('nb-chat', () => {
+
+  chats = prepareChats();
+
+  beforeEach((done) => {
+    browser.get('#/chat/chat-test.component').then(() => done());
+  });
+
+  chats.forEach(c => {
+
+    it(`should display ${c.colorKey} chat with ${c.size} size`, () => {
+      waitFor(`nb-chat:nth-child(${c.elementNumber})`);
+
+      element(by.css(`nb-chat:nth-child(${c.elementNumber})`)).getCssValue('height').then(height => {
+        expect(height).toEqual(c.height);
+      });
+
+      element(by.css(`nb-chat:nth-child(${c.elementNumber}) .header`))
+        .getCssValue('background-color').then(bgColor => {
+          expect(bgColor).toEqual(c.color);
+        });
+    });
+  });
+
+  it('should add on message', () => {
+    const all: any = element.all(by.css('nb-chat:nth-child(1) nb-chat-message'));
+    all.count().then(allCount => {
+      element(by.css('nb-chat:nth-child(1) nb-chat-form  input')).sendKeys('akveo');
+      element(by.css('nb-chat:nth-child(1) nb-chat-form .btn')).click();
+      expect(all.count()).toEqual(allCount + 1);
+    });
+  });
+
+  it('should not add on an empty message', () => {
+    const all: any = element.all(by.css('nb-chat:nth-child(1) nb-chat-message'));
+    all.count().then(allCount => {
+      element(by.css('nb-chat:nth-child(1) nb-chat-form .btn')).click();
+      expect(all.count()).toEqual(allCount);
+
+      element(by.css('nb-chat:nth-child(1) nb-chat-form  input')).sendKeys('  ');
+      element(by.css('nb-chat:nth-child(1) nb-chat-form .btn')).click();
+      expect(all.count()).toEqual(allCount);
+    });
+  });
+});

e2e/component-shared.ts

@@ -29,3 +29,5 @@ export const colors = [
   { colorKey: 'default', color: hexToRgbA('#a4abb3') },
   { colorKey: 'disabled', color: 'rgba(255, 255, 255, 0.4)' },
 ];
+
+export const chatSizes = cardSizes;

src/app/app.module.ts

@@ -9,15 +9,19 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { HttpClientModule } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NbThemeModule } from '@nebular/theme';
 
 import { NbAppComponent } from './app.component';
 import { NbLayoutDirectionToggleComponent } from './layout-direction-toggle/layout-direction-toggle.component';
 import { NbDynamicToAddComponent } from '../playground/shared/dynamic.component';
 import { NbPlaygroundSharedModule } from '../playground/shared/shared.module';
+
+
 @NgModule({
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     FormsModule,
     HttpClientModule,
     RouterModule.forRoot([