@pepperi-addons/ngx-composite-lib 0.0.16-beta.32 → 0.0.16-beta.35

package/bundles/pepperi-addons-ngx-composite-lib-data-view-builder.umd.js

@@ -34,351 +34,354 @@
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
     var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
 
-    var DataViewBuilderService = /** @class */ (function () {
-        function DataViewBuilderService() {
-            // This subject is for is grabbing mode.
-            this._isGrabbingSubject = new rxjs.BehaviorSubject(false);
-        }
-        Object.defineProperty(DataViewBuilderService.prototype, "isGrabbingChange$", {
-            get: function () {
-                return this._isGrabbingSubject.asObservable().pipe(operators.distinctUntilChanged());
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DataViewBuilderService.prototype.changeCursorOnDragStart = function () {
-            document.body.classList.add('inheritCursors');
-            document.body.style.cursor = 'grabbing';
-            this._isGrabbingSubject.next(true);
-        };
-        DataViewBuilderService.prototype.changeCursorOnDragEnd = function () {
-            document.body.classList.remove('inheritCursors');
-            document.body.style.cursor = 'unset';
-            this._isGrabbingSubject.next(false);
-        };
-        DataViewBuilderService.prototype.onDragStart = function (event) {
-            this.changeCursorOnDragStart();
-        };
-        DataViewBuilderService.prototype.onDragEnd = function (event) {
-            this.changeCursorOnDragEnd();
-        };
-        return DataViewBuilderService;
-    }());
-    DataViewBuilderService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: DataViewBuilderService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    DataViewBuilderService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: DataViewBuilderService, providedIn: 'root' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: DataViewBuilderService, decorators: [{
-                type: i0.Injectable,
-                args: [{
-                        providedIn: 'root'
-                    }]
+    var DataViewBuilderService = /** @class */ (function () {
+        function DataViewBuilderService() {
+            // This subject is for is grabbing mode.
+            this._isGrabbingSubject = new rxjs.BehaviorSubject(false);
+            //
+        }
+        Object.defineProperty(DataViewBuilderService.prototype, "isGrabbingChange$", {
+            get: function () {
+                return this._isGrabbingSubject.asObservable().pipe(operators.distinctUntilChanged());
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DataViewBuilderService.prototype.changeCursorOnDragStart = function () {
+            document.body.classList.add('inheritCursors');
+            document.body.style.cursor = 'grabbing';
+            this._isGrabbingSubject.next(true);
+        };
+        DataViewBuilderService.prototype.changeCursorOnDragEnd = function () {
+            document.body.classList.remove('inheritCursors');
+            document.body.style.cursor = 'unset';
+            this._isGrabbingSubject.next(false);
+        };
+        DataViewBuilderService.prototype.onDragStart = function (event) {
+            this.changeCursorOnDragStart();
+        };
+        DataViewBuilderService.prototype.onDragEnd = function (event) {
+            this.changeCursorOnDragEnd();
+        };
+        return DataViewBuilderService;
+    }());
+    DataViewBuilderService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: DataViewBuilderService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    DataViewBuilderService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: DataViewBuilderService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: DataViewBuilderService, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root'
+                    }]
             }], ctorParameters: function () { return []; } });
 
-    var MenuDataViewComponent = /** @class */ (function () {
-        function MenuDataViewComponent(dialogService, dataViewBuilderService) {
-            var _this = this;
-            this.dialogService = dialogService;
-            this.dataViewBuilderService = dataViewBuilderService;
-            this.fields = []; // The data view fields.
-            this.availableFieldsTitles = new Map(); // <FieldID, Original Title> from the available fields.
-            this.emptyDropAreaId = '';
-            this.mappedFieldsId = '';
-            this.fieldsChange = new i0.EventEmitter();
-            this.isGrabbing = false;
-            this.dialogRef = null;
-            this.dataViewBuilderService.isGrabbingChange$.subscribe(function (value) {
-                _this.isGrabbing = value;
-            });
-        }
-        MenuDataViewComponent.prototype.addNewField = function (draggableItem, index) {
-            // Add new menuField to the mappedFields.
-            var menuField = { FieldID: draggableItem.data.key, Title: draggableItem.title };
-            this.spliceMappedFields(index, 0, menuField);
-        };
-        MenuDataViewComponent.prototype.spliceMappedFields = function (start, deleteCount, item) {
-            if (item) {
-                this.fields.splice(start, deleteCount, item);
-            }
-            else {
-                this.fields.splice(start, deleteCount);
-            }
-            this.notifyFieldsChange();
-        };
-        MenuDataViewComponent.prototype.changeTitle = function (menuField, title) {
-            menuField.Title = title;
-            this.notifyFieldsChange();
-        };
-        MenuDataViewComponent.prototype.notifyFieldsChange = function () {
-            this.fieldsChange.emit(this.fields);
-        };
-        MenuDataViewComponent.prototype.ngOnInit = function () {
-        };
-        MenuDataViewComponent.prototype.addSeparator = function (index) {
-            var menuField = { FieldID: '', Title: '' };
-            this.spliceMappedFields(index, 0, menuField);
-        };
-        MenuDataViewComponent.prototype.onDragStart = function (event) {
-            this.dataViewBuilderService.onDragStart(event);
-        };
-        MenuDataViewComponent.prototype.onDragEnd = function (event) {
-            this.dataViewBuilderService.onDragEnd(event);
-        };
-        MenuDataViewComponent.prototype.onDropField = function (event) {
-            if (event.previousContainer === event.container) {
-                i8.moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
-                this.notifyFieldsChange();
-            }
-            else if (event.container.id === 'emptyDropArea') {
-                this.addNewField(event.previousContainer.data[event.previousIndex], this.fields.length);
-            }
-            else {
-                this.addNewField(event.previousContainer.data[event.previousIndex], event.currentIndex);
-            }
-        };
-        MenuDataViewComponent.prototype.onTitleChanged = function (event, menuField) {
-            this.changeTitle(menuField, event);
-        };
-        MenuDataViewComponent.prototype.onDeleteMappedField = function (event, menuField) {
-            var index = this.fields.findIndex(function (ms) { return ms === menuField; });
-            if (index > -1) {
-                this.spliceMappedFields(index, 1);
-            }
-        };
-        MenuDataViewComponent.prototype.onEditSeparatorField = function (event, menuField) {
-            var _this = this;
-            this.dialogRef = this.dialogService.openDialog(this.separatorTitleModalTemplate, { value: menuField.Title });
-            this.dialogRef.afterClosed().subscribe(function (titleValue) {
-                if (titleValue !== undefined) {
-                    _this.changeTitle(menuField, titleValue);
-                }
-            });
-        };
-        MenuDataViewComponent.prototype.setDialogValue = function (value) {
-            this.closeDialog(value);
-        };
-        MenuDataViewComponent.prototype.closeDialog = function (value) {
-            if (value === void 0) { value = undefined; }
-            var _a;
-            (_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.close(value);
-        };
-        return MenuDataViewComponent;
-    }());
-    MenuDataViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: MenuDataViewComponent, deps: [{ token: i1__namespace.PepDialogService }, { token: DataViewBuilderService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MenuDataViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: MenuDataViewComponent, selector: "menu-data-view", inputs: { fields: "fields", availableFieldsTitles: "availableFieldsTitles", emptyDropAreaId: "emptyDropAreaId", mappedFieldsId: "mappedFieldsId" }, outputs: { fieldsChange: "fieldsChange" }, viewQueries: [{ propertyName: "separatorTitleModalTemplate", first: true, predicate: ["separatorTitleModalTemplate"], descendants: true, read: i0.TemplateRef }], ngImport: i0__namespace, template: "<ng-container *ngIf=\"fields === null || fields.length === 0; then emptyTemplate; else notEmptyTemplate\"></ng-container>\n<ng-template #emptyTemplate>\n    <div [id]=\"emptyDropAreaId\" class=\"drop-field-here-area\" cdkDropList (cdkDropListDropped)=\"onDropField($event)\">\n        <mat-icon class=\"pep-spacing-element\">\n            <pep-icon name=\"arrow_down_alt\"></pep-icon>\n        </mat-icon>\n        <span class=\"body-sm ellipsis\">\n            {{ 'DATA_VIEW_BUILDER.EMPTY_DROP_AREA_TEXT' | translate }}\n        </span> \n    </div>\n</ng-template>\n<ng-template #notEmptyTemplate>\n    <div [id]=\"mappedFieldsId\" class=\"mapped-fields-area\" [ngClass]=\"{ 'no-row-gap': !isGrabbing }\"\n        cdkDropList [cdkDropListData]=\"fields\" (cdkDropListDropped)=\"onDropField($event)\">\n        <ng-container *ngFor=\"let menuField of fields; let i = index\" >\n            <div class=\"mapped-field-container\" [ngClass]=\"{ 'separator-container': menuField.FieldID === '' }\" \n                cdkDrag (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\">\n                <ng-container *ngTemplateOutlet=\"mappedFieldTemplate; context: { menuField: menuField }\"></ng-container>\n            </div>\n            <div *ngIf=\"!isGrabbing\" class=\"add-separator-container\">\n                <pep-button class=\"add-separator\" styleType=\"regular\" sizeType=\"sm\" iconName=\"number_plus\" \n                    [value]=\"'DATA_VIEW_BUILDER.ADD_SEPARATOR' | translate\" (buttonClick)=\"addSeparator(i+1)\"></pep-button>\n            </div>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-template #mappedFieldTemplate let-menuField=\"menuField\">\n    <ng-container *ngIf=\"menuField.FieldID !== ''; then menuItemTemplate; else separatorTemplate\"></ng-container>\n\n    <ng-template #menuItemTemplate>\n        <div class=\"fields-wrapper\">\n            <pep-textbox [label]=\"'DATA_VIEW_BUILDER.MENU_ITEM_KEY_TITLE' | translate\" [value]=\"menuField.FieldID\" [disabled]=\"true\">\n            </pep-textbox>\n            \n            <pep-textbox [label]=\"'DATA_VIEW_BUILDER.MENU_ITEM_VALUE_TITLE' | translate\" [hint]=\"'(' + (availableFieldsTitles.get(menuField.FieldID) || '') + ')'\"\n                [value]=\"menuField.Title\" (valueChange)=\"onTitleChanged($event, menuField)\">\n            </pep-textbox>\n    \n            <pep-button class=\"center-button\" iconName=\"system_bin\" [title]=\"'ACTIONS.DELETE' | translate\" (buttonClick)=\"onDeleteMappedField($event, menuField)\"></pep-button>\n        </div>\n    </ng-template>\n    <ng-template #separatorTemplate>\n        <div class=\"separator-wrapper \">\n            <div class=\"pep-spacing-element title title-md color-dimmed\">\n                <span [title]=\"menuField.Title\">{{ menuField.Title }}</span>\n            </div>\n            <div class=\"list-actions\">\n                <pep-button iconName=\"system_edit\" [title]=\"'ACTIONS.EDIT' | translate\" sizeType=\"xs\" styleType=\"regular\" (buttonClick)=\"onEditSeparatorField($event, menuField)\"></pep-button>\n                <pep-button iconName=\"system_bin\" [title]=\"'ACTIONS.DELETE' | translate\" sizeType=\"xs\" styleType=\"regular\" (buttonClick)=\"onDeleteMappedField($event, menuField)\"></pep-button>\n            </div>\n        </div>\n    </ng-template>\n</ng-template>\n\n<ng-template #separatorTitleModalTemplate let-data>\n    <pep-dialog [title]=\"'DATA_VIEW_BUILDER.SEPARATOR_TITLE' | translate\">\n        <ng-container pep-dialog-content>\n            <pep-textbox #txt [label]=\"'DATA_VIEW_BUILDER.ADD_A_TITLE' | translate\" [(value)]=\"data.value\">\n            </pep-textbox>\n        </ng-container>\n        <ng-container pep-dialog-actions>\n            <div class=\"pep-spacing-element-negative\">\n                <button mat-button class=\"pep-spacing-element pep-button md weak\"\n                    (click)=\"closeDialog()\">\n                    {{'Cancel' | translate}}\n                </button>\n                <button mat-button class=\"pep-spacing-element pep-button md strong\"\n                    (click)=\"setDialogValue(txt.value)\">\n                    {{ 'Save' | translate}}\n                </button>\n            </div>\n        </ng-container>\n    </pep-dialog>\n</ng-template>", styles: ["html body.inheritCursors *{cursor:inherit!important}.cdk-drag-preview.mapped-field-container{max-width:600px;display:flex;justify-content:center;align-items:center;border-radius:var(--pep-border-radius-md, .25rem)}.cdk-drag-preview.mapped-field-container:not(.separator-container){padding-inline:var(--pep-spacing-lg, 1rem)}.cdk-drag-preview.mapped-field-container:not(.separator-container){grid-gap:calc(var(--pep-spacing-lg, 1rem) * 2);gap:calc(var(--pep-spacing-lg, 1rem) * 2);background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.cdk-drag-preview.mapped-field-container .fields-wrapper{display:grid;width:100%;grid-template-columns:1fr 1fr auto;grid-gap:.5rem;gap:.5rem;padding-top:.5rem}.cdk-drag-preview.mapped-field-container .fields-wrapper .center-button{margin-top:var(--pep-form-field-title-height, 1.5rem)}.cdk-drag-preview.mapped-field-container .separator-wrapper{display:grid;width:100%;grid-template-columns:1fr auto;padding-bottom:var(--pep-spacing-xs, .25rem);border-bottom:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.cdk-drag-preview.mapped-field-container .separator-wrapper .list-actions{display:flex;grid-gap:var(--pep-spacing-xs, .25rem);gap:var(--pep-spacing-xs, .25rem)}.drop-field-here-area{min-height:5rem;max-width:600px;display:flex;justify-content:center;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12);position:relative}.drop-field-here-area:not(.separator-container){padding-inline:var(--pep-spacing-lg, 1rem)}.drop-field-here-area:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),calc(var(--pep-color-system-primary-l, 10%) + 30%))}.drop-field-here-area.cdk-drop-list-dragging{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.drop-field-here-area.cdk-drop-list-dragging:hover{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 20%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.drop-field-here-area.cdk-drop-list-dragging ::ng-deep .placeholder-item{display:none}.mapped-fields-area{display:flex;flex-direction:column;grid-column-gap:var(--pep-spacing-lg, 1rem);column-gap:var(--pep-spacing-lg, 1rem)}.mapped-fields-area:not(.no-row-gap){grid-row-gap:var(--pep-spacing-lg, 1rem);row-gap:var(--pep-spacing-lg, 1rem)}.mapped-fields-area.cdk-drop-list-dragging ::ng-deep .placeholder-item{max-width:600px;display:flex;justify-content:center;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5);height:2.5rem}.mapped-fields-area.cdk-drop-list-dragging ::ng-deep .placeholder-item:not(.separator-container){padding-inline:var(--pep-spacing-lg, 1rem)}.mapped-fields-area .mapped-field-container{cursor:grab;max-width:600px;display:flex;justify-content:center;align-items:center;border-radius:var(--pep-border-radius-md, .25rem)}.mapped-fields-area .mapped-field-container:not(.separator-container){padding-inline:var(--pep-spacing-lg, 1rem)}.mapped-fields-area .mapped-field-container:not(.separator-container){grid-gap:calc(var(--pep-spacing-lg, 1rem) * 2);gap:calc(var(--pep-spacing-lg, 1rem) * 2);background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.mapped-fields-area .mapped-field-container .fields-wrapper{display:grid;width:100%;grid-template-columns:1fr 1fr auto;grid-gap:.5rem;gap:.5rem;padding-top:.5rem}.mapped-fields-area .mapped-field-container .fields-wrapper .center-button{margin-top:var(--pep-form-field-title-height, 1.5rem)}.mapped-fields-area .mapped-field-container .separator-wrapper{display:grid;width:100%;grid-template-columns:1fr auto;padding-bottom:var(--pep-spacing-xs, .25rem);border-bottom:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.mapped-fields-area .mapped-field-container .separator-wrapper .list-actions{display:flex;grid-gap:var(--pep-spacing-xs, .25rem);gap:var(--pep-spacing-xs, .25rem)}.mapped-fields-area .mapped-field-container.cdk-drag-placeholder{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.mapped-fields-area .mapped-field-container.cdk-drag-placeholder .fields-wrapper,.mapped-fields-area .mapped-field-container.cdk-drag-placeholder .separator-wrapper{opacity:0}.mapped-fields-area .add-separator-container{max-width:600px;display:flex;justify-content:center;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);height:var(--pep-spacing-lg, 1rem)}.mapped-fields-area .add-separator-container:not(.separator-container){padding-inline:var(--pep-spacing-lg, 1rem)}.mapped-fields-area .add-separator-container .add-separator{position:relative;display:none}.mapped-fields-area .add-separator-container:hover .add-separator{display:block}\n"], components: [{ type: i3__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1__namespace$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { type: i5__namespace.PepButtonComponent, selector: "pep-button", inputs: ["styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconPosition", "visible", "key", "value", "iconName"], outputs: ["buttonClick"] }, { type: i6__namespace.PepTextboxComponent, selector: "pep-textbox", inputs: ["accessory", "label", "placeholder", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "key", "value", "formattedValue", "type", "visible", "maxFieldCharacters", "hint"], outputs: ["valueChange", "formValidationChange"] }, { type: i1__namespace.PepDialogComponent, selector: "pep-dialog", inputs: ["showClose", "showHeader", "showFooter", "title"], outputs: ["close"] }], directives: [{ type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i7__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i7__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i9__namespace.TranslatePipe } });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: MenuDataViewComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'menu-data-view',
-                        templateUrl: './menu-data-view.component.html',
-                        styleUrls: ['./menu-data-view.component.scss']
-                    }]
-            }], ctorParameters: function () { return [{ type: i1__namespace.PepDialogService }, { type: DataViewBuilderService }]; }, propDecorators: { separatorTitleModalTemplate: [{
-                    type: i0.ViewChild,
-                    args: ['separatorTitleModalTemplate', { read: i0.TemplateRef }]
-                }], fields: [{
-                    type: i0.Input
-                }], availableFieldsTitles: [{
-                    type: i0.Input
-                }], emptyDropAreaId: [{
-                    type: i0.Input
-                }], mappedFieldsId: [{
-                    type: i0.Input
-                }], fieldsChange: [{
-                    type: i0.Output
+    var MenuDataViewComponent = /** @class */ (function () {
+        function MenuDataViewComponent(dialogService, dataViewBuilderService) {
+            var _this = this;
+            this.dialogService = dialogService;
+            this.dataViewBuilderService = dataViewBuilderService;
+            this.fields = []; // The data view fields.
+            this.availableFieldsTitles = new Map(); // <FieldID, Original Title> from the available fields.
+            this.emptyDropAreaId = '';
+            this.mappedFieldsId = '';
+            this.fieldsChange = new i0.EventEmitter();
+            this.isGrabbing = false;
+            this.dialogRef = null;
+            this.dataViewBuilderService.isGrabbingChange$.subscribe(function (value) {
+                _this.isGrabbing = value;
+            });
+        }
+        MenuDataViewComponent.prototype.addNewField = function (draggableItem, index) {
+            // Add new menuField to the mappedFields.
+            var menuField = { FieldID: draggableItem.data.key, Title: draggableItem.title };
+            this.spliceMappedFields(index, 0, menuField);
+        };
+        MenuDataViewComponent.prototype.spliceMappedFields = function (start, deleteCount, item) {
+            if (item) {
+                this.fields.splice(start, deleteCount, item);
+            }
+            else {
+                this.fields.splice(start, deleteCount);
+            }
+            this.notifyFieldsChange();
+        };
+        MenuDataViewComponent.prototype.changeTitle = function (menuField, title) {
+            menuField.Title = title;
+            this.notifyFieldsChange();
+        };
+        MenuDataViewComponent.prototype.notifyFieldsChange = function () {
+            this.fieldsChange.emit(this.fields);
+        };
+        MenuDataViewComponent.prototype.ngOnInit = function () {
+            //
+        };
+        MenuDataViewComponent.prototype.addSeparator = function (index) {
+            var menuField = { FieldID: '', Title: '' };
+            this.spliceMappedFields(index, 0, menuField);
+        };
+        MenuDataViewComponent.prototype.onDragStart = function (event) {
+            this.dataViewBuilderService.onDragStart(event);
+        };
+        MenuDataViewComponent.prototype.onDragEnd = function (event) {
+            this.dataViewBuilderService.onDragEnd(event);
+        };
+        MenuDataViewComponent.prototype.onDropField = function (event) {
+            if (event.previousContainer === event.container) {
+                i8.moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+                this.notifyFieldsChange();
+            }
+            else if (event.container.id === 'emptyDropArea') {
+                this.addNewField(event.previousContainer.data[event.previousIndex], this.fields.length);
+            }
+            else {
+                this.addNewField(event.previousContainer.data[event.previousIndex], event.currentIndex);
+            }
+        };
+        MenuDataViewComponent.prototype.onTitleChanged = function (event, menuField) {
+            this.changeTitle(menuField, event);
+        };
+        MenuDataViewComponent.prototype.onDeleteMappedField = function (event, menuField) {
+            var index = this.fields.findIndex(function (ms) { return ms === menuField; });
+            if (index > -1) {
+                this.spliceMappedFields(index, 1);
+            }
+        };
+        MenuDataViewComponent.prototype.onEditSeparatorField = function (event, menuField) {
+            var _this = this;
+            this.dialogRef = this.dialogService.openDialog(this.separatorTitleModalTemplate, { value: menuField.Title });
+            this.dialogRef.afterClosed().subscribe(function (titleValue) {
+                if (titleValue !== undefined) {
+                    _this.changeTitle(menuField, titleValue);
+                }
+            });
+        };
+        MenuDataViewComponent.prototype.setDialogValue = function (value) {
+            this.closeDialog(value);
+        };
+        MenuDataViewComponent.prototype.closeDialog = function (value) {
+            if (value === void 0) { value = undefined; }
+            var _a;
+            (_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.close(value);
+        };
+        return MenuDataViewComponent;
+    }());
+    MenuDataViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: MenuDataViewComponent, deps: [{ token: i1__namespace.PepDialogService }, { token: DataViewBuilderService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MenuDataViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: MenuDataViewComponent, selector: "menu-data-view", inputs: { fields: "fields", availableFieldsTitles: "availableFieldsTitles", emptyDropAreaId: "emptyDropAreaId", mappedFieldsId: "mappedFieldsId" }, outputs: { fieldsChange: "fieldsChange" }, viewQueries: [{ propertyName: "separatorTitleModalTemplate", first: true, predicate: ["separatorTitleModalTemplate"], descendants: true, read: i0.TemplateRef }], ngImport: i0__namespace, template: "<ng-container *ngIf=\"fields === null || fields.length === 0; then emptyTemplate; else notEmptyTemplate\"></ng-container>\n<ng-template #emptyTemplate>\n    <div [id]=\"emptyDropAreaId\" class=\"drop-field-here-area\" cdkDropList (cdkDropListDropped)=\"onDropField($event)\">\n        <mat-icon class=\"pep-spacing-element\">\n            <pep-icon name=\"arrow_down_alt\"></pep-icon>\n        </mat-icon>\n        <span class=\"body-sm ellipsis\">\n            {{ 'DATA_VIEW_BUILDER.EMPTY_DROP_AREA_TEXT' | translate }}\n        </span> \n    </div>\n</ng-template>\n<ng-template #notEmptyTemplate>\n    <div [id]=\"mappedFieldsId\" class=\"mapped-fields-area\" [ngClass]=\"{ 'no-row-gap': !isGrabbing }\"\n        cdkDropList [cdkDropListData]=\"fields\" (cdkDropListDropped)=\"onDropField($event)\">\n        <ng-container *ngFor=\"let menuField of fields; let i = index\" >\n            <div class=\"mapped-field-container\" [ngClass]=\"{ 'separator-container': menuField.FieldID === '' }\" \n                cdkDrag (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\">\n                <ng-container *ngTemplateOutlet=\"mappedFieldTemplate; context: { menuField: menuField }\"></ng-container>\n            </div>\n            <div *ngIf=\"!isGrabbing\" class=\"add-separator-container\">\n                <pep-button class=\"add-separator\" styleType=\"regular\" sizeType=\"sm\" iconName=\"number_plus\" \n                    [value]=\"'DATA_VIEW_BUILDER.ADD_SEPARATOR' | translate\" (buttonClick)=\"addSeparator(i+1)\"></pep-button>\n            </div>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-template #mappedFieldTemplate let-menuField=\"menuField\">\n    <ng-container *ngIf=\"menuField.FieldID !== ''; then menuItemTemplate; else separatorTemplate\"></ng-container>\n\n    <ng-template #menuItemTemplate>\n        <div class=\"fields-wrapper\">\n            <pep-textbox [label]=\"'DATA_VIEW_BUILDER.MENU_ITEM_KEY_TITLE' | translate\" [value]=\"menuField.FieldID\" [disabled]=\"true\">\n            </pep-textbox>\n            \n            <pep-textbox [label]=\"'DATA_VIEW_BUILDER.MENU_ITEM_VALUE_TITLE' | translate\" [hint]=\"'(' + (availableFieldsTitles.get(menuField.FieldID) || '') + ')'\"\n                [value]=\"menuField.Title\" (valueChange)=\"onTitleChanged($event, menuField)\">\n            </pep-textbox>\n    \n            <pep-button class=\"center-button\" iconName=\"system_bin\" [title]=\"'ACTIONS.DELETE' | translate\" (buttonClick)=\"onDeleteMappedField($event, menuField)\"></pep-button>\n        </div>\n    </ng-template>\n    <ng-template #separatorTemplate>\n        <div class=\"separator-wrapper \">\n            <div class=\"pep-spacing-element title title-md color-dimmed\">\n                <span [title]=\"menuField.Title\">{{ menuField.Title }}</span>\n            </div>\n            <div class=\"list-actions\">\n                <pep-button iconName=\"system_edit\" [title]=\"'ACTIONS.EDIT' | translate\" sizeType=\"xs\" styleType=\"regular\" (buttonClick)=\"onEditSeparatorField($event, menuField)\"></pep-button>\n                <pep-button iconName=\"system_bin\" [title]=\"'ACTIONS.DELETE' | translate\" sizeType=\"xs\" styleType=\"regular\" (buttonClick)=\"onDeleteMappedField($event, menuField)\"></pep-button>\n            </div>\n        </div>\n    </ng-template>\n</ng-template>\n\n<ng-template #separatorTitleModalTemplate let-data>\n    <pep-dialog [title]=\"'DATA_VIEW_BUILDER.SEPARATOR_TITLE' | translate\">\n        <ng-container pep-dialog-content>\n            <pep-textbox #txt [label]=\"'DATA_VIEW_BUILDER.ADD_A_TITLE' | translate\" [(value)]=\"data.value\">\n            </pep-textbox>\n        </ng-container>\n        <ng-container pep-dialog-actions>\n            <div class=\"pep-spacing-element-negative\">\n                <button mat-button class=\"pep-spacing-element pep-button md weak\"\n                    (click)=\"closeDialog()\">\n                    {{'Cancel' | translate}}\n                </button>\n                <button mat-button class=\"pep-spacing-element pep-button md strong\"\n                    (click)=\"setDialogValue(txt.value)\">\n                    {{ 'Save' | translate}}\n                </button>\n            </div>\n        </ng-container>\n    </pep-dialog>\n</ng-template>", styles: ["html body.inheritCursors *{cursor:inherit!important}.cdk-drag-preview.mapped-field-container{max-width:600px;display:flex;justify-content:center;align-items:center;border-radius:var(--pep-border-radius-md, .25rem)}.cdk-drag-preview.mapped-field-container:not(.separator-container){padding-inline:var(--pep-spacing-lg, 1rem)}.cdk-drag-preview.mapped-field-container:not(.separator-container){grid-gap:calc(var(--pep-spacing-lg, 1rem) * 2);gap:calc(var(--pep-spacing-lg, 1rem) * 2);background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.cdk-drag-preview.mapped-field-container .fields-wrapper{display:grid;width:100%;grid-template-columns:1fr 1fr auto;grid-gap:.5rem;gap:.5rem;padding-top:.5rem}.cdk-drag-preview.mapped-field-container .fields-wrapper .center-button{margin-top:var(--pep-form-field-title-height, 1.5rem)}.cdk-drag-preview.mapped-field-container .separator-wrapper{display:grid;width:100%;grid-template-columns:1fr auto;padding-bottom:var(--pep-spacing-xs, .25rem);border-bottom:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.cdk-drag-preview.mapped-field-container .separator-wrapper .list-actions{display:flex;grid-gap:var(--pep-spacing-xs, .25rem);gap:var(--pep-spacing-xs, .25rem)}.drop-field-here-area{min-height:5rem;max-width:600px;display:flex;justify-content:center;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12);position:relative}.drop-field-here-area:not(.separator-container){padding-inline:var(--pep-spacing-lg, 1rem)}.drop-field-here-area:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),calc(var(--pep-color-system-primary-l, 10%) + 30%))}.drop-field-here-area.cdk-drop-list-dragging{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.drop-field-here-area.cdk-drop-list-dragging:hover{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 20%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.drop-field-here-area.cdk-drop-list-dragging ::ng-deep .placeholder-item{display:none}.mapped-fields-area{display:flex;flex-direction:column;grid-column-gap:var(--pep-spacing-lg, 1rem);column-gap:var(--pep-spacing-lg, 1rem)}.mapped-fields-area:not(.no-row-gap){grid-row-gap:var(--pep-spacing-lg, 1rem);row-gap:var(--pep-spacing-lg, 1rem)}.mapped-fields-area.cdk-drop-list-dragging ::ng-deep .placeholder-item{max-width:600px;display:flex;justify-content:center;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5);height:2.5rem}.mapped-fields-area.cdk-drop-list-dragging ::ng-deep .placeholder-item:not(.separator-container){padding-inline:var(--pep-spacing-lg, 1rem)}.mapped-fields-area .mapped-field-container{cursor:grab;max-width:600px;display:flex;justify-content:center;align-items:center;border-radius:var(--pep-border-radius-md, .25rem)}.mapped-fields-area .mapped-field-container:not(.separator-container){padding-inline:var(--pep-spacing-lg, 1rem)}.mapped-fields-area .mapped-field-container:not(.separator-container){grid-gap:calc(var(--pep-spacing-lg, 1rem) * 2);gap:calc(var(--pep-spacing-lg, 1rem) * 2);background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.mapped-fields-area .mapped-field-container .fields-wrapper{display:grid;width:100%;grid-template-columns:1fr 1fr auto;grid-gap:.5rem;gap:.5rem;padding-top:.5rem}.mapped-fields-area .mapped-field-container .fields-wrapper .center-button{margin-top:var(--pep-form-field-title-height, 1.5rem)}.mapped-fields-area .mapped-field-container .separator-wrapper{display:grid;width:100%;grid-template-columns:1fr auto;padding-bottom:var(--pep-spacing-xs, .25rem);border-bottom:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.mapped-fields-area .mapped-field-container .separator-wrapper .list-actions{display:flex;grid-gap:var(--pep-spacing-xs, .25rem);gap:var(--pep-spacing-xs, .25rem)}.mapped-fields-area .mapped-field-container.cdk-drag-placeholder{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.mapped-fields-area .mapped-field-container.cdk-drag-placeholder .fields-wrapper,.mapped-fields-area .mapped-field-container.cdk-drag-placeholder .separator-wrapper{opacity:0}.mapped-fields-area .add-separator-container{max-width:600px;display:flex;justify-content:center;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);height:var(--pep-spacing-lg, 1rem)}.mapped-fields-area .add-separator-container:not(.separator-container){padding-inline:var(--pep-spacing-lg, 1rem)}.mapped-fields-area .add-separator-container .add-separator{position:relative;display:none}.mapped-fields-area .add-separator-container:hover .add-separator{display:block}\n"], components: [{ type: i3__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1__namespace$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { type: i5__namespace.PepButtonComponent, selector: "pep-button", inputs: ["styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconPosition", "visible", "key", "value", "iconName"], outputs: ["buttonClick"] }, { type: i6__namespace.PepTextboxComponent, selector: "pep-textbox", inputs: ["accessory", "label", "placeholder", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "key", "value", "formattedValue", "type", "visible", "maxFieldCharacters", "hint"], outputs: ["valueChange", "formValidationChange"] }, { type: i1__namespace.PepDialogComponent, selector: "pep-dialog", inputs: ["showClose", "showHeader", "showFooter", "title"], outputs: ["close"] }], directives: [{ type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i7__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i7__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i9__namespace.TranslatePipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: MenuDataViewComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'menu-data-view',
+                        templateUrl: './menu-data-view.component.html',
+                        styleUrls: ['./menu-data-view.component.scss']
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace.PepDialogService }, { type: DataViewBuilderService }]; }, propDecorators: { separatorTitleModalTemplate: [{
+                    type: i0.ViewChild,
+                    args: ['separatorTitleModalTemplate', { read: i0.TemplateRef }]
+                }], fields: [{
+                    type: i0.Input
+                }], availableFieldsTitles: [{
+                    type: i0.Input
+                }], emptyDropAreaId: [{
+                    type: i0.Input
+                }], mappedFieldsId: [{
+                    type: i0.Input
+                }], fieldsChange: [{
+                    type: i0.Output
                 }] } });
 
-    var DataViewBuilderComponent = /** @class */ (function () {
-        function DataViewBuilderComponent(dataViewBuilderService) {
-            this.dataViewBuilderService = dataViewBuilderService;
-            // @Input() title: string = '';
-            this.builderTitle = '';
-            this.builderTitleHint = '';
-            this._availableFields = [];
-            this.dataViewChange = new i0.EventEmitter();
-            this.type = 'not-supported';
-            this.emptyDropAreaId = 'emptyDropArea';
-            this.mappedFieldsId = 'mappedFields';
-            this.availableFieldsTitles = new Map();
-            //
-        }
-        Object.defineProperty(DataViewBuilderComponent.prototype, "availableFields", {
-            get: function () {
-                return this._availableFields;
-            },
-            set: function (value) {
-                this._availableFields = value;
-                this.setTitlesMap();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DataViewBuilderComponent.prototype, "dataView", {
-            get: function () {
-                return this._dataView;
-            },
-            set: function (value) {
-                this._dataView = value;
-                this.setType();
-                this.refreshAvailableFields();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DataViewBuilderComponent.prototype.setType = function () {
-            if (this._dataView.Type === 'Menu') {
-                this.type = 'menu';
-            }
-            else if (this._dataView.Type === 'Grid') {
-                this.type = 'list';
-            }
-            else if ((this._dataView.Type === 'Card') ||
-                (this._dataView.Type === 'Form') ||
-                (this._dataView.Type === 'Large') ||
-                (this._dataView.Type === 'Line')) {
-                this.type = 'card';
-            }
-            else {
-                this.type = 'not-supported';
-            }
-        };
-        DataViewBuilderComponent.prototype.setAvailableFieldPermission = function (field, disable) {
-            // Find the item in the available fields
-            var item = this.availableFields.find(function (as) { return as.data.key === field; });
-            // If exist disable or enable it.
-            if (item) {
-                item.disabled = disable;
-            }
-        };
-        DataViewBuilderComponent.prototype.refreshAvailableFields = function () {
-            this.availableFields.forEach(function (af) { return af.disabled = false; });
-            if (this.dataView && this.dataView.Fields) {
-                for (var index = 0; index < this.dataView.Fields.length; index++) {
-                    this.setAvailableFieldPermission(this.dataView.Fields[index].FieldID, true);
-                }
-            }
-        };
-        DataViewBuilderComponent.prototype.setTitlesMap = function () {
-            var _a, _b;
-            this.availableFieldsTitles.clear();
-            if (((_a = this.availableFields) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                for (var index = 0; index < this.availableFields.length; index++) {
-                    var availableField = this.availableFields[index];
-                    if (((_b = availableField === null || availableField === void 0 ? void 0 : availableField.data) === null || _b === void 0 ? void 0 : _b.key.length) > 0) {
-                        this.availableFieldsTitles.set(availableField.data.key, availableField.title);
-                    }
-                }
-            }
-        };
-        DataViewBuilderComponent.prototype.notifyDataViewChange = function () {
-            this.dataViewChange.emit(this.dataView);
-            // console.log(this.dataView);
-        };
-        DataViewBuilderComponent.prototype.ngOnInit = function () {
-        };
-        DataViewBuilderComponent.prototype.onDragStart = function (event) {
-            this.dataViewBuilderService.onDragStart(event);
-        };
-        DataViewBuilderComponent.prototype.onDragEnd = function (event) {
-            this.dataViewBuilderService.onDragEnd(event);
-        };
-        DataViewBuilderComponent.prototype.onFieldsChanged = function (fields) {
-            this.dataView.Fields = fields;
-            this.refreshAvailableFields();
-            this.notifyDataViewChange();
-        };
-        return DataViewBuilderComponent;
-    }());
-    DataViewBuilderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: DataViewBuilderComponent, deps: [{ token: DataViewBuilderService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    DataViewBuilderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: DataViewBuilderComponent, selector: "pep-data-view-builder", inputs: { builderTitle: "builderTitle", builderTitleHint: "builderTitleHint", availableFields: "availableFields", dataView: "dataView" }, outputs: { dataViewChange: "dataViewChange" }, ngImport: i0__namespace, template: "<pep-page-layout >\n    <!-- <ng-container pep-top-area>\n        <pep-top-bar [title]=\"title\">\n            <div header-end-content>\n            </div>\n        </pep-top-bar>\n    </ng-container> -->\n    <ng-container pep-main-area>\n        <ng-container *ngIf=\"type === 'not-supported' ; then notSupportedTemplate; else supportedTemplate\"></ng-container>\n        <ng-template #notSupportedTemplate>\n            <span class=\"body-sm ellipsis\">\n                {{ 'DATA_VIEW_BUILDER.TYPE_NOT_SUPPORTED' | translate }}\n            </span> \n        </ng-template>\n        <ng-template #supportedTemplate>\n            <div *ngIf=\"dataView && availableFields\" class=\"mapped-fields-container\">\n                <div class=\"available-fields-side-area\">\n                    <pep-draggable-items [items]=\"availableFields\" [title]=\"'DATA_VIEW_BUILDER.AVAILABLE_FIELDS' | translate\" titleType=\"with-bottom-border\" titleSizeType=\"md\"\n                        itemPlaceholderType=\"weak\" [showSearch]=\"true\" [dropAreaIds]=\"['emptyDropArea', 'mappedFields']\" (itemDragStarted)=\"onDragStart($event)\" (itemDragEnded)=\"onDragEnd($event)\">\n                    </pep-draggable-items>\n                </div>\n                <div pep-main-area class=\"mapped-fields-main-area\">\n                    <div class=\"mapped-fields-top-area pep-border-bottom\"\n                        [title]=\"builderTitle + ' ' + (builderTitleHint ? ('(' + builderTitleHint + ')') : '')\">\n                        <span class=\"title-md\">{{ builderTitle }}&nbsp;</span>\n                        <span *ngIf=\"builderTitleHint\" class=\"color-dimmed\">({{ builderTitleHint }})</span>\n                    </div>\n                    \n                    <div class=\"data-view-by-type-area\" [ngSwitch]=\"type\">\n                        <ng-container *ngSwitchCase=\"'menu'\">\n                            <menu-data-view [fields]=\"dataView?.Fields || []\" [availableFieldsTitles]=\"availableFieldsTitles\" [emptyDropAreaId]=\"emptyDropAreaId\"\n                                [mappedFieldsId]=\"mappedFieldsId\" (fieldsChange)=\"onFieldsChanged($event)\">\n                            </menu-data-view>\n                        </ng-container>\n                        <!-- <ng-container *ngSwitchDefault>\n                        </ng-container> -->\n                    </div>\n                </div>\n            </div>\n        </ng-template>\n    </ng-container>\n</pep-page-layout>\n\n", styles: [".mapped-fields-container{display:grid;height:100%;grid-template-columns:auto 1fr;grid-template-areas:\"side-area    main-area\"}.mapped-fields-container .available-fields-side-area{grid-area:side-area;width:240px;max-width:240px;overflow:auto;height:inherit;padding-top:var(--pep-spacing-2xl, 2rem);margin-inline-end:calc(var(--pep-spacing-lg, 1rem) * 2)}.mapped-fields-container .mapped-fields-main-area{display:grid;grid-template-rows:auto 1fr;grid-area:main-area;padding-top:var(--pep-spacing-2xl, 2rem);overflow:auto;height:inherit}.mapped-fields-container .mapped-fields-main-area .mapped-fields-top-area{height:var(--pep-top-bar-field-height, 2.5rem);display:flex;align-items:center}.mapped-fields-container .mapped-fields-main-area .data-view-by-type-area{overflow:auto;height:inherit;padding-top:var(--pep-spacing-lg, 1rem);padding-bottom:var(--pep-spacing-lg, 1rem);padding-inline:var(--pep-spacing-xs, .25rem)}\n"], components: [{ type: i2__namespace.PepPageLayoutComponent, selector: "pep-page-layout", inputs: ["addPadding", "showShadow"] }, { type: i3__namespace$1.DraggableItemsComponent, selector: "pep-draggable-items", inputs: ["containerId", "showSearch", "title", "titleType", "titleSizeType", "itemPlaceholderType", "dropAreaIds", "items"], outputs: ["itemDragStarted", "itemDragEnded"] }, { type: MenuDataViewComponent, selector: "menu-data-view", inputs: ["fields", "availableFieldsTitles", "emptyDropAreaId", "mappedFieldsId"], outputs: ["fieldsChange"] }], directives: [{ type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "translate": i9__namespace.TranslatePipe } });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: DataViewBuilderComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'pep-data-view-builder',
-                        templateUrl: './data-view-builder.component.html',
-                        styleUrls: ['./data-view-builder.component.scss']
-                    }]
-            }], ctorParameters: function () { return [{ type: DataViewBuilderService }]; }, propDecorators: { builderTitle: [{
-                    type: i0.Input
-                }], builderTitleHint: [{
-                    type: i0.Input
-                }], availableFields: [{
-                    type: i0.Input
-                }], dataView: [{
-                    type: i0.Input
-                }], dataViewChange: [{
-                    type: i0.Output
+    var DataViewBuilderComponent = /** @class */ (function () {
+        function DataViewBuilderComponent(dataViewBuilderService) {
+            this.dataViewBuilderService = dataViewBuilderService;
+            // @Input() title: string = '';
+            this.builderTitle = '';
+            this.builderTitleHint = '';
+            this._availableFields = [];
+            this.dataViewChange = new i0.EventEmitter();
+            this.type = 'not-supported';
+            this.emptyDropAreaId = 'emptyDropArea';
+            this.mappedFieldsId = 'mappedFields';
+            this.availableFieldsTitles = new Map();
+            //
+        }
+        Object.defineProperty(DataViewBuilderComponent.prototype, "availableFields", {
+            get: function () {
+                return this._availableFields;
+            },
+            set: function (value) {
+                this._availableFields = value;
+                this.setTitlesMap();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DataViewBuilderComponent.prototype, "dataView", {
+            get: function () {
+                return this._dataView;
+            },
+            set: function (value) {
+                this._dataView = value;
+                this.setType();
+                this.refreshAvailableFields();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DataViewBuilderComponent.prototype.setType = function () {
+            if (this._dataView.Type === 'Menu') {
+                this.type = 'menu';
+            }
+            else if (this._dataView.Type === 'Grid') {
+                this.type = 'list';
+            }
+            else if ((this._dataView.Type === 'Card') ||
+                (this._dataView.Type === 'Form') ||
+                (this._dataView.Type === 'Large') ||
+                (this._dataView.Type === 'Line')) {
+                this.type = 'card';
+            }
+            else {
+                this.type = 'not-supported';
+            }
+        };
+        DataViewBuilderComponent.prototype.setAvailableFieldPermission = function (field, disable) {
+            // Find the item in the available fields
+            var item = this.availableFields.find(function (as) { return as.data.key === field; });
+            // If exist disable or enable it.
+            if (item) {
+                item.disabled = disable;
+            }
+        };
+        DataViewBuilderComponent.prototype.refreshAvailableFields = function () {
+            this.availableFields.forEach(function (af) { return af.disabled = false; });
+            if (this.dataView && this.dataView.Fields) {
+                for (var index = 0; index < this.dataView.Fields.length; index++) {
+                    this.setAvailableFieldPermission(this.dataView.Fields[index].FieldID, true);
+                }
+            }
+        };
+        DataViewBuilderComponent.prototype.setTitlesMap = function () {
+            var _a, _b;
+            this.availableFieldsTitles.clear();
+            if (((_a = this.availableFields) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                for (var index = 0; index < this.availableFields.length; index++) {
+                    var availableField = this.availableFields[index];
+                    if (((_b = availableField === null || availableField === void 0 ? void 0 : availableField.data) === null || _b === void 0 ? void 0 : _b.key.length) > 0) {
+                        this.availableFieldsTitles.set(availableField.data.key, availableField.title);
+                    }
+                }
+            }
+        };
+        DataViewBuilderComponent.prototype.notifyDataViewChange = function () {
+            this.dataViewChange.emit(this.dataView);
+            // console.log(this.dataView);
+        };
+        DataViewBuilderComponent.prototype.ngOnInit = function () {
+            //
+        };
+        DataViewBuilderComponent.prototype.onDragStart = function (event) {
+            this.dataViewBuilderService.onDragStart(event);
+        };
+        DataViewBuilderComponent.prototype.onDragEnd = function (event) {
+            this.dataViewBuilderService.onDragEnd(event);
+        };
+        DataViewBuilderComponent.prototype.onFieldsChanged = function (fields) {
+            this.dataView.Fields = fields;
+            this.refreshAvailableFields();
+            this.notifyDataViewChange();
+        };
+        return DataViewBuilderComponent;
+    }());
+    DataViewBuilderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: DataViewBuilderComponent, deps: [{ token: DataViewBuilderService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    DataViewBuilderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: DataViewBuilderComponent, selector: "pep-data-view-builder", inputs: { builderTitle: "builderTitle", builderTitleHint: "builderTitleHint", availableFields: "availableFields", dataView: "dataView" }, outputs: { dataViewChange: "dataViewChange" }, ngImport: i0__namespace, template: "<pep-page-layout >\n    <!-- <ng-container pep-top-area>\n        <pep-top-bar [title]=\"title\">\n            <div header-end-content>\n            </div>\n        </pep-top-bar>\n    </ng-container> -->\n    <ng-container pep-main-area>\n        <ng-container *ngIf=\"type === 'not-supported' ; then notSupportedTemplate; else supportedTemplate\"></ng-container>\n        <ng-template #notSupportedTemplate>\n            <span class=\"body-sm ellipsis\">\n                {{ 'DATA_VIEW_BUILDER.TYPE_NOT_SUPPORTED' | translate }}\n            </span> \n        </ng-template>\n        <ng-template #supportedTemplate>\n            <div *ngIf=\"dataView && availableFields\" class=\"mapped-fields-container\">\n                <div class=\"available-fields-side-area\">\n                    <pep-draggable-items [items]=\"availableFields\" [title]=\"'DATA_VIEW_BUILDER.AVAILABLE_FIELDS' | translate\" titleType=\"with-bottom-border\" titleSizeType=\"md\"\n                        itemPlaceholderType=\"weak\" [showSearch]=\"true\" [dropAreaIds]=\"['emptyDropArea', 'mappedFields']\" (itemDragStarted)=\"onDragStart($event)\" (itemDragEnded)=\"onDragEnd($event)\">\n                    </pep-draggable-items>\n                </div>\n                <div pep-main-area class=\"mapped-fields-main-area\">\n                    <div class=\"mapped-fields-top-area pep-border-bottom\"\n                        [title]=\"builderTitle + ' ' + (builderTitleHint ? ('(' + builderTitleHint + ')') : '')\">\n                        <span class=\"title-md\">{{ builderTitle }}&nbsp;</span>\n                        <span *ngIf=\"builderTitleHint\" class=\"color-dimmed\">({{ builderTitleHint }})</span>\n                    </div>\n                    \n                    <div class=\"data-view-by-type-area\" [ngSwitch]=\"type\">\n                        <ng-container *ngSwitchCase=\"'menu'\">\n                            <menu-data-view [fields]=\"dataView?.Fields || []\" [availableFieldsTitles]=\"availableFieldsTitles\" [emptyDropAreaId]=\"emptyDropAreaId\"\n                                [mappedFieldsId]=\"mappedFieldsId\" (fieldsChange)=\"onFieldsChanged($event)\">\n                            </menu-data-view>\n                        </ng-container>\n                        <!-- <ng-container *ngSwitchDefault>\n                        </ng-container> -->\n                    </div>\n                </div>\n            </div>\n        </ng-template>\n    </ng-container>\n</pep-page-layout>\n\n", styles: [".mapped-fields-container{display:grid;height:100%;grid-template-columns:auto 1fr;grid-template-areas:\"side-area    main-area\"}.mapped-fields-container .available-fields-side-area{grid-area:side-area;width:240px;max-width:240px;overflow:auto;height:inherit;padding-top:var(--pep-spacing-2xl, 2rem);margin-inline-end:calc(var(--pep-spacing-lg, 1rem) * 2)}.mapped-fields-container .mapped-fields-main-area{display:grid;grid-template-rows:auto 1fr;grid-area:main-area;padding-top:var(--pep-spacing-2xl, 2rem);overflow:auto;height:inherit}.mapped-fields-container .mapped-fields-main-area .mapped-fields-top-area{height:var(--pep-top-bar-field-height, 2.5rem);display:flex;align-items:center}.mapped-fields-container .mapped-fields-main-area .data-view-by-type-area{overflow:auto;height:inherit;padding-top:var(--pep-spacing-lg, 1rem);padding-bottom:var(--pep-spacing-lg, 1rem);padding-inline:var(--pep-spacing-xs, .25rem)}\n"], components: [{ type: i2__namespace.PepPageLayoutComponent, selector: "pep-page-layout", inputs: ["addPadding", "showShadow"] }, { type: i3__namespace$1.DraggableItemsComponent, selector: "pep-draggable-items", inputs: ["containerId", "showSearch", "title", "titleType", "titleSizeType", "itemPlaceholderType", "dropAreaIds", "items"], outputs: ["itemDragStarted", "itemDragEnded"] }, { type: MenuDataViewComponent, selector: "menu-data-view", inputs: ["fields", "availableFieldsTitles", "emptyDropAreaId", "mappedFieldsId"], outputs: ["fieldsChange"] }], directives: [{ type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "translate": i9__namespace.TranslatePipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: DataViewBuilderComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'pep-data-view-builder',
+                        templateUrl: './data-view-builder.component.html',
+                        styleUrls: ['./data-view-builder.component.scss']
+                    }]
+            }], ctorParameters: function () { return [{ type: DataViewBuilderService }]; }, propDecorators: { builderTitle: [{
+                    type: i0.Input
+                }], builderTitleHint: [{
+                    type: i0.Input
+                }], availableFields: [{
+                    type: i0.Input
+                }], dataView: [{
+                    type: i0.Input
+                }], dataViewChange: [{
+                    type: i0.Output
                 }] } });
 
-    var pepIcons = [
-        i1$1.pepIconSystemClose,
-        i1$1.pepIconArrowDownAlt,
-        i1$1.pepIconSystemBin,
-        i1$1.pepIconNumberPlus
-    ];
-    var PepDataViewBuilderModule = /** @class */ (function () {
-        function PepDataViewBuilderModule(pepIconRegistry) {
-            this.pepIconRegistry = pepIconRegistry;
-            this.pepIconRegistry.registerIcons(pepIcons);
-        }
-        return PepDataViewBuilderModule;
-    }());
-    PepDataViewBuilderModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepDataViewBuilderModule, deps: [{ token: i1__namespace$1.PepIconRegistry }], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    PepDataViewBuilderModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepDataViewBuilderModule, declarations: [DataViewBuilderComponent, MenuDataViewComponent], imports: [i7.CommonModule,
-            i8.DragDropModule,
-            i3.MatIconModule,
-            ngxLib.PepNgxLibModule,
-            i5.PepButtonModule,
-            i1.PepDialogModule,
-            i1$1.PepIconModule,
-            menu.PepMenuModule,
-            i2.PepPageLayoutModule,
-            i6.PepTextboxModule,
-            topBar.PepTopBarModule,
-            i3$1.PepDraggableItemsModule], exports: [DataViewBuilderComponent] });
-    PepDataViewBuilderModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepDataViewBuilderModule, providers: [DataViewBuilderService], imports: [[
-                i7.CommonModule,
-                i8.DragDropModule,
-                i3.MatIconModule,
-                ngxLib.PepNgxLibModule,
-                i5.PepButtonModule,
-                i1.PepDialogModule,
-                i1$1.PepIconModule,
-                menu.PepMenuModule,
-                i2.PepPageLayoutModule,
-                i6.PepTextboxModule,
-                topBar.PepTopBarModule,
-                i3$1.PepDraggableItemsModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepDataViewBuilderModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        declarations: [
-                            DataViewBuilderComponent, MenuDataViewComponent
-                        ],
-                        imports: [
-                            i7.CommonModule,
-                            i8.DragDropModule,
-                            i3.MatIconModule,
-                            ngxLib.PepNgxLibModule,
-                            i5.PepButtonModule,
-                            i1.PepDialogModule,
-                            i1$1.PepIconModule,
-                            menu.PepMenuModule,
-                            i2.PepPageLayoutModule,
-                            i6.PepTextboxModule,
-                            topBar.PepTopBarModule,
-                            i3$1.PepDraggableItemsModule,
-                        ],
-                        exports: [DataViewBuilderComponent],
-                        providers: [DataViewBuilderService]
-                    }]
+    var pepIcons = [
+        i1$1.pepIconSystemClose,
+        i1$1.pepIconArrowDownAlt,
+        i1$1.pepIconSystemBin,
+        i1$1.pepIconNumberPlus
+    ];
+    var PepDataViewBuilderModule = /** @class */ (function () {
+        function PepDataViewBuilderModule(pepIconRegistry) {
+            this.pepIconRegistry = pepIconRegistry;
+            this.pepIconRegistry.registerIcons(pepIcons);
+        }
+        return PepDataViewBuilderModule;
+    }());
+    PepDataViewBuilderModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepDataViewBuilderModule, deps: [{ token: i1__namespace$1.PepIconRegistry }], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    PepDataViewBuilderModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepDataViewBuilderModule, declarations: [DataViewBuilderComponent, MenuDataViewComponent], imports: [i7.CommonModule,
+            i8.DragDropModule,
+            i3.MatIconModule,
+            ngxLib.PepNgxLibModule,
+            i5.PepButtonModule,
+            i1.PepDialogModule,
+            i1$1.PepIconModule,
+            menu.PepMenuModule,
+            i2.PepPageLayoutModule,
+            i6.PepTextboxModule,
+            topBar.PepTopBarModule,
+            i3$1.PepDraggableItemsModule], exports: [DataViewBuilderComponent] });
+    PepDataViewBuilderModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepDataViewBuilderModule, providers: [DataViewBuilderService], imports: [[
+                i7.CommonModule,
+                i8.DragDropModule,
+                i3.MatIconModule,
+                ngxLib.PepNgxLibModule,
+                i5.PepButtonModule,
+                i1.PepDialogModule,
+                i1$1.PepIconModule,
+                menu.PepMenuModule,
+                i2.PepPageLayoutModule,
+                i6.PepTextboxModule,
+                topBar.PepTopBarModule,
+                i3$1.PepDraggableItemsModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepDataViewBuilderModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [
+                            DataViewBuilderComponent, MenuDataViewComponent
+                        ],
+                        imports: [
+                            i7.CommonModule,
+                            i8.DragDropModule,
+                            i3.MatIconModule,
+                            ngxLib.PepNgxLibModule,
+                            i5.PepButtonModule,
+                            i1.PepDialogModule,
+                            i1$1.PepIconModule,
+                            menu.PepMenuModule,
+                            i2.PepPageLayoutModule,
+                            i6.PepTextboxModule,
+                            topBar.PepTopBarModule,
+                            i3$1.PepDraggableItemsModule,
+                        ],
+                        exports: [DataViewBuilderComponent],
+                        providers: [DataViewBuilderService]
+                    }]
             }], ctorParameters: function () { return [{ type: i1__namespace$1.PepIconRegistry }]; } });
 
-    /*
-     * Public API Surface of ngx-composite-lib/data-view-builder
+    /*
+     * Public API Surface of ngx-composite-lib/data-view-builder
      */
 
-    /**
-     * Generated bundle index. Do not edit.
+    /**
+     * Generated bundle index. Do not edit.
      */
 
     exports.DataViewBuilderComponent = DataViewBuilderComponent;