@wizishop/angular-components 0.0.202 → 0.0.204

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.
@@ -2,26 +2,36 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
2
2
  import { moveItemInArray } from '@angular/cdk/drag-drop';
3
3
  export class DraganddropListComponent {
4
4
  constructor() {
5
- this.disable = false;
5
+ this.disabled = false;
6
6
  this.backgroundColor = '#fff';
7
7
  this.showTriggerSave = false;
8
8
  this.itemsChange = new EventEmitter();
9
9
  }
10
+ ngOnInit() {
11
+ this.setTempCopy();
12
+ }
10
13
  drop(event) {
11
- if (!this.disable) {
14
+ if (!this.disabled) {
12
15
  moveItemInArray(this.items, event.previousIndex, event.currentIndex);
13
16
  this.itemsChange.emit(this.items);
17
+ this.setTempCopy();
14
18
  }
15
19
  }
16
20
  delete(index) {
17
- if (!this.disable) {
21
+ if (!this.disabled) {
18
22
  this.items = this.items.filter((value, i) => i !== index);
19
23
  this.itemsChange.emit(this.items);
24
+ this.setTempCopy();
20
25
  }
21
26
  }
22
27
  saveField(index, event) {
28
+ this.copyTemps[index] = event.target.value;
29
+ this.itemsChange.emit(this.copyTemps);
30
+ }
31
+ saveFieldEnd(index, event) {
23
32
  this.items[index] = event.target.value;
24
33
  this.itemsChange.emit(this.items);
34
+ this.setTempCopy();
25
35
  }
26
36
  addField() {
27
37
  this.showTriggerSave = true;
@@ -29,22 +39,26 @@ export class DraganddropListComponent {
29
39
  saveNewField(event) {
30
40
  this.items.push(event.target.value);
31
41
  this.itemsChange.emit(this.items);
42
+ this.setTempCopy();
32
43
  this.showTriggerSave = false;
33
44
  }
45
+ setTempCopy() {
46
+ this.copyTemps = Object.assign({}, this.items);
47
+ }
34
48
  }
35
49
  DraganddropListComponent.decorators = [
36
50
  { type: Component, args: [{
37
51
  selector: 'wac-draganddrop-list',
38
- template: "<div class=\"wac-draganddrop-list\" *ngIf=\"!disable\" [style.backgroundColor]=\"backgroundColor\">\n <div class=\"wac-draganddrop-list__wrapper\" [cdkDropListLockAxis]=\"'y'\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n <div class=\"wac-draganddrop-list__wrapper__item\" [style.backgroundColor]=\"backgroundColor\" *ngFor=\"let item of items;let i = index;\" cdkDrag>\n <div>\n <span class=\"wac-draganddrop-list__wrapper__item__icon\">\n <span></span>\n </span>\n <span (mousedown)=\"$event.stopPropagation()\" class=\"wac-draganddrop-list__wrapper__item__input\">\n <wac-input [value]=\"item\" [extraClasses]=\"'transparent'\" (keyup.enter)=\"saveField(i, $event)\" (focusout)=\"saveField(i, $event)\"></wac-input>\n </span>\n </div>\n <div (mousedown)=\"$event.stopPropagation()\">\n <wac-button [iconFontSize]=\"'14px'\" [opacity]=\"true\" [icon]=\"'fa-regular fa-trash-can'\" [extraClasses]=\"'is-danger'\" (click)=\"delete(i)\"></wac-button>\n </div>\n </div>\n <div class=\"wac-draganddrop-list__wrapper__item wac-draganddrop-list__wrapper__item--trigger\" *ngIf=\"showTriggerSave\">\n <div>\n <span class=\"wac-draganddrop-list__wrapper__item__icon\">\n <span></span>\n </span>\n <span class=\"wac-draganddrop-list__wrapper__item__input\">\n <wac-input [extraClasses]=\"'transparent'\" (keyup.enter)=\"saveNewField($event)\" (focusout)=\"saveNewField($event)\"></wac-input>\n </span>\n </div>\n </div>\n </div>\n <div class=\"wac-draganddrop-list__add\" *ngIf=\"max && !showTriggerSave\">\n <div class=\"wac-draganddrop-list__add__btn\" *ngIf=\"max > items.length\">\n <wac-button [extraClasses]=\"'is-success'\" [label]=\"labelBtnAdd\" (click)=\"addField()\"></wac-button>\n </div>\n </div>\n</div>\n\n<div class=\"wac-draganddrop-list wac-draganddrop-list--disabled\" *ngIf=\"disable\">\n <div class=\"wac-draganddrop-list__wrapper\">\n <div class=\"wac-draganddrop-list__wrapper__item\" *ngFor=\"let item of items;let i = index;\">\n <div>\n <span class=\"wac-draganddrop-list__wrapper__item__label\" [innerHTML]=\"item\"></span>\n </div>\n </div>\n </div>\n</div>\n",
52
+ template: "<div class=\"wac-draganddrop-list\" *ngIf=\"!disabled\" [style.backgroundColor]=\"backgroundColor\">\n <div class=\"wac-draganddrop-list__wrapper\" [cdkDropListLockAxis]=\"'y'\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n <div class=\"wac-draganddrop-list__wrapper__item\" [style.backgroundColor]=\"backgroundColor\" *ngFor=\"let item of items;let i = index;\" cdkDrag>\n <div>\n <span class=\"wac-draganddrop-list__wrapper__item__icon\">\n <span></span>\n </span>\n <span (mousedown)=\"$event.stopPropagation()\" class=\"wac-draganddrop-list__wrapper__item__input\">\n <wac-input [value]=\"item\" [extraClasses]=\"'transparent'\" (keydown)=\"saveField(i, $event)\" (focusout)=\"saveFieldEnd(i, $event)\"></wac-input>\n </span>\n </div>\n <div (mousedown)=\"$event.stopPropagation()\">\n <wac-button [iconFontSize]=\"'14px'\" [opacity]=\"true\" [icon]=\"'fa-regular fa-trash-can'\" [extraClasses]=\"'is-danger'\" (click)=\"delete(i)\"></wac-button>\n </div>\n </div>\n <div class=\"wac-draganddrop-list__wrapper__item wac-draganddrop-list__wrapper__item--trigger\" *ngIf=\"showTriggerSave\">\n <div>\n <span class=\"wac-draganddrop-list__wrapper__item__icon\">\n <span></span>\n </span>\n <span class=\"wac-draganddrop-list__wrapper__item__input\">\n <wac-input [extraClasses]=\"'transparent'\" (keyup.enter)=\"saveNewField($event)\" (focusout)=\"saveNewField($event)\"></wac-input>\n </span>\n </div>\n </div>\n </div>\n <div class=\"wac-draganddrop-list__add\" *ngIf=\"max && !showTriggerSave\">\n <div class=\"wac-draganddrop-list__add__btn\" *ngIf=\"max > items.length\">\n <wac-button [extraClasses]=\"'is-success'\" [label]=\"labelBtnAdd\" (click)=\"addField()\"></wac-button>\n </div>\n </div>\n</div>\n\n<div class=\"wac-draganddrop-list wac-draganddrop-list--disabled\" *ngIf=\"disabled\">\n <div class=\"wac-draganddrop-list__wrapper\">\n <div class=\"wac-draganddrop-list__wrapper__item\" *ngFor=\"let item of items;let i = index;\">\n <div>\n <span class=\"wac-draganddrop-list__wrapper__item__label\" [innerHTML]=\"item\"></span>\n </div>\n </div>\n </div>\n</div>\n",
39
53
  changeDetection: ChangeDetectionStrategy.OnPush
40
54
  },] }
41
55
  ];
42
56
  DraganddropListComponent.propDecorators = {
43
57
  items: [{ type: Input }],
44
- disable: [{ type: Input }],
58
+ disabled: [{ type: Input }],
45
59
  max: [{ type: Input }],
46
60
  labelBtnAdd: [{ type: Input }],
47
61
  backgroundColor: [{ type: Input }],
48
62
  itemsChange: [{ type: Output }]
49
63
  };
50
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2FuZGRyb3AtbGlzdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2RyYWdhbmRkcm9wLWxpc3QvZHJhZ2FuZGRyb3AtbGlzdC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN0RyxPQUFPLEVBQWMsZUFBZSxFQUFDLE1BQU0sd0JBQXdCLENBQUM7QUFPcEUsTUFBTSxPQUFPLHdCQUF3QjtJQUxyQztRQVdFLFlBQU8sR0FBRyxLQUFLLENBQUM7UUFTaEIsb0JBQWUsR0FBRyxNQUFNLENBQUM7UUFFekIsb0JBQWUsR0FBRyxLQUFLLENBQUM7UUFHeEIsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBaUIsQ0FBQztJQStCbEQsQ0FBQztJQTdCQyxJQUFJLENBQUMsS0FBNEI7UUFDL0IsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUU7WUFDakIsZUFBZSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLGFBQWEsRUFBRSxLQUFLLENBQUMsWUFBWSxDQUFDLENBQUM7WUFDckUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQ25DO0lBQ0gsQ0FBQztJQUVELE1BQU0sQ0FBQyxLQUFLO1FBQ1YsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUU7WUFDakIsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLEtBQUssRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsS0FBSyxLQUFLLENBQUUsQ0FBQztZQUMzRCxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDbkM7SUFDSCxDQUFDO0lBRUQsU0FBUyxDQUFDLEtBQUssRUFBRSxLQUFLO1FBQ3BCLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUM7UUFDdkMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3BDLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUM7SUFDOUIsQ0FBQztJQUVELFlBQVksQ0FBQyxLQUFLO1FBQ2hCLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDcEMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ2xDLElBQUksQ0FBQyxlQUFlLEdBQUcsS0FBSyxDQUFDO0lBQy9CLENBQUM7OztZQXRERixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLHNCQUFzQjtnQkFDaEMsd3VFQUFnRDtnQkFDaEQsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07YUFDaEQ7OztvQkFHRSxLQUFLO3NCQUdMLEtBQUs7a0JBR0wsS0FBSzswQkFHTCxLQUFLOzhCQUdMLEtBQUs7MEJBS0wsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtDZGtEcmFnRHJvcCwgbW92ZUl0ZW1JbkFycmF5fSBmcm9tICdAYW5ndWxhci9jZGsvZHJhZy1kcm9wJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnd2FjLWRyYWdhbmRkcm9wLWxpc3QnLFxuICB0ZW1wbGF0ZVVybDogJy4vZHJhZ2FuZGRyb3AtbGlzdC5jb21wb25lbnQuaHRtbCcsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIERyYWdhbmRkcm9wTGlzdENvbXBvbmVudCB7XG5cbiAgQElucHV0KClcbiAgaXRlbXM6IEFycmF5PHN0cmluZz47XG5cbiAgQElucHV0KClcbiAgZGlzYWJsZSA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIG1heDogbnVtYmVyO1xuXG4gIEBJbnB1dCgpXG4gIGxhYmVsQnRuQWRkOiBzdHJpbmc7XG5cbiAgQElucHV0KClcbiAgYmFja2dyb3VuZENvbG9yID0gJyNmZmYnO1xuXG4gIHNob3dUcmlnZ2VyU2F2ZSA9IGZhbHNlO1xuXG4gIEBPdXRwdXQoKVxuICBpdGVtc0NoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8QXJyYXk8c3RyaW5nPj4oKTtcblxuICBkcm9wKGV2ZW50OiBDZGtEcmFnRHJvcDxzdHJpbmdbXT4pIHtcbiAgICBpZiAoIXRoaXMuZGlzYWJsZSkge1xuICAgICAgbW92ZUl0ZW1JbkFycmF5KHRoaXMuaXRlbXMsIGV2ZW50LnByZXZpb3VzSW5kZXgsIGV2ZW50LmN1cnJlbnRJbmRleCk7XG4gICAgICB0aGlzLml0ZW1zQ2hhbmdlLmVtaXQodGhpcy5pdGVtcyk7XG4gICAgfVxuICB9XG5cbiAgZGVsZXRlKGluZGV4KSB7XG4gICAgaWYgKCF0aGlzLmRpc2FibGUpIHtcbiAgICAgIHRoaXMuaXRlbXMgPSB0aGlzLml0ZW1zLmZpbHRlcigodmFsdWUsIGkpID0+IGkgIT09IGluZGV4ICk7XG4gICAgICB0aGlzLml0ZW1zQ2hhbmdlLmVtaXQodGhpcy5pdGVtcyk7XG4gICAgfVxuICB9XG5cbiAgc2F2ZUZpZWxkKGluZGV4LCBldmVudCkge1xuICAgIHRoaXMuaXRlbXNbaW5kZXhdID0gZXZlbnQudGFyZ2V0LnZhbHVlO1xuICAgIHRoaXMuaXRlbXNDaGFuZ2UuZW1pdCh0aGlzLml0ZW1zKTtcbiAgfVxuXG4gIGFkZEZpZWxkKCkge1xuICAgIHRoaXMuc2hvd1RyaWdnZXJTYXZlID0gdHJ1ZTtcbiAgfVxuXG4gIHNhdmVOZXdGaWVsZChldmVudCkge1xuICAgIHRoaXMuaXRlbXMucHVzaChldmVudC50YXJnZXQudmFsdWUpO1xuICAgIHRoaXMuaXRlbXNDaGFuZ2UuZW1pdCh0aGlzLml0ZW1zKTtcbiAgICB0aGlzLnNob3dUcmlnZ2VyU2F2ZSA9IGZhbHNlO1xuICB9XG5cbn1cbiJdfQ==
64
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2FuZGRyb3AtbGlzdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2RyYWdhbmRkcm9wLWxpc3QvZHJhZ2FuZGRyb3AtbGlzdC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN0RyxPQUFPLEVBQWMsZUFBZSxFQUFDLE1BQU0sd0JBQXdCLENBQUM7QUFPcEUsTUFBTSxPQUFPLHdCQUF3QjtJQUxyQztRQWFFLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFTakIsb0JBQWUsR0FBRyxNQUFNLENBQUM7UUFFekIsb0JBQWUsR0FBRyxLQUFLLENBQUM7UUFHeEIsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBaUIsQ0FBQztJQWdEbEQsQ0FBQztJQTlDQyxRQUFRO1FBQ04sSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxJQUFJLENBQUMsS0FBNEI7UUFDL0IsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDbEIsZUFBZSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLGFBQWEsRUFBRSxLQUFLLENBQUMsWUFBWSxDQUFDLENBQUM7WUFDckUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBQ2xDLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztTQUNwQjtJQUNILENBQUM7SUFFRCxNQUFNLENBQUMsS0FBSztRQUNWLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFO1lBQ2xCLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxLQUFLLEVBQUUsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLEtBQUssS0FBSyxDQUFFLENBQUM7WUFDM0QsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBQ2xDLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztTQUNwQjtJQUNILENBQUM7SUFFRCxTQUFTLENBQUMsS0FBSyxFQUFFLEtBQUs7UUFDcEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLLENBQUMsR0FBRyxLQUFLLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQztRQUMzQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDeEMsQ0FBQztJQUVELFlBQVksQ0FBQyxLQUFLLEVBQUUsS0FBSztRQUN2QixJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDO1FBQ3ZDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNsQyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsZUFBZSxHQUFHLElBQUksQ0FBQztJQUM5QixDQUFDO0lBRUQsWUFBWSxDQUFDLEtBQUs7UUFDaEIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNwQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDbEMsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ25CLElBQUksQ0FBQyxlQUFlLEdBQUcsS0FBSyxDQUFDO0lBQy9CLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLFNBQVMsR0FBRyxNQUFNLENBQUMsTUFBTSxDQUFDLEVBQUUsRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDakQsQ0FBQzs7O1lBekVGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsc0JBQXNCO2dCQUNoQyx5dUVBQWdEO2dCQUNoRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTthQUNoRDs7O29CQUdFLEtBQUs7dUJBS0wsS0FBSztrQkFHTCxLQUFLOzBCQUdMLEtBQUs7OEJBR0wsS0FBSzswQkFLTCxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0Nka0RyYWdEcm9wLCBtb3ZlSXRlbUluQXJyYXl9IGZyb20gJ0Bhbmd1bGFyL2Nkay9kcmFnLWRyb3AnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd3YWMtZHJhZ2FuZGRyb3AtbGlzdCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9kcmFnYW5kZHJvcC1saXN0LmNvbXBvbmVudC5odG1sJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcbn0pXG5leHBvcnQgY2xhc3MgRHJhZ2FuZGRyb3BMaXN0Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICBASW5wdXQoKVxuICBpdGVtczogQXJyYXk8c3RyaW5nPjtcblxuICBjb3B5VGVtcHM6IEFycmF5PHN0cmluZz47XG5cbiAgQElucHV0KClcbiAgZGlzYWJsZWQgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBtYXg6IG51bWJlcjtcblxuICBASW5wdXQoKVxuICBsYWJlbEJ0bkFkZDogc3RyaW5nO1xuXG4gIEBJbnB1dCgpXG4gIGJhY2tncm91bmRDb2xvciA9ICcjZmZmJztcblxuICBzaG93VHJpZ2dlclNhdmUgPSBmYWxzZTtcblxuICBAT3V0cHV0KClcbiAgaXRlbXNDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPEFycmF5PHN0cmluZz4+KCk7XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5zZXRUZW1wQ29weSgpO1xuICB9XG5cbiAgZHJvcChldmVudDogQ2RrRHJhZ0Ryb3A8c3RyaW5nW10+KSB7XG4gICAgaWYgKCF0aGlzLmRpc2FibGVkKSB7XG4gICAgICBtb3ZlSXRlbUluQXJyYXkodGhpcy5pdGVtcywgZXZlbnQucHJldmlvdXNJbmRleCwgZXZlbnQuY3VycmVudEluZGV4KTtcbiAgICAgIHRoaXMuaXRlbXNDaGFuZ2UuZW1pdCh0aGlzLml0ZW1zKTtcbiAgICAgIHRoaXMuc2V0VGVtcENvcHkoKTtcbiAgICB9XG4gIH1cblxuICBkZWxldGUoaW5kZXgpIHtcbiAgICBpZiAoIXRoaXMuZGlzYWJsZWQpIHtcbiAgICAgIHRoaXMuaXRlbXMgPSB0aGlzLml0ZW1zLmZpbHRlcigodmFsdWUsIGkpID0+IGkgIT09IGluZGV4ICk7XG4gICAgICB0aGlzLml0ZW1zQ2hhbmdlLmVtaXQodGhpcy5pdGVtcyk7XG4gICAgICB0aGlzLnNldFRlbXBDb3B5KCk7XG4gICAgfVxuICB9XG5cbiAgc2F2ZUZpZWxkKGluZGV4LCBldmVudCkge1xuICAgIHRoaXMuY29weVRlbXBzW2luZGV4XSA9IGV2ZW50LnRhcmdldC52YWx1ZTtcbiAgICB0aGlzLml0ZW1zQ2hhbmdlLmVtaXQodGhpcy5jb3B5VGVtcHMpO1xuICB9XG5cbiAgc2F2ZUZpZWxkRW5kKGluZGV4LCBldmVudCkge1xuICAgIHRoaXMuaXRlbXNbaW5kZXhdID0gZXZlbnQudGFyZ2V0LnZhbHVlO1xuICAgIHRoaXMuaXRlbXNDaGFuZ2UuZW1pdCh0aGlzLml0ZW1zKTtcbiAgICB0aGlzLnNldFRlbXBDb3B5KCk7XG4gIH1cblxuICBhZGRGaWVsZCgpIHtcbiAgICB0aGlzLnNob3dUcmlnZ2VyU2F2ZSA9IHRydWU7XG4gIH1cblxuICBzYXZlTmV3RmllbGQoZXZlbnQpIHtcbiAgICB0aGlzLml0ZW1zLnB1c2goZXZlbnQudGFyZ2V0LnZhbHVlKTtcbiAgICB0aGlzLml0ZW1zQ2hhbmdlLmVtaXQodGhpcy5pdGVtcyk7XG4gICAgdGhpcy5zZXRUZW1wQ29weSgpO1xuICAgIHRoaXMuc2hvd1RyaWdnZXJTYXZlID0gZmFsc2U7XG4gIH1cblxuICBzZXRUZW1wQ29weSgpIHtcbiAgICB0aGlzLmNvcHlUZW1wcyA9IE9iamVjdC5hc3NpZ24oe30sIHRoaXMuaXRlbXMpO1xuICB9XG5cbn1cbiJdfQ==
@@ -4042,26 +4042,36 @@ WrapperMultipleBlockComponent.ctorParameters = () => [];
4042
4042
 
4043
4043
  class DraganddropListComponent {
4044
4044
  constructor() {
4045
- this.disable = false;
4045
+ this.disabled = false;
4046
4046
  this.backgroundColor = '#fff';
4047
4047
  this.showTriggerSave = false;
4048
4048
  this.itemsChange = new EventEmitter();
4049
4049
  }
4050
+ ngOnInit() {
4051
+ this.setTempCopy();
4052
+ }
4050
4053
  drop(event) {
4051
- if (!this.disable) {
4054
+ if (!this.disabled) {
4052
4055
  moveItemInArray(this.items, event.previousIndex, event.currentIndex);
4053
4056
  this.itemsChange.emit(this.items);
4057
+ this.setTempCopy();
4054
4058
  }
4055
4059
  }
4056
4060
  delete(index) {
4057
- if (!this.disable) {
4061
+ if (!this.disabled) {
4058
4062
  this.items = this.items.filter((value, i) => i !== index);
4059
4063
  this.itemsChange.emit(this.items);
4064
+ this.setTempCopy();
4060
4065
  }
4061
4066
  }
4062
4067
  saveField(index, event) {
4068
+ this.copyTemps[index] = event.target.value;
4069
+ this.itemsChange.emit(this.copyTemps);
4070
+ }
4071
+ saveFieldEnd(index, event) {
4063
4072
  this.items[index] = event.target.value;
4064
4073
  this.itemsChange.emit(this.items);
4074
+ this.setTempCopy();
4065
4075
  }
4066
4076
  addField() {
4067
4077
  this.showTriggerSave = true;
@@ -4069,19 +4079,23 @@ class DraganddropListComponent {
4069
4079
  saveNewField(event) {
4070
4080
  this.items.push(event.target.value);
4071
4081
  this.itemsChange.emit(this.items);
4082
+ this.setTempCopy();
4072
4083
  this.showTriggerSave = false;
4073
4084
  }
4085
+ setTempCopy() {
4086
+ this.copyTemps = Object.assign({}, this.items);
4087
+ }
4074
4088
  }
4075
4089
  DraganddropListComponent.decorators = [
4076
4090
  { type: Component, args: [{
4077
4091
  selector: 'wac-draganddrop-list',
4078
- template: "<div class=\"wac-draganddrop-list\" *ngIf=\"!disable\" [style.backgroundColor]=\"backgroundColor\">\n <div class=\"wac-draganddrop-list__wrapper\" [cdkDropListLockAxis]=\"'y'\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n <div class=\"wac-draganddrop-list__wrapper__item\" [style.backgroundColor]=\"backgroundColor\" *ngFor=\"let item of items;let i = index;\" cdkDrag>\n <div>\n <span class=\"wac-draganddrop-list__wrapper__item__icon\">\n <span></span>\n </span>\n <span (mousedown)=\"$event.stopPropagation()\" class=\"wac-draganddrop-list__wrapper__item__input\">\n <wac-input [value]=\"item\" [extraClasses]=\"'transparent'\" (keyup.enter)=\"saveField(i, $event)\" (focusout)=\"saveField(i, $event)\"></wac-input>\n </span>\n </div>\n <div (mousedown)=\"$event.stopPropagation()\">\n <wac-button [iconFontSize]=\"'14px'\" [opacity]=\"true\" [icon]=\"'fa-regular fa-trash-can'\" [extraClasses]=\"'is-danger'\" (click)=\"delete(i)\"></wac-button>\n </div>\n </div>\n <div class=\"wac-draganddrop-list__wrapper__item wac-draganddrop-list__wrapper__item--trigger\" *ngIf=\"showTriggerSave\">\n <div>\n <span class=\"wac-draganddrop-list__wrapper__item__icon\">\n <span></span>\n </span>\n <span class=\"wac-draganddrop-list__wrapper__item__input\">\n <wac-input [extraClasses]=\"'transparent'\" (keyup.enter)=\"saveNewField($event)\" (focusout)=\"saveNewField($event)\"></wac-input>\n </span>\n </div>\n </div>\n </div>\n <div class=\"wac-draganddrop-list__add\" *ngIf=\"max && !showTriggerSave\">\n <div class=\"wac-draganddrop-list__add__btn\" *ngIf=\"max > items.length\">\n <wac-button [extraClasses]=\"'is-success'\" [label]=\"labelBtnAdd\" (click)=\"addField()\"></wac-button>\n </div>\n </div>\n</div>\n\n<div class=\"wac-draganddrop-list wac-draganddrop-list--disabled\" *ngIf=\"disable\">\n <div class=\"wac-draganddrop-list__wrapper\">\n <div class=\"wac-draganddrop-list__wrapper__item\" *ngFor=\"let item of items;let i = index;\">\n <div>\n <span class=\"wac-draganddrop-list__wrapper__item__label\" [innerHTML]=\"item\"></span>\n </div>\n </div>\n </div>\n</div>\n",
4092
+ template: "<div class=\"wac-draganddrop-list\" *ngIf=\"!disabled\" [style.backgroundColor]=\"backgroundColor\">\n <div class=\"wac-draganddrop-list__wrapper\" [cdkDropListLockAxis]=\"'y'\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n <div class=\"wac-draganddrop-list__wrapper__item\" [style.backgroundColor]=\"backgroundColor\" *ngFor=\"let item of items;let i = index;\" cdkDrag>\n <div>\n <span class=\"wac-draganddrop-list__wrapper__item__icon\">\n <span></span>\n </span>\n <span (mousedown)=\"$event.stopPropagation()\" class=\"wac-draganddrop-list__wrapper__item__input\">\n <wac-input [value]=\"item\" [extraClasses]=\"'transparent'\" (keydown)=\"saveField(i, $event)\" (focusout)=\"saveFieldEnd(i, $event)\"></wac-input>\n </span>\n </div>\n <div (mousedown)=\"$event.stopPropagation()\">\n <wac-button [iconFontSize]=\"'14px'\" [opacity]=\"true\" [icon]=\"'fa-regular fa-trash-can'\" [extraClasses]=\"'is-danger'\" (click)=\"delete(i)\"></wac-button>\n </div>\n </div>\n <div class=\"wac-draganddrop-list__wrapper__item wac-draganddrop-list__wrapper__item--trigger\" *ngIf=\"showTriggerSave\">\n <div>\n <span class=\"wac-draganddrop-list__wrapper__item__icon\">\n <span></span>\n </span>\n <span class=\"wac-draganddrop-list__wrapper__item__input\">\n <wac-input [extraClasses]=\"'transparent'\" (keyup.enter)=\"saveNewField($event)\" (focusout)=\"saveNewField($event)\"></wac-input>\n </span>\n </div>\n </div>\n </div>\n <div class=\"wac-draganddrop-list__add\" *ngIf=\"max && !showTriggerSave\">\n <div class=\"wac-draganddrop-list__add__btn\" *ngIf=\"max > items.length\">\n <wac-button [extraClasses]=\"'is-success'\" [label]=\"labelBtnAdd\" (click)=\"addField()\"></wac-button>\n </div>\n </div>\n</div>\n\n<div class=\"wac-draganddrop-list wac-draganddrop-list--disabled\" *ngIf=\"disabled\">\n <div class=\"wac-draganddrop-list__wrapper\">\n <div class=\"wac-draganddrop-list__wrapper__item\" *ngFor=\"let item of items;let i = index;\">\n <div>\n <span class=\"wac-draganddrop-list__wrapper__item__label\" [innerHTML]=\"item\"></span>\n </div>\n </div>\n </div>\n</div>\n",
4079
4093
  changeDetection: ChangeDetectionStrategy.OnPush
4080
4094
  },] }
4081
4095
  ];
4082
4096
  DraganddropListComponent.propDecorators = {
4083
4097
  items: [{ type: Input }],
4084
- disable: [{ type: Input }],
4098
+ disabled: [{ type: Input }],
4085
4099
  max: [{ type: Input }],
4086
4100
  labelBtnAdd: [{ type: Input }],
4087
4101
  backgroundColor: [{ type: Input }],