@bizdoc/core 1.14.8 → 1.14.9

package/src/lib/chat/chat.service.ts

@@ -0,0 +1,128 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, Subject } from 'rxjs';
+import { tap } from 'rxjs/operators';
+import { Chat, Contact, UserInfo } from '../core/models';
+import { SessionService } from '../core/session.service';
+import { HubService } from '../core/hub.service';
+import { playAudio } from '../core/functions';
+
+@Injectable({ providedIn: 'root' })
+export class ChatService {
+  active: string;
+  private _change$ = new Subject<Contact>();
+  get change() { return this._change$.asObservable(); }
+  private readonly _map: { [id: string]: Contact } = {};
+  constructor(private _http: HttpClient,
+    messaging: HubService,
+    private _session: SessionService) {
+    _session.profile.contacts.forEach(c => this._map[c.id] = c);
+    messaging.chatWatermark$.subscribe(e => {
+      const contact = this._map[e.contactId];
+      contact.watermark = e.time;
+    });
+    messaging.chat$.subscribe(e => {
+      this.active !== e.contactId &&
+        playAudio('notification_simple-01')
+      const contact = this._map[e.contactId];
+      const { model: {
+        text,
+        resource,
+        time
+      } } = e;
+      if (contact) {
+        if (!contact.count)
+          _session.profile.conversationsCount++;
+        if (contact.forgotten)
+          contact.forgotten = undefined;
+        Object.assign(contact, {
+          text,
+          resource,
+          time,
+          watermark: time,
+          accepted: true
+        });
+        contact.count++;
+      }
+      else {
+        const contact = {
+          id: e.model.userId,
+          count: 1,
+          text,
+          resource,
+          time,
+          accepted: true
+        };
+        this._map[e.model.userId] = contact;
+        _session.profile.contacts.push(contact);
+        _session.profile.conversationsCount++;
+      }
+      this._change$.next(contact)
+    });
+  }
+  private readonly _storage = {};
+  store(contactId: string, data: { text?: string, resource?: {}, image?: string }) {
+    this._storage[contactId] = data;
+  }
+  restore(contactId: string) {
+    return this._storage[contactId];
+  }
+  find(contactId: string) {
+    let contact = this._map[contactId];
+    if (contact) {
+      if (contact.forgotten)
+        contact.forgotten = undefined;
+    }
+    else {
+      contact = {
+        id: contactId,
+        count: 0,
+      } as Contact;
+      this._map[contactId] = contact;
+      this._session.profile.contacts.push(contact);
+    }
+    return contact;
+  }
+  conversations(contactId: string, before?: Date): Observable<Chat[]> {
+    return this._http.get<Chat[]>(`/api/chat/${contactId}`, {
+      params: before && { before: new Date(before).toJSON() }
+    });
+  }
+  seen(contactId: string): Observable<Timestamp> {
+    return this._http.put<Timestamp>(`/api/chat/seen/${contactId}`, {
+    }, { headers: { 'no-progress': 'true' } }).pipe(tap((e: Timestamp) => {
+      const contact = this._map[contactId];
+      contact.visited = e.time;
+      contact.count = 0;
+      this._session.profile.conversationsCount--;
+      this._change$.next(contact)
+    }
+    ));
+  }
+  typing(contactId: string): Observable<any> {
+    return this._http.put(`/api/chat/typing/${contactId}`, {
+    }, { headers: { 'no-progress': 'true' } });
+  }
+  forget(contactId: string): Observable<any> {
+    return this._http.put(`/api/account/forget/${contactId}`, {
+    });
+  }
+  findAll(name: string): Observable<UserInfo[]> {
+    return this._http.get<UserInfo[]>('/api/account/list', {
+      params: { name }
+    });
+  }
+  send(contactId: string, options: { text?: string; icon?: string }): Observable<Chat> {
+    return this._http.post<Chat>(`/api/chat/${contactId}`,
+      options).pipe(tap((c: Chat) => {
+        const contact = this.find(contactId);
+        Object.assign(contact, {
+          text: c.text,
+          time: c.time,
+          resource: c.resource,
+          accepted: false
+        } );
+      }));
+  }
+}
+declare type Timestamp = { time: Date };

