@apipass/inputs 1.0.135 → 1.0.137

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.
@@ -8,6 +8,7 @@ import * as i3 from "@angular/material/icon";
8
8
  import * as i4 from "@angular/material/tooltip";
9
9
  import * as i5 from "../input-text/input-text.component";
10
10
  class KeyValueInputComponent {
11
+ componentId;
11
12
  items = [];
12
13
  size = 'DEFAULT';
13
14
  keyAttributeName = 'key';
@@ -20,17 +21,24 @@ class KeyValueInputComponent {
20
21
  inputOptions = [];
21
22
  onDropFn;
22
23
  itemsChange = new EventEmitter();
23
- temporaryKey;
24
- temporaryValue;
24
+ temporaryItem;
25
25
  onKeyPressedTemporaryKey = new Subject();
26
+ createDefaultTemporaryItem() {
27
+ return {
28
+ type: this.inputOptionsDefaultSelected,
29
+ [this.keyAttributeName]: '',
30
+ [this.valueAttributeName]: ''
31
+ };
32
+ }
26
33
  ngOnInit() {
34
+ this.temporaryItem = this.createDefaultTemporaryItem();
27
35
  if (!this.items) {
28
36
  this.items = [];
29
37
  this.itemsChange.emit(this.items);
30
38
  }
31
39
  this.inputOptionsDefaultSelected ||= this.inputOptions?.[0]?.value;
32
40
  this.onKeyPressedTemporaryKey
33
- .pipe(debounceTime(100))
41
+ .pipe(debounceTime(300))
34
42
  .subscribe(() => {
35
43
  this.addTemporaryAttributeToItems();
36
44
  this.focusOnLastItem();
@@ -49,31 +57,35 @@ class KeyValueInputComponent {
49
57
  model[this.valueAttributeName] = this.onDropFn($event, model[this.valueAttributeName]);
50
58
  }
51
59
  addTemporaryAttributeToItems() {
52
- this.items.push({
53
- type: this.inputOptionsDefaultSelected,
54
- [this.keyAttributeName]: this.temporaryKey,
55
- [this.valueAttributeName]: this.temporaryValue
56
- });
57
- this.temporaryKey = '';
58
- this.temporaryValue = '';
60
+ this.items.push({ ...this.temporaryItem });
61
+ this.temporaryItem = this.createDefaultTemporaryItem();
59
62
  }
60
63
  focusOnLastItem() {
61
64
  setTimeout(() => {
62
65
  const index = this.items.length - 1;
63
- document.getElementById(`key-${index}-input`).focus();
66
+ const focusId = `${this.getComponentId('key', index)}-input`;
67
+ document.getElementById(focusId).focus();
64
68
  });
65
69
  }
66
70
  onKeyPressedTemporaryKeyFn() {
67
71
  this.onKeyPressedTemporaryKey.next();
68
72
  }
73
+ temporaryItemOptionChanged(event) {
74
+ this.temporaryItem.type = event;
75
+ }
76
+ getComponentId(id, index) {
77
+ return this.componentId ? `${this.componentId}-${id}-${index}` : `${id}-${index}`;
78
+ }
69
79
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: KeyValueInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
70
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: KeyValueInputComponent, selector: "key-value-input", inputs: { items: "items", size: "size", keyAttributeName: "keyAttributeName", valueAttributeName: "valueAttributeName", keyLabel: "keyLabel", valueLabel: "valueLabel", removeLabel: "removeLabel", inputOptionsWidthPercentage: "inputOptionsWidthPercentage", inputOptionsDefaultSelected: "inputOptionsDefaultSelected", inputOptions: "inputOptions", onDropFn: "onDropFn" }, outputs: { itemsChange: "itemsChange" }, ngImport: i0, template: "<div class=\"key-value-item\" *ngFor=\"let item of items; let index = index\">\n <input-text\n [componentId]=\"'key-' + index\"\n class=\"input-key\"\n [size]=\"size\"\n [label]=\"keyLabel\"\n [inputOptions]=\"inputOptions\"\n [inputOptionsInitSelected]=\"item.type\"\n [widthPercentageInputOptions]=\"inputOptionsWidthPercentage\"\n [(ngModel)]=\"item[keyAttributeName]\"\n (optionChanged)=\"inputOptionChanged($event, index)\"\n (onDropEvent)=\"onKeyDrop(item, $event)\">\n </input-text>\n <input-text\n class=\"input-value\"\n [size]=\"size\"\n [label]=\"valueLabel\"\n [(ngModel)]=\"item[valueAttributeName]\"\n (onDropEvent)=\"onValueDrop(item, $event)\">\n </input-text>\n <button class=\"delete-button\" [matTooltip]=\"removeLabel\" [ngClass]=\"{'delete-button-slim': size === 'SLIM'}\" type=\"button\" (click)=\"removeItem(index)\">\n <mat-icon>delete</mat-icon>\n </button>\n</div>\n<div class=\"key-value-item\">\n <input-text\n class=\"input-key\"\n [size]=\"size\"\n [label]=\"keyLabel\"\n [inputOptions]=\"inputOptions\"\n [inputOptionsInitSelected]=\"inputOptionsDefaultSelected\"\n [widthPercentageInputOptions]=\"inputOptionsWidthPercentage\"\n (input)=\"onKeyPressedTemporaryKeyFn()\"\n [(ngModel)]=\"temporaryKey\">\n </input-text>\n <input-text\n class=\"input-value\"\n [size]=\"size\"\n [label]=\"valueLabel\"\n [(ngModel)]=\"temporaryValue\">\n </input-text>\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: 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: ["componentId", "label", "disabled", "iconSuffix", "iconPrefix", "autoComplete", "size", "debounceTime", "widthPercentageInputOptions", "inputOptions", "inputOptionsInitSelected"], outputs: ["suffixIconClick", "prefixIconClick", "onDebounce", "optionChanged", "onDropEvent"] }] });
80
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: KeyValueInputComponent, selector: "key-value-input", inputs: { componentId: "componentId", items: "items", size: "size", keyAttributeName: "keyAttributeName", valueAttributeName: "valueAttributeName", keyLabel: "keyLabel", valueLabel: "valueLabel", removeLabel: "removeLabel", inputOptionsWidthPercentage: "inputOptionsWidthPercentage", inputOptionsDefaultSelected: "inputOptionsDefaultSelected", inputOptions: "inputOptions", onDropFn: "onDropFn" }, outputs: { itemsChange: "itemsChange" }, ngImport: i0, template: "<div class=\"key-value-item\" *ngFor=\"let item of items; let index = index\">\n <input-text\n [componentId]=\"getComponentId('key', index)\"\n class=\"input-key\"\n [size]=\"size\"\n [label]=\"keyLabel\"\n [inputOptions]=\"inputOptions\"\n [inputOptionsInitSelected]=\"item.type\"\n [widthPercentageInputOptions]=\"inputOptionsWidthPercentage\"\n [(ngModel)]=\"item[keyAttributeName]\"\n (optionChanged)=\"inputOptionChanged($event, index)\"\n (onDropEvent)=\"onKeyDrop(item, $event)\">\n </input-text>\n <input-text\n class=\"input-value\"\n [size]=\"size\"\n [label]=\"valueLabel\"\n [(ngModel)]=\"item[valueAttributeName]\"\n (onDropEvent)=\"onValueDrop(item, $event)\">\n </input-text>\n <button class=\"delete-button\" [matTooltip]=\"removeLabel\" [ngClass]=\"{'delete-button-slim': size === 'SLIM'}\" type=\"button\" (click)=\"removeItem(index)\">\n <mat-icon>delete</mat-icon>\n </button>\n</div>\n<div class=\"key-value-item\">\n <input-text\n class=\"input-key\"\n [size]=\"size\"\n [label]=\"keyLabel\"\n [inputOptions]=\"inputOptions\"\n [inputOptionsInitSelected]=\"inputOptionsDefaultSelected\"\n [widthPercentageInputOptions]=\"inputOptionsWidthPercentage\"\n (input)=\"onKeyPressedTemporaryKeyFn()\"\n (optionChanged)=\"temporaryItemOptionChanged($event)\"\n [(ngModel)]=\"temporaryItem[this.keyAttributeName]\">\n </input-text>\n <input-text\n class=\"input-value\"\n [size]=\"size\"\n [label]=\"valueLabel\"\n [(ngModel)]=\"temporaryItem[this.valueAttributeName]\">\n </input-text>\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: 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: ["componentId", "label", "disabled", "iconSuffix", "iconPrefix", "autoComplete", "size", "debounceTime", "widthPercentageInputOptions", "inputOptions", "inputOptionsInitSelected"], outputs: ["suffixIconClick", "prefixIconClick", "onDebounce", "optionChanged", "onDropEvent"] }] });
71
81
  }
72
82
  export { KeyValueInputComponent };
73
83
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: KeyValueInputComponent, decorators: [{
74
84
  type: Component,
75
- args: [{ selector: 'key-value-input', template: "<div class=\"key-value-item\" *ngFor=\"let item of items; let index = index\">\n <input-text\n [componentId]=\"'key-' + index\"\n class=\"input-key\"\n [size]=\"size\"\n [label]=\"keyLabel\"\n [inputOptions]=\"inputOptions\"\n [inputOptionsInitSelected]=\"item.type\"\n [widthPercentageInputOptions]=\"inputOptionsWidthPercentage\"\n [(ngModel)]=\"item[keyAttributeName]\"\n (optionChanged)=\"inputOptionChanged($event, index)\"\n (onDropEvent)=\"onKeyDrop(item, $event)\">\n </input-text>\n <input-text\n class=\"input-value\"\n [size]=\"size\"\n [label]=\"valueLabel\"\n [(ngModel)]=\"item[valueAttributeName]\"\n (onDropEvent)=\"onValueDrop(item, $event)\">\n </input-text>\n <button class=\"delete-button\" [matTooltip]=\"removeLabel\" [ngClass]=\"{'delete-button-slim': size === 'SLIM'}\" type=\"button\" (click)=\"removeItem(index)\">\n <mat-icon>delete</mat-icon>\n </button>\n</div>\n<div class=\"key-value-item\">\n <input-text\n class=\"input-key\"\n [size]=\"size\"\n [label]=\"keyLabel\"\n [inputOptions]=\"inputOptions\"\n [inputOptionsInitSelected]=\"inputOptionsDefaultSelected\"\n [widthPercentageInputOptions]=\"inputOptionsWidthPercentage\"\n (input)=\"onKeyPressedTemporaryKeyFn()\"\n [(ngModel)]=\"temporaryKey\">\n </input-text>\n <input-text\n class=\"input-value\"\n [size]=\"size\"\n [label]=\"valueLabel\"\n [(ngModel)]=\"temporaryValue\">\n </input-text>\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"] }]
76
- }], propDecorators: { items: [{
85
+ args: [{ selector: 'key-value-input', template: "<div class=\"key-value-item\" *ngFor=\"let item of items; let index = index\">\n <input-text\n [componentId]=\"getComponentId('key', index)\"\n class=\"input-key\"\n [size]=\"size\"\n [label]=\"keyLabel\"\n [inputOptions]=\"inputOptions\"\n [inputOptionsInitSelected]=\"item.type\"\n [widthPercentageInputOptions]=\"inputOptionsWidthPercentage\"\n [(ngModel)]=\"item[keyAttributeName]\"\n (optionChanged)=\"inputOptionChanged($event, index)\"\n (onDropEvent)=\"onKeyDrop(item, $event)\">\n </input-text>\n <input-text\n class=\"input-value\"\n [size]=\"size\"\n [label]=\"valueLabel\"\n [(ngModel)]=\"item[valueAttributeName]\"\n (onDropEvent)=\"onValueDrop(item, $event)\">\n </input-text>\n <button class=\"delete-button\" [matTooltip]=\"removeLabel\" [ngClass]=\"{'delete-button-slim': size === 'SLIM'}\" type=\"button\" (click)=\"removeItem(index)\">\n <mat-icon>delete</mat-icon>\n </button>\n</div>\n<div class=\"key-value-item\">\n <input-text\n class=\"input-key\"\n [size]=\"size\"\n [label]=\"keyLabel\"\n [inputOptions]=\"inputOptions\"\n [inputOptionsInitSelected]=\"inputOptionsDefaultSelected\"\n [widthPercentageInputOptions]=\"inputOptionsWidthPercentage\"\n (input)=\"onKeyPressedTemporaryKeyFn()\"\n (optionChanged)=\"temporaryItemOptionChanged($event)\"\n [(ngModel)]=\"temporaryItem[this.keyAttributeName]\">\n </input-text>\n <input-text\n class=\"input-value\"\n [size]=\"size\"\n [label]=\"valueLabel\"\n [(ngModel)]=\"temporaryItem[this.valueAttributeName]\">\n </input-text>\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"] }]
86
+ }], propDecorators: { componentId: [{
87
+ type: Input
88
+ }], items: [{
77
89
  type: Input
78
90
  }], size: [{
79
91
  type: Input
@@ -98,4 +110,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
98
110
  }], itemsChange: [{
99
111
  type: Output
100
112
  }] } });
101
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2V5LXZhbHVlLWlucHV0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2lucHV0cy9zcmMvaW5wdXQta2V5LXZhbHVlL2tleS12YWx1ZS1pbnB1dC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9pbnB1dHMvc3JjL2lucHV0LWtleS12YWx1ZS9rZXktdmFsdWUtaW5wdXQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUUvRSxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQy9CLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7OztBQU85QyxNQUthLHNCQUFzQjtJQUV4QixLQUFLLEdBQXdCLEVBQUUsQ0FBQTtJQUMvQixJQUFJLEdBQXVCLFNBQVMsQ0FBQTtJQUNwQyxnQkFBZ0IsR0FBVyxLQUFLLENBQUE7SUFDaEMsa0JBQWtCLEdBQVcsT0FBTyxDQUFBO0lBQ3BDLFFBQVEsR0FBVyxLQUFLLENBQUE7SUFDeEIsVUFBVSxHQUFXLE9BQU8sQ0FBQTtJQUM1QixXQUFXLEdBQVcsUUFBUSxDQUFBO0lBQzlCLDJCQUEyQixDQUFRO0lBQ25DLDJCQUEyQixDQUFRO0lBQ25DLFlBQVksR0FBRyxFQUFFLENBQUE7SUFDakIsUUFBUSxDQUFxRDtJQUM1RCxXQUFXLEdBQXNDLElBQUksWUFBWSxFQUF1QixDQUFBO0lBRTNGLFlBQVksQ0FBUztJQUNyQixjQUFjLENBQVM7SUFDYix3QkFBd0IsR0FBa0IsSUFBSSxPQUFPLEVBQVEsQ0FBQTtJQUV2RSxRQUFRO1FBQ2IsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUU7WUFDZixJQUFJLENBQUMsS0FBSyxHQUFHLEVBQUUsQ0FBQTtZQUNmLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQTtTQUNsQztRQUNELElBQUksQ0FBQywyQkFBMkIsS0FBSyxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsS0FBSyxDQUFBO1FBQ2xFLElBQUksQ0FBQyx3QkFBd0I7YUFDMUIsSUFBSSxDQUFDLFlBQVksQ0FBQyxHQUFHLENBQUMsQ0FBQzthQUN2QixTQUFTLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxDQUFDLDRCQUE0QixFQUFFLENBQUE7WUFDbkMsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFBO1FBQ3hCLENBQUMsQ0FBQyxDQUFBO0lBQ04sQ0FBQztJQUVNLFVBQVUsQ0FBQyxLQUFhO1FBQzdCLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQztJQUM5QixDQUFDO0lBRU0sa0JBQWtCLENBQUMsS0FBYSxFQUFFLEtBQWE7UUFDcEQsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQyxJQUFJLEdBQUcsS0FBSyxDQUFDO0lBQ2pDLENBQUM7SUFFTSxTQUFTLENBQUMsS0FBd0IsRUFBRSxNQUFvQjtRQUM3RCxLQUFLLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLEVBQUUsS0FBSyxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDLENBQUE7SUFDcEYsQ0FBQztJQUVNLFdBQVcsQ0FBQyxLQUF3QixFQUFFLE1BQW9CO1FBQy9ELEtBQUssQ0FBQyxJQUFJLENBQUMsa0JBQWtCLENBQUMsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLE1BQU0sRUFBRSxLQUFLLENBQUMsSUFBSSxDQUFDLGtCQUFrQixDQUFDLENBQUMsQ0FBQTtJQUN4RixDQUFDO0lBRU0sNEJBQTRCO1FBQ2pDLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDO1lBQ2QsSUFBSSxFQUFFLElBQUksQ0FBQywyQkFBMkI7WUFDdEMsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsRUFBRSxJQUFJLENBQUMsWUFBWTtZQUMxQyxDQUFDLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxFQUFFLElBQUksQ0FBQyxjQUFjO1NBQy9DLENBQUMsQ0FBQTtRQUNGLElBQUksQ0FBQyxZQUFZLEdBQUcsRUFBRSxDQUFBO1FBQ3RCLElBQUksQ0FBQyxjQUFjLEdBQUcsRUFBRSxDQUFBO0lBQzFCLENBQUM7SUFFTSxlQUFlO1FBQ3BCLFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDZCxNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUE7WUFDbkMsUUFBUSxDQUFDLGNBQWMsQ0FBQyxPQUFPLEtBQUssUUFBUSxDQUFDLENBQUMsS0FBSyxFQUFFLENBQUE7UUFDdkQsQ0FBQyxDQUFDLENBQUE7SUFDSixDQUFDO0lBRU0sMEJBQTBCO1FBQy9CLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxJQUFJLEVBQUUsQ0FBQTtJQUN0QyxDQUFDO3VHQXBFVSxzQkFBc0I7MkZBQXRCLHNCQUFzQixrZENmbkMsZzlDQTJDQTs7U0Q1QmEsc0JBQXNCOzJGQUF0QixzQkFBc0I7a0JBTGxDLFNBQVM7K0JBQ0UsaUJBQWlCOzhCQU1sQixLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFDRyxrQkFBa0I7c0JBQTFCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csMkJBQTJCO3NCQUFuQyxLQUFLO2dCQUNHLDJCQUEyQjtzQkFBbkMsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0ksV0FBVztzQkFBcEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IERuZERyb3BFdmVudCB9IGZyb20gJ25neC1kcmFnLWRyb3AnO1xuaW1wb3J0IHsgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgZGVib3VuY2VUaW1lIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuXG5leHBvcnQgaW50ZXJmYWNlIEtleVZhbHVlSW5wdXRUeXBlIHtcbiAgW3g6IHN0cmluZ106IGFueVxuICB0eXBlOiBzdHJpbmdcbn1cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAna2V5LXZhbHVlLWlucHV0JyxcbiAgdGVtcGxhdGVVcmw6ICdrZXktdmFsdWUtaW5wdXQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsna2V5LXZhbHVlLWlucHV0LmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgS2V5VmFsdWVJbnB1dENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgQElucHV0KCkgaXRlbXM6IEtleVZhbHVlSW5wdXRUeXBlW10gPSBbXVxuICBASW5wdXQoKSBzaXplOiAnREVGQVVMVCcgfCAnU0xJTScgPSAnREVGQVVMVCdcbiAgQElucHV0KCkga2V5QXR0cmlidXRlTmFtZTogc3RyaW5nID0gJ2tleSdcbiAgQElucHV0KCkgdmFsdWVBdHRyaWJ1dGVOYW1lOiBzdHJpbmcgPSAndmFsdWUnXG4gIEBJbnB1dCgpIGtleUxhYmVsOiBzdHJpbmcgPSAnS2V5J1xuICBASW5wdXQoKSB2YWx1ZUxhYmVsOiBzdHJpbmcgPSAnVmFsdWUnXG4gIEBJbnB1dCgpIHJlbW92ZUxhYmVsOiBzdHJpbmcgPSAnUmVtb3ZlJ1xuICBASW5wdXQoKSBpbnB1dE9wdGlvbnNXaWR0aFBlcmNlbnRhZ2U6IG51bWJlclxuICBASW5wdXQoKSBpbnB1dE9wdGlvbnNEZWZhdWx0U2VsZWN0ZWQ6IHN0cmluZ1xuICBASW5wdXQoKSBpbnB1dE9wdGlvbnMgPSBbXVxuICBASW5wdXQoKSBvbkRyb3BGbjogKCRldmVudDogRG5kRHJvcEV2ZW50LCBhdHRyaWJ1dGU6IHN0cmluZykgPT4gc3RyaW5nXG4gIEBPdXRwdXQoKSBpdGVtc0NoYW5nZTogRXZlbnRFbWl0dGVyPEtleVZhbHVlSW5wdXRUeXBlW10+ID0gbmV3IEV2ZW50RW1pdHRlcjxLZXlWYWx1ZUlucHV0VHlwZVtdPigpXG5cbiAgcHVibGljIHRlbXBvcmFyeUtleTogc3RyaW5nO1xuICBwdWJsaWMgdGVtcG9yYXJ5VmFsdWU6IHN0cmluZztcbiAgcHJpdmF0ZSByZWFkb25seSBvbktleVByZXNzZWRUZW1wb3JhcnlLZXk6IFN1YmplY3Q8dm9pZD4gPSBuZXcgU3ViamVjdDx2b2lkPigpXG5cbiAgcHVibGljIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIGlmICghdGhpcy5pdGVtcykge1xuICAgICAgdGhpcy5pdGVtcyA9IFtdXG4gICAgICB0aGlzLml0ZW1zQ2hhbmdlLmVtaXQodGhpcy5pdGVtcylcbiAgICB9XG4gICAgdGhpcy5pbnB1dE9wdGlvbnNEZWZhdWx0U2VsZWN0ZWQgfHw9IHRoaXMuaW5wdXRPcHRpb25zPy5bMF0/LnZhbHVlXG4gICAgdGhpcy5vbktleVByZXNzZWRUZW1wb3JhcnlLZXlcbiAgICAgIC5waXBlKGRlYm91bmNlVGltZSgxMDApKVxuICAgICAgLnN1YnNjcmliZSgoKSA9PiB7XG4gICAgICAgIHRoaXMuYWRkVGVtcG9yYXJ5QXR0cmlidXRlVG9JdGVtcygpXG4gICAgICAgIHRoaXMuZm9jdXNPbkxhc3RJdGVtKClcbiAgICAgIH0pXG4gIH1cblxuICBwdWJsaWMgcmVtb3ZlSXRlbShpbmRleDogbnVtYmVyKTogdm9pZCB7XG4gICAgdGhpcy5pdGVtcy5zcGxpY2UoaW5kZXgsIDEpO1xuICB9XG5cbiAgcHVibGljIGlucHV0T3B0aW9uQ2hhbmdlZChldmVudDogc3RyaW5nLCBpbmRleDogbnVtYmVyKTogdm9pZCB7XG4gICAgdGhpcy5pdGVtc1tpbmRleF0udHlwZSA9IGV2ZW50O1xuICB9XG5cbiAgcHVibGljIG9uS2V5RHJvcChtb2RlbDogS2V5VmFsdWVJbnB1dFR5cGUsICRldmVudDogRG5kRHJvcEV2ZW50KTogdm9pZCB7XG4gICAgbW9kZWxbdGhpcy5rZXlBdHRyaWJ1dGVOYW1lXSA9IHRoaXMub25Ecm9wRm4oJGV2ZW50LCBtb2RlbFt0aGlzLmtleUF0dHJpYnV0ZU5hbWVdKVxuICB9XG5cbiAgcHVibGljIG9uVmFsdWVEcm9wKG1vZGVsOiBLZXlWYWx1ZUlucHV0VHlwZSwgJGV2ZW50OiBEbmREcm9wRXZlbnQpOiB2b2lkIHtcbiAgICBtb2RlbFt0aGlzLnZhbHVlQXR0cmlidXRlTmFtZV0gPSB0aGlzLm9uRHJvcEZuKCRldmVudCwgbW9kZWxbdGhpcy52YWx1ZUF0dHJpYnV0ZU5hbWVdKVxuICB9XG5cbiAgcHVibGljIGFkZFRlbXBvcmFyeUF0dHJpYnV0ZVRvSXRlbXMoKTogdm9pZCB7XG4gICAgdGhpcy5pdGVtcy5wdXNoKHtcbiAgICAgIHR5cGU6IHRoaXMuaW5wdXRPcHRpb25zRGVmYXVsdFNlbGVjdGVkLFxuICAgICAgW3RoaXMua2V5QXR0cmlidXRlTmFtZV06IHRoaXMudGVtcG9yYXJ5S2V5LFxuICAgICAgW3RoaXMudmFsdWVBdHRyaWJ1dGVOYW1lXTogdGhpcy50ZW1wb3JhcnlWYWx1ZVxuICAgIH0pXG4gICAgdGhpcy50ZW1wb3JhcnlLZXkgPSAnJ1xuICAgIHRoaXMudGVtcG9yYXJ5VmFsdWUgPSAnJ1xuICB9XG5cbiAgcHVibGljIGZvY3VzT25MYXN0SXRlbSgpOiB2b2lkIHtcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIGNvbnN0IGluZGV4ID0gdGhpcy5pdGVtcy5sZW5ndGggLSAxXG4gICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChga2V5LSR7aW5kZXh9LWlucHV0YCkuZm9jdXMoKVxuICAgIH0pXG4gIH1cblxuICBwdWJsaWMgb25LZXlQcmVzc2VkVGVtcG9yYXJ5S2V5Rm4oKTogdm9pZCB7XG4gICAgdGhpcy5vbktleVByZXNzZWRUZW1wb3JhcnlLZXkubmV4dCgpXG4gIH1cblxufVxuIiwiPGRpdiBjbGFzcz1cImtleS12YWx1ZS1pdGVtXCIgKm5nRm9yPVwibGV0IGl0ZW0gb2YgaXRlbXM7IGxldCBpbmRleCA9IGluZGV4XCI+XG4gIDxpbnB1dC10ZXh0XG4gICAgW2NvbXBvbmVudElkXT1cIidrZXktJyArIGluZGV4XCJcbiAgICBjbGFzcz1cImlucHV0LWtleVwiXG4gICAgW3NpemVdPVwic2l6ZVwiXG4gICAgW2xhYmVsXT1cImtleUxhYmVsXCJcbiAgICBbaW5wdXRPcHRpb25zXT1cImlucHV0T3B0aW9uc1wiXG4gICAgW2lucHV0T3B0aW9uc0luaXRTZWxlY3RlZF09XCJpdGVtLnR5cGVcIlxuICAgIFt3aWR0aFBlcmNlbnRhZ2VJbnB1dE9wdGlvbnNdPVwiaW5wdXRPcHRpb25zV2lkdGhQZXJjZW50YWdlXCJcbiAgICBbKG5nTW9kZWwpXT1cIml0ZW1ba2V5QXR0cmlidXRlTmFtZV1cIlxuICAgIChvcHRpb25DaGFuZ2VkKT1cImlucHV0T3B0aW9uQ2hhbmdlZCgkZXZlbnQsIGluZGV4KVwiXG4gICAgKG9uRHJvcEV2ZW50KT1cIm9uS2V5RHJvcChpdGVtLCAkZXZlbnQpXCI+XG4gIDwvaW5wdXQtdGV4dD5cbiAgPGlucHV0LXRleHRcbiAgICBjbGFzcz1cImlucHV0LXZhbHVlXCJcbiAgICBbc2l6ZV09XCJzaXplXCJcbiAgICBbbGFiZWxdPVwidmFsdWVMYWJlbFwiXG4gICAgWyhuZ01vZGVsKV09XCJpdGVtW3ZhbHVlQXR0cmlidXRlTmFtZV1cIlxuICAgIChvbkRyb3BFdmVudCk9XCJvblZhbHVlRHJvcChpdGVtLCAkZXZlbnQpXCI+XG4gIDwvaW5wdXQtdGV4dD5cbiAgPGJ1dHRvbiBjbGFzcz1cImRlbGV0ZS1idXR0b25cIiBbbWF0VG9vbHRpcF09XCJyZW1vdmVMYWJlbFwiIFtuZ0NsYXNzXT1cInsnZGVsZXRlLWJ1dHRvbi1zbGltJzogc2l6ZSA9PT0gJ1NMSU0nfVwiIHR5cGU9XCJidXR0b25cIiAoY2xpY2spPVwicmVtb3ZlSXRlbShpbmRleClcIj5cbiAgICA8bWF0LWljb24+ZGVsZXRlPC9tYXQtaWNvbj5cbiAgPC9idXR0b24+XG48L2Rpdj5cbjxkaXYgY2xhc3M9XCJrZXktdmFsdWUtaXRlbVwiPlxuICA8aW5wdXQtdGV4dFxuICAgIGNsYXNzPVwiaW5wdXQta2V5XCJcbiAgICBbc2l6ZV09XCJzaXplXCJcbiAgICBbbGFiZWxdPVwia2V5TGFiZWxcIlxuICAgIFtpbnB1dE9wdGlvbnNdPVwiaW5wdXRPcHRpb25zXCJcbiAgICBbaW5wdXRPcHRpb25zSW5pdFNlbGVjdGVkXT1cImlucHV0T3B0aW9uc0RlZmF1bHRTZWxlY3RlZFwiXG4gICAgW3dpZHRoUGVyY2VudGFnZUlucHV0T3B0aW9uc109XCJpbnB1dE9wdGlvbnNXaWR0aFBlcmNlbnRhZ2VcIlxuICAgIChpbnB1dCk9XCJvbktleVByZXNzZWRUZW1wb3JhcnlLZXlGbigpXCJcbiAgICBbKG5nTW9kZWwpXT1cInRlbXBvcmFyeUtleVwiPlxuICA8L2lucHV0LXRleHQ+XG4gIDxpbnB1dC10ZXh0XG4gICAgY2xhc3M9XCJpbnB1dC12YWx1ZVwiXG4gICAgW3NpemVdPVwic2l6ZVwiXG4gICAgW2xhYmVsXT1cInZhbHVlTGFiZWxcIlxuICAgIFsobmdNb2RlbCldPVwidGVtcG9yYXJ5VmFsdWVcIj5cbiAgPC9pbnB1dC10ZXh0PlxuPC9kaXY+XG5cbiJdfQ==
113
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2V5LXZhbHVlLWlucHV0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2lucHV0cy9zcmMvaW5wdXQta2V5LXZhbHVlL2tleS12YWx1ZS1pbnB1dC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9pbnB1dHMvc3JjL2lucHV0LWtleS12YWx1ZS9rZXktdmFsdWUtaW5wdXQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUUvRSxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQy9CLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7OztBQU85QyxNQUthLHNCQUFzQjtJQUV4QixXQUFXLENBQVE7SUFDbkIsS0FBSyxHQUF3QixFQUFFLENBQUE7SUFDL0IsSUFBSSxHQUF1QixTQUFTLENBQUE7SUFDcEMsZ0JBQWdCLEdBQVcsS0FBSyxDQUFBO0lBQ2hDLGtCQUFrQixHQUFXLE9BQU8sQ0FBQTtJQUNwQyxRQUFRLEdBQVcsS0FBSyxDQUFBO0lBQ3hCLFVBQVUsR0FBVyxPQUFPLENBQUE7SUFDNUIsV0FBVyxHQUFXLFFBQVEsQ0FBQTtJQUM5QiwyQkFBMkIsQ0FBUTtJQUNuQywyQkFBMkIsQ0FBUTtJQUNuQyxZQUFZLEdBQUcsRUFBRSxDQUFBO0lBQ2pCLFFBQVEsQ0FBcUQ7SUFDNUQsV0FBVyxHQUFzQyxJQUFJLFlBQVksRUFBdUIsQ0FBQTtJQUUzRixhQUFhLENBQW1CO0lBQ3RCLHdCQUF3QixHQUFrQixJQUFJLE9BQU8sRUFBUSxDQUFBO0lBRXRFLDBCQUEwQjtRQUNoQyxPQUFPO1lBQ0wsSUFBSSxFQUFFLElBQUksQ0FBQywyQkFBMkI7WUFDdEMsQ0FBQyxJQUFJLENBQUMsZ0JBQWdC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LHNCQUFzQiw4ZUNmbkMsMGtEQTRDQTs7U0Q3QmEsc0JBQXNCOzJGQUF0QixzQkFBc0I7a0JBTGxDLFNBQVM7K0JBQ0UsaUJBQWlCOzhCQU1sQixXQUFXO3NCQUFuQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csZ0JBQWdCO3NCQUF4QixLQUFLO2dCQUNHLGtCQUFrQjtzQkFBMUIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRywyQkFBMkI7c0JBQW5DLEtBQUs7Z0JBQ0csMkJBQTJCO3NCQUFuQyxLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDSSxXQUFXO3NCQUFwQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRG5kRHJvcEV2ZW50IH0gZnJvbSAnbmd4LWRyYWctZHJvcCc7XG5pbXBvcnQgeyBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBkZWJvdW5jZVRpbWUgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgS2V5VmFsdWVJbnB1dFR5cGUge1xuICBbeDogc3RyaW5nXTogYW55XG4gIHR5cGU6IHN0cmluZ1xufVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdrZXktdmFsdWUtaW5wdXQnLFxuICB0ZW1wbGF0ZVVybDogJ2tleS12YWx1ZS1pbnB1dC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWydrZXktdmFsdWUtaW5wdXQuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBLZXlWYWx1ZUlucHV0Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICBASW5wdXQoKSBjb21wb25lbnRJZDogc3RyaW5nXG4gIEBJbnB1dCgpIGl0ZW1zOiBLZXlWYWx1ZUlucHV0VHlwZVtdID0gW11cbiAgQElucHV0KCkgc2l6ZTogJ0RFRkFVTFQnIHwgJ1NMSU0nID0gJ0RFRkFVTFQnXG4gIEBJbnB1dCgpIGtleUF0dHJpYnV0ZU5hbWU6IHN0cmluZyA9ICdrZXknXG4gIEBJbnB1dCgpIHZhbHVlQXR0cmlidXRlTmFtZTogc3RyaW5nID0gJ3ZhbHVlJ1xuICBASW5wdXQoKSBrZXlMYWJlbDogc3RyaW5nID0gJ0tleSdcbiAgQElucHV0KCkgdmFsdWVMYWJlbDogc3RyaW5nID0gJ1ZhbHVlJ1xuICBASW5wdXQoKSByZW1vdmVMYWJlbDogc3RyaW5nID0gJ1JlbW92ZSdcbiAgQElucHV0KCkgaW5wdXRPcHRpb25zV2lkdGhQZXJjZW50YWdlOiBudW1iZXJcbiAgQElucHV0KCkgaW5wdXRPcHRpb25zRGVmYXVsdFNlbGVjdGVkOiBzdHJpbmdcbiAgQElucHV0KCkgaW5wdXRPcHRpb25zID0gW11cbiAgQElucHV0KCkgb25Ecm9wRm46ICgkZXZlbnQ6IERuZERyb3BFdmVudCwgYXR0cmlidXRlOiBzdHJpbmcpID0+IHN0cmluZ1xuICBAT3V0cHV0KCkgaXRlbXNDaGFuZ2U6IEV2ZW50RW1pdHRlcjxLZXlWYWx1ZUlucHV0VHlwZVtdPiA9IG5ldyBFdmVudEVtaXR0ZXI8S2V5VmFsdWVJbnB1dFR5cGVbXT4oKVxuXG4gIHB1YmxpYyB0ZW1wb3JhcnlJdGVtOiBLZXlWYWx1ZUlucHV0VHlwZVxuICBwcml2YXRlIHJlYWRvbmx5IG9uS2V5UHJlc3NlZFRlbXBvcmFyeUtleTogU3ViamVjdDx2b2lkPiA9IG5ldyBTdWJqZWN0PHZvaWQ+KClcblxuICBwcml2YXRlIGNyZWF0ZURlZmF1bHRUZW1wb3JhcnlJdGVtKCk6IEtleVZhbHVlSW5wdXRUeXBlIHtcbiAgICByZXR1cm4ge1xuICAgICAgdHlwZTogdGhpcy5pbnB1dE9wdGlvbnNEZWZhdWx0U2VsZWN0ZWQsXG4gICAgICBbdGhpcy5rZXlBdHRyaWJ1dGVOYW1lXTogJycsXG4gICAgICBbdGhpcy52YWx1ZUF0dHJpYnV0ZU5hbWVdOiAnJ1xuICAgIH07XG4gIH1cblxuICBwdWJsaWMgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy50ZW1wb3JhcnlJdGVtID0gdGhpcy5jcmVhdGVEZWZhdWx0VGVtcG9yYXJ5SXRlbSgpXG4gICAgaWYgKCF0aGlzLml0ZW1zKSB7XG4gICAgICB0aGlzLml0ZW1zID0gW11cbiAgICAgIHRoaXMuaXRlbXNDaGFuZ2UuZW1pdCh0aGlzLml0ZW1zKVxuICAgIH1cbiAgICB0aGlzLmlucHV0T3B0aW9uc0RlZmF1bHRTZWxlY3RlZCB8fD0gdGhpcy5pbnB1dE9wdGlvbnM/LlswXT8udmFsdWVcbiAgICB0aGlzLm9uS2V5UHJlc3NlZFRlbXBvcmFyeUtleVxuICAgICAgLnBpcGUoZGVib3VuY2VUaW1lKDMwMCkpXG4gICAgICAuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgICAgdGhpcy5hZGRUZW1wb3JhcnlBdHRyaWJ1dGVUb0l0ZW1zKClcbiAgICAgICAgdGhpcy5mb2N1c09uTGFzdEl0ZW0oKVxuICAgICAgfSlcbiAgfVxuXG4gIHB1YmxpYyByZW1vdmVJdGVtKGluZGV4OiBudW1iZXIpOiB2b2lkIHtcbiAgICB0aGlzLml0ZW1zLnNwbGljZShpbmRleCwgMSk7XG4gIH1cblxuICBwdWJsaWMgaW5wdXRPcHRpb25DaGFuZ2VkKGV2ZW50OiBzdHJpbmcsIGluZGV4OiBudW1iZXIpOiB2b2lkIHtcbiAgICB0aGlzLml0ZW1zW2luZGV4XS50eXBlID0gZXZlbnQ7XG4gIH1cblxuICBwdWJsaWMgb25LZXlEcm9wKG1vZGVsOiBLZXlWYWx1ZUlucHV0VHlwZSwgJGV2ZW50OiBEbmREcm9wRXZlbnQpOiB2b2lkIHtcbiAgICBtb2RlbFt0aGlzLmtleUF0dHJpYnV0ZU5hbWVdID0gdGhpcy5vbkRyb3BGbigkZXZlbnQsIG1vZGVsW3RoaXMua2V5QXR0cmlidXRlTmFtZV0pXG4gIH1cblxuICBwdWJsaWMgb25WYWx1ZURyb3AobW9kZWw6IEtleVZhbHVlSW5wdXRUeXBlLCAkZXZlbnQ6IERuZERyb3BFdmVudCk6IHZvaWQge1xuICAgIG1vZGVsW3RoaXMudmFsdWVBdHRyaWJ1dGVOYW1lXSA9IHRoaXMub25Ecm9wRm4oJGV2ZW50LCBtb2RlbFt0aGlzLnZhbHVlQXR0cmlidXRlTmFtZV0pXG4gIH1cblxuICBwdWJsaWMgYWRkVGVtcG9yYXJ5QXR0cmlidXRlVG9JdGVtcygpOiB2b2lkIHtcbiAgICB0aGlzLml0ZW1zLnB1c2goeyAuLi50aGlzLnRlbXBvcmFyeUl0ZW0gfSlcbiAgICB0aGlzLnRlbXBvcmFyeUl0ZW0gPSB0aGlzLmNyZWF0ZURlZmF1bHRUZW1wb3JhcnlJdGVtKClcbiAgfVxuXG4gIHB1YmxpYyBmb2N1c09uTGFzdEl0ZW0oKTogdm9pZCB7XG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICBjb25zdCBpbmRleCA9IHRoaXMuaXRlbXMubGVuZ3RoIC0gMVxuICAgICAgY29uc3QgZm9jdXNJZCA9IGAke3RoaXMuZ2V0Q29tcG9uZW50SWQoJ2tleScsIGluZGV4KX0taW5wdXRgXG4gICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChmb2N1c0lkKS5mb2N1cygpXG4gICAgfSlcbiAgfVxuXG4gIHB1YmxpYyBvbktleVByZXNzZWRUZW1wb3JhcnlLZXlGbigpOiB2b2lkIHtcbiAgICB0aGlzLm9uS2V5UHJlc3NlZFRlbXBvcmFyeUtleS5uZXh0KClcbiAgfVxuXG4gIHB1YmxpYyB0ZW1wb3JhcnlJdGVtT3B0aW9uQ2hhbmdlZChldmVudDogc3RyaW5nKTogdm9pZCB7XG4gICAgdGhpcy50ZW1wb3JhcnlJdGVtLnR5cGUgPSBldmVudFxuICB9XG5cbiAgcHVibGljIGdldENvbXBvbmVudElkKGlkOiBzdHJpbmcsIGluZGV4OiBudW1iZXIpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLmNvbXBvbmVudElkID8gYCR7dGhpcy5jb21wb25lbnRJZH0tJHtpZH0tJHtpbmRleH1gIDogYCR7aWR9LSR7aW5kZXh9YFxuICB9XG5cbn1cbiIsIjxkaXYgY2xhc3M9XCJrZXktdmFsdWUtaXRlbVwiICpuZ0Zvcj1cImxldCBpdGVtIG9mIGl0ZW1zOyBsZXQgaW5kZXggPSBpbmRleFwiPlxuICA8aW5wdXQtdGV4dFxuICAgIFtjb21wb25lbnRJZF09XCJnZXRDb21wb25lbnRJZCgna2V5JywgaW5kZXgpXCJcbiAgICBjbGFzcz1cImlucHV0LWtleVwiXG4gICAgW3NpemVdPVwic2l6ZVwiXG4gICAgW2xhYmVsXT1cImtleUxhYmVsXCJcbiAgICBbaW5wdXRPcHRpb25zXT1cImlucHV0T3B0aW9uc1wiXG4gICAgW2lucHV0T3B0aW9uc0luaXRTZWxlY3RlZF09XCJpdGVtLnR5cGVcIlxuICAgIFt3aWR0aFBlcmNlbnRhZ2VJbnB1dE9wdGlvbnNdPVwiaW5wdXRPcHRpb25zV2lkdGhQZXJjZW50YWdlXCJcbiAgICBbKG5nTW9kZWwpXT1cIml0ZW1ba2V5QXR0cmlidXRlTmFtZV1cIlxuICAgIChvcHRpb25DaGFuZ2VkKT1cImlucHV0T3B0aW9uQ2hhbmdlZCgkZXZlbnQsIGluZGV4KVwiXG4gICAgKG9uRHJvcEV2ZW50KT1cIm9uS2V5RHJvcChpdGVtLCAkZXZlbnQpXCI+XG4gIDwvaW5wdXQtdGV4dD5cbiAgPGlucHV0LXRleHRcbiAgICBjbGFzcz1cImlucHV0LXZhbHVlXCJcbiAgICBbc2l6ZV09XCJzaXplXCJcbiAgICBbbGFiZWxdPVwidmFsdWVMYWJlbFwiXG4gICAgWyhuZ01vZGVsKV09XCJpdGVtW3ZhbHVlQXR0cmlidXRlTmFtZV1cIlxuICAgIChvbkRyb3BFdmVudCk9XCJvblZhbHVlRHJvcChpdGVtLCAkZXZlbnQpXCI+XG4gIDwvaW5wdXQtdGV4dD5cbiAgPGJ1dHRvbiBjbGFzcz1cImRlbGV0ZS1idXR0b25cIiBbbWF0VG9vbHRpcF09XCJyZW1vdmVMYWJlbFwiIFtuZ0NsYXNzXT1cInsnZGVsZXRlLWJ1dHRvbi1zbGltJzogc2l6ZSA9PT0gJ1NMSU0nfVwiIHR5cGU9XCJidXR0b25cIiAoY2xpY2spPVwicmVtb3ZlSXRlbShpbmRleClcIj5cbiAgICA8bWF0LWljb24+ZGVsZXRlPC9tYXQtaWNvbj5cbiAgPC9idXR0b24+XG48L2Rpdj5cbjxkaXYgY2xhc3M9XCJrZXktdmFsdWUtaXRlbVwiPlxuICA8aW5wdXQtdGV4dFxuICAgIGNsYXNzPVwiaW5wdXQta2V5XCJcbiAgICBbc2l6ZV09XCJzaXplXCJcbiAgICBbbGFiZWxdPVwia2V5TGFiZWxcIlxuICAgIFtpbnB1dE9wdGlvbnNdPVwiaW5wdXRPcHRpb25zXCJcbiAgICBbaW5wdXRPcHRpb25zSW5pdFNlbGVjdGVkXT1cImlucHV0T3B0aW9uc0RlZmF1bHRTZWxlY3RlZFwiXG4gICAgW3dpZHRoUGVyY2VudGFnZUlucHV0T3B0aW9uc109XCJpbnB1dE9wdGlvbnNXaWR0aFBlcmNlbnRhZ2VcIlxuICAgIChpbnB1dCk9XCJvbktleVByZXNzZWRUZW1wb3JhcnlLZXlGbigpXCJcbiAgICAob3B0aW9uQ2hhbmdlZCk9XCJ0ZW1wb3JhcnlJdGVtT3B0aW9uQ2hhbmdlZCgkZXZlbnQpXCJcbiAgICBbKG5nTW9kZWwpXT1cInRlbXBvcmFyeUl0ZW1bdGhpcy5rZXlBdHRyaWJ1dGVOYW1lXVwiPlxuICA8L2lucHV0LXRleHQ+XG4gIDxpbnB1dC10ZXh0XG4gICAgY2xhc3M9XCJpbnB1dC12YWx1ZVwiXG4gICAgW3NpemVdPVwic2l6ZVwiXG4gICAgW2xhYmVsXT1cInZhbHVlTGFiZWxcIlxuICAgIFsobmdNb2RlbCldPVwidGVtcG9yYXJ5SXRlbVt0aGlzLnZhbHVlQXR0cmlidXRlTmFtZV1cIj5cbiAgPC9pbnB1dC10ZXh0PlxuPC9kaXY+XG5cbiJdfQ==
@@ -2140,6 +2140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
2140
2140
  }] } });
