@wizishop/angular-components 0.0.51 → 0.0.55

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.
@@ -1,4 +1,4 @@
1
- import { Component, EventEmitter, Input, Output } from '@angular/core';
1
+ import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
2
2
  export class ButtonComponent {
3
3
  constructor() {
4
4
  this.extraClasses = 'is-info';
@@ -10,9 +10,14 @@ export class ButtonComponent {
10
10
  this.disabled = false;
11
11
  this.whiteSpaceNowrap = false;
12
12
  this.opacity = false;
13
+ this.animation = false;
14
+ this.animationRight = false;
15
+ this.animationText = '';
13
16
  this.click = new EventEmitter();
14
17
  this.isLoading = false;
15
18
  this.interval = null;
19
+ this.buttonMaxWidth = '0px';
20
+ this.buttonWidth = '0px';
16
21
  this.currentLoading = 0;
17
22
  }
18
23
  launchLoading() {
@@ -34,6 +39,12 @@ export class ButtonComponent {
34
39
  }
35
40
  }, 200);
36
41
  }
42
+ addMaxWidth() {
43
+ this.buttonMaxWidth = this.buttonWidth + 'px';
44
+ }
45
+ resetMaxWidth() {
46
+ this.buttonMaxWidth = '0px';
47
+ }
37
48
  onButtonClick(event) {
38
49
  event.stopPropagation();
39
50
  if (!this.disabled) {
@@ -43,11 +54,18 @@ export class ButtonComponent {
43
54
  this.click.emit(event);
44
55
  }
45
56
  }
57
+ ngAfterViewInit() {
58
+ setTimeout(() => {
59
+ if (this.animation) {
60
+ this.buttonWidth = this.calculWidth.nativeElement.offsetWidth;
61
+ }
62
+ }, 0);
63
+ }
46
64
  }
47
65
  ButtonComponent.decorators = [
48
66
  { type: Component, args: [{
49
67
  selector: 'wac-button',
50
- template: "<a\n [class]=\"'wac-button ' + extraClasses\"\n (click)=\"onButtonClick($event)\"\n [ngClass]=\"[label === '' ? 'alone' : '', 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\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 </span>\n</a>\n"
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"
51
69
  },] }
52
70
  ];
53
71
  ButtonComponent.ctorParameters = () => [];
@@ -62,6 +80,10 @@ ButtonComponent.propDecorators = {
62
80
  disabled: [{ type: Input }],
63
81
  whiteSpaceNowrap: [{ type: Input }],
64
82
  opacity: [{ type: Input }],
65
- click: [{ type: Output }]
83
+ animation: [{ type: Input }],
84
+ animationRight: [{ type: Input }],
85
+ animationText: [{ type: Input }],
86
+ click: [{ type: Output }],
87
+ calculWidth: [{ type: ViewChild, args: ['calculWidth',] }]
66
88
  };
