@apipass/inputs 1.0.130 → 1.0.131
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.
|
@@ -27,6 +27,9 @@ class InputKeyValueComponent {
|
|
|
27
27
|
initializeModel(model) {
|
|
28
28
|
if (model?.length > 0) {
|
|
29
29
|
this._model = [...model];
|
|
30
|
+
if (this._model[this._model.length - 1].label && !this._model[this._model.length - 1].type) {
|
|
31
|
+
this.inputOptionChanged(this.inputOptionsInitSelected, this._model.length - 1);
|
|
32
|
+
}
|
|
30
33
|
const lastModel = model[model.length - 1];
|
|
31
34
|
if (lastModel?.[this.keyField] || lastModel?.[this.valueField]) {
|
|
32
35
|
this._model.push(this.getNewModel());
|
|
@@ -39,6 +42,7 @@ class InputKeyValueComponent {
|
|
|
39
42
|
}
|
|
40
43
|
modelChange = new EventEmitter();
|
|
41
44
|
ngOnInit() {
|
|
45
|
+
this.inputOptionsInitSelected ||= this.inputOptions?.[0]?.value;
|
|
42
46
|
this.temporaryItem = this.getNewModel();
|
|
43
47
|
if (!this.model?.length) {
|
|
44
48
|
this._model = [this.getNewModel()];
|
|
@@ -58,8 +62,8 @@ class InputKeyValueComponent {
|
|
|
58
62
|
this.model.push({ ...this.temporaryItem });
|
|
59
63
|
this.temporaryItem = this.getNewModel();
|
|
60
64
|
}
|
|
65
|
+
this.modelChange.emit(this.model);
|
|
61
66
|
}
|
|
62
|
-
this.modelChange.emit(this.model);
|
|
63
67
|
}
|
|
64
68
|
removeItem(index) {
|
|
65
69
|
this.model.splice(index, 1);
|
|
@@ -67,15 +71,14 @@ class InputKeyValueComponent {
|
|
|
67
71
|
}
|
|
68
72
|
inputOptionChanged(event, index) {
|
|
69
73
|
this.model[index].type = event;
|
|
70
|
-
this.modelChange.emit(this.model);
|
|
71
74
|
}
|
|
72
75
|
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"] }] });
|
|
76
|
+
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
77
|
}
|
|
75
78
|
export { InputKeyValueComponent };
|
|
76
79
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputKeyValueComponent, decorators: [{
|
|
77
80
|
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"] }]
|
|
81
|
+
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
82
|
}], propDecorators: { size: [{
|
|
80
83
|
type: Input
|
|
81
84
|
}], keyField: [{
|
|
@@ -99,4 +102,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
|
|
|
99
102
|
}], modelChange: [{
|
|
100
103
|
type: Output
|
|
101
104
|
}] } });
|
|
102
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
105
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQta2V5LXZhbHVlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2lucHV0cy9zcmMvaW5wdXQta2V5LXZhbHVlL2lucHV0LWtleS12YWx1ZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9pbnB1dHMvc3JjL2lucHV0LWtleS12YWx1ZS9pbnB1dC1rZXktdmFsdWUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7OztBQVMvRSxNQUthLHNCQUFzQjtJQUV6QixXQUFXLENBQVU7SUFDckIsTUFBTSxDQUFxQjtJQUMzQixhQUFhLEdBQXNCLEVBQUUsQ0FBQTtJQUVwQyxJQUFJLEdBQXVCLFNBQVMsQ0FBQTtJQUNwQyxRQUFRLEdBQVcsS0FBSyxDQUFBO0lBQ3hCLFVBQVUsR0FBVyxPQUFPLENBQUE7SUFDNUIsUUFBUSxHQUFXLEtBQUssQ0FBQTtJQUN4QixVQUFVLEdBQVcsT0FBTyxDQUFBO0lBQzVCLFdBQVcsR0FBVyxRQUFRLENBQUE7SUFDOUIsMkJBQTJCLENBQVE7SUFDbkMsd0JBQXdCLEdBQVcsSUFBSSxDQUFBO0lBQ3ZDLFlBQVksR0FBRyxFQUFFLENBQUE7SUFFMUIsSUFDSSxLQUFLLENBQUMsS0FBMEI7UUFDbEMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM5QixDQUFDO0lBRUQsSUFBSSxLQUFLO1FBQ1AsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDO0lBQ3JCLENBQUM7SUFFTyxlQUFlLENBQUMsS0FBMEI7UUFDaEQsSUFBSSxLQUFLLEVBQUUsTUFBTSxHQUFHLENBQUMsRUFBRTtZQUNyQixJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsR0FBRyxLQUFLLENBQUMsQ0FBQTtZQUN4QixJ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QUcsS0FBSyxDQUFDO0lBQ2pDLENBQUM7dUdBOUVVLHNCQUFzQjsyRkFBdEIsc0JBQXNCLHNaQ2RuQyxpNkJBd0JBOztTRFZhLHNCQUFzQjsyRkFBdEIsc0JBQXNCO2tCQUxsQyxTQUFTOytCQUNFLGlCQUFpQjs4QkFVbEIsSUFBSTtzQkFBWixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRywyQkFBMkI7c0JBQW5DLEtBQUs7Z0JBQ0csd0JBQXdCO3NCQUFoQyxLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBR0YsS0FBSztzQkFEUixLQUFLO2dCQTBCQyxXQUFXO3NCQURqQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5leHBvcnQgaW50ZXJmYWNlIElucHV0S2V5VmFsdWVUeXBlIHtcbiAgW2tleTogc3RyaW5nXTogYW55XG4gIGtleT86IHN0cmluZ1xuICB2YWx1ZT86IHN0cmluZ1xuICB0eXBlPzogc3RyaW5nXG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2lucHV0LWtleS12YWx1ZScsXG4gIHRlbXBsYXRlVXJsOiAnaW5wdXQta2V5LXZhbHVlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJ2lucHV0LWtleS12YWx1ZS5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIElucHV0S2V5VmFsdWVDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXG4gIHByaXZhdGUgaW5pdGlhbGl6ZWQ6IGJvb2xlYW47XG4gIHByaXZhdGUgX21vZGVsOiBJbnB1dEtleVZhbHVlVHlwZVtdXG4gIHByaXZhdGUgdGVtcG9yYXJ5SXRlbTogSW5wdXRLZXlWYWx1ZVR5cGUgPSB7fVxuXG4gIEBJbnB1dCgpIHNpemU6ICdERUZBVUxUJyB8ICdTTElNJyA9ICdERUZBVUxUJ1xuICBASW5wdXQoKSBrZXlGaWVsZDogc3RyaW5nID0gJ2tleSdcbiAgQElucHV0KCkgdmFsdWVGaWVsZDogc3RyaW5nID0gJ3ZhbHVlJ1xuICBASW5wdXQoKSBsYWJlbEtleTogc3RyaW5nID0gJ0tleSdcbiAgQElucHV0KCkgbGFiZWxWYWx1ZTogc3RyaW5nID0gJ1ZhbHVlJ1xuICBASW5wdXQoKSByZW1vdmVMYWJlbDogc3RyaW5nID0gJ1JlbW92ZSdcbiAgQElucHV0KCkgd2lkdGhQZXJjZW50YWdlSW5wdXRPcHRpb25zOiBudW1iZXJcbiAgQElucHV0KCkgaW5wdXRPcHRpb25zSW5pdFNlbGVjdGVkOiBzdHJpbmcgPSBudWxsXG4gIEBJbnB1dCgpIGlucHV0T3B0aW9ucyA9IFtdXG5cbiAgQElucHV0KClcbiAgc2V0IG1vZGVsKG1vZGVsOiBJbnB1dEtleVZhbHVlVHlwZVtdKSB7XG4gICAgdGhpcy5pbml0aWFsaXplTW9kZWwobW9kZWwpO1xuICB9XG5cbiAgZ2V0IG1vZGVsKCk6IElucHV0S2V5VmFsdWVUeXBlW10ge1xuICAgIHJldHVybiB0aGlzLl9tb2RlbDtcbiAgfVxuXG4gIHByaXZhdGUgaW5pdGlhbGl6ZU1vZGVsKG1vZGVsOiBJbnB1dEtleVZhbHVlVHlwZVtdKTogdm9pZCB7XG4gICAgaWYgKG1vZGVsPy5sZW5ndGggPiAwKSB7XG4gICAgICB0aGlzLl9tb2RlbCA9IFsuLi5tb2RlbF1cbiAgICAgIGlmICh0aGlzLl9tb2RlbFt0aGlzLl9tb2RlbC5sZW5ndGggLSAxXS5sYWJlbCAmJiAhdGhpcy5fbW9kZWxbdGhpcy5fbW9kZWwubGVuZ3RoIC0gMV0udHlwZSkge1xuICAgICAgICB0aGlzLmlucHV0T3B0aW9uQ2hhbmdlZCh0aGlzLmlucHV0T3B0aW9uc0luaXRTZWxlY3RlZCwgdGhpcy5fbW9kZWwubGVuZ3RoIC0gMSlcbiAgICAgIH1cbiAgICAgIGNvbnN0IGxhc3RNb2RlbCA9IG1vZGVsW21vZGVsLmxlbmd0aCAtIDFdXG4gICAgICBpZiAobGFzdE1vZGVsPy5bdGhpcy5rZXlGaWVsZF0gfHwgbGFzdE1vZGVsPy5bdGhpcy52YWx1ZUZpZWxkXSkge1xuICAgICAgICB0aGlzLl9tb2RlbC5wdXNoKHRoaXMuZ2V0TmV3TW9kZWwoKSlcbiAgICAgICAgdGhpcy5tb2RlbCA9IHRoaXMuX21vZGVsXG4gICAgICB9XG4gICAgfSBlbHNlIGlmICh0aGlzLmluaXRpYWxpemVkKSB7XG4gICAgICB0aGlzLm1vZGVsID0gW3RoaXMuZ2V0TmV3TW9kZWwoKV1cbiAgICB9XG4gIH1cblxuICBAT3V0cHV0KClcbiAgcHVibGljIG1vZGVsQ2hhbmdlOiBFdmVudEVtaXR0ZXI8SW5wdXRLZXlWYWx1ZVR5cGVbXT4gPSBuZXcgRXZlbnRFbWl0dGVyPElucHV0S2V5VmFsdWVUeXBlW10+KClcblxuICBwdWJsaWMgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5pbnB1dE9wdGlvbnNJbml0U2VsZWN0ZWQgfHw9IHRoaXMuaW5wdXRPcHRpb25zPy5bMF0/LnZhbHVlXG4gICAgdGhpcy50ZW1wb3JhcnlJdGVtID0gdGhpcy5nZXROZXdNb2RlbCgpO1xuICAgIGlmICghdGhpcy5tb2RlbD8ubGVuZ3RoKSB7XG4gICAgICB0aGlzLl9tb2RlbCA9IFt0aGlzLmdldE5ld01vZGVsKCldXG4gICAgICB0aGlzLm1vZGVsID0gdGhpcy5fbW9kZWxcbiAgICB9XG4gICAgdGhpcy5pbml0aWFsaXplZCA9IHRydWU7XG4gIH1cblxuICBwdWJsaWMgZ2V0TmV3TW9kZWwoKTogSW5wdXRLZXlWYWx1ZVR5cGUge1xuICAgIGNvbnN0IHZhbHVlOiBJbnB1dEtleVZhbHVlVHlwZSA9IHt9O1xuICAgIHZhbHVlW3RoaXMua2V5RmllbGRdID0gJyc7XG4gICAgdmFsdWVbdGhpcy52YWx1ZUZpZWxkXSA9ICcnXG4gICAgcmV0dXJuIHZhbHVlO1xuICB9XG5cbiAgcHVibGljIG9uQ2hhbmdlVmFsdWVzKGxhc3Q6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICBpZiAobGFzdCkge1xuICAgICAgaWYgKHRoaXMudGVtcG9yYXJ5SXRlbT8uW3RoaXMua2V5RmllbGRdIHx8IHRoaXMudGVtcG9yYXJ5SXRlbT8uW3RoaXMudmFsdWVGaWVsZF0pIHtcbiAgICAgICAgdGhpcy5tb2RlbC5wdXNoKHsgLi4udGhpcy50ZW1wb3JhcnlJdGVtIH0pO1xuICAgICAgICB0aGlzLnRlbXBvcmFyeUl0ZW0gPSB0aGlzLmdldE5ld01vZGVsKCk7XG4gICAgICB9XG4gICAgICB0aGlzLm1vZGVsQ2hhbmdlLmVtaXQodGhpcy5tb2RlbClcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgcmVtb3ZlSXRlbShpbmRleDogbnVtYmVyKTogdm9pZCB7XG4gICAgdGhpcy5tb2RlbC5zcGxpY2UoaW5kZXgsIDEpO1xuICAgIHRoaXMubW9kZWxDaGFuZ2UuZW1pdCh0aGlzLm1vZGVsKTtcbiAgfVxuXG4gIHB1YmxpYyBpbnB1dE9wdGlvbkNoYW5nZWQoZXZlbnQ6IHN0cmluZywgaW5kZXg6IG51bWJlcik6IHZvaWQge1xuICAgIHRoaXMubW9kZWxbaW5kZXhdLnR5cGUgPSBldmVudDtcbiAgfVxuXG59XG4iLCI8ZGl2IGNsYXNzPVwia2V5LXZhbHVlLWl0ZW1cIiAqbmdGb3I9XCJsZXQgaXRlbSBvZiBtb2RlbDsgbGV0IGxhc3QgPSBsYXN0OyBsZXQgaW5kZXggPSBpbmRleFwiPlxuICA8aW5wdXQtdGV4dFxuICAgIGNsYXNzPVwiaW5wdXQta2V5XCJcbiAgICBbc2l6ZV09XCJzaXplXCJcbiAgICBbbGFiZWxdPVwibGFiZWxLZXlcIlxuICAgIFtpbnB1dE9wdGlvbnNdPVwiaW5wdXRPcHRpb25zXCJcbiAgICBbaW5wdXRPcHRpb25zSW5pdFNlbGVjdGVkXT1cIml0ZW0udHlwZSA/IGl0ZW0udHlwZSA6IGlucHV0T3B0aW9uc0luaXRTZWxlY3RlZFwiXG4gICAgW3dpZHRoUGVyY2VudGFnZUlucHV0T3B0aW9uc109XCJ3aWR0aFBlcmNlbnRhZ2VJbnB1dE9wdGlvbnNcIlxuICAgIFsobmdNb2RlbCldPVwiaXRlbVtrZXlGaWVsZF1cIlxuICAgIChuZ01vZGVsQ2hhbmdlKT1cIm9uQ2hhbmdlVmFsdWVzKGxhc3QpXCJcbiAgICAob3B0aW9uQ2hhbmdlZCk9XCJpbnB1dE9wdGlvbkNoYW5nZWQoJGV2ZW50LCBpbmRleClcIj5cbiAgPC9pbnB1dC10ZXh0PlxuICA8aW5wdXQtdGV4dFxuICAgIGNsYXNzPVwiaW5wdXQtdmFsdWVcIlxuICAgIFtzaXplXT1cInNpemVcIlxuICAgIFtsYWJlbF09XCJsYWJlbFZhbHVlXCJcbiAgICBbKG5nTW9kZWwpXT1cIml0ZW1bdmFsdWVGaWVsZF1cIj5cbiAgPC9pbnB1dC10ZXh0PlxuICA8YnV0dG9uIGNsYXNzPVwiZGVsZXRlLWJ1dHRvblwiIFttYXRUb29sdGlwXT1cInJlbW92ZUxhYmVsXCIgW25nQ2xhc3NdPVwieydkZWxldGUtYnV0dG9uLXNsaW0nOiBzaXplID09PSAnU0xJTSd9XCIgdHlwZT1cImJ1dHRvblwiICpuZ0lmPVwiIWxhc3RcIlxuICAgICAgICAgIChjbGljayk9XCJyZW1vdmVJdGVtKGluZGV4KVwiPlxuICAgIDxtYXQtaWNvbj5kZWxldGU8L21hdC1pY29uPlxuICA8L2J1dHRvbj5cbjwvZGl2PlxuXG4iXX0=
|
|
@@ -2155,6 +2155,9 @@ class InputKeyValueComponent {
|
|
|
2155
2155
|
initializeModel(model) {
|
|
2156
2156
|
if (model?.length > 0) {
|
|
2157
2157
|
this._model = [...model];
|
|
2158
|
+
if (this._model[this._model.length - 1].label && !this._model[this._model.length - 1].type) {
|
|
2159
|
+
this.inputOptionChanged(this.inputOptionsInitSelected, this._model.length - 1);
|
|
2160
|
+
}
|
|
2158
2161
|
const lastModel = model[model.length - 1];
|
|
2159
2162
|
if (lastModel?.[this.keyField] || lastModel?.[this.valueField]) {
|
|
2160
2163
|
this._model.push(this.getNewModel());
|
|
@@ -2167,6 +2170,7 @@ class InputKeyValueComponent {
|
|
|
2167
2170
|
}
|
|
2168
2171
|
modelChange = new EventEmitter();
|
|
2169
2172
|
ngOnInit() {
|
|
2173
|
+
this.inputOptionsInitSelected ||= this.inputOptions?.[0]?.value;
|
|
2170
2174
|
this.temporaryItem = this.getNewModel();
|
|
2171
2175
|
if (!this.model?.length) {
|
|
2172
2176
|
this._model = [this.getNewModel()];
|
|
@@ -2186,8 +2190,8 @@ class InputKeyValueComponent {
|
|
|
2186
2190
|
this.model.push({ ...this.temporaryItem });
|
|
2187
2191
|
this.temporaryItem = this.getNewModel();
|
|
2188
2192
|
}
|
|
2193
|
+
this.modelChange.emit(this.model);
|
|
2189
2194
|
}
|
|
2190
|
-
this.modelChange.emit(this.model);
|
|
2191
2195
|
}
|
|
2192
2196
|
removeItem(index) {
|
|
2193
2197
|
this.model.splice(index, 1);
|
|
@@ -2195,14 +2199,13 @@ class InputKeyValueComponent {
|
|
|
2195
2199
|
}
|
|
2196
2200
|
inputOptionChanged(event, index) {
|
|
2197
2201
|
this.model[index].type = event;
|
|
2198
|
-
this.modelChange.emit(this.model);
|
|
2199
2202
|
}
|
|
2200
2203
|
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"] }] });
|
|
2204
|
+
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
2205
|
}
|
|
2203
2206
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputKeyValueComponent, decorators: [{
|
|
2204
2207
|
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"] }]
|
|
2208
|
+
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
2209
|
}], propDecorators: { size: [{
|
|
2207
2210
|
type: Input
|
|
2208
2211
|
}], keyField: [{
|