@vgip/meta-ui 2.1.2 → 2.1.3

package/src/lib/fieldReference/index.ts

@@ -0,0 +1,871 @@
+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;
+      });
+    }
+  }
+
+}