67
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQU12RSxNQUFNLE9BQU8sZUFBZTtJQXVDMUI7UUFyQ0EsaUJBQVksR0FBRyxTQUFTLENBQUM7UUFHekIsVUFBSyxHQUFHLEVBQUUsQ0FBQztRQUdYLFNBQUksR0FBRyxFQUFFLENBQUM7UUFNVixjQUFTLEdBQUcsS0FBSyxDQUFDO1FBR2xCLGlCQUFZLEdBQUcsRUFBRSxDQUFDO1FBR2xCLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFHbEIsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUdqQixxQkFBZ0IsR0FBRyxLQUFLLENBQUM7UUFHekIsWUFBTyxHQUFHLEtBQUssQ0FBQztRQUVDLFVBQUssR0FBNkIsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUV0RSxjQUFTLEdBQUcsS0FBSyxDQUFDO1FBRWxCLGFBQVEsR0FBRyxJQUFJLENBQUM7UUFFaEIsbUJBQWMsR0FBRyxDQUFDLENBQUM7SUFFSixDQUFDO0lBRWhCLGFBQWE7UUFDWCxJQUFJLElBQUksQ0FBQyxTQUFTLElBQUksSUFBSSxDQUFDLFFBQVEsS0FBSyxJQUFJLEVBQUU7WUFDNUMsT0FBTztTQUNSO1FBRUQsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUM7UUFDdEIsSUFBSSxDQUFDLGNBQWMsR0FBRyxFQUFFLENBQUM7UUFFekIsSUFBSSxDQUFDLFFBQVEsR0FBRyxXQUFXLENBQUMsR0FBRyxFQUFFO1lBQy9CLElBQUksSUFBSSxDQUFDLGNBQWMsR0FBRyxFQUFFLEVBQUU7Z0JBQzVCLElBQUksQ0FBQyxjQUFjLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLEdBQUcsRUFBRSxDQUFDLENBQUM7YUFDdkQ7WUFDRCxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRTtnQkFDbkIsSUFBSSxDQUFDLGNBQWMsR0FBRyxHQUFHLENBQUM7Z0JBRTFCLFVBQVUsQ0FBQyxHQUFHLEVBQUU7b0JBQ2QsYUFBYSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztvQkFDN0IsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUM7Z0JBQ3ZCLENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQzthQUNUO1FBQ0gsQ0FBQyxFQUFFLEdBQUcsQ0FBQyxDQUFDO0lBQ1YsQ0FBQztJQUVELGFBQWEsQ0FBQyxLQUFLO1FBQ2pCLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN4QixJQUFHLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNqQixJQUFHLElBQUksQ0FBQyxTQUFTLEVBQUU7Z0JBQUUsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO2FBQUU7WUFDNUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDeEI7SUFDSCxDQUFDOzs7WUExRUYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxZQUFZO2dCQUN0Qiw4akNBQXNDO2FBQ3ZDOzs7OzJCQUVFLEtBQUs7b0JBR0wsS0FBSzttQkFHTCxLQUFLO3VCQUdMLEtBQUs7d0JBR0wsS0FBSzsyQkFHTCxLQUFLO3dCQUdMLEtBQUs7dUJBR0wsS0FBSzsrQkFHTCxLQUFLO3NCQUdMLEtBQUs7b0JBR0wsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3dhYy1idXR0b24nLFxuICB0ZW1wbGF0ZVVybDogJy4vYnV0dG9uLmNvbXBvbmVudC5odG1sJ1xufSlcbmV4cG9ydCBjbGFzcyBCdXR0b25Db21wb25lbnQge1xuICBASW5wdXQoKVxuICBleHRyYUNsYXNzZXMgPSAnaXMtaW5mbyc7XG5cbiAgQElucHV0KClcbiAgbGFiZWwgPSAnJztcblxuICBASW5wdXQoKVxuICBpY29uID0gJyc7XG5cbiAgQElucHV0KClcbiAgaWNvbk5leHQ6IHN0cmluZztcblxuICBASW5wdXQoKVxuICB3aWR0aEF1dG8gPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBpY29uRm9udFNpemUgPSAxMjtcblxuICBASW5wdXQoKVxuICBoYXNMb2FkZXIgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBkaXNhYmxlZCA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIHdoaXRlU3BhY2VOb3dyYXAgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBvcGFjaXR5ID0gZmFsc2U7XG5cbiAgQE91dHB1dCgpIHB1YmxpYyBjbGljazogRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIGlzTG9hZGluZyA9IGZhbHNlO1xuXG4gIGludGVydmFsID0gbnVsbDtcblxuICBjdXJyZW50TG9hZGluZyA9IDA7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIGxhdW5jaExvYWRpbmcoKSB7XG4gICAgaWYgKHRoaXMuaXNMb2FkaW5nIHx8IHRoaXMuaW50ZXJ2YWwgIT09IG51bGwpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICB0aGlzLmlzTG9hZGluZyA9IHRydWU7XG4gICAgdGhpcy5jdXJyZW50TG9hZGluZyA9IDEwO1xuXG4gICAgdGhpcy5pbnRlcnZhbCA9IHNldEludGVydmFsKCgpID0+IHtcbiAgICAgIGlmICh0aGlzLmN1cnJlbnRMb2FkaW5nIDwgODUpIHtcbiAgICAgICAgdGhpcy5jdXJyZW50TG9hZGluZyArPSBNYXRoLmZsb29yKE1hdGgucmFuZG9tKCkgKiAxNSk7XG4gICAgICB9XG4gICAgICBpZiAoIXRoaXMuaXNMb2FkaW5nKSB7XG4gICAgICAgIHRoaXMuY3VycmVudExvYWRpbmcgPSAxMDA7XG5cbiAgICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgICAgY2xlYXJJbnRlcnZhbCh0aGlzLmludGVydmFsKTtcbiAgICAgICAgICB0aGlzLmludGVydmFsID0gbnVsbDtcbiAgICAgICAgfSwgMTAwKTtcbiAgICAgIH1cbiAgICB9LCAyMDApO1xuICB9XG5cbiAgb25CdXR0b25DbGljayhldmVudCl7XG4gICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgaWYoIXRoaXMuZGlzYWJsZWQpIHtcbiAgICAgIGlmKHRoaXMuaGFzTG9hZGVyKSB7IHRoaXMubGF1bmNoTG9hZGluZygpOyB9XG4gICAgICB0aGlzLmNsaWNrLmVtaXQoZXZlbnQpO1xuICAgIH1cbiAgfVxufVxuIl19
89
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFnQixTQUFTLEVBQWMsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBTTNHLE1BQU0sT0FBTyxlQUFlO0lBc0QxQjtRQXBEQSxpQkFBWSxHQUFHLFNBQVMsQ0FBQztRQUd6QixVQUFLLEdBQUcsRUFBRSxDQUFDO1FBR1gsU0FBSSxHQUFHLEVBQUUsQ0FBQztRQU1WLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFHbEIsaUJBQVksR0FBRyxFQUFFLENBQUM7UUFHbEIsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUdsQixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBR2pCLHFCQUFnQixHQUFHLEtBQUssQ0FBQztRQUd6QixZQUFPLEdBQUcsS0FBSyxDQUFDO1FBR2hCLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFHbEIsbUJBQWMsR0FBRyxLQUFLLENBQUM7UUFHdkIsa0JBQWEsR0FBRyxFQUFFLENBQUM7UUFFRixVQUFLLEdBQTZCLElBQUksWUFBWSxFQUFFLENBQUM7UUFFdEUsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUVsQixhQUFRLEdBQUcsSUFBSSxDQUFDO1FBRWhCLG1CQUFjLEdBQUcsS0FBSyxDQUFDO1FBQ3ZCLGdCQUFXLEdBQUcsS0FBSyxDQUFDO1FBRXBCLG1CQUFjLEdBQUcsQ0FBQyxDQUFDO0lBS0osQ0FBQztJQUVoQixhQUFhO1FBQ1gsSUFBSSxJQUFJLENBQUMsU0FBUyxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUssSUFBSSxFQUFFO1lBQzVDLE9BQU87U0FDUjtRQUVELElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDO1FBQ3RCLElBQUksQ0FBQyxjQUFjLEdBQUcsRUFBRSxDQUFDO1FBRXpCLElBQUksQ0FBQyxRQUFRLEdBQUcsV0FBVyxDQUFDLEdBQUcsRUFBRTtZQUMvQixJQUFJLElBQUksQ0FBQyxjQUFjLEdBQUcsRUFBRSxFQUFFO2dCQUM1QixJQUFJLENBQUMsY0FBYyxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxHQUFHLEVBQUUsQ0FBQyxDQUFDO2FBQ3ZEO1lBQ0QsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUU7Z0JBQ25CLElBQUksQ0FBQyxjQUFjLEdBQUcsR0FBRyxDQUFDO2dCQUUxQixVQUFVLENBQUMsR0FBRyxFQUFFO29CQUNkLGFBQWEsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7b0JBQzdCLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO2dCQUN2QixDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUM7YUFDVDtRQUNILENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQztJQUNWLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLGNBQWMsR0FBRyxJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQztJQUNoRCxDQUFDO0lBRUQsYUFBYTtRQUNYLElBQUksQ0FBQyxjQUFjLEdBQUcsS0FBSyxDQUFDO0lBQzlCLENBQUM7SUFFRCxhQUFhLENBQUMsS0FBSztRQUNqQixLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDeEIsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDbEIsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFO2dCQUFFLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQzthQUFFO1lBQzdDLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQ3hCO0lBQ0gsQ0FBQztJQUVELGVBQWU7UUFDYixVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFO2dCQUNsQixJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLFdBQVcsQ0FBQzthQUMvRDtRQUNILENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztJQUNSLENBQUM7OztZQXpHRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLFlBQVk7Z0JBQ3RCLG85Q0FBc0M7YUFDdkM7Ozs7MkJBRUUsS0FBSztvQkFHTCxLQUFLO21CQUdMLEtBQUs7dUJBR0wsS0FBSzt3QkFHTCxLQUFLOzJCQUdMLEtBQUs7d0JBR0wsS0FBSzt1QkFHTCxLQUFLOytCQUdMLEtBQUs7c0JBR0wsS0FBSzt3QkFHTCxLQUFLOzZCQUdMLEtBQUs7NEJBR0wsS0FBSztvQkFHTCxNQUFNOzBCQVdOLFNBQVMsU0FBQyxhQUFhIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtBZnRlclZpZXdJbml0LCBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCwgVmlld0NoaWxkfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnd2FjLWJ1dHRvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi9idXR0b24uY29tcG9uZW50Lmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIEJ1dHRvbkNvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xuICBASW5wdXQoKVxuICBleHRyYUNsYXNzZXMgPSAnaXMtaW5mbyc7XG5cbiAgQElucHV0KClcbiAgbGFiZWwgPSAnJztcblxuICBASW5wdXQoKVxuICBpY29uID0gJyc7XG5cbiAgQElucHV0KClcbiAgaWNvbk5leHQ6IHN0cmluZztcblxuICBASW5wdXQoKVxuICB3aWR0aEF1dG8gPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBpY29uRm9udFNpemUgPSAxMjtcblxuICBASW5wdXQoKVxuICBoYXNMb2FkZXIgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBkaXNhYmxlZCA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIHdoaXRlU3BhY2VOb3dyYXAgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBvcGFjaXR5ID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgYW5pbWF0aW9uID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgYW5pbWF0aW9uUmlnaHQgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBhbmltYXRpb25UZXh0ID0gJyc7XG5cbiAgQE91dHB1dCgpIHB1YmxpYyBjbGljazogRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIGlzTG9hZGluZyA9IGZhbHNlO1xuXG4gIGludGVydmFsID0gbnVsbDtcblxuICBidXR0b25NYXhXaWR0aCA9ICcwcHgnO1xuICBidXR0b25XaWR0aCA9ICcwcHgnO1xuXG4gIGN1cnJlbnRMb2FkaW5nID0gMDtcblxuICBAVmlld0NoaWxkKCdjYWxjdWxXaWR0aCcpXG4gIGNhbGN1bFdpZHRoOiBFbGVtZW50UmVmO1xuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBsYXVuY2hMb2FkaW5nKCkge1xuICAgIGlmICh0aGlzLmlzTG9hZGluZyB8fCB0aGlzLmludGVydmFsICE9PSBudWxsKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgdGhpcy5pc0xvYWRpbmcgPSB0cnVlO1xuICAgIHRoaXMuY3VycmVudExvYWRpbmcgPSAxMDtcblxuICAgIHRoaXMuaW50ZXJ2YWwgPSBzZXRJbnRlcnZhbCgoKSA9PiB7XG4gICAgICBpZiAodGhpcy5jdXJyZW50TG9hZGluZyA8IDg1KSB7XG4gICAgICAgIHRoaXMuY3VycmVudExvYWRpbmcgKz0gTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogMTUpO1xuICAgICAgfVxuICAgICAgaWYgKCF0aGlzLmlzTG9hZGluZykge1xuICAgICAgICB0aGlzLmN1cnJlbnRMb2FkaW5nID0gMTAwO1xuXG4gICAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgIGNsZWFySW50ZXJ2YWwodGhpcy5pbnRlcnZhbCk7XG4gICAgICAgICAgdGhpcy5pbnRlcnZhbCA9IG51bGw7XG4gICAgICAgIH0sIDEwMCk7XG4gICAgICB9XG4gICAgfSwgMjAwKTtcbiAgfVxuXG4gIGFkZE1heFdpZHRoKCkge1xuICAgIHRoaXMuYnV0dG9uTWF4V2lkdGggPSB0aGlzLmJ1dHRvbldpZHRoICsgJ3B4JztcbiAgfVxuXG4gIHJlc2V0TWF4V2lkdGgoKSB7XG4gICAgdGhpcy5idXR0b25NYXhXaWR0aCA9ICcwcHgnO1xuICB9XG5cbiAgb25CdXR0b25DbGljayhldmVudCl7XG4gICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgaWYgKCF0aGlzLmRpc2FibGVkKSB7XG4gICAgICBpZiAodGhpcy5oYXNMb2FkZXIpIHsgdGhpcy5sYXVuY2hMb2FkaW5nKCk7IH1cbiAgICAgIHRoaXMuY2xpY2suZW1pdChldmVudCk7XG4gICAgfVxuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgaWYgKHRoaXMuYW5pbWF0aW9uKSB7XG4gICAgICAgIHRoaXMuYnV0dG9uV2lkdGggPSB0aGlzLmNhbGN1bFdpZHRoLm5hdGl2ZUVsZW1lbnQub2Zmc2V0V2lkdGg7XG4gICAgICB9XG4gICAgfSwgMCk7XG4gIH1cbn1cbiJdfQ==
@@ -577,9 +577,14 @@ class ButtonComponent {
577
577
  this.disabled = false;
578
578
  this.whiteSpaceNowrap = false;
579
579
  this.opacity = false;
580
+ this.animation = false;
581
+ this.animationRight = false;
582
+ this.animationText = '';
580
583
  this.click = new EventEmitter();
581
584
  this.isLoading = false;
582
585
  this.interval = null;
586
+ this.buttonMaxWidth = '0px';
587
+ this.buttonWidth = '0px';
583
588
  this.currentLoading = 0;
584
589
  }
