@vgip/meta-ui 2.1.2 → 2.1.3

package/src/lib/resource/index.ts

@@ -0,0 +1,559 @@
+import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { MetaResourceService } from '../services/metaResource';
+import { metaDark, metaLight } from '../common/utils/colorThemes';
+import { MetaContextService } from '../services/metaContext';
+import { MetaMsgService } from '../services/metaMsg';
+import { metaNormalizer } from '../common/metaNormalizer';
+import { templateBuilder } from '../common/utils/templateBuilder';
+import { Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+@Component({
+    selector: 'vgip-meta-resource',
+    templateUrl: './view.html',
+    styleUrls: ['./style.scss'],
+    standalone: false
+})
+export class MetaResource implements OnInit, OnChanges {
+  @Input() resource: any;
+  @Input() model: any;
+  @Input() metaResourceServiceDelegated: MetaResourceService; // cary it from the parent to keep the interceptors
+  @Input() theme: string;
+  @Input() editMode = true;
+  @Output() public done = new EventEmitter();
+  @Output() public resourceChange = new EventEmitter();
+
+  @ViewChild('resourceForm') public resourceForm: NgForm;
+
+  integrationCode: string;
+  resourceType: string;
+  meta: any;
+  service: MetaResourceService;
+  currentLayoutId: any;
+  formErrors: any;
+  fieldsMap: any;
+  edit = true;
+  busy: boolean;
+  metaLoading: boolean;
+  generalError: string;
+  resourceMenuVisible: boolean;
+  contactsSuggestionsDone = false;
+  isEditable: boolean;
+  isPersistent: boolean;
+  lockedLayoutId: string;
+  resourceChanged: Subject<string> = new Subject<string>();
+  resourceVrn: string;
+  skipLayoutMatchCheck: boolean;
+
+  constructor(
+    private ref: ChangeDetectorRef,
+    private el: ElementRef,
+    private metaResourceService: MetaResourceService,
+    private metaContext: MetaContextService,
+    private metaMsgService: MetaMsgService
+  ) {
+
+  }
+
+  get niceFields() {
+    if (
+      !this.resource.niceFields
+      && this.resource.meta
+      && this.resource.meta.layout
+      && this.resource.meta.layout.sections
+    ) {
+      const extractSectionFields = (s) => {
+        for (const f of s.fields) {
+          if (f.name) {
+            this.resource.niceFields[f.name] = f;
+          }
+          if (f.fields && f.fields.length) {
+            extractSectionFields(f);
+          }
+        }
+      };
+      this.resource.niceFields = {};
+      for (const s of this.resource.meta.layout.sections) {
+        extractSectionFields(s);
+      }
+    }
+    return this.resource.niceFields;
+  }
+
+  get fieldNames() {
+    const names = Object.keys(this.niceFields);
+    if (this.resource.meta.layout.children) {
+      for (const child of this.resource.meta.layout.children) {
+        names.push(child.name);
+      }
+    }
+    return names;
+  }
+
+  ngOnInit() {
+    this.integrationCode = (this.resource.integrationCode || '').toUpperCase();
+    this.resourceType = this.resource.resourceType;
+    this.service = (this.metaResourceServiceDelegated || this.metaResourceService).new(this.resource);
+    if (!this.model) {
+      this.model = {};
+    }
+    this.isPersistent = this.resource?.externalId;
+    if (this.isPersistent) {
+      this.resourceVrn = `vrn:vgis:${this.integrationCode.toLowerCase()}:${this.resource.resourceType}:${this.resource.externalId}`;
+    }
+    if (this.resource.activity && this.resource.ref.editable === false && !this.resource.externalId) {
+      this.resource.externalId = 'MISSING_EXTERNAL_ID';
+    }
+    if (!this.resource.meta) {
+      this.loadMetadata(this.resource.layoutId);
+    } else {
+      //   if (this.isPersistent && (!this.isEditable || this.resources[ref.name].meta.layout.children)) {
+      //     this.edit = false;
+      //   }
+      this.meta = this.resource.meta;
+      this.isEditable = this.meta.layout && this.meta.layout.editable !== false;
+      if (this.isPersistent && (!this.isEditable || this.editMode === false || this.meta.layout.children)) {
+        this.edit = false;
+      }
+      this.currentLayoutId = this.meta.layout.id;
+      this.getDetails();
+      this.getFieldsMap();
+    }
+    if (this.theme !== 'inherit') {
+      this.applyTheme();
+    }
+    this.resourceChanged.pipe(debounceTime(400), distinctUntilChanged()).subscribe((value: string) => {
+      this.resourceChange.emit(value);
+    });
+  }
+
+  ngOnChanges(changes: any) {
+    if (changes.theme) {
+      this.theme = changes.theme.currentValue;
+      if (this.theme !== 'inherit') {
+        this.applyTheme();
+      }
+    }
+  }
+
+  setEditMode() {
+    this.edit = true;
+  }
+
+  loadMetadata(layoutId?, refresh = false, ev?) {
+    const layoutStoreKey = `vgis.layout_${this.metaContext.vgipUserId}_${this.integrationCode}_${this.resource.resourceType}`;
+    if (!layoutId) {
+      layoutId = localStorage.getItem(layoutStoreKey);
+    }
+    this.busy = true;
+    setTimeout(() => {
+      this.metaLoading = true;
+    }, 0);
+    delete this.resource.niceFields;
+    this.service.getMetadata(layoutId, refresh).subscribe({
+      next: (meta: any) => {
+        this.currentLayoutId = meta.layout.id || '';
+        if (this.currentLayoutId.indexOf(this.lockedLayoutId) === -1) {
+          delete this.lockedLayoutId;
+        }
+        if (layoutId !== meta.layout.id && !this.isPersistent) {
+          localStorage.removeItem(layoutStoreKey);
+        }
+        this.meta = metaNormalizer(meta, this.integrationCode, this.resource.resourceType);
+        this.isEditable = this.meta.layout && this.meta.layout.editable !== false;
+        this.resource.meta = this.meta;
+        if (!refresh && this.isPersistent && (!this.isEditable || this.editMode === false || this.meta.layout.children)) {
+          this.edit = false;
+        }
+        delete this.busy;
+        this.getDetails();
+        this.getFieldsMap();
+      },
+      error: (metaError: any) => {
+        delete this.busy;
+        this.generalError = `Error loading resource metadata (${metaError.statusText})`;
+        localStorage.removeItem(layoutStoreKey);
+      },
+      complete: () => {
+        delete this.metaLoading;
+        this.forceUiUpdate();
+      }
+    });
+    if (ev) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      return false;
+    }
+  }
+
+  changeLayout() {
+    localStorage.setItem(
+      `vgis.layout_${this.metaContext.vgipUserId}_${this.integrationCode}_${this.resource.resourceType}`,
+      this.currentLayoutId
+    );
+    this.loadMetadata(this.currentLayoutId);
+  }
+
+  getDetails() {
+    delete this.lockedLayoutId;
+    if (this.resource && (this.resource.externalId || this.resource.id)) {
+      if (this.resource.parent && this.resource.activity // skip fetch
+        && this.meta.layout.editable === false && !this.meta.layout.children
+      ) {
+        for (const p in this.resource.activity) {
+          if (this.resource.activity[p] && this.fieldNames.indexOf(p) !== -1) {
+            this.model[p] = this.resource.activity[p];
+          }
+        }
+      } else {
+        this.busy = true;
+        this.service.getDetails(
+          (this.resource.externalId || this.resource.id), {
+          eventId: this.resource.eventId !== 'NO_EVENT' ? this.resource.eventId : null, layoutId: this.resource.layoutId
+        }
+        ).subscribe({
+          next: (resource: any) => {
+            /* eslint-disable no-underscore-dangle */
+            if (resource._vgis) {
+              if (resource._vgis.eventId) {
+                this.metaContext.vgipEventId = resource._vgis.eventId;
+              }
+              this.lockedLayoutId = resource._vgis.layoutId || resource._vgis.recordTypeId
+              // sample orig layoutId: 012000000000000AAA, custom layoutId: 66ccbb3d1810985aa3a16202:012000000000000AAA
+              // so if the current layout is not inherited from the original one, reload the orig meta
+              // CCOMNI-155 - allow form layout change (*unless we are certain that the current and locked match)
+              if (!this.skipLayoutMatchCheck && this.lockedLayoutId && (this.currentLayoutId || '').indexOf(this.lockedLayoutId) === -1) {
+                this.skipLayoutMatchCheck = true; // ensure prevent HPBR-8782 loop condition
+                if ((this.meta.availableLayouts || []).find((l: any) => (l.id || '').indexOf(this.lockedLayoutId) !== -1 )) { // if it's not available, don't even try
+                  this.loadMetadata(this.lockedLayoutId);
+                } else {
+                  console.warn('Unable to match layout Ids', this.lockedLayoutId, this.currentLayoutId)
+                }
+              }
+            }
+            /* eslint-enable no-underscore-dangle */
+            for (const p in resource) {
+              if ((typeof (resource[p]) !== 'undefined') && (this.fieldNames.indexOf(p) !== -1 || p === '_vgis')) {
+                this.model[p] = resource[p];
+              }
+            }
+            delete this.busy;
+          },
+          error: (resourceError) => {
+            this.generalError = resourceError.error ? resourceError.error.message || resourceError.message : resourceError.message;
+            delete this.busy;
+          },
+          complete: () => {
+            this.forceUiUpdate();
+          }
+        });
+      }
+    } else {
+      if (this.resource.ref && this.resource.ref.activity) { // reuse failed autoactivities data
+        for (const p in this.resource.ref.activity) {
+          if (this.resource.ref.activity && this.fieldNames.indexOf(p) !== -1) {
+            this.model[p] = this.resource.ref.activity[p]; // VGIS-7215 (copy only valid fields)
+          }
+        }
+      }
+      this.performAutoFill();
+    }
+  }
+
+  performAutoFill() {
+    this.metaMsgService.sendMessage(
+      this.integrationCode,
+      {
+        action: 'autoFill',
+        integration: this.integrationCode,
+        resourceType: this.resourceType,
+        resource: JSON.parse(JSON.stringify(this.model)),
+        fields: this.niceFields,
+        event: this.metaContext.context,
+        profile: this.metaContext.profiles[this.integrationCode]
+      },
+      (response) => {
+        if (!response.error) {
+          for (const afp in response.autoFill) {
+            if (!this.model[afp]) {
+              this.model[afp] = response.autoFill[afp];
+            }
+          }
+        }
+      }
+    );
+  }
+
+  getFieldsMap() {
+    if (this.meta.fieldsMap) {
+      this.fieldsMap = this.meta.fieldsMap;
+      this.markContactables();
+      this.buildContactsSuggestions();
+      if (!this.resource.externalId) {
+        this.buildSubjectTemplate();
+        this.execTransformer();
+      }
+    } else {
+      this.metaMsgService.sendMessage(
+        this.integrationCode,
+        { action: 'fieldsMap', integration: this.integrationCode, resourceType: this.resourceType },
+        (response) => {
+          if (!response.error) {
+            this.fieldsMap = response.fieldsMap;
+            this.markContactables();
+            this.buildContactsSuggestions();
+            if (!this.resource.externalId) {
+              this.buildSubjectTemplate();
+              this.execTransformer();
+            }
+          } else {
+            console.log('No fields map', this.integrationCode, this.resourceType, response.error);
+          }
+        }
+      );
+    }
+  }
+
+  openResourceMenu() {
+    this.resourceMenuVisible = true;
+    setTimeout(() => {
+      document.addEventListener('click', this.onMenuClickout);
+    }, 10);
+  }
+
+  close(result?) {
+    this.done.emit(result);
+  }
+
+  showParsedError(resourceForm, parsedError) {
+    this.formErrors = parsedError.message || 'There is a problem with one or more fields';
+    if (parsedError.errors && parsedError.errors.length) {
+      this.formErrors += ` (${parsedError.errors.map(e => e.message).join(', ')})`;
+      for (const pe of parsedError.errors) {
+        if (resourceForm.controls[pe.field]) {
+          resourceForm.controls[pe.field].setErrors({ invalid: true, custom: pe.message });
+        }
+      }
+      setTimeout(() => {
+        const firstInvalid: HTMLInputElement = this.el.nativeElement.querySelector('.Vlt-form__element--error .main:not(.standalone)');
+        if (firstInvalid) {
+          firstInvalid.focus();
+        }
+      });
+    }
+  }
+
+  submit(resourceForm) {
+    delete this.formErrors;
+    resourceForm.form.submitted = true;
+    if (resourceForm.valid) {
+      this.busy = true;
+      /* eslint-disable no-underscore-dangle */
+      if (!this.model._vgis) {
+        this.model._vgis = {
+          connector: this.integrationCode,
+          resourceType: this.resourceType
+        };
+      }
+      this.model._vgis.layoutId = this.currentLayoutId;
+      if (this.metaContext.vgipEventId) {
+        this.model._vgis.eventId = this.metaContext.vgipEventId;
+      }
+      /* eslint-enable no-underscore-dangle */
+      this.service.save(this.model).subscribe((result: any) => {
+        this.model = result;
+        this.resource.externalId = result._vgis.externalId; // eslint-disable-line no-underscore-dangle
+        this.resourceVrn = `vrn:vgis:${this.integrationCode.toLowerCase()}:${this.resource.resourceType}:${this.resource.externalId}`;
+        this.isPersistent = true;
+        this.close(result);
+        this.edit = false;
+        delete this.busy;
+      }, (errorResult) => {
+        if ((errorResult.status === 422 && errorResult.error && !errorResult.error.errors && errorResult.error.integrationError)
+          || (errorResult.error && errorResult.error.errors && errorResult.error.errors.length && !errorResult.error.errors[0].field)
+          // backend implemented error parsing but broken VGIS-7366
+        ) {
+          this.formErrors = 'There is a problem with one or more fields';
+          try {
+            this.metaMsgService.sendMessage(
+              this.integrationCode,
+              {
+                action: 'parseErrorMessage',
+                integrationCode: this.integrationCode,
+                resourceType: errorResult.error.resourceType,
+                rawError: errorResult.error.integrationError,
+                profile: this.metaContext.profiles[this.integrationCode.toUpperCase()]
+              },
+              (response) => {
+                if (response.parsedError) {
+                  this.showParsedError(resourceForm, response.parsedError);
+                } else {
+                  // eslint-disable-next-line no-underscore-dangle
+                  console.error('No error parser for', this.integrationCode, errorResult.error.integrationError);
+                  this.formErrors = errorResult.error;
+                }
+              }
+            );
+          } catch (err) {
+            console.log('....', err);
+          }
+        } else if (errorResult.status === 422) {
+          this.showParsedError(resourceForm, errorResult.error);
+        } else {
+          this.formErrors = errorResult.error;
+        }
+        delete this.busy;
+      });
+    } else {
+      this.formErrors = Object.keys(resourceForm.controls)
+        .filter((c) => resourceForm.controls[c].invalid)
+        .map((f) => (this.niceFields[f] ? (this.niceFields[f].label || f) : f)).join(', ');
+      setTimeout(() => {
+        const selector = `form[name="${this.resourceType}"] .Vlt-form__element--error .main:not(.standalone)`;
+        const firstInvalid: HTMLInputElement = this.el.nativeElement.querySelector(selector);
+        if (firstInvalid) {
+          firstInvalid.focus();
+        }
+      });
+    }
+  }
+
+  clearFormErrors() {
+    delete this.formErrors;
+  }
+
+  onFormChange() {
+    this.resourceChanged.next(JSON.stringify(this.model));
+  }
+
+  private onMenuClickout = () => {
+    delete this.resourceMenuVisible;
+    document.removeEventListener('click', this.onMenuClickout);
+  };
+
+  private suggestFieldProperty(key, value) {
+    if (key && value) {
+      const fieldNames = this.fieldNames;
+      if (this.model) {
+        const nestMatch = key.match(/(\S+)\[\d\]\.(\S+)/);
+        if (nestMatch && fieldNames.indexOf(nestMatch[1]) !== -1) {
+          const nestKeys: any = {};
+          nestKeys[nestMatch[2]] = value;
+          this.model[nestMatch[1]] = [nestKeys];
+        } else if (fieldNames.indexOf(key) !== -1) {
+          this.model[key] = value;
+        }
+      }
+    }
+  }
+
+  private execTransformer() {
+    if (this.metaContext && this.fieldsMap) {
+      setTimeout(() => {
+        this.suggestFieldProperty(this.fieldsMap.phoneNumber, this.metaContext.phoneNumber);
+        if (this.fieldsMap.firstName || this.fieldsMap.lastName) {
+          const names = (this.metaContext.displayName || '').split(' ');
+          this.suggestFieldProperty(this.fieldsMap.firstName, names[0]);
+          this.suggestFieldProperty(this.fieldsMap.lastName, names[1]);
+        } else if (this.fieldsMap.displayName) {
+          this.suggestFieldProperty(this.fieldsMap.displayName, this.metaContext.displayName);
+        }
+      }, 100);
+    }
+  }
+
+  private markContactables() {
+    if (this.fieldsMap.contactables && this.fieldsMap.contactables.length) {
+      for (const c of this.fieldsMap.contactables) {
+        const field = this.niceFields[c];
+        if (field) {
+          Object.defineProperty(field, '$isContactable', {
+            value: true,
+            configurable: true,
+            enumerable: false
+          });
+        }
+      }
+    }
+  }
+
+  private buildSubjectTemplate() {
+    if (!this.model[this.fieldsMap.subject] && this.fieldsMap.subject && this.niceFields[this.fieldsMap.subject]) {
+      let subjectTemplate: string;
+      if (this.niceFields[this.fieldsMap.subject].default) {
+        subjectTemplate = this.niceFields[this.fieldsMap.subject].default.id || this.niceFields[this.fieldsMap.subject].default;
+      } else if (this.metaContext.profiles[this.integrationCode]) {
+        const profile = this.metaContext.profiles[this.integrationCode] || {};
+        subjectTemplate = profile.defaultSubject ?
+          (profile.defaultSubject[(this.metaContext.context?.type || 'CALL').toUpperCase()] || profile.defaultSubject.CALL) :
+          profile.activityDefaultSubjectTemplate;
+      }
+      if (subjectTemplate) {
+        this.model[this.fieldsMap.subject] = templateBuilder(this.metaContext, subjectTemplate);
+      }
+    }
+  }
+
+  private buildContactsSuggestions() {
+    // let hasDefaultContact = false;
+    if (this.metaContext.contactables[this.integrationCode] && this.meta.layout && this.meta.layout.sections) {
+      for (const s of this.meta.layout.sections) {
+        for (const f of (s.fields || [])) {
+          if (f.type === 'reference') {
+            if (!f.suggestions) {
+              f.suggestions = [];
+            } else {
+              f.suggestions = f.suggestions.filter(sg => !sg.auto); // keep meta suggestions if any
+            }
+            const refTypes = (f.reference.length ? f.reference : [f.reference]).map(r => r.name);
+            for (const c of this.metaContext.contactables[this.integrationCode]) {
+              if (refTypes.indexOf(c.resourceType || c.type) !== -1) {
+                let tLabel = c.displayName || c.name;
+                if (c.phoneNumbers) {
+                  tLabel += (' ✆' + c.phoneNumbers.map(p => p.phoneNumber).join(','));
+                }
+                f.suggestions.push({
+                  id: c.externalId || c.identifier || c.id,
+                  label: tLabel,
+                  type: c.resourceType || c.type,
+                  auto: true
+                });
+              }
+            }
+            if ((this.fieldsMap.contactables || []).indexOf(f.name) !== -1) { // evaluate usability?
+              f.alwaysVisible = true;
+            }
+            // if (
+            //   !hasDefaultContact && this.metaContext.defaultContactables[this.integrationCode]
+            //   && refTypes.indexOf(this.metaContext.defaultContactables[this.integrationCode].type) !== -1
+            // ) {
+            //   this.resource[f.name] = this.metaContext.defaultContactables[this.integrationCode];
+            //   hasDefaultContact = true;
+            // } else if (!hasDefaultContact && this.fieldsMap.contactables && f.suggestions && f.suggestions.length === 1) {
+            //   if (this.fieldsMap.contactables.indexOf(f.name) !== -1 && !f.default) {
+            //     f.default = f.suggestions[0];
+            //     hasDefaultContact = true;
+            //   }
+            // }
+          }
+        }
+      }
+      this.contactsSuggestionsDone = true;
+    }
+  }
+
+  private applyTheme() {
+    const metaTheme = this.theme === 'dark' ? metaDark : metaLight;
+    for (const key of Object.keys(metaTheme.properties)) {
+      this.el.nativeElement.style.setProperty(key, metaTheme.properties[key]);
+    }
+  }
+
+  private forceUiUpdate() { // iOS webview does not update the UI after asyc changes. Temp fix :(
+    // this.ref.detectChanges();
+    const e = document.createEvent('Events');
+    e.initEvent('click', true, false);
+    this.el.nativeElement.dispatchEvent(e);
+  }
+}

