@wizishop/angular-components 0.0.201 → 0.0.202
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.
- package/angular-components.scss +108 -69
- package/bundles/wizishop-angular-components.umd.js +18 -1
- package/bundles/wizishop-angular-components.umd.js.map +1 -1
- package/bundles/wizishop-angular-components.umd.min.js +1 -1
- package/bundles/wizishop-angular-components.umd.min.js.map +1 -1
- package/esm2015/lib/components/draganddrop-list/draganddrop-list.component.js +19 -2
- package/fesm2015/wizishop-angular-components.js +18 -1
- package/fesm2015/wizishop-angular-components.js.map +1 -1
- package/lib/components/draganddrop-list/draganddrop-list.component.d.ts +7 -0
- package/package.json +1 -1
- package/wizishop-angular-components-0.0.202.tgz +0 -0
- package/wizishop-angular-components.metadata.json +1 -1
- package/wizishop-angular-components-0.0.201.tgz +0 -0
|
@@ -3,6 +3,8 @@ import { moveItemInArray } from '@angular/cdk/drag-drop';
|
|
|
3
3
|
export class DraganddropListComponent {
|
|
4
4
|
constructor() {
|
|
5
5
|
this.disable = false;
|
|
6
|
+
this.backgroundColor = '#fff';
|
|
7
|
+
this.showTriggerSave = false;
|
|
6
8
|
this.itemsChange = new EventEmitter();
|
|
7
9
|
}
|
|
8
10
|
drop(event) {
|
|
@@ -17,17 +19,32 @@ export class DraganddropListComponent {
|
|
|
17
19
|
this.itemsChange.emit(this.items);
|
|
18
20
|
}
|
|
19
21
|
}
|
|
22
|
+
saveField(index, event) {
|
|
23
|
+
this.items[index] = event.target.value;
|
|
24
|
+
this.itemsChange.emit(this.items);
|
|
25
|
+
}
|
|
26
|
+
addField() {
|
|
27
|
+
this.showTriggerSave = true;
|
|
28
|
+
}
|
|
29
|
+
saveNewField(event) {
|
|
30
|
+
this.items.push(event.target.value);
|
|
31
|
+
this.itemsChange.emit(this.items);
|
|
32
|
+
this.showTriggerSave = false;
|
|
33
|
+
}
|
|
20
34
|
}
|
|
21
35
|
DraganddropListComponent.decorators = [
|
|
22
36
|
{ type: Component, args: [{
|
|
23
37
|
selector: 'wac-draganddrop-list',
|
|
24
|
-
template: "<div class=\"wac-draganddrop-list\" *ngIf=\"!disable\">\n <div class=\"wac-draganddrop-list__wrapper\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n <div class=\"wac-draganddrop-list__wrapper__item\" *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 class=\"wac-draganddrop-
|
|
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",
|
|
25
39
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
26
40
|
},] }
|
|
27
41
|
];
|
|
28
42
|
DraganddropListComponent.propDecorators = {
|
|
29
43
|
items: [{ type: Input }],
|
|
30
44
|
disable: [{ type: Input }],
|
|
45
|
+
max: [{ type: Input }],
|
|
46
|
+
labelBtnAdd: [{ type: Input }],
|
|
47
|
+
backgroundColor: [{ type: Input }],
|
|
31
48
|
itemsChange: [{ type: Output }]
|
|
32
49
|
};
|
|
33
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
50
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2FuZGRyb3AtbGlzdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2RyYWdhbmRkcm9wLWxpc3QvZHJhZ2FuZGRyb3AtbGlzdC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN0RyxPQUFPLEVBQWMsZUFBZSxFQUFDLE1BQU0sd0JBQXdCLENBQUM7QUFPcEUsTUFBTSxPQUFPLHdCQUF3QjtJQUxyQztRQVdFLFlBQU8sR0FBRyxLQUFLLENBQUM7UUFTaEIsb0JBQWUsR0FBRyxNQUFNLENBQUM7UUFFekIsb0JBQWUsR0FBRyxLQUFLLENBQUM7UUFHeEIsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBaUIsQ0FBQztJQStCbEQsQ0FBQztJQTdCQyxJQUFJLENBQUMsS0FBNEI7UUFDL0IsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUU7WUFDakIsZUFBZSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLGFBQWEsRUFBRSxLQUFLLENBQUMsWUFBWSxDQUFDLENBQUM7WUFDckUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQ25DO0lBQ0gsQ0FBQztJQUVELE1BQU0sQ0FBQyxLQUFLO1FBQ1YsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUU7WUFDakIsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLEtBQUssRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsS0FBSyxLQUFLLENBQUUsQ0FBQztZQUMzRCxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDbkM7SUFDSCxDQUFDO0lBRUQsU0FBUyxDQUFDLEtBQUssRUFBRSxLQUFLO1FBQ3BCLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUM7UUFDdkMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3BDLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUM7SUFDOUIsQ0FBQztJQUVELFlBQVksQ0FBQyxLQUFLO1FBQ2hCLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDcEMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ2xDLElBQUksQ0FBQyxlQUFlLEdBQUcsS0FBSyxDQUFDO0lBQy9CLENBQUM7OztZQXRERixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLHNCQUFzQjtnQkFDaEMsd3VFQUFnRDtnQkFDaEQsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07YUFDaEQ7OztvQkFHRSxLQUFLO3NCQUdMLEtBQUs7a0JBR0wsS0FBSzswQkFHTCxLQUFLOzhCQUdMLEtBQUs7MEJBS0wsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtDZGtEcmFnRHJvcCwgbW92ZUl0ZW1JbkFycmF5fSBmcm9tICdAYW5ndWxhci9jZGsvZHJhZy1kcm9wJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnd2FjLWRyYWdhbmRkcm9wLWxpc3QnLFxuICB0ZW1wbGF0ZVVybDogJy4vZHJhZ2FuZGRyb3AtbGlzdC5jb21wb25lbnQuaHRtbCcsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIERyYWdhbmRkcm9wTGlzdENvbXBvbmVudCB7XG5cbiAgQElucHV0KClcbiAgaXRlbXM6IEFycmF5PHN0cmluZz47XG5cbiAgQElucHV0KClcbiAgZGlzYWJsZSA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIG1heDogbnVtYmVyO1xuXG4gIEBJbnB1dCgpXG4gIGxhYmVsQnRuQWRkOiBzdHJpbmc7XG5cbiAgQElucHV0KClcbiAgYmFja2dyb3VuZENvbG9yID0gJyNmZmYnO1xuXG4gIHNob3dUcmlnZ2VyU2F2ZSA9IGZhbHNlO1xuXG4gIEBPdXRwdXQoKVxuICBpdGVtc0NoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8QXJyYXk8c3RyaW5nPj4oKTtcblxuICBkcm9wKGV2ZW50OiBDZGtEcmFnRHJvcDxzdHJpbmdbXT4pIHtcbiAgICBpZiAoIXRoaXMuZGlzYWJsZSkge1xuICAgICAgbW92ZUl0ZW1JbkFycmF5KHRoaXMuaXRlbXMsIGV2ZW50LnByZXZpb3VzSW5kZXgsIGV2ZW50LmN1cnJlbnRJbmRleCk7XG4gICAgICB0aGlzLml0ZW1zQ2hhbmdlLmVtaXQodGhpcy5pdGVtcyk7XG4gICAgfVxuICB9XG5cbiAgZGVsZXRlKGluZGV4KSB7XG4gICAgaWYgKCF0aGlzLmRpc2FibGUpIHtcbiAgICAgIHRoaXMuaXRlbXMgPSB0aGlzLml0ZW1zLmZpbHRlcigodmFsdWUsIGkpID0+IGkgIT09IGluZGV4ICk7XG4gICAgICB0aGlzLml0ZW1zQ2hhbmdlLmVtaXQodGhpcy5pdGVtcyk7XG4gICAgfVxuICB9XG5cbiAgc2F2ZUZpZWxkKGluZGV4LCBldmVudCkge1xuICAgIHRoaXMuaXRlbXNbaW5kZXhdID0gZXZlbnQudGFyZ2V0LnZhbHVlO1xuICAgIHRoaXMuaXRlbXNDaGFuZ2UuZW1pdCh0aGlzLml0ZW1zKTtcbiAgfVxuXG4gIGFkZEZpZWxkKCkge1xuICAgIHRoaXMuc2hvd1RyaWdnZXJTYXZlID0gdHJ1ZTtcbiAgfVxuXG4gIHNhdmVOZXdGaWVsZChldmVudCkge1xuICAgIHRoaXMuaXRlbXMucHVzaChldmVudC50YXJnZXQudmFsdWUpO1xuICAgIHRoaXMuaXRlbXNDaGFuZ2UuZW1pdCh0aGlzLml0ZW1zKTtcbiAgICB0aGlzLnNob3dUcmlnZ2VyU2F2ZSA9IGZhbHNlO1xuICB9XG5cbn1cbiJdfQ==
|
|
@@ -4043,6 +4043,8 @@ WrapperMultipleBlockComponent.ctorParameters = () => [];
|
|
|
4043
4043
|
class DraganddropListComponent {
|
|
4044
4044
|
constructor() {
|
|
4045
4045
|
this.disable = false;
|
|
4046
|
+
this.backgroundColor = '#fff';
|
|
4047
|
+
this.showTriggerSave = false;
|
|
4046
4048
|
this.itemsChange = new EventEmitter();
|
|
4047
4049
|
}
|
|
4048
4050
|
drop(event) {
|
|
@@ -4057,17 +4059,32 @@ class DraganddropListComponent {
|
|
|
4057
4059
|
this.itemsChange.emit(this.items);
|
|
4058
4060
|
}
|
|
4059
4061
|
}
|
|
4062
|
+
saveField(index, event) {
|
|
4063
|
+
this.items[index] = event.target.value;
|
|
4064
|
+
this.itemsChange.emit(this.items);
|
|
4065
|
+
}
|
|
4066
|
+
addField() {
|
|
4067
|
+
this.showTriggerSave = true;
|
|
4068
|
+
}
|
|
4069
|
+
saveNewField(event) {
|
|
4070
|
+
this.items.push(event.target.value);
|
|
4071
|
+
this.itemsChange.emit(this.items);
|
|
4072
|
+
this.showTriggerSave = false;
|
|
4073
|
+
}
|
|
4060
4074
|
}
|
|
4061
4075
|
DraganddropListComponent.decorators = [
|
|
4062
4076
|
{ type: Component, args: [{
|
|
4063
4077
|
selector: 'wac-draganddrop-list',
|
|
4064
|
-
template: "<div class=\"wac-draganddrop-list\" *ngIf=\"!disable\">\n <div class=\"wac-draganddrop-list__wrapper\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n <div class=\"wac-draganddrop-list__wrapper__item\" *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 class=\"wac-draganddrop-
|
|
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",
|
|
4065
4079
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
4066
4080
|
},] }
|
|
4067
4081
|
];
|
|
4068
4082
|
DraganddropListComponent.propDecorators = {
|
|
4069
4083
|
items: [{ type: Input }],
|
|
4070
4084
|
disable: [{ type: Input }],
|
|
4085
|
+
max: [{ type: Input }],
|
|
4086
|
+
labelBtnAdd: [{ type: Input }],
|
|
4087
|
+
backgroundColor: [{ type: Input }],
|
|
4071
4088
|
itemsChange: [{ type: Output }]
|
|
4072
4089
|
};
|
|
4073
4090
|
|