@vgip/meta-ui 2.1.3 → 2.1.5

package/src/lib/fieldReference/index.ts

@@ -1,871 +0,0 @@
-import { Component, OnInit, ViewContainerRef } from '@angular/core';
-import { FieldAbstract } from '../fieldAbstract';
-import { ControlContainer, NgForm } from '@angular/forms';
-import { MetaReferenceService } from '../services/metaReference';
-import { Subject } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { MetaResourceService, IMetaResourceConfig } from '../services/metaResource';
-import { MetaRefDialog } from '../refDialog';
-import { MetaMsgService } from '../services/metaMsg';
-import { MetaContextService } from '../services/metaContext';
-import { IMetaTrackerEvent, MetaTrackerService } from '../services/metaTracker';
-
-@Component({
-    templateUrl: './view.html',
-    styleUrls: ['./style.scss'],
-    viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
-    standalone: false
-})
-export class FieldReference extends FieldAbstract implements OnInit {
-  input: any;
-  dropdown: HTMLElement;
-  dropdownScrollContainer: HTMLElement;
-  searching: boolean;
-  searchResourceType: any = {};
-  searchText: string;
-  searchResults: Array<any>;
-  searchError: any;
-  activeSuggestionIndex: number;
-  searchResourceTypesScope: string;
-  searchTextChanged: Subject<string> = new Subject<string>();
-  isCreatable = false;
-  value: any;
-  isPolymorphic: boolean;
-  isSearchable: boolean;
-  multiple: boolean;
-  vr: MetaResourceService;
-  externalLink: string;
-  dropdownVisible = false;
-  searchResourceTypeMeta: any = {
-    type: 'select',
-    name: 'resourceType',
-    label: 'Type',
-    options: [], // { label: '-- All types --' }],
-    standalone: true
-  };
-  filteredSuggestions: Array<any> = [];
-  placeHolderLabel: string;
-  asyncSuggestions: Array<any>;
-  smartSuggestions: Array<any> = [];
-
-  constructor(
-    private referenceService: MetaReferenceService,
-    private metaResource: MetaResourceService,
-    private metaMsgService: MetaMsgService,
-    private metaContext: MetaContextService,
-    private metaTracker: MetaTrackerService,
-    private viewContainerRef: ViewContainerRef
-  ) {
-    super();
-  }
-
-  get disabled() {
-    const superDisabled = this.logicalDisabled || this.validations.disabled || this.meta.disabled === true
-      || (this.meta.updatable === false && this.isPersistedParent);
-    this.searchResourceTypeMeta.disabled = superDisabled;
-    return superDisabled;
-  }
-
-  get showTypes() {
-    return (typeof (this.meta.showTypes) !== 'undefined') ? this.meta.showTypes : true;
-  }
-
-  get suggestions() {
-    return this.smartSuggestions.concat(
-      !this.searchResourceType.resourceType ?
-        // eslint-disable-next-line max-len
-        (this.asyncSuggestions || this.meta.suggestions || []) : (this.asyncSuggestions || this.meta.suggestions || []).filter((s) => s.type === this.searchResourceType.resourceType)
-    );
-  }
-
-  get hasAppendButton() {
-    if (!this.multiple && this.model) {
-      if (this.isPolymorphic) {
-        for (const ref of this.metaReference) {
-          if ((ref.name || ref.resourceType) === (this.model.type || this.model.resourceType)) {
-            return ref.updatable || (ref.creatable && ref.updatable !== false);
-          }
-        }
-      } else {
-        return this.metaReference.updatable || (this.metaReference.creatable && this.metaReference.updatable !== false); // VGIS-6911
-      }
-    } else if (this.metaReference instanceof Array) {
-      // setTimeout(() => {
-      // this.searchResourceTypesScope = this.metaReference.map(rt => rt.name).join(',');
-      // }, 0);
-      for (const rt of this.metaReference) {
-        if (rt.hidden !== false && rt.creatable) {
-          return true;
-        }
-      }
-    } else {
-      return this.metaReference.creatable;
-    }
-  }
-
-  get resourceService() {
-    if (!this.metaResourceService) {
-      const metaResourceConfig: IMetaResourceConfig = {
-        integrationCode: this.integrationCode,
-        resourceType: this.resourceType,
-        delegate: this.delegate
-      };
-      this.metaResourceService = this.metaResource.new(metaResourceConfig);
-    }
-    return this.metaResourceService;
-  }
-
-  get metaReference() {
-    return this.meta.reference || {};
-  }
-
-  ngOnInit() {
-    this.multiple = (this.meta.type === 'multireference') || this.meta.multiple;
-    this.searchResourceTypeMeta.label = this.meta.label;
-    if (!this.meta.valueType) {
-      // this.meta.valueType = 'object';
-      Object.defineProperty(this.meta, 'valueType', {
-        value: 'object'
-      });
-    }
-    if (this.metaReference instanceof Array) {
-      this.isPolymorphic = true;
-      this.isSearchable = true;
-      this.searchResourceTypesScope = this.metaReference.filter(rt => rt.hidden !== true).map(rt => rt.name).join(',');
-      for (const rt of this.metaReference) {
-        if (rt.creatable) {
-          this.isCreatable = true;
-          if (typeof (rt.searchable) !== 'undefined' && !rt.searchable) {
-            this.isSearchable = false;
-          }
-        }
-      }
-      this.metaReference.forEach((r) => {
-        if (!r.hidden) {
-          this.searchResourceTypeMeta.options.push({ id: r.name, label: r.label || r.name });
-        }
-      });
-    } else {
-      this.isSearchable = typeof (this.metaReference.searchable) === 'undefined' || this.metaReference.searchable;
-      this.searchResourceType = this.metaReference;
-      this.searchResourceTypesScope = this.metaReference.name || this.metaReference.resourceType;
-      this.isCreatable = this.metaReference.creatable;
-    }
-    this.buildPlaceholderLabel();
-    this.searchTextChanged.pipe(debounceTime(300), distinctUntilChanged()).subscribe((value: string) => {
-      this.searchText = value;
-      this.search();
-    });
-    const origValue = this.parent[this.meta.name];
-
-    // this.suggestions = this.meta.suggestions; // TODO filter by default type
-    // console.log('this.suggestions', this.suggestions);
-
-    Object.defineProperty(this.parent, this.meta.name, {
-      set: (value) => {
-        if (value === '') {
-          value = null;
-        }
-        if (this.multiple) {
-          if (value && value instanceof Array) {
-            for (const v of value) {
-              if (!this.model) {
-                this.model = [];
-              }
-              if (typeof (v) === 'string') {
-                this.model.push({
-                  id: v,
-                  label: v,
-                  type: this.metaReference.name
-                });
-              }
-            }
-          } else {
-            value = null; // protect when value from server is not array
-          }
-        } else {
-          if (typeof (value) === 'string') {
-            value = {
-              id: value,
-              label: value, // could be found with extra call
-              type: this.metaReference.name
-            };
-          }
-          this.searchText = value ?
-            ((!value.label || value.label === ' ') ? `N/A (${value.type}#${value.id})` : value.label || value) :
-            '';
-          // if (this.isPolymorphic && this.model) { //TODO show or not?
-          //   this.searchResourceType = this.metaReference.find((rt)=> {
-          //     return rt.name === this.model.type;
-          //   });
-          // }
-        }
-        this.model = value;
-        if (!this.multiple) {
-          this.value = this.modelToValue(value, this.meta.valueType || 'object');
-          this.buildExternalLink();
-        } else {
-          this.value = !this.model ? this.model : this.model.map((m) => this.modelToValue(m, this.meta.valueType || 'object'));
-        }
-        this.meta.$optional = this.isOptional;
-      },
-      get: () => this.value,
-      enumerable: this.sendToServer,
-      configurable: true
-    });
-    if (origValue) {
-      this.parent[this.meta.name] = origValue;
-    }
-    if (!this.model && this.default) {
-      if (this.multiple) {
-        this.parent[this.meta.name] = [];
-        if (this.default.length) {
-          for (const dv of this.default) {
-            if ((dv.id || dv.value) && dv.type) {
-              const item: any = {
-                id: dv.id || dv.value,
-                label: dv.label || dv.id || dv.value,
-                type: dv.type
-              };
-              if (dv.externalLink) {
-                item.externalLink = dv.externalLink;
-              }
-              this.parent[this.meta.name].push(item);
-            }
-          }
-        }
-        if (!this.parent[this.meta.name].length) {
-          this.clear();
-        }
-      } else {
-        if (this.default.id && this.default.label && this.default.type) {
-          setTimeout(() => {
-            if (!this.model) {
-              const item: any = {
-                id: this.default.id || this.default.value,
-                label: this.default.label || this.default.id || this.default.value,
-                type: this.default.type,
-                smart: true
-              };
-              if (this.default.externalLink) {
-                item.externalLink = this.default.externalLink;
-              }
-              this.parent[this.meta.name] = item;
-            }
-          }, 0);
-        } else {
-          console.warn('!!!default value is not valid format', this.meta);
-        }
-      }
-    }
-
-    if (typeof (this.meta.disabled) !== 'undefined') {
-      if (typeof (this.meta.disabled) === 'object') {
-        for (const p of Object.keys(this.meta.disabled)) {
-          const props = p.split('.');
-          if (typeof (this.parent[props[0]]) !== 'undefined') {
-            let val = this.parent;
-            for (const prop of props) {
-              val = val[prop];
-              if (!val) {
-                break;
-              }
-            }
-            if (val === this.meta.disabled[p]) {
-              this.logicalDisabled = true;
-              this.clear();
-            }
-          }
-          this.parentChangeSubject.subscribe((value) => {
-            if (value && value.hasOwnProperty(props[0])) {
-              let val = this.parent;
-              for (const prop of props) {
-                val = val[prop];
-                if (!val) {
-                  break;
-                }
-              }
-              if (val === this.meta.disabled[p]) {
-                this.logicalDisabled = true;
-                this.clear();
-              } else {
-                delete this.logicalDisabled;
-              }
-            }
-          });
-        }
-      }
-    }
-
-    if (this.meta.auto && this.meta.auto.search) {
-      const searchParams = this.meta.auto.search.params;
-      if (searchParams) {
-        for (const par of Object.keys(searchParams)) {
-          const props = searchParams[par].split('.');
-          const field = props[0];
-          const prop = props[1];
-          let parValue = this.parent[field];
-          if (parValue) {
-            if (prop) {
-              parValue = parValue[prop];
-            }
-            if (parValue) {
-              const params = {};
-              params[par] = parValue;
-              this.searchAutoSuggestions(params);
-            }
-          }
-          this.parentChangeSubject.subscribe((value) => {
-            if (value && value.hasOwnProperty(field)) {
-              if (value[field]) {
-                if (prop) {
-                  value[field] = value[field][prop];
-                }
-                const params = {};
-                params[par] = value[field];
-                this.searchAutoSuggestions(params);
-              }
-            }
-          });
-        }
-      }
-    }
-  }
-
-  clearSearchResourceType() {
-    this.searchResourceType = {};
-    this.onSearchResourceTypeChanged();
-  }
-
-  onSearchResourceTypeChanged(resourceType?) {
-    if (!resourceType || !resourceType.id) {
-      this.searchResourceType.resourceType = null;
-      this.searchResourceTypesScope = (this.metaReference || []).filter(rt => rt.hidden !== true).map(rt => rt.name).join(',');
-    } else {
-      this.searchResourceType.resourceType = resourceType.id;
-      this.searchResourceTypesScope = resourceType.id;
-    }
-    this.buildPlaceholderLabel();
-    this.focus();
-    if (!this.model && !this.searchText) { // filter suggestions by type
-      this.filteredSuggestions = !resourceType ? (this.meta.suggestions || []) : (this.meta.suggestions || []).filter(
-        (s) => s.type === resourceType.id
-      );
-    } else { // regular search (return scoped results)
-      if (!this.model) {
-        this.search();
-      } else if (this.searchResults && resourceType) {
-        this.searchResults = this.searchResults.filter((s) => s.type === resourceType.id);
-      }
-    }
-    delete this.searchError;
-  }
-
-  onSearchTextChanged(value: string) {
-    this.searchTextChanged.next(value);
-  }
-
-  search() {
-    this.searching = true;
-    // this.activeSuggestionIndex;
-    if (!this.searchText || this.searchText.length < 2) {
-      this.searching = false;
-      delete this.searchResults;
-      return;
-    }
-    const showSearchResults = (results) => {
-      this.searching = false;
-      delete this.searchError;
-      delete this.activeSuggestionIndex;
-      if (!results || !(results instanceof Array)) {
-        results = [];
-      }
-      if (this.meta.acceptNew && this.meta.acceptNew.type && this.meta.acceptNew.pattern) {
-        const regex = new RegExp(this.meta.acceptNew.pattern);
-        if (regex.test(this.searchText)) {
-          results.unshift({ id: null, label: this.searchText, type: this.meta.acceptNew.type });
-        }
-      }
-      this.searchResults = results.map((r) => { // eslint-disable-line arrow-body-style
-        return { id: r.id, label: r.label, type: r.type || r.resourceType || this.searchResourceType.name, externalLink: r.externalLink };
-      });
-      if (!/Vlt-dropdown--expanded/.test(this.dropdown.className)) {
-        this.showDropdown();
-      }
-    };
-
-    if (this.meta.search) {
-      const searchParams = this.meta.search.params || {};
-      let searchUrl = `/fields/${this.meta.name}/search`;
-      if (this.meta.search.url) {
-        searchUrl = this.meta.search.url.replace(/\${\s*([\w.]+)\s*}/g, (match, key) => {
-          if (searchParams.hasOwnProperty(key)) {
-            const props = searchParams[key].split('.');
-            const field = props[0];
-            const prop = props[1];
-            delete searchParams[key]; // if it is URL param, remove it as query param
-            let parValue = this.parent[field];
-            if (parValue) {
-              if (prop) {
-                parValue = parValue[prop];
-              }
-              if (parValue) {
-                return parValue;
-              }
-            }
-          }
-          return 'undefined';
-        });
-      }
-      for (const p of Object.keys(searchParams)) {
-        searchUrl += `${searchUrl.indexOf('?') === -1 ? '?' : '&'}${encodeURIComponent(p)}=${encodeURIComponent(searchParams[p])}`;
-      }
-      searchUrl += `${searchUrl.indexOf('?') === -1 ? '?' : '&'}q=${encodeURIComponent(this.searchText)}`;
-      this.searching = true;
-      this.resourceService.getByPath(searchUrl).subscribe((results) => {
-        showSearchResults(results);
-      }, (error) => {
-        delete this.searching;
-        this.searchResults = [];
-        this.searchError = error.error ? error.error.message || error.error : error.message || error;
-        if (!/Vlt-dropdown--expanded/.test(this.dropdown.className)) {
-          this.showDropdown();
-        }
-      });
-    } else {
-      if (!this.vr) {
-        this.vr = this.metaResource.new({
-          integrationCode: this.integrationCode,
-          resourceType: null,
-          delegate: this.delegate
-        });
-      }
-      this.vr.searchIntegration(
-        this.searchText,
-        this.searchResourceType.name || this.searchResourceTypesScope
-      ).subscribe((results: Array<any>) => {
-        showSearchResults(results);
-      }, (error) => {
-        this.searching = false;
-        this.searchResults = [];
-        this.searchError = error.error ? error.error.message || error.error : error.message || error;
-        if (!/Vlt-dropdown--expanded/.test(this.dropdown.className)) {
-          this.showDropdown();
-        }
-      });
-    }
-  }
-
-  onActivated(ev) {
-    // ev.preventDefault();
-    // ev.stopPropagation();
-    this.input = ev.srcElement;
-    if (!this.dropdown) {
-      // this.dropdown = ev.srcElement.parentNode.parentNode;
-      this.dropdown = this.elementRef.nativeElement.querySelector('.dropdown-wrapper');
-    }
-    this.showDropdown();
-  }
-
-  onBlur(ev) {
-    let internalControl = false;
-    if (ev.relatedTarget) {
-      if (!this.elementRef.nativeElement.contains(ev.relatedTarget)) {
-        this.dismissDropdown();
-      } else {
-        internalControl = true;
-      }
-    }
-    if (this.keyListenerActive && !internalControl) {
-      this.input.removeEventListener('keydown', this.keydown);
-      setTimeout(() => {
-        if (!this.keyListenerActive) {
-          document.removeEventListener('click', this.clickout);
-        }
-      }, 400);
-      delete this.keyListenerActive;
-    }
-  }
-
-  removeSelection(ev?) {
-    if (ev) {
-      ev.preventDefault();
-      ev.stopPropagation();
-    }
-    if (this.model && !this.suggestions.find((s) => (s.id === this.model.id && s.type === this.model.type))) {
-      this.smartSuggestions.push({
-        id: this.model.id,
-        label: this.model.label,
-        type: this.model.type,
-        smart: true
-      });
-    }
-    this.metaTracker.emit(this.buildTrackEvent('REMOVE'));
-    this.clear();
-  }
-
-  onSuggestionSelect(ev, suggestion) {
-    if (!suggestion) {
-      return;
-    }
-    ev.preventDefault();
-    ev.stopPropagation();
-    this.focus();
-    this.metaTracker.emit(this.buildTrackEvent('SELECT'));
-    if (this.multiple) {
-      if (!this.model) {
-        this.model = [];
-      }
-      let existingEntry;
-      for (const entry of this.model) {
-        if (suggestion.id && (entry.id === suggestion.id)) {
-          existingEntry = entry;
-          break;
-        } else if (suggestion.label === entry.label) { // create new (google emails)
-          existingEntry = entry;
-          break;
-        }
-      }
-      if (!existingEntry) {
-        this.model.push(suggestion);
-      }
-      this.onModelChange(this.model);
-      delete this.searchText;
-      this.searchTextChanged.next(this.searchText);
-    } else {
-      this.model = suggestion;
-      this.externalLink = suggestion.externalLink;
-      this.onModelChange(suggestion);
-      this.searchText = suggestion.label;
-      this.activeSuggestionIndex = (this.searchResults || this.suggestions).indexOf(suggestion);
-    }
-    this.dismissDropdown();
-    // if (this.isPolymorphic) {
-    //   this.searchResourceType = this.metaReference.find((rt)=> {
-    //     return rt.name === suggestion.type;
-    //   });
-    // }
-  }
-
-  showDropdown() {
-    if (this.disabled) {
-      return;
-    }
-    this.dropdownVisible = true;
-    this.dropdown.classList.add('Vlt-dropdown--expanded');
-    if (!this.keyListenerActive) {
-      this.input.addEventListener('keydown', this.keydown);
-      setTimeout(() => {
-        document.addEventListener('click', this.clickout);
-      }, 200);
-      this.keyListenerActive = true;
-    }
-    if (typeof (this.activeSuggestionIndex) === 'undefined') {
-      if (this.model && (this.searchResults || this.suggestions)) {
-        for (let suggestionIndex = 0; suggestionIndex < (this.searchResults || this.suggestions).length; suggestionIndex++) {
-          const item = (this.searchResults || this.suggestions)[suggestionIndex];
-          if (this.model.id === item.id && this.model.type === item.type) {
-            this.activeSuggestionIndex = suggestionIndex;
-            break;
-          }
-        }
-      }
-    }
-    this.ensureDropdownIsVisible();
-  }
-
-  dismissDropdown(event?) {
-    this.dropdownVisible = false;
-    if (event) {
-      this.focus();
-    }
-    if (this.dropdown) {
-      this.dropdown.classList.remove('Vlt-dropdown--expanded');
-    }
-  }
-
-  clear() {
-    this.prevModel = this.model;
-    delete this.searchText;
-    delete this.searchResults;
-    delete this.model;
-    delete this.activeSuggestionIndex;
-    this.onModelChange(this.model);
-    this.onSearchTextChanged(this.searchText);
-    this.focus();
-  }
-
-  revert() {
-    this.model = this.prevModel;
-    delete this.prevModel;
-    this.onModelChange(this.model);
-    this.focus();
-  }
-
-  remove(ev, item) {
-    ev.preventDefault();
-    ev.stopPropagation();
-    const optionIndex = this.model.indexOf(item);
-    if (optionIndex !== -1) {
-      this.model.splice(optionIndex, 1);
-      if (!this.model.length) {
-        delete this.model;
-        delete this.value;
-      }
-      this.onModelChange(this.model);
-    }
-  }
-
-  openResource(model?) {
-    this.keyListenerActive = true; // suppress dropdown in this case
-    setTimeout(() => {
-      this.dismissDropdown();
-    });
-    const refDialogComponent = this.viewContainerRef.createComponent(MetaRefDialog);
-    this.metaTracker.emit(this.buildTrackEvent(model ? 'EDIT' : 'NEW'));
-    let theme = this.elementRef.nativeElement.dataset.theme;
-    if (!theme || theme === 'inherit') {
-      let parentComponent = this.elementRef.nativeElement.closest('vgip-meta-layout');
-      if (parentComponent) {
-        theme = parentComponent.dataset.theme;
-      }
-      if (!theme || theme === 'inherit') {
-        parentComponent = this.elementRef.nativeElement.closest('vgip-meta-resource');
-        if (parentComponent) {
-          theme = parentComponent.dataset.theme;
-        }
-      }
-    }
-    this.referenceService.openDialog(
-      refDialogComponent, this.metaResource, this.integrationCode,
-      (this.metaReference instanceof Array) ? this.metaReference.filter(rt => rt.hidden !== true) : this.metaReference,
-      model, null, this.searchResourceType.resourceType, theme, this.overlayContainer
-    ).subscribe((result: any) => {
-      if (result) {
-        this.parent[this.meta.name] = result;
-        this.onChange.emit(result);
-        const existingSuggestion = (this.meta.suggestions || []).find((s) => (s.id === result.id && s.type === result.type));
-        if (existingSuggestion) {
-          existingSuggestion.label = result.label;
-        } else {
-          if (!this.meta.suggestions) {
-            this.meta.suggestions = [];
-          }
-          this.meta.suggestions.unshift(result);
-        }
-        this.metaTracker.emit(this.buildTrackEvent(model ? 'UPDATE' : 'CREATE', result.type || result.resourceType));
-      } else {
-        this.metaTracker.emit(this.buildTrackEvent(model ? 'CANCEL_EDIT' : 'CANCEL_UPDATE'));
-      }
-    });
-  }
-
-  private ensureDropdownIsVisible() {
-    setTimeout(() => {
-      const holder = this.dropdown.closest('.Vlt-card__content, .Vlt-modal__content');
-      if (holder) {
-        const el = this.elementRef.nativeElement.querySelector('.Vlt-dropdown__panel');
-        const elRect = el.getBoundingClientRect();
-        const holderRect = holder.getBoundingClientRect();
-        if (holderRect.top + holderRect.height < elRect.top + elRect.height) {
-          el.scrollIntoView({ block: 'end' });
-        }
-      }
-    }, 400);
-  }
-
-  private ensureDropdownOptionIsVisible() {
-    if (!this.dropdownScrollContainer) {
-      this.dropdownScrollContainer = this.dropdown.querySelector('.Vlt-dropdown__scroll');
-    }
-    if (this.dropdownScrollContainer && typeof (this.activeSuggestionIndex) === 'number') {
-      const scrollTop = 44 * this.activeSuggestionIndex;
-      const scrollBottom = 44 * (this.activeSuggestionIndex - 7);
-      if (scrollTop < this.dropdownScrollContainer.scrollTop) {
-        this.dropdownScrollContainer.scrollTop = scrollTop;
-      } else if (scrollBottom > this.dropdownScrollContainer.scrollTop) {
-        this.dropdownScrollContainer.scrollTop = scrollBottom;
-      }
-    }
-  }
-
-  private clickout = (event) => {
-    const internalControl = this.elementRef.nativeElement.contains(event.target);
-    if (internalControl && ['Vlt-dropdown__link', 'Vlt-dropdown__block'].indexOf(event.target.className) !== -1) {
-      this.focus();
-    } else if (!internalControl && event.target !== this.input && event.target.className !== 'Vlt-dropdown__title') {
-      this.dismissDropdown();
-    } else {
-      if (!internalControl && internalControl.tagName !== 'INPUT') {
-        this.focus();
-      }
-    }
-  };
-
-  private buildTrackEvent(action: string, value?: string) {
-    const e: IMetaTrackerEvent = {
-      integration: this.integrationCode,
-      resource: this.model ? (this.model.type || this.model.resourceType) : this.searchResourceType.resourceType,
-      field: this.meta.name,
-      action
-    };
-    if (this.meta.$isContactable) {
-      e.isContactable = true;
-    }
-    if (typeof (value) !== 'undefined') {
-      e.value = value;
-    }
-    return e;
-  }
-
-  private buildPlaceholderLabel() {
-    this.placeHolderLabel = this.meta.label;
-    if (this.multiple && !this.isPolymorphic) {
-      this.placeHolderLabel = '+Add ';
-    } else {
-      this.placeHolderLabel = (this.isSearchable && (this.multiple || !this.isPolymorphic)) ? 'Search ' : '';
-    }
-    this.placeHolderLabel += this.searchResourceType.resourceType ? this.searchResourceType.resourceType : this.searchResourceTypesScope;
-  }
-
-  private keydown = (event) => {
-    switch (event.key) {
-      case 'ArrowDown': {
-        this.showDropdown();
-        if (typeof (this.activeSuggestionIndex) === 'undefined') {
-          this.activeSuggestionIndex = 0;
-        } else {
-          this.activeSuggestionIndex++;
-          if (this.activeSuggestionIndex >= (this.searchResults || this.suggestions).length) {
-            this.activeSuggestionIndex = 0;
-          }
-        }
-        this.ensureDropdownOptionIsVisible();
-        event.preventDefault();
-        event.stopPropagation();
-        break;
-      }
-      case 'ArrowUp': {
-        this.showDropdown();
-        if (typeof (this.activeSuggestionIndex) === 'undefined') {
-          this.activeSuggestionIndex = (this.searchResults || this.suggestions).length - 1;
-        } else {
-          this.activeSuggestionIndex--;
-          if (this.activeSuggestionIndex < 0) {
-            this.activeSuggestionIndex = (this.searchResults || this.suggestions).length - 1;
-          }
-        }
-        this.ensureDropdownOptionIsVisible();
-        event.preventDefault();
-        event.stopPropagation();
-        break;
-      }
-      case 'Space':
-      case 'Enter': {
-        if (typeof (this.activeSuggestionIndex) !== 'undefined') {
-          event.preventDefault();
-          event.stopPropagation();
-          this.onSuggestionSelect(event, (this.searchResults || this.suggestions)[this.activeSuggestionIndex]);
-          delete this.activeSuggestionIndex;
-        }
-        break;
-      }
-      case 'Escape': {
-        event.preventDefault();
-        event.stopPropagation();
-        this.dismissDropdown();
-        break;
-      }
-      case 'Backspace': {
-        if (!this.multiple && this.model) { // HPBR-8229
-          event.preventDefault();
-          event.stopPropagation();
-          this.removeSelection();
-        }
-        break;
-      }
-    }
-  };
-
-  private buildExternalLink() {
-    if (this.model) {
-      if (this.model.externalLink) {
-        this.externalLink = this.model.externalLink;
-      } else if (this.metaContext.profiles[this.integrationCode.toUpperCase()]) {
-        delete this.externalLink;
-        this.metaMsgService.sendMessage(
-          this.integrationCode.toUpperCase(),
-          {
-            action: 'buildExternalLink',
-            integrationCode: this.integrationCode,
-            ref: this.model,
-            profile: this.metaContext.profiles[this.integrationCode.toUpperCase()]
-          },
-          (response) => {
-            if (!response.error) {
-              this.externalLink = response.externalLink;
-            } else {
-              console.warn('No external link support for', this.integrationCode, this.model.resourceType || this.model.type);
-            }
-          }
-        );
-      }
-    } else {
-      delete this.externalLink;
-    }
-  }
-
-  private searchAutoSuggestions(params?) {
-    let searchUrl = `/suggestions/${this.meta.name}/search`;
-    if (this.meta.auto && this.meta.auto.search) {
-      if (this.meta.auto.search.url) {
-        searchUrl = this.meta.auto.search.url.replace(/\${\s*([\w.]+)\s*}/g, (match, key) => {
-          if (params.hasOwnProperty(key)) {
-            const val = params[key];
-            delete params[key];
-            return val;
-          }
-          return '';
-        });
-      }
-      for (const p of Object.keys(params)) {
-        searchUrl += `${searchUrl.indexOf('?') === -1 ? '?' : '&'}${encodeURIComponent(p)}=${encodeURIComponent(params[p])}`;
-      }
-      this.searching = true;
-      this.resourceService.getByPath(searchUrl).subscribe((result) => {
-        delete this.searching;
-        if (result) {
-          let suggestions;
-          suggestions = result;
-          if (this.meta.auto.search.extract) {
-            suggestions = result[this.meta.auto.search.extract];
-          }
-          if (suggestions instanceof Array !== true) {
-            suggestions = [suggestions];
-          }
-          const asyncSuggestions = [];
-          suggestions.forEach((s) => {
-            if (s && s.id && s.type) { // TOOD check the type is acceptable
-              asyncSuggestions.push({
-                id: s.id,
-                label: s.label || `${s.type}#${s.id}`,
-                type: s.type
-              });
-            }
-          });
-          if (asyncSuggestions.length) {
-            if (asyncSuggestions.length === 1) {
-              this.parent[this.meta.name] = asyncSuggestions[0];
-            } else {
-              delete this.asyncSuggestions;
-            }
-          }
-          this.asyncSuggestions = asyncSuggestions;
-        }
-      }, () => {
-        delete this.searching;
-      });
-    }
-  }
-
-}