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

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

@@ -0,0 +1,337 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, TemplateRef, Component, ViewChild, Input, Output, NgModule } from '@angular/core';
+import * as i7 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i8 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { PepNgxLibModule } from '@pepperi-addons/ngx-lib';
+import * as i5 from '@pepperi-addons/ngx-lib/button';
+import { PepButtonModule } from '@pepperi-addons/ngx-lib/button';
+import * as i1 from '@pepperi-addons/ngx-lib/dialog';
+import { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';
+import { PepMenuModule } from '@pepperi-addons/ngx-lib/menu';
+import * as i2 from '@pepperi-addons/ngx-lib/page-layout';
+import { PepPageLayoutModule } from '@pepperi-addons/ngx-lib/page-layout';
+import * as i6 from '@pepperi-addons/ngx-lib/textbox';
+import { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';
+import * as i3$1 from '@pepperi-addons/ngx-lib/top-bar';
+import { PepTopBarModule } from '@pepperi-addons/ngx-lib/top-bar';
+import * as i4 from '@pepperi-addons/ngx-lib/draggable-items';
+import { PepDraggableItemsModule } from '@pepperi-addons/ngx-lib/draggable-items';
+import * as i1$1 from '@pepperi-addons/ngx-lib/icon';
+import { pepIconSystemClose, pepIconArrowDownAlt, pepIconSystemBin, pepIconNumberPlus, PepIconModule } from '@pepperi-addons/ngx-lib/icon';
+import { BehaviorSubject } from 'rxjs';
+import { distinctUntilChanged } from 'rxjs/operators';
+import * as i9 from '@ngx-translate/core';
+
+class DataViewBuilderService {
+    constructor() {
+        // This subject is for is grabbing mode.
+        this._isGrabbingSubject = new BehaviorSubject(false);
+    }
+    get isGrabbingChange$() {
+        return this._isGrabbingSubject.asObservable().pipe(distinctUntilChanged());
+    }
+    changeCursorOnDragStart() {
+        document.body.classList.add('inheritCursors');
+        document.body.style.cursor = 'grabbing';
+        this._isGrabbingSubject.next(true);
+    }
+    changeCursorOnDragEnd() {
+        document.body.classList.remove('inheritCursors');
+        document.body.style.cursor = 'unset';
+        this._isGrabbingSubject.next(false);
+    }
+    onDragStart(event) {
+        this.changeCursorOnDragStart();
+    }
+    onDragEnd(event) {
+        this.changeCursorOnDragEnd();
+    }
+}
+DataViewBuilderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: DataViewBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DataViewBuilderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: DataViewBuilderService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: DataViewBuilderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class MenuDataViewComponent {
+    constructor(dialogService, dataViewBuilderService) {
+        this.dialogService = dialogService;
+        this.dataViewBuilderService = dataViewBuilderService;
+        this.fields = [];
+        this.emptyDropAreaId = '';
+        this.mappedFieldsId = '';
+        this.fieldsChange = new EventEmitter();
+        this.isGrabbing = false;
+        this.dialogRef = null;
+        this.dataViewBuilderService.isGrabbingChange$.subscribe((value) => {
+            this.isGrabbing = value;
+        });
+    }
+    addNewField(draggableItem, index) {
+        // Add new menuField to the mappedFields.
+        const menuField = { FieldID: draggableItem.data, Title: draggableItem.title };
+        this.spliceMappedFields(index, 0, menuField);
+    }
+    spliceMappedFields(start, deleteCount, item) {
+        if (item) {
+            this.fields.splice(start, deleteCount, item);
+        }
+        else {
+            this.fields.splice(start, deleteCount);
+        }
+        this.notifyFieldsChange();
+    }
+    changeTitle(menuField, title) {
+        menuField.Title = title;
+        this.notifyFieldsChange();
+    }
+    notifyFieldsChange() {
+        this.fieldsChange.emit(this.fields);
+    }
+    ngOnInit() {
+    }
+    addSeparator(index) {
+        const menuField = { FieldID: '', Title: '' };
+        this.spliceMappedFields(index, 0, menuField);
+    }
+    onDragStart(event) {
+        this.dataViewBuilderService.onDragStart(event);
+    }
+    onDragEnd(event) {
+        this.dataViewBuilderService.onDragEnd(event);
+    }
+    onDropField(event) {
+        if (event.previousContainer === event.container) {
+            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);
+        }
+    }
+    onTitleChanged(event, menuField) {
+        this.changeTitle(menuField, event);
+    }
+    onDeleteMappedField(event, menuField) {
+        const index = this.fields.findIndex(ms => ms === menuField);
+        if (index > -1) {
+            this.spliceMappedFields(index, 1);
+        }
+    }
+    onEditSeparatorField(event, menuField) {
+        this.dialogRef = this.dialogService.openDialog(this.separatorTitleModalTemplate, { value: menuField.Title });
+        this.dialogRef.afterClosed().subscribe((titleValue) => {
+            if (titleValue !== undefined) {
+                this.changeTitle(menuField, titleValue);
+            }
+        });
+    }
+    setDialogValue(value) {
+        this.closeDialog(value);
+    }
+    closeDialog(value = undefined) {
+        var _a;
+        (_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.close(value);
+    }
+}
+MenuDataViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: MenuDataViewComponent, deps: [{ token: i1.PepDialogService }, { token: DataViewBuilderService }], target: i0.ɵɵFactoryTarget.Component });
+MenuDataViewComponent.ɵcmp = i0.ɵɵ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: TemplateRef }], ngImport: i0, 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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { type: i5.PepButtonComponent, selector: "pep-button", inputs: ["styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconPosition", "visible", "key", "value", "iconName"], outputs: ["buttonClick"] }, { type: i6.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.PepDialogComponent, selector: "pep-dialog", inputs: ["showClose", "showHeader", "showFooter", "title"], outputs: ["close"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i9.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: MenuDataViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'menu-data-view',
+                    templateUrl: './menu-data-view.component.html',
+                    styleUrls: ['./menu-data-view.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: i1.PepDialogService }, { type: DataViewBuilderService }]; }, propDecorators: { separatorTitleModalTemplate: [{
+                type: ViewChild,
+                args: ['separatorTitleModalTemplate', { read: TemplateRef }]
+            }], fields: [{
+                type: Input
+            }], emptyDropAreaId: [{
+                type: Input
+            }], mappedFieldsId: [{
+                type: Input
+            }], fieldsChange: [{
+                type: Output
+            }] } });
+
+class DataViewBuilderComponent {
+    constructor(dataViewBuilderService) {
+        this.dataViewBuilderService = dataViewBuilderService;
+        this.title = '';
+        this.builderTitle = '';
+        this.builderTitleHint = '';
+        this.availableFields = [];
+        this.dataViewChange = new EventEmitter();
+        this.type = 'not-supported';
+        this.emptyDropAreaId = 'emptyDropArea';
+        this.mappedFieldsId = 'mappedFields';
+        //
+    }
+    set dataView(value) {
+        this._dataView = value;
+        this.setType();
+        this.refreshAvailableFields();
+    }
+    get dataView() {
+        return this._dataView;
+    }
+    setType() {
+        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';
+        }
+    }
+    setAvailableFieldPermission(field, disable) {
+        // Find the item in the available fields
+        const item = this.availableFields.find(as => as.data === field);
+        // If exist disable or enable it.
+        if (item) {
+            item.disabled = disable;
+        }
+    }
+    refreshAvailableFields() {
+        this.availableFields.forEach(af => af.disabled = false);
+        if (this.dataView && this.dataView.Fields) {
+            for (let index = 0; index < this.dataView.Fields.length; index++) {
+                this.setAvailableFieldPermission(this.dataView.Fields[index].FieldID, true);
+            }
+        }
+    }
+    notifyDataViewChange() {
+        this.dataViewChange.emit(this.dataView);
+        console.log(this.dataView);
+    }
+    ngOnInit() {
+    }
+    onDragStart(event) {
+        this.dataViewBuilderService.onDragStart(event);
+    }
+    onDragEnd(event) {
+        this.dataViewBuilderService.onDragEnd(event);
+    }
+    onFieldsChanged(fields) {
+        this.dataView.Fields = fields;
+        this.refreshAvailableFields();
+        this.notifyDataViewChange();
+    }
+}
+DataViewBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: DataViewBuilderComponent, deps: [{ token: DataViewBuilderService }], target: i0.ɵɵFactoryTarget.Component });
+DataViewBuilderComponent.ɵcmp = i0.ɵɵ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, 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.PepPageLayoutComponent, selector: "pep-page-layout", inputs: ["addPadding", "showShadow"] }, { type: i3$1.PepTopBarComponent, selector: "pep-top-bar", inputs: ["inline", "title"], outputs: ["footerStateChange"] }, { type: i4.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "translate": i9.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: DataViewBuilderComponent, decorators: [{
+            type: 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: { title: [{
+                type: Input
+            }], builderTitle: [{
+                type: Input
+            }], builderTitleHint: [{
+                type: Input
+            }], availableFields: [{
+                type: Input
+            }], dataView: [{
+                type: Input
+            }], dataViewChange: [{
+                type: Output
+            }] } });
+
+const pepIcons = [
+    pepIconSystemClose,
+    pepIconArrowDownAlt,
+    pepIconSystemBin,
+    pepIconNumberPlus
+];
+class PepDataViewBuilderModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        this.pepIconRegistry.registerIcons(pepIcons);
+    }
+}
+PepDataViewBuilderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepDataViewBuilderModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+PepDataViewBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepDataViewBuilderModule, declarations: [DataViewBuilderComponent, MenuDataViewComponent], imports: [CommonModule,
+        DragDropModule,
+        MatIconModule,
+        PepNgxLibModule,
+        PepButtonModule,
+        PepDialogModule,
+        PepIconModule,
+        PepMenuModule,
+        PepPageLayoutModule,
+        PepTextboxModule,
+        PepTopBarModule,
+        PepDraggableItemsModule], exports: [DataViewBuilderComponent] });
+PepDataViewBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepDataViewBuilderModule, providers: [DataViewBuilderService], imports: [[
+            CommonModule,
+            DragDropModule,
+            MatIconModule,
+            PepNgxLibModule,
+            PepButtonModule,
+            PepDialogModule,
+            PepIconModule,
+            PepMenuModule,
+            PepPageLayoutModule,
+            PepTextboxModule,
+            PepTopBarModule,
+            PepDraggableItemsModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepDataViewBuilderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DataViewBuilderComponent, MenuDataViewComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        DragDropModule,
+                        MatIconModule,
+                        PepNgxLibModule,
+                        PepButtonModule,
+                        PepDialogModule,
+                        PepIconModule,
+                        PepMenuModule,
+                        PepPageLayoutModule,
+                        PepTextboxModule,
+                        PepTopBarModule,
+                        PepDraggableItemsModule,
+                    ],
+                    exports: [DataViewBuilderComponent],
+                    providers: [DataViewBuilderService]
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.PepIconRegistry }]; } });
+
+/*
+ * Public API Surface of ngx-composite-lib/data-view-builder
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DataViewBuilderComponent, PepDataViewBuilderModule };
+//# sourceMappingURL=pepperi-addons-ngx-composite-lib-data-view-builder.js.map

package/fesm2015/pepperi-addons-ngx-composite-lib-data-view-builder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pepperi-addons-ngx-composite-lib-data-view-builder.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":[],"mappings":"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"}

package/fesm2015/pepperi-addons-ngx-composite-lib-group-buttons-settings.js

@@ -78,7 +78,7 @@ class GroupButtonsSettingsComponent {
             case 'vertical-align': {
                 return [
                     { key: 'start', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.TOP'), callback: (event) => this.onKeyChange(event) },
-                    { key: 'center', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.MIDDLE'), callback: (event) => this.onKeyChange(event) },
+                    { key: 'middle', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.MIDDLE'), callback: (event) => this.onKeyChange(event) },
                     { key: 'end', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.BOTTOM'), callback: (event) => this.onKeyChange(event) }
                 ];
             }

package/fesm2015/pepperi-addons-ngx-composite-lib-group-buttons-settings.js.map

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-composite-lib-group-buttons-settings.js","sources":["../../../projects/ngx-composite-lib/group-buttons-settings/group-buttons-settings.component.ts","../../../projects/ngx-composite-lib/group-buttons-settings/group-buttons-settings.component.html","../../../projects/ngx-composite-lib/group-buttons-settings/group-buttons-settings.module.ts","../../../projects/ngx-composite-lib/group-buttons-settings/public-api.ts","../../../projects/ngx-composite-lib/group-buttons-settings/pepperi-addons-ngx-composite-lib-group-buttons-settings.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { TranslateService } from '@ngx-translate/core';\nimport { PepSizeType } from '@pepperi-addons/ngx-lib';\nimport { IPepButtonClickEvent, PepButton } from '@pepperi-addons/ngx-lib/button';\nimport { PepGroupbuttonsTypes } from './group-buttons-settings.model';\n\n@Component({\n    selector: 'pep-group-buttons-settings',\n    templateUrl: './group-buttons-settings.component.html',\n    styleUrls: ['./group-buttons-settings.component.scss']\n})\nexport class GroupButtonsSettingsComponent implements OnInit {\n\n    @Input() header = '';\n    @Input() subHeader = '';\n\n    @Input() groupType: PepGroupbuttonsTypes = 'sizes'; \n    @Input() btnsArray: Array<PepButton> = [];\n    @Input() excludeKeys: Array<string> = []; // for example ['xs','xl']\n\n    @Input() useNone = false;\n    @Input() disabled = false;\n    @Input() dir: 'rtl' | 'ltr' = 'ltr';\n    \n    private _btnKey: any;\n    @Input()\n    set btnKey(value: any) {\n        if (!value) {\n            this._btnKey = '';\n        } else {\n            this._btnKey = value;\n        }\n    }\n    get btnKey(): any {\n        return this._btnKey;\n    }\n\n    @Output()\n    btnkeyChange: EventEmitter<IPepButtonClickEvent> = new EventEmitter<IPepButtonClickEvent>();\n    \n    \n    none: PepButton = {key: 'none'};\n    \n    sizes: Array<PepButton> = [];\n    \n    // pepB: PepSizeType | 'none' = \"xs\";\n\n    constructor(\n        private translate: TranslateService,\n    ) {\n    }\n\n    ngOnInit(): void { \n        // Get the first translation for load all translations.\n        this.translate.get('SHADOW_SETTINGS.INTENSITY_SOFT').toPromise().then((typeSoft) => {\n            \n            this.none = { key: 'none', value: this.translate.instant('GENERAL.NONE'), callback: () => this.onKeyChange(null) };\n            \n            this.arrayMerge();\n        });\n    }\n\n    arrayMerge(){\n\n        this.btnsArray = this.getButtonsArray();\n        \n        // check if need to remove items from the buttons array\n        if(this.excludeKeys){\n            this.btnsArray = this.btnsArray.filter(i => !this.excludeKeys.find(f => f === i.key));\n        }\n        // check if need to add the None button\n        if(this.useNone){\n            this.btnsArray = [this.none].concat(this.btnsArray);\n        }\n    }\n\n    onKeyChange(event: IPepButtonClickEvent | null) {\n        this.btnKey = event?.source?.key || 'none';\n        this.btnkeyChange.emit(this.btnKey);\n    }\n\n    getButtonsArray() {\n        switch(this.groupType){\n            case 'custom':{\n                return this.btnsArray;\n            }\n            case 'sizes':{\n                return [\n                    { key: 'xs', value: this.translate.instant('GENERAL.XS'), callback: (event: any) => this.onKeyChange(event) },\n                    { key: 'sm', value: this.translate.instant('GENERAL.SM'), callback: (event: any) => this.onKeyChange(event) },\n                    { key: 'md', value: this.translate.instant('GENERAL.MD'), callback: (event: any) => this.onKeyChange(event) },\n                    { key: 'lg', value: this.translate.instant('GENERAL.LG'), callback: (event: any) => this.onKeyChange(event) },\n                    { key: 'xl', value: this.translate.instant('GENERAL.XL'), callback: (event: any) => this.onKeyChange(event) }\n                ];\n            }\n            case 'vertical-align':{\n                return [\n                    { key: 'start', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.TOP'), callback: (event: IPepButtonClickEvent) => this.onKeyChange(event) },\n                    { key: 'center', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.MIDDLE'), callback: (event: IPepButtonClickEvent) => this.onKeyChange(event) },\n                    { key: 'end', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.BOTTOM'), callback: (event: IPepButtonClickEvent) => this.onKeyChange(event) }\n                ];\n            }\n            case 'horizontal-align': {\n                return [\n                    { key: 'left', iconName: 'text_align_right', callback: (event: any) => this.onKeyChange(event) },\n                    { key: 'center', iconName: 'text_align_center', callback: (event: any) => this.onKeyChange(event) },\n                    { key: 'right', iconName: 'text_align_left', callback: (event: any) => this.onKeyChange(event) },\n                ];\n            }\n            case 'font-weight':{\n                return [\n                    { key: 'normal', value: this.translate.instant('GENERAL.FONT_WEIGHT.NORMAL'), callback: (event: any) => this.onKeyChange(event) },\n                    { key: 'bold', value: this.translate.instant('GENERAL.FONT_WEIGHT.BOLD'), callback: (event: any) => this.onKeyChange(event) },\n                    { key: 'bolder', value: this.translate.instant('GENERAL.FONT_WEIGHT.BOLDER'), callback: (event: any) => this.onKeyChange(event) }\n                ]\n            }\n            case 'width-sizes':{\n                return [\n                        { key: 'narrow', value: this.translate.instant('GENERAL.WIDTH_SIZE.NARROW'), callback: (event: any) => this.onKeyChange(event) },\n                        { key: 'regular', value: this.translate.instant('GENERAL.WIDTH_SIZE.REGULAR'), callback: (event: any) => this.onKeyChange(event) },\n                        { key: 'wide', value: this.translate.instant('GENERAL.WIDTH_SIZE.WIDE'), callback: (event: any) => this.onKeyChange(event) }\n                ];\n            }\n\n            default: {\n                return [];\n            }\n        }\n    }\n}\n","<label *ngIf=\"header != ''\" class=\"body-xl bold ellipsis\">{{header}}</label>\n<pep-field-title *ngIf=\"subHeader !=''\" [label]=\"subHeader\" [disabled]=\"disabled\" [xAlignment]=\"dir === 'rtl' ? 'right' : 'left'\"></pep-field-title>\n<pep-group-buttons [buttons]=\"btnsArray\" \n                   [selectedButtonKey]=\"btnKey\" \n                   [stretch]=\"true\" \n                   buttonsClass=\"md regular\" \n                   [buttonsDisabled]=\"disabled\" \n                   viewType=\"toggle\">\n</pep-group-buttons>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { GroupButtonsSettingsComponent } from './group-buttons-settings.component';\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepGroupButtonsModule } from '@pepperi-addons/ngx-lib/group-buttons';\nimport { PepIconRegistry, pepIconTextAlignCenter, pepIconTextAlignLeft, pepIconTextAlignRight } from '@pepperi-addons/ngx-lib/icon';\n\nconst pepIcons = [\n    pepIconTextAlignCenter, \n    pepIconTextAlignLeft, \n    pepIconTextAlignRight\n]\n\n@NgModule({\n    declarations: [\n        GroupButtonsSettingsComponent\n    ],\n    imports: [\n        CommonModule,\n        PepNgxLibModule,\n        PepFieldTitleModule,\n        PepGroupButtonsModule,\n    ],\n    exports: [GroupButtonsSettingsComponent]\n})\nexport class PepGroupButtonsSettingsModule { \n    constructor(\n        private pepIconRegistry: PepIconRegistry,\n    ) {\n        this.pepIconRegistry.registerIcons(pepIcons);\n    }\n}\n","/*\n * Public API Surface of ngx-composite-lib/shadow-settings\n */\nexport * from './group-buttons-settings.module';\nexport * from './group-buttons-settings.component';\nexport * from './group-buttons-settings.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"pepperi-addons-ngx-composite-lib-group-buttons-settings.js","sources":["../../../projects/ngx-composite-lib/group-buttons-settings/group-buttons-settings.component.ts","../../../projects/ngx-composite-lib/group-buttons-settings/group-buttons-settings.component.html","../../../projects/ngx-composite-lib/group-buttons-settings/group-buttons-settings.module.ts","../../../projects/ngx-composite-lib/group-buttons-settings/public-api.ts","../../../projects/ngx-composite-lib/group-buttons-settings/pepperi-addons-ngx-composite-lib-group-buttons-settings.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { TranslateService } from '@ngx-translate/core';\nimport { PepSizeType } from '@pepperi-addons/ngx-lib';\nimport { IPepButtonClickEvent, PepButton } from '@pepperi-addons/ngx-lib/button';\nimport { PepGroupbuttonsTypes } from './group-buttons-settings.model';\n\n@Component({\n    selector: 'pep-group-buttons-settings',\n    templateUrl: './group-buttons-settings.component.html',\n    styleUrls: ['./group-buttons-settings.component.scss']\n})\nexport class GroupButtonsSettingsComponent implements OnInit {\n\n    @Input() header = '';\n    @Input() subHeader = '';\n\n    @Input() groupType: PepGroupbuttonsTypes = 'sizes'; \n    @Input() btnsArray: Array<PepButton> = [];\n    @Input() excludeKeys: Array<string> = []; // for example ['xs','xl']\n\n    @Input() useNone = false;\n    @Input() disabled = false;\n    @Input() dir: 'rtl' | 'ltr' = 'ltr';\n    \n    private _btnKey: any;\n    @Input()\n    set btnKey(value: any) {\n        if (!value) {\n            this._btnKey = '';\n        } else {\n            this._btnKey = value;\n        }\n    }\n    get btnKey(): any {\n        return this._btnKey;\n    }\n\n    @Output()\n    btnkeyChange: EventEmitter<IPepButtonClickEvent> = new EventEmitter<IPepButtonClickEvent>();\n    \n    \n    none: PepButton = {key: 'none'};\n    \n    sizes: Array<PepButton> = [];\n    \n    // pepB: PepSizeType | 'none' = \"xs\";\n\n    constructor(\n        private translate: TranslateService,\n    ) {\n    }\n\n    ngOnInit(): void { \n        // Get the first translation for load all translations.\n        this.translate.get('SHADOW_SETTINGS.INTENSITY_SOFT').toPromise().then((typeSoft) => {\n            \n            this.none = { key: 'none', value: this.translate.instant('GENERAL.NONE'), callback: () => this.onKeyChange(null) };\n            \n            this.arrayMerge();\n        });\n    }\n\n    arrayMerge(){\n\n        this.btnsArray = this.getButtonsArray();\n        \n        // check if need to remove items from the buttons array\n        if(this.excludeKeys){\n            this.btnsArray = this.btnsArray.filter(i => !this.excludeKeys.find(f => f === i.key));\n        }\n        // check if need to add the None button\n        if(this.useNone){\n            this.btnsArray = [this.none].concat(this.btnsArray);\n        }\n    }\n\n    onKeyChange(event: IPepButtonClickEvent | null) {\n        this.btnKey = event?.source?.key || 'none';\n        this.btnkeyChange.emit(this.btnKey);\n    }\n\n    getButtonsArray() {\n        switch(this.groupType){\n            case 'custom':{\n                return this.btnsArray;\n            }\n            case 'sizes':{\n                return [\n                    { key: 'xs', value: this.translate.instant('GENERAL.XS'), callback: (event: any) => this.onKeyChange(event) },\n                    { key: 'sm', value: this.translate.instant('GENERAL.SM'), callback: (event: any) => this.onKeyChange(event) },\n                    { key: 'md', value: this.translate.instant('GENERAL.MD'), callback: (event: any) => this.onKeyChange(event) },\n                    { key: 'lg', value: this.translate.instant('GENERAL.LG'), callback: (event: any) => this.onKeyChange(event) },\n                    { key: 'xl', value: this.translate.instant('GENERAL.XL'), callback: (event: any) => this.onKeyChange(event) }\n                ];\n            }\n            case 'vertical-align':{\n                return [\n                    { key: 'start', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.TOP'), callback: (event: IPepButtonClickEvent) => this.onKeyChange(event) },\n                    { key: 'middle', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.MIDDLE'), callback: (event: IPepButtonClickEvent) => this.onKeyChange(event) },\n                    { key: 'end', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.BOTTOM'), callback: (event: IPepButtonClickEvent) => this.onKeyChange(event) }\n                ];\n            }\n            case 'horizontal-align': {\n                return [\n                    { key: 'left', iconName: 'text_align_right', callback: (event: any) => this.onKeyChange(event) },\n                    { key: 'center', iconName: 'text_align_center', callback: (event: any) => this.onKeyChange(event) },\n                    { key: 'right', iconName: 'text_align_left', callback: (event: any) => this.onKeyChange(event) },\n                ];\n            }\n            case 'font-weight':{\n                return [\n                    { key: 'normal', value: this.translate.instant('GENERAL.FONT_WEIGHT.NORMAL'), callback: (event: any) => this.onKeyChange(event) },\n                    { key: 'bold', value: this.translate.instant('GENERAL.FONT_WEIGHT.BOLD'), callback: (event: any) => this.onKeyChange(event) },\n                    { key: 'bolder', value: this.translate.instant('GENERAL.FONT_WEIGHT.BOLDER'), callback: (event: any) => this.onKeyChange(event) }\n                ]\n            }\n            case 'width-sizes':{\n                return [\n                        { key: 'narrow', value: this.translate.instant('GENERAL.WIDTH_SIZE.NARROW'), callback: (event: any) => this.onKeyChange(event) },\n                        { key: 'regular', value: this.translate.instant('GENERAL.WIDTH_SIZE.REGULAR'), callback: (event: any) => this.onKeyChange(event) },\n                        { key: 'wide', value: this.translate.instant('GENERAL.WIDTH_SIZE.WIDE'), callback: (event: any) => this.onKeyChange(event) }\n                ];\n            }\n\n            default: {\n                return [];\n            }\n        }\n    }\n}\n","<label *ngIf=\"header != ''\" class=\"body-xl bold ellipsis\">{{header}}</label>\n<pep-field-title *ngIf=\"subHeader !=''\" [label]=\"subHeader\" [disabled]=\"disabled\" [xAlignment]=\"dir === 'rtl' ? 'right' : 'left'\"></pep-field-title>\n<pep-group-buttons [buttons]=\"btnsArray\" \n                   [selectedButtonKey]=\"btnKey\" \n                   [stretch]=\"true\" \n                   buttonsClass=\"md regular\" \n                   [buttonsDisabled]=\"disabled\" \n                   viewType=\"toggle\">\n</pep-group-buttons>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { GroupButtonsSettingsComponent } from './group-buttons-settings.component';\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepGroupButtonsModule } from '@pepperi-addons/ngx-lib/group-buttons';\nimport { PepIconRegistry, pepIconTextAlignCenter, pepIconTextAlignLeft, pepIconTextAlignRight } from '@pepperi-addons/ngx-lib/icon';\n\nconst pepIcons = [\n    pepIconTextAlignCenter, \n    pepIconTextAlignLeft, \n    pepIconTextAlignRight\n]\n\n@NgModule({\n    declarations: [\n        GroupButtonsSettingsComponent\n    ],\n    imports: [\n        CommonModule,\n        PepNgxLibModule,\n        PepFieldTitleModule,\n        PepGroupButtonsModule,\n    ],\n    exports: [GroupButtonsSettingsComponent]\n})\nexport class PepGroupButtonsSettingsModule { \n    constructor(\n        private pepIconRegistry: PepIconRegistry,\n    ) {\n        this.pepIconRegistry.registerIcons(pepIcons);\n    }\n}\n","/*\n * Public API Surface of ngx-composite-lib/shadow-settings\n */\nexport * from './group-buttons-settings.module';\nexport * from './group-buttons-settings.component';\nexport * from './group-buttons-settings.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2015/pepperi-addons-ngx-composite-lib.js

