@wizishop/angular-components 0.0.55 → 0.0.59

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.
Files changed (13) hide show
  1. package/angular-components.scss +483 -381
  2. package/bundles/wizishop-angular-components.umd.js +39 -4
  3. package/bundles/wizishop-angular-components.umd.js.map +1 -1
  4. package/bundles/wizishop-angular-components.umd.min.js +1 -1
  5. package/bundles/wizishop-angular-components.umd.min.js.map +1 -1
  6. package/esm2015/lib/components/button/button.component.js +40 -5
  7. package/fesm2015/wizishop-angular-components.js +39 -4
  8. package/fesm2015/wizishop-angular-components.js.map +1 -1
  9. package/lib/components/button/button.component.d.ts +12 -2
  10. package/package.json +1 -1
  11. package/wizishop-angular-components-0.0.59.tgz +0 -0
  12. package/wizishop-angular-components.metadata.json +1 -1
  13. package/wizishop-angular-components-0.0.55.tgz +0 -0
package/esm2015/lib/components/button/button.component.js CHANGED
@@ -13,13 +13,24 @@ export class ButtonComponent {
13
13
  this.animation = false;
14
14
  this.animationRight = false;
15
15
  this.animationText = '';
16
+ this.confirmDelete = false;
17
+ this.confirmDeleteText = '';
18
+ this.confirmDeletePosition = 'right';
16
19
  this.click = new EventEmitter();
17
20
  this.isLoading = false;
18
21
  this.interval = null;
22
+ this.waitForConfirmDelete = false;
19
23
  this.buttonMaxWidth = '0px';
20
24
  this.buttonWidth = '0px';
25
+ this.buttonMaxWidthDelete = '0px';
26
+ this.buttonWidthDelete = '0px';
21
27
  this.currentLoading = 0;
22
28
  }
29
+ ngOnInit() {
30
+ if (this.confirmDelete) {
31
+ this.waitForConfirmDelete = true;
32
+ }
33
+ }
23
34
  launchLoading() {
24
35
  if (this.isLoading || this.interval !== null) {
25
36
  return;
@@ -45,13 +56,29 @@ export class ButtonComponent {
45
56
  resetMaxWidth() {
46
57
  this.buttonMaxWidth = '0px';
47
58
  }
59
+ addMaxWidthDelete() {
60
+ this.buttonMaxWidthDelete = this.buttonWidthDelete + 'px';
61
+ console.log('here', this.buttonMaxWidthDelete);
62
+ }
63
+ resetMaxWidthDelete() {
64
+ this.buttonMaxWidthDelete = '0px';
65
+ this.waitForConfirmDelete = true;
66
+ }
48
67
  onButtonClick(event) {
49
68
  event.stopPropagation();
50
69
  if (!this.disabled) {
51
70
  if (this.hasLoader) {
52
71
  this.launchLoading();
53
72
  }
54
- this.click.emit(event);
73
+ if (!this.waitForConfirmDelete) {
74
+ this.click.emit(event);
75
+ if (this.confirmDelete) {
76
+ this.resetMaxWidthDelete();
77
+ }
78
+ }
79
+ else {
80
+ this.waitForConfirmDelete = false;
81
+ }
55
82
  }
56
83
  }
57
84
  ngAfterViewInit() {
@@ -59,13 +86,17 @@ export class ButtonComponent {
59
86
  if (this.animation) {
60
87
  this.buttonWidth = this.calculWidth.nativeElement.offsetWidth;
61
88
  }
62
- }, 0);
89
+ if (this.confirmDelete) {
90
+ this.buttonWidthDelete = this.calculWidthDelete.nativeElement.offsetWidth;
91
+ console.log('here2', this.buttonWidthDelete);
92
+ }
93
+ }, 1000);
63
94
  }
64
95
  }
