@veloceapps/sdk 2.0.10 → 2.0.12-1

package/fesm2015/veloce-sdk-cms.js

@@ -1,11 +1,12 @@
 import { __decorate, __param, __awaiter, __rest } from 'tslib';
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, ChangeDetectionStrategy, Inject, Injector, Injectable, Directive, ViewContainerRef, SkipSelf, ViewChild, Input, EventEmitter, TemplateRef, Output, NgModule } from '@angular/core';
+import { InjectionToken, Component, ChangeDetectionStrategy, Inject, Injector, Injectable, Directive, ViewContainerRef, SkipSelf, ViewChild, Input, EventEmitter, TemplateRef, Output, NgModule, ViewEncapsulation } from '@angular/core';
 import * as rxjs from 'rxjs';
 import { BehaviorSubject, combineLatest, of, shareReplay, throwError, Subject, takeUntil, map as map$1, from, tap as tap$1, switchMap, forkJoin, catchError as catchError$1 } from 'rxjs';
 import * as i7 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import { UUID, EntityUtil, RuntimeModel, ConfigurationContextMode, SalesforceIdUtils, ConfigurationMode, CoreModule } from '@veloce/core';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import * as angularForms from '@angular/forms';
 import { ReactiveFormsModule } from '@angular/forms';
 import * as lodash from 'lodash';
@@ -92,8 +93,14 @@ const parsePath = (path) => {
     if (((_c = segments[segments.length - 1]) === null || _c === void 0 ? void 0 : _c[0]) === ':') {
         variable = (_d = segments.pop()) === null || _d === void 0 ? void 0 : _d.substring(1);
     }
+    const isAbsolute = !segments[0];
+    const nonEmptySegments = segments.filter(Boolean);
+    if (!isAbsolute && nonEmptySegments[0] === '.') {
+        nonEmptySegments.shift();
+    }
     return {
-        segments,
+        isAbsolute,
+        segments: nonEmptySegments,
         module,
         variable,
     };
@@ -111,16 +118,15 @@ const findElementByModule = (elements, module, elementName) => {
     return;
 };
 const getAbsolutePath = (elements, subject, path) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     if (path.module) {
         return (_a = findElementByModule(elements, path.module, path.segments[0])) === null || _a === void 0 ? void 0 : _a.path;
     }
     const subjectSegments = (_c = (_b = subject.path) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [];
-    const isRelativePath = ((_d = path.segments[0]) === null || _d === void 0 ? void 0 : _d[0]) === '.';
-    if (!isRelativePath) {
-        return path.segments.join('/');
-    }
     const segments = [...path.segments];
+    if (path.isAbsolute) {
+        return segments.join('/');
+    }
     while (segments.length) {
         const segment = segments.shift();
         if (segment === '..') {
@@ -158,9 +164,9 @@ class DynamicModuleService {
         this.componentFactories = [];
     }
 }
-DynamicModuleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicModuleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DynamicModuleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicModuleService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicModuleService, decorators: [{
+DynamicModuleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: DynamicModuleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DynamicModuleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: DynamicModuleService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: DynamicModuleService, decorators: [{
             type: Injectable
         }] });
 
@@ -193,15 +199,20 @@ class IOProviderService {
         if (!this.inputs[path]) {
             this.inputs[path] = {};
         }
+        const subjectAlreadyExists = Boolean(this.inputs[path][name]);
         if (!this.inputs[path][name]) {
             this.inputs[path][name] = subject !== null && subject !== void 0 ? subject : new BehaviorSubject(undefined);
         }
+        if (subject && subjectAlreadyExists) {
+            // push delayed value to workaround 'changed after it was checked' issue
+            setTimeout(() => this.inputs[path][name].next(subject.value));
+        }
         return this.inputs[path][name];
     }
 }
-IOProviderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IOProviderService, deps: [{ token: DynamicModuleService }], target: i0.ɵɵFactoryTarget.Injectable });
-IOProviderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IOProviderService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IOProviderService, decorators: [{
+IOProviderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: IOProviderService, deps: [{ token: DynamicModuleService }], target: i0.ɵɵFactoryTarget.Injectable });
+IOProviderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: IOProviderService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: IOProviderService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: DynamicModuleService }]; } });
 