@@ -30,14 +30,16 @@ class PepResetConfigurationFieldDirective {
     }
     set disabled(value) {
         this._disabled = value;
-        this.renderer.setStyle(this.buttonContainer, 'visibility', this.getVisibility());
+        // this.renderer.setStyle(this.buttonContainer, 'visibility', this.getVisibility());
+        this.setButtonStyle(this.resetButton);
     }
     get disabled() {
         return this._disabled;
     }
     set hideReset(value) {
         this._hideReset = value;
-        this.renderer.setStyle(this.buttonContainer, 'visibility', this.getVisibility());
+        // this.renderer.setStyle(this.buttonContainer, 'visibility', this.getVisibility());
+        this.setButtonStyle(this.resetButton);
     }
     get hideReset() {
         return this._hideReset;
@@ -65,17 +67,19 @@ class PepResetConfigurationFieldDirective {
         this.buttonContainer.setAttribute("style", css);
     }
     setButtonStyle(button) {
-        const css = `
-            display: flex !important;
-            align-items: center !important;
-            height: 1rem !important;
-            line-height: unset !important;
-            padding: unset !important;
-            background: unset !important;
-            font-size: var(--pep-button-2xs-font-size) !important;
-            visibility: ${this.getVisibility()};
-        `;
-        button.setAttribute("style", css);
+        if (button) {
+            const css = `
+                display: flex !important;
+                align-items: center !important;
+                height: 1rem !important;
+                line-height: unset !important;
+                padding: unset !important;
+                background: unset !important;
+                font-size: var(--pep-button-2xs-font-size) !important;
+                visibility: ${this.getVisibility()};
+            `;
+            button.setAttribute("style", css);
+        }
     }
     setSvgStyle(svg) {
         const css = `
@@ -89,20 +93,20 @@ class PepResetConfigurationFieldDirective {
             this.setButtonContainerStyle();
             this.renderer.addClass(this.buttonContainer, 'pep-reset-configuration-field-container');
             // Append button
-            const button = this.renderer.createElement('button');
+            this.resetButton = this.renderer.createElement('button');
             yield this.translate.get('ACTIONS.RESET').toPromise().then(resetText => {
                 const buttonText = this.renderer.createText(resetText);
-                this.renderer.appendChild(button, buttonText);
+                this.renderer.appendChild(this.resetButton, buttonText);
             });
-            this.renderer.addClass(button, 'pep-button');
+            this.renderer.addClass(this.resetButton, 'pep-button');
             // this.renderer.addClass(button, this.styleType);
             // this.renderer.addClass(button, this.styleStateType);
-            this.renderer.addClass(button, 'color-link');
-            this.renderer.addClass(button, this.sizeType);
-            this.setButtonStyle(button);
+            this.renderer.addClass(this.resetButton, 'color-link');
+            this.renderer.addClass(this.resetButton, this.sizeType);
+            this.setButtonStyle(this.resetButton);
             // this.renderer.addClass(button, 'reset-configuration-field-button');
-            this.unlistener = this.renderer.listen(button, 'click', () => this.onResetClicked());
-            this.renderer.appendChild(this.buttonContainer, button);
+            this.unlistener = this.renderer.listen(this.resetButton, 'click', () => this.onResetClicked());
+            this.renderer.appendChild(this.buttonContainer, this.resetButton);
             // Append svg
             const svgIcon = this.pepIconService.getSvgIcon(pepIconDeviceResponsive.name);
             this.setSvgStyle(svgIcon);