@vgip/meta-ui 1.5.6 → 1.5.8

package/fesm2020/vgip-meta-ui-index-3907f4b1.mjs

@@ -0,0 +1,1879 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, Input, Directive, EventEmitter, Output } from '@angular/core';
+import { a as metaDark, m as metaLight } from './vgip-meta-ui-fieldAbstract-2d0882f1.mjs';
+import * as i1$2 from '@angular/common';
+import { M as MetaContextService, t as templateBuilder } from './vgip-meta-ui-index-3488da98.mjs';
+import * as i1 from '@angular/common/http';
+import { HttpParams, HttpHeaders } from '@angular/common/http';
+import * as i2 from '@angular/forms';
+import { Observable, Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import * as i1$1 from '@angular/router';
+import { M as MetaField } from './vgip-meta-ui-index-e8e3b16a.mjs';
+
+const numberFieldNormalizer = (field) => {
+    const f = {
+        label: field.label,
+        name: field.name
+    };
+    f.type = field.name ? 'number' : 'missing name';
+    return f;
+};
+
+const optionsFieldNormalizer = (field) => {
+    const f = {
+        label: field.label,
+        name: field.name,
+        options: field.options || []
+    };
+    if (field.dependentPicklist && field.controllerName) {
+        const enabled = {};
+        enabled[field.controllerName] = true;
+        f.enabled = enabled;
+    }
+    if (field.picklist) {
+        for (const o of field.picklist) {
+            const opt = {
+                id: o.name || o.id,
+                label: o.label
+            };
+            if (field.for) {
+                opt.for = field.for;
+            }
+            if (o.validFor && field.controllerName) {
+                const validFor = {};
+                validFor[field.controllerName] = o.validFor;
+                opt.for = validFor;
+            }
+            f.options.push(opt);
+            if (o.defaultValue && !field.default) {
+                f.default = opt.id;
+            }
+        }
+    }
+    f.type = field.name ? 'select' : 'missing name';
+    if (field.type === 'multipicklist') {
+        f.multiple = true;
+    }
+    if (field.reference) {
+        f.reference = field.reference;
+    }
+    if (field.searchUrl || field.searchParams) {
+        f.search = {
+            url: field.searchUrl,
+            params: field.searchParams
+        };
+    }
+    else if (field.search) {
+        f.search = field.search;
+    }
+    return f;
+};
+
+const stringFieldNormalizer = (field) => {
+    const f = {
+        label: field.label,
+        name: field.name
+    };
+    f.type = field.name ? 'string' : 'missing name';
+    if (field.subtype) {
+        f.subtype = field.subtype;
+    }
+    if (field.picklist || field.options) {
+        f.suggestions = (field.picklist || field.options || []).map((s) => {
+            if (s.defaultValue) {
+                f.default = s.label || s.name || s.id || s;
+            }
+            return {
+                id: s.id,
+                label: s.label,
+                name: s.name
+            };
+        });
+    }
+    return f;
+};
+
+const booleanFieldNormalizer = (field) => {
+    const f = {
+        label: field.label,
+        name: field.name
+    };
+    if (field.subtype) {
+        f.subtype = field.subtype;
+    }
+    f.type = field.name ? 'boolean' : 'missing name';
+    return f;
+};
+
+/*
+* @Author: Alexander.Vangelov@vonage.com
+* @Date: 2021-03-22 17:09:52
+* @Last Modified by: Alexander.Vangelov@vonage.com
+* @Last Modified time: 2021-03-22 17:09:52
+*/
+const textFieldNormalizer = (field) => {
+    const f = {
+        label: field.label,
+        name: field.name
+    };
+    f.type = field.name ? 'text' : 'missing name';
+    return f;
+};
+
+const datetimeFieldNormalizer = (field) => {
+    const f = {
+        label: field.label,
+        name: field.name
+    };
+    f.type = field.name ? (field.type || '').toLowerCase() : 'missing name';
+    return f;
+};
+
+const referenceFieldNormalizer = (field) => {
+    const f = {
+        type: field.name ? 'reference' : 'missing name',
+        label: field.label,
+        name: field.name
+    };
+    f.type = field.name ? 'reference' : 'missing name';
+    if (field.reference) {
+        if (field.reference instanceof Array && field.reference.length === 1) {
+            f.reference = field.reference[0];
+        }
+        else {
+            f.reference = field.reference;
+        }
+    }
+    else if (field.references) {
+        f.references = field.references;
+    }
+    if (field.acceptNew) {
+        f.acceptNew = field.acceptNew;
+    }
+    if (field.searchLabel) {
+        f.searchLabel = field.searchLabel;
+    }
+    if (field.searchUrl || field.searchParams) {
+        f.search = {
+            url: field.searchUrl,
+            params: field.searchParams
+        };
+    }
+    else if (field.search) {
+        f.search = field.search;
+    }
+    return f;
+};
+
+const radioFieldNormalizer = (field) => {
+    const f = {
+        label: field.label,
+        name: field.name,
+        options: field.options || []
+    };
+    f.type = field.name ? 'radio' : 'missing name';
+    if (field.picklist) {
+        for (const o of field.picklist) {
+            const opt = {
+                id: o.name || o.id,
+                label: o.label
+            };
+            if (field.for) {
+                opt.for = field.for;
+            }
+            if (o.validFor && field.controllerName) {
+                const validFor = {};
+                validFor[field.controllerName] = o.validFor;
+                opt.for = validFor;
+            }
+            f.options.push(opt);
+            if (o.defaultValue && !field.default) {
+                f.default = opt.id;
+            }
+        }
+    }
+    return f;
+};
+
+/*
+ * @Author: Alexander.Vangelov@vonage.com
+ * @Date: 2019-09-19 17:34:34
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2021-03-22 17:11:01
+ */
+const richtextFieldNormalizer = (field) => {
+    const f = {
+        label: field.label,
+        name: field.name
+    };
+    f.type = field.name ? 'richtext' : 'missing name';
+    return f;
+};
+
+/*
+* @Author: Alexander.Vangelov@vonage.com
+* @Date: 2021-03-22 17:09:12
+* @Last Modified by: Alexander.Vangelov@vonage.com
+* @Last Modified time: 2021-03-22 17:09:12
+*/
+const uniqueNameFilter = (fields, uniqFieldNames, allowDuplicates = false) => {
+    if (fields instanceof Array) {
+        return allowDuplicates ? fields : fields.filter((f) => {
+            if (f.name) {
+                if (uniqFieldNames.indexOf(f.name) !== -1) {
+                    return false;
+                }
+                uniqFieldNames.push(f.name);
+            }
+            return true;
+        });
+    }
+    else {
+        return fields;
+    }
+};
+
+/*
+ * @Author: Alexander.Vangelov@vonage.com
+ * @Date: 2019-09-19 17:34:34
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2021-03-22 17:13:53
+ */
+const fieldNormalizer = (field, uniqFieldNames) => {
+    if (!field) {
+        return;
+    }
+    let f = {
+        validations: {}
+    };
+    const fieldType = (field.type || '').toLowerCase();
+    if (['int', 'integer', 'number', 'double', 'float', 'bigdecimal', 'percent', 'currency'].indexOf(fieldType) !== -1) {
+        f = numberFieldNormalizer(field);
+    }
+    else if (['picklist', 'select', 'multipicklist', 'options'].indexOf(fieldType) !== -1) {
+        f = optionsFieldNormalizer(field);
+    }
+    else if (['string', null, undefined, '', 'email', 'phone', 'url', 'combobox'].indexOf(fieldType) !== -1) {
+        f = stringFieldNormalizer(field);
+    }
+    else if (['bool', 'boolean', 'checkbox', 'switch'].indexOf(fieldType) !== -1) {
+        f = booleanFieldNormalizer(field);
+    }
+    else if (['text', 'textarea'].indexOf(fieldType) !== -1) {
+        f = textFieldNormalizer(field);
+    }
+    else if (['richtext'].indexOf(fieldType) !== -1) {
+        f = richtextFieldNormalizer(field);
+    }
+    else if (['date', 'time', 'datetime', 'datetime-local'].indexOf(fieldType) !== -1) {
+        f = datetimeFieldNormalizer(field);
+    }
+    else if (['reference', 'references', 'multireference'].indexOf(fieldType) !== -1) {
+        f = referenceFieldNormalizer(field);
+    }
+    else if (['radio'].indexOf(fieldType) !== -1) {
+        f = radioFieldNormalizer(field);
+    }
+    else if (fieldType === 'composite') {
+        f = {
+            type: 'composite',
+            label: field.label,
+            name: field.name,
+            fields: uniqueNameFilter(field.fields || field.reference || [], uniqFieldNames, (typeof (field.name) !== 'undefined')).map((v) => fieldNormalizer(v, uniqFieldNames))
+        };
+        if (field.subtype) {
+            f.subtype = field.subtype;
+        }
+    }
+    else if (fieldType === 'list') {
+        const list = field.list || field.reference;
+        f = {
+            type: field.name ? 'list' : 'missing name',
+            label: field.label,
+            name: field.name,
+            list: fieldNormalizer(uniqueNameFilter(list, uniqFieldNames), field.name ? [] : uniqFieldNames)
+        };
+        if (field.selectable) {
+            f.selectable = field.selectable;
+        }
+        if (field.resourceType) {
+            f.resourceType = field.resourceType;
+        }
+    }
+    else {
+        f = {
+            label: field.label,
+            name: field.name,
+            type: `@v2 ${fieldType}`
+        };
+    }
+    if (field.validations) {
+        f.validations = field.validations;
+    }
+    if (field.auto) {
+        f.auto = field.auto;
+    }
+    if ((field.default || field.defaultValue) && !f.default) {
+        const d = field.default || field.defaultValue;
+        if (Array.isArray(d)) {
+            f.default = [];
+            for (const v of d) {
+                if (typeof (v) === 'object' && v !== null) {
+                    const o = {
+                        id: v.id || v.value || v.name || v.label,
+                        label: v.label || 'N/A'
+                    };
+                    if (v.type) {
+                        o.type = v.type;
+                    }
+                    if (!v.type && f.reference && f.reference.name) { // Bullhorn CAND PT bad metadata
+                        o.type = f.reference.name;
+                    }
+                    f.default.push(o);
+                }
+                else {
+                    f.default = v;
+                }
+            }
+        }
+        else if (typeof (d) === 'object' && d !== null) {
+            if (field.type === 'boolean' && typeof (d.value) === 'boolean') {
+                f.default = d.value;
+            }
+            else if (Object.keys(d).length) {
+                const id = d.id || d.value || d.name || d.label;
+                if (id) {
+                    f.default = {
+                        id: d.id || d.value || d.name || d.label,
+                        label: d.label || 'N/A'
+                    };
+                }
+                if (d.type) {
+                    f.default.type = d.type;
+                }
+            }
+        }
+        else {
+            f.default = d;
+        }
+    }
+    if (field.visible || field.alwaysVisible) {
+        f.visible = field.visible || field.alwaysVisible;
+    }
+    if (field.hidden) {
+        f.hidden = field.hidden;
+    }
+    if (field.hint || field.helpText) {
+        f.hint = field.hint || field.helpText;
+    }
+    if (field.valueType) {
+        f.valueType = field.valueType;
+    }
+    if (field.multiple) {
+        f.multiple = field.multiple;
+    }
+    if (field.suggestions && field.suggestions.length) {
+        f.suggestions = field.suggestions;
+    }
+    if (field.updateable === false || field.updatable === false) {
+        if (!f.flags) {
+            f.flags = { updatable: false };
+        }
+        else {
+            f.flags.updatable = false;
+        }
+    }
+    if (field.createable === false || field.creatable === false) {
+        if (!f.flags) {
+            f.flags = { creatable: false };
+        }
+        else {
+            f.flags.creatable = false;
+        }
+    }
+    if (typeof (field.enabled) !== 'undefined') {
+        f.enabled = field.enabled;
+    }
+    if (typeof (field.disabled) !== 'undefined') {
+        f.disabled = field.disabled;
+    }
+    return f;
+};
+
+/*
+ * @Author: Alexander.Vangelov@vonage.com
+ * @Date: 2019-09-19 17:34:49
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2023-02-10 09:44:59
+ */
+const sortObj = (obj) => {
+    if (typeof (obj) !== 'object' || obj === null) {
+        return obj;
+    }
+    if (Array.isArray(obj)) {
+        return obj.map((e) => sortObj(e)).sort();
+    }
+    return Object.keys(obj).sort().reduce((sorted, k) => {
+        sorted[k] = sortObj(obj[k]);
+        return sorted;
+    }, {});
+};
+const metaNormalizer = (meta, integration, resourceType) => {
+    const uniqFieldNames = [];
+    const integrationCode = (integration || '').toUpperCase();
+    const metaV3 = {
+        integration,
+        resourceType,
+        availableLayouts: meta.availableLayouts,
+        layout: {
+            id: meta.layout.id,
+            name: meta.layout.name,
+            label: meta.layout.label,
+            version: '3.0.0',
+            sections: (meta.layout.sections || []).map((s) => {
+                const section = {
+                    label: s.label,
+                    fields: uniqueNameFilter(s.fields || [], uniqFieldNames).map((v) => fieldNormalizer(v, uniqFieldNames)) // VIST-424
+                };
+                if (s.visible || s.alwaysVisible) {
+                    section.visible = s.visible || s.alwaysVisible;
+                }
+                return section;
+            })
+        }
+    };
+    if (meta.layout.origLayoutId) {
+        metaV3.layout.origLayoutId = meta.layout.origLayoutId;
+    }
+    if (meta.drafts) {
+        metaV3.drafts = meta.drafts;
+    }
+    if (meta.layout.children) {
+        metaV3.layout.children = meta.layout.children;
+    }
+    const fieldFixesByIntegration = (f) => {
+        if (f.type === 'boolean' && ((typeof (f.default) !== 'boolean') && f.default && !f.default.value)) {
+            delete f.default;
+        }
+        else if (f.type === 'reference') {
+            const references = (f.reference instanceof Array) ? f.reference : [f.reference];
+            for (const r of references) {
+                if (r && r.creatable === false && typeof (r.updatable) === 'undefined') {
+                    r.updatable = false; // User missing updatable, may be other too
+                }
+            }
+        }
+        switch (integrationCode) {
+            case 'BULLHORN': {
+                if (resourceType === 'Appointment') {
+                    if (['dateBegin', 'dateEnd'].indexOf(f.name) !== -1) {
+                        if (!f.validations) {
+                            f.validations = { step: 1800 };
+                        }
+                        else {
+                            f.validations.step = 1800;
+                        }
+                        f.default = f.name === 'dateBegin' ? 'now' : '30.minutes';
+                        if (!f.auto) {
+                            f.auto = {};
+                        }
+                        f.auto[f.name === 'dateBegin' ? 'lt' : 'gt'] = {
+                            against: f.name === 'dateBegin' ? 'dateEnd' : 'dateBegin',
+                            offset: `${f.name === 'dateBegin' ? '-30' : '30'}.minutes`
+                        };
+                    }
+                }
+                if (f.name === 'comments') {
+                    if (!f.validations) {
+                        f.valudations = { required: true };
+                    }
+                    else {
+                        f.validations.required = true;
+                    }
+                    if (resourceType === 'Note') {
+                        f.type = 'richtext';
+                    }
+                }
+                if (f.name === 'address.state') {
+                    f.creatable = false;
+                    f.updatable = false;
+                }
+                break;
+            }
+            case 'GOOGLE': {
+                if (f.name === 'contactId') {
+                    f.label = 'Contact';
+                }
+                else if (['start', 'end'].indexOf(f.name) !== -1) {
+                    if (!f.auto) {
+                        f.auto = {};
+                    }
+                    f.auto[f.name === 'start' ? 'lt' : 'gt'] = {
+                        against: f.name === 'start' ? 'end' : 'start',
+                        offset: `${f.name === 'start' ? '-30' : '30'}.minutes`
+                    };
+                }
+                break;
+            }
+            case 'OFFICE365': {
+                if (resourceType === 'Events') {
+                    if (['start', 'end'].indexOf(f.name) !== -1) {
+                        if (!f.validations) {
+                            f.validations = { step: 1800 };
+                        }
+                        else {
+                            f.validations.step = 1800;
+                        }
+                        f.default = f.name === 'start' ? 'now' : '30.minutes';
+                    }
+                }
+                if (resourceType === 'Tasks' && f.name === 'checklist') {
+                    f.creatable = false;
+                }
+                if (f.name === 'description' && resourceType !== 'Tasks') {
+                    f.type = 'richtext';
+                }
+                else if (f.name === 'content') {
+                    f.type = 'text';
+                }
+                break;
+            }
+            case 'SALESFORCE': {
+                if (resourceType === 'Task' && f.name === 'WhatId') {
+                    f.disabled = {
+                        'WhoId.type': 'Lead' // eslint-disable-line @typescript-eslint/naming-convention
+                    };
+                }
+                if (['Description', 'ParentId'].indexOf(f.name) !== -1) {
+                    if (!f.visible) {
+                        f.visible = true;
+                    }
+                }
+                if (f.type === 'reference') {
+                    const references = (f.reference instanceof Array) ? f.reference : [f.reference];
+                    for (const r of references) {
+                        if (r && ['Account'].indexOf(r.name) !== -1) { // force creatable
+                            r.creatable = true;
+                            r.updatable = true;
+                        }
+                    }
+                }
+                break;
+            }
+            case 'SUGAR': {
+                if (['description', 'parent_id', 'contact_id', 'contacts'].indexOf(f.name) !== -1) {
+                    if (!f.visible) {
+                        f.visible = true;
+                    }
+                }
+                if (f.type === 'reference') {
+                    const references = (f.reference instanceof Array) ? f.reference : [f.reference];
+                    for (const r of references) {
+                        if (r && ['Accounts', 'Contacts', 'Leads'].indexOf(r.name) !== -1) {
+                            r.label = r.name.slice(0, -1); // Use singular labels
+                            r.creatable = true;
+                            r.updatable = true;
+                        }
+                    }
+                }
+                break;
+            }
+            case 'ZENDESK': {
+                if (resourceType === 'Ticket' && f.name === 'assignee') {
+                    f.reference.updatable = false;
+                }
+                break;
+            }
+            case 'HUBSPOT': {
+                if (resourceType === 'LogCall' && f.name === 'body') {
+                    f.type = 'richtext';
+                }
+                break;
+            }
+            case 'NETSUITE': {
+                if (f.name === 'company' && !f.auto) {
+                    f.auto = {
+                        search: {
+                            params: {
+                                contactId: 'contact.id'
+                            },
+                            url: '../Contact/${contactId}?expand=company',
+                            extract: 'company'
+                        }
+                    };
+                }
+                break;
+            }
+        }
+        if (f.type === 'composite' && f.fields) {
+            for (const ff of f.fields) {
+                fieldFixesByIntegration(ff);
+            }
+        }
+    };
+    // common fixes for all integrations
+    if (metaV3.layout.sections.length) {
+        for (const s of (metaV3.layout.sections)) {
+            if (!s || !s.fields) {
+                break;
+            }
+            for (const f of s.fields) {
+                fieldFixesByIntegration(f);
+            }
+        }
+    }
+    // Google Gmail children enhancement
+    if (integrationCode === 'GOOGLE') {
+        if (resourceType === 'Mail') {
+            metaV3.layout.editable = false;
+            if (!metaV3.layout.children) {
+                metaV3.layout.children = [{
+                        label: 'Comments',
+                        name: 'comments',
+                        reference: {
+                            resourceType: 'Comment',
+                            label: 'Comment',
+                            editable: false
+                        }
+                    }];
+            }
+        }
+        else if (resourceType === 'Task') {
+            if (!metaV3.layout.children) {
+                metaV3.layout.children = [{
+                        label: 'Subtasks',
+                        name: 'subTasks',
+                        reference: {
+                            resourceType: 'Subtask',
+                            label: 'Subtask'
+                        }
+                    }];
+            }
+        }
+        else if (resourceType === 'Comment') {
+            metaV3.layout.editable = false;
+        }
+    }
+    else if (integrationCode === 'ZENDESK') {
+        if (resourceType === 'Ticket') {
+            if (!metaV3.layout.children) {
+                metaV3.layout.children = [{
+                        label: 'Comments',
+                        name: 'comments',
+                        reference: {
+                            resourceType: 'Comment',
+                            label: 'Comment',
+                            editable: false
+                        }
+                    }];
+            }
+        }
+        else if (resourceType === 'Comment') {
+            metaV3.layout.editable = false;
+        }
+    }
+    else if (integrationCode === 'MSDYNAMICS' && !metaV3.fieldsMap) {
+        if (resourceType === 'phonecall') {
+            metaV3.fieldsMap = {
+                contactables: ['from', 'to'],
+                subject: 'subject',
+                phoneNumber: 'phonenumber',
+            };
+        }
+        else if (resourceType === 'contact') {
+            metaV3.fieldsMap = {
+                phoneNumber: 'telephone1',
+                firstName: 'firstname',
+                lastName: 'lastname'
+            };
+        }
+        else if (resourceType === 'account') {
+            metaV3.fieldsMap = {
+                phoneNumber: 'telephone1',
+                displayName: 'name'
+            };
+        }
+    }
+    else if (integrationCode === 'OFFICE365') {
+        if (resourceType === 'Conversations') {
+            metaV3.layout.editable = false;
+            metaV3.layout.children = [{
+                    label: 'Comments',
+                    name: 'comments',
+                    reference: {
+                        resourceType: 'Comment',
+                        label: 'Comment',
+                        editable: false
+                    }
+                }];
+        }
+        else if (resourceType === 'Comment') {
+            metaV3.layout.editable = false;
+        }
+    }
+    else if (integrationCode === 'JOBDIVA') {
+        if (resourceType === 'CandidateNote' || resourceType === 'ContactNote') {
+            metaV3.layout.editable = false;
+        }
+    }
+    return sortObj(metaV3);
+};
+
+/*
+ * @Author: Alexander.Vangelov@vonage.com
+ * @Date: 2019-09-19 17:35:19
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2019-11-22 14:57:07
+ */
+class MetaHttpClient {
+    constructor(httpClient) {
+        this.httpClient = httpClient;
+    }
+    delete(url, queryParams = {}) {
+        const options = this.prepareOptions(queryParams);
+        return this.httpClient.delete(`${this.constructUrl(url)}`, options);
+    }
+    get(url, queryParams = {}) {
+        const options = this.prepareOptions(queryParams);
+        return this.httpClient.get(`${this.constructUrl(url)}`, options);
+    }
+    post(url, body, queryParams = {}) {
+        const options = this.prepareOptions(queryParams);
+        return this.httpClient.post(`${this.constructUrl(url)}`, body, options);
+    }
+    put(url, body, queryParams = {}) {
+        const options = this.prepareOptions(queryParams);
+        return this.httpClient.put(`${this.constructUrl(url)}`, body, options);
+    }
+    patch(url, body, queryParams = {}) {
+        const options = this.prepareOptions(queryParams);
+        return this.httpClient.patch(`${this.constructUrl(url)}`, body, options);
+    }
+    constructUrl(path) {
+        return /^http/.test(path) ? path : `${path}`;
+    }
+    prepareOptions(queryParams) {
+        Object.keys(queryParams).forEach(key => {
+            if (queryParams[key] == null || queryParams[key] === '') {
+                delete queryParams[key];
+            }
+        });
+        const params = new HttpParams({
+            fromObject: queryParams
+        });
+        const options = {
+            headers: new HttpHeaders({
+                Accept: 'application/json' // eslint-disable-line @typescript-eslint/naming-convention
+            }),
+            params
+        };
+        return options;
+    }
+}
+MetaHttpClient.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaHttpClient, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+MetaHttpClient.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaHttpClient, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaHttpClient, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
+
+/*
+ * @Author: Alexander.Vangelov@vonage.com
+ * @Date: 2019-09-19 17:35:19
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2020-08-10 22:35:31
+ */
+const STORAGE_PARAMS_REGEXES = {
+    localStorage: /^localStorage\.(.*)/,
+    sessionStorage: /^sessionStorage\.(.*)/,
+};
+const INTEGRATION_URL_TEMPLATE = '/extensions/v2/accounts/${localStorage.vgis.accountId}/users/${localStorage.vgis.userId}/connectors/${integrationCode}';
+const RESOURCE_URL_TEMPLATE = INTEGRATION_URL_TEMPLATE + '${parentsPath}/${resourceType}';
+const NEW_RESOURCE_URL_TEMPLATE = INTEGRATION_URL_TEMPLATE + '${parentsPath}/resources/${resourceType}';
+class IMetaParentConfig {
+}
+class IMetaResourceConfig {
+}
+class MetaResourceService {
+    constructor(httpClient) {
+        this.httpClient = httpClient;
+    }
+    setConfig(config) {
+        this.baseIntegrationUrl = INTEGRATION_URL_TEMPLATE.replace(/\${\s*([\w\.]+)\s*}/g, (m, value) => {
+            for (const storage of Object.keys(STORAGE_PARAMS_REGEXES)) {
+                const match = value.match(STORAGE_PARAMS_REGEXES[storage]);
+                if (match) {
+                    return window[storage].getItem(match[1]) || window[storage].getItem(`cti.${match[1]}`);
+                }
+            }
+            return config[value];
+        });
+        this.baseResourceUrl = RESOURCE_URL_TEMPLATE.replace(/\${\s*([\w\.]+)\s*}/g, (m, value) => {
+            for (const storage of Object.keys(STORAGE_PARAMS_REGEXES)) {
+                const match = value.match(STORAGE_PARAMS_REGEXES[storage]);
+                if (match) {
+                    return window[storage].getItem(match[1]) || window[storage].getItem(`cti.${match[1]}`);
+                }
+            }
+            if (value === 'parentsPath') {
+                let parentsPath = '';
+                if (config.parent) { // config.parent: { resourceType: '...', id: '...', parent: {...} }
+                    let rootParent = config.parent;
+                    while (rootParent) {
+                        parentsPath += `/${rootParent.resourceType || rootParent.type}/${rootParent.externalId || rootParent.id}`;
+                        rootParent = rootParent.parent;
+                    }
+                }
+                return parentsPath;
+            }
+            else {
+                return config[value];
+            }
+        });
+        this.newResourceUrl = NEW_RESOURCE_URL_TEMPLATE.replace(/\${\s*([\w\.]+)\s*}/g, (m, value) => {
+            for (const storage of Object.keys(STORAGE_PARAMS_REGEXES)) {
+                const match = value.match(STORAGE_PARAMS_REGEXES[storage]);
+                if (match) {
+                    return window[storage].getItem(match[1]);
+                }
+            }
+            if (value === 'parentsPath') {
+                let parentsPath = '';
+                if (config.parent) { // config.parent: { resourceType: '...', id: '...', parent: {...} }
+                    let rootParent = config.parent;
+                    while (rootParent) {
+                        parentsPath += `/${rootParent.resourceType || rootParent.type}/${rootParent.externalId || rootParent.id}`;
+                        rootParent = rootParent.parent;
+                    }
+                }
+                return parentsPath;
+            }
+            else {
+                return config[value];
+            }
+        });
+        this.id = config.externalId;
+    }
+    new(config) {
+        const s = new MetaResourceService(this.httpClient);
+        s.setConfig(config);
+        return s;
+    }
+    searchIntegration(query, scope) {
+        let searchUrl = `${this.baseIntegrationUrl}/search?q=${encodeURIComponent(query)}`;
+        if (scope) {
+            searchUrl += `&scope=${encodeURIComponent(scope)}`;
+        }
+        return this.httpClient.get(searchUrl);
+    }
+    getMetadata(layoutId, refresh) {
+        let url = `${this.baseResourceUrl.replace('/v2/', '/v3/')}/metadata`;
+        url += `?t=${new Date().getTime()}`;
+        if (refresh) {
+            url += '&refresh=true';
+        }
+        if (layoutId) {
+            url += `&layoutId=${layoutId}`;
+        }
+        return this.httpClient.get(url);
+    }
+    getDetails(externalId, extraParams) {
+        let params = 'referenceDetails=true';
+        if (extraParams) {
+            for (const p in extraParams) {
+                if (extraParams[p]) {
+                    params += `&${p}=${extraParams[p]}`;
+                }
+            }
+        }
+        return this.httpClient.get(`${this.baseResourceUrl}/${externalId}?${params}`);
+    }
+    getByPath(path) {
+        let fullPath = `${this.newResourceUrl}${path}`;
+        if (/^..\//.test(path)) {
+            fullPath = `${this.baseIntegrationUrl}${path.substring(2)}`;
+        }
+        return this.httpClient.get(fullPath);
+    }
+    save(payload) {
+        if (this.id) {
+            return this.httpClient.put(`${this.baseResourceUrl}/${this.id}`, payload);
+        }
+        else {
+            return this.httpClient.post(`${this.baseResourceUrl}`, payload);
+        }
+    }
+}
+MetaResourceService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaResourceService, deps: [{ token: MetaHttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+MetaResourceService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaResourceService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaResourceService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: MetaHttpClient }]; } });
+
+/*
+ * @Author: Alexander.Vangelov@vonage.com
+ * @Date: 2019-09-19 17:35:19
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2020-05-03 21:31:16
+ */
+class MetaMsgService {
+    constructor(metaContext) {
+        this.metaContext = metaContext;
+        this.msgCallbacks = {}; // message subscribers holder
+        this.msgListeneres = []; // ensure listener is registerd only once
+        this.workerMsgListener = (msg) => {
+            if (msg && msg.data && msg.data.action && msg.data.$state) {
+                const state = msg.data.$state;
+                const callback = this.msgCallbacks[state]; // original requester callback
+                if (callback) {
+                    delete msg.data.$state;
+                    callback(msg.data);
+                }
+                delete this.msgCallbacks[state]; // get rid of the listener callback when done
+            }
+            this.removeExpiredListeners(); // wipe out the expired listeners if any
+        };
+    }
+    sendMessage(provider, msg, callback, isLong = false) {
+        provider = (provider || '').toUpperCase();
+        const providerWorker = this.metaContext.workers[provider];
+        if (providerWorker) {
+            if (this.msgListeneres.indexOf(provider)) {
+                this.msgListeneres.push(provider);
+                providerWorker.addEventListener('message', this.workerMsgListener, false); // register a short time listener
+            }
+            let state; // message unique identifier
+            do {
+                state = new Date().getTime();
+            } while (!!this.msgCallbacks[state]);
+            this.msgCallbacks[state] = callback; // register message callback
+            msg.$state = state;
+            providerWorker.postMessage(msg);
+            setTimeout(() => {
+                this.cancelMsgListener(msg.action, state); // give up, worker does not replied on time
+                const listenerIndex = this.msgListeneres.indexOf(provider);
+                if (listenerIndex !== -1) {
+                    this.msgListeneres.splice(listenerIndex, 1);
+                }
+                providerWorker.removeEventListener('message', this.workerMsgListener); // remove listener when done
+            }, isLong ? 60000 : 2000);
+        }
+        else {
+            callback({ action: msg.action, error: `Worker ${provider} is not registered` });
+        }
+    }
+    cancelMsgListener(action, storedState) {
+        const storedCallback = this.msgCallbacks[storedState];
+        if (storedCallback) {
+            storedCallback({ action, error: 'Timeout', state: storedState }); // always reply with something
+        }
+        delete this.msgCallbacks[storedState];
+    }
+    removeExpiredListeners() {
+        const now = new Date();
+        for (const state in this.msgCallbacks) { // cleanup expired listeners (< 1 min ago);
+            if (parseInt(state, 10) < now.setMinutes(now.getMinutes() - 1)) {
+                delete this.msgCallbacks[state];
+            }
+        }
+    }
+}
+MetaMsgService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaMsgService, deps: [{ token: MetaContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+MetaMsgService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaMsgService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaMsgService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: MetaContextService }]; } });
+
+/*
+ * @Author: Alexander.Vangelov@vonage.com
+ * @Date: 2023-02-08 12:41:56
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2023-02-08 14:04:46
+ */
+const pad2Digit = (t) => t < 10 ? '0' + t : t;
+const resourceCardLabel = (r) => {
+    // eslint-disable-next-line no-underscore-dangle
+    if (r._vgis && r._vgis.connector === 'CLIO' && r._vgis.resourceType === 'PhoneCommunicationTimer') {
+        const duration = r.quantity || 0; // in seconds
+        let durationText = '00:00';
+        if (duration > 0) {
+            const hours = Math.floor(duration / 3600);
+            const minutes = Math.floor((duration % 3600) / 60);
+            const seconds = Math.round(duration % 60);
+            const checkHours = hours ? pad2Digit(hours) + ':' : '';
+            durationText = checkHours + pad2Digit(minutes) + ':' + pad2Digit(seconds);
+        }
+        return `⏱ ${durationText} | $${(Math.round(r.price) * 100) / 100} | ${r.non_billable ? 'Non-billable' : 'Billable'}`;
+    }
+    return r.Subject || r.subject || r.summary || r.title || r.CaseNumber || r.comment || r.body || r.name || r.topic || r.content || '...';
+};
+
+/*
+ * @Author: Alexander.Vangelov@vonage.com
+ * @Date: 2019-09-19 17:35:19
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2020-05-03 21:31:44
+ */
+class MetaReferenceService {
+    constructor(appRef, injector, router) {
+        this.appRef = appRef;
+        this.injector = injector;
+        this.router = router;
+        this.dialogs = [];
+        this.router.events.subscribe((e) => {
+            if (this.dialogs.length) {
+                for (let d = (this.dialogs.length - 1); d >= 0; d--) {
+                    this.dialogs[d].onComplete();
+                }
+            }
+        });
+    }
+    openDialog(componentRef, metaResource, integrationCode, reference, resource, preview, preferResourceType, theme) {
+        const references = !(reference instanceof Array) ? [reference] : reference.filter((r) => r.creatable !== false);
+        if (resource && resource.type) {
+            if (!references.find((f) => (f.name || f.resourceType) === (resource.resourceType || resource.type))) {
+                references.push({
+                    name: resource.resourceType || resource.type,
+                    resourceType: resource.resourceType || resource.type,
+                    label: resource.label || resource.resourceType || resource.type
+                });
+            }
+        }
+        const modalObservable = new Observable(observer => {
+            this.appRef.attachView(componentRef.hostView);
+            const refDialog = componentRef.instance;
+            refDialog.integrationCode = integrationCode;
+            refDialog.reference = references;
+            refDialog.resource = resource;
+            refDialog.metaResource = metaResource;
+            refDialog.edit = !preview;
+            refDialog.preferResourceType = preferResourceType;
+            refDialog.theme = theme;
+            const domElem = componentRef.hostView.rootNodes[0];
+            const dialogIndex = this.dialogs.push(refDialog);
+            if (dialogIndex > 1) {
+                const modalPanel = domElem.querySelector('.Vlt-modal__panel');
+                if (modalPanel) {
+                    modalPanel.style.marginLeft = `${(dialogIndex * 5)}px`;
+                    modalPanel.style.marginTop = `${(dialogIndex * 10)}px`;
+                    modalPanel.style.marginBottom = `${((dialogIndex - 1) * 8)}px`;
+                }
+            }
+            document.body.appendChild(domElem);
+            refDialog.onComplete = (result) => {
+                if (result) {
+                    /* eslint-disable no-underscore-dangle */
+                    if (result._vgis) {
+                        observer.next({
+                            id: result._vgis.externalId || result._vgis.id,
+                            label: result._vgis.label,
+                            type: result._vgis.resourceType,
+                            raw: result
+                        });
+                    }
+                    else {
+                        console.log('onComplete non VGIS result', result);
+                    }
+                    /* eslint-enable no-underscore-dangle */
+                }
+                else {
+                    observer.next();
+                }
+                observer.complete();
+                this.appRef.detachView(componentRef.hostView);
+                componentRef.destroy();
+                this.dialogs.splice(dialogIndex - 1, 1);
+            };
+        });
+        return modalObservable;
+    }
+}
+MetaReferenceService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaReferenceService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+MetaReferenceService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaReferenceService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaReferenceService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ApplicationRef }, { type: i0.Injector }, { type: i1$1.Router }]; } });
+
+class MetaLayout {
+    constructor(viewContainerRef, ref, el, metaResource, referenceService) {
+        // console.log('MetaLayout', this.meta);
+        this.viewContainerRef = viewContainerRef;
+        this.ref = ref;
+        this.el = el;
+        this.metaResource = metaResource;
+        this.referenceService = referenceService;
+        this.optionalFields = {};
+        this.showAll = false;
+        this.fieldsVisibilityChanged = new Subject();
+        this.childResourceCardLabel = resourceCardLabel;
+    }
+    get isPersistedResource() {
+        // eslint-disable-next-line no-underscore-dangle
+        return this.resource && this.resource._vgis && (this.resource._vgis.externalId || this.resource._vgis.id);
+    }
+    ngOnInit() {
+        this.integrationCode = this.meta.integrationCode || this.integration;
+        this.resourceType = this.meta.resourceType || this.type;
+        this.parentForm = this.el.nativeElement.closest('form');
+        this.configureOptionalSections();
+        this.fieldsVisibilityChanged.pipe(debounceTime(100), distinctUntilChanged()).subscribe((value) => {
+            this.countOptionalFields();
+        });
+        setTimeout(() => {
+            this.countOptionalFields();
+        }, 0);
+        if (this.parentForm) {
+            this.parentForm.addEventListener('change', (e) => {
+                setTimeout(() => {
+                    this.fieldsVisibilityChanged.next(JSON.stringify(this.resource));
+                    this.countOptionalFields();
+                }, 0);
+            });
+        }
+        if (this.theme !== 'inherit') {
+            this.applyTheme();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes.meta) {
+            this.configureOptionalSections();
+            setTimeout(() => {
+                this.countOptionalFields();
+            }, 0);
+        }
+        else if (changes.theme) {
+            this.theme = changes.theme.currentValue;
+            this.applyTheme();
+        }
+    }
+    countOptionalFields() {
+        let count = 0;
+        const countSectionFields = (s) => {
+            for (const f of s.fields) {
+                if (f.fields && f.fields.length && !f.visible) {
+                    countSectionFields(f);
+                }
+                else {
+                    if (f.$optional && !f.$hidden) {
+                        count++;
+                    }
+                }
+            }
+        };
+        for (const s of this.meta.sections) {
+            const notOptionalAny = s.fields.find(f => !f.$optional);
+            s.$optional = !notOptionalAny;
+            if (!s.visible) {
+                countSectionFields(s);
+            }
+        }
+        this.optionalFieldsCount = count;
+    }
+    configureOptionalSections() {
+        if (this.meta && this.meta.sections) {
+            for (const s of this.meta.sections) {
+                Object.defineProperty(s, '$optional', {
+                    value: true,
+                    writable: true,
+                    configurable: true,
+                    enumerable: false
+                });
+            }
+        }
+    }
+    ngAfterContentChecked() {
+        this.ref.detectChanges();
+    }
+    toggleOptionalFields() {
+        this.showAll = !this.showAll;
+        this.ngAfterContentChecked();
+    }
+    async openChild(childResource, childModel) {
+        const metaRefDialog = await Promise.resolve().then(function () { return index; }).then(m => m.MetaRefDialog);
+        childResource.reference.parent = this.resource._vgis; // eslint-disable-line no-underscore-dangle
+        if (!this.refDialogComponent) {
+            this.refDialogComponent = this.viewContainerRef.createComponent(metaRefDialog);
+        }
+        this.referenceService.openDialog(this.refDialogComponent, this.metaResource, this.integrationCode, childResource.reference, childModel, childModel && (childResource.reference.editable === false) // is preview mode
+        ).subscribe((result) => {
+            if (result && result.raw) {
+                if (!this.resource[childResource.name]) {
+                    this.resource[childResource.name] = [];
+                }
+                if (childModel) {
+                    Object.assign(childModel, result.raw);
+                }
+                else {
+                    this.resource[childResource.name].push(result.raw);
+                }
+            }
+        });
+    }
+    applyTheme() {
+        const metaTheme = this.theme === 'dark' ? metaDark : metaLight;
+        for (const key of Object.keys(metaTheme.properties)) {
+            this.el.nativeElement.style.setProperty(key, metaTheme.properties[key]);
+        }
+    }
+}
+MetaLayout.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaLayout, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: MetaResourceService }, { token: MetaReferenceService }], target: i0.ɵɵFactoryTarget.Component });
+MetaLayout.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: MetaLayout, selector: "vgip-meta-layout", inputs: { meta: "meta", resource: "resource", integration: "integration", type: "type", preview: "preview", theme: "theme" }, usesOnChanges: true, ngImport: i0, template: "<div *ngFor='let section of meta.sections' class='Vlt-section' [ngClass]=\"{ shown: showAll || section.visible || (!meta.oneTimeOptional && !section.$optional) || (meta.oneTimeOptional && !optionalFieldsCount) }\">\n\t<h5 *ngIf='section.label' class=\"Vlt-section__title\">{{section.label}}</h5>\n\t<div style='overflow: visible;' [ngClass]=\"{ 'for-preview': preview }\">\n\t\t<small *ngIf='section.description' class=\"Vlt-form__element__hint\">{{section.description}}</small>\n\t\t<div>\n\t\t\t<ng-container *ngFor='let field of section.fields'>\n\t\t\t\t<vgip-meta-field *ngIf='!field.$hidden && (showAll || section.visible || !field.$optional)' [meta]='field' [parent]='resource' [integrationCode]='integrationCode' [resourceType]='resourceType' [preview]='preview' [ngClass]=\"{ shown: !field.$invisible && (showAll || true) }\" theme='inherit' [attr.data-theme]='theme'></vgip-meta-field>\n\t\t\t</ng-container>\n\t\t</div>\n\t</div>\n</div>\n<div *ngIf='isPersistedResource && meta.children && preview'>\n\t<div *ngFor='let child of meta.children'>\n\t\t<h5 class='Vlt-children__title'>\n\t\t\t<svg class=\"Vlt-icon\"><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-stack\" /></svg>&nbsp;\n\t\t\t{{child.label}} <span class='Vlt-grey'>({{(resource[child.name] || []).length}})</span>\n\t\t</h5>\n\t\t<div *ngFor=\"let c of resource[child.name]\" style='position: relative;'>\n\n\t\t\t<div class=\"Vlt-card Vlt-bg-white\">\n\t\t\t\t<div class=\"Vlt-card__content Vlt-btn-on-hover\">\n\t\t\t\t\t<h5>{{childResourceCardLabel(c)}}</h5>\n\t\t\t\t\t<div style='font-size: 12px; line-height: 16px;'>\n\t\t\t\t\t\tCreated: <span class='Vlt-black'>{{c._vgis.createdDate | date:'mediumDate'}}</span>\n\t\t\t\t\t\tEdited: <span class='Vlt-black'>{{c._vgis.modifiedDate | date:'medium'}}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"Vlt-badge Vlt-badge--app Vlt-badge--purple Vlt-badge--small\">{{c._vgis.resourceType}}</div>\n\t\t\t\t\t<div class=\"Vlt-btn-group Vlt-btn-group--hover\">\n\t\t\t\t\t\t<a *ngIf='c._vgis.externalLink' attr.href='{{c._vgis.externalLink}}' target='_blank' rel='noopener' rel='noopener' class=\"Vlt-btn Vlt-btn--tertiary Vlt-btn--icon\" aria-label='Open external'><svg style='margin-left: 0; margin-right: 0;'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-open\"/></svg></a>\n\t\t\t\t\t\t<button type='button' (click)='openChild(child, c)' class=\"Vlt-btn Vlt-btn--tertiary Vlt-btn--icon\"><svg style='margin-left: 0; margin-right: 0;'><use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ child.reference.editable ? 'edit' : 'eye-negative' }}\"/></svg></button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<button style='width: 100%; margin-top: 0; max-width: 100%;' type='button' (click)='openChild(child)' class=\"Vlt-btn Vlt-btn--small Vlt-btn--secondary\" [disabled]='child.creatable === false'>\n\t\t\t<svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>{{child.reference.label}}\n\t\t</button>\n\t</div>\n</div>\n<div *ngIf='!(meta.oneTimeOptional && showAll)' [ngClass]='{ centered: !meta.oneTimeOptional }'>\n\t<button *ngIf='!preview && optionalFieldsCount' type='button' (click)='toggleOptionalFields()' class=\"Vlt-btn Vlt-btn--small Vlt-btn--link more-button\" style='margin: 0; margin-bottom: 10px;'>\n\t\t<svg><use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-chevron-{{ showAll ? 'up' : 'down' }}\"/></svg>\n\t\t{{ showAll ? 'Hide' : 'Show' }} Optional Fields ({{optionalFieldsCount}})\n\t</button>\n</div>\n", styles: ["vgip-meta-field{display:none}vgip-meta-field.shown{display:initial}.Vlt-section__title{line-height:14px;padding:16px 16px 14px 3px;margin:-9px -1px 8px;background-color:var(--vgip-meta-resource-bg-color);color:var(--vgip-meta-resource-color);position:sticky;top:-9px;z-index:3;border-bottom:1px solid var(--vgip-meta-separator-color)}.Vlt-section{margin:0;padding-bottom:8px;display:none}.Vlt-section.shown{display:block}.Vlt-btn.vlt-add-child:hover{transform:scale(1.02)}.for-preview{margin-top:-6px}.Vlt-card{margin-bottom:16px;padding:16px}.Vlt-card .Vlt-btn-group.Vlt-btn-group--hover{right:-8px}button.more-button:focus{font-weight:700}.centered{text-align:center}.Vlt-btn--link{color:var(--vgip-meta-link-color)}.Vlt-btn--link:hover{color:var(--vgip-meta-link-hover-color)}.Vlt-btn--link svg{fill:var(--vgip-meta-link-color)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MetaField, selector: "vgip-meta-field", inputs: ["meta", "parent", "integrationCode", "resourceType", "index", "preview", "theme"], outputs: ["onChange", "onLeave"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaLayout, decorators: [{
+            type: Component,
+            args: [{ selector: 'vgip-meta-layout', template: "<div *ngFor='let section of meta.sections' class='Vlt-section' [ngClass]=\"{ shown: showAll || section.visible || (!meta.oneTimeOptional && !section.$optional) || (meta.oneTimeOptional && !optionalFieldsCount) }\">\n\t<h5 *ngIf='section.label' class=\"Vlt-section__title\">{{section.label}}</h5>\n\t<div style='overflow: visible;' [ngClass]=\"{ 'for-preview': preview }\">\n\t\t<small *ngIf='section.description' class=\"Vlt-form__element__hint\">{{section.description}}</small>\n\t\t<div>\n\t\t\t<ng-container *ngFor='let field of section.fields'>\n\t\t\t\t<vgip-meta-field *ngIf='!field.$hidden && (showAll || section.visible || !field.$optional)' [meta]='field' [parent]='resource' [integrationCode]='integrationCode' [resourceType]='resourceType' [preview]='preview' [ngClass]=\"{ shown: !field.$invisible && (showAll || true) }\" theme='inherit' [attr.data-theme]='theme'></vgip-meta-field>\n\t\t\t</ng-container>\n\t\t</div>\n\t</div>\n</div>\n<div *ngIf='isPersistedResource && meta.children && preview'>\n\t<div *ngFor='let child of meta.children'>\n\t\t<h5 class='Vlt-children__title'>\n\t\t\t<svg class=\"Vlt-icon\"><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-stack\" /></svg>&nbsp;\n\t\t\t{{child.label}} <span class='Vlt-grey'>({{(resource[child.name] || []).length}})</span>\n\t\t</h5>\n\t\t<div *ngFor=\"let c of resource[child.name]\" style='position: relative;'>\n\n\t\t\t<div class=\"Vlt-card Vlt-bg-white\">\n\t\t\t\t<div class=\"Vlt-card__content Vlt-btn-on-hover\">\n\t\t\t\t\t<h5>{{childResourceCardLabel(c)}}</h5>\n\t\t\t\t\t<div style='font-size: 12px; line-height: 16px;'>\n\t\t\t\t\t\tCreated: <span class='Vlt-black'>{{c._vgis.createdDate | date:'mediumDate'}}</span>\n\t\t\t\t\t\tEdited: <span class='Vlt-black'>{{c._vgis.modifiedDate | date:'medium'}}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"Vlt-badge Vlt-badge--app Vlt-badge--purple Vlt-badge--small\">{{c._vgis.resourceType}}</div>\n\t\t\t\t\t<div class=\"Vlt-btn-group Vlt-btn-group--hover\">\n\t\t\t\t\t\t<a *ngIf='c._vgis.externalLink' attr.href='{{c._vgis.externalLink}}' target='_blank' rel='noopener' rel='noopener' class=\"Vlt-btn Vlt-btn--tertiary Vlt-btn--icon\" aria-label='Open external'><svg style='margin-left: 0; margin-right: 0;'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-open\"/></svg></a>\n\t\t\t\t\t\t<button type='button' (click)='openChild(child, c)' class=\"Vlt-btn Vlt-btn--tertiary Vlt-btn--icon\"><svg style='margin-left: 0; margin-right: 0;'><use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ child.reference.editable ? 'edit' : 'eye-negative' }}\"/></svg></button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<button style='width: 100%; margin-top: 0; max-width: 100%;' type='button' (click)='openChild(child)' class=\"Vlt-btn Vlt-btn--small Vlt-btn--secondary\" [disabled]='child.creatable === false'>\n\t\t\t<svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>{{child.reference.label}}\n\t\t</button>\n\t</div>\n</div>\n<div *ngIf='!(meta.oneTimeOptional && showAll)' [ngClass]='{ centered: !meta.oneTimeOptional }'>\n\t<button *ngIf='!preview && optionalFieldsCount' type='button' (click)='toggleOptionalFields()' class=\"Vlt-btn Vlt-btn--small Vlt-btn--link more-button\" style='margin: 0; margin-bottom: 10px;'>\n\t\t<svg><use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-chevron-{{ showAll ? 'up' : 'down' }}\"/></svg>\n\t\t{{ showAll ? 'Hide' : 'Show' }} Optional Fields ({{optionalFieldsCount}})\n\t</button>\n</div>\n", styles: ["vgip-meta-field{display:none}vgip-meta-field.shown{display:initial}.Vlt-section__title{line-height:14px;padding:16px 16px 14px 3px;margin:-9px -1px 8px;background-color:var(--vgip-meta-resource-bg-color);color:var(--vgip-meta-resource-color);position:sticky;top:-9px;z-index:3;border-bottom:1px solid var(--vgip-meta-separator-color)}.Vlt-section{margin:0;padding-bottom:8px;display:none}.Vlt-section.shown{display:block}.Vlt-btn.vlt-add-child:hover{transform:scale(1.02)}.for-preview{margin-top:-6px}.Vlt-card{margin-bottom:16px;padding:16px}.Vlt-card .Vlt-btn-group.Vlt-btn-group--hover{right:-8px}button.more-button:focus{font-weight:700}.centered{text-align:center}.Vlt-btn--link{color:var(--vgip-meta-link-color)}.Vlt-btn--link:hover{color:var(--vgip-meta-link-hover-color)}.Vlt-btn--link svg{fill:var(--vgip-meta-link-color)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: MetaResourceService }, { type: MetaReferenceService }]; }, propDecorators: { meta: [{
+                type: Input
+            }], resource: [{
+                type: Input
+            }], integration: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], preview: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }] } });
+
+/*
+* @Author: Alexander.Vangelov@vonage.com
+* @Date: 2021-02-11 17:25:09
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2021-02-11 17:33:57
+*/
+class MetaAutofocusDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    ngAfterContentInit() {
+        if (this.vgipMetaFormAutofocus) {
+            setTimeout(() => {
+                const firstInput = this.elementRef.nativeElement.querySelector('.Vlt-form__element:not(.has-value) .main:not(.standalone):not([value])');
+                if (firstInput) {
+                    firstInput.focus();
+                }
+            }, 300);
+        }
+    }
+}
+MetaAutofocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaAutofocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+MetaAutofocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.0", type: MetaAutofocusDirective, selector: "[vgipMetaFormAutofocus]", inputs: { vgipMetaFormAutofocus: "vgipMetaFormAutofocus" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaAutofocusDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line
+                    selector: '[vgipMetaFormAutofocus]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { vgipMetaFormAutofocus: [{
+                type: Input
+            }] } });
+
+class MetaResource {
+    constructor(ref, el, metaResourceService, metaContext, metaMsgService) {
+        this.ref = ref;
+        this.el = el;
+        this.metaResourceService = metaResourceService;
+        this.metaContext = metaContext;
+        this.metaMsgService = metaMsgService;
+        this.done = new EventEmitter();
+        this.edit = true;
+        this.contactsSuggestionsDone = false;
+        this.onMenuClickout = () => {
+            delete this.resourceMenuVisible;
+            document.removeEventListener('click', this.onMenuClickout);
+        };
+    }
+    get niceFields() {
+        if (!this.resource.niceFields
+            && this.resource.meta
+            && this.resource.meta.layout
+            && this.resource.meta.layout.sections) {
+            const extractSectionFields = (s) => {
+                for (const f of s.fields) {
+                    if (f.name) {
+                        this.resource.niceFields[f.name] = f;
+                    }
+                    if (f.fields && f.fields.length) {
+                        extractSectionFields(f);
+                    }
+                }
+            };
+            this.resource.niceFields = {};
+            for (const s of this.resource.meta.layout.sections) {
+                extractSectionFields(s);
+            }
+        }
+        return this.resource.niceFields;
+    }
+    get fieldNames() {
+        const names = Object.keys(this.niceFields);
+        if (this.resource.meta.layout.children) {
+            for (const child of this.resource.meta.layout.children) {
+                names.push(child.name);
+            }
+        }
+        return names;
+    }
+    ngOnInit() {
+        this.integrationCode = (this.resource.integrationCode || '').toUpperCase();
+        this.resourceType = this.resource.resourceType;
+        this.service = (this.metaResourceServiceDelegated || this.metaResourceService).new(this.resource);
+        if (!this.model) {
+            this.model = {};
+        }
+        if (this.resource.activity && this.resource.ref.editable === false && !this.resource.externalId) {
+            this.resource.externalId = 'MISSING_EXTERNAL_ID';
+        }
+        this.isPersistent = this.resource && this.resource.externalId;
+        if (!this.resource.meta) {
+            this.loadMetadata(this.resource.layoutId);
+        }
+        else {
+            //   if (this.isPersistent && (!this.isEditable || this.resources[ref.name].meta.layout.children)) {
+            //     this.edit = false;
+            //   }
+            this.meta = this.resource.meta;
+            this.currentLayoutId = this.meta.layout.id;
+            this.getDetails();
+            this.getFieldsMap();
+        }
+        if (this.theme !== 'inherit') {
+            this.applyTheme();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes.theme) {
+            this.theme = changes.theme.currentValue;
+            if (this.theme !== 'inherit') {
+                this.applyTheme();
+            }
+        }
+    }
+    editMode() {
+        this.edit = true;
+    }
+    loadMetadata(layoutId, refresh = false) {
+        const layoutStoreKey = `vgis.layout_${this.metaContext.vgipUserId}_${this.integrationCode}_${this.resource.resourceType}`;
+        if (!layoutId) {
+            layoutId = localStorage.getItem(layoutStoreKey);
+        }
+        this.busy = true;
+        setTimeout(() => {
+            this.metaLoading = true;
+        }, 0);
+        delete this.resource.niceFields;
+        this.service.getMetadata(layoutId, refresh).subscribe({
+            next: (meta) => {
+                this.currentLayoutId = meta.layout.id;
+                if (layoutId !== meta.layout.id && !this.isPersistent) {
+                    localStorage.removeItem(layoutStoreKey);
+                }
+                this.meta = metaNormalizer(meta, this.integrationCode, this.resource.resourceType);
+                this.isEditable = this.meta.layout && this.meta.layout.editable !== false;
+                this.resource.meta = this.meta;
+                if (this.isPersistent && (!this.isEditable || this.meta.layout.children)) {
+                    this.edit = false;
+                }
+                delete this.busy;
+                this.getDetails();
+                this.getFieldsMap();
+            },
+            error: (metaError) => {
+                delete this.busy;
+                this.generalError = `Error loading resource metadata (${metaError.statusText})`;
+            },
+            complete: () => {
+                delete this.metaLoading;
+                this.forceUiUpdate();
+            }
+        });
+    }
+    changeLayout() {
+        localStorage.setItem(`vgis.layout_${this.metaContext.vgipUserId}_${this.integrationCode}_${this.resource.resourceType}`, this.currentLayoutId);
+        this.loadMetadata(this.currentLayoutId);
+    }
+    getDetails() {
+        if (this.resource && (this.resource.externalId || this.resource.id)) {
+            if (this.resource.parent && this.resource.activity // skip fetch
+                && this.meta.layout.editable === false && !this.meta.layout.children) {
+                for (const p in this.resource.activity) {
+                    if (this.resource.activity[p] && this.fieldNames.indexOf(p) !== -1) {
+                        this.model[p] = this.resource.activity[p];
+                    }
+                }
+            }
+            else {
+                this.busy = true;
+                this.service.getDetails((this.resource.externalId || this.resource.id), {
+                    eventId: this.resource.eventId !== 'NO_EVENT' ? this.resource.eventId : null, layoutId: this.resource.layoutId
+                }).subscribe({
+                    next: (resource) => {
+                        /* eslint-disable no-underscore-dangle */
+                        if (resource._vgis) {
+                            if (resource._vgis.eventId) {
+                                this.metaContext.vgipEventId = resource._vgis.eventId;
+                            }
+                            if (resource.layoutId && resource._vgis.layoutId !== this.currentLayoutId) {
+                                this.loadMetadata(resource._vgis.layoutId);
+                            }
+                        }
+                        /* eslint-enable no-underscore-dangle */
+                        for (const p in resource) {
+                            if (typeof (resource[p] !== 'undefined') && (this.fieldNames.indexOf(p) !== -1 || p === '_vgis')) {
+                                this.model[p] = resource[p];
+                            }
+                        }
+                        delete this.busy;
+                    },
+                    error: (resourceError) => {
+                        this.generalError = resourceError.error ? resourceError.error.message || resourceError.message : resourceError.message;
+                        delete this.busy;
+                    },
+                    complete: () => {
+                        this.forceUiUpdate();
+                    }
+                });
+            }
+        }
+        else {
+            if (this.resource.ref && this.resource.ref.activity) { // reuse failed autoactivities data
+                for (const p in this.resource.ref.activity) {
+                    if (this.resource.ref.activity && this.fieldNames.indexOf(p) !== -1) {
+                        this.model[p] = this.resource.ref.activity[p]; // VGIS-7215 (copy only valid fields)
+                    }
+                }
+            }
+            this.performAutoFill();
+        }
+    }
+    performAutoFill() {
+        this.metaMsgService.sendMessage(this.integrationCode, {
+            action: 'autoFill',
+            integration: this.integrationCode,
+            resourceType: this.resourceType,
+            resource: JSON.parse(JSON.stringify(this.model)),
+            fields: this.niceFields,
+            event: this.metaContext.context,
+            profile: this.metaContext.profiles[this.integrationCode]
+        }, (response) => {
+            if (!response.error) {
+                for (const afp in response.autoFill) {
+                    if (!this.model[afp]) {
+                        this.model[afp] = response.autoFill[afp];
+                    }
+                }
+            }
+        });
+    }
+    getFieldsMap() {
+        if (this.meta.fieldsMap) {
+            this.fieldsMap = this.meta.fieldsMap;
+            this.markContactables();
+            this.buildContactsSuggestions();
+            if (!this.resource.externalId) {
+                this.buildSubjectTemplate();
+                this.execTransformer();
+            }
+        }
+        else {
+            this.metaMsgService.sendMessage(this.integrationCode, { action: 'fieldsMap', integration: this.integrationCode, resourceType: this.resourceType }, (response) => {
+                if (!response.error) {
+                    this.fieldsMap = response.fieldsMap;
+                    this.markContactables();
+                    this.buildContactsSuggestions();
+                    if (!this.resource.externalId) {
+                        this.buildSubjectTemplate();
+                        this.execTransformer();
+                    }
+                }
+                else {
+                    console.log('No fields map', this.integrationCode, this.resourceType, response.error);
+                }
+            });
+        }
+    }
+    openResourceMenu() {
+        this.resourceMenuVisible = true;
+        setTimeout(() => {
+            document.addEventListener('click', this.onMenuClickout);
+        }, 10);
+    }
+    close(result) {
+        this.done.emit(result);
+    }
+    showParsedError(resourceForm, parsedError) {
+        this.formErrors = parsedError.message || 'There is a problem with one or more fields';
+        if (parsedError.errors && parsedError.errors.length) {
+            this.formErrors += ` (${parsedError.errors.map(e => e.message).join(', ')})`;
+            for (const pe of parsedError.errors) {
+                if (resourceForm.controls[pe.field]) {
+                    resourceForm.controls[pe.field].setErrors({ invalid: true, custom: pe.message });
+                }
+            }
+            setTimeout(() => {
+                const firstInvalid = this.el.nativeElement.querySelector('.Vlt-form__element--error .main:not(.standalone)');
+                if (firstInvalid) {
+                    firstInvalid.focus();
+                }
+            });
+        }
+    }
+    submit(resourceForm) {
+        delete this.formErrors;
+        resourceForm.form.submitted = true;
+        if (resourceForm.valid) {
+            this.busy = true;
+            if (this.metaContext.vgipEventId) {
+                /* eslint-disable no-underscore-dangle */
+                if (!this.model._vgis) {
+                    this.model._vgis = {
+                        connector: this.integrationCode,
+                        resourceType: this.resourceType
+                    };
+                }
+                this.model._vgis.layoutId = this.currentLayoutId;
+                // eslint-disable-next-line max-len
+                // this.model._vgis.timeZoneOffsetInMinutes = 0; // we are not providing timezone anymore (as V3), instead the 'time' and 'date' objects are converted so the UTC time/date is correct
+                this.model._vgis.eventId = this.metaContext.vgipEventId;
+                /* eslint-enable no-underscore-dangle */
+            }
+            this.service.save(this.model).subscribe((result) => {
+                this.close(result);
+                delete this.busy;
+            }, (errorResult) => {
+                if ((errorResult.status === 422 && errorResult.error && !errorResult.error.errors && errorResult.error.integrationError)
+                    || (errorResult.error && errorResult.error.errors && errorResult.error.errors.length && !errorResult.error.errors[0].field)
+                // backend implemented error parsing but broken VGIS-7366
+                ) {
+                    this.formErrors = 'There is a problem with one or more fields';
+                    try {
+                        this.metaMsgService.sendMessage(this.integrationCode, {
+                            action: 'parseErrorMessage',
+                            integrationCode: this.integrationCode,
+                            resourceType: errorResult.error.resourceType,
+                            rawError: errorResult.error.integrationError,
+                            profile: this.metaContext.profiles[this.integrationCode.toUpperCase()]
+                        }, (response) => {
+                            if (response.parsedError) {
+                                this.showParsedError(resourceForm, response.parsedError);
+                            }
+                            else {
+                                // eslint-disable-next-line no-underscore-dangle
+                                console.error('No error parser for', this.integrationCode, errorResult.error.integrationError);
+                                this.formErrors = errorResult.error;
+                            }
+                        });
+                    }
+                    catch (err) {
+                        console.log('....', err);
+                    }
+                    ;
+                }
+                else if (errorResult.status === 422) {
+                    this.showParsedError(resourceForm, errorResult.error);
+                }
+                else {
+                    this.formErrors = errorResult.error;
+                }
+                delete this.busy;
+            });
+        }
+        else {
+            this.formErrors = Object.keys(resourceForm.controls)
+                .filter((c) => resourceForm.controls[c].invalid)
+                .map((f) => (this.niceFields[f] ? (this.niceFields[f].label || f) : f)).join(', ');
+            setTimeout(() => {
+                const selector = `form[name="${this.resourceType}"] .Vlt-form__element--error .main:not(.standalone)`;
+                const firstInvalid = this.el.nativeElement.querySelector(selector);
+                if (firstInvalid) {
+                    firstInvalid.focus();
+                }
+            });
+        }
+    }
+    clearFormErrors() {
+        delete this.formErrors;
+    }
+    suggestFieldProperty(key, value) {
+        if (key && value) {
+            const fieldNames = this.fieldNames;
+            if (this.model) {
+                const nestMatch = key.match(/(\S+)\[\d\]\.(\S+)/);
+                if (nestMatch && fieldNames.indexOf(nestMatch[1]) !== -1) {
+                    this.model[nestMatch[1]] = [];
+                    const nestKeys = {};
+                    nestKeys[nestMatch[2]] = value;
+                    this.model[nestMatch[1]].push(nestKeys);
+                }
+                else if (fieldNames.indexOf(key) !== -1) {
+                    this.model[key] = value;
+                }
+            }
+        }
+    }
+    execTransformer() {
+        if (this.metaContext && this.fieldsMap) {
+            setTimeout(() => {
+                this.suggestFieldProperty(this.fieldsMap.phoneNumber, this.metaContext.phoneNumber);
+                if (this.fieldsMap.firstName || this.fieldsMap.lastName) {
+                    const names = (this.metaContext.displayName || '').split(' ');
+                    this.suggestFieldProperty(this.fieldsMap.firstName, names[0]);
+                    this.suggestFieldProperty(this.fieldsMap.lastName, names[1]);
+                }
+                else if (this.fieldsMap.displayName) {
+                    this.suggestFieldProperty(this.fieldsMap.displayName, this.metaContext.displayName);
+                }
+            }, 100);
+        }
+    }
+    markContactables() {
+        if (this.fieldsMap.contactables && this.fieldsMap.contactables.length) {
+            for (const c of this.fieldsMap.contactables) {
+                const field = this.niceFields[c];
+                if (field) {
+                    Object.defineProperty(field, '$isContactable', {
+                        value: true,
+                        configurable: true,
+                        enumerable: false
+                    });
+                }
+            }
+        }
+    }
+    buildSubjectTemplate() {
+        if (!this.model[this.fieldsMap.subject] && this.fieldsMap.subject && this.niceFields[this.fieldsMap.subject]) {
+            let subjectTemplate;
+            if (this.niceFields[this.fieldsMap.subject].default) {
+                subjectTemplate = this.niceFields[this.fieldsMap.subject].default.id || this.niceFields[this.fieldsMap.subject].default;
+            }
+            else if (this.metaContext.profiles[this.integrationCode]) {
+                const profile = this.metaContext.profiles[this.integrationCode] || {};
+                subjectTemplate = profile.defaultSubject ?
+                    profile.defaultSubject[((this.metaContext.context || 'CALL').type || '').toUpperCase()] :
+                    profile.activityDefaultSubjectTemplate;
+            }
+            if (subjectTemplate) {
+                this.model[this.fieldsMap.subject] = templateBuilder(this.metaContext, subjectTemplate);
+            }
+        }
+    }
+    buildContactsSuggestions() {
+        // let hasDefaultContact = false;
+        if (this.metaContext.contactables[this.integrationCode] && this.meta.layout && this.meta.layout.sections) {
+            for (const s of this.meta.layout.sections) {
+                for (const f of (s.fields || [])) {
+                    if (f.type === 'reference') {
+                        const refTypes = (f.reference.length ? f.reference : [f.reference]).map(r => r.name);
+                        for (const c of this.metaContext.contactables[this.integrationCode]) {
+                            if (refTypes.indexOf(c.resourceType || c.type) !== -1) {
+                                if (!f.suggestions) {
+                                    f.suggestions = [];
+                                }
+                                else {
+                                    f.suggestions = f.suggestions.filter(sg => !sg.auto);
+                                }
+                                let tLabel = c.displayName || c.name;
+                                if (c.phoneNumbers) {
+                                    tLabel += (' ✆' + c.phoneNumbers.map(p => p.phoneNumber).join(','));
+                                }
+                                f.suggestions.push({
+                                    id: c.externalId || c.identifier || c.id,
+                                    label: tLabel,
+                                    type: c.resourceType || c.type,
+                                    auto: true
+                                });
+                            }
+                        }
+                        if ((this.fieldsMap.contactables || []).indexOf(f.name) !== -1) { // evaluate usability?
+                            f.alwaysVisible = true;
+                        }
+                        // if (
+                        //   !hasDefaultContact && this.metaContext.defaultContactables[this.integrationCode]
+                        //   && refTypes.indexOf(this.metaContext.defaultContactables[this.integrationCode].type) !== -1
+                        // ) {
+                        //   this.resource[f.name] = this.metaContext.defaultContactables[this.integrationCode];
+                        //   hasDefaultContact = true;
+                        // } else if (!hasDefaultContact && this.fieldsMap.contactables && f.suggestions && f.suggestions.length === 1) {
+                        //   if (this.fieldsMap.contactables.indexOf(f.name) !== -1 && !f.default) {
+                        //     f.default = f.suggestions[0];
+                        //     hasDefaultContact = true;
+                        //   }
+                        // }
+                    }
+                }
+            }
+            this.contactsSuggestionsDone = true;
+        }
+    }
+    applyTheme() {
+        const metaTheme = this.theme === 'dark' ? metaDark : metaLight;
+        console.log('resource apply theme', this.theme);
+        for (const key of Object.keys(metaTheme.properties)) {
+            this.el.nativeElement.style.setProperty(key, metaTheme.properties[key]);
+        }
+    }
+    forceUiUpdate() {
+        // this.ref.detectChanges();
+        const e = document.createEvent('Events');
+        e.initEvent('click', true, false);
+        this.el.nativeElement.dispatchEvent(e);
+    }
+}
+MetaResource.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaResource, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: MetaResourceService }, { token: MetaContextService }, { token: MetaMsgService }], target: i0.ɵɵFactoryTarget.Component });
+MetaResource.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: MetaResource, selector: "vgip-meta-resource", inputs: { resource: "resource", model: "model", metaResourceServiceDelegated: "metaResourceServiceDelegated", theme: "theme" }, outputs: { done: "done" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf='generalError' class=\"Vlt-callout Vlt-callout--critical\" style='overflow: auto; margin: 20px;'>\n\t<i></i>\n\t<div class=\"Vlt-callout__content\">\n\t\t<p>{{generalError}}</p>\n\t</div>\n</div>\n<div *ngIf='!meta' class=\"Vlt-progress\">\n\t<div class=\"Vlt-progress__bar\" [ngClass]=\"{ loading: metaLoading }\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuetext=\"Loading Metadata\" aria-valuemax=\"100\"></div>\n</div>\n<form [vgipMetaFormAutofocus]='!resource || !resource.externalId' *ngIf='meta && !generalError' #resourceForm=\"ngForm\" [name]='resource.resourceType' (ngSubmit)='submit(resourceForm)' novalidate>\n\t<div class='form-content' style='overflow: hidden;'>\n\t\t<div [ngClass]=\"{ 'Vlt-callout--dismissed': !formErrors }\" class=\"Vlt-callout Vlt-callout--banner Vlt-callout--critical\">\n\t\t\t<i></i>\n\t\t\t<div class=\"Vlt-callout__content\" style=\"margin-top: auto;\">\n\t\t\t\t<p>There is a problem with one or more fields</p>\n\t\t\t\t<small style='font-weight: 600; font-size: 1.0em;' *ngIf='formErrors'>{{ formErrors.message || formErrors }}</small>\n\t\t\t</div>\n\t\t\t<button type='button' class=\"Vlt-callout__dismiss\" (click)='clearFormErrors()' aria-label=\"Dismiss\"></button>\n\t\t</div>\n\t\t<div class=\"Vlt-card__content\" style='min-height: 40px;'>\n\t\t\t<vgip-meta-layout *ngIf='edit' [meta]='meta.layout' [resource]='model' [preview]='false' [integration]='meta.integration' [type]='resource.resourceType' theme='inherit'></vgip-meta-layout>\n\t\t\t<vgip-meta-layout *ngIf='!edit' [meta]='meta.layout' [resource]='model' [preview]='true' [integration]='meta.integration' [type]='resource.resourceType' theme='inherit'></vgip-meta-layout>\n\t\t</div>\n\t</div>\n\t<div class=\"Vlt-card__footer\">\n\t\t<button class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--outline\" type='button' aria-label='Cancel' (click)='close()'>\n\t\t\t{{ edit ? 'Cancel' : 'Close' }}\n\t\t</button>\n\t\t<button *ngIf='edit' class=\"Vlt-btn Vlt-btn--app\" [ngClass]=\"{ 'Vlt-btn--primary': isPersistent, 'Vlt-btn--secondary': !isPersistent }\" type='submit'>\n\t\t\t{{ (resource && resource.externalId) ? 'Update' : 'Create' }}\n\t\t</button>\n\t\t<button (click)='editMode()' *ngIf='!edit && isEditable' [disabled]='!isEditable' class=\"Vlt-btn Vlt-btn--app Vlt-btn--primary\" type='button' aria-label='Edit'>\n\t\t\tEdit\n\t\t</button>\n\t\t<div style='margin-right: 8px; flex: 1;'>\n\t\t\t<div *ngIf='meta.availableLayouts && meta.availableLayouts.length' class=\"Vlt-form__element Vlt-form__element--big\" style='padding: 0; margin: -8px -18px -8px 0;'>\n\t\t\t\t<div class=\"Vlt-select\">\n\t\t\t\t\t<label style='all: inherit;'>\n\t\t\t\t\t\t<select style='border: 0; margin-top: 3px; background: transparent;' (change)='changeLayout()' [(ngModel)]='currentLayoutId' [ngModelOptions]='{ standalone: true }' [disabled]='isPersistent'>\n\t\t\t\t\t\t\t<option selected disabled>Select layout</option>\n\t\t\t\t\t\t\t<option *ngFor='let layout of meta.availableLayouts' [ngValue]='layout.id'>{{layout.name}}</option>\n\t\t\t\t\t\t</select>\n\t\t\t\t\t\t<label>Layout</label>\n\t\t\t\t\t</label>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"Vlt-dropdown resource-menu\" [ngClass]=\"{ 'Vlt-dropdown--expanded': resourceMenuVisible }\" style='margin-left: 2px;'>\n\t\t\t<div class=\"Vlt-dropdown__panel\" style='bottom: 40px; right: -4px; top: initial;'>\n\t\t\t\t<div class=\"Vlt-dropdown__panel__content\">\n\t\t\t\t\t<a class=\"Vlt-dropdown__link\" (click)='loadMetadata(currentLayoutId, true)'>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<svg class='Vlt-icon Vlt-icon--smaller'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-refresh\"/></svg>&nbsp;&nbsp;Refresh metadata\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</a>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"Vlt-dropdown__trigger\">\n\t\t\t\t<button type='button' (click)='openResourceMenu()' class=\"Vlt-btn Vlt-btn--link\" aria-label='Resource menu'>\n\t\t\t\t\t<svg class='Vlt-icon Vlt-icon--small' style='margin: 0;'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-more-v-negative\"/></svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</form>\n<div class='busy-mask' [ngClass]=\"{ active: busy }\">\n\t<div style='height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;'>\n\t\t<div class=\"Vlt-spinner\"></div>\n\t</div>\n</div>", styles: [":host{flex:1;display:flex;flex-direction:column;min-height:0;color:var(--vgip-meta-resource-color)}.Vlt-callout--banner{justify-content:initial;text-align:initial;overflow-y:auto}.Vlt-callout--banner.Vlt-callout--dismissed{padding:0}.Vlt-callout--banner:not(.Vlt-callout--dismissed){min-height:78px}.Vlt-spinner:before,.Vlt-spinner:after{border:6px solid #616266;border-color:#616266 transparent transparent}.Vlt-card__content{padding:8px 8px 8px 16px;display:flex;flex-direction:column;min-height:0;flex:1;overflow-y:scroll;overflow-x:hidden;background-color:var(--vgip-meta-resource-bg-color)}@media (hover: none){.Vlt-card__content{padding-right:16px}}.Vlt-card__content::-webkit-scrollbar{width:8px}.Vlt-card__content::-webkit-scrollbar-thumb{background-color:var(--vgip-meta-scrollbar-color);border:2px solid transparent;border-radius:6px;background-clip:content-box}.Vlt-card__footer{background:var(--vgip-meta-resource-bar-color);border-top:1px solid var(--vgip-meta-separator-color);display:flex;flex-direction:row;margin:16px -24px -24px;padding:8px 8px 8px 16px;box-shadow:0 0 4px #00000040;z-index:1}.Vlt-card__footer .Vlt-select select{color:var(--vgip-meta-input-color)}.Vlt-card__footer .Vlt-select select:disabled{background:initial;cursor:not-allowed}.Vlt-card__footer .Vlt-select:after{background-image:var(--vgip-meta-dropdown-icon)}.Vlt-card__footer .resource-menu .Vlt-icon:not(:hover){fill:var(--vgip-meta-input-label-color)}.Vlt-card__footer button.Vlt-btn--secondary{border:none;box-shadow:inset 0 0 0 1px var(--vgip-meta-button-border-color)}.Vlt-card__footer button.Vlt-btn--secondary:not([type=submit]){color:var(--vgip-meta-input-color)}.Vlt-card__footer button.Vlt-btn--secondary:hover{box-shadow:inset 0 0 0 1px var(--vgip-meta-input-accent-color)}.Vlt-card__footer button.Vlt-btn--secondary:hover[type=submit]{background-color:var(--vgip-meta-submit-hover-bg-color)}.Vlt-progress{margin:0;position:sticky}.Vlt-progress .Vlt-progress__bar{width:0;transition:width 5s}.Vlt-progress .Vlt-progress__bar.loading{width:100%}form{border-radius:6px;padding:24px;display:flex;flex-direction:column;min-height:0;flex:1}form .form-content{margin:-24px -24px -16px;padding-bottom:0;flex:1;display:flex;flex-direction:column}.busy-mask{position:absolute;inset:0;background:rgba(0,0,0,.32);opacity:1;z-index:898;display:none;border-bottom-left-radius:6px;border-bottom-right-radius:6px;margin:1px;cursor:progress}.busy-mask.active{display:block}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MetaLayout, selector: "vgip-meta-layout", inputs: ["meta", "resource", "integration", "type", "preview", "theme"] }, { kind: "directive", type: MetaAutofocusDirective, selector: "[vgipMetaFormAutofocus]", inputs: ["vgipMetaFormAutofocus"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaResource, decorators: [{
+            type: Component,
+            args: [{ selector: 'vgip-meta-resource', template: "<div *ngIf='generalError' class=\"Vlt-callout Vlt-callout--critical\" style='overflow: auto; margin: 20px;'>\n\t<i></i>\n\t<div class=\"Vlt-callout__content\">\n\t\t<p>{{generalError}}</p>\n\t</div>\n</div>\n<div *ngIf='!meta' class=\"Vlt-progress\">\n\t<div class=\"Vlt-progress__bar\" [ngClass]=\"{ loading: metaLoading }\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuetext=\"Loading Metadata\" aria-valuemax=\"100\"></div>\n</div>\n<form [vgipMetaFormAutofocus]='!resource || !resource.externalId' *ngIf='meta && !generalError' #resourceForm=\"ngForm\" [name]='resource.resourceType' (ngSubmit)='submit(resourceForm)' novalidate>\n\t<div class='form-content' style='overflow: hidden;'>\n\t\t<div [ngClass]=\"{ 'Vlt-callout--dismissed': !formErrors }\" class=\"Vlt-callout Vlt-callout--banner Vlt-callout--critical\">\n\t\t\t<i></i>\n\t\t\t<div class=\"Vlt-callout__content\" style=\"margin-top: auto;\">\n\t\t\t\t<p>There is a problem with one or more fields</p>\n\t\t\t\t<small style='font-weight: 600; font-size: 1.0em;' *ngIf='formErrors'>{{ formErrors.message || formErrors }}</small>\n\t\t\t</div>\n\t\t\t<button type='button' class=\"Vlt-callout__dismiss\" (click)='clearFormErrors()' aria-label=\"Dismiss\"></button>\n\t\t</div>\n\t\t<div class=\"Vlt-card__content\" style='min-height: 40px;'>\n\t\t\t<vgip-meta-layout *ngIf='edit' [meta]='meta.layout' [resource]='model' [preview]='false' [integration]='meta.integration' [type]='resource.resourceType' theme='inherit'></vgip-meta-layout>\n\t\t\t<vgip-meta-layout *ngIf='!edit' [meta]='meta.layout' [resource]='model' [preview]='true' [integration]='meta.integration' [type]='resource.resourceType' theme='inherit'></vgip-meta-layout>\n\t\t</div>\n\t</div>\n\t<div class=\"Vlt-card__footer\">\n\t\t<button class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--outline\" type='button' aria-label='Cancel' (click)='close()'>\n\t\t\t{{ edit ? 'Cancel' : 'Close' }}\n\t\t</button>\n\t\t<button *ngIf='edit' class=\"Vlt-btn Vlt-btn--app\" [ngClass]=\"{ 'Vlt-btn--primary': isPersistent, 'Vlt-btn--secondary': !isPersistent }\" type='submit'>\n\t\t\t{{ (resource && resource.externalId) ? 'Update' : 'Create' }}\n\t\t</button>\n\t\t<button (click)='editMode()' *ngIf='!edit && isEditable' [disabled]='!isEditable' class=\"Vlt-btn Vlt-btn--app Vlt-btn--primary\" type='button' aria-label='Edit'>\n\t\t\tEdit\n\t\t</button>\n\t\t<div style='margin-right: 8px; flex: 1;'>\n\t\t\t<div *ngIf='meta.availableLayouts && meta.availableLayouts.length' class=\"Vlt-form__element Vlt-form__element--big\" style='padding: 0; margin: -8px -18px -8px 0;'>\n\t\t\t\t<div class=\"Vlt-select\">\n\t\t\t\t\t<label style='all: inherit;'>\n\t\t\t\t\t\t<select style='border: 0; margin-top: 3px; background: transparent;' (change)='changeLayout()' [(ngModel)]='currentLayoutId' [ngModelOptions]='{ standalone: true }' [disabled]='isPersistent'>\n\t\t\t\t\t\t\t<option selected disabled>Select layout</option>\n\t\t\t\t\t\t\t<option *ngFor='let layout of meta.availableLayouts' [ngValue]='layout.id'>{{layout.name}}</option>\n\t\t\t\t\t\t</select>\n\t\t\t\t\t\t<label>Layout</label>\n\t\t\t\t\t</label>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"Vlt-dropdown resource-menu\" [ngClass]=\"{ 'Vlt-dropdown--expanded': resourceMenuVisible }\" style='margin-left: 2px;'>\n\t\t\t<div class=\"Vlt-dropdown__panel\" style='bottom: 40px; right: -4px; top: initial;'>\n\t\t\t\t<div class=\"Vlt-dropdown__panel__content\">\n\t\t\t\t\t<a class=\"Vlt-dropdown__link\" (click)='loadMetadata(currentLayoutId, true)'>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<svg class='Vlt-icon Vlt-icon--smaller'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-refresh\"/></svg>&nbsp;&nbsp;Refresh metadata\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</a>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"Vlt-dropdown__trigger\">\n\t\t\t\t<button type='button' (click)='openResourceMenu()' class=\"Vlt-btn Vlt-btn--link\" aria-label='Resource menu'>\n\t\t\t\t\t<svg class='Vlt-icon Vlt-icon--small' style='margin: 0;'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-more-v-negative\"/></svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</form>\n<div class='busy-mask' [ngClass]=\"{ active: busy }\">\n\t<div style='height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;'>\n\t\t<div class=\"Vlt-spinner\"></div>\n\t</div>\n</div>", styles: [":host{flex:1;display:flex;flex-direction:column;min-height:0;color:var(--vgip-meta-resource-color)}.Vlt-callout--banner{justify-content:initial;text-align:initial;overflow-y:auto}.Vlt-callout--banner.Vlt-callout--dismissed{padding:0}.Vlt-callout--banner:not(.Vlt-callout--dismissed){min-height:78px}.Vlt-spinner:before,.Vlt-spinner:after{border:6px solid #616266;border-color:#616266 transparent transparent}.Vlt-card__content{padding:8px 8px 8px 16px;display:flex;flex-direction:column;min-height:0;flex:1;overflow-y:scroll;overflow-x:hidden;background-color:var(--vgip-meta-resource-bg-color)}@media (hover: none){.Vlt-card__content{padding-right:16px}}.Vlt-card__content::-webkit-scrollbar{width:8px}.Vlt-card__content::-webkit-scrollbar-thumb{background-color:var(--vgip-meta-scrollbar-color);border:2px solid transparent;border-radius:6px;background-clip:content-box}.Vlt-card__footer{background:var(--vgip-meta-resource-bar-color);border-top:1px solid var(--vgip-meta-separator-color);display:flex;flex-direction:row;margin:16px -24px -24px;padding:8px 8px 8px 16px;box-shadow:0 0 4px #00000040;z-index:1}.Vlt-card__footer .Vlt-select select{color:var(--vgip-meta-input-color)}.Vlt-card__footer .Vlt-select select:disabled{background:initial;cursor:not-allowed}.Vlt-card__footer .Vlt-select:after{background-image:var(--vgip-meta-dropdown-icon)}.Vlt-card__footer .resource-menu .Vlt-icon:not(:hover){fill:var(--vgip-meta-input-label-color)}.Vlt-card__footer button.Vlt-btn--secondary{border:none;box-shadow:inset 0 0 0 1px var(--vgip-meta-button-border-color)}.Vlt-card__footer button.Vlt-btn--secondary:not([type=submit]){color:var(--vgip-meta-input-color)}.Vlt-card__footer button.Vlt-btn--secondary:hover{box-shadow:inset 0 0 0 1px var(--vgip-meta-input-accent-color)}.Vlt-card__footer button.Vlt-btn--secondary:hover[type=submit]{background-color:var(--vgip-meta-submit-hover-bg-color)}.Vlt-progress{margin:0;position:sticky}.Vlt-progress .Vlt-progress__bar{width:0;transition:width 5s}.Vlt-progress .Vlt-progress__bar.loading{width:100%}form{border-radius:6px;padding:24px;display:flex;flex-direction:column;min-height:0;flex:1}form .form-content{margin:-24px -24px -16px;padding-bottom:0;flex:1;display:flex;flex-direction:column}.busy-mask{position:absolute;inset:0;background:rgba(0,0,0,.32);opacity:1;z-index:898;display:none;border-bottom-left-radius:6px;border-bottom-right-radius:6px;margin:1px;cursor:progress}.busy-mask.active{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: MetaResourceService }, { type: MetaContextService }, { type: MetaMsgService }]; }, propDecorators: { resource: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], metaResourceServiceDelegated: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], done: [{
+                type: Output
+            }] } });
+
+class MetaRefDialog {
+    constructor(el) {
+        this.el = el;
+        this.resources = {};
+        this.models = {};
+        this.services = {};
+        this.keepOrder = (a, b) => a;
+        this.keyEventListener = (event) => {
+            if (event && event.key === 'Escape') {
+                document.removeEventListener('keydown', this.keyEventListener);
+                this.dismiss();
+            }
+        };
+    }
+    get isEditable() {
+        return this.resources[this.currentResource].meta.layout.editable !== false;
+    }
+    get isPersistent() {
+        return this.resource && (this.resource.externalId || this.resource.id);
+    }
+    ngOnInit() {
+        let references = (this.reference instanceof Array) ? this.reference : [this.reference];
+        /* eslint-disable no-underscore-dangle */
+        if (this.resource && this.resource._vgis) {
+            this.fullResource = this.resource;
+            this.resource = this.resource._vgis;
+        }
+        /* eslint-enable no-underscore-dangle */
+        if (this.resource) {
+            references = references.filter((r) => {
+                const resType = r.name || r.resourceType || '';
+                // comparing case insensitive, because of Zendesk comment vs Comment
+                return (resType.id || resType || '').toLowerCase() === (this.resource.resourceType || this.resource.type || '').toLowerCase();
+            });
+        }
+        for (const ref of references) {
+            if (!ref.name) {
+                ref.name = ref.resourceType; // when the resource comes from resources API, not from metadata
+            }
+            if (!this.currentResource) {
+                this.currentResource = ref.name;
+            }
+            if (ref.name === this.preferResourceType) {
+                this.currentResource = this.preferResourceType;
+            }
+            const rs = {
+                integrationCode: this.integrationCode,
+                resourceType: ref.resourceType || ref.name,
+                ref
+            };
+            if (this.resource) {
+                rs.externalId = this.resource.id || this.resource.externalId;
+                if (this.resource.eventId) {
+                    rs.eventId = this.resource.eventId;
+                }
+                if (this.fullResource) {
+                    rs.activity = this.fullResource;
+                }
+                if (this.resource.layoutId) {
+                    rs.layoutId = this.resource.layoutId;
+                }
+            }
+            rs.parent = ref.parent;
+            this.resources[ref.name] = rs;
+            this.models[ref.name] = {};
+            if (this.resource) {
+                this.models[ref.name]._vgis = this.resource; // eslint-disable-line no-underscore-dangle
+            }
+        }
+        this.modal = this.el.nativeElement.childNodes[0];
+        this.modal.classList.remove('Vlt-modal--out');
+        this.modal.classList.add('Vlt-modal_visible');
+        document.addEventListener('keydown', this.keyEventListener);
+        if (this.integrationCode === 'mocks') {
+            this.integrationIcon = 'Brand-icon-vonage';
+        }
+        else {
+            switch (this.integrationCode.toLowerCase()) {
+                case 'office365':
+                    this.integrationIcon = 'Brand-icon-office-color';
+                    break;
+                case 'sugar':
+                    this.integrationIcon = 'Brand-icon-sugarcrm-color';
+                    break;
+                case 'msdynamics':
+                    this.integrationIcon = 'Brand-icon-dynamics-color';
+                    break;
+                default:
+                    this.integrationIcon = `Brand-icon-${(this.integrationCode || '').toLowerCase()}-color`;
+            }
+        }
+        this.applyTheme();
+    }
+    close() {
+        this.modal.classList.remove('Vlt-modal_visible');
+        this.modal.classList.add('Vlt-modal--out');
+    }
+    dismiss() {
+        this.close();
+        this.onComplete(null);
+    }
+    onResourceDone(result) {
+        this.close();
+        this.onComplete(result);
+    }
+    selectResource(resource) {
+        this.currentResource = resource;
+    }
+    applyTheme() {
+        const metaTheme = this.theme === 'dark' ? metaDark : metaLight;
+        for (const key of Object.keys(metaTheme.properties)) {
+            this.el.nativeElement.style.setProperty(key, metaTheme.properties[key]);
+        }
+    }
+}
+MetaRefDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaRefDialog, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+MetaRefDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: MetaRefDialog, selector: "ng-component", ngImport: i0, template: "<div class='Vlt-modal Vlt-modal--large'>\n  <div class=\"Vlt-modal__panel\">\n    <div class=\"Vlt-tabs\">\n      <div class='Vlt-tabs__header--background'>\n        <div class=\"Vlt-tabs__header Vlt-tabs__header--shadow\">\n          <svg class=\"Vlt-icon\" [ngStyle]=\"{fill: integrationIcon === 'Brand-icon-vonage' ? 'var(--vgip-meta-input-color)' : ''}\"><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\" /></svg>\n          <div *ngFor='let r of resources | keyvalue: keepOrder' (click)='selectResource(r.key)' class=\"Vlt-tabs__link\" [ngClass]=\"{ 'Vlt-tabs__link_active': currentResource === r.key}\">\n            {{r.key}}\n          </div>\n          <div class=\"Vlt-modal__dismiss\" (click)=\"dismiss()\">\n            <svg class=\"Vlt-icon\"><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\" /></svg>\n          </div>\n        </div>\n      </div>\n      <div class=\"Vlt-tabs__content\" style='min-height: 90px;'>\n        <ng-container *ngFor='let r of resources | keyvalue: keepOrder'>\n          <div *ngIf='currentResource === r.key' class=\"Vlt-tabs__panel Vlt-tabs__panel_active\">\n            <vgip-meta-resource [resource]='r.value' [model]='models[r.key]' [metaResourceServiceDelegated]='metaResource' (done)='onResourceDone($event)' theme='inherit' [attr.data-theme]='theme'></vgip-meta-resource>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".Vlt-modal_visible{background:var(--vgip-meta-overlay-background)}.Vlt-modal__panel{padding:0;background:var(--vgip-meta-resource-bg-color);overflow:hidden}@media only screen and (max-width: 575px){.Vlt-modal__panel{height:100%;width:100%;max-height:none;border-bottom-left-radius:0;border-bottom-right-radius:0;margin:10px 6px 0}.Vlt-modal__panel ::ng-deep .busy-mask{min-height:calc(100vh - 58px)}}.Vlt-modal__panel .Vlt-tabs__header--background{border-top-left-radius:5px;border-top-right-radius:5px}.Vlt-modal__panel .Vlt-tabs__header{background:var(--vgip-meta-resource-bar-color);padding-left:52px;padding-right:45px;border-bottom:0;flex-wrap:wrap;min-height:52px;max-height:52px;align-items:center}.Vlt-modal__panel .Vlt-tabs__header>.Vlt-icon{position:absolute;left:14px}.Vlt-modal__panel .Vlt-tabs__header h5{margin-bottom:0;font-weight:initial}.Vlt-modal__panel .Vlt-tabs__header .Vlt-tabs__link{padding-top:4px;padding-bottom:2px;color:var(--vgip-meta-input-label-color);text-transform:capitalize}.Vlt-modal__panel .Vlt-tabs__header .Vlt-tabs__link_active{color:var(--vgip-meta-input-accent-color)}.Vlt-modal__panel .Vlt-tabs__header .Vlt-tabs__link_active:after{background:var(--vgip-meta-input-accent-color)}.Vlt-modal__panel .Vlt-tabs__header .Vlt-modal__dismiss{background-image:none;width:18px;height:18px;opacity:initial}.Vlt-modal__panel .Vlt-tabs__header .Vlt-modal__dismiss svg{width:16px;height:16px;fill:var(--vgip-meta-input-label-color)}.Vlt-modal__panel .Vlt-tabs__header .Vlt-modal__dismiss:hover svg{fill:var(--vgip-meta-input-accent-color)}.Vlt-modal__panel .Vlt-tabs__header::-webkit-scrollbar{width:8px}.Vlt-modal__panel .Vlt-tabs__header::-webkit-scrollbar-thumb{background-color:var(--vgip-meta-scrollbar-color);border:2px solid transparent;border-radius:6px;background-clip:content-box}.Vlt-modal__panel .Vlt-tabs__content{margin-top:0}.Vlt-modal__panel .Vlt-tabs__content .Vlt-tabs__link{font-size:1.8rem}.Vlt-modal__panel .Vlt-callout--banner{justify-content:initial;text-align:initial;overflow-y:auto}.Vlt-modal__panel .Vlt-callout--banner.Vlt-callout--dismissed{padding:0}.Vlt-modal__panel .Vlt-callout--banner:not(.Vlt-callout--dismissed){min-height:78px}.Vlt-modal__panel .Vlt-modal__cancel{z-index:899}.Vlt-modal__panel .Vlt-modal__dismiss{right:16px;top:14px}.Vlt-modal__panel .Vlt-card__footer button{margin-top:0;margin-bottom:0}.Vlt-modal__panel .Vlt-select select:disabled{background:initial;cursor:not-allowed}.Vlt-modal__panel ::ng-deep .form-content{min-height:0;max-height:calc(95vh - 172px)}@media only screen and (max-width: 575px){.Vlt-modal__panel ::ng-deep .form-content{min-height:calc(100vh - 113px)}}.resource-menu button{margin:0 -10px}.resource-menu button:not(:hover) .Vlt-icon{color:#616266;fill:#616266}.busy-mask{position:absolute;inset:0;background:rgba(0,0,0,.32);opacity:1;z-index:898;display:none;border-bottom-left-radius:6px;border-bottom-right-radius:6px;margin:1px;cursor:progress}.busy-mask.active{display:block}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MetaResource, selector: "vgip-meta-resource", inputs: ["resource", "model", "metaResourceServiceDelegated", "theme"], outputs: ["done"] }, { kind: "pipe", type: i1$2.KeyValuePipe, name: "keyvalue" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaRefDialog, decorators: [{
+            type: Component,
+            args: [{ template: "<div class='Vlt-modal Vlt-modal--large'>\n  <div class=\"Vlt-modal__panel\">\n    <div class=\"Vlt-tabs\">\n      <div class='Vlt-tabs__header--background'>\n        <div class=\"Vlt-tabs__header Vlt-tabs__header--shadow\">\n          <svg class=\"Vlt-icon\" [ngStyle]=\"{fill: integrationIcon === 'Brand-icon-vonage' ? 'var(--vgip-meta-input-color)' : ''}\"><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\" /></svg>\n          <div *ngFor='let r of resources | keyvalue: keepOrder' (click)='selectResource(r.key)' class=\"Vlt-tabs__link\" [ngClass]=\"{ 'Vlt-tabs__link_active': currentResource === r.key}\">\n            {{r.key}}\n          </div>\n          <div class=\"Vlt-modal__dismiss\" (click)=\"dismiss()\">\n            <svg class=\"Vlt-icon\"><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\" /></svg>\n          </div>\n        </div>\n      </div>\n      <div class=\"Vlt-tabs__content\" style='min-height: 90px;'>\n        <ng-container *ngFor='let r of resources | keyvalue: keepOrder'>\n          <div *ngIf='currentResource === r.key' class=\"Vlt-tabs__panel Vlt-tabs__panel_active\">\n            <vgip-meta-resource [resource]='r.value' [model]='models[r.key]' [metaResourceServiceDelegated]='metaResource' (done)='onResourceDone($event)' theme='inherit' [attr.data-theme]='theme'></vgip-meta-resource>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".Vlt-modal_visible{background:var(--vgip-meta-overlay-background)}.Vlt-modal__panel{padding:0;background:var(--vgip-meta-resource-bg-color);overflow:hidden}@media only screen and (max-width: 575px){.Vlt-modal__panel{height:100%;width:100%;max-height:none;border-bottom-left-radius:0;border-bottom-right-radius:0;margin:10px 6px 0}.Vlt-modal__panel ::ng-deep .busy-mask{min-height:calc(100vh - 58px)}}.Vlt-modal__panel .Vlt-tabs__header--background{border-top-left-radius:5px;border-top-right-radius:5px}.Vlt-modal__panel .Vlt-tabs__header{background:var(--vgip-meta-resource-bar-color);padding-left:52px;padding-right:45px;border-bottom:0;flex-wrap:wrap;min-height:52px;max-height:52px;align-items:center}.Vlt-modal__panel .Vlt-tabs__header>.Vlt-icon{position:absolute;left:14px}.Vlt-modal__panel .Vlt-tabs__header h5{margin-bottom:0;font-weight:initial}.Vlt-modal__panel .Vlt-tabs__header .Vlt-tabs__link{padding-top:4px;padding-bottom:2px;color:var(--vgip-meta-input-label-color);text-transform:capitalize}.Vlt-modal__panel .Vlt-tabs__header .Vlt-tabs__link_active{color:var(--vgip-meta-input-accent-color)}.Vlt-modal__panel .Vlt-tabs__header .Vlt-tabs__link_active:after{background:var(--vgip-meta-input-accent-color)}.Vlt-modal__panel .Vlt-tabs__header .Vlt-modal__dismiss{background-image:none;width:18px;height:18px;opacity:initial}.Vlt-modal__panel .Vlt-tabs__header .Vlt-modal__dismiss svg{width:16px;height:16px;fill:var(--vgip-meta-input-label-color)}.Vlt-modal__panel .Vlt-tabs__header .Vlt-modal__dismiss:hover svg{fill:var(--vgip-meta-input-accent-color)}.Vlt-modal__panel .Vlt-tabs__header::-webkit-scrollbar{width:8px}.Vlt-modal__panel .Vlt-tabs__header::-webkit-scrollbar-thumb{background-color:var(--vgip-meta-scrollbar-color);border:2px solid transparent;border-radius:6px;background-clip:content-box}.Vlt-modal__panel .Vlt-tabs__content{margin-top:0}.Vlt-modal__panel .Vlt-tabs__content .Vlt-tabs__link{font-size:1.8rem}.Vlt-modal__panel .Vlt-callout--banner{justify-content:initial;text-align:initial;overflow-y:auto}.Vlt-modal__panel .Vlt-callout--banner.Vlt-callout--dismissed{padding:0}.Vlt-modal__panel .Vlt-callout--banner:not(.Vlt-callout--dismissed){min-height:78px}.Vlt-modal__panel .Vlt-modal__cancel{z-index:899}.Vlt-modal__panel .Vlt-modal__dismiss{right:16px;top:14px}.Vlt-modal__panel .Vlt-card__footer button{margin-top:0;margin-bottom:0}.Vlt-modal__panel .Vlt-select select:disabled{background:initial;cursor:not-allowed}.Vlt-modal__panel ::ng-deep .form-content{min-height:0;max-height:calc(95vh - 172px)}@media only screen and (max-width: 575px){.Vlt-modal__panel ::ng-deep .form-content{min-height:calc(100vh - 113px)}}.resource-menu button{margin:0 -10px}.resource-menu button:not(:hover) .Vlt-icon{color:#616266;fill:#616266}.busy-mask{position:absolute;inset:0;background:rgba(0,0,0,.32);opacity:1;z-index:898;display:none;border-bottom-left-radius:6px;border-bottom-right-radius:6px;margin:1px;cursor:progress}.busy-mask.active{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    MetaRefDialog: MetaRefDialog
+});
+
+export { MetaRefDialog as M, MetaResourceService as a, MetaReferenceService as b, MetaLayout as c, MetaResource as d, MetaAutofocusDirective as e, MetaMsgService as f, MetaHttpClient as g, metaNormalizer as m };
+//# sourceMappingURL=vgip-meta-ui-index-3907f4b1.mjs.map