package/src/lib/chat/contacts.component.html

@@ -0,0 +1,37 @@
+    <!-- search -->
+<mat-form-field floatLabel="never" class="search">
+  <input type="search" matInput [formControl]="searchControl" [matAutocomplete]="user" placeholder="{{'SearchContacts' | translate}}" />
+  <button mat-button *ngIf="searchControl.value" matSuffix mat-icon-button aria-label="" (click)="searchControl.setValue('')">
+    <mat-icon>close</mat-icon>
+  </button>
+  <mat-autocomplete #user (optionSelected)="optionSelected($event)">
+    <mat-option *ngFor="let u of users$ | async" [value]="u.id">
+      {{u.name}}
+    </mat-option>
+  </mat-autocomplete>
+</mat-form-field>
+<!-- contacts -->
+<mat-nav-list>
+  <mat-list-item *ngFor="let c of contacts |filter:'forgotten':undefined| sort : 'time' : 'desc'" (click)="open(c)" [class.read]="c.visited>=c.time">
+    <bizdoc-avatar [person]="c" *ngIf="c.name" [interactive]="false"></bizdoc-avatar>
+    <h3 matLine>
+      {{c.nick || c.name}}
+    </h3>
+    <div matLine>
+      <div class="chat-text" [innerText]="c.text | htmlToText"></div>
+    </div>
+    <p matLine>
+      <small [bizdocTooltip]="c.time | amCalendar">{{c.time | amTimeAgo}}</small>
+      <small *ngIf="!c.accepted">
+        {{'You' | translate }}
+      </small>
+      <mat-icon *ngIf="!c.accepted && c.watermark>=c.time" class="watermark">done_all</mat-icon>
+    </p>
+    <button mat-icon-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()" class="tool">
+      <mat-icon [matBadge]="c.count" [matBadgeHidden]="!c.count" matBadgeSize="medium" matBadgeColor="accent" matBadgePosition="before" matBadgeOverlap="false">more_vert</mat-icon>
+    </button>
+    <mat-menu #menu>
+      <button mat-menu-item (click)="forget(c)">{{'Forget'|translate}}</button>
+    </mat-menu>
+  </mat-list-item>
+</mat-nav-list>

package/src/lib/chat/contacts.component.scss

@@ -0,0 +1,49 @@
+:host {
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+}
+
+.search {
+  padding: 8px 8px 0;
+  -moz-animation: width ease-in-out 1;
+  -o-animation: width ease-in-out 1;
+  -webkit-animation: width ease-in-out 1;
+  animation: width ease-in-out 1;
+
+  &.collapse {
+    width: 0
+  }
+}
+
+mat-nav-list {
+  -ms-flex: 1 1 auto;
+  -webkit-flex: 1 1 auto;
+  flex: 1 1 auto;
+  overflow: auto;
+
+  mat-list-item {
+    .chat-text {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      max-width: 150px;
+      display: block;
+    }
+
+    .watermark {
+      width: 16px;
+      height: 16px;
+      font-size: 16px;
+    }
+
+    .tool {
+      opacity: 0
+    }
+
+    &:hover .tool {
+      opacity: 1
+    }
+  }
+}

package/src/lib/chat/contacts.component.ts

