@bizdoc/core 1.14.9 → 1.14.12

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

@@ -1,11 +0,0 @@
-<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

@@ -1,19 +0,0 @@
-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

@@ -1,41 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-: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

@@ -1,211 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,22 +0,0 @@
-.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

@@ -1,130 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,13 +0,0 @@
-<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

@@ -1,28 +0,0 @@
-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)));
-  }
-}