65
96
  ButtonComponent.decorators = [
66
97
  { type: Component, args: [{
67
98
  selector: 'wac-button',
68
- template: "<a\n [class]=\"'wac-button ' + extraClasses\"\n (click)=\"onButtonClick($event)\"\n (mouseleave)=\"animation ? resetMaxWidth() : ''\"\n (mouseenter)=\"animation ? addMaxWidth() : ''\"\n [ngClass]=\"[label === '' ? 'alone' : '',animationRight ? 'animation-right' : '', animation ? 'animationText' : '', isLoading ? 'is-loading' : '', opacity ? 'opacity' : '', disabled ? 'disabled' : '', widthAuto ? 'width-auto' : '', whiteSpaceNowrap ? 'white-space-no-wrap' : '']\"\n>\n <span class=\"wac-button__wrapper\">\n <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n {{ label }}\n <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n </span>\n <span class=\"wac-button__animation\" [style.maxWidth]=\"buttonMaxWidth\" [style.width]=\"buttonWidth + 'px'\">\n <span #calculWidth class=\"wac-button__animation__text\" [innerHTML]=\"animationText\"></span>\n </span>\n <span\n class=\"wac-button__loader\"\n [ngClass]=\"extraClasses.includes('is-outlined') ? 'outlined' : ''\"\n *ngIf=\"isLoading || interval !== null\"\n [style.width]=\"currentLoading + '%'\"\n >\n <span *ngIf=\"extraClasses.includes('is-outlined')\">\n <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n {{ label }}\n <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n </span>\n\n </span>\n</a>\n"
99
+ template: "<a\n [class]=\"'wac-button ' + extraClasses\"\n (click)=\"confirmDelete && waitForConfirmDelete ? addMaxWidthDelete() : '';onButtonClick($event);\"\n (mouseleave)=\"animation ? resetMaxWidth() : '';\"\n (mouseenter)=\"animation ? addMaxWidth() : '';\"\n wzAutoHide (clickOutside)=\"confirmDelete && !waitForConfirmDelete ? resetMaxWidthDelete() : ''\"\n [ngClass]=\"[label === '' ? 'alone' : '',animationRight ? 'animation-right' : '', animation ? 'animationText' : '', isLoading ? 'is-loading' : '', opacity ? 'opacity' : '', disabled ? 'disabled' : '', widthAuto ? 'width-auto' : '', whiteSpaceNowrap ? 'white-space-no-wrap' : '', !waitForConfirmDelete && confirmDelete ? 'step-delete' : '', confirmDelete ? 'deletePosition-' + confirmDeletePosition : '']\"\n>\n <span class=\"wac-button__wrapper\">\n <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n {{ label }}\n <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n </span>\n <span class=\"wac-button__animation\" [style.maxWidth]=\"buttonMaxWidth\" [style.width]=\"buttonWidth + 'px'\">\n <span #calculWidth class=\"wac-button__animation__text\" [innerHTML]=\"animationText\"></span>\n </span>\n <span class=\"wac-button__confirmDelete\" [style.maxWidth]=\"buttonMaxWidthDelete\" [style.width]=\"buttonWidthDelete + 'px'\">\n <span #calculWidthDelete class=\"wac-button__confirmDelete__text\" [innerHTML]=\"confirmDeleteText\"></span>\n </span>\n <span\n class=\"wac-button__loader\"\n [ngClass]=\"extraClasses.includes('is-outlined') ? 'outlined' : ''\"\n *ngIf=\"isLoading || interval !== null\"\n [style.width]=\"currentLoading + '%'\"\n >\n <span *ngIf=\"extraClasses.includes('is-outlined')\">\n <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n {{ label }}\n <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n </span>\n\n </span>\n</a>\n"
69
100
  },] }
70
101
  ];
71
102
  ButtonComponent.ctorParameters = () => [];
@@ -83,7 +114,11 @@ ButtonComponent.propDecorators = {
83
114
  animation: [{ type: Input }],
84
115
  animationRight: [{ type: Input }],
85
116
  animationText: [{ type: Input }],
117
+ confirmDelete: [{ type: Input }],
118
+ confirmDeleteText: [{ type: Input }],
119
+ confirmDeletePosition: [{ type: Input }],
86
120
  click: [{ type: Output }],
87
- calculWidth: [{ type: ViewChild, args: ['calculWidth',] }]
121
+ calculWidth: [{ type: ViewChild, args: ['calculWidth',] }],
122
+ calculWidthDelete: [{ type: ViewChild, args: ['calculWidthDelete',] }]
88
123
  };