2141
2141
 
2142
2142
  class KeyValueInputComponent {
2143
+ componentId;
2143
2144
  items = [];
2144
2145
  size = 'DEFAULT';
2145
2146
  keyAttributeName = 'key';
@@ -2152,17 +2153,24 @@ class KeyValueInputComponent {
2152
2153
  inputOptions = [];
2153
2154
  onDropFn;
2154
2155
  itemsChange = new EventEmitter();
2155
- temporaryKey;
2156
- temporaryValue;
2156
+ temporaryItem;
2157
2157
  onKeyPressedTemporaryKey = new Subject();
2158
+ createDefaultTemporaryItem() {
2159
+ return {
2160
+ type: this.inputOptionsDefaultSelected,
2161
+ [this.keyAttributeName]: '',
2162
+ [this.valueAttributeName]: ''
2163
+ };
2164
+ }
2158
2165
  ngOnInit() {
2166
+ this.temporaryItem = this.createDefaultTemporaryItem();
2159
2167
  if (!this.items) {
2160
2168
  this.items = [];
2161
2169
  this.itemsChange.emit(this.items);
2162
2170
  }
2163
2171
  this.inputOptionsDefaultSelected ||= this.inputOptions?.[0]?.value;
2164
2172
  this.onKeyPressedTemporaryKey
2165
- .pipe(debounceTime(100))
2173
+ .pipe(debounceTime(300))
2166
2174
  .subscribe(() => {
2167
2175
  this.addTemporaryAttributeToItems();
2168
2176
  this.focusOnLastItem();
@@ -2181,30 +2189,34 @@ class KeyValueInputComponent {
2181
2189
  model[this.valueAttributeName] = this.onDropFn($event, model[this.valueAttributeName]);
2182
2190
  }
2183
2191
  addTemporaryAttributeToItems() {
2184
- this.items.push({
2185
- type: this.inputOptionsDefaultSelected,
2186
- [this.keyAttributeName]: this.temporaryKey,
2187
- [this.valueAttributeName]: this.temporaryValue
2188
- });
2189
- this.temporaryKey = '';
2190
- this.temporaryValue = '';
2192
+ this.items.push({ ...this.temporaryItem });
2193
+ this.temporaryItem = this.createDefaultTemporaryItem();
2191
2194
  }
2192
2195
  focusOnLastItem() {
2193
2196
  setTimeout(() => {
2194
2197
  const index = this.items.length - 1;
2195
- document.getElementById(`key-${index}-input`).focus();
2198
+ const focusId = `${this.getComponentId('key', index)}-input`;
2199
+ document.getElementById(focusId).focus();
2196
2200
  });
2197
2201
  }
2198
2202
  onKeyPressedTemporaryKeyFn() {
2199
2203
  this.onKeyPressedTemporaryKey.next();
2200
2204
  }
2205
+ temporaryItemOptionChanged(event) {
2206
+ this.temporaryItem.type = event;
2207
+ }
2208
+ getComponentId(id, index) {
2209
+ return this.componentId ? `${this.componentId}-${id}-${index}` : `${id}-${index}`;
2210
+ }
2201
2211
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: KeyValueInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2202
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: KeyValueInputComponent, selector: "key-value-input", inputs: { items: "items", size: "size", keyAttributeName: "keyAttributeName", valueAttributeName: "valueAttributeName", keyLabel: "keyLabel", valueLabel: "valueLabel", removeLabel: "removeLabel", inputOptionsWidthPercentage: "inputOptionsWidthPercentage", inputOptionsDefaultSelected: "inputOptionsDefaultSelected", inputOptions: "inputOptions", onDropFn: "onDropFn" }, outputs: { itemsChange: "itemsChange" }, ngImport: i0, template: "<div class=\"key-value-item\" *ngFor=\"let item of items; let index = index\">\n <input-text\n [componentId]=\"'key-' + index\"\n class=\"input-key\"\n [size]=\"size\"\n [label]=\"keyLabel\"\n [inputOptions]=\"inputOptions\"\n [inputOptionsInitSelected]=\"item.type\"\n [widthPercentageInputOptions]=\"inputOptionsWidthPercentage\"\n [(ngModel)]=\"item[keyAttributeName]\"\n (optionChanged)=\"inputOptionChanged($event, index)\"\n (onDropEvent)=\"onKeyDrop(item, $event)\">\n </input-text>\n <input-text\n class=\"input-value\"\n [size]=\"size\"\n [label]=\"valueLabel\"\n [(ngModel)]=\"item[valueAttributeName]\"\n (onDropEvent)=\"onValueDrop(item, $event)\">\n </input-text>\n <button class=\"delete-button\" [matTooltip]=\"removeLabel\" [ngClass]=\"{'delete-button-slim': size === 'SLIM'}\" type=\"button\" (click)=\"removeItem(index)\">\n <mat-icon>delete</mat-icon>\n </button>\n</div>\n<div class=\"key-value-item\">\n <input-text\n class=\"input-key\"\n [size]=\"size\"\n [label]=\"keyLabel\"\n [inputOptions]=\"inputOptions\"\n [inputOptionsInitSelected]=\"inputOptionsDefaultSelected\"\n [widthPercentageInputOptions]=\"inputOptionsWidthPercentage\"\n (input)=\"onKeyPressedTemporaryKeyFn()\"\n [(ngModel)]=\"temporaryKey\">\n </input-text>\n <input-text\n class=\"input-value\"\n [size]=\"size\"\n [label]=\"valueLabel\"\n [(ngModel)]=\"temporaryValue\">\n </input-text>\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: 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: ["componentId", "label", "disabled", "iconSuffix", "iconPrefix", "autoComplete", "size", "debounceTime", "widthPercentageInputOptions", "inputOptions", "inputOptionsInitSelected"], outputs: ["suffixIconClick", "prefixIconClick", "onDebounce", "optionChanged", "onDropEvent"] }] });
2212
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: KeyValueInputComponent, selector: "key-value-input", inputs: { componentId: "componentId", items: "items", size: "size", keyAttributeName: "keyAttributeName", valueAttributeName: "valueAttributeName", keyLabel: "keyLabel", valueLabel: "valueLabel", removeLabel: "removeLabel", inputOptionsWidthPercentage: "inputOptionsWidthPercentage", inputOptionsDefaultSelected: "inputOptionsDefaultSelected", inputOptions: "inputOptions", onDropFn: "onDropFn" }, outputs: { itemsChange: "itemsChange" }, ngImport: i0, template: "<div class=\"key-value-item\" *ngFor=\"let item of items; let index = index\">\n <input-text\n [componentId]=\"getComponentId('key', index)\"\n class=\"input-key\"\n [size]=\"size\"\n [label]=\"keyLabel\"\n [inputOptions]=\"inputOptions\"\n [inputOptionsInitSelected]=\"item.type\"\n [widthPercentageInputOptions]=\"inputOptionsWidthPercentage\"\n [(ngModel)]=\"item[keyAttributeName]\"\n (optionChanged)=\"inputOptionChanged($event, index)\"\n (onDropEvent)=\"onKeyDrop(item, $event)\">\n </input-text>\n <input-text\n class=\"input-value\"\n [size]=\"size\"\n [label]=\"valueLabel\"\n [(ngModel)]=\"item[valueAttributeName]\"\n (onDropEvent)=\"onValueDrop(item, $event)\">\n </input-text>\n <button class=\"delete-button\" [matTooltip]=\"removeLabel\" [ngClass]=\"{'delete-button-slim': size === 'SLIM'}\" type=\"button\" (click)=\"removeItem(index)\">\n <mat-icon>delete</mat-icon>\n </button>\n</div>\n<div class=\"key-value-item\">\n <input-text\n class=\"input-key\"\n [size]=\"size\"\n [label]=\"keyLabel\"\n [inputOptions]=\"inputOptions\"\n [inputOptionsInitSelected]=\"inputOptionsDefaultSelected\"\n [widthPercentageInputOptions]=\"inputOptionsWidthPercentage\"\n (input)=\"onKeyPressedTemporaryKeyFn()\"\n (optionChanged)=\"temporaryItemOptionChanged($event)\"\n [(ngModel)]=\"temporaryItem[this.keyAttributeName]\">\n </input-text>\n <input-text\n class=\"input-value\"\n [size]=\"size\"\n [label]=\"valueLabel\"\n [(ngModel)]=\"temporaryItem[this.valueAttributeName]\">\n </input-text>\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: 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: ["componentId", "label", "disabled", "iconSuffix", "iconPrefix", "autoComplete", "size", "debounceTime", "widthPercentageInputOptions", "inputOptions", "inputOptionsInitSelected"], outputs: ["suffixIconClick", "prefixIconClick", "onDebounce", "optionChanged", "onDropEvent"] }] });
2203
2213
  }
2204
2214
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: KeyValueInputComponent, decorators: [{
2205
2215
  type: Component,
2206
- args: [{ selector: 'key-value-input', template: "<div class=\"key-value-item\" *ngFor=\"let item of items; let index = index\">\n <input-text\n [componentId]=\"'key-' + index\"\n class=\"input-key\"\n [size]=\"size\"\n [label]=\"keyLabel\"\n [inputOptions]=\"inputOptions\"\n [inputOptionsInitSelected]=\"item.type\"\n [widthPercentageInputOptions]=\"inputOptionsWidthPercentage\"\n [(ngModel)]=\"item[keyAttributeName]\"\n (optionChanged)=\"inputOptionChanged($event, index)\"\n (onDropEvent)=\"onKeyDrop(item, $event)\">\n </input-text>\n <input-text\n class=\"input-value\"\n [size]=\"size\"\n [label]=\"valueLabel\"\n [(ngModel)]=\"item[valueAttributeName]\"\n (onDropEvent)=\"onValueDrop(item, $event)\">\n </input-text>\n <button class=\"delete-button\" [matTooltip]=\"removeLabel\" [ngClass]=\"{'delete-button-slim': size === 'SLIM'}\" type=\"button\" (click)=\"removeItem(index)\">\n <mat-icon>delete</mat-icon>\n </button>\n</div>\n<div class=\"key-value-item\">\n <input-text\n class=\"input-key\"\n [size]=\"size\"\n [label]=\"keyLabel\"\n [inputOptions]=\"inputOptions\"\n [inputOptionsInitSelected]=\"inputOptionsDefaultSelected\"\n [widthPercentageInputOptions]=\"inputOptionsWidthPercentage\"\n (input)=\"onKeyPressedTemporaryKeyFn()\"\n [(ngModel)]=\"temporaryKey\">\n </input-text>\n <input-text\n class=\"input-value\"\n [size]=\"size\"\n [label]=\"valueLabel\"\n [(ngModel)]=\"temporaryValue\">\n </input-text>\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"] }]
2207
- }], propDecorators: { items: [{
2216
+ args: [{ selector: 'key-value-input', template: "<div class=\"key-value-item\" *ngFor=\"let item of items; let index = index\">\n <input-text\n [componentId]=\"getComponentId('key', index)\"\n class=\"input-key\"\n [size]=\"size\"\n [label]=\"keyLabel\"\n [inputOptions]=\"inputOptions\"\n [inputOptionsInitSelected]=\"item.type\"\n [widthPercentageInputOptions]=\"inputOptionsWidthPercentage\"\n [(ngModel)]=\"item[keyAttributeName]\"\n (optionChanged)=\"inputOptionChanged($event, index)\"\n (onDropEvent)=\"onKeyDrop(item, $event)\">\n </input-text>\n <input-text\n class=\"input-value\"\n [size]=\"size\"\n [label]=\"valueLabel\"\n [(ngModel)]=\"item[valueAttributeName]\"\n (onDropEvent)=\"onValueDrop(item, $event)\">\n </input-text>\n <button class=\"delete-button\" [matTooltip]=\"removeLabel\" [ngClass]=\"{'delete-button-slim': size === 'SLIM'}\" type=\"button\" (click)=\"removeItem(index)\">\n <mat-icon>delete</mat-icon>\n </button>\n</div>\n<div class=\"key-value-item\">\n <input-text\n class=\"input-key\"\n [size]=\"size\"\n [label]=\"keyLabel\"\n [inputOptions]=\"inputOptions\"\n [inputOptionsInitSelected]=\"inputOptionsDefaultSelected\"\n [widthPercentageInputOptions]=\"inputOptionsWidthPercentage\"\n (input)=\"onKeyPressedTemporaryKeyFn()\"\n (optionChanged)=\"temporaryItemOptionChanged($event)\"\n [(ngModel)]=\"temporaryItem[this.keyAttributeName]\">\n </input-text>\n <input-text\n class=\"input-value\"\n [size]=\"size\"\n [label]=\"valueLabel\"\n [(ngModel)]=\"temporaryItem[this.valueAttributeName]\">\n </input-text>\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"] }]
2217
+ }], propDecorators: { componentId: [{
2218
+ type: Input
2219
+ }], items: [{
2208
2220
  type: Input
2209
2221
  }], size: [{
2210
2222
  type: Input