package/src/lib/resource/style.scss

@@ -0,0 +1,132 @@
+:host {
+  // height: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  color: var(--vgip-meta-resource-color);
+}
+.Vlt-callout--banner {
+  -webkit-box-pack: initial;
+  justify-content: initial;
+  text-align: initial;
+  overflow-y: auto;
+  &.Vlt-callout--dismissed {
+    padding: 0;
+  }
+  &:not(.Vlt-callout--dismissed) {
+    min-height: 78px;
+  }
+}
+.Vlt-spinner:before, .Vlt-spinner:after {
+  border: 6px solid #616266;
+  border-color: #616266 transparent transparent;
+}
+
+.Vlt-card__content {
+  padding: 8px 8px 8px 16px; 
+  display: flex; 
+  flex-direction: column; 
+  min-height: 0; 
+  flex: 1; 
+  overflow-y: scroll; 
+  overflow-x: hidden;
+  background-color: var(--vgip-meta-resource-bg-color);
+  @media (hover:none) { // fix zooming on iOS
+    padding-right: 16px;
+  }
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--vgip-meta-scrollbar-color);
+    border: 2px solid transparent;
+    border-radius: 6px;
+    background-clip: content-box;
+  }
+}
+
+.Vlt-card__footer {
+  background: var(--vgip-meta-resource-bar-color);
+  border-top: 1px solid var(--vgip-meta-separator-color);
+  display: flex;
+  flex-direction: row;
+  margin: 16px -24px -24px -24px;
+  padding: 8px 8px 8px 16px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
+  z-index: 1;
+  .Vlt-select select {
+    color: var(--vgip-meta-input-color);
+    &:disabled {
+      background: initial;
+      cursor: not-allowed;
+    }
+  }
+  .Vlt-select:after {
+    background-image: var(--vgip-meta-dropdown-icon);
+  }
+  .resource-menu .Vlt-icon:not(:hover) {
+    fill: var(--vgip-meta-input-label-color);
+  }
+  button.Vlt-btn--secondary {
+    border: none;
+    &:not([type='submit']) {
+      color: var(--vgip-meta-input-color);
+    }
+    box-shadow: inset 0 0 0 1px var(--vgip-meta-button-border-color);
+    &:hover {
+      &[type='submit'] {
+        background-color: var(--vgip-meta-submit-hover-bg-color);
+      }
+      box-shadow: inset 0 0 0 1px var(--vgip-meta-input-accent-color);
+    }
+  }
+}
+
+.Vlt-progress {
+  margin: 0;
+  position: sticky;
+  .Vlt-progress__bar {
+    width: 0;
+    transition: width 5s;
+    &.loading {
+      width: 100%;
+    }
+  }
+}
+
+form {
+  border-radius: 6px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+  .form-content {
+    margin: -24px -24px -16px -24px;
+    padding-bottom: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    // min-height: 0;
+  }
+}
+
+.busy-mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(0,0,0,.32);
+  opacity: 1;
+  z-index: 898;
+  display: none;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+  margin: 1px;
+  cursor: progress;
+  &.active {
+    display: block;
+  }
+}