89
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFnQixTQUFTLEVBQWMsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBTTNHLE1BQU0sT0FBTyxlQUFlO0lBc0QxQjtRQXBEQSxpQkFBWSxHQUFHLFNBQVMsQ0FBQztRQUd6QixVQUFLLEdBQUcsRUFBRSxDQUFDO1FBR1gsU0FBSSxHQUFHLEVBQUUsQ0FBQztRQU1WLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFHbEIsaUJBQVksR0FBRyxFQUFFLENBQUM7UUFHbEIsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUdsQixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBR2pCLHFCQUFnQixHQUFHLEtBQUssQ0FBQztRQUd6QixZQUFPLEdBQUcsS0FBSyxDQUFDO1FBR2hCLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFHbEIsbUJBQWMsR0FBRyxLQUFLLENBQUM7UUFHdkIsa0JBQWEsR0FBRyxFQUFFLENBQUM7UUFFRixVQUFLLEdBQTZCLElBQUksWUFBWSxFQUFFLENBQUM7UUFFdEUsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUVsQixhQUFRLEdBQUcsSUFBSSxDQUFDO1FBRWhCLG1CQUFjLEdBQUcsS0FBSyxDQUFDO1FBQ3ZCLGdCQUFXLEdBQUcsS0FBSyxDQUFDO1FBRXBCLG1CQUFjLEdBQUcsQ0FBQyxDQUFDO0lBS0osQ0FBQztJQUVoQixhQUFhO1FBQ1gsSUFBSSxJQUFJLENBQUMsU0FBUyxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUssSUFBSSxFQUFFO1lBQzVDLE9BQU87U0FDUjtRQUVELElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDO1FBQ3RCLElBQUksQ0FBQyxjQUFjLEdBQUcsRUFBRSxDQUFDO1FBRXpCLElBQUksQ0FBQyxRQUFRLEdBQUcsV0FBVyxDQUFDLEdBQUcsRUFBRTtZQUMvQixJQUFJLElBQUksQ0FBQyxjQUFjLEdBQUcsRUFBRSxFQUFFO2dCQUM1QixJQUFJLENBQUMsY0FBYyxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxHQUFHLEVBQUUsQ0FBQyxDQUFDO2FBQ3ZEO1lBQ0QsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUU7Z0JBQ25CLElBQUksQ0FBQyxjQUFjLEdBQUcsR0FBRyxDQUFDO2dCQUUxQixVQUFVLENBQUMsR0FBRyxFQUFFO29CQUNkLGFBQWEsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7b0JBQzdCLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO2dCQUN2QixDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUM7YUFDVDtRQUNILENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQztJQUNWLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLGNBQWMsR0FBRyxJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQztJQUNoRCxDQUFDO0lBRUQsYUFBYTtRQUNYLElBQUksQ0FBQyxjQUFjLEdBQUcsS0FBSyxDQUFDO0lBQzlCLENBQUM7SUFFRCxhQUFhLENBQUMsS0FBSztRQUNqQixLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDeEIsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDbEIsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFO2dCQUFFLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQzthQUFFO1lBQzdDLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQ3hCO0lBQ0gsQ0FBQztJQUVELGVBQWU7UUFDYixVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFO2dCQUNsQixJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLFdBQVcsQ0FBQzthQUMvRDtRQUNILENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztJQUNSLENBQUM7OztZQXpHRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLFlBQVk7Z0JBQ3RCLG85Q0FBc0M7YUFDdkM7Ozs7MkJBRUUsS0FBSztvQkFHTCxLQUFLO21CQUdMLEtBQUs7dUJBR0wsS0FBSzt3QkFHTCxLQUFLOzJCQUdMLEtBQUs7d0JBR0wsS0FBSzt1QkFHTCxLQUFLOytCQUdMLEtBQUs7c0JBR0wsS0FBSzt3QkFHTCxLQUFLOzZCQUdMLEtBQUs7NEJBR0wsS0FBSztvQkFHTCxNQUFNOzBCQVdOLFNBQVMsU0FBQyxhQUFhIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtBZnRlclZpZXdJbml0LCBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCwgVmlld0NoaWxkfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnd2FjLWJ1dHRvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi9idXR0b24uY29tcG9uZW50Lmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIEJ1dHRvbkNvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xuICBASW5wdXQoKVxuICBleHRyYUNsYXNzZXMgPSAnaXMtaW5mbyc7XG5cbiAgQElucHV0KClcbiAgbGFiZWwgPSAnJztcblxuICBASW5wdXQoKVxuICBpY29uID0gJyc7XG5cbiAgQElucHV0KClcbiAgaWNvbk5leHQ6IHN0cmluZztcblxuICBASW5wdXQoKVxuICB3aWR0aEF1dG8gPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBpY29uRm9udFNpemUgPSAxMjtcblxuICBASW5wdXQoKVxuICBoYXNMb2FkZXIgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBkaXNhYmxlZCA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIHdoaXRlU3BhY2VOb3dyYXAgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBvcGFjaXR5ID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgYW5pbWF0aW9uID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgYW5pbWF0aW9uUmlnaHQgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBhbmltYXRpb25UZXh0ID0gJyc7XG5cbiAgQE91dHB1dCgpIHB1YmxpYyBjbGljazogRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIGlzTG9hZGluZyA9IGZhbHNlO1xuXG4gIGludGVydmFsID0gbnVsbDtcblxuICBidXR0b25NYXhXaWR0aCA9ICcwcHgnO1xuICBidXR0b25XaWR0aCA9ICcwcHgnO1xuXG4gIGN1cnJlbnRMb2FkaW5nID0gMDtcblxuICBAVmlld0NoaWxkKCdjYWxjdWxXaWR0aCcpXG4gIGNhbGN1bFdpZHRoOiBFbGVtZW50UmVmO1xuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBsYXVuY2hMb2FkaW5nKCkge1xuICAgIGlmICh0aGlzLmlzTG9hZGluZyB8fCB0aGlzLmludGVydmFsICE9PSBudWxsKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgdGhpcy5pc0xvYWRpbmcgPSB0cnVlO1xuICAgIHRoaXMuY3VycmVudExvYWRpbmcgPSAxMDtcblxuICAgIHRoaXMuaW50ZXJ2YWwgPSBzZXRJbnRlcnZhbCgoKSA9PiB7XG4gICAgICBpZiAodGhpcy5jdXJyZW50TG9hZGluZyA8IDg1KSB7XG4gICAgICAgIHRoaXMuY3VycmVudExvYWRpbmcgKz0gTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogMTUpO1xuICAgICAgfVxuICAgICAgaWYgKCF0aGlzLmlzTG9hZGluZykge1xuICAgICAgICB0aGlzLmN1cnJlbnRMb2FkaW5nID0gMTAwO1xuXG4gICAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgIGNsZWFySW50ZXJ2YWwodGhpcy5pbnRlcnZhbCk7XG4gICAgICAgICAgdGhpcy5pbnRlcnZhbCA9IG51bGw7XG4gICAgICAgIH0sIDEwMCk7XG4gICAgICB9XG4gICAgfSwgMjAwKTtcbiAgfVxuXG4gIGFkZE1heFdpZHRoKCkge1xuICAgIHRoaXMuYnV0dG9uTWF4V2lkdGggPSB0aGlzLmJ1dHRvbldpZHRoICsgJ3B4JztcbiAgfVxuXG4gIHJlc2V0TWF4V2lkdGgoKSB7XG4gICAgdGhpcy5idXR0b25NYXhXaWR0aCA9ICcwcHgnO1xuICB9XG5cbiAgb25CdXR0b25DbGljayhldmVudCl7XG4gICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgaWYgKCF0aGlzLmRpc2FibGVkKSB7XG4gICAgICBpZiAodGhpcy5oYXNMb2FkZXIpIHsgdGhpcy5sYXVuY2hMb2FkaW5nKCk7IH1cbiAgICAgIHRoaXMuY2xpY2suZW1pdChldmVudCk7XG4gICAgfVxuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgaWYgKHRoaXMuYW5pbWF0aW9uKSB7XG4gICAgICAgIHRoaXMuYnV0dG9uV2lkdGggPSB0aGlzLmNhbGN1bFdpZHRoLm5hdGl2ZUVsZW1lbnQub2Zmc2V0V2lkdGg7XG4gICAgICB9XG4gICAgfSwgMCk7XG4gIH1cbn1cbiJdfQ==
124
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFnQixTQUFTLEVBQWMsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBTW5ILE1BQU0sT0FBTyxlQUFlO0lBdUUxQjtRQXJFQSxpQkFBWSxHQUFHLFNBQVMsQ0FBQztRQUd6QixVQUFLLEdBQUcsRUFBRSxDQUFDO1FBR1gsU0FBSSxHQUFHLEVBQUUsQ0FBQztRQU1WLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFHbEIsaUJBQVksR0FBRyxFQUFFLENBQUM7UUFHbEIsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUdsQixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBR2pCLHFCQUFnQixHQUFHLEtBQUssQ0FBQztRQUd6QixZQUFPLEdBQUcsS0FBSyxDQUFDO1FBR2hCLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFHbEIsbUJBQWMsR0FBRyxLQUFLLENBQUM7UUFHdkIsa0JBQWEsR0FBRyxFQUFFLENBQUM7UUFHbkIsa0JBQWEsR0FBRyxLQUFLLENBQUM7UUFHdEIsc0JBQWlCLEdBQUcsRUFBRSxDQUFDO1FBR3ZCLDBCQUFxQixHQUFHLE9BQU8sQ0FBQztRQUVmLFVBQUssR0FBNkIsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUV0RSxjQUFTLEdBQUcsS0FBSyxDQUFDO1FBRWxCLGFBQVEsR0FBRyxJQUFJLENBQUM7UUFFaEIseUJBQW9CLEdBQUcsS0FBSyxDQUFDO1FBRTdCLG1CQUFjLEdBQUcsS0FBSyxDQUFDO1FBQ3ZCLGdCQUFXLEdBQUcsS0FBSyxDQUFDO1FBRXBCLHlCQUFvQixHQUFHLEtBQUssQ0FBQztRQUM3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aUIsQ0FBQyxDQUFDO2FBQzlDO1FBQ0gsQ0FBQyxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQ1gsQ0FBQzs7O1lBckpGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsWUFBWTtnQkFDdEIsMC9EQUFzQzthQUN2Qzs7OzsyQkFFRSxLQUFLO29CQUdMLEtBQUs7bUJBR0wsS0FBSzt1QkFHTCxLQUFLO3dCQUdMLEtBQUs7MkJBR0wsS0FBSzt3QkFHTCxLQUFLO3VCQUdMLEtBQUs7K0JBR0wsS0FBSztzQkFHTCxLQUFLO3dCQUdMLEtBQUs7NkJBR0wsS0FBSzs0QkFHTCxLQUFLOzRCQUdMLEtBQUs7Z0NBR0wsS0FBSztvQ0FHTCxLQUFLO29CQUdMLE1BQU07MEJBZ0JOLFNBQVMsU0FBQyxhQUFhO2dDQUd2QixTQUFTLFNBQUMsbUJBQW1CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtBZnRlclZpZXdJbml0LCBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0LCBWaWV3Q2hpbGR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd3YWMtYnV0dG9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2J1dHRvbi5jb21wb25lbnQuaHRtbCdcbn0pXG5leHBvcnQgY2xhc3MgQnV0dG9uQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBBZnRlclZpZXdJbml0IHtcbiAgQElucHV0KClcbiAgZXh0cmFDbGFzc2VzID0gJ2lzLWluZm8nO1xuXG4gIEBJbnB1dCgpXG4gIGxhYmVsID0gJyc7XG5cbiAgQElucHV0KClcbiAgaWNvbiA9ICcnO1xuXG4gIEBJbnB1dCgpXG4gIGljb25OZXh0OiBzdHJpbmc7XG5cbiAgQElucHV0KClcbiAgd2lkdGhBdXRvID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgaWNvbkZvbnRTaXplID0gMTI7XG5cbiAgQElucHV0KClcbiAgaGFzTG9hZGVyID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgZGlzYWJsZWQgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICB3aGl0ZVNwYWNlTm93cmFwID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgb3BhY2l0eSA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIGFuaW1hdGlvbiA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIGFuaW1hdGlvblJpZ2h0ID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgYW5pbWF0aW9uVGV4dCA9ICcnO1xuXG4gIEBJbnB1dCgpXG4gIGNvbmZpcm1EZWxldGUgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBjb25maXJtRGVsZXRlVGV4dCA9ICcnO1xuXG4gIEBJbnB1dCgpXG4gIGNvbmZpcm1EZWxldGVQb3NpdGlvbiA9ICdyaWdodCc7XG5cbiAgQE91dHB1dCgpIHB1YmxpYyBjbGljazogRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIGlzTG9hZGluZyA9IGZhbHNlO1xuXG4gIGludGVydmFsID0gbnVsbDtcblxuICB3YWl0Rm9yQ29uZmlybURlbGV0ZSA9IGZhbHNlO1xuXG4gIGJ1dHRvbk1heFdpZHRoID0gJzBweCc7XG4gIGJ1dHRvbldpZHRoID0gJzBweCc7XG5cbiAgYnV0dG9uTWF4V2lkdGhEZWxldGUgPSAnMHB4JztcbiAgYnV0dG9uV2lkdGhEZWxldGUgPSAnMHB4JztcblxuICBjdXJyZW50TG9hZGluZyA9IDA7XG5cbiAgQFZpZXdDaGlsZCgnY2FsY3VsV2lkdGgnKVxuICBjYWxjdWxXaWR0aDogRWxlbWVudFJlZjtcblxuICBAVmlld0NoaWxkKCdjYWxjdWxXaWR0aERlbGV0ZScpXG4gIGNhbGN1bFdpZHRoRGVsZXRlOiBFbGVtZW50UmVmO1xuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBuZ09uSW5pdCgpIHtcbiAgICBpZiAodGhpcy5jb25maXJtRGVsZXRlKSB7XG4gICAgICB0aGlzLndhaXRGb3JDb25maXJtRGVsZXRlID0gdHJ1ZTtcbiAgICB9XG4gIH1cblxuICBsYXVuY2hMb2FkaW5nKCkge1xuICAgIGlmICh0aGlzLmlzTG9hZGluZyB8fCB0aGlzLmludGVydmFsICE9PSBudWxsKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgdGhpcy5pc0xvYWRpbmcgPSB0cnVlO1xuICAgIHRoaXMuY3VycmVudExvYWRpbmcgPSAxMDtcblxuICAgIHRoaXMuaW50ZXJ2YWwgPSBzZXRJbnRlcnZhbCgoKSA9PiB7XG4gICAgICBpZiAodGhpcy5jdXJyZW50TG9hZGluZyA8IDg1KSB7XG4gICAgICAgIHRoaXMuY3VycmVudExvYWRpbmcgKz0gTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogMTUpO1xuICAgICAgfVxuICAgICAgaWYgKCF0aGlzLmlzTG9hZGluZykge1xuICAgICAgICB0aGlzLmN1cnJlbnRMb2FkaW5nID0gMTAwO1xuXG4gICAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgIGNsZWFySW50ZXJ2YWwodGhpcy5pbnRlcnZhbCk7XG4gICAgICAgICAgdGhpcy5pbnRlcnZhbCA9IG51bGw7XG4gICAgICAgIH0sIDEwMCk7XG4gICAgICB9XG4gICAgfSwgMjAwKTtcbiAgfVxuXG4gIGFkZE1heFdpZHRoKCkge1xuICAgIHRoaXMuYnV0dG9uTWF4V2lkdGggPSB0aGlzLmJ1dHRvbldpZHRoICsgJ3B4JztcbiAgfVxuXG4gIHJlc2V0TWF4V2lkdGgoKSB7XG4gICAgdGhpcy5idXR0b25NYXhXaWR0aCA9ICcwcHgnO1xuICB9XG5cbiAgYWRkTWF4V2lkdGhEZWxldGUoKSB7XG4gICAgdGhpcy5idXR0b25NYXhXaWR0aERlbGV0ZSA9IHRoaXMuYnV0dG9uV2lkdGhEZWxldGUgKyAncHgnO1xuICAgIGNvbnNvbGUubG9nKCdoZXJlJywgdGhpcy5idXR0b25NYXhXaWR0aERlbGV0ZSk7XG4gIH1cblxuICByZXNldE1heFdpZHRoRGVsZXRlKCkge1xuICAgIHRoaXMuYnV0dG9uTWF4V2lkdGhEZWxldGUgPSAnMHB4JztcbiAgICB0aGlzLndhaXRGb3JDb25maXJtRGVsZXRlID0gdHJ1ZTtcbiAgfVxuXG4gIG9uQnV0dG9uQ2xpY2soZXZlbnQpe1xuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgIGlmICghdGhpcy5kaXNhYmxlZCkge1xuICAgICAgaWYgKHRoaXMuaGFzTG9hZGVyKSB7IHRoaXMubGF1bmNoTG9hZGluZygpOyB9XG4gICAgICBpZiAoIXRoaXMud2FpdEZvckNvbmZpcm1EZWxldGUpIHtcbiAgICAgICAgdGhpcy5jbGljay5lbWl0KGV2ZW50KTtcbiAgICAgICAgaWYgKHRoaXMuY29uZmlybURlbGV0ZSkge1xuICAgICAgICAgIHRoaXMucmVzZXRNYXhXaWR0aERlbGV0ZSgpO1xuICAgICAgICB9XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLndhaXRGb3JDb25maXJtRGVsZXRlID0gZmFsc2U7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgaWYgKHRoaXMuYW5pbWF0aW9uKSB7XG4gICAgICAgIHRoaXMuYnV0dG9uV2lkdGggPSB0aGlzLmNhbGN1bFdpZHRoLm5hdGl2ZUVsZW1lbnQub2Zmc2V0V2lkdGg7XG4gICAgICB9XG4gICAgICBpZiAodGhpcy5jb25maXJtRGVsZXRlKSB7XG4gICAgICAgIHRoaXMuYnV0dG9uV2lkdGhEZWxldGUgPSB0aGlzLmNhbGN1bFdpZHRoRGVsZXRlLm5hdGl2ZUVsZW1lbnQub2Zmc2V0V2lkdGg7XG4gICAgICAgIGNvbnNvbGUubG9nKCdoZXJlMicsIHRoaXMuYnV0dG9uV2lkdGhEZWxldGUpO1xuICAgICAgfVxuICAgIH0sIDEwMDApO1xuICB9XG59XG4iXX0=
package/fesm2015/wizishop-angular-components.js CHANGED
@@ -580,13 +580,24 @@ class ButtonComponent {
580
580
  this.animation = false;
581
581
  this.animationRight = false;
582
582
  this.animationText = '';
583
+ this.confirmDelete = false;
584
+ this.confirmDeleteText = '';
585
+ this.confirmDeletePosition = 'right';
583
586
  this.click = new EventEmitter();
584
587
  this.isLoading = false;
585
588
  this.interval = null;
589
+ this.waitForConfirmDelete = false;
586
590
  this.buttonMaxWidth = '0px';
587
591
  this.buttonWidth = '0px';
592
+ this.buttonMaxWidthDelete = '0px';
593
+ this.buttonWidthDelete = '0px';
588
594
  this.currentLoading = 0;
589
595
  }
