mat-progress-buttons
Version:
Material Design Progress Buttons
50 lines • 8.58 kB
JavaScript
import { Component, Input, Output, HostListener, EventEmitter, Inject, } from '@angular/core';
import { GLOBAL_CONFIG, } from '../../mat-progress-buttons.injection-token';
export class MatSpinnerButtonComponent {
constructor(config) {
this.config = config;
this.btnClick = new EventEmitter();
}
handleClick(event) {
if (!this.options.disabled && !this.options.active) {
this.btnClick.emit(event);
}
}
get configExists() {
return !!this.buttonId && !!this.config;
}
get globalConfig() {
return this.configExists
? this.config.find((item) => item.id === this.buttonId)
: this.options;
}
ngOnChanges(changes) {
if (changes.active) {
this.options.active = changes.active.currentValue;
}
if (changes.disabled) {
this.options.disabled = changes.disabled.currentValue;
}
this.options = Object.assign(Object.assign({}, this.globalConfig), this.options);
}
}
MatSpinnerButtonComponent.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line:component-selector
selector: 'mat-spinner-button',
template: "<button mat-button\n [type]=\"options.type\"\n [color]=\"options.buttonColor\"\n [class.active]=\"options.active\"\n [class.fullWidth]=\"options.fullWidth\"\n [class.mat-raised-button]=\"options.raised\"\n [class.mat-stroked-button]=\"options.stroked\"\n [class.mat-flat-button]=\"options.flat\"\n [class.mat-fab]=\"options.fab\"\n [ngClass]=\"options.customClass\"\n [disabled]=\"options.active || options.disabled\">\n\n <ng-container\n *ngIf=\"options.buttonIcon\">\n <mat-icon\n class=\"mat-button-icon\"\n [class.is-mat-icon]=\"!options.buttonIcon.fontSet\"\n [class.active]=\"options.active && !options.disabled\"\n [ngClass]=\"options.buttonIcon.customClass\"\n [fontSet]=\"options.buttonIcon.fontSet\"\n [fontIcon]=\"options.buttonIcon.fontIcon\"\n [color]=\"options.buttonIcon.color\"\n [svgIcon]=\"options.buttonIcon.svgIcon\"\n [inline]=\"options.buttonIcon.inline\">\n {{ options.buttonIcon.fontSet ? '' : options.buttonIcon.fontIcon }}\n </mat-icon>\n </ng-container>\n\n <span\n class=\"button-text\"\n *ngIf=\"!options.fab\"\n [class.active]=\"options.active && !options.disabled\">\n {{ options.text }}\n </span>\n\n <ng-container\n *ngIf=\"options.fab && options.icon\">\n <mat-icon\n [fontSet]=\"options.icon.fontSet\"\n [fontIcon]=\"options.icon.fontIcon\"\n [color]=\"options.icon.color\"\n [svgIcon]=\"options.icon.svgIcon\"\n [inline]=\"options.icon.inline\">\n {{ options.icon.fontSet ? '' : options.icon.fontIcon }}\n </mat-icon>\n </ng-container>\n\n <mat-spinner class=\"spinner\"\n *ngIf=\"options.active && !options.disabled\"\n [diameter]=\"options.fab ? 58 : options.spinnerSize\"\n [color]=\"options.spinnerColor\"\n [mode]=\"options.mode\"\n [value]=\"options.value\"\n [class.active]=\"options.active && !options.disabled\">\n </mat-spinner>\n</button>\n",
styles: [":host button{outline:none}:host button.active{cursor:not-allowed}:host button ::ng-deep .mat-button-wrapper{display:flex;align-items:center;justify-content:center}:host button.fullWidth{width:100%}:host button.mat-fab .spinner{margin-top:-15px}:host button .spinner{position:absolute;top:25%;opacity:0;transition:opacity .3s ease-in-out}:host button .spinner.active{opacity:1}:host button .button-text{opacity:1;transition:opacity .3s ease-in-out}:host button .button-text.active{opacity:0}:host button mat-icon.mat-button-icon{padding-right:5px;transition:opacity .3s ease-in-out}:host button mat-icon.mat-button-icon.is-mat-icon{font-size:18px;position:relative;top:3px}:host button mat-icon.mat-button-icon.active{opacity:0}"]
},] }
];
MatSpinnerButtonComponent.ctorParameters = () => [
{ type: undefined, decorators: [{ type: Inject, args: [GLOBAL_CONFIG,] }] }
];
MatSpinnerButtonComponent.propDecorators = {
options: [{ type: Input }],
buttonId: [{ type: Input }],
active: [{ type: Input }],
disabled: [{ type: Input }],
btnClick: [{ type: Output }],
handleClick: [{ type: HostListener, args: ['click', ['$event'],] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bpbm5lci1idXR0b24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWF0LXByb2dyZXNzLWJ1dHRvbnMvc3JjL2xpYi9jb21wb25lbnQvc3Bpbm5lci1idXR0b24vc3Bpbm5lci1idXR0b24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxFQUNMLE1BQU0sRUFDTixZQUFZLEVBQ1osWUFBWSxFQUdaLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQ0wsYUFBYSxHQUVkLE1BQU0sNENBQTRDLENBQUM7QUFRcEQsTUFBTSxPQUFPLHlCQUF5QjtJQWVwQyxZQUEyQyxNQUFvQjtRQUFwQixXQUFNLEdBQU4sTUFBTSxDQUFjO1FBVHJELGFBQVEsR0FBNkIsSUFBSSxZQUFZLEVBQWMsQ0FBQztJQVNaLENBQUM7SUFONUQsV0FBVyxDQUFDLEtBQWlCO1FBQ2xDLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLFFBQVEsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsTUFBTSxFQUFFO1lBQ2xELElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQzNCO0lBQ0gsQ0FBQztJQUlELElBQUksWUFBWTtRQUNkLE9BQU8sQ0FBQyxDQUFDLElBQUksQ0FBQyxRQUFRLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDMUMsQ0FBQztJQUVELElBQUksWUFBWTtRQUNkLE9BQU8sSUFBSSxDQUFDLFlBQVk7WUFDdEIsQ0FBQyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsRUFBRSxLQUFLLElBQUksQ0FBQyxRQUFRLENBQUM7WUFDdkQsQ0FBQyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUM7SUFDbkIsQ0FBQztJQUVELFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxJQUFJLE9BQU8sQ0FBQyxNQUFNLEVBQUU7WUFDbEIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNLEdBQUcsT0FBTyxDQUFDLE1BQU0sQ0FBQyxZQUFZLENBQUM7U0FDbkQ7UUFDRCxJQUFJLE9BQU8sQ0FBQyxRQUFRLEVBQUU7WUFDcEIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLEdBQUcsT0FBTyxDQUFDLFFBQVEsQ0FBQyxZQUFZLENBQUM7U0FDdkQ7UUFDRCxJQUFJLENBQUMsT0FBTyxtQ0FBUSxJQUFJLENBQUMsWUFBWSxHQUFLLElBQUksQ0FBQyxPQUFPLENBQUUsQ0FBQztJQUMzRCxDQUFDOzs7WUF6Q0YsU0FBUyxTQUFDO2dCQUNULDhDQUE4QztnQkFDOUMsUUFBUSxFQUFFLG9CQUFvQjtnQkFDOUIsNjVEQUE4Qzs7YUFFL0M7Ozs0Q0FnQmMsTUFBTSxTQUFDLGFBQWE7OztzQkFkaEMsS0FBSzt1QkFDTCxLQUFLO3FCQUNMLEtBQUs7dUJBQ0wsS0FBSzt1QkFFTCxNQUFNOzBCQUVOLFlBQVksU0FBQyxPQUFPLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIElucHV0LFxuICBPdXRwdXQsXG4gIEhvc3RMaXN0ZW5lcixcbiAgRXZlbnRFbWl0dGVyLFxuICBPbkNoYW5nZXMsXG4gIFNpbXBsZUNoYW5nZXMsXG4gIEluamVjdCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNYXRQcm9ncmVzc0J1dHRvbk9wdGlvbnMgfSBmcm9tICcuLi8uLi9tYXQtcHJvZ3Jlc3MtYnV0dG9ucy5pbnRlcmZhY2UnO1xuaW1wb3J0IHtcbiAgR0xPQkFMX0NPTkZJRyxcbiAgR2xvYmFsQ29uZmlnLFxufSBmcm9tICcuLi8uLi9tYXQtcHJvZ3Jlc3MtYnV0dG9ucy5pbmplY3Rpb24tdG9rZW4nO1xuXG5AQ29tcG9uZW50KHtcbiAgLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOmNvbXBvbmVudC1zZWxlY3RvclxuICBzZWxlY3RvcjogJ21hdC1zcGlubmVyLWJ1dHRvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi9zcGlubmVyLWJ1dHRvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3NwaW5uZXItYnV0dG9uLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIE1hdFNwaW5uZXJCdXR0b25Db21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICBASW5wdXQoKSBvcHRpb25zOiBNYXRQcm9ncmVzc0J1dHRvbk9wdGlvbnM7XG4gIEBJbnB1dCgpIGJ1dHRvbklkOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGFjdGl2ZTogYm9vbGVhbjtcbiAgQElucHV0KCkgZGlzYWJsZWQ6IGJvb2xlYW47XG5cbiAgQE91dHB1dCgpIGJ0bkNsaWNrOiBFdmVudEVtaXR0ZXI8TW91c2VFdmVudD4gPSBuZXcgRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+KCk7XG5cbiAgQEhvc3RMaXN0ZW5lcignY2xpY2snLCBbJyRldmVudCddKVxuICBwdWJsaWMgaGFuZGxlQ2xpY2soZXZlbnQ6IE1vdXNlRXZlbnQpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMub3B0aW9ucy5kaXNhYmxlZCAmJiAhdGhpcy5vcHRpb25zLmFjdGl2ZSkge1xuICAgICAgdGhpcy5idG5DbGljay5lbWl0KGV2ZW50KTtcbiAgICB9XG4gIH1cblxuICBjb25zdHJ1Y3RvcihASW5qZWN0KEdMT0JBTF9DT05GSUcpIHByaXZhdGUgY29uZmlnOiBHbG9iYWxDb25maWcpIHt9XG5cbiAgZ2V0IGNvbmZpZ0V4aXN0cygpOiBib29sZWFuIHtcbiAgICByZXR1cm4gISF0aGlzLmJ1dHRvbklkICYmICEhdGhpcy5jb25maWc7XG4gIH1cblxuICBnZXQgZ2xvYmFsQ29uZmlnKCk6IE1hdFByb2dyZXNzQnV0dG9uT3B0aW9ucyB7XG4gICAgcmV0dXJuIHRoaXMuY29uZmlnRXhpc3RzXG4gICAgICA/IHRoaXMuY29uZmlnLmZpbmQoKGl0ZW0pID0+IGl0ZW0uaWQgPT09IHRoaXMuYnV0dG9uSWQpXG4gICAgICA6IHRoaXMub3B0aW9ucztcbiAgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICBpZiAoY2hhbmdlcy5hY3RpdmUpIHtcbiAgICAgIHRoaXMub3B0aW9ucy5hY3RpdmUgPSBjaGFuZ2VzLmFjdGl2ZS5jdXJyZW50VmFsdWU7XG4gICAgfVxuICAgIGlmIChjaGFuZ2VzLmRpc2FibGVkKSB7XG4gICAgICB0aGlzLm9wdGlvbnMuZGlzYWJsZWQgPSBjaGFuZ2VzLmRpc2FibGVkLmN1cnJlbnRWYWx1ZTtcbiAgICB9XG4gICAgdGhpcy5vcHRpb25zID0geyAuLi50aGlzLmdsb2JhbENvbmZpZywgLi4udGhpcy5vcHRpb25zIH07XG4gIH1cbn1cbiJdfQ==