@apipass/inputs 1.0.130 → 1.0.132
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.
|
@@ -19,7 +19,9 @@ class InputKeyValueComponent {
|
|
|
19
19
|
inputOptionsInitSelected = null;
|
|
20
20
|
inputOptions = [];
|
|
21
21
|
set model(model) {
|
|
22
|
-
|
|
22
|
+
setTimeout(() => {
|
|
23
|
+
this.initializeModel(model);
|
|
24
|
+
}, 200);
|
|
23
25
|
}
|
|
24
26
|
get model() {
|
|
25
27
|
return this._model;
|
|
@@ -39,6 +41,7 @@ class InputKeyValueComponent {
|
|
|
39
41
|
}
|
|
40
42
|
modelChange = new EventEmitter();
|
|
41
43
|
ngOnInit() {
|
|
44
|
+
this.inputOptionsInitSelected ||= this.inputOptions?.[0]?.value;
|
|
42
45
|
this.temporaryItem = this.getNewModel();
|
|
43
46
|
if (!this.model?.length) {
|
|
44
47
|
this._model = [this.getNewModel()];
|
|
@@ -50,6 +53,9 @@ class InputKeyValueComponent {
|
|
|
50
53
|
const value = {};
|
|
51
54
|
value[this.keyField] = '';
|
|
52
55
|
value[this.valueField] = '';
|
|
56
|
+
if (this.inputOptions?.length > 0 && this.inputOptionsInitSelected) {
|
|
57
|
+
value.type = this.inputOptionsInitSelected;
|
|
58
|
+
}
|
|
53
59
|
return value;
|
|
54
60
|
}
|
|
55
61
|
onChangeValues(last) {
|
|
@@ -58,8 +64,8 @@ class InputKeyValueComponent {
|
|
|
58
64
|
this.model.push({ ...this.temporaryItem });
|
|
59
65
|
this.temporaryItem = this.getNewModel();
|
|
60
66
|
}
|
|
67
|
+
this.modelChange.emit(this.model);
|
|
61
68
|
}
|
|
62
|
-
this.modelChange.emit(this.model);
|
|
63
69
|
}
|
|
64
70
|
removeItem(index) {
|
|
65
71
|
this.model.splice(index, 1);
|
|
@@ -67,15 +73,14 @@ class InputKeyValueComponent {
|
|
|
67
73
|
}
|
|
68
74
|
inputOptionChanged(event, index) {
|
|
69
75
|
this.model[index].type = event;
|
|
70
|
-
this.modelChange.emit(this.model);
|
|
71
76
|
}
|
|
72
77
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputKeyValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
73
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: InputKeyValueComponent, selector: "input-key-value", inputs: { size: "size", keyField: "keyField", valueField: "valueField", labelKey: "labelKey", labelValue: "labelValue", removeLabel: "removeLabel", widthPercentageInputOptions: "widthPercentageInputOptions", inputOptionsInitSelected: "inputOptionsInitSelected", inputOptions: "inputOptions", model: "model" }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: "<div class=\"key-value-item\" *ngFor=\"let item of model; let last = last; let index = index\">\n <input-text\n class=\"input-key\"\n [size]=\"size\"\n [label]=\"labelKey\"\n [inputOptions]=\"inputOptions\"\n [inputOptionsInitSelected]=\"inputOptionsInitSelected\"\n [widthPercentageInputOptions]=\"widthPercentageInputOptions\"\n [(ngModel)]=\"item[keyField]\"\n (ngModelChange)=\"onChangeValues(last)\"\n (optionChanged)=\"inputOptionChanged($event, index)\">\n </input-text>\n <input-text\n class=\"input-value\"\n [size]=\"size\"\n [label]=\"labelValue\"\n [(ngModel)]=\"item[valueField]\">\n </input-text>\n <button class=\"delete-button\" [matTooltip]=\"removeLabel\" [ngClass]=\"{'delete-button-slim': size === 'SLIM'}\" type=\"button\" *ngIf=\"!last\"\n (click)=\"removeItem(index)\">\n <mat-icon>delete</mat-icon>\n </button>\n</div>\n\n", styles: [".key-value-item{display:flex;gap:10px;margin-bottom:10px;width:100%}.key-value-item .input-key{width:50%}.key-value-item .input-key ::ng-deep input{padding-left:10px!important;padding-right:10px!important}.key-value-item .input-value{width:calc(50% - 60px)}.key-value-item .input-value ::ng-deep input{padding-left:10px!important;padding-right:10px!important}.key-value-item .delete-button{display:flex;justify-content:center;align-items:center;cursor:pointer;background:#FFF;color:#c40606;border-radius:5px;border:1px solid var(--color-fonts-tertiary)}.key-value-item .delete-button.delete-button-slim{width:30px;height:30px}.key-value-item .delete-button.delete-button-slim ::ng-deep .mat-icon{width:auto!important;height:auto!important;font-size:22px!important;margin-left:-2.5px;padding:0!important}\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: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "component", type: i5.InputTextComponent, selector: "input-text", inputs: ["label", "disabled", "iconSuffix", "iconPrefix", "autoComplete", "size", "debounceTime", "widthPercentageInputOptions", "inputOptions", "inputOptionsInitSelected"], outputs: ["suffixIconClick", "prefixIconClick", "onDebounce", "optionChanged"] }] });
|
|
78
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: InputKeyValueComponent, selector: "input-key-value", inputs: { size: "size", keyField: "keyField", valueField: "valueField", labelKey: "labelKey", labelValue: "labelValue", removeLabel: "removeLabel", widthPercentageInputOptions: "widthPercentageInputOptions", inputOptionsInitSelected: "inputOptionsInitSelected", inputOptions: "inputOptions", model: "model" }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: "<div class=\"key-value-item\" *ngFor=\"let item of model; let last = last; let index = index\">\n <input-text\n class=\"input-key\"\n [size]=\"size\"\n [label]=\"labelKey\"\n [inputOptions]=\"inputOptions\"\n [inputOptionsInitSelected]=\"item.type ? item.type : inputOptionsInitSelected\"\n [widthPercentageInputOptions]=\"widthPercentageInputOptions\"\n [(ngModel)]=\"item[keyField]\"\n (ngModelChange)=\"onChangeValues(last)\"\n (optionChanged)=\"inputOptionChanged($event, index)\">\n </input-text>\n <input-text\n class=\"input-value\"\n [size]=\"size\"\n [label]=\"labelValue\"\n [(ngModel)]=\"item[valueField]\">\n </input-text>\n <button class=\"delete-button\" [matTooltip]=\"removeLabel\" [ngClass]=\"{'delete-button-slim': size === 'SLIM'}\" type=\"button\" *ngIf=\"!last\"\n (click)=\"removeItem(index)\">\n <mat-icon>delete</mat-icon>\n </button>\n</div>\n\n", styles: [".key-value-item{display:flex;gap:10px;margin-bottom:10px;width:100%}.key-value-item .input-key{width:50%}.key-value-item .input-key ::ng-deep input{padding-left:10px!important;padding-right:10px!important}.key-value-item .input-value{width:calc(50% - 60px)}.key-value-item .input-value ::ng-deep input{padding-left:10px!important;padding-right:10px!important}.key-value-item .delete-button{display:flex;justify-content:center;align-items:center;cursor:pointer;background:#FFF;color:#c40606;border-radius:5px;border:1px solid var(--color-fonts-tertiary)}.key-value-item .delete-button.delete-button-slim{width:30px;height:30px}.key-value-item .delete-button.delete-button-slim ::ng-deep .mat-icon{width:auto!important;height:auto!important;font-size:22px!important;margin-left:-2.5px;padding:0!important}\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: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "component", type: i5.InputTextComponent, selector: "input-text", inputs: ["label", "disabled", "iconSuffix", "iconPrefix", "autoComplete", "size", "debounceTime", "widthPercentageInputOptions", "inputOptions", "inputOptionsInitSelected"], outputs: ["suffixIconClick", "prefixIconClick", "onDebounce", "optionChanged"] }] });
|
|
74
79
|
}
|
|
75
80
|
export { InputKeyValueComponent };
|
|
76
81
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputKeyValueComponent, decorators: [{
|
|
77
82
|
type: Component,
|
|
78
|
-
args: [{ selector: 'input-key-value', template: "<div class=\"key-value-item\" *ngFor=\"let item of model; let last = last; let index = index\">\n <input-text\n class=\"input-key\"\n [size]=\"size\"\n [label]=\"labelKey\"\n [inputOptions]=\"inputOptions\"\n [inputOptionsInitSelected]=\"inputOptionsInitSelected\"\n [widthPercentageInputOptions]=\"widthPercentageInputOptions\"\n [(ngModel)]=\"item[keyField]\"\n (ngModelChange)=\"onChangeValues(last)\"\n (optionChanged)=\"inputOptionChanged($event, index)\">\n </input-text>\n <input-text\n class=\"input-value\"\n [size]=\"size\"\n [label]=\"labelValue\"\n [(ngModel)]=\"item[valueField]\">\n </input-text>\n <button class=\"delete-button\" [matTooltip]=\"removeLabel\" [ngClass]=\"{'delete-button-slim': size === 'SLIM'}\" type=\"button\" *ngIf=\"!last\"\n (click)=\"removeItem(index)\">\n <mat-icon>delete</mat-icon>\n </button>\n</div>\n\n", styles: [".key-value-item{display:flex;gap:10px;margin-bottom:10px;width:100%}.key-value-item .input-key{width:50%}.key-value-item .input-key ::ng-deep input{padding-left:10px!important;padding-right:10px!important}.key-value-item .input-value{width:calc(50% - 60px)}.key-value-item .input-value ::ng-deep input{padding-left:10px!important;padding-right:10px!important}.key-value-item .delete-button{display:flex;justify-content:center;align-items:center;cursor:pointer;background:#FFF;color:#c40606;border-radius:5px;border:1px solid var(--color-fonts-tertiary)}.key-value-item .delete-button.delete-button-slim{width:30px;height:30px}.key-value-item .delete-button.delete-button-slim ::ng-deep .mat-icon{width:auto!important;height:auto!important;font-size:22px!important;margin-left:-2.5px;padding:0!important}\n"] }]
|
|
83
|
+
args: [{ selector: 'input-key-value', template: "<div class=\"key-value-item\" *ngFor=\"let item of model; let last = last; let index = index\">\n <input-text\n class=\"input-key\"\n [size]=\"size\"\n [label]=\"labelKey\"\n [inputOptions]=\"inputOptions\"\n [inputOptionsInitSelected]=\"item.type ? item.type : inputOptionsInitSelected\"\n [widthPercentageInputOptions]=\"widthPercentageInputOptions\"\n [(ngModel)]=\"item[keyField]\"\n (ngModelChange)=\"onChangeValues(last)\"\n (optionChanged)=\"inputOptionChanged($event, index)\">\n </input-text>\n <input-text\n class=\"input-value\"\n [size]=\"size\"\n [label]=\"labelValue\"\n [(ngModel)]=\"item[valueField]\">\n </input-text>\n <button class=\"delete-button\" [matTooltip]=\"removeLabel\" [ngClass]=\"{'delete-button-slim': size === 'SLIM'}\" type=\"button\" *ngIf=\"!last\"\n (click)=\"removeItem(index)\">\n <mat-icon>delete</mat-icon>\n </button>\n</div>\n\n", styles: [".key-value-item{display:flex;gap:10px;margin-bottom:10px;width:100%}.key-value-item .input-key{width:50%}.key-value-item .input-key ::ng-deep input{padding-left:10px!important;padding-right:10px!important}.key-value-item .input-value{width:calc(50% - 60px)}.key-value-item .input-value ::ng-deep input{padding-left:10px!important;padding-right:10px!important}.key-value-item .delete-button{display:flex;justify-content:center;align-items:center;cursor:pointer;background:#FFF;color:#c40606;border-radius:5px;border:1px solid var(--color-fonts-tertiary)}.key-value-item .delete-button.delete-button-slim{width:30px;height:30px}.key-value-item .delete-button.delete-button-slim ::ng-deep .mat-icon{width:auto!important;height:auto!important;font-size:22px!important;margin-left:-2.5px;padding:0!important}\n"] }]
|
|
79
84
|
}], propDecorators: { size: [{
|
|
80
85
|
type: Input
|
|
81
86
|
}], keyField: [{
|
|
@@ -99,4 +104,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
|
|
|
99
104
|
}], modelChange: [{
|
|
100
105
|
type: Output
|
|
101
106
|
}] } });
|
|
102
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
107
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQta2V5LXZhbHVlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2lucHV0cy9zcmMvaW5wdXQta2V5LXZhbHVlL2lucHV0LWtleS12YWx1ZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9pbnB1dHMvc3JjL2lucHV0LWtleS12YWx1ZS9pbnB1dC1rZXktdmFsdWUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7OztBQVMvRSxNQUthLHNCQUFzQjtJQUV6QixXQUFXLENBQVU7SUFDckIsTUFBTSxDQUFxQjtJQUMzQixhQUFhLEdBQXNCLEVBQUUsQ0FBQTtJQUVwQyxJQUFJLEdBQXVCLFNBQVMsQ0FBQTtJQUNwQyxRQUFRLEdBQVcsS0FBSyxDQUFBO0lBQ3hCLFVBQVUsR0FBVyxPQUFPLENBQUE7SUFDNUIsUUFBUSxHQUFXLEtBQUssQ0FBQTtJQUN4QixVQUFVLEdBQVcsT0FBTyxDQUFBO0lBQzVCLFdBQVcsR0FBVyxRQUFRLENBQUE7SUFDOUIsMkJBQTJCLENBQVE7SUFDbkMsd0JBQXdCLEdBQVcsSUFBSSxDQUFBO0lBQ3ZDLFlBQVksR0FBRyxFQUFFLENBQUE7SUFFMUIsSUFDSSxLQUFLLENBQUMsS0FBMEI7UUFDbEMsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNkLElBQUksQ0FBQyxlQUFlLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDOUIsQ0FBQyxFQUFFLEdBQUcsQ0FBQyxDQUFBO0lBQ1QsQ0FBQztJQUVELElBQUksS0FBSztRQUNQLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUNyQixDQUFDO0lBRU8sZUFBZSxDQUFDLEtBQTBCO1FBQ2hELElBQUksS0FBSyxFQUFFLE1BQU0sR0FBRyxDQUFDLEVBQUU7WUFD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LHNCQUFzQjtrQkFMbEMsU0FBUzsrQkFDRSxpQkFBaUI7OEJBVWxCLElBQUk7c0JBQVosS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csMkJBQTJCO3NCQUFuQyxLQUFLO2dCQUNHLHdCQUF3QjtzQkFBaEMsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUdGLEtBQUs7c0JBRFIsS0FBSztnQkF5QkMsV0FBVztzQkFEakIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuZXhwb3J0IGludGVyZmFjZSBJbnB1dEtleVZhbHVlVHlwZSB7XG4gIFtrZXk6IHN0cmluZ106IGFueVxuICBrZXk/OiBzdHJpbmdcbiAgdmFsdWU/OiBzdHJpbmdcbiAgdHlwZT86IHN0cmluZ1xufVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdpbnB1dC1rZXktdmFsdWUnLFxuICB0ZW1wbGF0ZVVybDogJ2lucHV0LWtleS12YWx1ZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWydpbnB1dC1rZXktdmFsdWUuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBJbnB1dEtleVZhbHVlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICBwcml2YXRlIGluaXRpYWxpemVkOiBib29sZWFuO1xuICBwcml2YXRlIF9tb2RlbDogSW5wdXRLZXlWYWx1ZVR5cGVbXVxuICBwcml2YXRlIHRlbXBvcmFyeUl0ZW06IElucHV0S2V5VmFsdWVUeXBlID0ge31cblxuICBASW5wdXQoKSBzaXplOiAnREVGQVVMVCcgfCAnU0xJTScgPSAnREVGQVVMVCdcbiAgQElucHV0KCkga2V5RmllbGQ6IHN0cmluZyA9ICdrZXknXG4gIEBJbnB1dCgpIHZhbHVlRmllbGQ6IHN0cmluZyA9ICd2YWx1ZSdcbiAgQElucHV0KCkgbGFiZWxLZXk6IHN0cmluZyA9ICdLZXknXG4gIEBJbnB1dCgpIGxhYmVsVmFsdWU6IHN0cmluZyA9ICdWYWx1ZSdcbiAgQElucHV0KCkgcmVtb3ZlTGFiZWw6IHN0cmluZyA9ICdSZW1vdmUnXG4gIEBJbnB1dCgpIHdpZHRoUGVyY2VudGFnZUlucHV0T3B0aW9uczogbnVtYmVyXG4gIEBJbnB1dCgpIGlucHV0T3B0aW9uc0luaXRTZWxlY3RlZDogc3RyaW5nID0gbnVsbFxuICBASW5wdXQoKSBpbnB1dE9wdGlvbnMgPSBbXVxuXG4gIEBJbnB1dCgpXG4gIHNldCBtb2RlbChtb2RlbDogSW5wdXRLZXlWYWx1ZVR5cGVbXSkge1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgdGhpcy5pbml0aWFsaXplTW9kZWwobW9kZWwpO1xuICAgIH0sIDIwMClcbiAgfVxuXG4gIGdldCBtb2RlbCgpOiBJbnB1dEtleVZhbHVlVHlwZVtdIHtcbiAgICByZXR1cm4gdGhpcy5fbW9kZWw7XG4gIH1cblxuICBwcml2YXRlIGluaXRpYWxpemVNb2RlbChtb2RlbDogSW5wdXRLZXlWYWx1ZVR5cGVbXSk6IHZvaWQge1xuICAgIGlmIChtb2RlbD8ubGVuZ3RoID4gMCkge1xuICAgICAgdGhpcy5fbW9kZWwgPSBbLi4ubW9kZWxdXG4gICAgICBjb25zdCBsYXN0TW9kZWwgPSBtb2RlbFttb2RlbC5sZW5ndGggLSAxXVxuICAgICAgaWYgKGxhc3RNb2RlbD8uW3RoaXMua2V5RmllbGRdIHx8IGxhc3RNb2RlbD8uW3RoaXMudmFsdWVGaWVsZF0pIHtcbiAgICAgICAgdGhpcy5fbW9kZWwucHVzaCh0aGlzLmdldE5ld01vZGVsKCkpXG4gICAgICAgIHRoaXMubW9kZWwgPSB0aGlzLl9tb2RlbFxuICAgICAgfVxuICAgIH0gZWxzZSBpZiAodGhpcy5pbml0aWFsaXplZCkge1xuICAgICAgdGhpcy5tb2RlbCA9IFt0aGlzLmdldE5ld01vZGVsKCldXG4gICAgfVxuICB9XG5cbiAgQE91dHB1dCgpXG4gIHB1YmxpYyBtb2RlbENoYW5nZTogRXZlbnRFbWl0dGVyPElucHV0S2V5VmFsdWVUeXBlW10+ID0gbmV3IEV2ZW50RW1pdHRlcjxJbnB1dEtleVZhbHVlVHlwZVtdPigpXG5cbiAgcHVibGljIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuaW5wdXRPcHRpb25zSW5pdFNlbGVjdGVkIHx8PSB0aGlzLmlucHV0T3B0aW9ucz8uWzBdPy52YWx1ZVxuICAgIHRoaXMudGVtcG9yYXJ5SXRlbSA9IHRoaXMuZ2V0TmV3TW9kZWwoKTtcbiAgICBpZiAoIXRoaXMubW9kZWw/Lmxlbmd0aCkge1xuICAgICAgdGhpcy5fbW9kZWwgPSBbdGhpcy5nZXROZXdNb2RlbCgpXVxuICAgICAgdGhpcy5tb2RlbCA9IHRoaXMuX21vZGVsXG4gICAgfVxuICAgIHRoaXMuaW5pdGlhbGl6ZWQgPSB0cnVlO1xuICB9XG5cbiAgcHVibGljIGdldE5ld01vZGVsKCk6IElucHV0S2V5VmFsdWVUeXBlIHtcbiAgICBjb25zdCB2YWx1ZTogSW5wdXRLZXlWYWx1ZVR5cGUgPSB7fTtcbiAgICB2YWx1ZVt0aGlzLmtleUZpZWxkXSA9ICcnO1xuICAgIHZhbHVlW3RoaXMudmFsdWVGaWVsZF0gPSAnJ1xuICAgIGlmICh0aGlzLmlucHV0T3B0aW9ucz8ubGVuZ3RoID4gMCAmJiB0aGlzLmlucHV0T3B0aW9uc0luaXRTZWxlY3RlZCkge1xuICAgICAgdmFsdWUudHlwZSA9IHRoaXMuaW5wdXRPcHRpb25zSW5pdFNlbGVjdGVkO1xuICAgIH1cbiAgICByZXR1cm4gdmFsdWU7XG4gIH1cblxuICBwdWJsaWMgb25DaGFuZ2VWYWx1ZXMobGFzdDogYm9vbGVhbik6IHZvaWQge1xuICAgIGlmIChsYXN0KSB7XG4gICAgICBpZiAodGhpcy50ZW1wb3JhcnlJdGVtPy5bdGhpcy5rZXlGaWVsZF0gfHwgdGhpcy50ZW1wb3JhcnlJdGVtPy5bdGhpcy52YWx1ZUZpZWxkXSkge1xuICAgICAgICB0aGlzLm1vZGVsLnB1c2goeyAuLi50aGlzLnRlbXBvcmFyeUl0ZW0gfSk7XG4gICAgICAgIHRoaXMudGVtcG9yYXJ5SXRlbSA9IHRoaXMuZ2V0TmV3TW9kZWwoKTtcbiAgICAgIH1cbiAgICAgIHRoaXMubW9kZWxDaGFuZ2UuZW1pdCh0aGlzLm1vZGVsKVxuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyByZW1vdmVJdGVtKGluZGV4OiBudW1iZXIpOiB2b2lkIHtcbiAgICB0aGlzLm1vZGVsLnNwbGljZShpbmRleCwgMSk7XG4gICAgdGhpcy5tb2RlbENoYW5nZS5lbWl0KHRoaXMubW9kZWwpO1xuICB9XG5cbiAgcHVibGljIGlucHV0T3B0aW9uQ2hhbmdlZChldmVudDogc3RyaW5nLCBpbmRleDogbnVtYmVyKTogdm9pZCB7XG4gICAgdGhpcy5tb2RlbFtpbmRleF0udHlwZSA9IGV2ZW50O1xuICB9XG5cbn1cbiIsIjxkaXYgY2xhc3M9XCJrZXktdmFsdWUtaXRlbVwiICpuZ0Zvcj1cImxldCBpdGVtIG9mIG1vZGVsOyBsZXQgbGFzdCA9IGxhc3Q7IGxldCBpbmRleCA9IGluZGV4XCI+XG4gIDxpbnB1dC10ZXh0XG4gICAgY2xhc3M9XCJpbnB1dC1rZXlcIlxuICAgIFtzaXplXT1cInNpemVcIlxuICAgIFtsYWJlbF09XCJsYWJlbEtleVwiXG4gICAgW2lucHV0T3B0aW9uc109XCJpbnB1dE9wdGlvbnNcIlxuICAgIFtpbnB1dE9wdGlvbnNJbml0U2VsZWN0ZWRdPVwiaXRlbS50eXBlID8gaXRlbS50eXBlIDogaW5wdXRPcHRpb25zSW5pdFNlbGVjdGVkXCJcbiAgICBbd2lkdGhQZXJjZW50YWdlSW5wdXRPcHRpb25zXT1cIndpZHRoUGVyY2VudGFnZUlucHV0T3B0aW9uc1wiXG4gICAgWyhuZ01vZGVsKV09XCJpdGVtW2tleUZpZWxkXVwiXG4gICAgKG5nTW9kZWxDaGFuZ2UpPVwib25DaGFuZ2VWYWx1ZXMobGFzdClcIlxuICAgIChvcHRpb25DaGFuZ2VkKT1cImlucHV0T3B0aW9uQ2hhbmdlZCgkZXZlbnQsIGluZGV4KVwiPlxuICA8L2lucHV0LXRleHQ+XG4gIDxpbnB1dC10ZXh0XG4gICAgY2xhc3M9XCJpbnB1dC12YWx1ZVwiXG4gICAgW3NpemVdPVwic2l6ZVwiXG4gICAgW2xhYmVsXT1cImxhYmVsVmFsdWVcIlxuICAgIFsobmdNb2RlbCldPVwiaXRlbVt2YWx1ZUZpZWxkXVwiPlxuICA8L2lucHV0LXRleHQ+XG4gIDxidXR0b24gY2xhc3M9XCJkZWxldGUtYnV0dG9uXCIgW21hdFRvb2x0aXBdPVwicmVtb3ZlTGFiZWxcIiBbbmdDbGFzc109XCJ7J2RlbGV0ZS1idXR0b24tc2xpbSc6IHNpemUgPT09ICdTTElNJ31cIiB0eXBlPVwiYnV0dG9uXCIgKm5nSWY9XCIhbGFzdFwiXG4gICAgICAgICAgKGNsaWNrKT1cInJlbW92ZUl0ZW0oaW5kZXgpXCI+XG4gICAgPG1hdC1pY29uPmRlbGV0ZTwvbWF0LWljb24+XG4gIDwvYnV0dG9uPlxuPC9kaXY+XG5cbiJdfQ==
|
|
@@ -2147,7 +2147,9 @@ class InputKeyValueComponent {
|
|
|
2147
2147
|
inputOptionsInitSelected = null;
|
|
2148
2148
|
inputOptions = [];
|
|
2149
2149
|
set model(model) {
|
|
2150
|
-
|
|
2150
|
+
setTimeout(() => {
|
|
2151
|
+
this.initializeModel(model);
|
|
2152
|
+
}, 200);
|
|
2151
2153
|
}
|
|
2152
2154
|
get model() {
|
|
2153
2155
|
return this._model;
|
|
@@ -2167,6 +2169,7 @@ class InputKeyValueComponent {
|
|
|
2167
2169
|
}
|
|
2168
2170
|
modelChange = new EventEmitter();
|
|
2169
2171
|
ngOnInit() {
|
|
2172
|
+
this.inputOptionsInitSelected ||= this.inputOptions?.[0]?.value;
|
|
2170
2173
|
this.temporaryItem = this.getNewModel();
|
|
2171
2174
|
if (!this.model?.length) {
|
|
2172
2175
|
this._model = [this.getNewModel()];
|
|
@@ -2178,6 +2181,9 @@ class InputKeyValueComponent {
|
|
|
2178
2181
|
const value = {};
|
|
2179
2182
|
value[this.keyField] = '';
|
|
2180
2183
|
value[this.valueField] = '';
|
|
2184
|
+
if (this.inputOptions?.length > 0 && this.inputOptionsInitSelected) {
|
|
2185
|
+
value.type = this.inputOptionsInitSelected;
|
|
2186
|
+
}
|
|
2181
2187
|
return value;
|
|
2182
2188
|
}
|
|
2183
2189
|
onChangeValues(last) {
|
|
@@ -2186,8 +2192,8 @@ class InputKeyValueComponent {
|
|
|
2186
2192
|
this.model.push({ ...this.temporaryItem });
|
|
2187
2193
|
this.temporaryItem = this.getNewModel();
|
|
2188
2194
|
}
|
|
2195
|
+
this.modelChange.emit(this.model);
|
|
2189
2196
|
}
|
|
2190
|
-
this.modelChange.emit(this.model);
|
|
2191
2197
|
}
|
|
2192
2198
|
removeItem(index) {
|
|
2193
2199
|
this.model.splice(index, 1);
|
|
@@ -2195,14 +2201,13 @@ class InputKeyValueComponent {
|
|
|
2195
2201
|
}
|
|
2196
2202
|
inputOptionChanged(event, index) {
|
|
2197
2203
|
this.model[index].type = event;
|
|
2198
|
-
this.modelChange.emit(this.model);
|
|
2199
2204
|
}
|
|
2200
2205
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputKeyValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2201
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: InputKeyValueComponent, selector: "input-key-value", inputs: { size: "size", keyField: "keyField", valueField: "valueField", labelKey: "labelKey", labelValue: "labelValue", removeLabel: "removeLabel", widthPercentageInputOptions: "widthPercentageInputOptions", inputOptionsInitSelected: "inputOptionsInitSelected", inputOptions: "inputOptions", model: "model" }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: "<div class=\"key-value-item\" *ngFor=\"let item of model; let last = last; let index = index\">\n <input-text\n class=\"input-key\"\n [size]=\"size\"\n [label]=\"labelKey\"\n [inputOptions]=\"inputOptions\"\n [inputOptionsInitSelected]=\"inputOptionsInitSelected\"\n [widthPercentageInputOptions]=\"widthPercentageInputOptions\"\n [(ngModel)]=\"item[keyField]\"\n (ngModelChange)=\"onChangeValues(last)\"\n (optionChanged)=\"inputOptionChanged($event, index)\">\n </input-text>\n <input-text\n class=\"input-value\"\n [size]=\"size\"\n [label]=\"labelValue\"\n [(ngModel)]=\"item[valueField]\">\n </input-text>\n <button class=\"delete-button\" [matTooltip]=\"removeLabel\" [ngClass]=\"{'delete-button-slim': size === 'SLIM'}\" type=\"button\" *ngIf=\"!last\"\n (click)=\"removeItem(index)\">\n <mat-icon>delete</mat-icon>\n </button>\n</div>\n\n", styles: [".key-value-item{display:flex;gap:10px;margin-bottom:10px;width:100%}.key-value-item .input-key{width:50%}.key-value-item .input-key ::ng-deep input{padding-left:10px!important;padding-right:10px!important}.key-value-item .input-value{width:calc(50% - 60px)}.key-value-item .input-value ::ng-deep input{padding-left:10px!important;padding-right:10px!important}.key-value-item .delete-button{display:flex;justify-content:center;align-items:center;cursor:pointer;background:#FFF;color:#c40606;border-radius:5px;border:1px solid var(--color-fonts-tertiary)}.key-value-item .delete-button.delete-button-slim{width:30px;height:30px}.key-value-item .delete-button.delete-button-slim ::ng-deep .mat-icon{width:auto!important;height:auto!important;font-size:22px!important;margin-left:-2.5px;padding:0!important}\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: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: InputTextComponent, selector: "input-text", inputs: ["label", "disabled", "iconSuffix", "iconPrefix", "autoComplete", "size", "debounceTime", "widthPercentageInputOptions", "inputOptions", "inputOptionsInitSelected"], outputs: ["suffixIconClick", "prefixIconClick", "onDebounce", "optionChanged"] }] });
|
|
2206
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: InputKeyValueComponent, selector: "input-key-value", inputs: { size: "size", keyField: "keyField", valueField: "valueField", labelKey: "labelKey", labelValue: "labelValue", removeLabel: "removeLabel", widthPercentageInputOptions: "widthPercentageInputOptions", inputOptionsInitSelected: "inputOptionsInitSelected", inputOptions: "inputOptions", model: "model" }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: "<div class=\"key-value-item\" *ngFor=\"let item of model; let last = last; let index = index\">\n <input-text\n class=\"input-key\"\n [size]=\"size\"\n [label]=\"labelKey\"\n [inputOptions]=\"inputOptions\"\n [inputOptionsInitSelected]=\"item.type ? item.type : inputOptionsInitSelected\"\n [widthPercentageInputOptions]=\"widthPercentageInputOptions\"\n [(ngModel)]=\"item[keyField]\"\n (ngModelChange)=\"onChangeValues(last)\"\n (optionChanged)=\"inputOptionChanged($event, index)\">\n </input-text>\n <input-text\n class=\"input-value\"\n [size]=\"size\"\n [label]=\"labelValue\"\n [(ngModel)]=\"item[valueField]\">\n </input-text>\n <button class=\"delete-button\" [matTooltip]=\"removeLabel\" [ngClass]=\"{'delete-button-slim': size === 'SLIM'}\" type=\"button\" *ngIf=\"!last\"\n (click)=\"removeItem(index)\">\n <mat-icon>delete</mat-icon>\n </button>\n</div>\n\n", styles: [".key-value-item{display:flex;gap:10px;margin-bottom:10px;width:100%}.key-value-item .input-key{width:50%}.key-value-item .input-key ::ng-deep input{padding-left:10px!important;padding-right:10px!important}.key-value-item .input-value{width:calc(50% - 60px)}.key-value-item .input-value ::ng-deep input{padding-left:10px!important;padding-right:10px!important}.key-value-item .delete-button{display:flex;justify-content:center;align-items:center;cursor:pointer;background:#FFF;color:#c40606;border-radius:5px;border:1px solid var(--color-fonts-tertiary)}.key-value-item .delete-button.delete-button-slim{width:30px;height:30px}.key-value-item .delete-button.delete-button-slim ::ng-deep .mat-icon{width:auto!important;height:auto!important;font-size:22px!important;margin-left:-2.5px;padding:0!important}\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: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: InputTextComponent, selector: "input-text", inputs: ["label", "disabled", "iconSuffix", "iconPrefix", "autoComplete", "size", "debounceTime", "widthPercentageInputOptions", "inputOptions", "inputOptionsInitSelected"], outputs: ["suffixIconClick", "prefixIconClick", "onDebounce", "optionChanged"] }] });
|
|
2202
2207
|
}
|
|
2203
2208
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputKeyValueComponent, decorators: [{
|
|
2204
2209
|
type: Component,
|
|
2205
|
-
args: [{ selector: 'input-key-value', template: "<div class=\"key-value-item\" *ngFor=\"let item of model; let last = last; let index = index\">\n <input-text\n class=\"input-key\"\n [size]=\"size\"\n [label]=\"labelKey\"\n [inputOptions]=\"inputOptions\"\n [inputOptionsInitSelected]=\"inputOptionsInitSelected\"\n [widthPercentageInputOptions]=\"widthPercentageInputOptions\"\n [(ngModel)]=\"item[keyField]\"\n (ngModelChange)=\"onChangeValues(last)\"\n (optionChanged)=\"inputOptionChanged($event, index)\">\n </input-text>\n <input-text\n class=\"input-value\"\n [size]=\"size\"\n [label]=\"labelValue\"\n [(ngModel)]=\"item[valueField]\">\n </input-text>\n <button class=\"delete-button\" [matTooltip]=\"removeLabel\" [ngClass]=\"{'delete-button-slim': size === 'SLIM'}\" type=\"button\" *ngIf=\"!last\"\n (click)=\"removeItem(index)\">\n <mat-icon>delete</mat-icon>\n </button>\n</div>\n\n", styles: [".key-value-item{display:flex;gap:10px;margin-bottom:10px;width:100%}.key-value-item .input-key{width:50%}.key-value-item .input-key ::ng-deep input{padding-left:10px!important;padding-right:10px!important}.key-value-item .input-value{width:calc(50% - 60px)}.key-value-item .input-value ::ng-deep input{padding-left:10px!important;padding-right:10px!important}.key-value-item .delete-button{display:flex;justify-content:center;align-items:center;cursor:pointer;background:#FFF;color:#c40606;border-radius:5px;border:1px solid var(--color-fonts-tertiary)}.key-value-item .delete-button.delete-button-slim{width:30px;height:30px}.key-value-item .delete-button.delete-button-slim ::ng-deep .mat-icon{width:auto!important;height:auto!important;font-size:22px!important;margin-left:-2.5px;padding:0!important}\n"] }]
|
|
2210
|
+
args: [{ selector: 'input-key-value', template: "<div class=\"key-value-item\" *ngFor=\"let item of model; let last = last; let index = index\">\n <input-text\n class=\"input-key\"\n [size]=\"size\"\n [label]=\"labelKey\"\n [inputOptions]=\"inputOptions\"\n [inputOptionsInitSelected]=\"item.type ? item.type : inputOptionsInitSelected\"\n [widthPercentageInputOptions]=\"widthPercentageInputOptions\"\n [(ngModel)]=\"item[keyField]\"\n (ngModelChange)=\"onChangeValues(last)\"\n (optionChanged)=\"inputOptionChanged($event, index)\">\n </input-text>\n <input-text\n class=\"input-value\"\n [size]=\"size\"\n [label]=\"labelValue\"\n [(ngModel)]=\"item[valueField]\">\n </input-text>\n <button class=\"delete-button\" [matTooltip]=\"removeLabel\" [ngClass]=\"{'delete-button-slim': size === 'SLIM'}\" type=\"button\" *ngIf=\"!last\"\n (click)=\"removeItem(index)\">\n <mat-icon>delete</mat-icon>\n </button>\n</div>\n\n", styles: [".key-value-item{display:flex;gap:10px;margin-bottom:10px;width:100%}.key-value-item .input-key{width:50%}.key-value-item .input-key ::ng-deep input{padding-left:10px!important;padding-right:10px!important}.key-value-item .input-value{width:calc(50% - 60px)}.key-value-item .input-value ::ng-deep input{padding-left:10px!important;padding-right:10px!important}.key-value-item .delete-button{display:flex;justify-content:center;align-items:center;cursor:pointer;background:#FFF;color:#c40606;border-radius:5px;border:1px solid var(--color-fonts-tertiary)}.key-value-item .delete-button.delete-button-slim{width:30px;height:30px}.key-value-item .delete-button.delete-button-slim ::ng-deep .mat-icon{width:auto!important;height:auto!important;font-size:22px!important;margin-left:-2.5px;padding:0!important}\n"] }]
|
|
2206
2211
|
}], propDecorators: { size: [{
|
|
2207
2212
|
type: Input
|
|
2208
2213
|
}], keyField: [{
|