@vgip/meta-ui 1.7.4 → 1.7.6

package/fesm2022/vgip-meta-ui-index-1799a060.mjs

@@ -0,0 +1,864 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Injectable, Component } from '@angular/core';
+import { F as FieldAbstract } from './vgip-meta-ui-fieldAbstract-9955be39.mjs';
+import * as i2 from '@angular/forms';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { M as MetaRefDialog, b as MetaReferenceService, a as MetaResourceService, f as MetaMsgService } from './vgip-meta-ui-index-46c7f4e4.mjs';
+import { M as MetaContextService } from './vgip-meta-ui-index-ea5c2466.mjs';
+import * as i1 from '@angular/common';
+import { M as MetaField } from './vgip-meta-ui-index-aa21fd6a.mjs';
+import { M as MetaModelPipe } from './vgip-meta-ui-metaModel.pipe-6b803e66.mjs';
+
+/*
+ * @Author: Alexander.Vangelov@vonage.com
+ * @Date: 2019-09-19 17:35:19
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2020-03-23 17:08:23
+ */
+class MetaTrackerService {
+    constructor() {
+        this.events = new EventEmitter();
+    }
+    emit(event) {
+        if (!event.integration) {
+            event.integration = this.integrationCode || 'N/A';
+        }
+        if (!event.resource) {
+            event.resource = this.resourceType || 'N/A';
+        }
+        this.events.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MetaTrackerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MetaTrackerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MetaTrackerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class FieldReference extends FieldAbstract {
+    constructor(referenceService, metaResource, metaMsgService, metaContext, metaTracker, viewContainerRef) {
+        super();
+        this.referenceService = referenceService;
+        this.metaResource = metaResource;
+        this.metaMsgService = metaMsgService;
+        this.metaContext = metaContext;
+        this.metaTracker = metaTracker;
+        this.viewContainerRef = viewContainerRef;
+        this.searchResourceType = {};
+        this.searchTextChanged = new Subject();
+        this.isCreatable = false;
+        this.dropdownVisible = false;
+        this.searchResourceTypeMeta = {
+            type: 'select',
+            name: 'resourceType',
+            label: 'Type',
+            options: [],
+            standalone: true
+        };
+        this.filteredSuggestions = [];
+        this.smartSuggestions = [];
+        this.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();
+                }
+            }
+        };
+        this.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;
+                }
+            }
+        };
+    }
+    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 = {
+                integrationCode: this.integrationCode,
+                resourceType: this.resourceType
+            };
+            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) => {
+            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,
+                            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 = {
+                                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 = {
+                                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) {
+        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) => {
+                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
+                });
+            }
+            this.vr.searchIntegration(this.searchText, this.searchResourceType.name || this.searchResourceTypesScope).subscribe((results) => {
+                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() {
+        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) => {
+            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'));
+            }
+        });
+    }
+    ensureDropdownIsVisible() {
+        setTimeout(() => {
+            const holder = this.dropdown.closest('.Vlt-card__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);
+    }
+    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;
+            }
+        }
+    }
+    buildTrackEvent(action, value) {
+        const e = {
+            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;
+    }
+    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;
+    }
+    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;
+        }
+    }
+    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;
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: FieldReference, deps: [{ token: MetaReferenceService }, { token: MetaResourceService }, { token: MetaMsgService }, { token: MetaContextService }, { token: MetaTrackerService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: FieldReference, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class='vgip-meta-field-preview' *ngIf='preview && model && (!multiple || (multiple && model.length))'>\n  <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n  <div *ngIf='!multiple' class='vgip-meta-field-value __gu' [ngClass]=\"{ 'has-external-link': externalLink || model.externalLink }\">\n    <svg class=\"Vlt-icon Vlt-icon--smaller\" style='margin-top: -3px;'>\n      <use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\" />\n    </svg>\n    {{model.label || model.id}} <span class='Vlt-grey'>({{model.type}})</span>\n  </div>\n  <div *ngIf='multiple' class='vgip-meta-field-value __gu'>\n    <span *ngFor='let m of (model || [])' class='Vlt-badge Vlt-badge--app'>\n      {{m.label || m.id || m}} <span class='Vlt-grey-dark' *ngIf='isPolymorphic'>({{m.type}})</span>\n    </span>\n  </div>\n  <a [href]='externalLink || model.externalLink' target='_blank' rel='noopener'\n    *ngIf='externalLink && (model && !multiple)' class=\"Vlt-composite__append--icon preview\" aria-label='Open external'>\n    <div class=\"Vlt-composite__icon\">\n      <svg>\n        <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-open\" />\n      </svg>\n    </div>\n  </a>\n</div>\n<div *ngIf='!preview' class=\"meta-field-reference Vlt-form__element Vlt-form__element--big\"\n  [ngClass]=\"{ 'Vlt-form__element--error': (searchError && keyListenerActive) || (f.invalid && ((f | metaModel)._parent.submitted || (ft | metaModel ).touched)), 'multiple': multiple, 'has-value': model, active: keyListenerActive }\">\n  <div *ngIf='multiple' class='items-container' [ngClass]='{ creatable: isCreatable }'>\n    <div *ngIf='model' class='badges-container keep-focus' (click)='focus()' style='width: 100%;'> <!-- eslint-disable-line -->\n      <div *ngFor='let item of model' class=\"Vlt-badge Vlt-badge--app Vlt-badge--large keep-focus\" [ngClass]=\"{ grid: (item.label || item.id || '').length > 56}\">\n        <span class='Vlt-truncate'>{{item.label || item.id || item }} <span *ngIf='isPolymorphic' class='Vlt-grey-dark' style='font-weight: normal;'>({{item.type}})</span></span>\n        <button class=\"Vlt-badge__dismiss keep-focus\" (click)='remove($event, item)' style='position: absolute; right: 12px; top: 8px;' aria-label='Remove'></button>\n      </div>\n    </div>\n  </div>\n  <div class=\"Vlt-composite\">\n    <div class='dropdown-wrapper Vlt-dropdown' style='width: 100%; position: absolute; top: 48px;'>\n      <div class=\"Vlt-dropdown__panel\">\n        <div *ngIf='searchError'>\n          <div class=\"Vlt-callout Vlt-callout--critical keep-focus\">\n            <i></i>\n            <div class=\"Vlt-callout__content\">{{searchError}}</div>\n          </div>\n        </div>\n        <div *ngIf='!searchError && (suggestions.length || searchResults)' [ngClass]=\"{ suggestions: !searchResults}\"\n          class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area\" style='padding: 0;'>\n          <div class=\"Vlt-dropdown__block\"></div>\n          <div *ngIf='!searchResults' class=\"Vlt-dropdown__scroll\">\n            <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i, smart: suggestion.smart }\" (click)='onSuggestionSelect($event, suggestion)' *ngFor='let suggestion of suggestions; let i = index'  class=\"Vlt-dropdown__link has-type\">\n              <svg class='Vlt-icon  Vlt-icon--small'><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\"/></svg>\n              <div class='__gu' [title]='suggestion.label'>{{ suggestion.label }}</div>\n              <small class='Vlt-grey-dark' style='text-transform: capitalize;'>{{suggestion.type}}</small>\n            </a>\n          </div>\n          <div *ngIf='searchResults' class=\"Vlt-dropdown__scroll\">\n            <div *ngIf='!searchResults.length' class='Vlt-dropdown__block'> No records matching '<b style='pointer-events: none;'>{{searchText}}</b>' were found.</div>\n            <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i }\" (click)='onSuggestionSelect($event, suggestion)' *ngFor='let suggestion of searchResults; let i = index'  class=\"Vlt-dropdown__link has-type\">\n              <svg class='Vlt-icon Vlt-icon--small'><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\"/></svg>\n              <div class='__gu' [title]='suggestion.label'>{{ suggestion.label }}</div>\n              <small class='Vlt-grey-dark' style='text-transform: capitalize;'>{{suggestion.type}}</small>\n            </a>\n          </div>\n          <!-- <div *ngIf='searchResults' class=\"Vlt-dropdown__block\" style='text-align: right; padding-top: 0;'>\n            <small>\n              {{ searchResults ? searchResults.length+' results' : 'Suggestions' }} <span style='font-style: italic; font-weight: normal;' *ngIf='searchResults'>~{{ model ? 'last search' : searchText}}</span>\n            </small>\n          </div> -->\n          <div class=\"Vlt-dropdown__block\"></div>\n        </div>\n      </div>\n    </div>\n    <div class=\"Vlt-composite__prepend\"\n      *ngIf='isPolymorphic && showTypes && (multiple || !model || (dropdownVisible && ((suggestions || searchResults || []).length || searchResourceType.resourceType)))'>\n      <div class=\"search-scope\" [ngClass]=\"{ 'has-value': searchResourceType.resourceType }\">\n        <vgip-meta-field class='shown' [meta]='searchResourceTypeMeta' [parent]='searchResourceType'\n          (onChange)='onSearchResourceTypeChanged($event)' (onLeave)='onBlur($event)'\n          [integrationCode]='integrationCode' theme='inherit'></vgip-meta-field>\n        <svg class='Vlt-icon Vlt-grey Vlt-icon--smaller visible-mobile mobile-icon'\n          style='position: absolute; top: 15px; left: 14px; pointer-events: none;'>\n          <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-menu\" />\n        </svg>\n      </div>\n    </div>\n    <div *ngIf='!(isPolymorphic && showTypes && (multiple || !model || dropdownVisible))'>\n      <!-- required by css -->\n    </div>\n    <div class=\"Vlt-composite__wrapper Vlt-input\" style='overflow: hidden;'\n      [ngClass]=\"{ 'has-append-button': hasAppendButton && !disabled, 'vgip-disable': disabled }\">\n      <label class='wrapper'>\n        <div class=\"Vlt-composite__prepend Vlt-composite__prepend--icon\" style='top: 0; padding-top: 15px;'>\n          <div class=\"Vlt-composite__icon\">\n            <svg *ngIf='isSearchable && (!model || multiple)' class='Vlt-grey'>\n              <use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ multiple ? 'stack' : 'search'}}\" />\n            </svg>\n            <svg *ngIf='!isSearchable || (model && !multiple)'\n              [ngStyle]=\"{fill: integrationIcon === 'Brand-icon-vonage' ? 'var(--vgip-meta-input-color)' : ''}\">\n              <use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\" />\n            </svg>\n          </div>\n          <div *ngIf='suggestions.length' class=\"Vlt-badge Vlt-badge--small Vlt-badge--purple\"\n            style='padding: 0px 4px; position: absolute; top: 26px; left: 4px; pointer-events: none; min-width: 14px;'>\n            {{suggestions.length}}</div>\n        </div>\n        <input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n        <input class='main' [readonly]='!isSearchable || (model && !multiple)' [ngModel]='searchText' #ft='ngModel' (ngModelChange)='onSearchTextChanged($event)' [ngModelOptions]=\"{standalone: true}\" type=\"text\" placeholder=\"{{ placeHolderLabel || ' ' }}\" [ngClass]='{ ext: externalLink }' (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)' [disabled]='disabled' [title]=\"model ? model.label : ''\"/>\n        <label class='Vlt-truncate hidden-mobile' style='padding-left: 25px; padding-right: 42px;'>{{ (multiple && isPolymorphic) ? '+Add ' : ((model || !isPolymorphic) ? meta.label : ( meta.searchLabel || 'Search')) }}<span *ngIf='validations.required' class='Vlt-red'>*</span>&nbsp;<span style='color: var(--vgip-meta-input-color); text-transform: capitalize;' *ngIf='model'>({{model.type || model.resourceType || model.length}})</span></label> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n        <label class='Vlt-truncate hidden-desktop' style='padding-left: 25px; padding-right: 42px;'>{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span>&nbsp;<span style='color: var(--vgip-meta-input-color); text-transform: capitalize;' *ngIf='model'>({{model.type || model.resourceType || model.length}})</span></label> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n      </label>\n      <div *ngIf='searching' class='search-progress'>\n        <div class=\"container\">\n          <div class=\"bar Vlt-bg-purple\"></div>\n        </div>\n      </div>\n      <div class='Vlt-composite__append right-actions'>\n        <!-- <div *ngIf='prevModel && !model' class=\"Vlt-composite__append--icon\" (click)='revert()'>\n          <div class=\"Vlt-composite__icon\">\n            <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-reply\"/></svg>\n          </div>\n        </div> -->\n        <a href='#' *ngIf='model && !multiple' class=\"Vlt-composite__append--icon\" (click)='removeSelection($event)'>\n          <div class=\"Vlt-composite__icon\">\n            <svg>\n              <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\" />\n            </svg>\n          </div>\n        </a>\n        <a [href]='externalLink || model.externalLink' target='_blank' rel='noopener' *ngIf='externalLink && (model && !multiple)' class=\"Vlt-composite__append--icon\" aria-label='Open external'>\n          <div class=\"Vlt-composite__icon\">\n            <svg>\n              <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-open\" />\n            </svg>\n          </div>\n        </a>\n      </div>\n    </div>\n    <!-- <span *ngIf='hasCreatables'>\n      <button type='button' *ngIf='!model || multiple' (click)='openResource()' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--icon Vlt-btn--large\" style='margin-left: 12px;'>\n        <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>\n      </button>\n      <button type='button' *ngIf='model && !multiple' (click)='openResource(model)' class=\"Vlt-btn Vlt-btn--primary Vlt-btn--icon Vlt-btn--large\" style='margin-left: 12px;'>\n        <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-edit\"/></svg>\n      </button>\n    </span> -->\n    <div *ngIf='hasAppendButton && !disabled' class=\"Vlt-composite__append\">\n      <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' *ngIf='!model || multiple'\n        (click)='openResource()' class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon\" aria-label='Add new'>\n        <svg>\n          <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\" />\n        </svg>\n      </button>\n      <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' *ngIf='model && !multiple'\n        (click)='openResource(model)' class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon\" aria-label='Edit'>\n        <svg>\n          <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-edit\" />\n        </svg>\n      </button>\n    </div>\n  </div>\n  <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((ft | metaModel).touched && keyListenerActive))'\n    class=\"Vlt-form__element__error\">\n    <span *ngIf=\"f.errors.required\">Required</span>\n    <span *ngIf=\"f.errors.pattern\">Should match '{{validations.pattern}}' pattern</span>\n    <span *ngIf=\"f.errors.custom\">{{f.errors.custom}}&nbsp;</span>\n  </small>\n  <small *ngIf='meta.helpText || meta.hint' class=\"Vlt-form__element__hint\">{{meta.helpText || meta.hint}}</small>\n</div>\n", styles: [".Vlt-form__element--big .Vlt-input input:placeholder-shown:not(:focus)~label.Vlt-truncate{font-size:1.6rem;margin-top:-.8rem;top:50%}.Vlt-form__element--big ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-right:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.Vlt-form__element--big:hover .items-container,.Vlt-form__element--big:hover .main,.Vlt-form__element--big:hover .Vlt-composite__append button,.Vlt-form__element--big:hover ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone,.Vlt-form__element--big.active .items-container,.Vlt-form__element--big.active .main,.Vlt-form__element--big.active .Vlt-composite__append button,.Vlt-form__element--big.active ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.Vlt-form__element--error .items-container,.Vlt-form__element--big.Vlt-form__element--error .main,.Vlt-form__element--big.Vlt-form__element--error .Vlt-composite__append button,.Vlt-form__element--big.Vlt-form__element--error ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:#f25a6b}.Vlt-form__element--big.multiple .Vlt-composite.Vlt-dropdown{margin-top:3px}.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .Vlt-composite__append button,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .Vlt-composite__append button,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .items-container{background-color:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color);border-bottom:0;border-top-left-radius:6px;border-top-right-radius:6px}.Vlt-form__element--big.multiple .items-container .badges-container{overflow:auto;padding:6px 4px 3px 6px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge{margin-bottom:3px;margin-left:0;margin-right:3px;overflow:hidden;max-width:100%;position:relative;padding-right:30px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge.grid{display:grid}.Vlt-form__element--big.multiple:not(.has-value) .items-container{border:0}.Vlt-form__element--big.multiple.has-value .main,.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button,.Vlt-form__element--big.multiple.has-value ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-top-left-radius:0;border-top-right-radius:0;height:48px}.Vlt-form__element--big.multiple.has-value .main:not(.Vlt-btn--icon),.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button:not(.Vlt-btn--icon),.Vlt-form__element--big.multiple.has-value ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone:not(.Vlt-btn--icon){border-top:0}.Vlt-form__element--big.multiple.has-value .Vlt-composite__prepend ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-top-right-radius:6px}.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button{border-top-left-radius:6px;border-top:0}.Vlt-composite__prepend{z-index:initial}.Vlt-composite__prepend--icon{top:0;padding-top:15px;left:3px}.Vlt-input.has-append-button .Vlt-composite__append.right-actions{right:0}.Vlt-input.has-append-button .Vlt-composite__append.right-actions .Vlt-composite__append--icon:last-child{width:36px}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:5px;cursor:pointer}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:var(--vgip-meta-input-accent-color)}.vgip-disable .Vlt-composite__append{cursor:not-allowed;pointer-events:none}.Vlt-composite__append--icon.preview{bottom:initial;padding:0 2px}.Vlt-composite__append button{height:48px;padding-right:16px;background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);padding-left:16px;border-left:0}.Vlt-composite__append button:hover{background:var(--vgip-meta-input-action-hover-bg-color)}.Vlt-composite__append button svg{margin:-2px 0 0;fill:var(--vgip-meta-input-accent-color)}.Vlt-input input{padding-left:38px;text-overflow:ellipsis;padding-right:36px}.Vlt-input input.ext{padding-right:72px}.Vlt-composite__wrapper.has-append-button input.main{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.Vlt-input input{background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);font-weight:700}.Vlt-dropdown__panel{max-width:100%;width:100%;min-width:280px}.Vlt-dropdown__panel .Vlt-dropdown__link.smart{font-weight:700;background:var(--vgip-meta-dropdown-bg-color)}.Vlt-dropdown__panel .Vlt-dropdown__link.smart.hidden{display:none}.Vlt-dropdown__panel .Vlt-dropdown__link.bold:after{background-color:#e1e2e6;content:\"\";height:1px;left:0;position:absolute;right:0;bottom:0}.Vlt-dropdown__panel .Vlt-dropdown__link--selected{background:rgba(44,45,48,.05)}.Vlt-dropdown__panel .Vlt-dropdown__link>div{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.Vlt-dropdown__panel .Vlt-dropdown__link>svg{margin-right:8px}.vgip-meta-field-preview .Vlt-badge{margin:1px 3px 1px 0;overflow:hidden;max-width:100%}:host .search-scope{width:130px}:host .search-scope ::ng-deep .Vlt-form__element.has-value .Vlt-select:after{display:none}:host .search-scope ::ng-deep .Vlt-form__element .right-actions{right:12px}:host .search-scope ::ng-deep .Vlt-form__element label.Vlt-truncate{padding-right:48px}:host .search-scope .mobile-icon{display:none}@media only screen and (max-width: 575px){:host .search-scope{width:60px}:host .search-scope:not(.has-value) .mobile-icon{display:block}:host .search-scope.has-value .mobile-label{display:block}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big .Vlt-composite__append{display:none}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big .Vlt-select:after{margin-right:-7px}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big label.Vlt-truncate{visibility:hidden}}:host .search-scope ::ng-deep vgip-meta-field .Vlt-input input.main.standalone{padding-right:initial;background:var(--vgip-meta-input-accent-bg-color);border-color:var(--vgip-meta-input-border-color)}:host .search-scope ::ng-deep vgip-meta-field .Vlt-form__element{padding:0}:host .search-scope ::ng-deep vgip-meta-field .Vlt-form__element .Vlt-dropdown__panel{width:initial}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaField, selector: "vgip-meta-field", inputs: ["meta", "parent", "integrationCode", "resourceType", "index", "scope", "preview", "theme", "overlayContainer"], outputs: ["onChange", "onLeave"] }, { kind: "pipe", type: MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: FieldReference, decorators: [{
+            type: Component,
+            args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<div class='vgip-meta-field-preview' *ngIf='preview && model && (!multiple || (multiple && model.length))'>\n  <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n  <div *ngIf='!multiple' class='vgip-meta-field-value __gu' [ngClass]=\"{ 'has-external-link': externalLink || model.externalLink }\">\n    <svg class=\"Vlt-icon Vlt-icon--smaller\" style='margin-top: -3px;'>\n      <use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\" />\n    </svg>\n    {{model.label || model.id}} <span class='Vlt-grey'>({{model.type}})</span>\n  </div>\n  <div *ngIf='multiple' class='vgip-meta-field-value __gu'>\n    <span *ngFor='let m of (model || [])' class='Vlt-badge Vlt-badge--app'>\n      {{m.label || m.id || m}} <span class='Vlt-grey-dark' *ngIf='isPolymorphic'>({{m.type}})</span>\n    </span>\n  </div>\n  <a [href]='externalLink || model.externalLink' target='_blank' rel='noopener'\n    *ngIf='externalLink && (model && !multiple)' class=\"Vlt-composite__append--icon preview\" aria-label='Open external'>\n    <div class=\"Vlt-composite__icon\">\n      <svg>\n        <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-open\" />\n      </svg>\n    </div>\n  </a>\n</div>\n<div *ngIf='!preview' class=\"meta-field-reference Vlt-form__element Vlt-form__element--big\"\n  [ngClass]=\"{ 'Vlt-form__element--error': (searchError && keyListenerActive) || (f.invalid && ((f | metaModel)._parent.submitted || (ft | metaModel ).touched)), 'multiple': multiple, 'has-value': model, active: keyListenerActive }\">\n  <div *ngIf='multiple' class='items-container' [ngClass]='{ creatable: isCreatable }'>\n    <div *ngIf='model' class='badges-container keep-focus' (click)='focus()' style='width: 100%;'> <!-- eslint-disable-line -->\n      <div *ngFor='let item of model' class=\"Vlt-badge Vlt-badge--app Vlt-badge--large keep-focus\" [ngClass]=\"{ grid: (item.label || item.id || '').length > 56}\">\n        <span class='Vlt-truncate'>{{item.label || item.id || item }} <span *ngIf='isPolymorphic' class='Vlt-grey-dark' style='font-weight: normal;'>({{item.type}})</span></span>\n        <button class=\"Vlt-badge__dismiss keep-focus\" (click)='remove($event, item)' style='position: absolute; right: 12px; top: 8px;' aria-label='Remove'></button>\n      </div>\n    </div>\n  </div>\n  <div class=\"Vlt-composite\">\n    <div class='dropdown-wrapper Vlt-dropdown' style='width: 100%; position: absolute; top: 48px;'>\n      <div class=\"Vlt-dropdown__panel\">\n        <div *ngIf='searchError'>\n          <div class=\"Vlt-callout Vlt-callout--critical keep-focus\">\n            <i></i>\n            <div class=\"Vlt-callout__content\">{{searchError}}</div>\n          </div>\n        </div>\n        <div *ngIf='!searchError && (suggestions.length || searchResults)' [ngClass]=\"{ suggestions: !searchResults}\"\n          class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area\" style='padding: 0;'>\n          <div class=\"Vlt-dropdown__block\"></div>\n          <div *ngIf='!searchResults' class=\"Vlt-dropdown__scroll\">\n            <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i, smart: suggestion.smart }\" (click)='onSuggestionSelect($event, suggestion)' *ngFor='let suggestion of suggestions; let i = index'  class=\"Vlt-dropdown__link has-type\">\n              <svg class='Vlt-icon  Vlt-icon--small'><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\"/></svg>\n              <div class='__gu' [title]='suggestion.label'>{{ suggestion.label }}</div>\n              <small class='Vlt-grey-dark' style='text-transform: capitalize;'>{{suggestion.type}}</small>\n            </a>\n          </div>\n          <div *ngIf='searchResults' class=\"Vlt-dropdown__scroll\">\n            <div *ngIf='!searchResults.length' class='Vlt-dropdown__block'> No records matching '<b style='pointer-events: none;'>{{searchText}}</b>' were found.</div>\n            <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i }\" (click)='onSuggestionSelect($event, suggestion)' *ngFor='let suggestion of searchResults; let i = index'  class=\"Vlt-dropdown__link has-type\">\n              <svg class='Vlt-icon Vlt-icon--small'><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\"/></svg>\n              <div class='__gu' [title]='suggestion.label'>{{ suggestion.label }}</div>\n              <small class='Vlt-grey-dark' style='text-transform: capitalize;'>{{suggestion.type}}</small>\n            </a>\n          </div>\n          <!-- <div *ngIf='searchResults' class=\"Vlt-dropdown__block\" style='text-align: right; padding-top: 0;'>\n            <small>\n              {{ searchResults ? searchResults.length+' results' : 'Suggestions' }} <span style='font-style: italic; font-weight: normal;' *ngIf='searchResults'>~{{ model ? 'last search' : searchText}}</span>\n            </small>\n          </div> -->\n          <div class=\"Vlt-dropdown__block\"></div>\n        </div>\n      </div>\n    </div>\n    <div class=\"Vlt-composite__prepend\"\n      *ngIf='isPolymorphic && showTypes && (multiple || !model || (dropdownVisible && ((suggestions || searchResults || []).length || searchResourceType.resourceType)))'>\n      <div class=\"search-scope\" [ngClass]=\"{ 'has-value': searchResourceType.resourceType }\">\n        <vgip-meta-field class='shown' [meta]='searchResourceTypeMeta' [parent]='searchResourceType'\n          (onChange)='onSearchResourceTypeChanged($event)' (onLeave)='onBlur($event)'\n          [integrationCode]='integrationCode' theme='inherit'></vgip-meta-field>\n        <svg class='Vlt-icon Vlt-grey Vlt-icon--smaller visible-mobile mobile-icon'\n          style='position: absolute; top: 15px; left: 14px; pointer-events: none;'>\n          <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-menu\" />\n        </svg>\n      </div>\n    </div>\n    <div *ngIf='!(isPolymorphic && showTypes && (multiple || !model || dropdownVisible))'>\n      <!-- required by css -->\n    </div>\n    <div class=\"Vlt-composite__wrapper Vlt-input\" style='overflow: hidden;'\n      [ngClass]=\"{ 'has-append-button': hasAppendButton && !disabled, 'vgip-disable': disabled }\">\n      <label class='wrapper'>\n        <div class=\"Vlt-composite__prepend Vlt-composite__prepend--icon\" style='top: 0; padding-top: 15px;'>\n          <div class=\"Vlt-composite__icon\">\n            <svg *ngIf='isSearchable && (!model || multiple)' class='Vlt-grey'>\n              <use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ multiple ? 'stack' : 'search'}}\" />\n            </svg>\n            <svg *ngIf='!isSearchable || (model && !multiple)'\n              [ngStyle]=\"{fill: integrationIcon === 'Brand-icon-vonage' ? 'var(--vgip-meta-input-color)' : ''}\">\n              <use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\" />\n            </svg>\n          </div>\n          <div *ngIf='suggestions.length' class=\"Vlt-badge Vlt-badge--small Vlt-badge--purple\"\n            style='padding: 0px 4px; position: absolute; top: 26px; left: 4px; pointer-events: none; min-width: 14px;'>\n            {{suggestions.length}}</div>\n        </div>\n        <input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n        <input class='main' [readonly]='!isSearchable || (model && !multiple)' [ngModel]='searchText' #ft='ngModel' (ngModelChange)='onSearchTextChanged($event)' [ngModelOptions]=\"{standalone: true}\" type=\"text\" placeholder=\"{{ placeHolderLabel || ' ' }}\" [ngClass]='{ ext: externalLink }' (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)' [disabled]='disabled' [title]=\"model ? model.label : ''\"/>\n        <label class='Vlt-truncate hidden-mobile' style='padding-left: 25px; padding-right: 42px;'>{{ (multiple && isPolymorphic) ? '+Add ' : ((model || !isPolymorphic) ? meta.label : ( meta.searchLabel || 'Search')) }}<span *ngIf='validations.required' class='Vlt-red'>*</span>&nbsp;<span style='color: var(--vgip-meta-input-color); text-transform: capitalize;' *ngIf='model'>({{model.type || model.resourceType || model.length}})</span></label> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n        <label class='Vlt-truncate hidden-desktop' style='padding-left: 25px; padding-right: 42px;'>{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span>&nbsp;<span style='color: var(--vgip-meta-input-color); text-transform: capitalize;' *ngIf='model'>({{model.type || model.resourceType || model.length}})</span></label> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n      </label>\n      <div *ngIf='searching' class='search-progress'>\n        <div class=\"container\">\n          <div class=\"bar Vlt-bg-purple\"></div>\n        </div>\n      </div>\n      <div class='Vlt-composite__append right-actions'>\n        <!-- <div *ngIf='prevModel && !model' class=\"Vlt-composite__append--icon\" (click)='revert()'>\n          <div class=\"Vlt-composite__icon\">\n            <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-reply\"/></svg>\n          </div>\n        </div> -->\n        <a href='#' *ngIf='model && !multiple' class=\"Vlt-composite__append--icon\" (click)='removeSelection($event)'>\n          <div class=\"Vlt-composite__icon\">\n            <svg>\n              <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\" />\n            </svg>\n          </div>\n        </a>\n        <a [href]='externalLink || model.externalLink' target='_blank' rel='noopener' *ngIf='externalLink && (model && !multiple)' class=\"Vlt-composite__append--icon\" aria-label='Open external'>\n          <div class=\"Vlt-composite__icon\">\n            <svg>\n              <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-open\" />\n            </svg>\n          </div>\n        </a>\n      </div>\n    </div>\n    <!-- <span *ngIf='hasCreatables'>\n      <button type='button' *ngIf='!model || multiple' (click)='openResource()' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--icon Vlt-btn--large\" style='margin-left: 12px;'>\n        <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>\n      </button>\n      <button type='button' *ngIf='model && !multiple' (click)='openResource(model)' class=\"Vlt-btn Vlt-btn--primary Vlt-btn--icon Vlt-btn--large\" style='margin-left: 12px;'>\n        <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-edit\"/></svg>\n      </button>\n    </span> -->\n    <div *ngIf='hasAppendButton && !disabled' class=\"Vlt-composite__append\">\n      <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' *ngIf='!model || multiple'\n        (click)='openResource()' class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon\" aria-label='Add new'>\n        <svg>\n          <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\" />\n        </svg>\n      </button>\n      <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' *ngIf='model && !multiple'\n        (click)='openResource(model)' class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon\" aria-label='Edit'>\n        <svg>\n          <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-edit\" />\n        </svg>\n      </button>\n    </div>\n  </div>\n  <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((ft | metaModel).touched && keyListenerActive))'\n    class=\"Vlt-form__element__error\">\n    <span *ngIf=\"f.errors.required\">Required</span>\n    <span *ngIf=\"f.errors.pattern\">Should match '{{validations.pattern}}' pattern</span>\n    <span *ngIf=\"f.errors.custom\">{{f.errors.custom}}&nbsp;</span>\n  </small>\n  <small *ngIf='meta.helpText || meta.hint' class=\"Vlt-form__element__hint\">{{meta.helpText || meta.hint}}</small>\n</div>\n", styles: [".Vlt-form__element--big .Vlt-input input:placeholder-shown:not(:focus)~label.Vlt-truncate{font-size:1.6rem;margin-top:-.8rem;top:50%}.Vlt-form__element--big ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-right:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.Vlt-form__element--big:hover .items-container,.Vlt-form__element--big:hover .main,.Vlt-form__element--big:hover .Vlt-composite__append button,.Vlt-form__element--big:hover ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone,.Vlt-form__element--big.active .items-container,.Vlt-form__element--big.active .main,.Vlt-form__element--big.active .Vlt-composite__append button,.Vlt-form__element--big.active ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.Vlt-form__element--error .items-container,.Vlt-form__element--big.Vlt-form__element--error .main,.Vlt-form__element--big.Vlt-form__element--error .Vlt-composite__append button,.Vlt-form__element--big.Vlt-form__element--error ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:#f25a6b}.Vlt-form__element--big.multiple .Vlt-composite.Vlt-dropdown{margin-top:3px}.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .Vlt-composite__append button,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .Vlt-composite__append button,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .items-container{background-color:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color);border-bottom:0;border-top-left-radius:6px;border-top-right-radius:6px}.Vlt-form__element--big.multiple .items-container .badges-container{overflow:auto;padding:6px 4px 3px 6px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge{margin-bottom:3px;margin-left:0;margin-right:3px;overflow:hidden;max-width:100%;position:relative;padding-right:30px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge.grid{display:grid}.Vlt-form__element--big.multiple:not(.has-value) .items-container{border:0}.Vlt-form__element--big.multiple.has-value .main,.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button,.Vlt-form__element--big.multiple.has-value ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-top-left-radius:0;border-top-right-radius:0;height:48px}.Vlt-form__element--big.multiple.has-value .main:not(.Vlt-btn--icon),.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button:not(.Vlt-btn--icon),.Vlt-form__element--big.multiple.has-value ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone:not(.Vlt-btn--icon){border-top:0}.Vlt-form__element--big.multiple.has-value .Vlt-composite__prepend ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-top-right-radius:6px}.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button{border-top-left-radius:6px;border-top:0}.Vlt-composite__prepend{z-index:initial}.Vlt-composite__prepend--icon{top:0;padding-top:15px;left:3px}.Vlt-input.has-append-button .Vlt-composite__append.right-actions{right:0}.Vlt-input.has-append-button .Vlt-composite__append.right-actions .Vlt-composite__append--icon:last-child{width:36px}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:5px;cursor:pointer}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:var(--vgip-meta-input-accent-color)}.vgip-disable .Vlt-composite__append{cursor:not-allowed;pointer-events:none}.Vlt-composite__append--icon.preview{bottom:initial;padding:0 2px}.Vlt-composite__append button{height:48px;padding-right:16px;background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);padding-left:16px;border-left:0}.Vlt-composite__append button:hover{background:var(--vgip-meta-input-action-hover-bg-color)}.Vlt-composite__append button svg{margin:-2px 0 0;fill:var(--vgip-meta-input-accent-color)}.Vlt-input input{padding-left:38px;text-overflow:ellipsis;padding-right:36px}.Vlt-input input.ext{padding-right:72px}.Vlt-composite__wrapper.has-append-button input.main{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.Vlt-input input{background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);font-weight:700}.Vlt-dropdown__panel{max-width:100%;width:100%;min-width:280px}.Vlt-dropdown__panel .Vlt-dropdown__link.smart{font-weight:700;background:var(--vgip-meta-dropdown-bg-color)}.Vlt-dropdown__panel .Vlt-dropdown__link.smart.hidden{display:none}.Vlt-dropdown__panel .Vlt-dropdown__link.bold:after{background-color:#e1e2e6;content:\"\";height:1px;left:0;position:absolute;right:0;bottom:0}.Vlt-dropdown__panel .Vlt-dropdown__link--selected{background:rgba(44,45,48,.05)}.Vlt-dropdown__panel .Vlt-dropdown__link>div{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.Vlt-dropdown__panel .Vlt-dropdown__link>svg{margin-right:8px}.vgip-meta-field-preview .Vlt-badge{margin:1px 3px 1px 0;overflow:hidden;max-width:100%}:host .search-scope{width:130px}:host .search-scope ::ng-deep .Vlt-form__element.has-value .Vlt-select:after{display:none}:host .search-scope ::ng-deep .Vlt-form__element .right-actions{right:12px}:host .search-scope ::ng-deep .Vlt-form__element label.Vlt-truncate{padding-right:48px}:host .search-scope .mobile-icon{display:none}@media only screen and (max-width: 575px){:host .search-scope{width:60px}:host .search-scope:not(.has-value) .mobile-icon{display:block}:host .search-scope.has-value .mobile-label{display:block}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big .Vlt-composite__append{display:none}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big .Vlt-select:after{margin-right:-7px}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big label.Vlt-truncate{visibility:hidden}}:host .search-scope ::ng-deep vgip-meta-field .Vlt-input input.main.standalone{padding-right:initial;background:var(--vgip-meta-input-accent-bg-color);border-color:var(--vgip-meta-input-border-color)}:host .search-scope ::ng-deep vgip-meta-field .Vlt-form__element{padding:0}:host .search-scope ::ng-deep vgip-meta-field .Vlt-form__element .Vlt-dropdown__panel{width:initial}\n"] }]
+        }], ctorParameters: function () { return [{ type: MetaReferenceService }, { type: MetaResourceService }, { type: MetaMsgService }, { type: MetaContextService }, { type: MetaTrackerService }, { type: i0.ViewContainerRef }]; } });
+
+var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    FieldReference: FieldReference
+});
+
+export { FieldReference as F, MetaTrackerService as M, index as i };
+//# sourceMappingURL=vgip-meta-ui-index-1799a060.mjs.map