@vgip/meta-ui 2.1.3 → 2.1.5

package/src/lib/resource/index.ts

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

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