refactor(chat-custom-message): updated docs, default styles provided,…

… code refactor

docs/structure.ts

@@ -693,6 +693,7 @@ export const structure = [
           'NbChatComponent',
           'NbChatMessageComponent',
           'NbChatFormComponent',
+          'NbChatCustomMessageDirective',
         ],
       },
       {

src/framework/theme/components/chat/_chat.component.theme.scss

@@ -105,6 +105,7 @@
         font-size: 0.875rem;
         color: nb-theme(chat-message-sender-text-color);
         margin-bottom: 0.5rem;
+        margin-top: 0.5rem;
       }
 
       p {
@@ -189,6 +190,14 @@
       }
     }
 
+    .nb-custom-message {
+      padding: nb-theme(chat-padding);
+      color: nb-theme(chat-message-sender-text-color);
+      border-radius: 0.5rem;
+      display: inline-block;
+      margin-top: 0.3rem;
+    }
+
     &.not-reply {
       .message {
         @include nb-ltr(margin-left, 0.5rem);
@@ -212,6 +221,19 @@
       nb-chat-message-file {
         align-items: flex-start;
       }
+
+      .nb-custom-message {
+        background: nb-theme(chat-message-background);
+        color: nb-theme(chat-message-text-color);
+        border-top-left-radius: 0;
+        a {
+          color: nb-theme(chat-message-text-color);
+          &:hover, &:focus {
+            text-decoration: none;
+            color: nb-theme(chat-message-text-color);
+          }
+        }
+      }
     }
 
     &.reply {
@@ -248,7 +270,17 @@
       nb-chat-message-file {
         align-items: flex-end;
       }
+
+      .nb-custom-message {
+        background: nb-theme(chat-message-reply-background-color);
+        color: nb-theme(chat-message-reply-text-color);
+        border-top-right-radius: 0;
+        a:hover, a:focus {
+          text-decoration: none;
+        }
+      }
     }
+
   }
 
   nb-chat-form {

src/framework/theme/components/chat/chat-custom-message.directive.ts

@@ -1,4 +1,5 @@
 import { Directive, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { convertToBoolProperty } from '../helpers';
 import { NbCustomMessageService } from './custom-message.service';
 
 function throwCustomMessageTypeIsRequired(): void {
@@ -10,17 +11,24 @@ function throwCustomMessageTypeIsRequired(): void {
  * [nbCustomMessage]: should be applied to the ng-template
  * or use a structural directive syntax:
  *
+ * ```html
  * <div *nbCustomMessage="my-custom-type">
  *   <!-- custom message -->
  * </div>
+ * ```
  */
 @Directive({
   selector: `[nbCustomMessage]`,
 })
 export class NbChatCustomMessageDirective implements OnInit, OnDestroy {
 
   protected _type: string;
+  protected _useCustomStyling: boolean = false;
 
+  /**
+   * Custom user defined type
+   * @type {string}
+   */
   @Input()
   get nbCustomMessage(): string {
     return this._type;
@@ -29,20 +37,37 @@ export class NbChatCustomMessageDirective implements OnInit, OnDestroy {
     this._type = value;
   }
 
+  /**
+   * Flag that allow to disable default styling for custom message container and use user provided styles
+   *
+   * ```html
+   * <div *nbCustomMessage="'custom-name'; disableDefaultStyles: true" class="class-name">
+   * </div>
+   * ```html
+   * @type {boolean}
+   */
+  @Input()
+  set nbCustomMessageDisableDefaultStyles(val: boolean) {
+    this._useCustomStyling = convertToBoolProperty(val);
+  }
+  get nbCustomMessageDisableDefaultStyles(): boolean {
+    return this._useCustomStyling;
+  }
+
   get type(): string {
     return this._type
   }
 
-  constructor(protected templateRef: TemplateRef<any>, protected customMessageService: NbCustomMessageService) { }
+  constructor(public templateRef: TemplateRef<any>, protected customMessageService: NbCustomMessageService) { }
 
   ngOnInit() {
     if (!this._type) {
       throwCustomMessageTypeIsRequired();
     }
-    this.customMessageService.registerMessageTemplate(this.type, this.templateRef);
+    this.customMessageService.register(this.type, this);
   }
 
   ngOnDestroy() {
-    this.customMessageService.unregisterMessageTemplate(this.type);
+    this.customMessageService.unregister(this.type);
   }
 }

src/framework/theme/components/chat/chat-message.component.ts

@@ -11,6 +11,7 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
 import { convertToBoolProperty, NbBooleanInput } from '../helpers';
 import { NbChatMessageFile } from './chat-message-file.component';
 import { NbCustomMessageService } from './custom-message.service';
+import { NbChatCustomMessageDirective } from './chat-custom-message.directive';
 
 /**
  * Chat message component.
@@ -43,6 +44,48 @@ import { NbCustomMessageService } from './custom-message.service';
  * </nb-chat-message>
  * ```
  *
+ * Custom message.
+ *
+ * You can provide a template for you own message types via the ngCustomMessage directive.
+ * First, you need to provide a message template. To do this write a template of your message in the nb-chat element,
+ * before nb-chat-message. Mark it's root element with ngCustomMessage directive and define it's type as a value
+ * of `*ngCustomMessage="my-custom-type"`. Custom messages has simple predefined styles with `.nb-custom-message` class.
+ * If you want to use custom styling you have to use DisableDefaultStyles input:
+ * `*nbCustomMessage="'button'; disableDefaultStyles: true" class="your-custom-class"`
+ *
+ * ```html
+ *  <div *nbCustomMessage="'link'; let data">
+ *    <a [href]="data.href">{{ data.label }}</a>
+ *  </div>
+ *
+ *  <div *nbCustomMessage="'img'; disableDefaultStyles: true" class="image-container">
+ *   <picture>
+ *     <img src="https://i.gifer.com/no.gif" alt="picture">
+ *     </picture>
+ *   </div>
+ * ```
+ * // Important note
+ * Than, you need to set type property of the message which should be rendered via you custom template
+ * to the value you passed to the nbCustomMessage directive.
+ *
+ * Example of message object
+ * ```ts
+ *    {
+ *      reply: false,
+ *      type: 'link',
+ *       customMessageData: {
+ *         href: 'https://akveo.github.io/ngx-admin/',
+ *         label: 'Visit Akveo Nebular',
+ *       },
+ *       date: new Date(),
+ *       user: {
+ *         name: 'Frodo Baggins',
+ *         avatar: 'https://i.gifer.com/no.gif',
+ *       },
+ *     },
+ * ```
+ * @stacked-example(Custom message, chat/chat-custom-message.component)
+ *
  * @styles
  *
  * chat-message-background:
@@ -101,7 +144,9 @@ import { NbCustomMessageService } from './custom-message.service';
                               [dateFormat]="dateFormat"
                               [message]="message">
         </nb-chat-message-text>
-      <ng-container [ngTemplateOutlet]="_getTemplateByType(type)" [ngTemplateOutletContext]="_getTemplateContext()"></ng-container>
+      <div [class.nb-custom-message]="!isCustomStylingScheme(type)">
+        <ng-container [ngTemplateOutlet]="_getTemplateByType(type)" [ngTemplateOutletContext]="_getTemplateContext()"></ng-container>
+      </div>
     </ng-template>
   `,
   animations: [
@@ -121,6 +166,7 @@ import { NbCustomMessageService } from './custom-message.service';
 export class NbChatMessageComponent {
 
   protected readonly defaultMessageTypes: string[] = ['text', 'file', 'map', 'quote'];
+  protected customMessageInstance: NbChatCustomMessageDirective;
 
   avatarStyle: SafeStyle;
 
@@ -221,10 +267,8 @@ export class NbChatMessageComponent {
   getInitials(): string {
     if (this.sender) {
       const names = this.sender.split(' ');
-
       return names.map(n => n.charAt(0)).splice(0, 2).join('').toUpperCase();
     }
-
     return '';
   }
 
@@ -234,7 +278,7 @@ export class NbChatMessageComponent {
   }
 
   _getTemplateByType(type: string): TemplateRef<any> {
-    const template = this.customMessageService.getMessageTemplate(type);
+    const template = this.customMessageInstance.templateRef;
     if (!template) {
       throw new Error(`nb-chat: Can't find template for custom type '${type}'.
             Make sure you provide it in the chat component with *nbCustomMessage='${type}'.`);
@@ -246,4 +290,13 @@ export class NbChatMessageComponent {
     return { $implicit: this.customMessageData };
   }
 
+  isCustomStylingScheme(type): boolean {
+    this.extractCustomMessageInstance(type);
+    return this.customMessageInstance.nbCustomMessageDisableDefaultStyles;
+  }
+
+  protected extractCustomMessageInstance(type: string): void {
+    this.customMessageInstance = this.customMessageService.getInstance(type);
+  }
+
 }

src/framework/theme/components/chat/custom-message.service.ts

@@ -1,23 +1,23 @@
-import { Injectable, TemplateRef } from '@angular/core';
+import { Injectable } from '@angular/core';
+import { NbChatCustomMessageDirective } from './chat-custom-message.directive';
 
 /**
- * Service for self register custom templates
+ * Service for self register custom messages
  */
 @Injectable()
 export class NbCustomMessageService {
 
-  protected readonly customMessages = new Map<string, TemplateRef<any>>();
+  protected readonly customMessages = new Map<string, NbChatCustomMessageDirective>();
 
-  getMessageTemplate(type: string): TemplateRef<any> | undefined {
-    return this.customMessages.get(type);
-  }
-
-  registerMessageTemplate(type: string, template: TemplateRef<any>): void {
-    this.customMessages.set(type, template);
+  register(type: string, instance: NbChatCustomMessageDirective): void {
+    this.customMessages.set(type, instance);
   }
 
-  unregisterMessageTemplate(type: string): boolean {
+  unregister(type: string): boolean {
     return this.customMessages.delete(type);
   }
 
+  getInstance(type: string): NbChatCustomMessageDirective | undefined {
+    return this.customMessages.get(type);
+  }
 }

src/playground/with-layout/chat/chat-custom-message.component.html

@@ -1,19 +1,20 @@
 <nb-chat title="Nebular Conversational UI" size="large">
-  <div *nbCustomMessage="'link'; let data" class="link-wrapper">
-    <a class="custom-chat-link link-control" [href]="data.href">{{ data.label }}</a>
+
+  <div *nbCustomMessage="'link'; let data">
+    <a [href]="data.href">{{ data.label }}</a>
   </div>
 
-  <div *nbCustomMessage="'button'; let data" class="button-wrapper">
+  <div *nbCustomMessage="'button'; let data; disableDefaultStyles: true" class="button-wrapper">
     <button nbButton class="custom-button">{{ data }}</button>
   </div>
 
-  <div *nbCustomMessage="'img'" class="image-container">
+  <div *nbCustomMessage="'img'; disableDefaultStyles: true" class="image-container">
     <picture>
       <img src="https://i.gifer.com/no.gif" alt="picture">
     </picture>
   </div>
 
-  <div *nbCustomMessage="'table'; let data" class="table-container">
+  <div *nbCustomMessage="'table'; let data">
     <nb-custom-message-table [tableHeader]="data"></nb-custom-message-table>
   </div>
 

src/playground/with-layout/chat/chat-custom-message.component.scss

@@ -1,35 +1,24 @@
 nb-chat {
   width: 500px;
   margin: 0 auto;
+}
 
-  .link-wrapper {
-    padding: 1rem 1rem 1rem 0;
-
-    .custom-chat-link {
-      background: #3366ff;
-      color: #ffffff;
-      padding: 1rem;
-      border-radius: 0.5rem;
-      border-top-left-radius: 0;
-    }
-  }
-
-  .table-container {
-    padding-top: 1rem;
-  }
+img {
+  max-width: 100%;
+  max-height: 100%;
+}
 
-  .image-container {
-    flex: 1 1 auto;
+.table-container {
+  padding-top: 1rem;
+}
 
-    img {
-      max-width: 100%;
-      max-height: 100%;
-    }
-  }
+.image-container {
+  flex: 1 1 auto;
 }
 
 .button-wrapper {
   padding-top: 5px;
+  display: inline-block;
 }
 
 .custom-button {