@@ -0,0 +1,88 @@
+import { ChangeDetectorRef, Component, EventEmitter, OnDestroy, OnInit, Output, Pipe, PipeTransform } from "@angular/core";
+import { merge, Observable, Subject } from 'rxjs';
+import { debounceTime, map, takeUntil, switchMap, filter } from 'rxjs/operators';
+
+import { Contact, UserInfo } from '../core/models';
+import { SessionService } from '../core/session.service';
+import { PromptService } from '../core/prompt.service';
+import { FormControl } from '@angular/forms';
+import { ChatService } from './chat.service';
+import { HubService } from '../core/hub.service';
+import { isString } from "../core/functions";
+import { MatAutocompleteSelectedEvent } from "@angular/material/autocomplete";
+import { AccountService } from "../core/account.service";
+import { forkJoin } from "rxjs";
+import { tap } from "rxjs/operators";
+import { HTML_EXP } from "../core/tagging/edit-input.component";
+
+@Pipe({name: 'htmlToText'})
+export class HtmlSimplePipe implements PipeTransform {
+    transform(value: any, ...args: any[]) {
+      if (!value) return '';
+      else if (!HTML_EXP.test(value)) return value;
+      else return (value as string).replace(HTML_EXP, '');
+    }
+}
+
+@Component({
+  selector: 'bizdoc-contacts',
+  templateUrl: './contacts.component.html',
+  styleUrls: ['./contacts.component.scss']
+})
+export
+  class ContactsComponent implements OnInit, OnDestroy {
+  @Output() readonly selected = new EventEmitter<Contact>();
+  contacts: Contact[];
+  users$: Observable<UserInfo[]>;
+  readonly searchControl = new FormControl();
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    private _service: ChatService,
+    private _sb: PromptService,
+    private _session: SessionService,
+    private _accounts: AccountService,
+    private _changeDetector: ChangeDetectorRef,
+    private _messaging: HubService) {
+    merge(this._messaging.chat$, this._messaging.chatWatermark$).
+      pipe(takeUntil(this._destroy)).
+      subscribe(() =>
+        this._changeDetector.detectChanges());
+    _service.change.
+      pipe(takeUntil(this._destroy)).
+      subscribe(c => this._accounts.get(c.id).subscribe(u => Object.assign(c, u)));
+    this.contacts = this._session.profile.contacts;
+  }
+  private _prepare() {
+    forkJoin(this.contacts.map(c =>
+      this._accounts.get(c.id).pipe(tap(u => Object.assign(c, u))))).
+      subscribe()
+  }
+  ngOnInit(): void {
+    const me = this._session.userId;
+    this._prepare();
+    this.users$ = this.searchControl.valueChanges.pipe(debounceTime(200),
+      filter(v => isString(v)),
+      takeUntil(this._destroy),
+      switchMap(v => this._service.findAll(v)),
+      map(us => us.filter(u => u.id !== me)));
+  }
+  optionSelected(ev: MatAutocompleteSelectedEvent) {
+    const { value: id } = ev.option;
+    const contact = this._service.find(id);
+    this.open(contact);
+  }
+  open(item: Contact) {
+    this.selected.next(item);
+  }
+
+  forget(item: Contact) {
+    this._service.forget(item.id).subscribe(() => {
+      item.forgotten = true;
+      this.contacts.remove(item);
+    }, () => this._sb.error());
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/chat/contacts.pane.component.ts

@@ -0,0 +1,25 @@
+import { Component } from "@angular/core";
+import { Contact } from '../core/models';
+import { PanesRouter } from "../core/slots/router.service";
+import { PaneRef } from "../core/slots/pane-ref";
+import { TranslateService } from "../core/translate.service";
+
+
+@Component({
+  template: `<bizdoc-contacts (selected)="selected($event)"></bizdoc-contacts>`,
+  host: {
+    class: 'pane'
+  }})
+export
+  class ContactsPaneComponent {
+  constructor(
+    pane: PaneRef,
+    translate: TranslateService,
+    private _router: PanesRouter) {
+  pane.title = translate.get('Contacts')}
+  selected(contact: Contact) {
+    this._router.navigate(['c', contact.id], {
+      pathMode: 'relative'
+    });
+  }
+}

package/src/lib/chat/conversation.component.html

@@ -0,0 +1,28 @@
+<div (wheel)="onScroll($event)" class="chat-conversation" #conversation>
+  <bizdoc-none *ngIf="!items.length" title="Chat" icon="chat"></bizdoc-none>
+
+  <ng-container *ngFor="let item of items; let i = index; trackBy: trackBy">
+    <div class="chat-item" [class.you]="item.userId!==contact.id">
+      <div class="chat-text" [innerHTML]="item.text|taggingHtml:item.resource"></div>
+      <img *ngIf="item.image" [src]="'data:image/png;base64,'+item.image" alt="" (click)="preview(item)" />
+      <div class="chat-info" *ngIf="(i===items.length - 1)||item.userId!==items[i+1].userId">
+        <small>
+          <bizdoc-identity-name [identity]="item.userId" chating="none">
+          </bizdoc-identity-name>
+        </small>
+        <span class="divider"></span>
+        <small class="chat-time" [bizdocTooltip]="item.time | amDateFormat: 'lll'">{{item.time | amCalendar : null : CALENDAR_SPEC }}</small>
+      </div>
+    </div>
+    <div class="chat-watermark" *ngIf="watermark && ((i<items.length - 1 && items[i+1].time>watermark&&item.time<=watermark)||(i===items.length - 1 &&item.time<=watermark))">
+      <mat-icon [bizdocTooltip]="'Watched' | translate : (watermark | amTimeAgo)">done_all</mat-icon>
+    </div>
+  </ng-container>
+</div>
+<div class="chat-typing" [style.visibility]="typing ? 'visible':'hidden'" [innerHTML]="(profile?.gender === 'Male' ? 'TypingMale' : profile?.gender === 'Female' ? 'TypingFemale' : 'Typing') | translate : (profile?.nick || profile?.name)"></div>
+
+<bizdoc-edit-text (ok)="send($event)" (focus)="onFocus()"
+                  (focusout)="onBlur()" [disabled]="sending" (change)="_textChange.next()"></bizdoc-edit-text>
+<ng-template #previewTemplate let-item="item">
+  <img [src]="'data:image/png;base64,'+item.image" alt="" />
+</ng-template>

package/src/lib/chat/conversation.component.scss

@@ -0,0 +1,14 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1 auto;
+  overflow-y: auto;
+}
+.chat-conversation {
+  -ms-flex: 1 1 auto;
+  -webkit-flex: 1 1 auto;
+  flex: 1 1 auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 4px 0 4px;
+}

