@vgip/meta-ui 2.1.3 → 2.1.5

package/src/lib/refDialog/index.ts

@@ -1,157 +0,0 @@
-import { Component, ElementRef, OnInit } from '@angular/core';
-import { metaDark, metaLight } from '../common/utils/colorThemes';
-import { MetaResourceService } from '../services/metaResource';
-
-@Component({
-    templateUrl: './view.html',
-    styleUrls: ['./style.scss'],
-    standalone: false
-})
-export class MetaRefDialog implements OnInit {
-  modal: HTMLElement;
-  onComplete: (result?) => undefined;
-  fullResource: any;
-  resources: any = {};
-  models: any = {};
-  reference: any;
-  currentResource: string;
-  services: any = {};
-  integrationCode: string;
-  resource: any;
-  metaResource: MetaResourceService;
-  integrationIcon: string;
-  preferResourceType: string;
-  theme: string;
-
-  constructor(
-    private el: ElementRef
-  ) { }
-
-  get isEditable() {
-    return this.resources[this.currentResource].meta.layout.editable !== false;
-  }
-
-  get isPersistent() {
-    return this.resource && (this.resource.externalId || this.resource.id);
-  }
-
-  ngOnInit() {
-    let references = (this.reference instanceof Array) ? this.reference : [this.reference];
-    /* eslint-disable no-underscore-dangle */
-    if (this.resource && this.resource._vgis) {
-      this.fullResource = this.resource;
-      this.resource = this.resource._vgis;
-    }
-    /* eslint-enable no-underscore-dangle */
-    if (this.resource) {
-      references = references.filter((r) => {
-        const resType = r.name || r.resourceType || '';
-        // comparing case insensitive, because of Zendesk comment vs Comment
-        return (resType.id || resType || '').toLowerCase() === (this.resource.resourceType || this.resource.type || '').toLowerCase();
-      });
-    }
-
-    for (const ref of references) {
-      if (!ref.name) {
-        ref.name = ref.resourceType; // when the resource comes from resources API, not from metadata
-      }
-      if (!this.currentResource) {
-        this.currentResource = ref.name;
-      }
-      if (ref.name === this.preferResourceType) {
-        this.currentResource = this.preferResourceType;
-      }
-      const rs: any = {
-        integrationCode: this.integrationCode,
-        resourceType: ref.resourceType || ref.name,
-        ref
-      };
-      if (this.resource) {
-        rs.externalId = this.resource.id || this.resource.externalId;
-        if (this.resource.eventId) {
-          rs.eventId = this.resource.eventId;
-        }
-        if (this.fullResource) {
-          rs.activity = this.fullResource;
-        }
-        if (this.resource.layoutId) {
-          rs.layoutId = this.resource.layoutId;
-        }
-      }
-      rs.parent = ref.parent;
-      this.resources[ref.name] = rs;
-      this.models[ref.name] = {};
-      if (this.resource) {
-        this.models[ref.name]._vgis = this.resource; // eslint-disable-line no-underscore-dangle
-      }
-    }
-
-    this.modal = this.el.nativeElement.childNodes[0];
-    this.modal.classList.remove('Vlt-modal--out');
-    this.modal.classList.add('Vlt-modal_visible');
-    document.addEventListener('keydown', this.keyEventListener);
-
-    if (this.integrationCode === 'mocks') {
-      this.integrationIcon = 'Brand-icon-vonage';
-    } else {
-      switch (this.integrationCode.toLowerCase()) {
-        case 'office365':
-          this.integrationIcon = 'Brand-icon-office-color';
-          break;
-        case 'sugar':
-          this.integrationIcon = 'Brand-icon-sugarcrm-color';
-          break;
-        case 'msdynamics':
-          this.integrationIcon = 'Brand-icon-dynamics-color';
-          break;
-        default:
-          this.integrationIcon = `Brand-icon-${(this.integrationCode || '').toLowerCase()}-color`;
-      }
-    }
-
-    this.applyTheme();
-  }
-
-  close() {
-    this.modal.classList.remove('Vlt-modal_visible');
-    this.modal.classList.add('Vlt-modal--out');
-  }
-
-  dismiss(ev?) {
-    this.close();
-    this.onComplete(null);
-    if (ev) {
-      ev.preventDefault();
-      ev.stopPropagation();
-      return false;
-    }
-  }
-
-  onResourceDone(result) {
-    this.close();
-    this.onComplete(result);
-  }
-
-  selectResource(ev, resource) {
-    this.currentResource = resource;
-    ev.preventDefault();
-    ev.stopPropagation();
-    return false;
-  }
-
-  keepOrder = (a) => a;
-
-  private keyEventListener = (event) => {
-    if (event && event.key === 'Escape') {
-      document.removeEventListener('keydown', this.keyEventListener);
-      this.dismiss();
-    }
-  };
-
-  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]);
-    }
-  }
-}

package/src/lib/refDialog/style.scss

