@vgip/meta-ui 2.0.0 → 2.1.0

package/fesm2022/vgip-meta-ui-index-6d502a71.mjs

@@ -1,869 +0,0 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, Component } from '@angular/core';
-import { F as FieldAbstract } from './vgip-meta-ui-fieldAbstract-baeaf24d.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-ce185ca2.mjs';
-import { M as MetaContextService } from './vgip-meta-ui-index-37358620.mjs';
-import * as i1 from '@angular/common';
-import { M as MetaField } from './vgip-meta-ui-index-fb7f54f5.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,
-                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) => {
-            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,
-                    delegate: this.delegate
-                });
-            }
-            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() {
-        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) => {
-            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, .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);
-    }
-    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' [disabled]='delegate'>\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' [disabled]='delegate'>\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-composite__append button:disabled{opacity:.2}.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", "delegate"], 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' [disabled]='delegate'>\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' [disabled]='delegate'>\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-composite__append button:disabled{opacity:.2}.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-6d502a71.mjs.map