@bizdoc/core 1.14.8 → 1.14.9

package/src/lib/core/tagging/documents.component.html

@@ -0,0 +1,11 @@
+<div role="listbox" cdkTrapFocus class="tag-list">
+  <bizdoc-tag-item *ngFor='let item of items | async' [key]='item.number' [value]='item.documentId' [attr.aria-label]='item.number' matRipple>
+    <div class="row">
+      <mat-icon>{{item.formId | form : 'icon' }}</mat-icon>
+      &nbsp;
+      <div class="column">
+        <span>{{item.number}}</span>
+      </div>
+    </div>
+  </bizdoc-tag-item>
+</div>

package/src/lib/core/tagging/documents.component.ts

@@ -0,0 +1,19 @@
+import { Component } from "@angular/core";
+import { HeaderModel } from "../models";
+import { MailboxService } from "../mailbox.service";
+import { TaggingComponentBase } from "./tagging.component-base";
+
+@Component({
+  templateUrl: './documents.component.html',
+  styleUrls: ['./tagging.component.scss']
+})
+export
+  class DocumentTaggingComponent extends TaggingComponentBase<HeaderModel> {
+  constructor(
+    private _mailbox: MailboxService) {
+    super();
+  }
+  onBind(value: string) {
+    this.items = this._mailbox.findAll({ contains: value }, { take: 8 });
+  }
+}

package/src/lib/core/tagging/edit-input.component.html

@@ -0,0 +1,41 @@
+<div fxLayout="column">
+  <ng-container [ngSwitch]="mode">
+    <ng-container *ngSwitchCase="'html'">
+      <ejs-richtexteditor [value]="text"
+                          (change)="_htmlChange($event)"
+                          [toolbarSettings]="toolbarSettings"></ejs-richtexteditor>
+    </ng-container>
+    <ng-container *ngSwitchDefault>
+      <mat-form-field floatLabel="never" fxFlex>
+        <textarea matInput cdkTextareaAutosize [autofocus]="autofocus"
+                  [(bizdocTagging)]="resource"
+                  (keydown)="_key($event)"
+                  (input)="_textChange($event)"
+                  [value]="text"
+                  (paste)="_paste($event)"
+                  [matTextareaAutosize]="true"
+                  [matAutosizeMaxRows]="20"
+                  [placeholder]="(placeholder || 'TypeHere') | translate"
+                  (focus)="onFocus.emit()"
+                  (focusout)="onBlur.emit()"
+                  #textArea></textarea>
+      </mat-form-field>
+    </ng-container>
+  </ng-container>
+  <div fxLayout="row nav-toolbar">
+    <button mat-icon-button (click)="_openDocument($event)" [bizdocTooltip]="'Document'|translate" bizdocTooltipPosition="above" class="tool" [disabled]="mode !== 'text'"><mat-icon>article</mat-icon></button>
+    <button mat-icon-button (click)="_openMention($event)" [bizdocTooltip]="'Mention'|translate" bizdocTooltipPosition="above" class="tool" [disabled]="mode !== 'text'"><mat-icon>alternate_email</mat-icon></button>
+    <button mat-icon-button (click)="_openEmoji($event)" [bizdocTooltip]="'Emoji'|translate" bizdocTooltipPosition="above" class="tool" [disabled]="mode !== 'text'"><mat-icon>insert_emoticon</mat-icon></button>
+    <button mat-icon-button (click)="_toggleHtml()" [bizdocTooltip]="'Text'|translate" bizdocTooltipPosition="above" class="tool"><mat-icon>text_fields</mat-icon></button>
+    <span class="divider"></span>
+    <button mat-icon-button (click)="_ok()" [disabled]="disabled" class="tool">
+      <mat-icon class="mat-icon-rtl-mirror">send</mat-icon>
+    </button>
+  </div>
+</div>
+<div *ngIf="_image">
+  <img [src]="'data:image/png;base64,'+ _image" />
+  <button mat-icon-button (click)="_clearImage()" [disabled]="disabled">
+    <mat-icon>close</mat-icon>
+  </button>
+</div>

package/src/lib/core/tagging/edit-input.component.scss

@@ -0,0 +1,21 @@
+:host {
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+}
+
+.mat-form-field {
+  -ms-flex: 1 auto;
+  -webkit-flex: 1 auto;
+  flex: 1 auto;
+  padding: 0 8px;
+
+  textarea {
+    overflow: hidden;
+  }
+}
+
+img {
+  max-width: 300px
+}

