@pepperi-addons/ngx-composite-lib 0.0.16-beta.26 → 0.0.16-beta.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/bundles/pepperi-addons-ngx-composite-lib-data-view-builder.umd.js +43 -19
  2. package/bundles/pepperi-addons-ngx-composite-lib-data-view-builder.umd.js.map +1 -1
  3. package/data-view-builder/data-view-builder.component.d.ts +6 -3
  4. package/data-view-builder/menu-data-view/menu-data-view.component.d.ts +2 -1
  5. package/esm2015/data-view-builder/data-view-builder.component.js +31 -14
  6. package/esm2015/data-view-builder/menu-data-view/menu-data-view.component.js +7 -4
  7. package/fesm2015/pepperi-addons-ngx-composite-lib-data-view-builder.js +33 -13
  8. package/fesm2015/pepperi-addons-ngx-composite-lib-data-view-builder.js.map +1 -1
  9. package/package.json +2 -2
  10. package/src/assets/i18n/en.ngx-composite-lib.json +1 -1
package/bundles/pepperi-addons-ngx-composite-lib-data-view-builder.umd.js CHANGED
@@ -2,7 +2,7 @@
2
2
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/cdk/drag-drop'), require('@angular/material/icon'), require('@pepperi-addons/ngx-lib'), require('@pepperi-addons/ngx-lib/button'), require('@pepperi-addons/ngx-lib/dialog'), require('@pepperi-addons/ngx-lib/menu'), require('@pepperi-addons/ngx-lib/page-layout'), require('@pepperi-addons/ngx-lib/textbox'), require('@pepperi-addons/ngx-lib/top-bar'), require('@pepperi-addons/ngx-lib/draggable-items'), require('@pepperi-addons/ngx-lib/icon'), require('rxjs'), require('rxjs/operators'), require('@ngx-translate/core')) :
3
3
  typeof define === 'function' && define.amd ? define('@pepperi-addons/ngx-composite-lib/data-view-builder', ['exports', '@angular/core', '@angular/common', '@angular/cdk/drag-drop', '@angular/material/icon', '@pepperi-addons/ngx-lib', '@pepperi-addons/ngx-lib/button', '@pepperi-addons/ngx-lib/dialog', '@pepperi-addons/ngx-lib/menu', '@pepperi-addons/ngx-lib/page-layout', '@pepperi-addons/ngx-lib/textbox', '@pepperi-addons/ngx-lib/top-bar', '@pepperi-addons/ngx-lib/draggable-items', '@pepperi-addons/ngx-lib/icon', 'rxjs', 'rxjs/operators', '@ngx-translate/core'], factory) :
