@wizishop/angular-components 0.0.56 → 0.0.60
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 +114 -0
- package/bundles/wizishop-angular-components.umd.js +42 -5
- 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/button/button.component.js +39 -4
- package/esm2015/lib/components/tag/tag.component.js +5 -3
- package/fesm2015/wizishop-angular-components.js +42 -5
- package/fesm2015/wizishop-angular-components.js.map +1 -1
- package/lib/components/button/button.component.d.ts +12 -2
- package/lib/components/tag/tag.component.d.ts +1 -0
- package/package.json +1 -1
- package/wizishop-angular-components-0.0.60.tgz +0 -0
- package/wizishop-angular-components.metadata.json +1 -1
- package/wizishop-angular-components-0.0.56.tgz +0 -0
|
@@ -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.
|
|
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
|
}
|
|
89
|
+
if (this.confirmDelete) {
|
|
90
|
+
this.buttonWidthDelete = this.calculWidthDelete.nativeElement.offsetWidth;
|
|
91
|
+
console.log('here2', this.buttonWidthDelete);
|
|
92
|
+
}
|
|
62
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)
|
|
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,
|
|
124
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFnQixTQUFTLEVBQWMsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBTW5ILE1BQU0sT0FBTyxlQUFlO0lBdUUxQjtRQXJFQSxpQkFBWSxHQUFHLFNBQVMsQ0FBQztRQUd6QixVQUFLLEdBQUcsRUFBRSxDQUFDO1FBR1gsU0FBSSxHQUFHLEVBQUUsQ0FBQztRQU1WLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFHbEIsaUJBQVksR0FBRyxFQUFFLENBQUM7UUFHbEIsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUdsQixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBR2pCLHFCQUFnQixHQUFHLEtBQUssQ0FBQztRQUd6QixZQUFPLEdBQUcsS0FBSyxDQUFDO1FBR2hCLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFHbEIsbUJBQWMsR0FBRyxLQUFLLENBQUM7UUFHdkIsa0JBQWEsR0FBRyxFQUFFLENBQUM7UUFHbkIsa0JBQWEsR0FBRyxLQUFLLENBQUM7UUFHdEIsc0JBQWlCLEdBQUcsRUFBRSxDQUFDO1FBR3ZCLDBCQUFxQixHQUFHLE9BQU8sQ0FBQztRQUVmLFVBQUssR0FBNkIsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUV0RSxjQUFTLEdBQUcsS0FBSyxDQUFDO1FBRWxCLGFBQVEsR0FBRyxJQUFJLENBQUM7UUFFaEIseUJBQW9CLEdBQUcsS0FBSyxDQUFDO1FBRTdCLG1CQUFjLEdBQUcsS0FBSyxDQUFDO1FBQ3ZCLGdCQUFXLEdBQUcsS0FBSyxDQUFDO1FBRXBCLHlCQUFvQixHQUFHLEtBQUssQ0FBQztRQUM3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aUIsQ0FBQyxDQUFDO2FBQzlDO1FBQ0gsQ0FBQyxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQ1gsQ0FBQzs7O1lBckpGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsWUFBWTtnQkFDdEIsMC9EQUFzQzthQUN2Qzs7OzsyQkFFRSxLQUFLO29CQUdMLEtBQUs7bUJBR0wsS0FBSzt1QkFHTCxLQUFLO3dCQUdMLEtBQUs7MkJBR0wsS0FBSzt3QkFHTCxLQUFLO3VCQUdMLEtBQUs7K0JBR0wsS0FBSztzQkFHTCxLQUFLO3dCQUdMLEtBQUs7NkJBR0wsS0FBSzs0QkFHTCxLQUFLOzRCQUdMLEtBQUs7Z0NBR0wsS0FBSztvQ0FHTCxLQUFLO29CQUdMLE1BQU07MEJBZ0JOLFNBQVMsU0FBQyxhQUFhO2dDQUd2QixTQUFTLFNBQUMsbUJBQW1CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtBZnRlclZpZXdJbml0LCBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0LCBWaWV3Q2hpbGR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd3YWMtYnV0dG9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2J1dHRvbi5jb21wb25lbnQuaHRtbCdcbn0pXG5leHBvcnQgY2xhc3MgQnV0dG9uQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBBZnRlclZpZXdJbml0IHtcbiAgQElucHV0KClcbiAgZXh0cmFDbGFzc2VzID0gJ2lzLWluZm8nO1xuXG4gIEBJbnB1dCgpXG4gIGxhYmVsID0gJyc7XG5cbiAgQElucHV0KClcbiAgaWNvbiA9ICcnO1xuXG4gIEBJbnB1dCgpXG4gIGljb25OZXh0OiBzdHJpbmc7XG5cbiAgQElucHV0KClcbiAgd2lkdGhBdXRvID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgaWNvbkZvbnRTaXplID0gMTI7XG5cbiAgQElucHV0KClcbiAgaGFzTG9hZGVyID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgZGlzYWJsZWQgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICB3aGl0ZVNwYWNlTm93cmFwID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgb3BhY2l0eSA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIGFuaW1hdGlvbiA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIGFuaW1hdGlvblJpZ2h0ID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgYW5pbWF0aW9uVGV4dCA9ICcnO1xuXG4gIEBJbnB1dCgpXG4gIGNvbmZpcm1EZWxldGUgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBjb25maXJtRGVsZXRlVGV4dCA9ICcnO1xuXG4gIEBJbnB1dCgpXG4gIGNvbmZpcm1EZWxldGVQb3NpdGlvbiA9ICdyaWdodCc7XG5cbiAgQE91dHB1dCgpIHB1YmxpYyBjbGljazogRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIGlzTG9hZGluZyA9IGZhbHNlO1xuXG4gIGludGVydmFsID0gbnVsbDtcblxuICB3YWl0Rm9yQ29uZmlybURlbGV0ZSA9IGZhbHNlO1xuXG4gIGJ1dHRvbk1heFdpZHRoID0gJzBweCc7XG4gIGJ1dHRvbldpZHRoID0gJzBweCc7XG5cbiAgYnV0dG9uTWF4V2lkdGhEZWxldGUgPSAnMHB4JztcbiAgYnV0dG9uV2lkdGhEZWxldGUgPSAnMHB4JztcblxuICBjdXJyZW50TG9hZGluZyA9IDA7XG5cbiAgQFZpZXdDaGlsZCgnY2FsY3VsV2lkdGgnKVxuICBjYWxjdWxXaWR0aDogRWxlbWVudFJlZjtcblxuICBAVmlld0NoaWxkKCdjYWxjdWxXaWR0aERlbGV0ZScpXG4gIGNhbGN1bFdpZHRoRGVsZXRlOiBFbGVtZW50UmVmO1xuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBuZ09uSW5pdCgpIHtcbiAgICBpZiAodGhpcy5jb25maXJtRGVsZXRlKSB7XG4gICAgICB0aGlzLndhaXRGb3JDb25maXJtRGVsZXRlID0gdHJ1ZTtcbiAgICB9XG4gIH1cblxuICBsYXVuY2hMb2FkaW5nKCkge1xuICAgIGlmICh0aGlzLmlzTG9hZGluZyB8fCB0aGlzLmludGVydmFsICE9PSBudWxsKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgdGhpcy5pc0xvYWRpbmcgPSB0cnVlO1xuICAgIHRoaXMuY3VycmVudExvYWRpbmcgPSAxMDtcblxuICAgIHRoaXMuaW50ZXJ2YWwgPSBzZXRJbnRlcnZhbCgoKSA9PiB7XG4gICAgICBpZiAodGhpcy5jdXJyZW50TG9hZGluZyA8IDg1KSB7XG4gICAgICAgIHRoaXMuY3VycmVudExvYWRpbmcgKz0gTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogMTUpO1xuICAgICAgfVxuICAgICAgaWYgKCF0aGlzLmlzTG9hZGluZykge1xuICAgICAgICB0aGlzLmN1cnJlbnRMb2FkaW5nID0gMTAwO1xuXG4gICAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgIGNsZWFySW50ZXJ2YWwodGhpcy5pbnRlcnZhbCk7XG4gICAgICAgICAgdGhpcy5pbnRlcnZhbCA9IG51bGw7XG4gICAgICAgIH0sIDEwMCk7XG4gICAgICB9XG4gICAgfSwgMjAwKTtcbiAgfVxuXG4gIGFkZE1heFdpZHRoKCkge1xuICAgIHRoaXMuYnV0dG9uTWF4V2lkdGggPSB0aGlzLmJ1dHRvbldpZHRoICsgJ3B4JztcbiAgfVxuXG4gIHJlc2V0TWF4V2lkdGgoKSB7XG4gICAgdGhpcy5idXR0b25NYXhXaWR0aCA9ICcwcHgnO1xuICB9XG5cbiAgYWRkTWF4V2lkdGhEZWxldGUoKSB7XG4gICAgdGhpcy5idXR0b25NYXhXaWR0aERlbGV0ZSA9IHRoaXMuYnV0dG9uV2lkdGhEZWxldGUgKyAncHgnO1xuICAgIGNvbnNvbGUubG9nKCdoZXJlJywgdGhpcy5idXR0b25NYXhXaWR0aERlbGV0ZSk7XG4gIH1cblxuICByZXNldE1heFdpZHRoRGVsZXRlKCkge1xuICAgIHRoaXMuYnV0dG9uTWF4V2lkdGhEZWxldGUgPSAnMHB4JztcbiAgICB0aGlzLndhaXRGb3JDb25maXJtRGVsZXRlID0gdHJ1ZTtcbiAgfVxuXG4gIG9uQnV0dG9uQ2xpY2soZXZlbnQpe1xuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgIGlmICghdGhpcy5kaXNhYmxlZCkge1xuICAgICAgaWYgKHRoaXMuaGFzTG9hZGVyKSB7IHRoaXMubGF1bmNoTG9hZGluZygpOyB9XG4gICAgICBpZiAoIXRoaXMud2FpdEZvckNvbmZpcm1EZWxldGUpIHtcbiAgICAgICAgdGhpcy5jbGljay5lbWl0KGV2ZW50KTtcbiAgICAgICAgaWYgKHRoaXMuY29uZmlybURlbGV0ZSkge1xuICAgICAgICAgIHRoaXMucmVzZXRNYXhXaWR0aERlbGV0ZSgpO1xuICAgICAgICB9XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLndhaXRGb3JDb25maXJtRGVsZXRlID0gZmFsc2U7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgaWYgKHRoaXMuYW5pbWF0aW9uKSB7XG4gICAgICAgIHRoaXMuYnV0dG9uV2lkdGggPSB0aGlzLmNhbGN1bFdpZHRoLm5hdGl2ZUVsZW1lbnQub2Zmc2V0V2lkdGg7XG4gICAgICB9XG4gICAgICBpZiAodGhpcy5jb25maXJtRGVsZXRlKSB7XG4gICAgICAgIHRoaXMuYnV0dG9uV2lkdGhEZWxldGUgPSB0aGlzLmNhbGN1bFdpZHRoRGVsZXRlLm5hdGl2ZUVsZW1lbnQub2Zmc2V0V2lkdGg7XG4gICAgICAgIGNvbnNvbGUubG9nKCdoZXJlMicsIHRoaXMuYnV0dG9uV2lkdGhEZWxldGUpO1xuICAgICAgfVxuICAgIH0sIDEwMDApO1xuICB9XG59XG4iXX0=
|
|
@@ -4,6 +4,7 @@ export class TagComponent {
|
|
|
4
4
|
this.label = '';
|
|
5
5
|
this.hasClose = false;
|
|
6
6
|
this.isOpen = true;
|
|
7
|
+
this.big = false;
|
|
7
8
|
}
|
|
8
9
|
closeTag() {
|
|
9
10
|
if (this.hasClose) {
|
|
@@ -14,13 +15,14 @@ export class TagComponent {
|
|
|
14
15
|
TagComponent.decorators = [
|
|
15
16
|
{ type: Component, args: [{
|
|
16
17
|
selector: 'wac-tag',
|
|
17
|
-
template: "<div class=\"wac-tag\" [classList]=\"'wac-tag--' + class\" [ngClass]=\"{ hover: hasClose }\" *ngIf=\"isOpen\" (click)=\"closeTag()\">\n {{ label }}\n <span *ngIf=\"hasClose\"><i class=\"fas fa-times\"></i></span>\n</div>\n"
|
|
18
|
+
template: "<div class=\"wac-tag\" [classList]=\"'wac-tag--' + class\" [ngClass]=\"{ hover: hasClose, 'big': big }\" *ngIf=\"isOpen\" (click)=\"closeTag()\">\n {{ label }}\n <span *ngIf=\"hasClose\"><i class=\"fas fa-times\"></i></span>\n</div>\n"
|
|
18
19
|
},] }
|
|
19
20
|
];
|
|
20
21
|
TagComponent.ctorParameters = () => [];
|
|
21
22
|
TagComponent.propDecorators = {
|
|
22
23
|
label: [{ type: Input }],
|
|
23
24
|
class: [{ type: Input }],
|
|
24
|
-
hasClose: [{ type: Input }]
|
|
25
|
+
hasClose: [{ type: Input }],
|
|
26
|
+
big: [{ type: Input }]
|
|
25
27
|
};
|
|
26
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
28
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFnLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvdGFnL3RhZy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFNakQsTUFBTSxPQUFPLFlBQVk7SUFVdkI7UUFSQSxVQUFLLEdBQUcsRUFBRSxDQUFDO1FBSVgsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNqQixXQUFNLEdBQUcsSUFBSSxDQUFDO1FBRWQsUUFBRyxHQUFHLEtBQUssQ0FBQztJQUNHLENBQUM7SUFDaEIsUUFBUTtRQUNOLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNqQixJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztTQUNyQjtJQUNILENBQUM7OztZQW5CRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLFNBQVM7Z0JBQ25CLHdQQUFtQzthQUNwQzs7OztvQkFFRSxLQUFLO29CQUVMLEtBQUs7dUJBRUwsS0FBSztrQkFHTCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd3YWMtdGFnJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3RhZy5jb21wb25lbnQuaHRtbCdcbn0pXG5leHBvcnQgY2xhc3MgVGFnQ29tcG9uZW50IHtcbiAgQElucHV0KClcbiAgbGFiZWwgPSAnJztcbiAgQElucHV0KClcbiAgY2xhc3M6ICdkZWZhdWx0J3wnc3VjY2Vzcyd8J3dhcm5pbmcnfCdlcnJvcid8J2RhcmsnfCdncmF5J3wnbGlnaHRncmF5JztcbiAgQElucHV0KClcbiAgaGFzQ2xvc2UgPSBmYWxzZTtcbiAgaXNPcGVuID0gdHJ1ZTtcbiAgQElucHV0KClcbiAgYmlnID0gZmFsc2U7XG4gIGNvbnN0cnVjdG9yKCkge31cbiAgY2xvc2VUYWcoKSB7XG4gICAgaWYgKHRoaXMuaGFzQ2xvc2UpIHtcbiAgICAgIHRoaXMuaXNPcGVuID0gZmFsc2U7XG4gICAgfVxuICB9XG59XG4iXX0=
|
|
@@ -518,6 +518,7 @@ class TagComponent {
|
|
|
518
518
|
this.label = '';
|
|
519
519
|
this.hasClose = false;
|
|
520
520
|
this.isOpen = true;
|
|
521
|
+
this.big = false;
|
|
521
522
|
}
|
|
522
523
|
closeTag() {
|
|
523
524
|
if (this.hasClose) {
|
|
@@ -528,14 +529,15 @@ class TagComponent {
|
|
|
528
529
|
TagComponent.decorators = [
|
|
529
530
|
{ type: Component, args: [{
|
|
530
531
|
selector: 'wac-tag',
|
|
531
|
-
template: "<div class=\"wac-tag\" [classList]=\"'wac-tag--' + class\" [ngClass]=\"{ hover: hasClose }\" *ngIf=\"isOpen\" (click)=\"closeTag()\">\n {{ label }}\n <span *ngIf=\"hasClose\"><i class=\"fas fa-times\"></i></span>\n</div>\n"
|
|
532
|
+
template: "<div class=\"wac-tag\" [classList]=\"'wac-tag--' + class\" [ngClass]=\"{ hover: hasClose, 'big': big }\" *ngIf=\"isOpen\" (click)=\"closeTag()\">\n {{ label }}\n <span *ngIf=\"hasClose\"><i class=\"fas fa-times\"></i></span>\n</div>\n"
|
|
532
533
|
},] }
|
|
533
534
|
];
|
|
534
535
|
TagComponent.ctorParameters = () => [];
|
|
535
536
|
TagComponent.propDecorators = {
|
|
536
537
|
label: [{ type: Input }],
|
|
537
538
|
class: [{ type: Input }],
|
|
538
|
-
hasClose: [{ type: Input }]
|
|
539
|
+
hasClose: [{ type: Input }],
|
|
540
|
+
big: [{ type: Input }]
|
|
539
541
|
};
|
|
540
542
|
|
|
541
543
|
class TabComponent {
|
|
@@ -580,13 +582,24 @@ class ButtonComponent {
|
|
|
580
582
|
this.animation = false;
|
|
581
583
|
this.animationRight = false;
|
|
582
584
|
this.animationText = '';
|
|
585
|
+
this.confirmDelete = false;
|
|
586
|
+
this.confirmDeleteText = '';
|
|
587
|
+
this.confirmDeletePosition = 'right';
|
|
583
588
|
this.click = new EventEmitter();
|
|
584
589
|
this.isLoading = false;
|
|
585
590
|
this.interval = null;
|
|
591
|
+
this.waitForConfirmDelete = false;
|
|
586
592
|
this.buttonMaxWidth = '0px';
|
|
587
593
|
this.buttonWidth = '0px';
|
|
594
|
+
this.buttonMaxWidthDelete = '0px';
|
|
595
|
+
this.buttonWidthDelete = '0px';
|
|
588
596
|
this.currentLoading = 0;
|
|
589
597
|
}
|
|
598
|
+
ngOnInit() {
|
|
599
|
+
if (this.confirmDelete) {
|
|
600
|
+
this.waitForConfirmDelete = true;
|
|
601
|
+
}
|
|
602
|
+
}
|
|
590
603
|
launchLoading() {
|
|
591
604
|
if (this.isLoading || this.interval !== null) {
|
|
592
605
|
return;
|
|
@@ -612,13 +625,29 @@ class ButtonComponent {
|
|
|
612
625
|
resetMaxWidth() {
|
|
613
626
|
this.buttonMaxWidth = '0px';
|
|
614
627
|
}
|
|
628
|
+
addMaxWidthDelete() {
|
|
629
|
+
this.buttonMaxWidthDelete = this.buttonWidthDelete + 'px';
|
|
630
|
+
console.log('here', this.buttonMaxWidthDelete);
|
|
631
|
+
}
|
|
632
|
+
resetMaxWidthDelete() {
|
|
633
|
+
this.buttonMaxWidthDelete = '0px';
|
|
634
|
+
this.waitForConfirmDelete = true;
|
|
635
|
+
}
|
|
615
636
|
onButtonClick(event) {
|
|
616
637
|
event.stopPropagation();
|
|
617
638
|
if (!this.disabled) {
|
|
618
639
|
if (this.hasLoader) {
|
|
619
640
|
this.launchLoading();
|
|
620
641
|
}
|
|
621
|
-
this.
|
|
642
|
+
if (!this.waitForConfirmDelete) {
|
|
643
|
+
this.click.emit(event);
|
|
644
|
+
if (this.confirmDelete) {
|
|
645
|
+
this.resetMaxWidthDelete();
|
|
646
|
+
}
|
|
647
|
+
}
|
|
648
|
+
else {
|
|
649
|
+
this.waitForConfirmDelete = false;
|
|
650
|
+
}
|
|
622
651
|
}
|
|
623
652
|
}
|
|
624
653
|
ngAfterViewInit() {
|
|
@@ -626,13 +655,17 @@ class ButtonComponent {
|
|
|
626
655
|
if (this.animation) {
|
|
627
656
|
this.buttonWidth = this.calculWidth.nativeElement.offsetWidth;
|
|
628
657
|
}
|
|
658
|
+
if (this.confirmDelete) {
|
|
659
|
+
this.buttonWidthDelete = this.calculWidthDelete.nativeElement.offsetWidth;
|
|
660
|
+
console.log('here2', this.buttonWidthDelete);
|
|
661
|
+
}
|
|
629
662
|
}, 1000);
|
|
630
663
|
}
|
|
631
664
|
}
|
|
632
665
|
ButtonComponent.decorators = [
|
|
633
666
|
{ type: Component, args: [{
|
|
634
667
|
selector: 'wac-button',
|
|
635
|
-
template: "<a\n [class]=\"'wac-button ' + extraClasses\"\n (click)=\"onButtonClick($event)
|
|
668
|
+
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
669
|
},] }
|
|
637
670
|
];
|
|
638
671
|
ButtonComponent.ctorParameters = () => [];
|
|
@@ -650,8 +683,12 @@ ButtonComponent.propDecorators = {
|
|
|
650
683
|
animation: [{ type: Input }],
|
|
651
684
|
animationRight: [{ type: Input }],
|
|
652
685
|
animationText: [{ type: Input }],
|
|
686
|
+
confirmDelete: [{ type: Input }],
|
|
687
|
+
confirmDeleteText: [{ type: Input }],
|
|
688
|
+
confirmDeletePosition: [{ type: Input }],
|
|
653
689
|
click: [{ type: Output }],
|
|
654
|
-
calculWidth: [{ type: ViewChild, args: ['calculWidth',] }]
|
|
690
|
+
calculWidth: [{ type: ViewChild, args: ['calculWidth',] }],
|
|
691
|
+
calculWidthDelete: [{ type: ViewChild, args: ['calculWidthDelete',] }]
|
|
655
692
|
};
|
|
656
693
|
|
|
657
694
|
class InfoComponent {
|