@vgip/meta-ui 1.7.0 → 1.7.3

package/{fesm2020/vgip-meta-ui-index-4fcefde0.mjs → fesm2022/vgip-meta-ui-index-3bc3d41b.mjs}

@@ -1,15 +1,15 @@
 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-f7d80db6.mjs';
+import { a as metaDark, m as metaLight } from './vgip-meta-ui-fieldAbstract-9955be39.mjs';
 import * as i1$2 from '@angular/common';
-import { M as MetaContextService, t as templateBuilder } from './vgip-meta-ui-index-6e77c362.mjs';
+import { M as MetaContextService, t as templateBuilder } from './vgip-meta-ui-index-ea5c2466.mjs';
 import * as i1 from '@angular/common/http';
 import { HttpParams, HttpHeaders } from '@angular/common/http';
 import * as i2 from '@angular/forms';
 import { Observable, Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import * as i1$1 from '@angular/router';
-import { M as MetaField } from './vgip-meta-ui-index-301b28cd.mjs';
+import { M as MetaField } from './vgip-meta-ui-index-39011b04.mjs';
 
 const numberFieldNormalizer = (field) => {
     const f = {
@@ -548,7 +548,7 @@ const metaNormalizer = (meta, integration, resourceType) => {
             case 'SALESFORCE': {
                 if (resourceType === 'Task' && f.name === 'WhatId') {
                     f.disabled = {
-                        'WhoId.type': 'Lead' // eslint-disable-line @typescript-eslint/naming-convention
+                        'WhoId.type': 'Lead'
                     };
                 }
                 if (['Description', 'ParentId'].indexOf(f.name) !== -1) {
@@ -729,6 +729,20 @@ const metaNormalizer = (meta, integration, resourceType) => {
             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'
+        });
+    }
     return sortObj(metaV3);
 };
 
@@ -776,16 +790,16 @@ class MetaHttpClient {
         });
         const options = {
             headers: new HttpHeaders({
-                Accept: 'application/json' // eslint-disable-line @typescript-eslint/naming-convention
+                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' }); }
 }
-MetaHttpClient.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaHttpClient, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-MetaHttpClient.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaHttpClient, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaHttpClient, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MetaHttpClient, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -814,7 +828,7 @@ class MetaResourceService {
         this.httpClient = httpClient;
     }
     setConfig(config) {
-        this.baseIntegrationUrl = INTEGRATION_URL_TEMPLATE.replace(/\${\s*([\w\.]+)\s*}/g, (m, value) => {
+        this.baseIntegrationUrl = INTEGRATION_URL_TEMPLATE.replace(/\${\s*([\w.]+)\s*}/g, (m, value) => {
             for (const storage of Object.keys(STORAGE_PARAMS_REGEXES)) {
                 const match = value.match(STORAGE_PARAMS_REGEXES[storage]);
                 if (match) {
@@ -823,7 +837,7 @@ class MetaResourceService {
             }
             return config[value];
         });
-        this.baseResourceUrl = RESOURCE_URL_TEMPLATE.replace(/\${\s*([\w\.]+)\s*}/g, (m, 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) {
@@ -845,7 +859,7 @@ class MetaResourceService {
                 return config[value];
             }
         });
-        this.newResourceUrl = NEW_RESOURCE_URL_TEMPLATE.replace(/\${\s*([\w\.]+)\s*}/g, (m, 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) {
@@ -918,10 +932,10 @@ class MetaResourceService {
             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' }); }
 }
-MetaResourceService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaResourceService, deps: [{ token: MetaHttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-MetaResourceService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaResourceService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaResourceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MetaResourceService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -963,7 +977,7 @@ class MetaMsgService {
             let state; // message unique identifier
             do {
                 state = new Date().getTime();
-            } while (!!this.msgCallbacks[state]);
+            } while (this.msgCallbacks[state]);
             this.msgCallbacks[state] = callback; // register message callback
             msg.$state = state;
             providerWorker.postMessage(msg);
@@ -995,10 +1009,10 @@ class MetaMsgService {
             }
         }
     }
+    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' }); }
 }
-MetaMsgService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaMsgService, deps: [{ token: MetaContextService }], target: i0.ɵɵFactoryTarget.Injectable });
-MetaMsgService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaMsgService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaMsgService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MetaMsgService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1039,7 +1053,7 @@ class MetaReferenceService {
     constructor(router) {
         this.router = router;
         this.dialogs = [];
-        this.router.events.subscribe((e) => {
+        this.router.events.subscribe(() => {
             if (this.dialogs.length) {
                 for (let d = (this.dialogs.length - 1); d >= 0; d--) {
                     this.dialogs[d].onComplete();
@@ -1104,10 +1118,10 @@ class MetaReferenceService {
         });
         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' }); }
 }
-MetaReferenceService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaReferenceService, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-MetaReferenceService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaReferenceService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaReferenceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MetaReferenceService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1116,7 +1130,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 
 class MetaLayout {
     constructor(viewContainerRef, ref, el, metaResource, referenceService) {
-        // console.log('MetaLayout', this.meta);
         this.viewContainerRef = viewContainerRef;
         this.ref = ref;
         this.el = el;
@@ -1126,31 +1139,36 @@ class MetaLayout {
         this.showAll = false;
         this.fieldsVisibilityChanged = new Subject();
         this.childResourceCardLabel = resourceCardLabel;
+        // console.log('MetaLayout', this.meta);
     }
     get isPersistedResource() {
         // eslint-disable-next-line no-underscore-dangle
-        return this.resource && this.resource._vgis && (this.resource._vgis.externalId || this.resource._vgis.id);
+        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.parentForm = this.el.nativeElement.closest("form");
         this.configureOptionalSections();
-        this.fieldsVisibilityChanged.pipe(debounceTime(100), distinctUntilChanged()).subscribe((value) => {
+        this.fieldsVisibilityChanged
+            .pipe(debounceTime(100), distinctUntilChanged())
+            .subscribe(() => {
             this.countOptionalFields();
         });
         setTimeout(() => {
             this.countOptionalFields();
         }, 0);
         if (this.parentForm) {
-            this.parentForm.addEventListener('change', (e) => {
+            this.parentForm.addEventListener("change", () => {
                 setTimeout(() => {
                     this.fieldsVisibilityChanged.next(JSON.stringify(this.resource));
                     this.countOptionalFields();
                 }, 0);
             });
         }
-        if (this.theme !== 'inherit') {
+        if (this.theme !== "inherit") {
             this.applyTheme();
         }
     }
@@ -1181,7 +1199,7 @@ class MetaLayout {
             }
         };
         for (const s of this.meta.sections) {
-            const notOptionalAny = s.fields?.find(f => !f.$optional);
+            const notOptionalAny = s.fields?.find((f) => !f.$optional);
             s.$optional = !notOptionalAny;
             if (!s.visible) {
                 countSectionFields(s);
@@ -1192,11 +1210,11 @@ class MetaLayout {
     configureOptionalSections() {
         if (this.meta && this.meta.sections) {
             for (const s of this.meta.sections) {
-                Object.defineProperty(s, '$optional', {
+                Object.defineProperty(s, "$optional", {
                     value: true,
                     writable: true,
                     configurable: true,
-                    enumerable: false
+                    enumerable: false,
                 });
             }
         }
@@ -1209,11 +1227,13 @@ class MetaLayout {
         this.ngAfterContentChecked();
     }
     async openChild(childResource, childModel) {
-        const metaRefDialog = await Promise.resolve().then(function () { return index; }).then(m => m.MetaRefDialog);
+        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) => {
+        this.referenceService
+            .openDialog(refDialogComponent, this.metaResource, this.integrationCode, childResource.reference, childModel, childModel && childResource.reference.editable === false // is preview mode
+        )
+            .subscribe((result) => {
             if (result && result.raw) {
                 if (!this.resource[childResource.name]) {
                     this.resource[childResource.name] = [];
@@ -1228,17 +1248,17 @@ class MetaLayout {
         });
     }
     applyTheme() {
-        const metaTheme = this.theme === 'dark' ? metaDark : metaLight;
+        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 }], 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" }, usesOnChanges: true, ngImport: i0, template: "<div *ngFor='let section of meta.sections' class='Vlt-section' [ngClass]=\"{ shown: showAll || section.visible || (!meta.oneTimeOptional && !section.$optional) || (meta.oneTimeOptional && !optionalFieldsCount) }\">\n\t<h5 *ngIf='section.label' class=\"Vlt-section__title\">{{section.label}}</h5>\n\t<div style='overflow: visible;' [ngClass]=\"{ 'for-preview': preview }\">\n\t\t<small *ngIf='section.description' class=\"Vlt-form__element__hint\">{{section.description}}</small>\n\t\t<div>\n\t\t\t<ng-container *ngFor='let field of section.fields'>\n\t\t\t\t<vgip-meta-field *ngIf='!field.$hidden && (showAll || section.visible || !field.$optional)' [meta]='field' [parent]='resource' [integrationCode]='integrationCode' [resourceType]='resourceType' [preview]='preview' [ngClass]=\"{ shown: !field.$invisible && (showAll || true) }\" theme='inherit' [attr.data-theme]='theme'></vgip-meta-field>\n\t\t\t</ng-container>\n\t\t</div>\n\t</div>\n</div>\n<div *ngIf='isPersistedResource && meta.children && preview'>\n\t<div *ngFor='let child of meta.children'>\n\t\t<h5 class='Vlt-children__title'>\n\t\t\t<svg class=\"Vlt-icon\"><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-stack\" /></svg>&nbsp;\n\t\t\t{{child.label}} <span class='Vlt-grey'>({{(resource[child.name] || []).length}})</span>\n\t\t</h5>\n\t\t<div *ngFor=\"let c of resource[child.name]\" style='position: relative;'>\n\n\t\t\t<div class=\"Vlt-card Vlt-bg-white\">\n\t\t\t\t<div class=\"Vlt-card__content Vlt-btn-on-hover\">\n\t\t\t\t\t<h5>{{childResourceCardLabel(c)}}</h5>\n\t\t\t\t\t<div style='font-size: 12px; line-height: 16px;'>\n\t\t\t\t\t\tCreated: <span class='Vlt-black'>{{c._vgis.createdDate | date:'mediumDate'}}</span>\n\t\t\t\t\t\tEdited: <span class='Vlt-black'>{{c._vgis.modifiedDate | date:'medium'}}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"Vlt-badge Vlt-badge--app Vlt-badge--purple Vlt-badge--small\">{{c._vgis.resourceType}}</div>\n\t\t\t\t\t<div class=\"Vlt-btn-group Vlt-btn-group--hover\">\n\t\t\t\t\t\t<a *ngIf='c._vgis.externalLink' attr.href='{{c._vgis.externalLink}}' target='_blank' rel='noopener' rel='noopener' class=\"Vlt-btn Vlt-btn--tertiary Vlt-btn--icon\" aria-label='Open external'><svg style='margin-left: 0; margin-right: 0;'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-open\"/></svg></a>\n\t\t\t\t\t\t<button type='button' (click)='openChild(child, c)' class=\"Vlt-btn Vlt-btn--tertiary Vlt-btn--icon\"><svg style='margin-left: 0; margin-right: 0;'><use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ child.reference.editable ? 'edit' : 'eye-negative' }}\"/></svg></button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<button style='width: 100%; margin-top: 0; max-width: 100%;' type='button' (click)='openChild(child)' class=\"Vlt-btn Vlt-btn--small Vlt-btn--secondary\" [disabled]='child.creatable === false'>\n\t\t\t<svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>{{child.reference.label}}\n\t\t</button>\n\t</div>\n</div>\n<div *ngIf='!(meta.oneTimeOptional && showAll)' [ngClass]='{ centered: !meta.oneTimeOptional }'>\n\t<button *ngIf='!preview && optionalFieldsCount' type='button' (click)='toggleOptionalFields()' class=\"Vlt-btn Vlt-btn--small Vlt-btn--link more-button\" style='margin: 0; margin-bottom: 10px;'>\n\t\t<svg><use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-chevron-{{ showAll ? 'up' : 'down' }}\"/></svg>\n\t\t{{ showAll ? 'Hide' : 'Show' }} Optional Fields ({{optionalFieldsCount}})\n\t</button>\n</div>\n", styles: ["vgip-meta-field{display:none}vgip-meta-field.shown{display:initial}.Vlt-section__title{line-height:14px;padding:16px 16px 14px 3px;margin:-9px -1px 8px;background-color:var(--vgip-meta-resource-bg-color);color:var(--vgip-meta-resource-color);position:sticky;top:-9px;z-index:3;border-bottom:1px solid var(--vgip-meta-separator-color)}.Vlt-section{margin:0;padding-bottom:8px;display:none}.Vlt-section.shown{display:block}.Vlt-btn.vlt-add-child:hover{transform:scale(1.02)}.for-preview{margin-top:-6px}.Vlt-card{margin-bottom:16px;padding:16px}.Vlt-card .Vlt-btn-group.Vlt-btn-group--hover{right:-8px}button.more-button:focus{font-weight:700}.centered{text-align:center}.Vlt-btn--link{color:var(--vgip-meta-link-color)}.Vlt-btn--link:hover{color:var(--vgip-meta-link-hover-color)}.Vlt-btn--link svg{fill:var(--vgip-meta-link-color)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MetaField, selector: "vgip-meta-field", inputs: ["meta", "parent", "integrationCode", "resourceType", "index", "scope", "preview", "theme"], outputs: ["onChange", "onLeave"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }] }); }
 }
-MetaLayout.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaLayout, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: MetaResourceService }, { token: MetaReferenceService }], target: i0.ɵɵFactoryTarget.Component });
-MetaLayout.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: MetaLayout, selector: "vgip-meta-layout", inputs: { meta: "meta", resource: "resource", integration: "integration", type: "type", preview: "preview", theme: "theme" }, usesOnChanges: true, ngImport: i0, template: "<div *ngFor='let section of meta.sections' class='Vlt-section' [ngClass]=\"{ shown: showAll || section.visible || (!meta.oneTimeOptional && !section.$optional) || (meta.oneTimeOptional && !optionalFieldsCount) }\">\n\t<h5 *ngIf='section.label' class=\"Vlt-section__title\">{{section.label}}</h5>\n\t<div style='overflow: visible;' [ngClass]=\"{ 'for-preview': preview }\">\n\t\t<small *ngIf='section.description' class=\"Vlt-form__element__hint\">{{section.description}}</small>\n\t\t<div>\n\t\t\t<ng-container *ngFor='let field of section.fields'>\n\t\t\t\t<vgip-meta-field *ngIf='!field.$hidden && (showAll || section.visible || !field.$optional)' [meta]='field' [parent]='resource' [integrationCode]='integrationCode' [resourceType]='resourceType' [preview]='preview' [ngClass]=\"{ shown: !field.$invisible && (showAll || true) }\" theme='inherit' [attr.data-theme]='theme'></vgip-meta-field>\n\t\t\t</ng-container>\n\t\t</div>\n\t</div>\n</div>\n<div *ngIf='isPersistedResource && meta.children && preview'>\n\t<div *ngFor='let child of meta.children'>\n\t\t<h5 class='Vlt-children__title'>\n\t\t\t<svg class=\"Vlt-icon\"><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-stack\" /></svg>&nbsp;\n\t\t\t{{child.label}} <span class='Vlt-grey'>({{(resource[child.name] || []).length}})</span>\n\t\t</h5>\n\t\t<div *ngFor=\"let c of resource[child.name]\" style='position: relative;'>\n\n\t\t\t<div class=\"Vlt-card Vlt-bg-white\">\n\t\t\t\t<div class=\"Vlt-card__content Vlt-btn-on-hover\">\n\t\t\t\t\t<h5>{{childResourceCardLabel(c)}}</h5>\n\t\t\t\t\t<div style='font-size: 12px; line-height: 16px;'>\n\t\t\t\t\t\tCreated: <span class='Vlt-black'>{{c._vgis.createdDate | date:'mediumDate'}}</span>\n\t\t\t\t\t\tEdited: <span class='Vlt-black'>{{c._vgis.modifiedDate | date:'medium'}}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"Vlt-badge Vlt-badge--app Vlt-badge--purple Vlt-badge--small\">{{c._vgis.resourceType}}</div>\n\t\t\t\t\t<div class=\"Vlt-btn-group Vlt-btn-group--hover\">\n\t\t\t\t\t\t<a *ngIf='c._vgis.externalLink' attr.href='{{c._vgis.externalLink}}' target='_blank' rel='noopener' rel='noopener' class=\"Vlt-btn Vlt-btn--tertiary Vlt-btn--icon\" aria-label='Open external'><svg style='margin-left: 0; margin-right: 0;'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-open\"/></svg></a>\n\t\t\t\t\t\t<button type='button' (click)='openChild(child, c)' class=\"Vlt-btn Vlt-btn--tertiary Vlt-btn--icon\"><svg style='margin-left: 0; margin-right: 0;'><use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ child.reference.editable ? 'edit' : 'eye-negative' }}\"/></svg></button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<button style='width: 100%; margin-top: 0; max-width: 100%;' type='button' (click)='openChild(child)' class=\"Vlt-btn Vlt-btn--small Vlt-btn--secondary\" [disabled]='child.creatable === false'>\n\t\t\t<svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>{{child.reference.label}}\n\t\t</button>\n\t</div>\n</div>\n<div *ngIf='!(meta.oneTimeOptional && showAll)' [ngClass]='{ centered: !meta.oneTimeOptional }'>\n\t<button *ngIf='!preview && optionalFieldsCount' type='button' (click)='toggleOptionalFields()' class=\"Vlt-btn Vlt-btn--small Vlt-btn--link more-button\" style='margin: 0; margin-bottom: 10px;'>\n\t\t<svg><use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-chevron-{{ showAll ? 'up' : 'down' }}\"/></svg>\n\t\t{{ showAll ? 'Hide' : 'Show' }} Optional Fields ({{optionalFieldsCount}})\n\t</button>\n</div>\n", styles: ["vgip-meta-field{display:none}vgip-meta-field.shown{display:initial}.Vlt-section__title{line-height:14px;padding:16px 16px 14px 3px;margin:-9px -1px 8px;background-color:var(--vgip-meta-resource-bg-color);color:var(--vgip-meta-resource-color);position:sticky;top:-9px;z-index:3;border-bottom:1px solid var(--vgip-meta-separator-color)}.Vlt-section{margin:0;padding-bottom:8px;display:none}.Vlt-section.shown{display:block}.Vlt-btn.vlt-add-child:hover{transform:scale(1.02)}.for-preview{margin-top:-6px}.Vlt-card{margin-bottom:16px;padding:16px}.Vlt-card .Vlt-btn-group.Vlt-btn-group--hover{right:-8px}button.more-button:focus{font-weight:700}.centered{text-align:center}.Vlt-btn--link{color:var(--vgip-meta-link-color)}.Vlt-btn--link:hover{color:var(--vgip-meta-link-hover-color)}.Vlt-btn--link svg{fill:var(--vgip-meta-link-color)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MetaField, selector: "vgip-meta-field", inputs: ["meta", "parent", "integrationCode", "resourceType", "index", "scope", "preview", "theme"], outputs: ["onChange", "onLeave"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaLayout, decorators: [{
+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'></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"] }]
+            args: [{ selector: "vgip-meta-layout", template: "<div *ngFor='let section of meta.sections' class='Vlt-section' [ngClass]=\"{ shown: showAll || section.visible || (!meta.oneTimeOptional && !section.$optional) || (meta.oneTimeOptional && !optionalFieldsCount) }\">\n\t<h5 *ngIf='section.label' class=\"Vlt-section__title\">{{section.label}}</h5>\n\t<div style='overflow: visible;' [ngClass]=\"{ 'for-preview': preview }\">\n\t\t<small *ngIf='section.description' class=\"Vlt-form__element__hint\">{{section.description}}</small>\n\t\t<div>\n\t\t\t<ng-container *ngFor='let field of section.fields'>\n\t\t\t\t<vgip-meta-field *ngIf='!field.$hidden && (showAll || section.visible || !field.$optional)' [meta]='field' [parent]='resource' [integrationCode]='integrationCode' [resourceType]='resourceType' [preview]='preview' [ngClass]=\"{ shown: !field.$invisible && (showAll || true) }\" theme='inherit' [attr.data-theme]='theme'></vgip-meta-field>\n\t\t\t</ng-container>\n\t\t</div>\n\t</div>\n</div>\n<div *ngIf='isPersistedResource && meta.children && preview'>\n\t<div *ngFor='let child of meta.children'>\n\t\t<h5 class='Vlt-children__title'>\n\t\t\t<svg class=\"Vlt-icon\"><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-stack\" /></svg>&nbsp;\n\t\t\t{{child.label}} <span class='Vlt-grey'>({{(resource[child.name] || []).length}})</span>\n\t\t</h5>\n\t\t<div *ngFor=\"let c of resource[child.name]\" style='position: relative;'>\n\n\t\t\t<div class=\"Vlt-card Vlt-bg-white\">\n\t\t\t\t<div class=\"Vlt-card__content Vlt-btn-on-hover\">\n\t\t\t\t\t<h5>{{childResourceCardLabel(c)}}</h5>\n\t\t\t\t\t<div style='font-size: 12px; line-height: 16px;'>\n\t\t\t\t\t\tCreated: <span class='Vlt-black'>{{c._vgis.createdDate | date:'mediumDate'}}</span>\n\t\t\t\t\t\tEdited: <span class='Vlt-black'>{{c._vgis.modifiedDate | date:'medium'}}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"Vlt-badge Vlt-badge--app Vlt-badge--purple Vlt-badge--small\">{{c._vgis.resourceType}}</div>\n\t\t\t\t\t<div class=\"Vlt-btn-group Vlt-btn-group--hover\">\n\t\t\t\t\t\t<a *ngIf='c._vgis.externalLink' attr.href='{{c._vgis.externalLink}}' target='_blank' rel='noopener' rel='noopener' class=\"Vlt-btn Vlt-btn--tertiary Vlt-btn--icon\" aria-label='Open external'><svg style='margin-left: 0; margin-right: 0;'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-open\"/></svg></a>\n\t\t\t\t\t\t<button type='button' (click)='openChild(child, c)' class=\"Vlt-btn Vlt-btn--tertiary Vlt-btn--icon\"><svg style='margin-left: 0; margin-right: 0;'><use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ child.reference.editable ? 'edit' : 'eye-negative' }}\"/></svg></button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<button style='width: 100%; margin-top: 0; max-width: 100%;' type='button' (click)='openChild(child)' class=\"Vlt-btn Vlt-btn--small Vlt-btn--secondary\" [disabled]='child.creatable === false'>\n\t\t\t<svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>{{child.reference.label}}\n\t\t</button>\n\t</div>\n</div>\n<div *ngIf='!(meta.oneTimeOptional && showAll)' [ngClass]='{ centered: !meta.oneTimeOptional }'>\n\t<button *ngIf='!preview && optionalFieldsCount' type='button' (click)='toggleOptionalFields()' class=\"Vlt-btn Vlt-btn--small Vlt-btn--link more-button\" style='margin: 0; margin-bottom: 10px;'>\n\t\t<svg><use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-chevron-{{ showAll ? 'up' : 'down' }}\"/></svg>\n\t\t{{ showAll ? 'Hide' : 'Show' }} Optional Fields ({{optionalFieldsCount}})\n\t</button>\n</div>\n", styles: ["vgip-meta-field{display:none}vgip-meta-field.shown{display:initial}.Vlt-section__title{line-height:14px;padding:16px 16px 14px 3px;margin:-9px -1px 8px;background-color:var(--vgip-meta-resource-bg-color);color:var(--vgip-meta-resource-color);position:sticky;top:-9px;z-index:3;border-bottom:1px solid var(--vgip-meta-separator-color)}.Vlt-section{margin:0;padding-bottom:8px;display:none}.Vlt-section.shown{display:block}.Vlt-btn.vlt-add-child:hover{transform:scale(1.02)}.for-preview{margin-top:-6px}.Vlt-card{margin-bottom:16px;padding:16px}.Vlt-card .Vlt-btn-group.Vlt-btn-group--hover{right:-8px}button.more-button:focus{font-weight:700}.centered{text-align:center}.Vlt-btn--link{color:var(--vgip-meta-link-color)}.Vlt-btn--link:hover{color:var(--vgip-meta-link-hover-color)}.Vlt-btn--link svg{fill:var(--vgip-meta-link-color)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: MetaResourceService }, { type: MetaReferenceService }]; }, propDecorators: { meta: [{
                 type: Input
             }], resource: [{
@@ -1273,10 +1293,10 @@ class MetaAutofocusDirective {
             }, 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 }); }
 }
-MetaAutofocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaAutofocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-MetaAutofocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: MetaAutofocusDirective, selector: "[vgipMetaFormAutofocus]", inputs: { vgipMetaFormAutofocus: "vgipMetaFormAutofocus" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaAutofocusDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MetaAutofocusDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line
@@ -1371,7 +1391,7 @@ class MetaResource {
     setEditMode() {
         this.edit = true;
     }
-    loadMetadata(layoutId, refresh = false) {
+    loadMetadata(layoutId, refresh = false, ev) {
         const layoutStoreKey = `vgis.layout_${this.metaContext.vgipUserId}_${this.integrationCode}_${this.resource.resourceType}`;
         if (!layoutId) {
             layoutId = localStorage.getItem(layoutStoreKey);
@@ -1407,6 +1427,11 @@ class MetaResource {
                 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);
@@ -1591,7 +1616,6 @@ class MetaResource {
                     catch (err) {
                         console.log('....', err);
                     }
-                    ;
                 }
                 else if (errorResult.status === 422) {
                     this.showParsedError(resourceForm, errorResult.error);
@@ -1742,12 +1766,12 @@ class MetaResource {
         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" }, 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)' novalidate>\n\t<div class='form-content' style='overflow: hidden;'>\n\t\t<div [ngClass]=\"{ 'Vlt-callout--dismissed': !formErrors }\" class=\"Vlt-callout Vlt-callout--banner Vlt-callout--critical\">\n\t\t\t<i></i>\n\t\t\t<div class=\"Vlt-callout__content\" style=\"margin-top: auto;\">\n\t\t\t\t<p>There is a problem with one or more fields</p>\n\t\t\t\t<small style='font-weight: 600; font-size: 1.0em;' *ngIf='formErrors'>{{ formErrors.message || formErrors }}</small>\n\t\t\t</div>\n\t\t\t<button type='button' class=\"Vlt-callout__dismiss\" (click)='clearFormErrors()' aria-label=\"Dismiss\"></button>\n\t\t</div>\n\t\t<div class=\"Vlt-card__content\" style='min-height: 40px;'>\n\t\t\t<vgip-meta-layout *ngIf='edit' [meta]='meta.layout' [resource]='model' [preview]='false' [integration]='meta.integration' [type]='resource.resourceType' theme='inherit'></vgip-meta-layout>\n\t\t\t<vgip-meta-layout *ngIf='!edit' [meta]='meta.layout' [resource]='model' [preview]='true' [integration]='meta.integration' [type]='resource.resourceType' theme='inherit'></vgip-meta-layout>\n\t\t</div>\n\t</div>\n\t<div class=\"Vlt-card__footer\">\n\t\t<button class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--outline\" type='button' aria-label='Cancel' (click)='close()'>\n\t\t\t{{ edit ? 'Cancel' : 'Close' }}\n\t\t</button>\n\t\t<button *ngIf='edit' class=\"Vlt-btn Vlt-btn--app\" [ngClass]=\"{ 'Vlt-btn--primary': isPersistent, 'Vlt-btn--secondary': !isPersistent }\" type='submit'>\n\t\t\t{{ (resource && resource.externalId) ? 'Update' : 'Create' }}\n\t\t</button>\n\t\t<button (click)='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]='isPersistent'>\n\t\t\t\t\t\t\t<option selected disabled>Select layout</option>\n\t\t\t\t\t\t\t<option *ngFor='let layout of meta.availableLayouts' [ngValue]='layout.id'>{{layout.name}}</option>\n\t\t\t\t\t\t</select>\n\t\t\t\t\t\t<label>Layout</label> <!-- 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"] }, { kind: "directive", type: MetaAutofocusDirective, selector: "[vgipMetaFormAutofocus]", inputs: ["vgipMetaFormAutofocus"] }] }); }
 }
-MetaResource.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaResource, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: MetaResourceService }, { token: MetaContextService }, { token: MetaMsgService }], target: i0.ɵɵFactoryTarget.Component });
-MetaResource.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: MetaResource, selector: "vgip-meta-resource", inputs: { resource: "resource", model: "model", metaResourceServiceDelegated: "metaResourceServiceDelegated", theme: "theme", editMode: "editMode" }, outputs: { done: "done" }, 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)' novalidate>\n\t<div class='form-content' style='overflow: hidden;'>\n\t\t<div [ngClass]=\"{ 'Vlt-callout--dismissed': !formErrors }\" class=\"Vlt-callout Vlt-callout--banner Vlt-callout--critical\">\n\t\t\t<i></i>\n\t\t\t<div class=\"Vlt-callout__content\" style=\"margin-top: auto;\">\n\t\t\t\t<p>There is a problem with one or more fields</p>\n\t\t\t\t<small style='font-weight: 600; font-size: 1.0em;' *ngIf='formErrors'>{{ formErrors.message || formErrors }}</small>\n\t\t\t</div>\n\t\t\t<button type='button' class=\"Vlt-callout__dismiss\" (click)='clearFormErrors()' aria-label=\"Dismiss\"></button>\n\t\t</div>\n\t\t<div class=\"Vlt-card__content\" style='min-height: 40px;'>\n\t\t\t<vgip-meta-layout *ngIf='edit' [meta]='meta.layout' [resource]='model' [preview]='false' [integration]='meta.integration' [type]='resource.resourceType' theme='inherit'></vgip-meta-layout>\n\t\t\t<vgip-meta-layout *ngIf='!edit' [meta]='meta.layout' [resource]='model' [preview]='true' [integration]='meta.integration' [type]='resource.resourceType' theme='inherit'></vgip-meta-layout>\n\t\t</div>\n\t</div>\n\t<div class=\"Vlt-card__footer\">\n\t\t<button class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--outline\" type='button' aria-label='Cancel' (click)='close()'>\n\t\t\t{{ edit ? 'Cancel' : 'Close' }}\n\t\t</button>\n\t\t<button *ngIf='edit' class=\"Vlt-btn Vlt-btn--app\" [ngClass]=\"{ 'Vlt-btn--primary': isPersistent, 'Vlt-btn--secondary': !isPersistent }\" type='submit'>\n\t\t\t{{ (resource && resource.externalId) ? 'Update' : 'Create' }}\n\t\t</button>\n\t\t<button (click)='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]='isPersistent'>\n\t\t\t\t\t\t\t<option selected disabled>Select layout</option>\n\t\t\t\t\t\t\t<option *ngFor='let layout of meta.availableLayouts' [ngValue]='layout.id'>{{layout.name}}</option>\n\t\t\t\t\t\t</select>\n\t\t\t\t\t\t<label>Layout</label>\n\t\t\t\t\t</label>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"Vlt-dropdown resource-menu\" [ngClass]=\"{ 'Vlt-dropdown--expanded': resourceMenuVisible }\" style='margin-left: 2px;'>\n\t\t\t<div class=\"Vlt-dropdown__panel\" style='bottom: 40px; right: -4px; top: initial;'>\n\t\t\t\t<div class=\"Vlt-dropdown__panel__content\">\n\t\t\t\t\t<a class=\"Vlt-dropdown__link\" (click)='loadMetadata(currentLayoutId, true)'>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<svg class='Vlt-icon Vlt-icon--smaller'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-refresh\"/></svg>&nbsp;&nbsp;Refresh metadata\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</a>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"Vlt-dropdown__trigger\">\n\t\t\t\t<button type='button' (click)='openResourceMenu()' class=\"Vlt-btn Vlt-btn--link\" aria-label='Resource menu'>\n\t\t\t\t\t<svg class='Vlt-icon Vlt-icon--small' style='margin: 0;'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-more-v-negative\"/></svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</form>\n<div class='busy-mask' [ngClass]=\"{ active: busy }\">\n\t<div style='height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;'>\n\t\t<div class=\"Vlt-spinner\"></div>\n\t</div>\n</div>\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"] }, { kind: "directive", type: MetaAutofocusDirective, selector: "[vgipMetaFormAutofocus]", inputs: ["vgipMetaFormAutofocus"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaResource, decorators: [{
+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)' novalidate>\n\t<div class='form-content' style='overflow: hidden;'>\n\t\t<div [ngClass]=\"{ 'Vlt-callout--dismissed': !formErrors }\" class=\"Vlt-callout Vlt-callout--banner Vlt-callout--critical\">\n\t\t\t<i></i>\n\t\t\t<div class=\"Vlt-callout__content\" style=\"margin-top: auto;\">\n\t\t\t\t<p>There is a problem with one or more fields</p>\n\t\t\t\t<small style='font-weight: 600; font-size: 1.0em;' *ngIf='formErrors'>{{ formErrors.message || formErrors }}</small>\n\t\t\t</div>\n\t\t\t<button type='button' class=\"Vlt-callout__dismiss\" (click)='clearFormErrors()' aria-label=\"Dismiss\"></button>\n\t\t</div>\n\t\t<div class=\"Vlt-card__content\" style='min-height: 40px;'>\n\t\t\t<vgip-meta-layout *ngIf='edit' [meta]='meta.layout' [resource]='model' [preview]='false' [integration]='meta.integration' [type]='resource.resourceType' theme='inherit'></vgip-meta-layout>\n\t\t\t<vgip-meta-layout *ngIf='!edit' [meta]='meta.layout' [resource]='model' [preview]='true' [integration]='meta.integration' [type]='resource.resourceType' theme='inherit'></vgip-meta-layout>\n\t\t</div>\n\t</div>\n\t<div class=\"Vlt-card__footer\">\n\t\t<button class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--outline\" type='button' aria-label='Cancel' (click)='close()'>\n\t\t\t{{ edit ? 'Cancel' : 'Close' }}\n\t\t</button>\n\t\t<button *ngIf='edit' class=\"Vlt-btn Vlt-btn--app\" [ngClass]=\"{ 'Vlt-btn--primary': isPersistent, 'Vlt-btn--secondary': !isPersistent }\" type='submit'>\n\t\t\t{{ (resource && resource.externalId) ? 'Update' : 'Create' }}\n\t\t</button>\n\t\t<button (click)='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]='isPersistent'>\n\t\t\t\t\t\t\t<option selected disabled>Select layout</option>\n\t\t\t\t\t\t\t<option *ngFor='let layout of meta.availableLayouts' [ngValue]='layout.id'>{{layout.name}}</option>\n\t\t\t\t\t\t</select>\n\t\t\t\t\t\t<label>Layout</label>\n\t\t\t\t\t</label>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"Vlt-dropdown resource-menu\" [ngClass]=\"{ 'Vlt-dropdown--expanded': resourceMenuVisible }\" style='margin-left: 2px;'>\n\t\t\t<div class=\"Vlt-dropdown__panel\" style='bottom: 40px; right: -4px; top: initial;'>\n\t\t\t\t<div class=\"Vlt-dropdown__panel__content\">\n\t\t\t\t\t<a class=\"Vlt-dropdown__link\" (click)='loadMetadata(currentLayoutId, true)'>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<svg class='Vlt-icon Vlt-icon--smaller'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-refresh\"/></svg>&nbsp;&nbsp;Refresh metadata\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</a>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"Vlt-dropdown__trigger\">\n\t\t\t\t<button type='button' (click)='openResourceMenu()' class=\"Vlt-btn Vlt-btn--link\" aria-label='Resource menu'>\n\t\t\t\t\t<svg class='Vlt-icon Vlt-icon--small' style='margin: 0;'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-more-v-negative\"/></svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</form>\n<div class='busy-mask' [ngClass]=\"{ active: busy }\">\n\t<div style='height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;'>\n\t\t<div class=\"Vlt-spinner\"></div>\n\t</div>\n</div>\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"] }]
+            args: [{ selector: 'vgip-meta-resource', template: "<div *ngIf='generalError' class=\"Vlt-callout Vlt-callout--critical\" style='overflow: auto; margin: 20px;'>\n\t<i></i>\n\t<div class=\"Vlt-callout__content\">\n\t\t<p>{{generalError}}</p>\n\t</div>\n</div>\n<div *ngIf='!meta' class=\"Vlt-progress\">\n\t<div class=\"Vlt-progress__bar\" [ngClass]=\"{ loading: metaLoading }\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuetext=\"Loading Metadata\" aria-valuemax=\"100\"></div>\n</div>\n<form [vgipMetaFormAutofocus]='!resource || !resource.externalId' *ngIf='meta && !generalError' #resourceForm=\"ngForm\" [name]='resource.resourceType' (ngSubmit)='submit(resourceForm)' novalidate>\n\t<div class='form-content' style='overflow: hidden;'>\n\t\t<div [ngClass]=\"{ 'Vlt-callout--dismissed': !formErrors }\" class=\"Vlt-callout Vlt-callout--banner Vlt-callout--critical\">\n\t\t\t<i></i>\n\t\t\t<div class=\"Vlt-callout__content\" style=\"margin-top: auto;\">\n\t\t\t\t<p>There is a problem with one or more fields</p>\n\t\t\t\t<small style='font-weight: 600; font-size: 1.0em;' *ngIf='formErrors'>{{ formErrors.message || formErrors }}</small>\n\t\t\t</div>\n\t\t\t<button type='button' class=\"Vlt-callout__dismiss\" (click)='clearFormErrors()' aria-label=\"Dismiss\"></button>\n\t\t</div>\n\t\t<div class=\"Vlt-card__content\" style='min-height: 40px;'>\n\t\t\t<vgip-meta-layout *ngIf='edit' [meta]='meta.layout' [resource]='model' [preview]='false' [integration]='meta.integration' [type]='resource.resourceType' theme='inherit'></vgip-meta-layout>\n\t\t\t<vgip-meta-layout *ngIf='!edit' [meta]='meta.layout' [resource]='model' [preview]='true' [integration]='meta.integration' [type]='resource.resourceType' theme='inherit'></vgip-meta-layout>\n\t\t</div>\n\t</div>\n\t<div class=\"Vlt-card__footer\">\n\t\t<button class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--outline\" type='button' aria-label='Cancel' (click)='close()'>\n\t\t\t{{ edit ? 'Cancel' : 'Close' }}\n\t\t</button>\n\t\t<button *ngIf='edit' class=\"Vlt-btn Vlt-btn--app\" [ngClass]=\"{ 'Vlt-btn--primary': isPersistent, 'Vlt-btn--secondary': !isPersistent }\" type='submit'>\n\t\t\t{{ (resource && resource.externalId) ? 'Update' : 'Create' }}\n\t\t</button>\n\t\t<button (click)='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]='isPersistent'>\n\t\t\t\t\t\t\t<option selected disabled>Select layout</option>\n\t\t\t\t\t\t\t<option *ngFor='let layout of meta.availableLayouts' [ngValue]='layout.id'>{{layout.name}}</option>\n\t\t\t\t\t\t</select>\n\t\t\t\t\t\t<label>Layout</label> <!-- 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: [{
@@ -1771,7 +1795,7 @@ class MetaRefDialog {
         this.resources = {};
         this.models = {};
         this.services = {};
-        this.keepOrder = (a, b) => a;
+        this.keepOrder = (a) => a;
         this.keyEventListener = (event) => {
             if (event && event.key === 'Escape') {
                 document.removeEventListener('keydown', this.keyEventListener);
@@ -1862,16 +1886,24 @@ class MetaRefDialog {
         this.modal.classList.remove('Vlt-modal_visible');
         this.modal.classList.add('Vlt-modal--out');
     }
-    dismiss() {
+    dismiss(ev) {
         this.close();
         this.onComplete(null);
+        if (ev) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            return false;
+        }
     }
     onResourceDone(result) {
         this.close();
         this.onComplete(result);
     }
-    selectResource(resource) {
+    selectResource(ev, resource) {
         this.currentResource = resource;
+        ev.preventDefault();
+        ev.stopPropagation();
+        return false;
     }
     applyTheme() {
         const metaTheme = this.theme === 'dark' ? metaDark : metaLight;
@@ -1879,12 +1911,12 @@ class MetaRefDialog {
             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"] }, { kind: "pipe", type: i1$2.KeyValuePipe, name: "keyvalue" }] }); }
 }
-MetaRefDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaRefDialog, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-MetaRefDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: MetaRefDialog, selector: "ng-component", ngImport: i0, template: "<div class='Vlt-modal Vlt-modal--large'>\n  <div class=\"Vlt-modal__panel\">\n    <div class=\"Vlt-tabs\">\n      <div class='Vlt-tabs__header--background'>\n        <div class=\"Vlt-tabs__header Vlt-tabs__header--shadow\">\n          <svg class=\"Vlt-icon\" [ngStyle]=\"{fill: integrationIcon === 'Brand-icon-vonage' ? 'var(--vgip-meta-input-color)' : ''}\"><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\" /></svg>\n          <div *ngFor='let r of resources | keyvalue: keepOrder' (click)='selectResource(r.key)' class=\"Vlt-tabs__link\" [ngClass]=\"{ 'Vlt-tabs__link_active': currentResource === r.key}\">\n            {{r.key}}\n          </div>\n          <div class=\"Vlt-modal__dismiss\" (click)=\"dismiss()\">\n            <svg class=\"Vlt-icon\"><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\" /></svg>\n          </div>\n        </div>\n      </div>\n      <div class=\"Vlt-tabs__content\" style='min-height: 90px;'>\n        <ng-container *ngFor='let r of resources | keyvalue: keepOrder'>\n          <div *ngIf='currentResource === r.key' class=\"Vlt-tabs__panel Vlt-tabs__panel_active\">\n            <vgip-meta-resource [resource]='r.value' [model]='models[r.key]' [metaResourceServiceDelegated]='metaResource' (done)='onResourceDone($event)' theme='inherit' [attr.data-theme]='theme'></vgip-meta-resource>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".Vlt-modal_visible{background:var(--vgip-meta-overlay-background)}.Vlt-modal__panel{padding:0;background:var(--vgip-meta-resource-bg-color);overflow:hidden}@media only screen and (max-width: 575px){.Vlt-modal__panel{height:100%;width:100%;max-height:none;border-bottom-left-radius:0;border-bottom-right-radius:0;margin:10px 6px 0}.Vlt-modal__panel ::ng-deep .busy-mask{min-height:calc(100vh - 58px)}}.Vlt-modal__panel .Vlt-tabs__header--background{border-top-left-radius:5px;border-top-right-radius:5px}.Vlt-modal__panel .Vlt-tabs__header{background:var(--vgip-meta-resource-bar-color);padding-left:52px;padding-right:45px;border-bottom:0;flex-wrap:wrap;min-height:52px;max-height:52px;align-items:center}.Vlt-modal__panel .Vlt-tabs__header>.Vlt-icon{position:absolute;left:14px}.Vlt-modal__panel .Vlt-tabs__header h5{margin-bottom:0;font-weight:initial}.Vlt-modal__panel .Vlt-tabs__header .Vlt-tabs__link{padding-top:4px;padding-bottom:2px;color:var(--vgip-meta-input-label-color);text-transform:capitalize}.Vlt-modal__panel .Vlt-tabs__header .Vlt-tabs__link_active{color:var(--vgip-meta-input-accent-color)}.Vlt-modal__panel .Vlt-tabs__header .Vlt-tabs__link_active:after{background:var(--vgip-meta-input-accent-color)}.Vlt-modal__panel .Vlt-tabs__header .Vlt-modal__dismiss{background-image:none;width:18px;height:18px;opacity:initial}.Vlt-modal__panel .Vlt-tabs__header .Vlt-modal__dismiss svg{width:16px;height:16px;fill:var(--vgip-meta-input-label-color)}.Vlt-modal__panel .Vlt-tabs__header .Vlt-modal__dismiss:hover svg{fill:var(--vgip-meta-input-accent-color)}.Vlt-modal__panel .Vlt-tabs__header::-webkit-scrollbar{width:8px}.Vlt-modal__panel .Vlt-tabs__header::-webkit-scrollbar-thumb{background-color:var(--vgip-meta-scrollbar-color);border:2px solid transparent;border-radius:6px;background-clip:content-box}.Vlt-modal__panel .Vlt-tabs__content{margin-top:0}.Vlt-modal__panel .Vlt-tabs__content .Vlt-tabs__link{font-size:1.8rem}.Vlt-modal__panel .Vlt-callout--banner{justify-content:initial;text-align:initial;overflow-y:auto}.Vlt-modal__panel .Vlt-callout--banner.Vlt-callout--dismissed{padding:0}.Vlt-modal__panel .Vlt-callout--banner:not(.Vlt-callout--dismissed){min-height:78px}.Vlt-modal__panel .Vlt-modal__cancel{z-index:899}.Vlt-modal__panel .Vlt-modal__dismiss{right:16px;top:14px}.Vlt-modal__panel .Vlt-card__footer button{margin-top:0;margin-bottom:0}.Vlt-modal__panel .Vlt-select select:disabled{background:initial;cursor:not-allowed}.Vlt-modal__panel ::ng-deep .form-content{min-height:0;max-height:calc(95vh - 172px)}@media only screen and (max-width: 575px){.Vlt-modal__panel ::ng-deep .form-content{min-height:calc(100vh - 113px)}}.resource-menu button{margin:0 -10px}.resource-menu button:not(:hover) .Vlt-icon{color:#616266;fill:#616266}.busy-mask{position:absolute;inset:0;background:rgba(0,0,0,.32);opacity:1;z-index:898;display:none;border-bottom-left-radius:6px;border-bottom-right-radius:6px;margin:1px;cursor:progress}.busy-mask.active{display:block}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MetaResource, selector: "vgip-meta-resource", inputs: ["resource", "model", "metaResourceServiceDelegated", "theme", "editMode"], outputs: ["done"] }, { kind: "pipe", type: i1$2.KeyValuePipe, name: "keyvalue" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaRefDialog, decorators: [{
+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          <div *ngFor='let r of resources | keyvalue: keepOrder' (click)='selectResource(r.key)' class=\"Vlt-tabs__link\" [ngClass]=\"{ 'Vlt-tabs__link_active': currentResource === r.key}\">\n            {{r.key}}\n          </div>\n          <div class=\"Vlt-modal__dismiss\" (click)=\"dismiss()\">\n            <svg class=\"Vlt-icon\"><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\" /></svg>\n          </div>\n        </div>\n      </div>\n      <div class=\"Vlt-tabs__content\" style='min-height: 90px;'>\n        <ng-container *ngFor='let r of resources | keyvalue: keepOrder'>\n          <div *ngIf='currentResource === r.key' class=\"Vlt-tabs__panel Vlt-tabs__panel_active\">\n            <vgip-meta-resource [resource]='r.value' [model]='models[r.key]' [metaResourceServiceDelegated]='metaResource' (done)='onResourceDone($event)' theme='inherit' [attr.data-theme]='theme'></vgip-meta-resource>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".Vlt-modal_visible{background:var(--vgip-meta-overlay-background)}.Vlt-modal__panel{padding:0;background:var(--vgip-meta-resource-bg-color);overflow:hidden}@media only screen and (max-width: 575px){.Vlt-modal__panel{height:100%;width:100%;max-height:none;border-bottom-left-radius:0;border-bottom-right-radius:0;margin:10px 6px 0}.Vlt-modal__panel ::ng-deep .busy-mask{min-height:calc(100vh - 58px)}}.Vlt-modal__panel .Vlt-tabs__header--background{border-top-left-radius:5px;border-top-right-radius:5px}.Vlt-modal__panel .Vlt-tabs__header{background:var(--vgip-meta-resource-bar-color);padding-left:52px;padding-right:45px;border-bottom:0;flex-wrap:wrap;min-height:52px;max-height:52px;align-items:center}.Vlt-modal__panel .Vlt-tabs__header>.Vlt-icon{position:absolute;left:14px}.Vlt-modal__panel .Vlt-tabs__header h5{margin-bottom:0;font-weight:initial}.Vlt-modal__panel .Vlt-tabs__header .Vlt-tabs__link{padding-top:4px;padding-bottom:2px;color:var(--vgip-meta-input-label-color);text-transform:capitalize}.Vlt-modal__panel .Vlt-tabs__header .Vlt-tabs__link_active{color:var(--vgip-meta-input-accent-color)}.Vlt-modal__panel .Vlt-tabs__header .Vlt-tabs__link_active:after{background:var(--vgip-meta-input-accent-color)}.Vlt-modal__panel .Vlt-tabs__header .Vlt-modal__dismiss{background-image:none;width:18px;height:18px;opacity:initial}.Vlt-modal__panel .Vlt-tabs__header .Vlt-modal__dismiss svg{width:16px;height:16px;fill:var(--vgip-meta-input-label-color)}.Vlt-modal__panel .Vlt-tabs__header .Vlt-modal__dismiss:hover svg{fill:var(--vgip-meta-input-accent-color)}.Vlt-modal__panel .Vlt-tabs__header::-webkit-scrollbar{width:8px}.Vlt-modal__panel .Vlt-tabs__header::-webkit-scrollbar-thumb{background-color:var(--vgip-meta-scrollbar-color);border:2px solid transparent;border-radius:6px;background-clip:content-box}.Vlt-modal__panel .Vlt-tabs__content{margin-top:0}.Vlt-modal__panel .Vlt-tabs__content .Vlt-tabs__link{font-size:1.8rem}.Vlt-modal__panel .Vlt-callout--banner{justify-content:initial;text-align:initial;overflow-y:auto}.Vlt-modal__panel .Vlt-callout--banner.Vlt-callout--dismissed{padding:0}.Vlt-modal__panel .Vlt-callout--banner:not(.Vlt-callout--dismissed){min-height:78px}.Vlt-modal__panel .Vlt-modal__cancel{z-index:899}.Vlt-modal__panel .Vlt-modal__dismiss{right:16px;top:14px}.Vlt-modal__panel .Vlt-card__footer button{margin-top:0;margin-bottom:0}.Vlt-modal__panel .Vlt-select select:disabled{background:initial;cursor:not-allowed}.Vlt-modal__panel ::ng-deep .form-content{min-height:0;max-height:calc(95vh - 172px)}@media only screen and (max-width: 575px){.Vlt-modal__panel ::ng-deep .form-content{min-height:calc(100vh - 113px)}}.resource-menu button{margin:0 -10px}.resource-menu button:not(:hover) .Vlt-icon{color:#616266;fill:#616266}.busy-mask{position:absolute;inset:0;background:rgba(0,0,0,.32);opacity:1;z-index:898;display:none;border-bottom-left-radius:6px;border-bottom-right-radius:6px;margin:1px;cursor:progress}.busy-mask.active{display:block}\n"] }]
+            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({
@@ -1893,4 +1925,4 @@ var index = /*#__PURE__*/Object.freeze({
 });
 
 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-4fcefde0.mjs.map
+//# sourceMappingURL=vgip-meta-ui-index-3bc3d41b.mjs.map