@vgip/meta-ui 2.0.0 → 2.1.0

package/fesm2022/vgip-meta-ui-index-ce185ca2.mjs

@@ -1,2062 +0,0 @@
-import * as i0 from '@angular/core';
-import { Injectable, Component, Input, Directive, EventEmitter, Output, ViewChild } from '@angular/core';
-import { a as metaDark, m as metaLight } from './vgip-meta-ui-fieldAbstract-baeaf24d.mjs';
-import * as i1$2 from '@angular/common';
-import { M as MetaContextService, t as templateBuilder } from './vgip-meta-ui-index-37358620.mjs';
-import { Observable, Subject } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import * as i1 from '@angular/common/http';
-import { HttpParams, HttpHeaders } from '@angular/common/http';
-import * as i2 from '@angular/forms';
-import * as i1$1 from '@angular/router';
-import { M as MetaField } from './vgip-meta-ui-index-fb7f54f5.mjs';
-
-const numberFieldNormalizer = (field) => {
-    const f = {
-        label: field.label,
-        name: field.name
-    };
-    f.type = field.name ? 'number' : 'missing name';
-    if (field.type === 'float' || field.subtype === 'float') {
-        f.validations = {
-            step: field.step || '0.01'
-        };
-    }
-    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';
-    if (field.rows) {
-        f.rows = field.rows;
-    }
-    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;
-    }
-    const f = {
-        validations: {}
-    };
-    const fieldType = (field.type || '').toLowerCase();
-    if (['int', 'integer', 'number', 'double', 'float', 'bigdecimal', 'percent', 'currency'].indexOf(fieldType) !== -1) {
-        Object.assign(f, numberFieldNormalizer(field));
-    }
-    else if (['picklist', 'select', 'multipicklist', 'options'].indexOf(fieldType) !== -1) {
-        Object.assign(f, optionsFieldNormalizer(field));
-    }
-    else if (['string', null, undefined, '', 'email', 'phone', 'url', 'combobox'].indexOf(fieldType) !== -1) {
-        Object.assign(f, stringFieldNormalizer(field));
-    }
-    else if (['bool', 'boolean', 'checkbox', 'switch'].indexOf(fieldType) !== -1) {
-        Object.assign(f, booleanFieldNormalizer(field));
-    }
-    else if (['text', 'textarea'].indexOf(fieldType) !== -1) {
-        Object.assign(f, textFieldNormalizer(field));
-    }
-    else if (['richtext'].indexOf(fieldType) !== -1) {
-        Object.assign(f, richtextFieldNormalizer(field));
-    }
-    else if (['date', 'time', 'datetime', 'datetime-local'].indexOf(fieldType) !== -1) {
-        Object.assign(f, datetimeFieldNormalizer(field));
-    }
-    else if (['reference', 'references', 'multireference'].indexOf(fieldType) !== -1) {
-        Object.assign(f, referenceFieldNormalizer(field));
-    }
-    else if (['radio'].indexOf(fieldType) !== -1) {
-        Object.assign(f, radioFieldNormalizer(field));
-    }
-    else if (fieldType === 'composite') {
-        Object.assign(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;
-        Object.assign(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 if (fieldType === 'hidden') {
-        Object.assign(f, {
-            name: field.name,
-            type: 'hidden'
-        });
-    }
-    else {
-        Object.assign(f, {
-            label: field.label,
-            name: field.name,
-            type: `@v2 ${fieldType}`
-        });
-    }
-    if (field.validations) {
-        Object.assign(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'
-                    };
-                }
-                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;
-                }
-                if (resourceType === 'Comment' && f.name === 'body') {
-                    f.visible = true;
-                }
-                break;
-            }
-            case 'HUBSPOT': {
-                if ((resourceType === 'LogCall' && ['body', 'hs_call_body'].indexOf(f.name) !== -1) ||
-                    (resourceType === 'LogSMS' && f.name === 'hs_communication_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;
-            }
-            case 'ZOHO': {
-                if (['Calls', 'Tasks', 'Events'].indexOf(resourceType) !== -1 && ['Who_Id', 'What_Id'].indexOf(f.name) !== -1) {
-                    if (f.name === 'What_Id') {
-                        f.visible = true;
-                        f.disabled = {
-                            'Who_Id.type': 'Leads'
-                        };
-                    }
-                    if (f.reference instanceof Array) {
-                        f.reference.forEach((r) => {
-                            r.creatable = true;
-                            r.updatable = true;
-                        });
-                    }
-                }
-                if (resourceType === 'Calls' && f.name === 'Description') {
-                    f.label = 'Description';
-                    f.visible = true;
-                    f.hidden = {
-                        "Call_Type": "Missed"
-                    };
-                }
-                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;
-        }
-    }
-    else if (integrationCode === 'CLIO' && resourceType === 'Contact') {
-        metaV3.layout.sections[0].fields.push({
-            name: 'custom_field_values',
-            type: 'hidden'
-        });
-    }
-    else if (integrationCode === 'CONNECTWISE' && ['companies', 'contacts'].indexOf(resourceType) !== -1) {
-        metaV3.layout.sections[0].fields.push({
-            name: 'billToCompany',
-            type: 'hidden'
-        });
-        metaV3.layout.sections[0].fields.push({
-            name: 'identifier',
-            type: 'hidden'
-        });
-        metaV3.layout.sections[0].fields.push({
-            name: 'status',
-            type: 'hidden'
-        });
-    }
-    else if (integrationCode === 'ZOHO' && resourceType === 'Tasks') {
-        metaV3.layout.sections[0].fields.push({
-            name: 'module',
-            type: 'hidden'
-        });
-    }
-    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'
-            }),
-            params
-        };
-        return options;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MetaHttpClient, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MetaHttpClient, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", 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 DELEGATE_INTEGRATION_URL_TEMPLATE = '/portal/v1/accounts/${sessionStorage.vgis.accountId}/users/${sessionStorage.vgis.userId}/integrations/${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) {
-        const baseUrlTemplate = config.delegate ? DELEGATE_INTEGRATION_URL_TEMPLATE : INTEGRATION_URL_TEMPLATE;
-        this.baseIntegrationUrl = baseUrlTemplate.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 += `${url.indexOf('?') === -1 ? '?' : '&'}refresh=true`;
-        }
-        if (layoutId) {
-            url += `${url.indexOf('?') === -1 ? '?' : '&'}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);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MetaResourceService, deps: [{ token: MetaHttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MetaResourceService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", 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];
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MetaMsgService, deps: [{ token: MetaContextService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MetaMsgService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", 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(router) {
-        this.router = router;
-        this.dialogs = [];
-        this.router.events.subscribe(() => {
-            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, overlayContainer) {
-        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 => {
-            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`;
-                }
-            }
-            if (overlayContainer && overlayContainer.appendChild) {
-                overlayContainer.appendChild(domElem);
-            }
-            else {
-                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();
-                componentRef.destroy();
-                this.dialogs.splice(dialogIndex - 1, 1);
-            };
-        });
-        return modalObservable;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MetaReferenceService, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MetaReferenceService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MetaReferenceService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.Router }]; } });
-
-class MetaLayout {
-    constructor(viewContainerRef, ref, el, metaResource, referenceService, metaMsgService, metaContext) {
-        this.viewContainerRef = viewContainerRef;
-        this.ref = ref;
-        this.el = el;
-        this.metaResource = metaResource;
-        this.referenceService = referenceService;
-        this.metaMsgService = metaMsgService;
-        this.metaContext = metaContext;
-        this.optionalFields = {};
-        this.showAll = false;
-        this.fieldsVisibilityChanged = new Subject();
-        this.childResourceCardLabel = resourceCardLabel;
-        // console.log('MetaLayout', this.meta);
-        this.overlayContainer = el.nativeElement;
-    }
-    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(() => {
-            this.countOptionalFields();
-        });
-        setTimeout(() => {
-            this.countOptionalFields();
-        }, 0);
-        if (this.parentForm) {
-            this.parentForm.addEventListener("change", () => {
-                setTimeout(() => {
-                    this.fieldsVisibilityChanged.next(JSON.stringify(this.resource));
-                    this.countOptionalFields();
-                }, 0);
-            });
-        }
-        if (this.theme !== "inherit") {
-            this.applyTheme();
-        }
-        if (this.isPersistedResource && this.meta.children && this.preview) {
-            this.procChildrenExternalLinks();
-        }
-    }
-    ngDoCheck() {
-        this.countOptionalFields();
-    }
-    ngOnChanges(changes) {
-        if (changes.meta) {
-            this.configureOptionalSections();
-            setTimeout(() => {
-                this.countOptionalFields();
-            }, 0);
-        }
-        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?.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?.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();
-    }
-    buildExternalLinkForChild(child) {
-        if (child?.externalId || child.id) {
-            this.metaMsgService.sendMessage(this.integrationCode.toUpperCase(), {
-                action: "buildExternalLink",
-                integrationCode: this.integrationCode.toLowerCase(),
-                ref: {
-                    parentRefId: this.resource._vgis.externalId || this.resource._vgis.id,
-                    parentResourceType: this.resource._vgis.resourceType,
-                    ...child
-                },
-                profile: this.metaContext.profiles[this.integrationCode.toUpperCase()]
-            }, (response) => {
-                if (!response.error) {
-                    child.externalLink = response.externalLink;
-                }
-                else {
-                    console.warn("No external link support for", this.integrationCode, child.resourceType);
-                }
-            });
-        }
-    }
-    procChildrenExternalLinks() {
-        for (const child of this.meta.children) {
-            let childrenValue = this.resource[child.name];
-            Object.defineProperty(this.resource, child.name, {
-                set: (children) => {
-                    childrenValue = children;
-                    if (children instanceof Array) {
-                        childrenValue = children;
-                        for (const c in children) {
-                            if (children[c]?._vgis && !children[c]._vgis.externalLink) { // some day BE will start providing it
-                                this.buildExternalLinkForChild(children[c]._vgis);
-                            }
-                        }
-                    }
-                },
-                get: () => childrenValue,
-                enumerable: true,
-                configurable: true
-            });
-            if (childrenValue) {
-                this.resource[child.name] = childrenValue;
-            }
-        }
-    }
-    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
-        const refDialogComponent = this.viewContainerRef.createComponent(metaRefDialog);
-        this.referenceService
-            .openDialog(refDialogComponent, this.metaResource, this.integrationCode, childResource.reference, childModel, childModel && childResource.reference.editable === false // is preview mode
-        )
-            .subscribe((result) => {
-            if (result?.raw) {
-                if (!this.resource[childResource.name]) {
-                    this.resource[childResource.name] = [];
-                }
-                if (childModel) {
-                    Object.assign(childModel, result.raw);
-                }
-                else {
-                    this.buildExternalLinkForChild(result.raw._vgis);
-                    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]);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MetaLayout, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: MetaResourceService }, { token: MetaReferenceService }, { token: MetaMsgService }, { token: MetaContextService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: MetaLayout, selector: "vgip-meta-layout", inputs: { meta: "meta", resource: "resource", integration: "integration", type: "type", preview: "preview", theme: "theme", delegate: "delegate" }, 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' [delegate]='delegate'></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", "scope", "preview", "theme", "overlayContainer", "delegate"], outputs: ["onChange", "onLeave"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", 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' [delegate]='delegate'></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 }, { type: MetaMsgService }, { type: MetaContextService }]; }, propDecorators: { meta: [{
-                type: Input
-            }], resource: [{
-                type: Input
-            }], integration: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], preview: [{
-                type: Input
-            }], theme: [{
-                type: Input
-            }], delegate: [{
-                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);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MetaAutofocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.11", type: MetaAutofocusDirective, selector: "[vgipMetaFormAutofocus]", inputs: { vgipMetaFormAutofocus: "vgipMetaFormAutofocus" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", 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.editMode = true;
-        this.done = new EventEmitter();
-        this.resourceChange = new EventEmitter();
-        this.edit = true;
-        this.contactsSuggestionsDone = false;
-        this.resourceChanged = new Subject();
-        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 = {};
-        }
-        this.isPersistent = this.resource?.externalId;
-        if (this.isPersistent) {
-            this.resourceVrn = `vrn:vgis:${this.integrationCode.toLowerCase()}:${this.resource.resourceType}:${this.resource.externalId}`;
-        }
-        if (this.resource.activity && this.resource.ref.editable === false && !this.resource.externalId) {
-            this.resource.externalId = 'MISSING_EXTERNAL_ID';
-        }
-        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.isEditable = this.meta.layout && this.meta.layout.editable !== false;
-            if (this.isPersistent && (!this.isEditable || this.editMode === false || this.meta.layout.children)) {
-                this.edit = false;
-            }
-            this.currentLayoutId = this.meta.layout.id;
-            this.getDetails();
-            this.getFieldsMap();
-        }
-        if (this.theme !== 'inherit') {
-            this.applyTheme();
-        }
-        this.resourceChanged.pipe(debounceTime(400), distinctUntilChanged()).subscribe((value) => {
-            this.resourceChange.emit(value);
-        });
-    }
-    ngOnChanges(changes) {
-        if (changes.theme) {
-            this.theme = changes.theme.currentValue;
-            if (this.theme !== 'inherit') {
-                this.applyTheme();
-            }
-        }
-    }
-    setEditMode() {
-        this.edit = true;
-    }
-    loadMetadata(layoutId, refresh = false, ev) {
-        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 (this.currentLayoutId.indexOf(this.lockedLayoutId) === -1) {
-                    delete this.lockedLayoutId;
-                }
-                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 (!refresh && this.isPersistent && (!this.isEditable || this.editMode === false || 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})`;
-                localStorage.removeItem(layoutStoreKey);
-            },
-            complete: () => {
-                delete this.metaLoading;
-                this.forceUiUpdate();
-            }
-        });
-        if (ev) {
-            ev.preventDefault();
-            ev.stopPropagation();
-            return false;
-        }
-    }
-    changeLayout() {
-        localStorage.setItem(`vgis.layout_${this.metaContext.vgipUserId}_${this.integrationCode}_${this.resource.resourceType}`, this.currentLayoutId);
-        this.loadMetadata(this.currentLayoutId);
-    }
-    getDetails() {
-        delete this.lockedLayoutId;
-        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;
-                            }
-                            this.lockedLayoutId = resource._vgis.layoutId || resource._vgis.recordTypeId;
-                            // sample orig layoutId: 012000000000000AAA, custom layoutId: 66ccbb3d1810985aa3a16202:012000000000000AAA
-                            // so if the current layout is not inherited from the original one, reload the orig meta
-                            // CCOMNI-155 - allow form layout change (*unless we are certain that the current and locked match)
-                            if (!this.skipLayoutMatchCheck && this.lockedLayoutId && (this.currentLayoutId || '').indexOf(this.lockedLayoutId) === -1) {
-                                this.skipLayoutMatchCheck = true; // ensure prevent HPBR-8782 loop condition
-                                if ((this.meta.availableLayouts || []).find((l) => (l.id || '').indexOf(this.lockedLayoutId) !== -1)) { // if it's not available, don't even try
-                                    this.loadMetadata(this.lockedLayoutId);
-                                }
-                                else {
-                                    console.warn('Unable to match layout Ids', this.lockedLayoutId, this.currentLayoutId);
-                                }
-                            }
-                        }
-                        /* 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;
-            /* eslint-disable no-underscore-dangle */
-            if (!this.model._vgis) {
-                this.model._vgis = {
-                    connector: this.integrationCode,
-                    resourceType: this.resourceType
-                };
-            }
-            this.model._vgis.layoutId = this.currentLayoutId;
-            if (this.metaContext.vgipEventId) {
-                this.model._vgis.eventId = this.metaContext.vgipEventId;
-            }
-            /* eslint-enable no-underscore-dangle */
-            this.service.save(this.model).subscribe((result) => {
-                this.model = result;
-                this.resource.externalId = result._vgis.externalId; // eslint-disable-line no-underscore-dangle
-                this.resourceVrn = `vrn:vgis:${this.integrationCode.toLowerCase()}:${this.resource.resourceType}:${this.resource.externalId}`;
-                this.isPersistent = true;
-                this.close(result);
-                this.edit = false;
-                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;
-    }
-    onFormChange() {
-        this.resourceChanged.next(JSON.stringify(this.model));
-    }
-    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) {
-                    const nestKeys = {};
-                    nestKeys[nestMatch[2]] = value;
-                    this.model[nestMatch[1]] = [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?.type || 'CALL').toUpperCase()] || profile.defaultSubject.CALL) :
-                    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') {
-                        if (!f.suggestions) {
-                            f.suggestions = [];
-                        }
-                        else {
-                            f.suggestions = f.suggestions.filter(sg => !sg.auto); // keep meta suggestions if any
-                        }
-                        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) {
-                                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;
-        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);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MetaResource, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: MetaResourceService }, { token: MetaContextService }, { token: MetaMsgService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: MetaResource, selector: "vgip-meta-resource", inputs: { resource: "resource", model: "model", metaResourceServiceDelegated: "metaResourceServiceDelegated", theme: "theme", editMode: "editMode" }, outputs: { done: "done", resourceChange: "resourceChange" }, viewQueries: [{ propertyName: "resourceForm", first: true, predicate: ["resourceForm"], descendants: true }], 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)' (change)='onFormChange()' 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' [attr.data-vrn]='resourceVrn'></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)='setEditMode()' *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]='lockedLayoutId === currentLayoutId'>\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> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\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 href='#' class=\"Vlt-dropdown__link\" (click)='loadMetadata(currentLayoutId, true, $event)'>\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>\n", 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", "delegate"] }, { kind: "directive", type: MetaAutofocusDirective, selector: "[vgipMetaFormAutofocus]", inputs: ["vgipMetaFormAutofocus"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", 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)' (change)='onFormChange()' 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' [attr.data-vrn]='resourceVrn'></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)='setEditMode()' *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]='lockedLayoutId === currentLayoutId'>\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> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\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 href='#' class=\"Vlt-dropdown__link\" (click)='loadMetadata(currentLayoutId, true, $event)'>\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>\n", 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
-            }], editMode: [{
-                type: Input
-            }], done: [{
-                type: Output
-            }], resourceChange: [{
-                type: Output
-            }], resourceForm: [{
-                type: ViewChild,
-                args: ['resourceForm']
-            }] } });
-
-class MetaRefDialog {
-    constructor(el) {
-        this.el = el;
-        this.resources = {};
-        this.models = {};
-        this.services = {};
-        this.keepOrder = (a) => 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(ev) {
-        this.close();
-        this.onComplete(null);
-        if (ev) {
-            ev.preventDefault();
-            ev.stopPropagation();
-            return false;
-        }
-    }
-    onResourceDone(result) {
-        this.close();
-        this.onComplete(result);
-    }
-    selectResource(ev, resource) {
-        this.currentResource = resource;
-        ev.preventDefault();
-        ev.stopPropagation();
-        return false;
-    }
-    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]);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MetaRefDialog, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", 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          <a href='#' *ngFor='let r of resources | keyvalue: keepOrder' (click)='selectResource($event, r.key)' class=\"Vlt-tabs__link\" [ngClass]=\"{ 'Vlt-tabs__link_active': currentResource === r.key}\">\n            {{r.key}}\n          </a>\n          <a href='#' class=\"Vlt-modal__dismiss\" (click)=\"dismiss($event)\">\n            <svg class=\"Vlt-icon\"><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\" /></svg>\n          </a>\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", "editMode"], outputs: ["done", "resourceChange"] }, { kind: "pipe", type: i1$2.KeyValuePipe, name: "keyvalue" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", 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          <a href='#' *ngFor='let r of resources | keyvalue: keepOrder' (click)='selectResource($event, r.key)' class=\"Vlt-tabs__link\" [ngClass]=\"{ 'Vlt-tabs__link_active': currentResource === r.key}\">\n            {{r.key}}\n          </a>\n          <a href='#' class=\"Vlt-modal__dismiss\" (click)=\"dismiss($event)\">\n            <svg class=\"Vlt-icon\"><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\" /></svg>\n          </a>\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-ce185ca2.mjs.map