package/src/lib/chat/conversation.component.ts

@@ -0,0 +1,186 @@
+import { Component, ElementRef, ViewChild, OnInit, Input, TemplateRef, ViewContainerRef, OnChanges, SimpleChanges, Inject } from '@angular/core';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { ESCAPE } from '@angular/cdk/keycodes';
+import { merge, Subject } from 'rxjs';
+import { takeUntil, debounceTime, filter } from 'rxjs/operators';
+import { CalendarSpec } from "../core/pipes/calendar.pipe";
+import { Chat, Contact, UserInfo } from '../core/models';
+import { HubService } from '../core/hub.service';
+import { ChatService } from './chat.service';
+import { TranslateService } from '../core/translate.service';
+import { AccountService } from '../core/account.service';
+import { PromptService } from '../core/prompt.service';
+import { EditInputComponent, EditTextEvent } from '../core/tagging/edit-input.component';
+import { OnDestroy } from '@angular/core';
+import { BizDocConfig, BIZDOC_CONFIG, ChatSettings } from '../core/configuration';
+
+const CONTACT_TYPING_NOTE = 1500;
+
+@Component({
+  selector: 'bizdoc-chat-conversation',
+  templateUrl: './conversation.component.html',
+  styleUrls: ['./conversation.component.scss']
+})
+export
+  class ConversationComponent implements OnInit, OnChanges, OnDestroy {
+  @Input() public contact: Contact;
+  profile: UserInfo;
+  items: Chat[] = [];
+  typing = false;
+  watermark: Date;
+  sending = false;
+  working = false;
+  readonly CALENDAR_SPEC: CalendarSpec = {
+    lastDay: this._translate.get('YesterdayAt', 'HH:mm'),
+    lastWeek: 'ddd HH:mm',
+    sameDay: 'HH:mm',
+    sameElse: 'MMM D HH:mm'
+  };
+  @ViewChild(EditInputComponent, { static: true }) _input: EditInputComponent;
+  @ViewChild('conversation', { read: ElementRef, static: true }) conversationElement: ElementRef<HTMLDivElement>;
+  @ViewChild('previewTemplate') previewTemplate: TemplateRef<any>;
+  private _inFocus = false;
+  private _top = false;
+  private _typingTask: NodeJS.Timeout;
+  private _preserveDraft: boolean;
+  readonly _textChange = new Subject<void>();
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    @Inject(BIZDOC_CONFIG) config: BizDocConfig,
+    private _service: ChatService,
+    private _messaging: HubService,
+    private _translate: TranslateService,
+    private _accounts: AccountService,
+    private _sb: PromptService,
+    private _vc: ViewContainerRef,
+    private _overlay: Overlay
+  ) {
+    this._preserveDraft = config.chating && (config.chating as ChatSettings).preserveDraft;
+  }
+  ngOnInit(): void {
+    this._messaging.chatTyping$.pipe(takeUntil(this._destroy)).subscribe(e => {
+      if (e.contactId === this.contact.id) {
+        clearTimeout(this._typingTask);
+        this._typingTask = setTimeout(() => this.typing = false, CONTACT_TYPING_NOTE);
+        this.typing = true;
+      }
+    });
+    this._messaging.chat$.pipe(takeUntil(this._destroy)).subscribe(e => {
+      if (e.contactId === this.contact.id) {
+        this.items.push(e.model);
+        this._scrollToBottom();
+        this._inFocus && this._seen();
+      }
+    });
+    this._messaging.chatWatermark$.pipe(takeUntil(this._destroy)).subscribe(e => {
+      if (e.contactId === this.contact.id) this.watermark = e.time;
+    });
+    this._textChange.pipe(debounceTime(350), takeUntil(this._destroy)).subscribe(() =>
+      this._service.typing(this.contact.id));
+  }
+  ngOnChanges(_: SimpleChanges): void {
+    this.profile &&
+      this._preserveDraft && this._persist();
+
+    this._accounts.get(this.contact.id).subscribe(u => {
+      this.profile = u;
+    }, () => this._sb.error());
+    // latest
+    this.watermark = this.contact.visited || this.contact.watermark ? (this.contact.visited && this.contact.watermark ?
+      this.contact.watermark > this.contact.visited ?
+        this.contact.watermark : this.contact.visited :
+      this.contact.watermark || this.contact.visited) : null;
+    // fetch
+    this._service.conversations(this.contact.id).subscribe(cs => {
+      this.items = cs.reverse();
+      this._scrollToBottom();
+      !this.contact.count &&
+        this.focus();
+    }, () =>
+      this._sb.error());
+    if (this._preserveDraft) {
+      const text = localStorage.getItem(this.contact.id);
+      if (text) this._input.text = text;
+    }
+  }
+  trackBy = (_, item: Chat) => item.time;
+
+  private _scrollToBottom(): void {
+    setTimeout(() => {
+      try {
+        this.conversationElement.nativeElement.scrollTop = this.conversationElement.nativeElement.scrollHeight;
+      } catch (e) {
+        console.error(e)
+      }
+    });
+  }
+  onScroll(e: MouseEvent) {
+    const el = this.conversationElement.nativeElement;
+    if (el.scrollTop < 10 && !this._top && !this.working) {
+      this.working = true;
+      this._service.conversations(this.contact.id, this.items.length ? this.items[0].time : null).subscribe(is => {
+        if (is.length)
+          this.items = is.reverse().concat(this.items)
+        else
+          this._top = true;
+        this.working = false;
+      });
+      e.preventDefault();
+    }
+  }
+  send(evt: EditTextEvent) {
+    this.sending = true;
+    this._service.send(this.contact.id, evt).subscribe(c => {
+      this.items.push(c);
+      this._input.clear();
+      this._scrollToBottom();
+      this.sending = false;
+    }, e => {
+      this.sending = false;
+      this._sb.error()
+    });
+  }
+
+  onFocus() {
+    this._inFocus = true;
+    this._service.active = this.contact.id;
+    this.contact.count && this._seen();
+  }
+  onBlur() {
+    this._service.active = null;
+    this._inFocus = false;
+  }
+  private _seen() {
+    this._service.seen(this.contact.id).subscribe(e => {
+      this.watermark = e.time;
+      this._scrollToBottom();
+    });
+  }
+
+  focus() {
+    this._input.focus();
+  }
+  preview(item: Chat) {
+    const oRef = this._overlay.create({
+      hasBackdrop: true,
+      disposeOnNavigation: true,
+      positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
+    });
+    oRef.attach(new TemplatePortal(this.previewTemplate, this._vc, { item }));
+    merge(oRef.keydownEvents().pipe(filter(k => k.keyCode === ESCAPE)), oRef.backdropClick()).subscribe(() => oRef.detach());
+  }
+
+  ngOnDestroy(): void {
+    if (this._typingTask) clearTimeout(this._typingTask);
+    this._destroy.next();
+    this._destroy.complete();
+
+    this._preserveDraft && this._persist();
+  }
+
+  private _persist() {
+    this._input.text && this._input.text.length &&
+      window.localStorage.setItem(this.contact.id, this._input.text);
+  }
+}

