@wizishop/angular-components 0.0.52 → 0.0.53
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 +3687 -3625
- package/bundles/wizishop-angular-components.umd.js +24 -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 +15 -2
- package/fesm2015/wizishop-angular-components.js +14 -1
- package/fesm2015/wizishop-angular-components.js.map +1 -1
- package/lib/components/button/button.component.d.ts +6 -0
- package/package.json +1 -1
- package/wizishop-angular-components-0.0.53.tgz +0 -0
- package/wizishop-angular-components.metadata.json +1 -1
- package/wizishop-angular-components-0.0.52.tgz +0 -0
|
@@ -10,9 +10,13 @@ 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';
|
|
16
20
|
this.currentLoading = 0;
|
|
17
21
|
}
|
|
18
22
|
launchLoading() {
|
|
@@ -34,6 +38,12 @@ export class ButtonComponent {
|
|
|
34
38
|
}
|
|
35
39
|
}, 200);
|
|
36
40
|
}
|
|
41
|
+
addMaxWidth(size) {
|
|
42
|
+
this.buttonMaxWidth = size + 'px';
|
|
43
|
+
}
|
|
44
|
+
resetMaxWidth() {
|
|
45
|
+
this.buttonMaxWidth = '0px';
|
|
46
|
+
}
|
|
37
47
|
onButtonClick(event) {
|
|
38
48
|
event.stopPropagation();
|
|
39
49
|
if (!this.disabled) {
|
|
@@ -47,7 +57,7 @@ export class ButtonComponent {
|
|
|
47
57
|
ButtonComponent.decorators = [
|
|
48
58
|
{ type: Component, args: [{
|
|
49
59
|
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"
|
|
60
|
+
template: "<a\n [class]=\"'wac-button ' + extraClasses\"\n (click)=\"onButtonClick($event)\"\n (mouseleave)=\"animation ? resetMaxWidth() : ''\"\n (mouseenter)=\"animation ? addMaxWidth(animationText.length * 7 + 30) : ''\"\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]=\"animationText.length * 7 + 30 + 'px'\" *ngIf=\"animation && !label\">\n <span 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
61
|
},] }
|
|
52
62
|
];
|
|
53
63
|
ButtonComponent.ctorParameters = () => [];
|
|
@@ -62,6 +72,9 @@ ButtonComponent.propDecorators = {
|
|
|
62
72
|
disabled: [{ type: Input }],
|
|
63
73
|
whiteSpaceNowrap: [{ type: Input }],
|
|
64
74
|
opacity: [{ type: Input }],
|
|
75
|
+
animation: [{ type: Input }],
|
|
76
|
+
animationRight: [{ type: Input }],
|
|
77
|
+
animationText: [{ type: Input }],
|
|
65
78
|
click: [{ type: Output }]
|
|
66
79
|
};
|
|
67
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
80
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQU12RSxNQUFNLE9BQU8sZUFBZTtJQWtEMUI7UUFoREEsaUJBQVksR0FBRyxTQUFTLENBQUM7UUFHekIsVUFBSyxHQUFHLEVBQUUsQ0FBQztRQUdYLFNBQUksR0FBRyxFQUFFLENBQUM7UUFNVixjQUFTLEdBQUcsS0FBSyxDQUFDO1FBR2xCLGlCQUFZLEdBQUcsRUFBRSxDQUFDO1FBR2xCLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFHbEIsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUdqQixxQkFBZ0IsR0FBRyxLQUFLLENBQUM7UUFHekIsWUFBTyxHQUFHLEtBQUssQ0FBQztRQUdoQixjQUFTLEdBQUcsS0FBSyxDQUFDO1FBR2xCLG1CQUFjLEdBQUcsS0FBSyxDQUFDO1FBR3ZCLGtCQUFhLEdBQUcsRUFBRSxDQUFDO1FBRUYsVUFBSyxHQUE2QixJQUFJLFlBQVksRUFBRSxDQUFDO1FBRXRFLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFFbEIsYUFBUSxHQUFHLElBQUksQ0FBQztRQUVoQixtQkFBYyxHQUFHLEtBQUssQ0FBQztRQUV2QixtQkFBYyxHQUFHLENBQUMsQ0FBQztJQUVKLENBQUM7SUFFaEIsYUFBYTtRQUNYLElBQUksSUFBSSxDQUFDLFNBQVMsSUFBSSxJQUFJLENBQUMsUUFBUSxLQUFLLElBQUksRUFBRTtZQUM1QyxPQUFPO1NBQ1I7UUFFRCxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQztRQUN0QixJQUFJLENBQUMsY0FBYyxHQUFHLEVBQUUsQ0FBQztRQUV6QixJQUFJLENBQUMsUUFBUSxHQUFHLFdBQVcsQ0FBQyxHQUFHLEVBQUU7WUFDL0IsSUFBSSxJQUFJLENBQUMsY0FBYyxHQUFHLEVBQUUsRUFBRTtnQkFDNUIsSUFBSSxDQUFDLGNBQWMsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsR0FBRyxFQUFFLENBQUMsQ0FBQzthQUN2RDtZQUNELElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxFQUFFO2dCQUNuQixJQUFJLENBQUMsY0FBYyxHQUFHLEdBQUcsQ0FBQztnQkFFMUIsVUFBVSxDQUFDLEdBQUcsRUFBRTtvQkFDZCxhQUFhLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO29CQUM3QixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQztnQkFDdkIsQ0FBQyxFQUFFLEdBQUcsQ0FBQyxDQUFDO2FBQ1Q7UUFDSCxDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUM7SUFDVixDQUFDO0lBRUQsV0FBVyxDQUFDLElBQUk7UUFDZCxJQUFJLENBQUMsY0FBYyxHQUFHLElBQUksR0FBRyxJQUFJLENBQUM7SUFDcEMsQ0FBQztJQUVELGFBQWE7UUFDWCxJQUFJLENBQUMsY0FBYyxHQUFHLEtBQUssQ0FBQztJQUM5QixDQUFDO0lBRUQsYUFBYSxDQUFDLEtBQUs7UUFDakIsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3hCLElBQUcsQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFO1lBQ2pCLElBQUcsSUFBSSxDQUFDLFNBQVMsRUFBRTtnQkFBRSxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7YUFBRTtZQUM1QyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUN4QjtJQUNILENBQUM7OztZQTdGRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLFlBQVk7Z0JBQ3RCLG9oREFBc0M7YUFDdkM7Ozs7MkJBRUUsS0FBSztvQkFHTCxLQUFLO21CQUdMLEtBQUs7dUJBR0wsS0FBSzt3QkFHTCxLQUFLOzJCQUdMLEtBQUs7d0JBR0wsS0FBSzt1QkFHTCxLQUFLOytCQUdMLEtBQUs7c0JBR0wsS0FBSzt3QkFHTCxLQUFLOzZCQUdMLEtBQUs7NEJBR0wsS0FBSztvQkFHTCxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnd2FjLWJ1dHRvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi9idXR0b24uY29tcG9uZW50Lmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIEJ1dHRvbkNvbXBvbmVudCB7XG4gIEBJbnB1dCgpXG4gIGV4dHJhQ2xhc3NlcyA9ICdpcy1pbmZvJztcblxuICBASW5wdXQoKVxuICBsYWJlbCA9ICcnO1xuXG4gIEBJbnB1dCgpXG4gIGljb24gPSAnJztcblxuICBASW5wdXQoKVxuICBpY29uTmV4dDogc3RyaW5nO1xuXG4gIEBJbnB1dCgpXG4gIHdpZHRoQXV0byA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIGljb25Gb250U2l6ZSA9IDEyO1xuXG4gIEBJbnB1dCgpXG4gIGhhc0xvYWRlciA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIGRpc2FibGVkID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgd2hpdGVTcGFjZU5vd3JhcCA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIG9wYWNpdHkgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBhbmltYXRpb24gPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBhbmltYXRpb25SaWdodCA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIGFuaW1hdGlvblRleHQgPSAnJztcblxuICBAT3V0cHV0KCkgcHVibGljIGNsaWNrOiBFdmVudEVtaXR0ZXI8TW91c2VFdmVudD4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgaXNMb2FkaW5nID0gZmFsc2U7XG5cbiAgaW50ZXJ2YWwgPSBudWxsO1xuXG4gIGJ1dHRvbk1heFdpZHRoID0gJzBweCc7XG5cbiAgY3VycmVudExvYWRpbmcgPSAwO1xuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBsYXVuY2hMb2FkaW5nKCkge1xuICAgIGlmICh0aGlzLmlzTG9hZGluZyB8fCB0aGlzLmludGVydmFsICE9PSBudWxsKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgdGhpcy5pc0xvYWRpbmcgPSB0cnVlO1xuICAgIHRoaXMuY3VycmVudExvYWRpbmcgPSAxMDtcblxuICAgIHRoaXMuaW50ZXJ2YWwgPSBzZXRJbnRlcnZhbCgoKSA9PiB7XG4gICAgICBpZiAodGhpcy5jdXJyZW50TG9hZGluZyA8IDg1KSB7XG4gICAgICAgIHRoaXMuY3VycmVudExvYWRpbmcgKz0gTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogMTUpO1xuICAgICAgfVxuICAgICAgaWYgKCF0aGlzLmlzTG9hZGluZykge1xuICAgICAgICB0aGlzLmN1cnJlbnRMb2FkaW5nID0gMTAwO1xuXG4gICAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgIGNsZWFySW50ZXJ2YWwodGhpcy5pbnRlcnZhbCk7XG4gICAgICAgICAgdGhpcy5pbnRlcnZhbCA9IG51bGw7XG4gICAgICAgIH0sIDEwMCk7XG4gICAgICB9XG4gICAgfSwgMjAwKTtcbiAgfVxuXG4gIGFkZE1heFdpZHRoKHNpemUpIHtcbiAgICB0aGlzLmJ1dHRvbk1heFdpZHRoID0gc2l6ZSArICdweCc7XG4gIH1cblxuICByZXNldE1heFdpZHRoKCkge1xuICAgIHRoaXMuYnV0dG9uTWF4V2lkdGggPSAnMHB4JztcbiAgfVxuXG4gIG9uQnV0dG9uQ2xpY2soZXZlbnQpe1xuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgIGlmKCF0aGlzLmRpc2FibGVkKSB7XG4gICAgICBpZih0aGlzLmhhc0xvYWRlcikgeyB0aGlzLmxhdW5jaExvYWRpbmcoKTsgfVxuICAgICAgdGhpcy5jbGljay5lbWl0KGV2ZW50KTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==
|
|
@@ -577,9 +577,13 @@ 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';
|
|
583
587
|
this.currentLoading = 0;
|
|
584
588
|
}
|
|
585
589
|
launchLoading() {
|
|
@@ -601,6 +605,12 @@ class ButtonComponent {
|
|
|
601
605
|
}
|
|
602
606
|
}, 200);
|
|
603
607
|
}
|
|
608
|
+
addMaxWidth(size) {
|
|
609
|
+
this.buttonMaxWidth = size + 'px';
|
|
610
|
+
}
|
|
611
|
+
resetMaxWidth() {
|
|
612
|
+
this.buttonMaxWidth = '0px';
|
|
613
|
+
}
|
|
604
614
|
onButtonClick(event) {
|
|
605
615
|
event.stopPropagation();
|
|
606
616
|
if (!this.disabled) {
|
|
@@ -614,7 +624,7 @@ class ButtonComponent {
|
|
|
614
624
|
ButtonComponent.decorators = [
|
|
615
625
|
{ type: Component, args: [{
|
|
616
626
|
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"
|
|
627
|
+
template: "<a\n [class]=\"'wac-button ' + extraClasses\"\n (click)=\"onButtonClick($event)\"\n (mouseleave)=\"animation ? resetMaxWidth() : ''\"\n (mouseenter)=\"animation ? addMaxWidth(animationText.length * 7 + 30) : ''\"\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]=\"animationText.length * 7 + 30 + 'px'\" *ngIf=\"animation && !label\">\n <span 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
628
|
},] }
|
|
619
629
|
];
|
|
620
630
|
ButtonComponent.ctorParameters = () => [];
|
|
@@ -629,6 +639,9 @@ ButtonComponent.propDecorators = {
|
|
|
629
639
|
disabled: [{ type: Input }],
|
|
630
640
|
whiteSpaceNowrap: [{ type: Input }],
|
|
631
641
|
opacity: [{ type: Input }],
|
|
642
|
+
animation: [{ type: Input }],
|
|
643
|
+
animationRight: [{ type: Input }],
|
|
644
|
+
animationText: [{ type: Input }],
|
|
632
645
|
click: [{ type: Output }]
|
|
633
646
|
};
|
|
634
647
|
|