4
4
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["pepperi-addons"] = global["pepperi-addons"] || {}, global["pepperi-addons"]["ngx-composite-lib"] = global["pepperi-addons"]["ngx-composite-lib"] || {}, global["pepperi-addons"]["ngx-composite-lib"]["data-view-builder"] = {}), global.ng.core, global.ng.common, global.ng.cdk.dragDrop, global.ng.material.icon, global["ngx-lib"], global["ngx-lib/button"], global["ngx-lib/dialog"], global["ngx-lib/menu"], global["ngx-lib/page-layout"], global["ngx-lib/textbox"], global["ngx-lib/top-bar"], global["ngx-lib/draggable-items"], global["ngx-lib/icon"], global.rxjs, global.rxjs.operators, global.translate));
5
- })(this, (function (exports, i0, i7, i8, i3, ngxLib, i5, i1, menu, i2, i6, i3$1, i4, i1$1, rxjs, operators, i9) { 'use strict';
5
+ })(this, (function (exports, i0, i7, i8, i3, ngxLib, i5, i1, menu, i2, i6, topBar, i3$1, i1$1, rxjs, operators, i9) { 'use strict';
6
6
 
7
7
  function _interopNamespace(e) {
8
8
  if (e && e.__esModule) return e;
@@ -31,7 +31,6 @@
31
31
  var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
32
32
  var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
33
33
  var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
34
- var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
35
34
  var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
36
35
  var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
37
36
 
@@ -79,7 +78,8 @@
79
78
  var _this = this;
80
79
  this.dialogService = dialogService;
81
80
  this.dataViewBuilderService = dataViewBuilderService;
82
- this.fields = [];
81
+ this.fields = []; // The data view fields.
82
+ this.availableFieldsTitles = new Map(); // <FieldID, Original Title> from the available fields.
83
83
  this.emptyDropAreaId = '';
84
84
  this.mappedFieldsId = '';
85
85
  this.fieldsChange = new i0.EventEmitter();
@@ -91,7 +91,7 @@
91
91
  }
92
92
  MenuDataViewComponent.prototype.addNewField = function (draggableItem, index) {
93
93
  // Add new menuField to the mappedFields.
94
- var menuField = { FieldID: draggableItem.data, Title: draggableItem.title };
94
+ var menuField = { FieldID: draggableItem.data.key, Title: draggableItem.title };
95
95
  this.spliceMappedFields(index, 0, menuField);
96
96
  };
97
97
  MenuDataViewComponent.prototype.spliceMappedFields = function (start, deleteCount, item) {
@@ -163,7 +163,7 @@
163
163
  return MenuDataViewComponent;
164
164
  }());
165
165
  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 });
166
- MenuDataViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: MenuDataViewComponent, selector: "menu-data-view", inputs: { fields: "fields", 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\"\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"], 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 } });
166
+ 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 } });
167
167
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: MenuDataViewComponent, decorators: [{
168
168
  type: i0.Component,
169
169
  args: [{
@@ -176,6 +176,8 @@
176
176
  args: ['separatorTitleModalTemplate', { read: i0.TemplateRef }]
177
177
  }], fields: [{
178
178
  type: i0.Input
179
+ }], availableFieldsTitles: [{
180
+ type: i0.Input
179
181
  }], emptyDropAreaId: [{
180
182
  type: i0.Input
181
183
  }], mappedFieldsId: [{
@@ -187,16 +189,28 @@
187
189
  var DataViewBuilderComponent = /** @class */ (function () {
188
190
  function DataViewBuilderComponent(dataViewBuilderService) {
189
191
  this.dataViewBuilderService = dataViewBuilderService;
190
- this.title = '';
192
+ // @Input() title: string = '';
191
193
  this.builderTitle = '';
192
194
  this.builderTitleHint = '';
193
- this.availableFields = [];
195
+ this._availableFields = [];
194
196
  this.dataViewChange = new i0.EventEmitter();
195
197
  this.type = 'not-supported';
196
198
  this.emptyDropAreaId = 'emptyDropArea';
197
199
  this.mappedFieldsId = 'mappedFields';
200
+ this.availableFieldsTitles = new Map();
198
201
  //
199
202
  }
203
+ Object.defineProperty(DataViewBuilderComponent.prototype, "availableFields", {
204
+ get: function () {
205
+ return this._availableFields;
206
+ },
207
+ set: function (value) {
208
+ this._availableFields = value;
209
+ this.setTitlesMap();
210
+ },
211
+ enumerable: false,
212
+ configurable: true
213
+ });
200
214
  Object.defineProperty(DataViewBuilderComponent.prototype, "dataView", {
201
215
  get: function () {
202
216
  return this._dataView;
@@ -228,7 +242,7 @@
228
242
  };
229
243
  DataViewBuilderComponent.prototype.setAvailableFieldPermission = function (field, disable) {
230
244
  // Find the item in the available fields
231
- var item = this.availableFields.find(function (as) { return as.data === field; });
245
+ var item = this.availableFields.find(function (as) { return as.data.key === field; });
232
246
  // If exist disable or enable it.
233
247
  if (item) {
234
248
  item.disabled = disable;
@@ -242,9 +256,21 @@
242
256
  }
243
257
  }
244
258
  };
259
+ DataViewBuilderComponent.prototype.setTitlesMap = function () {
260
+ var _a, _b;
261
+ this.availableFieldsTitles.clear();
262
+ if (((_a = this.availableFields) === null || _a === void 0 ? void 0 : _a.length) > 0) {
263
+ for (var index = 0; index < this.availableFields.length; index++) {
264
+ var availableField = this.availableFields[index];
265
+ if (((_b = availableField === null || availableField === void 0 ? void 0 : availableField.data) === null || _b === void 0 ? void 0 : _b.key.length) > 0) {
266
+ this.availableFieldsTitles.set(availableField.data.key, availableField.title);
267
+ }
268
+ }
269
+ }
270
+ };
245
271
  DataViewBuilderComponent.prototype.notifyDataViewChange = function () {
246
272
  this.dataViewChange.emit(this.dataView);
247
- console.log(this.dataView);
273
+ // console.log(this.dataView);
248
274
  };
249
275
  DataViewBuilderComponent.prototype.ngOnInit = function () {
250
276
  };
@@ -262,7 +288,7 @@
262
288
  return DataViewBuilderComponent;
263
289
  }());
264
290
  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 });
265
- DataViewBuilderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: DataViewBuilderComponent, selector: "pep-data-view-builder", inputs: { title: "title", 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 <!-- <pep-button class=\"pep-spacing-element\" [value]=\"'Cancel' | translate\" (buttonClick)=\"backClicked()\"></pep-button> -->\n <!-- <pep-button class=\"pep-spacing-element\" [value]=\"'Save' | translate\" styleType=\"strong\" (buttonClick)=\"saveClicked()\"></pep-button> -->\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 <ng-container [ngSwitch]=\"type\">\n <ng-container *ngSwitchCase=\"'menu'\">\n <menu-data-view [fields]=\"dataView?.Fields || []\" [emptyDropAreaId]=\"emptyDropAreaId\" [mappedFieldsId]=\"mappedFieldsId\" (fieldsChange)=\"onFieldsChanged($event)\"></menu-data-view>\n </ng-container>\n <!-- <ng-container *ngSwitchDefault>\n </ng-container> -->\n </ng-container>\n </div>\n </div>\n </ng-template>\n </ng-container>\n</pep-page-layout>\n\n", styles: [".mapped-fields-container{display:grid;grid-template-columns:auto 1fr;grid-template-rows: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;padding-top:var(--pep-spacing-2xl, 2rem);margin-inline-end:calc(var(--pep-spacing-lg, 1rem) * 2)}.mapped-fields-container .mapped-fields-main-area{grid-area:main-area;padding-top:var(--pep-spacing-2xl, 2rem)}.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 .mapped-fields-top-area.pep-border-bottom{margin-bottom:var(--pep-spacing-lg, 1rem)}\n"], components: [{ type: i2__namespace.PepPageLayoutComponent, selector: "pep-page-layout", inputs: ["addPadding", "showShadow"] }, { type: i3__namespace$1.PepTopBarComponent, selector: "pep-top-bar", inputs: ["inline", "title"], outputs: ["footerStateChange"] }, { type: i4__namespace.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", "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 } });
291
+ 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 } });
266
292
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: DataViewBuilderComponent, decorators: [{
267
293
  type: i0.Component,
268
294
  args: [{
@@ -270,9 +296,7 @@
270
296
  templateUrl: './data-view-builder.component.html',
271
297
  styleUrls: ['./data-view-builder.component.scss']
272
298
  }]
273
- }], ctorParameters: function () { return [{ type: DataViewBuilderService }]; }, propDecorators: { title: [{
274
- type: i0.Input
275
- }], builderTitle: [{
299
+ }], ctorParameters: function () { return [{ type: DataViewBuilderService }]; }, propDecorators: { builderTitle: [{
276
300
  type: i0.Input
277
301
  }], builderTitleHint: [{
278
302
  type: i0.Input
@@ -308,8 +332,8 @@
308
332
  menu.PepMenuModule,
309
333
  i2.PepPageLayoutModule,
310
334
  i6.PepTextboxModule,
311
- i3$1.PepTopBarModule,
312
- i4.PepDraggableItemsModule], exports: [DataViewBuilderComponent] });
335
+ topBar.PepTopBarModule,
336
+ i3$1.PepDraggableItemsModule], exports: [DataViewBuilderComponent] });
313
337
  PepDataViewBuilderModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepDataViewBuilderModule, providers: [DataViewBuilderService], imports: [[
314
338
  i7.CommonModule,
315
339
  i8.DragDropModule,
@@ -321,8 +345,8 @@
321
345
  menu.PepMenuModule,
322
346
  i2.PepPageLayoutModule,
323
347
  i6.PepTextboxModule,
324
- i3$1.PepTopBarModule,
325
- i4.PepDraggableItemsModule,
348
+ topBar.PepTopBarModule,
349
+ i3$1.PepDraggableItemsModule,
326
350
  ]] });