@@ -216,9 +227,9 @@ class TemplatesService {
         return this.templates[name];
     }
 }
-TemplatesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplatesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TemplatesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplatesService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplatesService, decorators: [{
+TemplatesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TemplatesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TemplatesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TemplatesService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TemplatesService, decorators: [{
             type: Injectable
         }] });
 
@@ -248,9 +259,9 @@ class IOPlugin {
         });
     }
 }
-IOPlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IOPlugin, deps: [{ token: ElementComponent }], target: i0.ɵɵFactoryTarget.Directive });
-IOPlugin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: IOPlugin, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IOPlugin, decorators: [{
+IOPlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: IOPlugin, deps: [{ token: ElementComponent }], target: i0.ɵɵFactoryTarget.Directive });
+IOPlugin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: IOPlugin, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: IOPlugin, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: ElementComponent }]; } });
 
@@ -295,9 +306,9 @@ class ScriptPlugin {
         this.document.body.removeChild(script);
     }
 }
-ScriptPlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScriptPlugin, deps: [{ token: ElementComponent }], target: i0.ɵɵFactoryTarget.Directive });
-ScriptPlugin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ScriptPlugin, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScriptPlugin, decorators: [{
+ScriptPlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ScriptPlugin, deps: [{ token: ElementComponent }], target: i0.ɵɵFactoryTarget.Directive });
+ScriptPlugin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: ScriptPlugin, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ScriptPlugin, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: ElementComponent }]; } });
 
@@ -454,9 +465,9 @@ function stringifyElementMetadata(elementMetadata) {
 
 class ElementContextService {
 }
-ElementContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ElementContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementContextService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementContextService, decorators: [{
+ElementContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ElementContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementContextService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementContextService, decorators: [{
             type: Injectable
         }] });
 
@@ -636,9 +647,9 @@ class RuntimeContextService {
         return uiDefinition;
     }
 }
-RuntimeContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RuntimeContextService, deps: [{ token: i1.ConfigurationApiService }, { token: i2.MessageService }], target: i0.ɵɵFactoryTarget.Injectable });
-RuntimeContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RuntimeContextService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RuntimeContextService, decorators: [{
+RuntimeContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: RuntimeContextService, deps: [{ token: i1.ConfigurationApiService }, { token: i2.MessageService }], target: i0.ɵɵFactoryTarget.Injectable });
+RuntimeContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: RuntimeContextService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: RuntimeContextService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.ConfigurationApiService }, { type: i2.MessageService }]; } });
 
@@ -719,9 +730,9 @@ class ConfigurationRuntimeService {
         return this._runtimeContext;
     }
 }
-ConfigurationRuntimeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationRuntimeService, deps: [{ token: i1.ConfigurationApiService }, { token: i2$1.ContextService }, { token: RuntimeContextService }], target: i0.ɵɵFactoryTarget.Injectable });
-ConfigurationRuntimeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationRuntimeService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationRuntimeService, decorators: [{
+ConfigurationRuntimeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ConfigurationRuntimeService, deps: [{ token: i1.ConfigurationApiService }, { token: i2$1.ContextService }, { token: RuntimeContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+ConfigurationRuntimeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ConfigurationRuntimeService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ConfigurationRuntimeService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.ConfigurationApiService }, { type: i2$1.ContextService }, { type: RuntimeContextService }]; } });
 
@@ -820,9 +831,9 @@ class ConfigurationService {
         };
     }
 }
-ConfigurationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationService, deps: [{ token: ConfigurationRuntimeService }, { token: i2$1.ContextService }, { token: i1.ConfigurationApiService }, { token: i2.MessageService }], target: i0.ɵɵFactoryTarget.Injectable });
-ConfigurationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationService, decorators: [{
+ConfigurationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ConfigurationService, deps: [{ token: ConfigurationRuntimeService }, { token: i2$1.ContextService }, { token: i1.ConfigurationApiService }, { token: i2.MessageService }], target: i0.ɵɵFactoryTarget.Injectable });
+ConfigurationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ConfigurationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ConfigurationService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: ConfigurationRuntimeService }, { type: i2$1.ContextService }, { type: i1.ConfigurationApiService }, { type: i2.MessageService }]; } });
 
