Add Emoji

emoji-picker.component.html

<div fxLayout="column">
  <div fxLayout="row">
    <div fxFlex fxLayout="column">
      <!-- GHOST ELEMENT -
      Similar to Chosen with hidden selects....
      We use this as a container becasue the changes don't bind well to a textarea it doesn't fire the correc caret event to track length.. !!!!-->
      <div style="display:none" class="emoji-content-editable textarea" (emojiPickerCaretEmitter)="handleCurrentCaret($event)"
        (input)="content = $event.target.textContent" [textContent]="content" contenteditable="true">
      </div>
      <md-input-container *ngIf="type === 'standard'" class="full-width" floatPlaceholder="never">
        <!-- TODO: Need input template as well. -->
        <textarea autosize mdInput [(ngModel)]="content" placeholder="Start typing your message" type="text"></textarea>
      </md-input-container>
      <md-input-container *ngIf="type === 'input'" class="full-width" floatPlaceholder="never">
        <!-- TODO: Need input template as well. -->
        <input autosize mdInput [(ngModel)]="content" placeholder="Start typing your message" type="text">
        <!-- <div mdSuffix mdMenuTrigger class="emoji-toggle-button " (click)="toggled = !toggled" [emojiPickerDirection]="direction"
          [(emojiPickerIf)]="toggled" (emojiPickerSelect)="handleSelection($event)" [mdMenuTriggerFor]="emojiPicker" #trigger=mdMenuTrigger> -->
          <md-icon style="cursor: pointer" mdSuffix mdMenuTrigger class="emoji-toggle-button " (click)="toggled = !toggled" [emojiPickerDirection]="direction" [(emojiPickerIf)]="toggled"
          (emojiPickerSelect)="handleSelection($event)" [mdMenuTriggerFor]="emojiPicker" #trigger=mdMenuTrigger>face</md-icon>
        <!-- </div> -->
      </md-input-container>
      <div *ngIf="type === 'carousel'" class="full-width">
        <!-- TODO: Need input template as well. -->
        <md-input-container class="full-width title-area" floatPlaceholder="never">
          <!-- TODO: Need input template as well. -->
          <textarea autosize mdInput [(ngModel)]="title" placeholder="Type your title here" type="text" maxlength="80"></textarea>
        </md-input-container>
        <md-input-container class="full-width subtitle-area" floatPlaceholder="never">
          <textarea autosize mdInput [(ngModel)]="subtitle" placeholder="Type your subtitle here" type="text" maxlength="80"></textarea>
        </md-input-container>
      </div>
      <div fxLayout="row" *ngIf="type === 'standard'">
        <div fxFlex="90" class="hint" *ngIf="maxLength">{{content.length}} / {{maxLength}}</div>
        <div fxFlex="10" mdMenuTrigger class="emoji-toggle-button " (click)="toggled = !toggled" [emojiPickerDirection]="direction"
          [(emojiPickerIf)]="toggled" (emojiPickerSelect)="handleSelection($event)" [mdMenuTriggerFor]="emojiPicker" #trigger=mdMenuTrigger>
          <md-icon>face</md-icon>
        </div>
      </div>
    </div>
  </div>
  <div *ngIf="errorMsg">
    <span class="error-message">Max charecter length exceed, The Message will be truncated.</span>
  </div>
</div>

<!--
  HACK - Due to Z-Index on MAterial being MENTAL, If you do this it makes the popup attach
  to the menu so it actually hovers above everything.  There is then a css hac using hide-me to hide the menu..
  Use the hide me trigger to hide the menu pop up -->
<md-menu class="hide-me" #emojiPicker="mdMenu" x-position="before">
  <!-- Blank Menu -> makes pop up work????-->
</md-menu>

quick-reply-dialog.html

<!-- Dialog -->
<div fxLayout="column" fxLayoutAlign="none stretch" class="quickreply-dialog" style="width:500px; height:500px;">
  <!-- Form -->
  <form (keydown.enter)="$event.preventDefault()" fxFlex fxLayout="column" fxLayoutAlign="center stretch" (ngSubmit)="saveReply(replyForm.value)"
    [formGroup]="replyForm">

    <div fxFlex fxLayout="column" fxLayoutAlign="center stretch">

      <div fxFlex="25px;">Quick Reply</div>
      <!-- Replies -->
      <div fxFlex="40px" formArrayName="replies" *ngFor="let reply of replyForm.get('replies').controls; let i = index; let first = first;"
        class="quickreply-replies">
        <!-- Group -->
        <div fxFlex="40px" [formGroupName]="i" fxLayout fxLayoutAlign="center stretch">
          <!-- Reply -->
          <div fxFlex fxLayout="column" fxLayoutAlign="center stretch">
            <app-emoji-picker fxFlex class="quickreply-reply" [(content)]="reply.label" [maxLength]="240" direction="left" type="input" 
            (contentChanged)="reply.label = $event"></app-emoji-picker>
             <input style="display:none" fxFlex [(ngModel)]="reply.label" formControlName="label" fxlayout class="quickreply-reply" placeholder="Enter Reply"> 
          </div>
          <!-- Remove Reply -->
          <div class="btns" fxFlex="40px" fxLayout fxLayoutAlign="center stretch">
            <button type="button" (click)="removeReply(i, reply)" fxFlex class="remove" [ngClass]="{'hide':first || replyForm.controls.replies.controls[i].controls.label.value === '' }"><md-icon>highlight_off</md-icon></button>
          </div>
        </div>
      </div>

      <div class="btns" fxFlex="40px" fxLayout="row" fxLayoutAlign="center stretch">
        <button type="button" fxFlex fxLayout="row" fxLayoutAlign="center center" (click)="addReply()" class="add"><md-icon>add_circle_outline</md-icon> Add Quick Reply</button>
      </div>
    </div>

    <div fxFlex="36px" class="footer" fxLayout="column" fxLayoutAlign="center stretch">
      <div fxLayout fxLayoutAlign="space-between center" class="btns">
        <button md-button class="cancel" type="button" (click)="cancelReply()">Cancel</button>
        <button md-button class="confirm" type="submit">Confirm</button>
      </div>
    </div>

  </form>

</div>