package/src/lib/core/tagging/edit-input.component.ts

@@ -0,0 +1,211 @@
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { ENTER, ESCAPE } from '@angular/cdk/keycodes';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { ComponentType } from '@angular/cdk/portal';
+import { EmojiData } from '@ctrl/ngx-emoji-mart/ngx-emoji';
+import { ChangeEventArgs, HtmlEditor, RichTextEditor, RichTextEditorComponent, Toolbar, ToolbarSettingsModel, ToolbarType } from '@syncfusion/ej2-angular-richtexteditor';
+import { Popup } from '../popup/popup.service';
+import { UserTaggingComponent } from './users.component';
+import { DocumentTaggingComponent } from './documents.component';
+import { TaggingComponentBase } from './tagging.component-base';
+import { EmojiHostComponent } from './emoji.component';
+
+RichTextEditor.Inject(Toolbar, HtmlEditor);
+
+export const HTML_EXP = /<[\/\w]+>/g;
+
+@Component({
+  selector: 'bizdoc-edit-text',
+  templateUrl: './edit-input.component.html',
+  styleUrls: ['./edit-input.component.scss']
+})
+export class EditInputComponent implements AfterViewInit {
+  readonly toolbarSettings = {
+    items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
+      '|',
+      'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
+      'Outdent', 'Indent'],
+    type: ToolbarType.MultiRow
+  } as ToolbarSettingsModel;
+  private _text: string = '';
+  private _originalText: string;
+  public get text(): string {
+    return this._text;
+  }
+  @Input() placeholder: string;
+  //@ContentChild('[editHint]') hint?: NgTemplate;
+  //@ContentChild('[editLabel]') label?: NgTemplate;
+  @Input()
+  public set text(value: string) {
+    this._originalText = value;
+    this._text = value;
+    this.mode = value && HTML_EXP.test(value) ? 'html' : 'text'
+  }
+  @Input()
+  public set image(value: string) {
+    this._originalImage = value;
+    this._image = value;
+  }
+  mode: 'html' | 'text' = 'text';
+  private _resource: { [key: string]: any; };
+  @Input()
+  public get resource(): { [key: string]: any; } {
+    return this._resource;
+  }
+  public set resource(value: { [key: string]: any; }) {
+    this._resource = value;
+  }
+  @Input() disabled: boolean;
+  private _autofocus: boolean;
+  public get autofocus(): boolean {
+    return this._autofocus;
+  }
+  @Input()
+  public set autofocus(value: boolean) {
+    this._autofocus = coerceBooleanProperty(value);
+  }
+  @Input()
+  cache: string;
+  _image: string;
+  private _originalImage: string;
+  @Output() readonly change = new EventEmitter<string>();
+  @Output('ok') readonly onOk = new EventEmitter<EditTextEvent>();
+  @Output('focus') readonly onFocus = new EventEmitter();
+  @Output('blur') readonly onBlur = new EventEmitter();
+  @ViewChild('textArea') _textElement: ElementRef<HTMLTextAreaElement>;
+  @ViewChild(RichTextEditorComponent) _rte: RichTextEditorComponent;
+  constructor(private _popup: Popup,
+    private _cd: ChangeDetectorRef) { }
+  ngAfterViewInit(): void {
+    if (this._text) {
+      if (this.mode === 'html')
+        this._rte.value = this._text;
+      else
+        this._textElement.nativeElement.value = this._text;
+    }
+    this.autofocus && setTimeout(this.focus.bind(this));
+  }
+  _key(evt: KeyboardEvent) {
+    if (evt.cancelBubble) return;
+    if (evt.which === ENTER && !evt.shiftKey) {
+      this._submit();
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    else if (evt.which === ESCAPE) {
+      if (this._textElement.nativeElement.value && this._textElement.nativeElement.value.length) {
+        this._textElement.nativeElement.value = null;
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    }
+  }
+  private _submit() {
+    if (this.disabled) return;
+    const text = this.mode === 'text' ?
+      this._textElement.nativeElement.value.trim()
+      :
+      this._rte.value.trim();
+
+    if ((text && text.length && text !== this._originalText) ||
+      (this._originalImage && this._image !== this._originalImage))
+      this.onOk.emit({ text, resource: this._resource, image: this._image });
+  }
+  _textChange(evt: KeyboardEvent) {
+    this._text = (evt.srcElement as HTMLTextAreaElement).value;
+    this.change.emit(this._text);
+  }
+  _htmlChange(evt: ChangeEventArgs) {
+    this._text = evt.value;
+    this.change.emit(this._text);
+  }
+  _toggleHtml() {
+    if (this.mode === 'html') {
+      if (this._text) this._text = this._rte.getText();
+      this.mode = 'text';
+    }
+    else
+      this.mode = 'html';
+    this._cd.detectChanges();
+    this.focus();
+  }
+  _ok() {
+    this._submit();
+    this.focus();
+  }
+  clear() {
+    this._image = null;
+    this._resource = null;
+    this._text = null;
+    if (this.mode === 'text')
+      this._textElement.nativeElement.value = null;
+    else
+      this._rte.value = '';
+  }
+  focus() {
+    if (this.mode === 'text')
+      setTimeout(()=> this._textElement.nativeElement.focus(), 0);
+    else
+      this._rte.focusIn();
+  }
+  _openDocument(evt: MouseEvent) {
+    this._tag(DocumentTaggingComponent, evt, '#');
+  }
+  _tag(component: ComponentType<TaggingComponentBase<any>>, evt: MouseEvent, prefix: string) {
+    const popupRef = this._popup.open(component, evt.target as HTMLElement, { position: 'above' });
+    popupRef.opened.subscribe(e => {
+      e.onBind('');
+      e.selected.pipe().subscribe(e => {
+        this._textElement.nativeElement.value += prefix + e.key;
+        const args = {};
+        args[e.key] = e.value;
+        if (!this.resource)
+          this.resource = args;
+        else
+          Object.assign(this.resource, args);
+        popupRef.close();
+        this.focus();
+      });
+    });
+  }
+  _openMention(evt: MouseEvent) {
+    this._tag(UserTaggingComponent, evt, '@');
+  }
+  _openEmoji(evt: MouseEvent) {
+    this._popup.open(EmojiHostComponent, evt.target as HTMLElement, { position: 'above' }).closed.
+      subscribe((e: EmojiData) => {
+        if (e) {
+          this._textElement.nativeElement.value += e.native;
+          this.focus();
+        }
+      });
+  }
+  _addEmoji(event) {
+    this._textElement.nativeElement.value += event.emoji.native;
+  }
+  _paste(event: ClipboardEvent) {
+    const { items } = event.clipboardData;
+    const me = this;
+    for (let index in items) {
+      let item = items[index];
+      if (item.kind === 'file') {
+        let blob = item.getAsFile();
+        let reader = new FileReader();
+        reader.onload = function (event) {
+          const { result } = event.target;
+          me._image = (result as string).substr(22);
+        };
+        reader.readAsDataURL(blob);
+      }
+    }
+  }
+  _clearImage() {
+    this._image = null;
+  }
+}
+
+export interface EditTextEvent {
+  image?: string;
+  text?: string;
+  resource?: { [key: string]: any };
+}

package/src/lib/core/tagging/emoji.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { PopupRef } from '../popup/popup-ref';
+import { EmojiEvent } from '@ctrl/ngx-emoji-mart/ngx-emoji';
+import { SessionService } from '../session.service';
+import { TranslateService } from '../translate.service';
+
+@Component({
+  template: `
+  <emoji-mart class="emoji-mart" (emojiClick)="add($event)" [autoFocus]="true" set="twitter"
+    [autoFocus]=true [enableSearch]=false [showPreview]=false [darkMode]=darkMode [color]=color [i18n]=i18n>
+  </emoji-mart>`
+})
+export class EmojiHostComponent {
+  readonly exclude = ['flags'];
+  readonly i18n = this._translate.i18n('emoji');
+  constructor(private _ref: PopupRef<EmojiHostComponent>, private _session: SessionService,
+    private _translate: TranslateService) { }
+  readonly darkMode = this._session.theme.dark;
+  readonly color = this._session.getAccent();
+  add(event: EmojiEvent) {
+    this._ref.close(event.emoji);
+  }
+}

package/src/lib/core/tagging/tagging-item.directive.ts

@@ -0,0 +1,34 @@
+import { Component, EventEmitter, Input, OnDestroy, Output } from "@angular/core";
+import { Highlightable } from "@angular/cdk/a11y";
+
+@Component({
+  selector: 'bizdoc-tag-item',
+  template: '<ng-content></ng-content>',
+  host: {
+    'role': 'listitem',
+    'tabindex': '-1',
+    'class': 'tag-item',
+    '[class.active]': 'active',
+    '(click)': 'selected.emit()'
+  }
+})
+export class TaggingItemDirective implements Highlightable, OnDestroy {
+  @Output() readonly selected = new EventEmitter();
+
+  @Input() key: string;
+  @Input() value: any;
+
+  active: boolean;
+
+  setActiveStyles(): void {
+    this.active = true;
+  }
+  setInactiveStyles(): void {
+    this.active = false;
+  }
+  disabled?: boolean;
+
+  ngOnDestroy(): void {
+    this.selected.unsubscribe();
+  }
+}

package/src/lib/core/tagging/tagging.component-base.ts

@@ -0,0 +1,29 @@
+import { AfterViewInit, Directive, EventEmitter, OnDestroy, QueryList, ViewChildren } from "@angular/core";
+import { ActiveDescendantKeyManager } from "@angular/cdk/a11y";
+import { Observable } from "rxjs";
+import { TaggingItemDirective } from "./tagging-item.directive";
+
+
+@Directive()
+export abstract class TaggingComponentBase<T> implements AfterViewInit, OnDestroy {
+  @ViewChildren(TaggingItemDirective) options: QueryList<TaggingItemDirective>;
+  readonly selected = new EventEmitter<{ key: any; value: any; }>();
+  items: Observable<T[]>;
+  keyManager: ActiveDescendantKeyManager<TaggingItemDirective>;
+
+  ngAfterViewInit(): void {
+    this.keyManager = new ActiveDescendantKeyManager<TaggingItemDirective>(this.options).
+      withWrap();
+    this.options.changes.subscribe(() => {
+      this.options.toArray().forEach(i => i.selected.subscribe(() =>
+        this.selected.emit({ key: i.key, value: i.value })));
+      //this.options.length && this.keyManager.setFirstItemActive();
+    });
+  }
+
+  abstract onBind(value: string);
+
+  ngOnDestroy(): void {
+    this.selected.unsubscribe();
+  }
+}

package/src/lib/core/tagging/tagging.component.scss

@@ -0,0 +1,22 @@
+.tag-list {
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+}
+
+.tag-item {
+  cursor: pointer;
+  padding: 8px;
+
+  .row {
+    align-items: center;
+  }
+
+  &.active {
+    background: lightgray;
+  }
+}
+
+.tag-list ::ng-deep .tag-item {
+}

package/src/lib/core/tagging/tagging.directive.ts

@@ -0,0 +1,130 @@
+import { Directive, ElementRef, EventEmitter, Injector, Input, Output, Self } from "@angular/core";
+import { MatInput } from "@angular/material/input";
+import { Overlay, OverlayRef } from "@angular/cdk/overlay";
+import { ComponentPortal, ComponentType } from "@angular/cdk/portal";
+import { DOWN_ARROW, ENTER, ESCAPE, UP_ARROW } from "@angular/cdk/keycodes";
+import { TaggingComponentBase } from "./tagging.component-base";
+import { UserTaggingComponent } from "./users.component";
+import { DocumentTaggingComponent } from "./documents.component";
+import { Directionality } from "@angular/cdk/bidi";
+import { filter } from "rxjs/operators";
+
+const TEXT_CHAR = /[\w\-]/;
+@Directive({
+  selector: '[bizdocTagging]',
+  host: {
+    '(keydown)': '_handleKeydown($event)',
+    '(input)': '_handleInput($event)',
+  }
+})
+export
+  class TaggingDirective {
+  @Input('bizdocTagging') resource: { [key: string]: any };
+  @Output('bizdocTaggingChange') resourceChange = new EventEmitter<{ [key: string]: any }>();
+  private _instance: TaggingComponentBase<any>;
+  private _overlayRef: OverlayRef;
+  constructor(
+    @Self() private _input: MatInput,
+    private _dir: Directionality,
+    private _element: ElementRef<HTMLTextAreaElement>,
+    private _overlay: Overlay) {
+  }
+  _handleInput(_evt: KeyboardEvent) {
+    const value = this._value();
+    if (value) {
+      if (value.startsWith('@'))
+        this._popup(UserTaggingComponent, value.substr(1));
+      else if (value.startsWith('#'))
+        this._popup(DocumentTaggingComponent, value.substr(1));
+    }
+  }
+  _handleKeydown(evt: KeyboardEvent | any) {
+    if (!this._instance) return;
+    if (evt.char && !TEXT_CHAR.test(evt.char))
+      this._close();
+    else if (evt.keyCode == UP_ARROW || evt.keyCode == DOWN_ARROW) {
+      this._instance.keyManager.onKeydown(evt);
+      const { key } = this._instance.keyManager.activeItem;
+      this._assign(key);
+      evt.preventDefault();
+      evt.stopPropagation();
+    }
+    else if (evt.keyCode === ENTER) {
+      if (this._instance.keyManager.activeItemIndex > -1) {
+        const { key, value } = this._instance.keyManager.activeItem;
+        this._select(key, value);
+      }
+      evt.preventDefault();
+      evt.stopPropagation();
+    }
+    else if (evt.keyCode == ESCAPE) {
+      this._close();
+      evt.preventDefault();
+      evt.stopPropagation();
+    }
+  }
+  private _close() {
+    this._overlayRef && this._overlayRef.detach();
+    this._instance = null;
+  }
+  private _popup(comp: ComponentType<TaggingComponentBase<any>>, value: string = '') {
+    if (this._instance)
+      this._close();
+    const position = this._overlay.position().
+      flexibleConnectedTo(this._element).
+      withPositions([{ originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }]);
+    this._overlayRef = this._overlay.create({
+      positionStrategy: position,
+      panelClass: 'home-panel',
+      disposeOnNavigation: true,
+      direction: this._dir.value,
+      backdropClass: 'cdk-overlay-transparent-backdrop'
+    });
+    const compRef = this._overlayRef.attach(new ComponentPortal(comp, null,
+      Injector.create([])));
+    this._instance = compRef.instance as TaggingComponentBase<any>;
+    this._instance.onBind(value);
+    this._instance.selected.
+      subscribe(e => this._select(e.key, e.value));
+    this._overlayRef.keydownEvents().pipe(filter(k => k.keyCode === ESCAPE)).
+      subscribe();
+  }
+  private _value(): string {
+    const position = this._element.nativeElement.selectionStart;
+    let value = '', i = position;
+    for (i; i--; i > 0) {
+      let char = this._element.nativeElement.value.charAt(i);
+      if (/[\s\n]/.test(char)) break;
+      value = char + value;
+      if (/[@#]/.test(char))
+        return value;
+    }
+    return null;
+  }
+  /**
+   * 
+   * @param key
+   * @param value
+   */
+  private _select(key: string, value: any): void {
+    this._assign(key);
+    const args = {};
+    args[key] = value;
+    if (!this.resource)
+      this.resource = args;
+    else
+      Object.assign(this.resource, args);
+    this.resourceChange.emit(this.resource);
+    this._close();
+    this._input.focus();
+  }
+
+  private _assign(key: string) {
+    const val = this._value();
+    const position = this._element.nativeElement.selectionStart;
+    this._element.nativeElement.setRangeText(key, position - (val ? val.length - 1 : 0), position);
+    this._input.value = this._element.nativeElement.value;
+    this._element.nativeElement.selectionStart = position + key.length - (val ? val.length - 1 : 0);
+  }
+}
+

package/src/lib/core/tagging/tagging.pipe.ts

@@ -0,0 +1,76 @@
+import { ElementRef, OnDestroy, Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { ChatInfo } from '../../chat/chat-info';
+import { SessionService } from '../session.service';
+import { RouterImpl } from '../router';
+import { TranslateService } from '../translate.service';
+
+const DOCUMENT_REGEX = /#(?<d>[\w\-]+)/g,
+  USER_REGEX = /@(?<u>[\w\-]+)/g,
+  URL_REGEX = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/,
+  BOLD_REGEX = /\*(?<w>\w+[\s\w\-]*)\*/g,
+  NEW_LINE = /\n/g;
+
+const EMOJI_MAP = {
+  '(y)': 'thumb_up',
+  '(n)': 'thumb_down',
+  '<3': 'favorite_border'
+}, EMOJI_REGEX = /(?<up>\(y\))|(?<down>\(n\))|(?<favorite>\<3)/g;
+
+
+@Pipe({ name: 'taggingHtml' })
+export class TaggingPipe implements PipeTransform, OnDestroy {
+  private _me: string;
+  constructor(private _element: ElementRef<HTMLElement>, private _sanitizer: DomSanitizer,
+    private _chat: ChatInfo,
+    private _session: SessionService,
+    private _translate: TranslateService,
+    private _router: RouterImpl) {
+    this._me = this._session.userId;
+  }
+
+  transform(text: string, resource?: { [key: string]: any }, group?: string): SafeHtml {
+    if (!text) return; /* image only */
+    if (EMOJI_REGEX.test(text))
+      text = text.replace(EMOJI_REGEX, (emoji) =>
+        `<i class="material-icons">${EMOJI_MAP[emoji]}</i>`);
+    if (DOCUMENT_REGEX.test(text)) {
+      text = text.replace(DOCUMENT_REGEX, (e, number) =>
+        `<a data-id="${(resource[number] as number).encodeId()}">${e}</a>`);
+    }
+    if (USER_REGEX.test(text)) {
+      text = text.replace(USER_REGEX, (_, name) => {
+        const id = resource[name];
+        return id === this._me ? '@' + this._translate.get('You') :
+          this._chat.format({ id, name: '@' + name } as any);
+      });
+    }
+    text = text.replace(BOLD_REGEX, (_, words) =>
+      `<em>${words}</em>`);
+    text = text.replace(URL_REGEX, (_, url: string) => {
+      const nurl = url.startsWith('http') ? url : 'http://' + url;
+      return `<a href="${nurl}" target="_blank">${url}</a>`;
+    });
+    text = text.replace(NEW_LINE, '<br/>');
+    this._element.nativeElement.addEventListener('click', this._click.bind(this));
+    return this._sanitizer.bypassSecurityTrustHtml(text);
+  }
+  private _click(evt: MouseEvent | KeyboardEvent) {
+    const src = evt.srcElement as HTMLAnchorElement;
+    if (src.tagName === 'A') {
+      const id = src.getAttribute('data-id');
+      if (id) {
+        this._router.navigate(['mailbox/d', id], {
+        });
+        evt.preventDefault();
+      }
+      else {
+        const userId = src.getAttribute('data-info');
+        userId && this._chat.open(userId);
+      }
+    }
+  }
+  ngOnDestroy(): void {
+    this._element.nativeElement.removeEventListener('click', this._click.bind(this));
+  }
+}

package/src/lib/core/tagging/users.component.html

@@ -0,0 +1,13 @@
+<div role="listbox" cdkTrapFocus class="tag-list">
+  <bizdoc-tag-item *ngFor='let item of items | async' [key]='nice(item.name)' [value]='item.id'
+                  matRipple [attr.aria-label]='item.name'>
+    <div class="row">
+      <bizdoc-avatar [person]=item dense [interactive]="false"></bizdoc-avatar>
+      &nbsp;
+      <div class="column">
+        <span>{{item.name}}</span>
+        <span>{{item.email}}</span>
+      </div>
+    </div>
+  </bizdoc-tag-item>
+</div>

package/src/lib/core/tagging/users.component.ts

@@ -0,0 +1,28 @@
+import { Component } from "@angular/core";
+import { map } from "rxjs/operators";
+import { UserInfo } from "../models";
+import { AccountService } from "../account.service";
+import { SessionService } from "../session.service";
+import { TaggingComponentBase } from "./tagging.component-base";
+
+@Component({
+  templateUrl: './users.component.html',
+  styleUrls: ['./tagging.component.scss']
+})
+export
+  class UserTaggingComponent extends TaggingComponentBase<UserInfo> {
+  private readonly _me: string;
+  constructor(
+    private _session: SessionService,
+    private _accounts: AccountService) {
+    super();
+    this._me = this._session.userId;
+  }
+  nice(name: string) {
+    return name.split(/\s+|\-/).map(p => p.charAt(0).toUpperCase() + p.substring(1)).join('');
+  }
+  onBind(value: string) {
+    this.items = this._accounts.findAll(value, { take: 8 }).
+      pipe(map(u => u.filter(u => u.id !== this._me)));
+  }
+}