@@ -938,9 +949,9 @@ class ElementRendererComponent {
         this.refs = {};
     }
 }
-ElementRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementRendererComponent, deps: [{ token: i0.Injector, skipSelf: true }, { token: DynamicModuleService }, { token: ElementContextService }, { token: IOProviderService }, { token: ConfigurationService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ElementRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: { meta: "meta" }, providers: [ElementContextService], viewQueries: [{ propertyName: "el", first: true, predicate: ["el"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-template #el></ng-template>\n", styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementRendererComponent, decorators: [{
+ElementRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementRendererComponent, deps: [{ token: i0.Injector, skipSelf: true }, { token: DynamicModuleService }, { token: ElementContextService }, { token: IOProviderService }, { token: ConfigurationService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ElementRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: { meta: "meta" }, providers: [ElementContextService], viewQueries: [{ propertyName: "el", first: true, predicate: ["el"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-template #el></ng-template>\n", styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'vl-cms-element-renderer',
@@ -964,9 +975,9 @@ class ElementChildrenComponent {
         this.metadata = this.elementContext.metadata;
     }
 }
-ElementChildrenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementChildrenComponent, deps: [{ token: ElementContextService }], target: i0.ɵɵFactoryTarget.Component });
-ElementChildrenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ElementChildrenComponent, selector: "element-children", ngImport: i0, template: "<ng-container *ngIf=\"metadata?.children.length\">\n  <ng-container *ngFor=\"let child of metadata.children\">\n    <vl-cms-element-renderer [meta]=\"child\"></vl-cms-element-renderer>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:contents}\n"], components: [{ type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementChildrenComponent, decorators: [{
+ElementChildrenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementChildrenComponent, deps: [{ token: ElementContextService }], target: i0.ɵɵFactoryTarget.Component });
+ElementChildrenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: ElementChildrenComponent, selector: "element-children", ngImport: i0, template: "<ng-container *ngIf=\"metadata?.children.length\">\n  <ng-container *ngFor=\"let child of metadata.children\">\n    <vl-cms-element-renderer [meta]=\"child\"></vl-cms-element-renderer>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:contents}\n"], components: [{ type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementChildrenComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -1057,9 +1068,9 @@ class FederatedComponent {
         this.instance.ngOnChanges(changes);
     }
 }
-FederatedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FederatedComponent, deps: [{ token: i0.Injector }, { token: i0.Compiler }, { token: i0.ApplicationRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-FederatedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FederatedComponent, selector: "veloce-host-federated", inputs: { remoteEntry: "remoteEntry", remoteName: "remoteName", exposedModule: "exposedModule", data: "data", eventData: "eventData" }, outputs: { integrationEvent: "integrationEvent" }, viewQueries: [{ propertyName: "federatedComponent", first: true, predicate: ["federatedComponent"], descendants: true, read: ViewContainerRef }, { propertyName: "foo", first: true, predicate: ["foo"], descendants: true, read: TemplateRef }, { propertyName: "moduleHostRef", first: true, predicate: ["moduleHost"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #moduleHost></div>\n", styles: [":host{display:block}div{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FederatedComponent, decorators: [{
+FederatedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FederatedComponent, deps: [{ token: i0.Injector }, { token: i0.Compiler }, { token: i0.ApplicationRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+FederatedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: FederatedComponent, selector: "veloce-host-federated", inputs: { remoteEntry: "remoteEntry", remoteName: "remoteName", exposedModule: "exposedModule", data: "data", eventData: "eventData" }, outputs: { integrationEvent: "integrationEvent" }, viewQueries: [{ propertyName: "federatedComponent", first: true, predicate: ["federatedComponent"], descendants: true, read: ViewContainerRef }, { propertyName: "foo", first: true, predicate: ["foo"], descendants: true, read: TemplateRef }, { propertyName: "moduleHostRef", first: true, predicate: ["moduleHost"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #moduleHost></div>\n", styles: [":host{display:block}div{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FederatedComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -1093,10 +1104,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 class FederatedModule {
 }
-FederatedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FederatedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FederatedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FederatedModule, declarations: [FederatedComponent], exports: [FederatedComponent] });
-FederatedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FederatedModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FederatedModule, decorators: [{
+FederatedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FederatedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FederatedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FederatedModule, declarations: [FederatedComponent], exports: [FederatedComponent] });
+FederatedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FederatedModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FederatedModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [FederatedComponent],
@@ -1117,9 +1128,9 @@ class CustomTemplateDirective {
         this.templatesService.register(this.customTemplate, this.templateRef);
     }
 }
-CustomTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomTemplateDirective, deps: [{ token: i0.TemplateRef }, { token: TemplatesService }], target: i0.ɵɵFactoryTarget.Directive });
-CustomTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CustomTemplateDirective, selector: "[customTemplate]", inputs: { customTemplate: "customTemplate" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomTemplateDirective, decorators: [{
+CustomTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: CustomTemplateDirective, deps: [{ token: i0.TemplateRef }, { token: TemplatesService }], target: i0.ɵɵFactoryTarget.Directive });
+CustomTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: CustomTemplateDirective, selector: "[customTemplate]", inputs: { customTemplate: "customTemplate" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: CustomTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[customTemplate]' }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: TemplatesService }]; }, propDecorators: { customTemplate: [{
@@ -1208,9 +1219,9 @@ class ConfigurationPlugin {
         return this.host;
     }
 }
-ConfigurationPlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationPlugin, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-ConfigurationPlugin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ConfigurationPlugin, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationPlugin, decorators: [{
+ConfigurationPlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ConfigurationPlugin, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+ConfigurationPlugin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: ConfigurationPlugin, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ConfigurationPlugin, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: undefined }]; } });
 
@@ -1393,7 +1404,7 @@ class LauncherService {
         };
         DynamicModule = __decorate([
             NgModule({
-                imports: [CommonModule, ReactiveFormsModule, FederatedModule],
+                imports: [CommonModule, ReactiveFormsModule, FederatedModule, DragDropModule],
                 declarations: [...staticComponents, ...elementsResolver.getNgComponents()],
                 jit: true,
             })
@@ -1401,9 +1412,9 @@ class LauncherService {
         return DynamicModule;
     }
 }
-LauncherService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LauncherService, deps: [{ token: i0.Compiler }, { token: DynamicModuleService }], target: i0.ɵɵFactoryTarget.Injectable });
-LauncherService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LauncherService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LauncherService, decorators: [{
+LauncherService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: LauncherService, deps: [{ token: i0.Compiler }, { token: DynamicModuleService }], target: i0.ɵɵFactoryTarget.Injectable });
+LauncherService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: LauncherService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: LauncherService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.Compiler }, { type: DynamicModuleService }]; } });
 
@@ -1470,9 +1481,9 @@ class PreviewComponent {
             .subscribe();
     }
 }
-PreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PreviewComponent, deps: [{ token: LauncherService }, { token: ConfigurationService }, { token: i2.MessageService }, { token: ConfigurationRuntimeService }], target: i0.ɵɵFactoryTarget.Component });
-PreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PreviewComponent, selector: "vl-cms-preview", inputs: { modelId: "modelId", uiDefinition: "uiDefinition" }, providers: [IOProviderService, TemplatesService], ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-element-renderer *ngFor=\"let el of elements\" [meta]=\"el\"></vl-cms-element-renderer>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [":host{flex-grow:1;display:flex;flex-direction:column;height:100%}\n"], components: [{ type: i5.LoaderComponent, selector: "vl-loader", inputs: ["label"] }, { type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i7.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PreviewComponent, decorators: [{
+PreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: PreviewComponent, deps: [{ token: LauncherService }, { token: ConfigurationService }, { token: i2.MessageService }, { token: ConfigurationRuntimeService }], target: i0.ɵɵFactoryTarget.Component });
+PreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: PreviewComponent, selector: "vl-cms-preview", inputs: { modelId: "modelId", uiDefinition: "uiDefinition" }, providers: [IOProviderService, TemplatesService], ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-element-renderer *ngFor=\"let el of elements\" [meta]=\"el\"></vl-cms-element-renderer>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [":host{flex-grow:1;display:flex;flex-direction:column;height:100%}\n"], components: [{ type: i5.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i7.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: PreviewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'vl-cms-preview',
@@ -1480,6 +1491,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     styleUrls: ['./preview.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [IOProviderService, TemplatesService],
+                    // use shadow DOM to prevent UI from being affected by global styles
+                    encapsulation: ViewEncapsulation.ShadowDom,
                 }]
         }], ctorParameters: function () { return [{ type: LauncherService }, { type: ConfigurationService }, { type: i2.MessageService }, { type: ConfigurationRuntimeService }]; }, propDecorators: { modelId: [{
                 type: Input
@@ -1489,10 +1502,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 class ElementRendererModule {
 }
-ElementRendererModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementRendererModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ElementRendererModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementRendererModule, declarations: [ElementRendererComponent], exports: [ElementRendererComponent] });
-ElementRendererModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementRendererModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementRendererModule, decorators: [{
+ElementRendererModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementRendererModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ElementRendererModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementRendererModule, declarations: [ElementRendererComponent], exports: [ElementRendererComponent] });
+ElementRendererModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementRendererModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementRendererModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ElementRendererComponent],
@@ -1502,10 +1515,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 class ElementChildrenModule {
 }
-ElementChildrenModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementChildrenModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ElementChildrenModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementChildrenModule, declarations: [ElementChildrenComponent], imports: [ElementRendererModule], exports: [ElementChildrenComponent] });
-ElementChildrenModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementChildrenModule, imports: [[ElementRendererModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ElementChildrenModule, decorators: [{
+ElementChildrenModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementChildrenModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ElementChildrenModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementChildrenModule, declarations: [ElementChildrenComponent], imports: [ElementRendererModule], exports: [ElementChildrenComponent] });
+ElementChildrenModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementChildrenModule, imports: [[ElementRendererModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementChildrenModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ElementChildrenComponent],
@@ -1516,10 +1529,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 class PreviewModule {
 }
-PreviewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PreviewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PreviewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PreviewModule, declarations: [PreviewComponent], imports: [CommonModule, LoaderModule, ElementRendererModule, ElementChildrenModule], exports: [PreviewComponent] });
-PreviewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PreviewModule, imports: [[CommonModule, LoaderModule, ElementRendererModule, ElementChildrenModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PreviewModule, decorators: [{
+PreviewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: PreviewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PreviewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: PreviewModule, declarations: [PreviewComponent], imports: [CommonModule, LoaderModule, ElementRendererModule, ElementChildrenModule], exports: [PreviewComponent] });
+PreviewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: PreviewModule, imports: [[CommonModule, LoaderModule, ElementRendererModule, ElementChildrenModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: PreviewModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [PreviewComponent],
@@ -1536,9 +1549,9 @@ function ElementDefinition(definition) {
 
 class ConfigurationModule {
 }
-ConfigurationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ConfigurationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationModule });
-ConfigurationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationModule, providers: [
+ConfigurationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ConfigurationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ConfigurationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ConfigurationModule });
+ConfigurationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ConfigurationModule, providers: [
         ContextService,
         ContextApiService,
         ProductModelApiService,
@@ -1547,7 +1560,7 @@ ConfigurationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
         RuntimeContextService,
         ConfigurationService,
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ConfigurationModule, decorators: [{
             type: NgModule,
             args: [{
                     providers: [
@@ -1564,10 +1577,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 class LauncherModule {
 }
-LauncherModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LauncherModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LauncherModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LauncherModule, imports: [CommonModule, CoreModule, ConfigurationModule] });
-LauncherModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LauncherModule, providers: [LauncherService, DynamicModuleService, SalesforceApiService, QuoteApiService], imports: [[CommonModule, CoreModule, ConfigurationModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LauncherModule, decorators: [{
+LauncherModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: LauncherModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LauncherModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: LauncherModule, imports: [CommonModule, CoreModule, ConfigurationModule] });
+LauncherModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: LauncherModule, providers: [LauncherService, DynamicModuleService, SalesforceApiService, QuoteApiService], imports: [[CommonModule, CoreModule, ConfigurationModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: LauncherModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, CoreModule, ConfigurationModule],