596
+ ngOnInit() {
597
+ if (this.confirmDelete) {
598
+ this.waitForConfirmDelete = true;
599
+ }
600
+ }
590
601
  launchLoading() {
591
602
  if (this.isLoading || this.interval !== null) {
592
603
  return;
@@ -612,13 +623,29 @@ class ButtonComponent {
612
623
  resetMaxWidth() {
613
624
  this.buttonMaxWidth = '0px';
614
625
  }
626
+ addMaxWidthDelete() {
627
+ this.buttonMaxWidthDelete = this.buttonWidthDelete + 'px';
628
+ console.log('here', this.buttonMaxWidthDelete);
629
+ }
630
+ resetMaxWidthDelete() {
631
+ this.buttonMaxWidthDelete = '0px';
632
+ this.waitForConfirmDelete = true;
633
+ }
615
634
  onButtonClick(event) {
616
635
  event.stopPropagation();
617
636
  if (!this.disabled) {
618
637
  if (this.hasLoader) {
619
638
  this.launchLoading();
620
639
  }
621
- this.click.emit(event);
640
+ if (!this.waitForConfirmDelete) {
641
+ this.click.emit(event);
642
+ if (this.confirmDelete) {
643
+ this.resetMaxWidthDelete();
644
+ }
645
+ }
646
+ else {
647
+ this.waitForConfirmDelete = false;
648
+ }
622
649
  }
623
650
  }
624
651
  ngAfterViewInit() {
@@ -626,13 +653,17 @@ class ButtonComponent {
626
653
  if (this.animation) {
627
654
  this.buttonWidth = this.calculWidth.nativeElement.offsetWidth;
628
655
  }
629
- }, 0);
656
+ if (this.confirmDelete) {
657
+ this.buttonWidthDelete = this.calculWidthDelete.nativeElement.offsetWidth;
658
+ console.log('here2', this.buttonWidthDelete);
659
+ }
660
+ }, 1000);
630
661
  }