327
351
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepDataViewBuilderModule, decorators: [{
328
352
  type: i0.NgModule,
@@ -341,8 +365,8 @@
341
365
  menu.PepMenuModule,
342
366
  i2.PepPageLayoutModule,
343
367
  i6.PepTextboxModule,
344
- i3$1.PepTopBarModule,
345
- i4.PepDraggableItemsModule,
368
+ topBar.PepTopBarModule,
369
+ i3$1.PepDraggableItemsModule,
346
370
  ],
347
371
  exports: [DataViewBuilderComponent],
348
372
  providers: [DataViewBuilderService]
package/bundles/pepperi-addons-ngx-composite-lib-data-view-builder.umd.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"pepperi-addons-ngx-composite-lib-data-view-builder.umd.js","sources":["../../../projects/ngx-composite-lib/data-view-builder/data-view-builder.service.ts","../../../projects/ngx-composite-lib/data-view-builder/menu-data-view/menu-data-view.component.ts","../../../projects/ngx-composite-lib/data-view-builder/menu-data-view/menu-data-view.component.html","../../../projects/ngx-composite-lib/data-view-builder/data-view-builder.component.ts","../../../projects/ngx-composite-lib/data-view-builder/data-view-builder.component.html","../../../projects/ngx-composite-lib/data-view-builder/data-view-builder.module.ts","../../../projects/ngx-composite-lib/data-view-builder/public-api.ts","../../../projects/ngx-composite-lib/data-view-builder/pepperi-addons-ngx-composite-lib-data-view-builder.ts"],"sourcesContent":["import { CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';\nimport { Injectable } from '@angular/core';\nimport { BehaviorSubject, Observable } from 'rxjs';\nimport { distinctUntilChanged, filter } from 'rxjs/operators';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class DataViewBuilderService {\n \n // This subject is for is grabbing mode.\n private _isGrabbingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);\n get isGrabbingChange$(): Observable<boolean> {\n return this._isGrabbingSubject.asObservable().pipe(distinctUntilChanged());\n }\n\n constructor() { }\n\n private changeCursorOnDragStart() {\n document.body.classList.add('inheritCursors');\n document.body.style.cursor = 'grabbing';\n this._isGrabbingSubject.next(true);\n }\n\n private changeCursorOnDragEnd() {\n document.body.classList.remove('inheritCursors');\n document.body.style.cursor = 'unset';\n this._isGrabbingSubject.next(false);\n }\n \n onDragStart(event: CdkDragStart) {\n this.changeCursorOnDragStart();\n }\n\n onDragEnd(event: CdkDragEnd) {\n this.changeCursorOnDragEnd();\n }\n}\n","import { CdkDragDrop, CdkDragEnd, CdkDragStart, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { Component, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';\nimport { MatDialogRef } from '@angular/material/dialog';\nimport { TranslateService } from '@ngx-translate/core';\nimport { IPepButtonClickEvent } from '@pepperi-addons/ngx-lib/button';\nimport { PepDialogService } from '@pepperi-addons/ngx-lib/dialog';\nimport { IPepDraggableItem } from '@pepperi-addons/ngx-lib/draggable-items';\nimport { DataViewField, MenuDataViewField } from '@pepperi-addons/papi-sdk';\nimport { DataViewBuilderService } from '../data-view-builder.service';\n\n@Component({\n selector: 'menu-data-view',\n templateUrl: './menu-data-view.component.html',\n styleUrls: ['./menu-data-view.component.scss']\n})\nexport class MenuDataViewComponent implements OnInit {\n @ViewChild('separatorTitleModalTemplate', { read: TemplateRef }) separatorTitleModalTemplate!: TemplateRef<any>;\n\n @Input() \n fields: Array<DataViewField> = [];\n\n @Input() \n emptyDropAreaId: string = '';\n\n @Input() \n mappedFieldsId = '';\n\n @Output()\n fieldsChange: EventEmitter<DataViewField[]> = new EventEmitter<DataViewField[]>();\n\n \n isGrabbing = false;\n private dialogRef: MatDialogRef<any> | null = null;\n \n constructor(\n private dialogService: PepDialogService,\n private dataViewBuilderService: DataViewBuilderService\n ) { \n this.dataViewBuilderService.isGrabbingChange$.subscribe((value) => {\n this.isGrabbing = value;\n });\n }\n \n private addNewField(draggableItem: IPepDraggableItem, index: number) {\n // Add new menuField to the mappedFields.\n const menuField: MenuDataViewField = { FieldID: draggableItem.data, Title: draggableItem.title };\n this.spliceMappedFields(index, 0, menuField);\n }\n \n private spliceMappedFields(start: number, deleteCount: number, item?: MenuDataViewField) {\n if (item) {\n this.fields.splice(start, deleteCount, item);\n } else {\n this.fields.splice(start, deleteCount);\n }\n\n this.notifyFieldsChange();\n }\n\n private changeTitle(menuField: MenuDataViewField, title: string) {\n menuField.Title = title;\n this.notifyFieldsChange();\n }\n\n private notifyFieldsChange() {\n this.fieldsChange.emit(this.fields);\n }\n\n ngOnInit() {\n }\n\n addSeparator(index: number) {\n const menuField: MenuDataViewField = { FieldID: '', Title: '' };\n this.spliceMappedFields(index, 0, menuField);\n }\n\n onDragStart(event: CdkDragStart) {\n this.dataViewBuilderService.onDragStart(event);\n }\n\n onDragEnd(event: CdkDragEnd) {\n this.dataViewBuilderService.onDragEnd(event);\n }\n \n onDropField(event: CdkDragDrop<any[]>) {\n if (event.previousContainer === event.container) {\n moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);\n this.notifyFieldsChange();\n } else if (event.container.id === 'emptyDropArea') {\n this.addNewField(event.previousContainer.data[event.previousIndex], this.fields.length);\n } else {\n this.addNewField(event.previousContainer.data[event.previousIndex], event.currentIndex);\n }\n }\n\n onTitleChanged(event: string, menuField: MenuDataViewField) {\n this.changeTitle(menuField, event);\n }\n\n onDeleteMappedField(event: IPepButtonClickEvent, menuField: MenuDataViewField) {\n const index = this.fields.findIndex(ms => ms === menuField);\n if (index > -1) {\n this.spliceMappedFields(index, 1);\n }\n }\n\n onEditSeparatorField(event: IPepButtonClickEvent, menuField: MenuDataViewField) {\n this.dialogRef = this.dialogService.openDialog(this.separatorTitleModalTemplate, { value: menuField.Title });\n this.dialogRef.afterClosed().subscribe((titleValue) => {\n if (titleValue !== undefined) {\n this.changeTitle(menuField, titleValue);\n }\n });\n }\n\n setDialogValue(value: string) {\n this.closeDialog(value);\n }\n\n closeDialog(value: string | undefined = undefined) {\n this.dialogRef?.close(value);\n }\n}\n","<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\"\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>","import { CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';\nimport { Component, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';\nimport { IPepDraggableItem } from '@pepperi-addons/ngx-lib/draggable-items';\nimport { BaseDataView, DataViewField } from '@pepperi-addons/papi-sdk';\nimport { PepDataViewBuilderType } from './data-view-builder.model';\nimport { DataViewBuilderService } from './data-view-builder.service';\n\n@Component({\n selector: 'pep-data-view-builder',\n templateUrl: './data-view-builder.component.html',\n styleUrls: ['./data-view-builder.component.scss']\n})\nexport class DataViewBuilderComponent implements OnInit {\n @Input() title: string = '';\n @Input() builderTitle: string = '';\n @Input() builderTitleHint: string = '';\n \n @Input() availableFields: Array<IPepDraggableItem> = [];\n \n private _dataView!: BaseDataView;\n @Input()\n set dataView(value: BaseDataView) {\n this._dataView = value;\n this.setType();\n this.refreshAvailableFields();\n }\n get dataView() : BaseDataView {\n return this._dataView;\n }\n\n @Output()\n dataViewChange: EventEmitter<BaseDataView> = new EventEmitter<BaseDataView>();\n \n type: PepDataViewBuilderType = 'not-supported';\n \n emptyDropAreaId = 'emptyDropArea';\n mappedFieldsId = 'mappedFields';\n\n constructor(\n private dataViewBuilderService: DataViewBuilderService\n ) {\n //\n }\n\n private setType() {\n if (this._dataView.Type === 'Menu') {\n this.type = 'menu';\n } else if (this._dataView.Type === 'Grid') {\n this.type = 'list';\n } else if ((this._dataView.Type === 'Card') || \n (this._dataView.Type === 'Form') || \n (this._dataView.Type === 'Large') || \n (this._dataView.Type === 'Line')) {\n this.type = 'card';\n } else {\n this.type = 'not-supported';\n }\n }\n\n private setAvailableFieldPermission(field: string, disable: boolean) {\n // Find the item in the available fields\n const item = this.availableFields.find(as => as.data === field);\n \n // If exist disable or enable it.\n if (item) {\n item.disabled = disable;\n }\n }\n\n private refreshAvailableFields() {\n this.availableFields.forEach(af => af.disabled = false);\n \n if (this.dataView && this.dataView.Fields) {\n for (let index = 0; index < this.dataView.Fields.length; index++) {\n this.setAvailableFieldPermission(this.dataView.Fields[index].FieldID, true);\n }\n }\n }\n\n private notifyDataViewChange() {\n this.dataViewChange.emit(this.dataView);\n console.log(this.dataView);\n }\n\n ngOnInit() {\n \n }\n\n onDragStart(event: CdkDragStart) {\n this.dataViewBuilderService.onDragStart(event);\n }\n\n onDragEnd(event: CdkDragEnd) {\n this.dataViewBuilderService.onDragEnd(event);\n }\n \n onFieldsChanged(fields: Array<DataViewField>) {\n this.dataView.Fields = fields;\n this.refreshAvailableFields();\n this.notifyDataViewChange();\n }\n}\n","<pep-page-layout >\n <ng-container pep-top-area>\n <pep-top-bar [title]=\"title\">\n <div header-end-content>\n <!-- <pep-button class=\"pep-spacing-element\" [value]=\"'Cancel' | translate\" (buttonClick)=\"backClicked()\"></pep-button> -->\n <!-- <pep-button class=\"pep-spacing-element\" [value]=\"'Save' | translate\" styleType=\"strong\" (buttonClick)=\"saveClicked()\"></pep-button> -->\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 <ng-container [ngSwitch]=\"type\">\n <ng-container *ngSwitchCase=\"'menu'\">\n <menu-data-view [fields]=\"dataView?.Fields || []\" [emptyDropAreaId]=\"emptyDropAreaId\" [mappedFieldsId]=\"mappedFieldsId\" (fieldsChange)=\"onFieldsChanged($event)\"></menu-data-view>\n </ng-container>\n <!-- <ng-container *ngSwitchDefault>\n </ng-container> -->\n </ng-container>\n </div>\n </div>\n </ng-template>\n </ng-container>\n</pep-page-layout>\n\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\nimport { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';\nimport { PepMenuModule } from '@pepperi-addons/ngx-lib/menu';\nimport { PepPageLayoutModule } from '@pepperi-addons/ngx-lib/page-layout';\nimport { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';\nimport { PepTopBarModule } from '@pepperi-addons/ngx-lib/top-bar';\nimport { PepDraggableItemsModule } from '@pepperi-addons/ngx-lib/draggable-items';\nimport { PepIconRegistry, PepIconModule, pepIconSystemClose, pepIconArrowDownAlt, pepIconSystemBin, pepIconNumberPlus } from '@pepperi-addons/ngx-lib/icon';\n\nimport { DataViewBuilderService } from './data-view-builder.service';\n\nimport { DataViewBuilderComponent } from './data-view-builder.component';\nimport { MenuDataViewComponent } from './menu-data-view/menu-data-view.component';\n\nconst pepIcons = [\n pepIconSystemClose,\n pepIconArrowDownAlt,\n pepIconSystemBin,\n pepIconNumberPlus\n];\n\n@NgModule({\n declarations: [\n DataViewBuilderComponent, MenuDataViewComponent\n ],\n imports: [\n CommonModule,\n DragDropModule,\n MatIconModule,\n PepNgxLibModule,\n PepButtonModule,\n PepDialogModule,\n PepIconModule,\n PepMenuModule,\n PepPageLayoutModule,\n PepTextboxModule,\n PepTopBarModule,\n PepDraggableItemsModule,\n ],\n exports: [DataViewBuilderComponent],\n providers: [DataViewBuilderService]\n})\nexport class PepDataViewBuilderModule {\n constructor(\n private pepIconRegistry: PepIconRegistry,\n ) {\n this.pepIconRegistry.registerIcons(pepIcons);\n }\n}\n","/*\n * Public API Surface of ngx-composite-lib/data-view-builder\n */\nexport * from './data-view-builder.module';\nexport * from './data-view-builder.component';\nexport * from './data-view-builder.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["BehaviorSubject","distinctUntilChanged","Injectable","EventEmitter","moveItemInArray","TemplateRef","Component","ViewChild","Input","Output","pepIconSystemClose","pepIconArrowDownAlt","pepIconSystemBin","pepIconNumberPlus","CommonModule","DragDropModule","MatIconModule","PepNgxLibModule","PepButtonModule","PepDialogModule","PepIconModule","PepMenuModule","PepPageLayoutModule","PepTextboxModule","PepTopBarModule","PepDraggableItemsModule","NgModule"],"mappings":"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"}
1
+ {"version":3,"file":"pepperi-addons-ngx-composite-lib-data-view-builder.umd.js","sources":["../../../projects/ngx-composite-lib/data-view-builder/data-view-builder.service.ts","../../../projects/ngx-composite-lib/data-view-builder/menu-data-view/menu-data-view.component.ts","../../../projects/ngx-composite-lib/data-view-builder/menu-data-view/menu-data-view.component.html","../../../projects/ngx-composite-lib/data-view-builder/data-view-builder.component.ts","../../../projects/ngx-composite-lib/data-view-builder/data-view-builder.component.html","../../../projects/ngx-composite-lib/data-view-builder/data-view-builder.module.ts","../../../projects/ngx-composite-lib/data-view-builder/public-api.ts","../../../projects/ngx-composite-lib/data-view-builder/pepperi-addons-ngx-composite-lib-data-view-builder.ts"],"sourcesContent":["import { CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';\nimport { Injectable } from '@angular/core';\nimport { BehaviorSubject, Observable } from 'rxjs';\nimport { distinctUntilChanged, filter } from 'rxjs/operators';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class DataViewBuilderService {\n \n // This subject is for is grabbing mode.\n private _isGrabbingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);\n get isGrabbingChange$(): Observable<boolean> {\n return this._isGrabbingSubject.asObservable().pipe(distinctUntilChanged());\n }\n\n constructor() { }\n\n private changeCursorOnDragStart() {\n document.body.classList.add('inheritCursors');\n document.body.style.cursor = 'grabbing';\n this._isGrabbingSubject.next(true);\n }\n\n private changeCursorOnDragEnd() {\n document.body.classList.remove('inheritCursors');\n document.body.style.cursor = 'unset';\n this._isGrabbingSubject.next(false);\n }\n \n onDragStart(event: CdkDragStart) {\n this.changeCursorOnDragStart();\n }\n\n onDragEnd(event: CdkDragEnd) {\n this.changeCursorOnDragEnd();\n }\n}\n","import { CdkDragDrop, CdkDragEnd, CdkDragStart, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { Component, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';\nimport { MatDialogRef } from '@angular/material/dialog';\nimport { TranslateService } from '@ngx-translate/core';\nimport { IPepButtonClickEvent } from '@pepperi-addons/ngx-lib/button';\nimport { PepDialogService } from '@pepperi-addons/ngx-lib/dialog';\nimport { IPepDraggableItem } from '@pepperi-addons/ngx-lib/draggable-items';\nimport { DataViewField, MenuDataViewField } from '@pepperi-addons/papi-sdk';\nimport { DataViewBuilderService } from '../data-view-builder.service';\n\n@Component({\n selector: 'menu-data-view',\n templateUrl: './menu-data-view.component.html',\n styleUrls: ['./menu-data-view.component.scss']\n})\nexport class MenuDataViewComponent implements OnInit {\n @ViewChild('separatorTitleModalTemplate', { read: TemplateRef }) separatorTitleModalTemplate!: TemplateRef<any>;\n\n @Input() \n fields: Array<DataViewField> = []; // The data view fields.\n\n @Input()\n availableFieldsTitles: Map<string, string> = new Map<string, string>(); // <FieldID, Original Title> from the available fields.\n\n @Input() \n emptyDropAreaId: string = '';\n\n @Input() \n mappedFieldsId = '';\n\n @Output()\n fieldsChange: EventEmitter<DataViewField[]> = new EventEmitter<DataViewField[]>();\n \n isGrabbing = false;\n private dialogRef: MatDialogRef<any> | null = null;\n \n constructor(\n private dialogService: PepDialogService,\n private dataViewBuilderService: DataViewBuilderService\n ) { \n this.dataViewBuilderService.isGrabbingChange$.subscribe((value) => {\n this.isGrabbing = value;\n });\n }\n \n private addNewField(draggableItem: IPepDraggableItem, index: number) {\n // Add new menuField to the mappedFields.\n const menuField: MenuDataViewField = { FieldID: draggableItem.data.key, Title: draggableItem.title };\n this.spliceMappedFields(index, 0, menuField);\n }\n \n private spliceMappedFields(start: number, deleteCount: number, item?: MenuDataViewField) {\n if (item) {\n this.fields.splice(start, deleteCount, item);\n } else {\n this.fields.splice(start, deleteCount);\n }\n\n this.notifyFieldsChange();\n }\n\n private changeTitle(menuField: MenuDataViewField, title: string) {\n menuField.Title = title;\n this.notifyFieldsChange();\n }\n\n private notifyFieldsChange() {\n this.fieldsChange.emit(this.fields);\n }\n\n ngOnInit() {\n }\n\n addSeparator(index: number) {\n const menuField: MenuDataViewField = { FieldID: '', Title: '' };\n this.spliceMappedFields(index, 0, menuField);\n }\n\n onDragStart(event: CdkDragStart) {\n this.dataViewBuilderService.onDragStart(event);\n }\n\n onDragEnd(event: CdkDragEnd) {\n this.dataViewBuilderService.onDragEnd(event);\n }\n \n onDropField(event: CdkDragDrop<any[]>) {\n if (event.previousContainer === event.container) {\n moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);\n this.notifyFieldsChange();\n } else if (event.container.id === 'emptyDropArea') {\n this.addNewField(event.previousContainer.data[event.previousIndex], this.fields.length);\n } else {\n this.addNewField(event.previousContainer.data[event.previousIndex], event.currentIndex);\n }\n }\n\n onTitleChanged(event: string, menuField: MenuDataViewField) {\n this.changeTitle(menuField, event);\n }\n\n onDeleteMappedField(event: IPepButtonClickEvent, menuField: MenuDataViewField) {\n const index = this.fields.findIndex(ms => ms === menuField);\n if (index > -1) {\n this.spliceMappedFields(index, 1);\n }\n }\n\n onEditSeparatorField(event: IPepButtonClickEvent, menuField: MenuDataViewField) {\n this.dialogRef = this.dialogService.openDialog(this.separatorTitleModalTemplate, { value: menuField.Title });\n this.dialogRef.afterClosed().subscribe((titleValue) => {\n if (titleValue !== undefined) {\n this.changeTitle(menuField, titleValue);\n }\n });\n }\n\n setDialogValue(value: string) {\n this.closeDialog(value);\n }\n\n closeDialog(value: string | undefined = undefined) {\n this.dialogRef?.close(value);\n }\n}\n","<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>","import { CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';\nimport { Component, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';\nimport { IPepDraggableItem } from '@pepperi-addons/ngx-lib/draggable-items';\nimport { BaseDataView, DataViewField } from '@pepperi-addons/papi-sdk';\nimport { PepDataViewBuilderType } from './data-view-builder.model';\nimport { DataViewBuilderService } from './data-view-builder.service';\n\n@Component({\n selector: 'pep-data-view-builder',\n templateUrl: './data-view-builder.component.html',\n styleUrls: ['./data-view-builder.component.scss']\n})\nexport class DataViewBuilderComponent implements OnInit {\n // @Input() title: string = '';\n @Input() builderTitle: string = '';\n @Input() builderTitleHint: string = '';\n \n private _availableFields: Array<IPepDraggableItem> = [];\n @Input()\n set availableFields(value: Array<IPepDraggableItem>) {\n this._availableFields = value;\n this.setTitlesMap();\n }\n get availableFields(): Array<IPepDraggableItem> {\n return this._availableFields;\n }\n \n private _dataView!: BaseDataView;\n @Input()\n set dataView(value: BaseDataView) {\n this._dataView = value;\n this.setType();\n this.refreshAvailableFields();\n }\n get dataView() : BaseDataView {\n return this._dataView;\n }\n\n @Output()\n dataViewChange: EventEmitter<BaseDataView> = new EventEmitter<BaseDataView>();\n \n type: PepDataViewBuilderType = 'not-supported';\n \n emptyDropAreaId = 'emptyDropArea';\n mappedFieldsId = 'mappedFields';\n\n availableFieldsTitles: Map<string, string> = new Map<string, string>();\n\n constructor(\n private dataViewBuilderService: DataViewBuilderService\n ) {\n //\n }\n\n private setType() {\n if (this._dataView.Type === 'Menu') {\n this.type = 'menu';\n } else if (this._dataView.Type === 'Grid') {\n this.type = 'list';\n } else if ((this._dataView.Type === 'Card') || \n (this._dataView.Type === 'Form') || \n (this._dataView.Type === 'Large') || \n (this._dataView.Type === 'Line')) {\n this.type = 'card';\n } else {\n this.type = 'not-supported';\n }\n }\n\n private setAvailableFieldPermission(field: string, disable: boolean) {\n // Find the item in the available fields\n const item = this.availableFields.find(as => as.data.key === field);\n \n // If exist disable or enable it.\n if (item) {\n item.disabled = disable;\n }\n }\n\n private refreshAvailableFields() {\n this.availableFields.forEach(af => af.disabled = false);\n \n if (this.dataView && this.dataView.Fields) {\n for (let index = 0; index < this.dataView.Fields.length; index++) {\n this.setAvailableFieldPermission(this.dataView.Fields[index].FieldID, true);\n }\n }\n }\n\n private setTitlesMap() {\n this.availableFieldsTitles.clear();\n\n if (this.availableFields?.length > 0) {\n for (let index = 0; index < this.availableFields.length; index++) {\n const availableField = this.availableFields[index];\n\n if (availableField?.data?.key.length > 0) {\n this.availableFieldsTitles.set(availableField.data.key, availableField.title);\n }\n }\n }\n }\n\n private notifyDataViewChange() {\n this.dataViewChange.emit(this.dataView);\n // console.log(this.dataView);\n }\n\n ngOnInit() {\n \n }\n\n onDragStart(event: CdkDragStart) {\n this.dataViewBuilderService.onDragStart(event);\n }\n\n onDragEnd(event: CdkDragEnd) {\n this.dataViewBuilderService.onDragEnd(event);\n }\n \n onFieldsChanged(fields: Array<DataViewField>) {\n this.dataView.Fields = fields;\n this.refreshAvailableFields();\n this.notifyDataViewChange();\n }\n}\n","<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","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\nimport { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';\nimport { PepMenuModule } from '@pepperi-addons/ngx-lib/menu';\nimport { PepPageLayoutModule } from '@pepperi-addons/ngx-lib/page-layout';\nimport { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';\nimport { PepTopBarModule } from '@pepperi-addons/ngx-lib/top-bar';\nimport { PepDraggableItemsModule } from '@pepperi-addons/ngx-lib/draggable-items';\nimport { PepIconRegistry, PepIconModule, pepIconSystemClose, pepIconArrowDownAlt, pepIconSystemBin, pepIconNumberPlus } from '@pepperi-addons/ngx-lib/icon';\n\nimport { DataViewBuilderService } from './data-view-builder.service';\n\nimport { DataViewBuilderComponent } from './data-view-builder.component';\nimport { MenuDataViewComponent } from './menu-data-view/menu-data-view.component';\n\nconst pepIcons = [\n pepIconSystemClose,\n pepIconArrowDownAlt,\n pepIconSystemBin,\n pepIconNumberPlus\n];\n\n@NgModule({\n declarations: [\n DataViewBuilderComponent, MenuDataViewComponent\n ],\n imports: [\n CommonModule,\n DragDropModule,\n MatIconModule,\n PepNgxLibModule,\n PepButtonModule,\n PepDialogModule,\n PepIconModule,\n PepMenuModule,\n PepPageLayoutModule,\n PepTextboxModule,\n PepTopBarModule,\n PepDraggableItemsModule,\n ],\n exports: [DataViewBuilderComponent],\n providers: [DataViewBuilderService]\n})\nexport class PepDataViewBuilderModule {\n constructor(\n private pepIconRegistry: PepIconRegistry,\n ) {\n this.pepIconRegistry.registerIcons(pepIcons);\n }\n}\n","/*\n * Public API Surface of ngx-composite-lib/data-view-builder\n */\nexport * from './data-view-builder.module';\nexport * from './data-view-builder.component';\nexport * from './data-view-builder.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["BehaviorSubject","distinctUntilChanged","Injectable","EventEmitter","moveItemInArray","TemplateRef","Component","ViewChild","Input","Output","pepIconSystemClose","pepIconArrowDownAlt","pepIconSystemBin","pepIconNumberPlus","CommonModule","DragDropModule","MatIconModule","PepNgxLibModule","PepButtonModule","PepDialogModule","PepIconModule","PepMenuModule","PepPageLayoutModule","PepTextboxModule","PepTopBarModule","PepDraggableItemsModule","NgModule"],"mappings":"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"}
package/data-view-builder/data-view-builder.component.d.ts CHANGED
@@ -7,10 +7,11 @@ import { DataViewBuilderService } from './data-view-builder.service';
7
7
  import * as i0 from "@angular/core";
8
8
  export declare class DataViewBuilderComponent implements OnInit {
9
9
  private dataViewBuilderService;
10
- title: string;
11
10
  builderTitle: string;
12
11
  builderTitleHint: string;
13
- availableFields: Array<IPepDraggableItem>;
12
+ private _availableFields;
13
+ set availableFields(value: Array<IPepDraggableItem>);
14
+ get availableFields(): Array<IPepDraggableItem>;
14
15
  private _dataView;
15
16
  set dataView(value: BaseDataView);
16
17
  get dataView(): BaseDataView;
@@ -18,15 +19,17 @@ export declare class DataViewBuilderComponent implements OnInit {
18
19
  type: PepDataViewBuilderType;
19
20
  emptyDropAreaId: string;
20
21
  mappedFieldsId: string;
22
+ availableFieldsTitles: Map<string, string>;
21
23
  constructor(dataViewBuilderService: DataViewBuilderService);
22
24
  private setType;
23
25
  private setAvailableFieldPermission;
24
26
  private refreshAvailableFields;
27
+ private setTitlesMap;
25
28
  private notifyDataViewChange;
26
29
  ngOnInit(): void;
27
30
  onDragStart(event: CdkDragStart): void;
28
31
  onDragEnd(event: CdkDragEnd): void;
29
32
  onFieldsChanged(fields: Array<DataViewField>): void;
30
33
  static ɵfac: i0.ɵɵFactoryDeclaration<DataViewBuilderComponent, never>;
31
- static ɵcmp: i0.ɵɵComponentDeclaration<DataViewBuilderComponent, "pep-data-view-builder", never, { "title": "title"; "builderTitle": "builderTitle"; "builderTitleHint": "builderTitleHint"; "availableFields": "availableFields"; "dataView": "dataView"; }, { "dataViewChange": "dataViewChange"; }, never, never>;
34
+ static ɵcmp: i0.ɵɵComponentDeclaration<DataViewBuilderComponent, "pep-data-view-builder", never, { "builderTitle": "builderTitle"; "builderTitleHint": "builderTitleHint"; "availableFields": "availableFields"; "dataView": "dataView"; }, { "dataViewChange": "dataViewChange"; }, never, never>;
32
35
  }
package/data-view-builder/menu-data-view/menu-data-view.component.d.ts CHANGED
@@ -10,6 +10,7 @@ export declare class MenuDataViewComponent implements OnInit {
10
10
  private dataViewBuilderService;
11
11
  separatorTitleModalTemplate: TemplateRef<any>;
12
12
  fields: Array<DataViewField>;
13
+ availableFieldsTitles: Map<string, string>;
13
14
  emptyDropAreaId: string;
14
15
  mappedFieldsId: string;
15
16
  fieldsChange: EventEmitter<DataViewField[]>;
@@ -31,5 +32,5 @@ export declare class MenuDataViewComponent implements OnInit {
31
32
  setDialogValue(value: string): void;
32
33
  closeDialog(value?: string | undefined): void;
33
34
  static ɵfac: i0.ɵɵFactoryDeclaration<MenuDataViewComponent, never>;
34
- static ɵcmp: i0.ɵɵComponentDeclaration<MenuDataViewComponent, "menu-data-view", never, { "fields": "fields"; "emptyDropAreaId": "emptyDropAreaId"; "mappedFieldsId": "mappedFieldsId"; }, { "fieldsChange": "fieldsChange"; }, never, never>;
35
+ static ɵcmp: i0.ɵɵComponentDeclaration<MenuDataViewComponent, "menu-data-view", never, { "fields": "fields"; "availableFieldsTitles": "availableFieldsTitles"; "emptyDropAreaId": "emptyDropAreaId"; "mappedFieldsId": "mappedFieldsId"; }, { "fieldsChange": "fieldsChange"; }, never, never>;
35
36
  }