@bizdoc/core 1.14.9 → 1.14.12

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

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

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

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

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

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

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

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

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

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

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