631
662
  }
632
663
  ButtonComponent.decorators = [
633
664
  { type: Component, args: [{
634
665
  selector: 'wac-button',
635
- template: "<a\n [class]=\"'wac-button ' + extraClasses\"\n (click)=\"onButtonClick($event)\"\n (mouseleave)=\"animation ? resetMaxWidth() : ''\"\n (mouseenter)=\"animation ? addMaxWidth() : ''\"\n [ngClass]=\"[label === '' ? 'alone' : '',animationRight ? 'animation-right' : '', animation ? 'animationText' : '', isLoading ? 'is-loading' : '', opacity ? 'opacity' : '', disabled ? 'disabled' : '', widthAuto ? 'width-auto' : '', whiteSpaceNowrap ? 'white-space-no-wrap' : '']\"\n>\n <span class=\"wac-button__wrapper\">\n <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n {{ label }}\n <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n </span>\n <span class=\"wac-button__animation\" [style.maxWidth]=\"buttonMaxWidth\" [style.width]=\"buttonWidth + 'px'\">\n <span #calculWidth class=\"wac-button__animation__text\" [innerHTML]=\"animationText\"></span>\n </span>\n <span\n class=\"wac-button__loader\"\n [ngClass]=\"extraClasses.includes('is-outlined') ? 'outlined' : ''\"\n *ngIf=\"isLoading || interval !== null\"\n [style.width]=\"currentLoading + '%'\"\n >\n <span *ngIf=\"extraClasses.includes('is-outlined')\">\n <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n {{ label }}\n <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n </span>\n\n </span>\n</a>\n"
666
+ template: "<a\n [class]=\"'wac-button ' + extraClasses\"\n (click)=\"confirmDelete && waitForConfirmDelete ? addMaxWidthDelete() : '';onButtonClick($event);\"\n (mouseleave)=\"animation ? resetMaxWidth() : '';\"\n (mouseenter)=\"animation ? addMaxWidth() : '';\"\n wzAutoHide (clickOutside)=\"confirmDelete && !waitForConfirmDelete ? resetMaxWidthDelete() : ''\"\n [ngClass]=\"[label === '' ? 'alone' : '',animationRight ? 'animation-right' : '', animation ? 'animationText' : '', isLoading ? 'is-loading' : '', opacity ? 'opacity' : '', disabled ? 'disabled' : '', widthAuto ? 'width-auto' : '', whiteSpaceNowrap ? 'white-space-no-wrap' : '', !waitForConfirmDelete && confirmDelete ? 'step-delete' : '', confirmDelete ? 'deletePosition-' + confirmDeletePosition : '']\"\n>\n <span class=\"wac-button__wrapper\">\n <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n {{ label }}\n <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n </span>\n <span class=\"wac-button__animation\" [style.maxWidth]=\"buttonMaxWidth\" [style.width]=\"buttonWidth + 'px'\">\n <span #calculWidth class=\"wac-button__animation__text\" [innerHTML]=\"animationText\"></span>\n </span>\n <span class=\"wac-button__confirmDelete\" [style.maxWidth]=\"buttonMaxWidthDelete\" [style.width]=\"buttonWidthDelete + 'px'\">\n <span #calculWidthDelete class=\"wac-button__confirmDelete__text\" [innerHTML]=\"confirmDeleteText\"></span>\n </span>\n <span\n class=\"wac-button__loader\"\n [ngClass]=\"extraClasses.includes('is-outlined') ? 'outlined' : ''\"\n *ngIf=\"isLoading || interval !== null\"\n [style.width]=\"currentLoading + '%'\"\n >\n <span *ngIf=\"extraClasses.includes('is-outlined')\">\n <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n {{ label }}\n <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n </span>\n\n </span>\n</a>\n"
636
667
  },] }
637
668
  ];
638
669
  ButtonComponent.ctorParameters = () => [];
@@ -650,8 +681,12 @@ ButtonComponent.propDecorators = {
650
681
  animation: [{ type: Input }],
651
682
  animationRight: [{ type: Input }],
652
683
  animationText: [{ type: Input }],
684
+ confirmDelete: [{ type: Input }],
685
+ confirmDeleteText: [{ type: Input }],
686
+ confirmDeletePosition: [{ type: Input }],
653
687
  click: [{ type: Output }],
654
- calculWidth: [{ type: ViewChild, args: ['calculWidth',] }]
688
+ calculWidth: [{ type: ViewChild, args: ['calculWidth',] }],
689
+ calculWidthDelete: [{ type: ViewChild, args: ['calculWidthDelete',] }]
655
690
  };
656
691
 
657
692
  class InfoComponent {