@bizdoc/core 1.8.5 → 1.8.9

package/src/lib/compose/action/action-picker.component.ts

@@ -0,0 +1,95 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { AfterViewInit, EventEmitter, Inject, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { queryParams } from '../../core/functions';
+import { DOCUMENT_MODEL, MailboxService } from '../../core/mailbox.service';
+import { Action, RecipientModel } from '../../core/models';
+import { PromptService } from '../../core/prompt.service';
+import { SessionService } from '../../core/session.service';
+import { ActionDialog, ActionDialogData } from './action.dialog';
+
+@Component({
+  selector: 'bizdoc-action-picker',
+  templateUrl: './action-picker.component.html',
+  styleUrls: ['./action-picker.component.scss'],
+})
+/** action-picker component*/
+export class ActionPicker implements OnChanges, AfterViewInit {
+  @Input() working = false;
+  @Output() readonly workingChange = new EventEmitter<boolean>();
+  actions: Action[] = [];
+  constructor(
+    @Inject(DOCUMENT_MODEL) public model: RecipientModel<any>,
+    private _session: SessionService,
+    private _mailbox: MailboxService,
+    private _dialog: MatDialog,
+    private _sb: PromptService
+  ) { }
+  ngAfterViewInit(): void {
+    const btn = (document.querySelector('[data-help=send]') as HTMLButtonElement);
+    if (btn) btn.style.display = 'none';
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['model'])
+      this.actions = this._session.profile.actions.filter(a => this.model.actions.indexOf(a.name) > -1).
+        sort(this._sortActions);
+  }
+  private _sortActions(a: Action, b: Action) {
+    if (a.group && b.group && a.group !== b.group)
+      return a.group < b.group ? -1 : 1;
+    return 0;
+  }
+  send(action: Action) {
+    this._dialog.open(ActionDialog, {
+      data: {
+        action: action.name,
+        item: this.model
+      } as ActionDialogData,
+      closeOnNavigation: true
+    }).afterClosed().subscribe(args => {
+      if (args) {
+        const params = queryParams(args);
+        this.workingChange.emit(true);
+        this.working = true;
+        const { id, version, number, model, formId } = this.model;
+        return this._mailbox.send(id, version, formId, model, action.name, params).
+          subscribe(() => {
+            this._sb.toast('Sent', number, (action.adjective || action.past || action.title).toLowerCase());
+            this.working = false;
+            this.workingChange.emit(false);
+          }, e => {
+            this.working = false;
+            this.workingChange.emit(false);
+            this._handleError(e, 'SendErr');
+          });
+      }
+    })
+  }
+  private _handleError(response: HttpErrorResponse | any, message: string, ...args: string[]) {
+    if (response.constructor.name === 'PositionError')
+      switch (response.code) {
+        case 1:
+          this._sb.error('UserDeniedGeoErr');
+          break;
+        default:
+          this._sb.error('GeoErr');
+      }
+    else
+      switch (response.status) {
+        case 401:
+          break;
+        case 409: // version change
+          {
+            const obj = response.error /* serialized model */ as RecipientModel<any>;
+            this._sb.error('VersionErr', this.model.number);
+            break;
+          }
+        case 406: // validation exception
+          this._sb.errorString(response.error);
+          break;
+        default:
+          this._sb.error(message, ...args);
+      }
+  }
+}

package/src/lib/compose/action/action-ref.ts

@@ -0,0 +1,19 @@
+import { Action, RecipientModel } from "../../core/models";
+
+export class ActionRef<T = any> {
+  public get name(): string {
+      return this._action.name;
+  }
+  public get options(): T {
+      return this._action.options;
+  }
+  public get item(): RecipientModel {
+      return this._items[0];
+  }
+  public get items(): RecipientModel[] {
+      return this._items;
+  }
+  constructor(private _items: RecipientModel[], private _action: Action) {
+
+  }
+}

package/src/lib/compose/action/action.dialog.html