@@ -1,154 +0,0 @@
-.Vlt-modal_visible {
-  background: var(--vgip-meta-overlay-background);
-}
-.Vlt-modal__panel {
-  padding: 0;
-  // border: 1px solid var(--vgip-meta-separator-color);
-  background: var(--vgip-meta-resource-bg-color);
-  overflow: hidden;
-  @media only screen and (max-width: 575px) {
-    height: 100%;
-    width: 100%;
-    max-height: none;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    margin: 10px 6px 0 6px;
-    ::ng-deep .busy-mask {
-      min-height: calc(100vh - 58px);
-    }
-  }
-  .Vlt-tabs__header--background {
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-  }
-  .Vlt-tabs__header {
-    background: var(--vgip-meta-resource-bar-color);
-    padding-left: 52px;
-    padding-right: 45px;
-    border-bottom: 0;
-    flex-wrap: wrap;
-    min-height: 52px;
-    max-height: 52px;
-    align-items: center;
-    > .Vlt-icon {
-      position: absolute;
-      left: 14px;
-    }
-    h5 {
-      margin-bottom: 0;
-      font-weight: initial;
-    }
-    .Vlt-tabs__link {
-      padding-top: 4px;
-      padding-bottom: 2px;
-      color: var(--vgip-meta-input-label-color);
-      text-transform: capitalize;
-    }
-    .Vlt-tabs__link_active {
-      color: var(--vgip-meta-input-accent-color);
-      &:after {
-        background: var(--vgip-meta-input-accent-color);
-      }
-    }
-    .Vlt-modal__dismiss {
-      background-image: none;
-      width: 18px;
-      height: 18px;
-      opacity: initial;
-      svg {
-        width: 16px;
-        height: 16px;
-        fill: var(--vgip-meta-input-label-color);
-      }
-      &:hover svg {
-        fill: var(--vgip-meta-input-accent-color);
-      }
-    }
-    &::-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-tabs__content {
-    margin-top: 0;
-    // border-top: 1px solid #e7ebee;
-    .Vlt-tabs__link {
-      font-size: 1.8rem;
-    }
-  }
-  .Vlt-callout--banner {
-    // padding-left: 16px;
-    // padding-right: 20px;
-    -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-modal__cancel {
-    z-index: 899;
-  }
-  .Vlt-modal__dismiss {
-    right: 16px;
-    top: 14px;
-    // color: #c4cdd5;
-    // &:hover {
-    //   color: #f8fafc;
-    // }
-    // background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2048.2%20(47327)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eicn-close%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Modals---Desktop%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20transform%3D%22translate(-512.000000%2C%20-62.000000)%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Modal%22%20transform%3D%22translate(156.000000%2C%2040.000000)%22%20fill%3D%22%23f8fafc%22%20fill-rule%3D%22nonzero%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icn-close%22%20transform%3D%22translate(356.000000%2C%2022.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-12%22%20transform%3D%22translate(2.083333%2C%202.500000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Path-252%22%20points%3D%221.42258898%2015.115968%2015.115968%201.42258898%2013.9374567%200.244077682%200.244077682%2013.9374567%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Path-252-Copy%22%20points%3D%220.244077682%201.42258898%2013.9374567%2015.115968%2015.115968%2013.9374567%201.42258898%200.244077682%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E');
-  }
-  .Vlt-card__footer button {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-  .Vlt-select select:disabled {
-    background: initial;
-    cursor: not-allowed;
-  }
-  ::ng-deep .form-content {
-    min-height: 0;
-    max-height: calc(95vh - 172px);
-    @media only screen and (max-width: 575px) {
-      min-height: calc(100vh - 113px);
-    }
-  }
-}
-
-.resource-menu {
-  button {
-    margin: 0 -10px 0;
-    &:not(:hover) .Vlt-icon {
-      color: #616266;
-      fill: #616266;
-    }
-  }
-}
-
-.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;
-  }
-}

package/src/lib/refDialog/view.html

@@ -1,24 +0,0 @@
-<div class='Vlt-modal Vlt-modal--large'>
-  <div class="Vlt-modal__panel">
-    <div class="Vlt-tabs">
-      <div class='Vlt-tabs__header--background'>
-        <div class="Vlt-tabs__header Vlt-tabs__header--shadow">
-          <svg class="Vlt-icon" [ngStyle]="{fill: integrationIcon === 'Brand-icon-vonage' ? 'var(--vgip-meta-input-color)' : ''}"><use attr.xlink:href="volta/volta-brand-icons.svg#{{integrationIcon}}" /></svg>
-          <a href='#' *ngFor='let r of resources | keyvalue: keepOrder' (click)='selectResource($event, r.key)' class="Vlt-tabs__link" [ngClass]="{ 'Vlt-tabs__link_active': currentResource === r.key}">
-            {{r.key}}
-          </a>
-          <a href='#' class="Vlt-modal__dismiss" (click)="dismiss($event)">
-            <svg class="Vlt-icon"><use xlink:href="volta/volta-icons.svg#Vlt-icon-cross" /></svg>
-          </a>
-        </div>
-      </div>
-      <div class="Vlt-tabs__content" style='min-height: 90px;'>
-        <ng-container *ngFor='let r of resources | keyvalue: keepOrder'>
-          <div *ngIf='currentResource === r.key' class="Vlt-tabs__panel Vlt-tabs__panel_active">
-            <vgip-meta-resource [resource]='r.value' [model]='models[r.key]' [metaResourceServiceDelegated]='metaResource' (done)='onResourceDone($event)' theme='inherit' [attr.data-theme]='theme'></vgip-meta-resource>
-          </div>
-        </ng-container>
-      </div>
-    </div>
-  </div>
-</div>