@vgip/meta-ui 1.2.7 → 1.2.8

package/fesm2020/vgip-meta-ui.mjs

@@ -898,6 +898,38 @@ class FieldAbstract {
                 configurable: true,
                 enumerable: false
             });
+            Object.defineProperty(this.meta, '$invisible', {
+                value: false,
+                writable: true,
+                configurable: true,
+                enumerable: false
+            });
+            if (typeof (this.meta.visible) !== undefined) {
+                if (typeof (this.meta.visible) === 'object') {
+                    for (const par of Object.keys(this.meta.visible)) {
+                        if (typeof (this.meta.visible[par]) === 'boolean') { // any value makes me visible
+                            this.meta.$invisible = !this.parent[par];
+                        }
+                        else { // only specific value
+                            this.meta.$invisible = this.parent[par] !== this.meta.visible[par];
+                        }
+                        this.parentChangeSubject.subscribe((value) => {
+                            if (value && value.hasOwnProperty(par)) {
+                                const parValue = value[par] ? (value[par].id || value[par].value || value[par]) : value[par];
+                                if (typeof (this.meta.visible[par]) === 'boolean') { // any value makes me visible
+                                    this.meta.$invisible = !parValue;
+                                }
+                                else {
+                                    this.meta.$invisible = (parValue !== this.meta.visible[par]);
+                                }
+                                if (this.meta.$invisible) {
+                                    delete this.parent[this.meta.name];
+                                }
+                            }
+                        });
+                    }
+                }
+            }
             if (this.theme !== 'inherit') {
                 const metaTheme = this.theme === 'dark' ? metaDark : metaLight;
                 for (const key of Object.keys(metaTheme.properties)) {
@@ -2781,10 +2813,10 @@ class FieldComposite extends FieldAbstract {
     }
 }
 FieldComposite.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FieldComposite, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FieldComposite.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FieldComposite, selector: "ng-component", inputs: { meta: "meta" }, usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ 'Vlt-grid Vlt-grid--narrow': isRow }\" >\n  <div style='margin: 0;' [ngClass]=\"{ 'Vlt-col': isRow, 'Vlt-col--1of3': isRow && fields.length > 3 }\" *ngFor='let field of fields'>\n    <vgip-meta-field class='shown' [index]='index' [meta]='field' [parent]='parent' [integrationCode]='integrationCode' [preview]='preview' theme='inherit'></vgip-meta-field>\n  </div>\n</div>", components: [{ type: i0.forwardRef(function () { return MetaField; }), selector: "vgip-meta-field", inputs: ["meta", "parent", "integrationCode", "resourceType", "index", "preview", "theme"], outputs: ["onChange", "onLeave"] }], directives: [{ type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+FieldComposite.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FieldComposite, selector: "ng-component", inputs: { meta: "meta" }, usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ 'Vlt-grid Vlt-grid--narrow': isRow }\" >\n  <div style='margin: 0;' [ngClass]=\"{ 'Vlt-col': isRow, 'Vlt-col--1of3': isRow && fields.length > 3 }\" *ngFor='let field of fields'>\n    <vgip-meta-field class='shown' [index]='index' [meta]='field' [parent]='parent' [integrationCode]='integrationCode' [preview]='preview' theme='inherit' [ngClass]=\"{ shown: !field.$invisible }\"></vgip-meta-field>\n  </div>\n</div>", styles: ["div>vgip-meta-field{display:none}div>vgip-meta-field.shown{display:initial}\n"], components: [{ type: i0.forwardRef(function () { return MetaField; }), selector: "vgip-meta-field", inputs: ["meta", "parent", "integrationCode", "resourceType", "index", "preview", "theme"], outputs: ["onChange", "onLeave"] }], directives: [{ type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FieldComposite, decorators: [{
             type: Component,
-            args: [{ template: "<div [ngClass]=\"{ 'Vlt-grid Vlt-grid--narrow': isRow }\" >\n  <div style='margin: 0;' [ngClass]=\"{ 'Vlt-col': isRow, 'Vlt-col--1of3': isRow && fields.length > 3 }\" *ngFor='let field of fields'>\n    <vgip-meta-field class='shown' [index]='index' [meta]='field' [parent]='parent' [integrationCode]='integrationCode' [preview]='preview' theme='inherit'></vgip-meta-field>\n  </div>\n</div>" }]
+            args: [{ template: "<div [ngClass]=\"{ 'Vlt-grid Vlt-grid--narrow': isRow }\" >\n  <div style='margin: 0;' [ngClass]=\"{ 'Vlt-col': isRow, 'Vlt-col--1of3': isRow && fields.length > 3 }\" *ngFor='let field of fields'>\n    <vgip-meta-field class='shown' [index]='index' [meta]='field' [parent]='parent' [integrationCode]='integrationCode' [preview]='preview' theme='inherit' [ngClass]=\"{ shown: !field.$invisible }\"></vgip-meta-field>\n  </div>\n</div>", styles: ["div>vgip-meta-field{display:none}div>vgip-meta-field.shown{display:initial}\n"] }]
         }], propDecorators: { meta: [{
                 type: Input
             }] } });
@@ -4181,10 +4213,10 @@ class MetaLayout {
     }
 }
 MetaLayout.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MetaLayout, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: MetaResourceService }, { token: MetaReferenceService }], target: i0.ɵɵFactoryTarget.Component });
-MetaLayout.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", 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: 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>{{c.Subject || c.subject || c.summary || c.title || c.CaseNumber || c.comment || c.body || c.name || c.topic || c.content || '...' }}</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:bold}.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"], components: [{ type: i0.forwardRef(function () { return MetaField; }), selector: "vgip-meta-field", inputs: ["meta", "parent", "integrationCode", "resourceType", "index", "preview", "theme"], outputs: ["onChange", "onLeave"] }], directives: [{ type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "date": i0.forwardRef(function () { return i1.DatePipe; }) } });
+MetaLayout.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", 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>{{c.Subject || c.subject || c.summary || c.title || c.CaseNumber || c.comment || c.body || c.name || c.topic || c.content || '...' }}</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:bold}.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"], components: [{ type: i0.forwardRef(function () { return MetaField; }), selector: "vgip-meta-field", inputs: ["meta", "parent", "integrationCode", "resourceType", "index", "preview", "theme"], outputs: ["onChange", "onLeave"] }], directives: [{ type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "date": i0.forwardRef(function () { return i1.DatePipe; }) } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", 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: 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>{{c.Subject || c.subject || c.summary || c.title || c.CaseNumber || c.comment || c.body || c.name || c.topic || c.content || '...' }}</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:bold}.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>{{c.Subject || c.subject || c.summary || c.title || c.CaseNumber || c.comment || c.body || c.name || c.topic || c.content || '...' }}</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:bold}.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.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: MetaResourceService }, { type: MetaReferenceService }]; }, propDecorators: { meta: [{
                 type: Input
             }], resource: [{
@@ -4839,9 +4871,9 @@ class MetaIconsPipe {
         this.sanitizer = sanitizer;
     }
     transform(value, ...args) {
-        if (value) {
+        if (typeof (value) === 'string') {
             value = value.replace(/\${\s*icon:([\w\-]+)\s*}/g, (match, val) => `<svg class='Vlt-icon'><use xlink:href="volta/volta-icons.svg#${val}"/></svg>`);
-            return this.sanitizer.bypassSecurityTrustHtml(value);
+            return value; //this.sanitizer.bypassSecurityTrustHtml(value);
         }
     }
 }