@@ -0,0 +1,17 @@
+<h2 mat-dialog-title>{{action.title}}</h2>
+<mat-dialog-content fxLayout="column">
+  <p *ngIf="!action.arguments.length">
+    {{ 'ActionAsk' | translate : (action.verb || action.title).toLowerCase() }}
+  </p>
+  <bizdoc-layout [fields]="action.arguments"
+              *ngIf="!action.template; else template"
+              [(model)]="arguments"
+              [(valid)]="valid"></bizdoc-layout>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button type="submit" [disabled]="!valid" [mat-dialog-close]="arguments" color="primary">{{'Yes'|translate}}</button>
+  <button mat-button mat-dialog-close>{{'No' | translate}}</button>
+</mat-dialog-actions>
+<ng-template #template>
+  <ngx-component-outlet [type]="comp" [injector]="injector" (create)="bind($event)"></ngx-component-outlet>
+</ng-template>

package/src/lib/compose/action/action.dialog.scss

@@ -0,0 +1 @@
+:host ::ng-deep form{display:flex}

package/src/lib/compose/action/action.dialog.ts

@@ -0,0 +1,58 @@
+import { Component, Inject, Injector, OnDestroy, OnInit, TemplateRef, Type, ViewChild, ViewContainerRef } from '@angular/core';
+import { SessionService } from '../../core/session.service';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { ENTER } from '@angular/cdk/keycodes';
+import { Subject } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
+import { Action, RecipientModel } from '../../core/models';
+import { ArgumentsComponent } from '../../core/base';
+import { BizDocComponentFactoryResolver } from '../../core/component-factory-resolver';
+import { ActionRef } from './action-ref';
+
+@Component({
+  templateUrl: './action.dialog.html',
+  styleUrls: ['./action.dialog.scss']
+})
+/** action-dialog component*/
+export class ActionDialog implements OnInit, OnDestroy {
+  readonly action: Action;
+  arguments = {};
+  valid: boolean;
+  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
+  /** action-dialog ctor */
+  private readonly _destroy = new Subject<void>();
+  injector: Injector;
+  comp: Type<ArgumentsComponent>;
+  constructor(@Inject(MAT_DIALOG_DATA) public data: ActionDialogData, session: SessionService,
+    private _fr: BizDocComponentFactoryResolver) {
+    this.action = session.profile.actions.find(a => a.name === data.action);
+  }
+  ngOnInit(): void {
+    if (this.action.template) {
+      this.injector = Injector.create([{
+        provide: ActionRef,
+        useValue: new ActionRef(this.data.items || [this.data.item], this.action)
+      }]);
+      this.comp = this._fr.component(this.action.template);
+    }
+    else {
+      if (this.action.arguments.length === 0)
+        this.valid = true;
+    }
+  }
+  bind(instance: ArgumentsComponent) {
+    instance.form.valueChanges.pipe(takeUntil(this._destroy)).subscribe(v => this.arguments = v);
+    instance.form.statusChanges.pipe(takeUntil(this._destroy)).
+      subscribe(() => this.valid = instance.form.valid);
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+export interface ActionDialogData {
+  action: string;
+  item?: RecipientModel<any>;
+  items?: RecipientModel<any>[];
+}
+

package/src/lib/compose/action/action.pane.dialog.html

@@ -0,0 +1,12 @@
+<h2 mat-dialog-title>{{action.title}}</h2>
+<mat-dialog-content>
+  <p *ngIf="!action.arguments.length">
+    {{ 'ActionAsk' | translate : (action.verb || action.title).toLowerCase() }}
+  </p>
+  <ng-container #container>
+  </ng-container>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button type="submit" [disabled]="!valid" [mat-dialog-close]="arguments" color="primary" cdkFocusInitial>{{'Yes'|translate}}</button>
+  <button mat-button mat-dialog-close>{{'No' | translate}}</button>
+</mat-dialog-actions>

package/src/lib/compose/action/action.pane.dialog.ts

@@ -0,0 +1,64 @@
+import { Component, ComponentFactoryResolver, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { SessionService } from '../../core/session.service';
+import { Action } from '../../core/models';
+import { ArgumentsComponent } from '../../core/base';
+import { BizDocComponentFactoryResolver } from '../../core/component-factory-resolver';
+import { LayoutComponent } from '../../core/layout/layout.component';
+import { PaneRef } from '../../core/slots/pane-ref';
+
+@Component({
+  selector: 'bizdoc-action-dialog.pane',
+  templateUrl: './action.pane.dialog.html',
+  styleUrls: ['./action.dialog.scss'],
+  host: {
+    class: 'pane'
+  }
+})
+/** action-dialog component*/
+export class ActionPaneDialog implements OnInit, OnDestroy {
+  @ViewChild('container') container: ViewContainerRef;
+  arguments = {};
+  readonly action: Action;
+  valid: boolean;
+  data: ActionDialogData;
+  /** action-dialog ctor */
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    slot: PaneRef<ActionPaneDialog>,
+    private _fr: BizDocComponentFactoryResolver,
+    private _fr2: ComponentFactoryResolver,
+    session: SessionService) {
+    this.action = session.profile.actions.find(a => a.name === slot.params.action);
+  }
+  ngOnInit(): void {
+    if (this.action.template) {
+      const factory = this._fr.resolve(this.action.template);
+      const cRef = this.container.createComponent(factory);
+      (cRef.instance as ArgumentsComponent).form.valueChanges.pipe(takeUntil(this._destroy)).subscribe(v => this.arguments = v);
+      (cRef.instance as ArgumentsComponent).form.statusChanges.pipe(takeUntil(this._destroy)).
+        subscribe(() => this.valid = (cRef.instance as ArgumentsComponent).form.valid);
+    }
+    else {
+      if (this.action.arguments.length === 0)
+        this.valid = true;
+      else {
+        const factory = this._fr2.resolveComponentFactory(LayoutComponent);
+        const cRef = this.container.createComponent(factory);
+        cRef.instance.fields = this.action.arguments;
+        cRef.instance.modelChange.pipe(takeUntil(this._destroy)).subscribe(v => this.arguments = v);
+        cRef.instance.validChange.pipe(takeUntil(this._destroy)).subscribe(v => this.valid = v);
+      }
+    }
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+export interface ActionDialogData {
+  action: string;
+  multiple?: boolean;
+}
+

package/src/lib/compose/action/assign-action.component.html

@@ -0,0 +1,17 @@
+<form autocomplete="off" fxLayout="column" [formGroup]="form">
+  <mat-form-field>
+    <input matInput type="search" [matAutocomplete]="auto" cdkFocusInitial [placeholder]="'User'|translate" required formControlName=userId/>
+    <mat-autocomplete #auto="matAutocomplete" [displayWith]="display"
+                      (optionSelected)="change($event)">
+      <mat-option *ngFor="let u of users | async" [value]="u">{{u.name}}</mat-option>
+    </mat-autocomplete>
+    <mat-error *ngIf="form.controls.userId.hasError('required')">{{'Required'|translate:('User'|translate)}}</mat-error>
+  </mat-form-field>
+  <mat-checkbox formControlName=fyi> {{ 'FYI' | translate }}</mat-checkbox>
+  <mat-checkbox formControlName=forward> {{ 'Forward' | translate }}</mat-checkbox>
+  <mat-form-field>
+    <textarea matInput cdkTextareaAutosize formControlName="note" [placeholder]="'Note'|translate" maxlength="200">
+    </textarea>
+    <mat-hint align="end">{{form.controls['note'].value?.length || 0}} / {{200}}</mat-hint>
+  </mat-form-field>
+</form>

package/src/lib/compose/action/assign-action.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { Observable } from 'rxjs';
+import { filter, map, switchMap } from 'rxjs/operators';
+import { isString } from '../../core/functions';
+import { BizDoc } from '../../core/decorators';
+import { UserInfo } from '../../core/models';
+import { ArgumentsComponent } from '../../core/base';
+import { SessionService } from '../../core/session.service';
+import { AccountService } from '../../core/account.service';
+
+@Component({
+  templateUrl: './assign-action.component.html'
+})
+@BizDoc({
+  selector: 'bizdoc-action-assign'
+})
+export class AssignActionComponent implements ArgumentsComponent, OnInit {
+  readonly form = this._fb.group({
+    userId: this._fb.control(null, Validators.required),
+    fyi: this._fb.control(false),
+    forward: this._fb.control(false),
+    note: this._fb.control(null, Validators.maxLength(200))
+  });
+  users: Observable<UserInfo[]>;
+  constructor(private _fb: FormBuilder, private _session: SessionService, private _accounts: AccountService) {
+  }
+  ngOnInit(): void {
+    const me = this._session.userId;
+    this.users = this.form.controls['userId'].valueChanges.
+      pipe(filter(v =>
+        isString(v)),
+        switchMap(v =>
+          this._accounts.findAll(v).
+            pipe(map(r =>
+              r.filter(u => u.id !== me)))));
+  }
+  display(v: UserInfo) { v ? v.name : null };
+  change(evt: MatAutocompleteSelectedEvent) {
+    this.form.controls['userId'].setValue(evt.option.value.id);
+  }
+}

package/src/lib/compose/action/return-action.component.html

@@ -0,0 +1,13 @@
+<form autocomplete="off" fxLayout="column" [formGroup]="form">
+  <mat-form-field>
+    <mat-select formControlName="recipientId" cdkFocusInitial [placeholder]="'User'|translate" required>
+      <mat-option *ngFor="let r of recipients" [value]="r.id">{{r.userId | userName | async }}</mat-option>
+    </mat-select>
+    <mat-error *ngIf="form.controls.recipientId.hasError('required')">{{'Required'|translate:('User'|translate)}}</mat-error>
+  </mat-form-field>
+  <mat-form-field>
+    <textarea matInput cdkTextareaAutosize formControlName="note" [placeholder]="'Note'|translate" maxlength="200">
+    </textarea>
+    <mat-hint align="end">{{form.controls['note'].value?.length || 0}} / {{200}}</mat-hint>
+  </mat-form-field>
+</form>

package/src/lib/compose/action/return-action.component.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+import { BizDoc } from '../../core/decorators';
+import { ArgumentsComponent } from '../../core/base';
+import { Recipient } from '../../core/models';
+import { ActionRef } from './action-ref';
+import { SessionService } from '../../core/session.service';
+import { AccountService } from '../../core/account.service';
+
+@Component({
+  templateUrl: './return-action.component.html'
+})
+@BizDoc({
+  selector: 'bizdoc-action-return'
+})
+export class ReturnActionComponent implements ArgumentsComponent {
+  readonly recipients: Recipient[] = [];
+  constructor(private _fb: FormBuilder, actionRef: ActionRef, session: SessionService, accounts: AccountService) {
+    const me = session.profile.byId || session.profile.userId;
+    actionRef.item.recipients.
+      filter(r => r.userId !== me && !r.estimate && !r.pending).
+      reverse().forEach(r =>
+        this.recipients.findIndex(i => i.userId === r.userId) < 0 &&
+        this.recipients.splice(0, 0, r)
+      );
+  }
+  readonly form = this._fb.group({
+    recipientId: this._fb.control(null, Validators.required),
+    note: null
+  });
+}

package/src/lib/compose/attachments/attachments.component.html

@@ -0,0 +1,23 @@
+<div *ngFor="let a of attachments">
+  <button mat-button class="attachment-link" [matMenuTriggerFor]="attachment" [matTooltip]="a.time | amCalendar" [progressIndicator]="a.progress">
+    <mat-icon *ngIf="viewedIndicator && a.viewed">done_all</mat-icon>
+    <!--[matTooltip]="a.viewed | amCalendar"-->
+    <mat-icon>attachment</mat-icon>&nbsp;
+    <span [class.deleted]="a.deleted" [class.failed]="a.failed">{{a.fileName}}</span>
+  </button>
+  <mat-menu #attachment>
+    <ng-container *ngIf="!a.failed">
+      <button mat-menu-item (click)="download(a)">{{"Download" | translate}}</button>
+      <button mat-menu-item *ngIf="canPreview(a)" (click)="preview(a)"><mat-icon>landscape</mat-icon> {{"Preview" | translate}}</button>
+      <ng-container *ngIf="hasVersion(a)">
+        <mat-divider></mat-divider>
+        <button mat-menu-item *ngFor="let v of getVersions(a)" (click)="previewOrDownload(v)">{{v.time |  amCalendar}}</button>
+      </ng-container>
+      <ng-container *ngIf="canDelete(a)">
+        <mat-divider></mat-divider>
+        <button mat-menu-item (click)="discard(a)">{{"Discard" | translate}}</button>
+      </ng-container>
+    </ng-container>
+    <button mat-menu-item (click)="cancel(a)" *ngIf="a.failed">{{"Cancel" | translate}}</button>
+  </mat-menu>
+</div>

package/src/lib/compose/attachments/attachments.component.scss

@@ -0,0 +1,21 @@
+:host {
+  display: flex;
+  flex-flow: wrap;
+}
+.attachment-link {
+
+  &.failed {
+    color: red
+  }
+
+  .loading {
+  }
+  .deleted {
+    text-decoration:line-through
+  }
+}
+::ng-deep button .progress {
+  background-color: dimgray;
+  position: absolute;
+  height: 100%;
+}

package/src/lib/compose/attachments/attachments.component.ts

@@ -0,0 +1,103 @@
+import { Component, Input, Injector, ViewContainerRef, OnChanges } from '@angular/core';
+import { RecipientModel, Attachment } from '../../core/models';
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { AttachmentPreview, FILE_PREVIEW_DIALOG_DATA, PreviewData } from './preview/attachment-preview.component';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { PromptService } from '../../core/prompt.service';
+import { MailboxService } from '../../core/mailbox.service';
+import { SessionService } from '../../core/session.service';
+import { Directionality } from '@angular/cdk/bidi';
+import { AttachmentInfo } from '../../core/info/attachment-info.service';
+
+@Component({
+  selector: 'bizdoc-attachments',
+  templateUrl: './attachments.component.html',
+  styleUrls: ['./attachments.component.scss']
+})
+/** mail-attachments component*/
+export class AttachmentsComponent implements OnChanges {
+  @Input() model!: RecipientModel<any>;
+  @Input() viewedIndicator = true;
+  @Input() includeDeleted = false;
+  attachments: Attachment[];
+  /** mail-attachments ctor */
+  constructor(private _mailbox: MailboxService, private _session: SessionService,
+    private _vc: ViewContainerRef,
+    private _sb: PromptService, private _overlay: Overlay, private _injector: Injector, private _dir: Directionality) {
+  }
+  public ngOnChanges(): void {
+    const distinct: Attachment[] = [];
+    const sorted = this.model.attachments.sort((a1, a0) => a1.time > a0.time ? 1 : -1);
+    for (const file of sorted) {
+      if ((!file.deleted || this.includeDeleted) &&
+        !distinct.find(a => a.fileName === file.fileName)) 
+        distinct.push(file);
+    }
+    this.attachments = distinct;
+  }
+  hasVersion(item: Attachment): boolean {
+    return this.model.attachments.find(a => a.fileName === item.fileName && a != item) != null;
+  }
+  getVersions(item: Attachment): Attachment[] {
+    return this.model.attachments.filter(a => a.fileName === item.fileName && a != item);
+  }
+  download(item: Attachment) {
+    this._mailbox.download(this.model.documentId, item.id).subscribe(data => {
+      const blob = new Blob([data], { type: item.contentType });
+      if (typeof window.navigator.msSaveBlob !== 'undefined') { // IE
+        window.navigator.msSaveBlob(blob, item.fileName);
+      } else {
+        const url = window.URL.createObjectURL(blob);
+        const pwa = window.open(url);
+        if (!pwa || pwa.closed || typeof pwa.closed === 'undefined')
+          location.href = AttachmentInfo.formatUrl(this.model.documentId, item.id);
+      }
+      item.viewed = new Date();
+    });
+  }
+  previewOrDownload(item: Attachment) {
+    if (this.canPreview(item))
+      this.preview(item);
+    else
+      this.download(item);
+  }
+  canPreview(item: Attachment): boolean {
+    return AttachmentInfo.exists(item.contentType);
+  }
+  canDelete(item: Attachment): boolean {
+    return !this.model.completed && item.userId === this._session.profile.userId && !item.deleted;
+  }
+  preview(item: Attachment) {
+    const oRef = this._overlay.create({
+      positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
+      backdropClass: 'dark-backdrop',
+      hasBackdrop: true,
+      direction: this._dir.value
+    });
+    const injector = Injector.create([
+      { provide: FILE_PREVIEW_DIALOG_DATA, useValue: { file: item, documentId: this.model.documentId } as PreviewData},
+      { provide:OverlayRef, useValue:oRef}
+    ], this._injector);
+    const portal = new ComponentPortal(AttachmentPreview, this._vc, injector);
+    oRef.attach(portal);
+    item.viewed = new Date();
+  }
+  cancel(item: Attachment) {
+    this.model.attachments.remove(item);
+    this.ngOnChanges();
+  }
+  discard(item: Attachment) {
+    const task = () =>
+      this._mailbox.removeattachment(this.model.documentId, item.id).subscribe(() => {
+        //item.deleted = true;
+        this.model.attachments.remove(item);
+        this.ngOnChanges();
+      }, () =>
+        this._sb.error());
+    if (this.model.draft)
+      task();
+    else
+      this._sb.ask('DeleteFileAsk', 'DeleteFile', { color: 'warn' }).subscribe(ok =>
+        ok && task());
+  }
+}

package/src/lib/compose/attachments/preview/attachment-preview.component.html

@@ -0,0 +1,15 @@
+<div class="overlay-content" [@slideContent]="animationState" (@slideContent.start)="onAnimationStart($event)"
+ [dir]="dir" (@slideContent.done)="onAnimationDone($event)">
+  <div class="toolbar-wrapper" fxLayout="row" [@slideDown]="slideDown" *ngIf="!loading">
+    <button mat-icon-button (click)="close()" matTooltip="{{'Back' | translate}}"><mat-icon class="mat-icon-rtl-mirror">keyboard_arrow_left</mat-icon></button>
+    <span class="mat-body-1">{{data.file.fileName}}</span>
+    <span class="divider"></span>
+    <button mat-icon-button (click)="rotate()" matTooltip="{{'Rotate' | translate }}"><mat-icon>screen_rotation</mat-icon></button>
+    <button mat-icon-button (click)="download()" matTooltip="{{'Download' | translate}}"><mat-icon>save_alt</mat-icon></button>
+  </div>
+  <div class="spinner-wrapper" *ngIf="loading">
+    <mat-spinner></mat-spinner>
+  </div>
+  <object (load)="onLoad($event)" [data]="objectData" [type]="data.file.contentType" *ngIf="!isImage" #obj></object>
+  <img *ngIf="isImage" (load)="onLoad($event)" [style.opacity]="loading ? 0 : 1" [@fade]="loading ? 'fadeOut' : 'fadeIn'" [src]="objectData" #img>
+</div>

package/src/lib/compose/attachments/preview/attachment-preview.component.scss

@@ -0,0 +1,36 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/*:host ::ng-deep .fullscreen-panel {
+  width: 100%;
+  height: 100%;
+}*/
+
+.spinner-wrapper {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: -1;
+}
+
+img {
+  width: 100%;
+  max-width: 500px;
+  height: auto;
+}
+.overlay-content {
+  padding: 1em;
+
+  .toolbar-wrapper {
+    align-items: center;
+    color: whitesmoke
+  }
+}
+
+.divider {
+  flex: 1 1 auto
+}