mat-progress-buttons
Version:
Material Design Progress Buttons
50 lines • 7.27 kB
JavaScript
import { Component, Input, Output, EventEmitter, HostListener, Inject, } from '@angular/core';
import { GLOBAL_CONFIG } from '../../mat-progress-buttons.injection-token';
export class MatBarButtonComponent {
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) {
this.options = Object.assign(Object.assign({}, this.globalConfig), this.options);
if (changes.active) {
this.options.active = changes.active.currentValue;
}
if (changes.disabled) {
this.options.disabled = changes.disabled.currentValue;
}
}
}
MatBarButtonComponent.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line:component-selector
selector: 'mat-bar-button',
template: "<button\n mat-button\n [type]=\"options.type\"\n [color]=\"options.buttonColor\"\n [class.active]=\"options.active\"\n [class.mat-raised-button]=\"options.raised\"\n [class.mat-stroked-button]=\"options.stroked\"\n [class.mat-flat-button]=\"options.flat\"\n [class.fullWidth]=\"options.fullWidth\"\n [ngClass]=\"options.customClass\"\n [disabled]=\"options.active || options.disabled\"\n>\n <ng-container *ngIf=\"options.buttonIcon\">\n <mat-icon\n [class.is-mat-icon]=\"!options.buttonIcon.fontSet\"\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 >\n {{ options.buttonIcon.fontSet ? '' : options.buttonIcon.fontIcon }}\n </mat-icon>\n </ng-container>\n\n <span>{{ options.text }}</span>\n\n <mat-progress-bar\n class=\"bar\"\n *ngIf=\"options.active && !options.disabled\"\n [color]=\"options.barColor\"\n [mode]=\"options.mode\"\n [value]=\"options.value\"\n >\n </mat-progress-bar>\n</button>\n",
styles: [":host button.active{cursor:not-allowed}:host button.fullWidth{width:100%}:host button .bar{position:absolute;top:0;left:0}:host button mat-icon{padding-right:5px}:host button mat-icon.is-mat-icon{font-size:18px;position:relative;top:3px}"]
},] }
];
MatBarButtonComponent.ctorParameters = () => [
{ type: undefined, decorators: [{ type: Inject, args: [GLOBAL_CONFIG,] }] }
];
MatBarButtonComponent.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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFyLWJ1dHRvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXQtcHJvZ3Jlc3MtYnV0dG9ucy9zcmMvbGliL2NvbXBvbmVudC9iYXItYnV0dG9uL2Jhci1idXR0b24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxFQUNMLE1BQU0sRUFDTixZQUFZLEVBQ1osWUFBWSxFQUdaLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsYUFBYSxFQUFnQixNQUFNLDRDQUE0QyxDQUFDO0FBUXpGLE1BQU0sT0FBTyxxQkFBcUI7SUFlaEMsWUFBMkMsTUFBb0I7UUFBcEIsV0FBTSxHQUFOLE1BQU0sQ0FBYztRQVRyRCxhQUFRLEdBQTZCLElBQUksWUFBWSxFQUFjLENBQUM7SUFTWixDQUFDO0lBTm5FLFdBQVcsQ0FBQyxLQUFpQjtRQUMzQixJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRTtZQUNsRCxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUMzQjtJQUNILENBQUM7SUFJRCxJQUFJLFlBQVk7UUFDZCxPQUFPLENBQUMsQ0FBQyxJQUFJLENBQUMsUUFBUSxJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDO0lBQzFDLENBQUM7SUFFRCxJQUFJLFlBQVk7UUFDZCxPQUFPLElBQUksQ0FBQyxZQUFZO1lBQ3RCLENBQUMsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLEVBQUUsS0FBSyxJQUFJLENBQUMsUUFBUSxDQUFDO1lBQ3ZELENBQUMsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDO0lBQ25CLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxDQUFDLE9BQU8sbUNBQVEsSUFBSSxDQUFDLFlBQVksR0FBSyxJQUFJLENBQUMsT0FBTyxDQUFFLENBQUM7UUFDekQsSUFBSSxPQUFPLENBQUMsTUFBTSxFQUFFO1lBQ2xCLElBQUksQ0FBQyxPQUFPLENBQUMsTUFBTSxHQUFHLE9BQU8sQ0FBQyxNQUFNLENBQUMsWUFBWSxDQUFDO1NBQ25EO1FBQ0QsSUFBSSxPQUFPLENBQUMsUUFBUSxFQUFFO1lBQ3BCLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUSxHQUFHLE9BQU8sQ0FBQyxRQUFRLENBQUMsWUFBWSxDQUFDO1NBQ3ZEO0lBQ0gsQ0FBQzs7O1lBekNGLFNBQVMsU0FBQztnQkFDVCw4Q0FBOEM7Z0JBQzlDLFFBQVEsRUFBRSxnQkFBZ0I7Z0JBQzFCLGtyQ0FBMEM7O2FBRTNDOzs7NENBZ0JjLE1BQU0sU0FBQyxhQUFhOzs7c0JBZGhDLEtBQUs7dUJBQ0wsS0FBSztxQkFDTCxLQUFLO3VCQUNMLEtBQUs7dUJBRUwsTUFBTTswQkFFTixZQUFZLFNBQUMsT0FBTyxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgT3V0cHV0LFxuICBFdmVudEVtaXR0ZXIsXG4gIEhvc3RMaXN0ZW5lcixcbiAgT25DaGFuZ2VzLFxuICBTaW1wbGVDaGFuZ2VzLFxuICBJbmplY3QsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTWF0UHJvZ3Jlc3NCdXR0b25PcHRpb25zIH0gZnJvbSAnLi4vLi4vbWF0LXByb2dyZXNzLWJ1dHRvbnMuaW50ZXJmYWNlJztcbmltcG9ydCB7IEdMT0JBTF9DT05GSUcsIEdsb2JhbENvbmZpZyB9IGZyb20gJy4uLy4uL21hdC1wcm9ncmVzcy1idXR0b25zLmluamVjdGlvbi10b2tlbic7XG5cbkBDb21wb25lbnQoe1xuICAvLyB0c2xpbnQ6ZGlzYWJsZS1uZXh0LWxpbmU6Y29tcG9uZW50LXNlbGVjdG9yXG4gIHNlbGVjdG9yOiAnbWF0LWJhci1idXR0b24nLFxuICB0ZW1wbGF0ZVVybDogJy4vYmFyLWJ1dHRvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2Jhci1idXR0b24uY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgTWF0QmFyQnV0dG9uQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgQElucHV0KCkgb3B0aW9uczogTWF0UHJvZ3Jlc3NCdXR0b25PcHRpb25zO1xuICBASW5wdXQoKSBidXR0b25JZDogc3RyaW5nO1xuICBASW5wdXQoKSBhY3RpdmU6IGJvb2xlYW47XG4gIEBJbnB1dCgpIGRpc2FibGVkOiBib29sZWFuO1xuXG4gIEBPdXRwdXQoKSBidG5DbGljazogRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcjxNb3VzZUV2ZW50PigpO1xuXG4gIEBIb3N0TGlzdGVuZXIoJ2NsaWNrJywgWyckZXZlbnQnXSlcbiAgaGFuZGxlQ2xpY2soZXZlbnQ6IE1vdXNlRXZlbnQpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMub3B0aW9ucy5kaXNhYmxlZCAmJiAhdGhpcy5vcHRpb25zLmFjdGl2ZSkge1xuICAgICAgdGhpcy5idG5DbGljay5lbWl0KGV2ZW50KTtcbiAgICB9XG4gIH1cblxuICBjb25zdHJ1Y3RvcihASW5qZWN0KEdMT0JBTF9DT05GSUcpIHByaXZhdGUgY29uZmlnOiBHbG9iYWxDb25maWcpIHt9XG5cbiAgZ2V0IGNvbmZpZ0V4aXN0cygpOiBib29sZWFuIHtcbiAgICByZXR1cm4gISF0aGlzLmJ1dHRvbklkICYmICEhdGhpcy5jb25maWc7XG4gIH1cblxuICBnZXQgZ2xvYmFsQ29uZmlnKCk6IE1hdFByb2dyZXNzQnV0dG9uT3B0aW9ucyB7XG4gICAgcmV0dXJuIHRoaXMuY29uZmlnRXhpc3RzXG4gICAgICA/IHRoaXMuY29uZmlnLmZpbmQoKGl0ZW0pID0+IGl0ZW0uaWQgPT09IHRoaXMuYnV0dG9uSWQpXG4gICAgICA6IHRoaXMub3B0aW9ucztcbiAgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICB0aGlzLm9wdGlvbnMgPSB7IC4uLnRoaXMuZ2xvYmFsQ29uZmlnLCAuLi50aGlzLm9wdGlvbnMgfTtcbiAgICBpZiAoY2hhbmdlcy5hY3RpdmUpIHtcbiAgICAgIHRoaXMub3B0aW9ucy5hY3RpdmUgPSBjaGFuZ2VzLmFjdGl2ZS5jdXJyZW50VmFsdWU7XG4gICAgfVxuICAgIGlmIChjaGFuZ2VzLmRpc2FibGVkKSB7XG4gICAgICB0aGlzLm9wdGlvbnMuZGlzYWJsZWQgPSBjaGFuZ2VzLmRpc2FibGVkLmN1cnJlbnRWYWx1ZTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==