package/src/lib/chat/conversation.pane.component.ts

@@ -0,0 +1,55 @@
+import { Component, OnDestroy } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
+import { Contact } from '../core/models';
+import { PaneRef } from '../core/slots/pane-ref';
+import { SessionService } from '../core/session.service';
+import { AccountService } from '../core/account.service';
+import { ChatService } from './chat.service';
+import { TranslateService } from '../core/translate.service';
+
+@Component({
+  template: '<bizdoc-chat-conversation [contact]=contact></bizdoc-chat-conversation>',
+  styles: [`:host{
+  min-width: 320px;
+}`],
+  host: {
+    class: 'pane'
+  }
+})
+export
+  class ConversationPaneComponent implements OnDestroy {
+  contact: Contact;
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    pane: PaneRef,
+    translate: TranslateService,
+    accounts: AccountService,
+    chat: ChatService,
+    session: SessionService) {
+    pane.paramsChange.subscribe(p => {
+      pane.group = translate.get('Chat');
+      const id = p['id'];
+      this.contact = session.profile.contacts.find(c => c.id === id);
+      if (!this.contact) {
+        this.contact = {
+          id,
+          accepted: false,
+          time: new Date().toJSON() as any,
+          count: 0
+        } as Contact;
+        session.profile.contacts.push(this.contact);
+      }
+      accounts.get(id).subscribe(u =>
+        pane.title = u.name);
+    });
+    chat.change.pipe(takeUntil(this._destroy)).
+      subscribe(c => {
+        if (c.id === this.contact.id)
+          pane.badge = c.count;
+      })
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/compose/_compose-theme.scss

@@ -0,0 +1,63 @@
+@mixin compose-theme($theme) {
+  $primary: mat.get-color-from-palette($theme, primary);
+  $accent: mat.get-color-from-palette($theme, accent);
+  $background: mat.get-color-from-palette($theme, background);
+  $foreground: mat.get-color-from-palette($theme, foreground);
+
+  $background-color: mat.get-color-from-palette($background, card);
+  $border-color: mat.get-color-from-palette($primary, 600);
+
+  .form-container {
+    color: mat.get-color-from-palette($foreground, text)
+  }
+
+  .form-header {
+    padding: 4px
+  }
+
+  .compose-note {
+    padding: 5px;
+    /*border-left: 5px solid $border-color;*/
+    /*background: $background-color;*/
+    margin: 5px 5px;
+
+    .mat-icon {
+      vertical-align: middle;
+      padding: 0 4px;
+    }
+
+    span {
+      vertical-align: text-top;
+    }
+  }
+
+  [dir=rtl] .compose-note {
+    border-left: none;
+    /*border-right: 4px solid $border-color;*/
+  }
+
+  .file-upload {
+    cursor: default
+  }
+
+  .file-dropable {
+    /*pointer-events: none;*/
+    &.drag {
+      opacity: .5;
+      /*width: 100%;*/
+      /*height: 100%;*/
+      overflow: hidden;
+      margin: 8px;
+      border-style: dashed;
+      border-color: #777;
+      border-width: 5px;
+      background-color: whitesmoke;
+      z-index: 2;
+      /*position: absolute;*/
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  }
+}