585
590
  launchLoading() {
@@ -601,6 +606,12 @@ class ButtonComponent {
601
606
  }
602
607
  }, 200);
603
608
  }
609
+ addMaxWidth() {
610
+ this.buttonMaxWidth = this.buttonWidth + 'px';
611
+ }
612
+ resetMaxWidth() {
613
+ this.buttonMaxWidth = '0px';
614
+ }
604
615
  onButtonClick(event) {
605
616
  event.stopPropagation();
606
617
  if (!this.disabled) {
@@ -610,11 +621,18 @@ class ButtonComponent {
610
621
  this.click.emit(event);
611
622
  }
612
623
  }
624
+ ngAfterViewInit() {
625
+ setTimeout(() => {
626
+ if (this.animation) {
627
+ this.buttonWidth = this.calculWidth.nativeElement.offsetWidth;
628
+ }
629
+ }, 0);
630
+ }
613
631
  }
614
632
  ButtonComponent.decorators = [
615
633
  { type: Component, args: [{
616
634
  selector: 'wac-button',
617
- template: "<a\n [class]=\"'wac-button ' + extraClasses\"\n (click)=\"onButtonClick($event)\"\n [ngClass]=\"[label === '' ? 'alone' : '', 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\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 </span>\n</a>\n"
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"
618
636
  },] }
619
637
  ];
620
638
  ButtonComponent.ctorParameters = () => [];
@@ -629,7 +647,11 @@ ButtonComponent.propDecorators = {
629
647
  disabled: [{ type: Input }],
630
648
  whiteSpaceNowrap: [{ type: Input }],
631
649
  opacity: [{ type: Input }],
632
- click: [{ type: Output }]
650
+ animation: [{ type: Input }],
651
+ animationRight: [{ type: Input }],
652
+ animationText: [{ type: Input }],
653
+ click: [{ type: Output }],
654
+ calculWidth: [{ type: ViewChild, args: ['calculWidth',] }]
633
655
  };
634
656
 
635
657
  class InfoComponent {