@ngx-dynamic-components/tools
Version:
@ngx-dynamic-components/tools is Angular 7+ library what contains a core interfaces to build a configuration driven web pages.
100 lines • 14.5 kB
JavaScript
import { Component, Input, HostListener, ViewChild, EventEmitter, Output } from '@angular/core';
import { CoreService } from '@ngx-dynamic-components/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/button";
import * as i3 from "@angular/material/icon";
import * as i4 from "@angular/material/tooltip";
import * as i5 from "@angular/material/input";
import * as i6 from "@angular/material/form-field";
export class PropertiesEditorComponent {
uiModel;
editorContainer;
editBtn;
updatedProperty = new EventEmitter();
itemProperties = [];
properties = [];
showEditor = false;
get positionClass() {
// eslint-disable-next-line no-underscore-dangle
const btnPos = this.editBtn._elementRef.nativeElement.getBoundingClientRect().right;
const docWidth = document.body.offsetWidth;
return docWidth - btnPos < 200 ? 'left' : '';
}
onClick(targetElement) {
if (this.editorContainer) {
const clickedInside = this.editorContainer.nativeElement.contains(targetElement);
// eslint-disable-next-line no-underscore-dangle
if (!clickedInside && this.editBtn._elementRef.nativeElement.contains(targetElement)) {
// Clicked on button.
const itemProps = this.uiModel.itemProperties || {};
this.properties = this.itemProperties.map(({ name }) => {
let value = itemProps[name];
if (value === undefined) {
value = '';
}
else if (typeof value === 'object') {
value = JSON.stringify(value);
}
return { name, value };
});
this.showEditor = true;
}
else if (!clickedInside) {
// Clicked outside.
this.showEditor = false;
this.updatedProperty.emit();
}
}
}
ngOnInit() {
this.itemProperties = CoreService.getComponentProperties(this.uiModel.type);
}
updateProperty(evt, prop) {
try {
// If property value is an object or an array.
this.uiModel.itemProperties[prop] = JSON.parse(evt.target.value);
}
catch {
this.uiModel.itemProperties[prop] = evt.target.value;
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PropertiesEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: PropertiesEditorComponent, selector: "dc-properties-editor", inputs: { uiModel: "uiModel" }, outputs: { updatedProperty: "updatedProperty" }, host: { listeners: { "document:click": "onClick($event.target)" } }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true }, { propertyName: "editBtn", first: true, predicate: ["editBtn"], descendants: true }], ngImport: i0, template: `
<button mat-icon-button matTooltip="Edit properties" (click)="showEditor = true" #editBtn>
<mat-icon>edit</mat-icon>
</button>
<div class="editor-container" #editorContainer fxLayout="column" *ngIf="showEditor" [ngClass]="positionClass">
<mat-form-field *ngFor="let property of properties">
<input matInput [placeholder]="property.name" [value]="property.value" (input)="updateProperty($event, property.name)">
</mat-form-field>
</div>
`, isInline: true, styles: [".editor-container{position:absolute;background:white;top:0;left:40px;z-index:3;padding:10px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.editor-container.left{left:-200px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PropertiesEditorComponent, decorators: [{
type: Component,
args: [{ selector: 'dc-properties-editor', template: `
<button mat-icon-button matTooltip="Edit properties" (click)="showEditor = true" #editBtn>
<mat-icon>edit</mat-icon>
</button>
<div class="editor-container" #editorContainer fxLayout="column" *ngIf="showEditor" [ngClass]="positionClass">
<mat-form-field *ngFor="let property of properties">
<input matInput [placeholder]="property.name" [value]="property.value" (input)="updateProperty($event, property.name)">
</mat-form-field>
</div>
`, styles: [".editor-container{position:absolute;background:white;top:0;left:40px;z-index:3;padding:10px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.editor-container.left{left:-200px}\n"] }]
}], propDecorators: { uiModel: [{
type: Input
}], editorContainer: [{
type: ViewChild,
args: ['editorContainer']
}], editBtn: [{
type: ViewChild,
args: ['editBtn']
}], updatedProperty: [{
type: Output
}], onClick: [{
type: HostListener,
args: ['document:click', ['$event.target']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvcGVydGllcy1lZGl0b3IuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdG9vbHMvc3JjL2xpYi9jb21wb25lbnRzL3Byb3BlcnRpZXMtZWRpdG9yL3Byb3BlcnRpZXMtZWRpdG9yLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxZQUFZLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFDeEcsT0FBTyxFQUFtQixXQUFXLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQzs7Ozs7Ozs7QUFtQzVFLE1BQU0sT0FBTyx5QkFBeUI7SUFFcEMsT0FBTyxDQUFVO0lBR2pCLGVBQWUsQ0FBYTtJQUc1QixPQUFPLENBQVk7SUFHbkIsZUFBZSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7SUFFckMsY0FBYyxHQUFzQixFQUFFLENBQUM7SUFDdkMsVUFBVSxHQUFHLEVBQUUsQ0FBQztJQUVoQixVQUFVLEdBQUcsS0FBSyxDQUFDO0lBRW5CLElBQUksYUFBYTtRQUNmLGdEQUFnRDtRQUNoRCxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUMscUJBQXFCLEVBQUUsQ0FBQyxLQUFLLENBQUM7UUFDcEYsTUFBTSxRQUFRLEdBQUcsUUFBUSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUM7UUFDM0MsT0FBTyxRQUFRLEdBQUcsTUFBTSxHQUFHLEdBQUcsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7SUFDL0MsQ0FBQztJQUdELE9BQU8sQ0FBQyxhQUFhO1FBQ25CLElBQUksSUFBSSxDQUFDLGVBQWUsRUFBRTtZQUN4QixNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsZUFBZSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsYUFBYSxDQUFDLENBQUM7WUFDakYsZ0RBQWdEO1lBQ2hELElBQUksQ0FBQyxhQUFhLElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsRUFBRTtnQkFDcEYscUJBQXFCO2dCQUNyQixNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLGNBQWMsSUFBSSxFQUFFLENBQUM7Z0JBQ3BELElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFDLElBQUksRUFBQyxFQUFFLEVBQUU7b0JBQ25ELElBQUksS0FBSyxHQUFHLFNBQVMsQ0FBQyxJQUFJLENBQUMsQ0FBQztvQkFDNUIsSUFBSSxLQUFLLEtBQUssU0FBUyxFQUFFO3dCQUN2QixLQUFLLEdBQUcsRUFBRSxDQUFDO3FCQUNaO3lCQUFNLElBQUksT0FBTyxLQUFLLEtBQUssUUFBUSxFQUFFO3dCQUNwQyxLQUFLLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLLENBQUMsQ0FBQztxQkFDL0I7b0JBQ0QsT0FBTyxFQUFDLElBQUksRUFBRSxLQUFLLEVBQUMsQ0FBQztnQkFDdkIsQ0FBQyxDQUFDLENBQUM7Z0JBQ0gsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUM7YUFDeEI7aUJBQU0sSUFBSSxDQUFDLGFBQWEsRUFBRTtnQkFDekIsbUJBQW1CO2dCQUNuQixJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztnQkFDeEIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLEVBQUUsQ0FBQzthQUM3QjtTQUNGO0lBQ0gsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsY0FBYyxHQUFHLFdBQVcsQ0FBQyxzQkFBc0IsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQzlFLENBQUM7SUFFRCxjQUFjLENBQUMsR0FBRyxFQUFFLElBQUk7UUFDdEIsSUFBSTtZQUNGLDhDQUE4QztZQUM5QyxJQUFJLENBQUMsT0FBTyxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDbEU7UUFBQyxNQUFNO1lBQ04sSUFBSSxDQUFDLE9BQU8sQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLEdBQUcsR0FBRyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUM7U0FDdEQ7SUFDSCxDQUFDO3VHQTlEVSx5QkFBeUI7MkZBQXpCLHlCQUF5QiwyWkE1QjFCOzs7Ozs7Ozs7R0FTVDs7MkZBbUJVLHlCQUF5QjtrQkE5QnJDLFNBQVM7K0JBQ0Usc0JBQXNCLFlBQ3RCOzs7Ozs7Ozs7R0FTVDs4QkFxQkQsT0FBTztzQkFETixLQUFLO2dCQUlOLGVBQWU7c0JBRGQsU0FBUzt1QkFBQyxpQkFBaUI7Z0JBSTVCLE9BQU87c0JBRE4sU0FBUzt1QkFBQyxTQUFTO2dCQUlwQixlQUFlO3NCQURkLE1BQU07Z0JBZ0JQLE9BQU87c0JBRE4sWUFBWTt1QkFBQyxnQkFBZ0IsRUFBRSxDQUFDLGVBQWUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIEhvc3RMaXN0ZW5lciwgVmlld0NoaWxkLCBFdmVudEVtaXR0ZXIsIE91dHB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFVJTW9kZWxQcm9wZXJ0eSwgQ29yZVNlcnZpY2UgfSBmcm9tICdAbmd4LWR5bmFtaWMtY29tcG9uZW50cy9jb3JlJztcclxuaW1wb3J0IHR5cGUgeyBFbGVtZW50UmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB0eXBlIHsgTWF0QnV0dG9uIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvYnV0dG9uJztcclxuaW1wb3J0IHR5cGUgeyBVSU1vZGVsIH0gZnJvbSAnQG5neC1keW5hbWljLWNvbXBvbmVudHMvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2RjLXByb3BlcnRpZXMtZWRpdG9yJyxcclxuICB0ZW1wbGF0ZTogYFxyXG4gICAgPGJ1dHRvbiBtYXQtaWNvbi1idXR0b24gbWF0VG9vbHRpcD1cIkVkaXQgcHJvcGVydGllc1wiIChjbGljayk9XCJzaG93RWRpdG9yID0gdHJ1ZVwiICNlZGl0QnRuPlxyXG4gICAgICA8bWF0LWljb24+ZWRpdDwvbWF0LWljb24+XHJcbiAgICA8L2J1dHRvbj5cclxuICAgIDxkaXYgY2xhc3M9XCJlZGl0b3ItY29udGFpbmVyXCIgI2VkaXRvckNvbnRhaW5lciBmeExheW91dD1cImNvbHVtblwiICpuZ0lmPVwic2hvd0VkaXRvclwiIFtuZ0NsYXNzXT1cInBvc2l0aW9uQ2xhc3NcIj5cclxuICAgICAgPG1hdC1mb3JtLWZpZWxkICpuZ0Zvcj1cImxldCBwcm9wZXJ0eSBvZiBwcm9wZXJ0aWVzXCI+XHJcbiAgICAgICAgPGlucHV0IG1hdElucHV0IFtwbGFjZWhvbGRlcl09XCJwcm9wZXJ0eS5uYW1lXCIgW3ZhbHVlXT1cInByb3BlcnR5LnZhbHVlXCIgKGlucHV0KT1cInVwZGF0ZVByb3BlcnR5KCRldmVudCwgcHJvcGVydHkubmFtZSlcIj5cclxuICAgICAgPC9tYXQtZm9ybS1maWVsZD5cclxuICAgIDwvZGl2PlxyXG4gIGAsXHJcbiAgc3R5bGVzOiBbYFxyXG4gICAgLmVkaXRvci1jb250YWluZXIge1xyXG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XHJcbiAgICAgIGJhY2tncm91bmQ6IHdoaXRlO1xyXG4gICAgICB0b3A6IDA7XHJcbiAgICAgIGxlZnQ6IDQwcHg7XHJcbiAgICAgIHotaW5kZXg6IDM7XHJcbiAgICAgIHBhZGRpbmc6IDEwcHg7XHJcbiAgICAgIGJveC1zaGFkb3c6IDAgNXB4IDVweCAtM3B4IHJnYmEoMCwgMCwgMCwgMC4yKSxcclxuICAgICAgICAgICAgICAwIDhweCAxMHB4IDFweCByZ2JhKDAsIDAsIDAsIDAuMTQpLFxyXG4gICAgICAgICAgICAgIDAgM3B4IDE0cHggMnB4IHJnYmEoMCwgMCwgMCwgMC4xMik7XHJcblxyXG4gICAgfVxyXG4gICAgLmVkaXRvci1jb250YWluZXIubGVmdCB7XHJcbiAgICAgIGxlZnQ6IC0yMDBweDtcclxuICAgIH1cclxuICBgXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgUHJvcGVydGllc0VkaXRvckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgQElucHV0KClcclxuICB1aU1vZGVsOiBVSU1vZGVsO1xyXG5cclxuICBAVmlld0NoaWxkKCdlZGl0b3JDb250YWluZXInKVxyXG4gIGVkaXRvckNvbnRhaW5lcjogRWxlbWVudFJlZjtcclxuXHJcbiAgQFZpZXdDaGlsZCgnZWRpdEJ0bicpXHJcbiAgZWRpdEJ0bjogTWF0QnV0dG9uO1xyXG5cclxuICBAT3V0cHV0KClcclxuICB1cGRhdGVkUHJvcGVydHkgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcblxyXG4gIGl0ZW1Qcm9wZXJ0aWVzOiBVSU1vZGVsUHJvcGVydHlbXSA9IFtdO1xyXG4gIHByb3BlcnRpZXMgPSBbXTtcclxuXHJcbiAgc2hvd0VkaXRvciA9IGZhbHNlO1xyXG5cclxuICBnZXQgcG9zaXRpb25DbGFzcygpOiBzdHJpbmcge1xyXG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIG5vLXVuZGVyc2NvcmUtZGFuZ2xlXHJcbiAgICBjb25zdCBidG5Qb3MgPSB0aGlzLmVkaXRCdG4uX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS5yaWdodDtcclxuICAgIGNvbnN0IGRvY1dpZHRoID0gZG9jdW1lbnQuYm9keS5vZmZzZXRXaWR0aDtcclxuICAgIHJldHVybiBkb2NXaWR0aCAtIGJ0blBvcyA8IDIwMCA/ICdsZWZ0JyA6ICcnO1xyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6Y2xpY2snLCBbJyRldmVudC50YXJnZXQnXSlcclxuICBvbkNsaWNrKHRhcmdldEVsZW1lbnQpOiB2b2lkIHtcclxuICAgIGlmICh0aGlzLmVkaXRvckNvbnRhaW5lcikge1xyXG4gICAgICBjb25zdCBjbGlja2VkSW5zaWRlID0gdGhpcy5lZGl0b3JDb250YWluZXIubmF0aXZlRWxlbWVudC5jb250YWlucyh0YXJnZXRFbGVtZW50KTtcclxuICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIG5vLXVuZGVyc2NvcmUtZGFuZ2xlXHJcbiAgICAgIGlmICghY2xpY2tlZEluc2lkZSAmJiB0aGlzLmVkaXRCdG4uX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5jb250YWlucyh0YXJnZXRFbGVtZW50KSkge1xyXG4gICAgICAgIC8vIENsaWNrZWQgb24gYnV0dG9uLlxyXG4gICAgICAgIGNvbnN0IGl0ZW1Qcm9wcyA9IHRoaXMudWlNb2RlbC5pdGVtUHJvcGVydGllcyB8fCB7fTtcclxuICAgICAgICB0aGlzLnByb3BlcnRpZXMgPSB0aGlzLml0ZW1Qcm9wZXJ0aWVzLm1hcCgoe25hbWV9KSA9PiB7XHJcbiAgICAgICAgICBsZXQgdmFsdWUgPSBpdGVtUHJvcHNbbmFtZV07XHJcbiAgICAgICAgICBpZiAodmFsdWUgPT09IHVuZGVmaW5lZCkge1xyXG4gICAgICAgICAgICB2YWx1ZSA9ICcnO1xyXG4gICAgICAgICAgfSBlbHNlIGlmICh0eXBlb2YgdmFsdWUgPT09ICdvYmplY3QnKSB7XHJcbiAgICAgICAgICAgIHZhbHVlID0gSlNPTi5zdHJpbmdpZnkodmFsdWUpO1xyXG4gICAgICAgICAgfVxyXG4gICAgICAgICAgcmV0dXJuIHtuYW1lLCB2YWx1ZX07XHJcbiAgICAgICAgfSk7XHJcbiAgICAgICAgdGhpcy5zaG93RWRpdG9yID0gdHJ1ZTtcclxuICAgICAgfSBlbHNlIGlmICghY2xpY2tlZEluc2lkZSkge1xyXG4gICAgICAgIC8vIENsaWNrZWQgb3V0c2lkZS5cclxuICAgICAgICB0aGlzLnNob3dFZGl0b3IgPSBmYWxzZTtcclxuICAgICAgICB0aGlzLnVwZGF0ZWRQcm9wZXJ0eS5lbWl0KCk7XHJcbiAgICAgIH1cclxuICAgIH1cclxuICB9XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gICAgdGhpcy5pdGVtUHJvcGVydGllcyA9IENvcmVTZXJ2aWNlLmdldENvbXBvbmVudFByb3BlcnRpZXModGhpcy51aU1vZGVsLnR5cGUpO1xyXG4gIH1cclxuXHJcbiAgdXBkYXRlUHJvcGVydHkoZXZ0LCBwcm9wKTogdm9pZCB7XHJcbiAgICB0cnkge1xyXG4gICAgICAvLyBJZiBwcm9wZXJ0eSB2YWx1ZSBpcyBhbiBvYmplY3Qgb3IgYW4gYXJyYXkuXHJcbiAgICAgIHRoaXMudWlNb2RlbC5pdGVtUHJvcGVydGllc1twcm9wXSA9IEpTT04ucGFyc2UoZXZ0LnRhcmdldC52YWx1ZSk7XHJcbiAgICB9IGNhdGNoIHtcclxuICAgICAgdGhpcy51aU1vZGVsLml0ZW1Qcm9wZXJ0aWVzW3Byb3BdID0gZXZ0LnRhcmdldC52YWx1ZTtcclxuICAgIH1cclxuICB9XHJcbn1cclxuIl19